.section-title{font-size:1.4rem;color:#1a1a1a;margin-bottom:50px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;font-size:.85rem}
.features-section .uppercase-heading{font-size:14px}
.features-grid{display:grid;grid-auto-columns:1fr;grid-auto-rows:1fr;grid-template-columns:repeat(3,1fr);gap:30px}
.feature-tile{border:1px solid #ddd;padding:40px 35px;transition:all .2s ease;display:flex;flex-direction:column;border-radius:5px}
.feature-tile.pro{border-color:#fadcd9}
.feature-tile .feature-title{display:flex;align-items:center;margin-top:0;gap:15px}
.feature-tile .feature-title .h3{order:2;margin:0}
.feature-tile .feature-title .pro-badge{order:1}
.pro-icon{width:40px;height:40px;background:#313637;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;flex-shrink:0;font-weight:600}
.pro-badge{display:inline-block;background:#fadcd9;font-size:.7em;color:#ec7c71;padding:3px 10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;border-radius:5px}
.feature-description{line-height:1.7;margin-bottom:30px;flex-grow:1;font-weight:300}
.feature-tile .btn{display:inline-block;align-self:flex-start;margin-bottom:0}
.hero-proofline .dot{color:#ddd}
.hero-proofline strong{font-weight:800}
.hero-proofline a{color:#313637;font-weight:700;text-decoration:underline #ddd;text-underline-offset:25%}

/* -- hero shell ------------------------------------------------------------ */
#hero{background: #FFF;background:linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(231, 76, 60, 0.075) 100%)}
.hero h1{font-size:44px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero.text-center .hero-ctas{justify-content:center}
.hero-ctas .btn{margin:0}

/* -- help ctas ------------------------------------------------------------- */
.help-ctas .btn{flex:1 1 300px;position:relative;margin:0;padding:20px 22px 20px 68px;text-align:left;white-space:normal;border-width:2px}
.help-ctas .btn p{font-size:13.5px;line-height:1.55;letter-spacing:0;font-weight:400}
.help-ctas .btn p:last-child{margin-bottom:0}
.help-ctas .btn i{position:absolute;left:24px;top:50%;margin-top:-.5em;width:1em;height:1em;font-size:22px;line-height:1;text-align:center}
.btn-help-support small{color:rgba(255,255,255,.88)}
.btn-help-dev{color:#313637!important}
.btn-help-dev small{color:#777}
.btn.btn-help-dev:hover,.btn.btn-help-dev:focus{color:#313637!important;background-color:#fafbfc}

@media only screen and (max-width:767px){
    .help-ctas .btn{flex:1 1 100%}
}

/* -- builder card ---------------------------------------------------------- */
.pm-builder{text-align:left}
.pm-builder .pm-builder-heading{font-size:14px}

/* -- scenarios as chips ---------------------------------------------------- */
.pm-builder-options{display:flex;flex-wrap:wrap;gap:8px}
.pm-scenario{display:inline-flex;align-items:center;gap:8px;margin:0;background:#f1f1f1;border-radius:8px;padding:8px 15px 8px 11px;cursor:pointer;font-weight:600;color:#313637;transition:border-color .15s ease,background .15s ease,color .15s ease}
.pm-scenario:hover{background:#dcdcdc}
.pm-scenario.is-on{background:#fdeeec;color:#c0392b}
.pm-scenario input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.pm-scenario-box{flex:0 0 auto;width:16px;height:16px;border:1px solid #cfcfcf;border-radius:4px;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease}
.pm-scenario.is-on .pm-scenario-box{border-color:#e74c3c;background:#e74c3c}
.pm-scenario.is-on .pm-scenario-box:after{content:"\2713";color:#fff;font-size:9px;font-weight:800;line-height:1}
.pm-scenario input:focus-visible + .pm-scenario-box{outline:2px solid #e74c3c;outline-offset:2px}
.pm-scenario-text{flex:0 0 auto;font-size:13.5px;letter-spacing:-.01em;line-height:1.2}

/* -- browser window: chrome (grey) + page content (white) ------------------ */
.pm-window{border:1px solid #e7e7e7;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 12px 28px -14px rgba(49,54,55,.22)}
.pm-window-toolbar{display:flex;flex-direction:column;gap:11px;padding:12px 14px;background:#f6f6f6;border-bottom:1px solid #ededed}
.pm-window-dots{display:flex;gap:8px}
.pm-window-dots i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.pm-window-dots i:nth-child(1){background:#ff5f57}
.pm-window-dots i:nth-child(2){background:#febc2e}
.pm-window-dots i:nth-child(3){background:#28c840}
.pm-window-address{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e3e3e3;border-radius:8px;padding:9px 13px}
.pm-window-address .pm-url-text{flex:1 1 auto}
.pm-window-address .pm-lock{flex:0 0 auto;width:12px;height:12px;color:#8a8f90}
.pm-window-address .pm-reload{flex:0 0 auto;width:14px;height:14px;color:#c2c5c6}
.pm-window-content{padding:18px 18px 20px;background:#fff}
.pm-window-content .pm-builder-heading{margin-bottom:12px}
@keyframes pmFresh{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

/* -- original url (below the window) --------------------------------------- */
.pm-window-page{margin-top:20px}
.pm-window-orig{display:flex;align-items:center;gap:11px}
.pm-window-label{flex:0 0 auto;font-family:"Mulish","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#a2a2a2}

/* -- url segment colours (address + original) ------------------------------ */
.pm-url-text{min-width:0;word-break:break-all}
.pm-window-address .pm-url-text{font-weight:600;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.pm-window-orig .pm-url-text{font-weight:400;color:#8f8f8f;font-size:13px}
.pm-window-address .host,.pm-window-orig .host{color:#777;font-weight:400}
.pm-window-orig .host{color:#a9a9a9}
.pm-window-address .seg-new,.pm-window-orig .seg-new{background:#fadcd9;color:#c0392b;border-radius:3px;padding:1px 4px}
.pm-window-address del,.pm-window-orig del{color:#e74c3c;text-decoration:line-through}
.pm-window-address .is-fresh,.pm-window-orig .is-fresh{animation:pmFresh .4s ease-out}

@media (max-width: 992px) {
    .pm-builder{margin:50px auto!important}
    .hero h1{font-size:36px}
    .features-grid{grid-template-columns:2fr}
    .pm-reload{display:none}
}

@media only screen and (max-width:767px){
    .hero-ctas{flex-direction:column;margin-top:26px}
    .hero-ctas .btn{width:100%}
    .pm-window-orig{flex-wrap:wrap;gap:6px}
    .pm-builder-options{flex-direction:column}
    .pm-scenario{display:flex}
}

@media (max-width: 640px) {
    .features-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
    .pm-scenario{transition:none}
    .pm-window-address .is-fresh,.pm-window-orig .is-fresh{animation:none}
}