:root{ --ink:#1C1814; --slate:#5C564E; --line:#E8E2DA; --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8; --orange-line:#F6CDB6; --mute:#877F74; --cream:#FBF6F0; --cream-deep:#F5EBDF; --dark:#191512; --paper:#FFFFFF; --green:#1E8A5A; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* ---- GLOBAL OVERFLOW GUARD ---- Stops any single wide child pushing the whole page sideways on a phone. This MUST stay overflow-x:clip and never go back to overflow-x:hidden: hidden on breaks position:sticky, which the jump nav depends on. ---- */ html,body{max-width:100%;overflow-x:clip} img,svg,video,table{max-width:100%} /* anchored sections clear the sticky jump nav */ section[id],header[id],div[id]{scroll-margin-top:64px} html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased} body h1,body h2,body h3,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} section{padding:88px 0} .sec-cream{background:var(--cream)} .eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)} .kicker{color:var(--slate);font-size:18px;max-width:60ch} .accent{color:var(--orange)} .btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px;padding:15px 28px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease} .btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px} .btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(232,80,26,.28)} .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{border:1.5px solid var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff} .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink)} .h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;margin-bottom:14px} .eyebrow + .h2{margin-top:18px} .h2 .accent{font-weight:800} .sec-intro{color:var(--slate);max-width:64ch;margin-bottom:40px} /* shared spacing + on-dark variants, so no inline style carries design */ .gap-lg{margin-top:26px} .btn-on-dark{border-color:#4A4239;color:#F1ECE4} .btn-on-dark:hover{background:#F1ECE4;color:var(--ink)} .eyebrow-on-dark{background:transparent;border-color:#3A332C;color:#F1A07E} /* ============================================================ HERO Sizing is locked to the shared V2A service-page hero (AI SEO page is the reference): 70px/86px padding, 165deg cream gradient with a dot texture and a clipped base, 1.02fr/.98fr columns at 48px gap, and a 468px min-height on both columns so every service hero resolves to the same length. The right column height lock is released on phones in the MOBILE block. ============================================================ */ .hero{position:relative;padding:70px 0 86px;background:linear-gradient(165deg,var(--cream) 0%,#FFF7F2 46%,#fff 100%);overflow:hidden;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px));clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px))} .hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--cream-deep) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.7;pointer-events:none} .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;min-height:468px} .hero h1{font-size:clamp(37px,4.8vw,56px);font-weight:800;margin:22px 0 18px;color:var(--ink)} .hero .kicker{color:var(--slate);font-size:17.5px;max-width:58ch;margin-bottom:22px;line-height:1.72} .kicker mark{background:linear-gradient(180deg,transparent 58%,#FFDCC9 58%);color:var(--ink);font-weight:600;padding:0 2px} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px} .hero-ctas .btn{padding:14px 22px;font-size:14.8px;white-space:nowrap} .hero-terms{display:flex;flex-wrap:wrap;gap:8px} .hero-terms span{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--cream-deep);background:rgba(255,255,255,.82);border-radius:999px;padding:6px 13px;font-size:12.6px;font-weight:600;color:var(--ink)} .hero-terms span::before{content:"\2713";color:var(--orange);font-weight:800;font-size:10px} .wl-line{margin-top:20px;font-size:13.5px;color:var(--slate);border-top:1px dashed var(--line);padding-top:14px} .wl-line a{color:var(--orange-deep);font-weight:700;text-decoration:none} .wl-line a:hover{text-decoration:underline} /* hero visual: a client performance panel. Height locked to the hero grid so this page's hero matches the other service pages. */ .gsc-viz{position:relative;min-height:468px;display:flex;align-items:center;justify-content:center;padding:0} .gsc-glow{position:absolute;inset:8% 3%;background:radial-gradient(ellipse at 55% 40%,rgba(232,80,26,.14),transparent 62%);filter:blur(4px);pointer-events:none} .gsc-stack{position:absolute;width:480px;max-width:92%;height:74%;background:#fff;border:1.5px solid var(--line);border-radius:22px;transform:rotate(-3.5deg) translate(-12px,10px);box-shadow:0 18px 44px rgba(28,24,20,.07)} .gsc-card{position:relative;width:min(480px,94%);background:var(--paper);border:1.5px solid var(--line);border-radius:22px;box-shadow:0 38px 90px rgba(28,24,20,.15),0 5px 16px rgba(28,24,20,.06);z-index:1;overflow:hidden} .gsc-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--cream);border-bottom:1.5px solid var(--line)} .gsc-dots{display:inline-flex;gap:5px} .gsc-dots i{width:9px;height:9px;border-radius:50%;background:#DED5C9} .gsc-url{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gsc-url b{color:var(--ink);font-weight:700} .gsc-body{padding:20px 24px 20px} .gsc-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap} .gsc-cap .gc-t{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:2px} .gsc-cap .gc-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;line-height:1} .gsc-cap .gc-big .up{color:var(--green);font-size:15px;vertical-align:4px} .gsc-cap .gc-s{font-size:11.5px;color:var(--slate);text-align:right;line-height:1.5} .gsc-cap .gc-s b{display:block;color:var(--ink);font-size:13px} .gsc-chart{position:relative;border:1.5px solid var(--cream-deep);background:linear-gradient(180deg,#fff, var(--cream));border-radius:14px;padding:12px 14px 8px;margin-bottom:14px} .gsc-chart svg{display:block;width:100%;height:124px} .gsc-axis{display:flex;justify-content:space-between;margin-top:6px;padding:0 2px} .gsc-axis span{font-size:10px;font-weight:700;color:#B7AFA3;letter-spacing:.04em} .gsc-axis span.on{color:var(--orange-deep)} .gsc-phases{display:flex;gap:6px;margin-bottom:12px} .gsc-phases i{flex:1;height:5px;border-radius:999px;background:#EFE7DC;position:relative} .gsc-phases i.f1{background:#E8C7B2} .gsc-phases i.f2{background:#F1A07E} .gsc-phases i.f3{background:var(--orange)} .gsc-legend{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px} .gsc-legend span{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);flex:1} .gsc-legend span:last-child{text-align:right} .gsc-legend span:nth-child(2){text-align:center} .gsc-kw{border-top:1px solid var(--cream-deep);padding-top:12px} .gkw{display:flex;align-items:center;gap:12px;padding:8px 0} .gkw .k-t{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gkw .k-t span{display:block;font-size:11px;color:var(--slate);font-weight:500} .gkw .k-pos{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13.5px;color:var(--slate)} .gkw .k-pos b{color:var(--ink)} .gkw .k-jump{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:#fff;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;white-space:nowrap} .gkw .k-jump .up{color:#7ED9A2} .gsc-foot{margin-top:8px;font-size:11px;color:var(--slate);display:flex;align-items:center;gap:7px} .gsc-foot::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--green)} /* ============================================================ STATS BAND Shared V2A component, copied from the live AI SEO and local SEO pages. House sizes: 34px numeral, 12px label, 12.5px sub, 34px by 30px padding, four equal columns inside a 1240px container with side padding stripped, collapsing to two columns on a phone. If this band ever looks different from the other service pages it has been edited and should be reverted. Repeating unit: .stat ============================================================ */ .stats-band{background:var(--dark)} .stats-wrap{max-width:1240px;margin:0 auto;padding:0} .stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr} .stat{padding:34px 30px;color:#fff} .stat:nth-child(even){background:var(--orange)} .stat .st-num{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;line-height:1.05} .stat .st-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px} .stat .st-sub{font-size:12.5px;margin-top:5px;color:rgba(255,255,255,.78)} .stat:nth-child(even) .st-sub{color:rgba(255,255,255,.9)} /* ============================================================ JUMP NAV (sticky in-page anchors) Mirrors the AI SEO and local SEO service pages. Elementor: build as an HTML widget pinned directly under the stats band. Add or remove links by editing the tags only. Section offset is handled by the scroll-margin-top rule at the top of this stylesheet. ============================================================ */ .jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)} .jump-in{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none} .jump-in::-webkit-scrollbar{display:none} .jump a{flex-shrink:0;padding:15px 14px;font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s} .jump a:hover{color:var(--ink);border-bottom-color:var(--orange)} .jump .j-cta{margin-left:auto;background:var(--orange);color:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none} .jump .j-cta:hover{border-bottom-color:transparent;color:#fff} /* ============ PRINCIPLES ============ */ .truth-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:38px} .truth-line .t1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--ink)} .truth-line .t-slash{color:var(--orange);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px} .truth-line .t2{font-size:16px;color:var(--slate)} .manif{border-top:1.5px solid var(--line)} .mrow{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:14px 36px;padding:30px 10px;border-bottom:1.5px solid var(--line);align-items:start;transition:background .2s,padding .2s} .mrow:hover{background:var(--paper);border-radius:14px} .mrow .m-i{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--orange);font-size:14px;letter-spacing:.06em;padding-top:8px} .mrow h3{font-size:clamp(20px,2.4vw,26px);line-height:1.2} .mrow h3 em{font-style:normal;color:#B7AFA3;font-weight:600;position:relative} .mrow h3 em::after{content:"";position:absolute;left:0;right:0;top:56%;height:2px;background:var(--orange);transform:rotate(-2deg)} .mrow .m-q{margin-top:8px;font-size:13px;font-style:italic;color:var(--orange-deep);font-weight:600} .mrow .m-q::before{content:"\201C"} .mrow .m-q::after{content:"\201D"} .mrow p{font-size:14.5px;color:var(--slate);padding-top:6px} .mrow p strong{color:var(--ink)} /* ============ WHAT WE DO ============ */ .do-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .do{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s} .do:hover{border-color:var(--orange);transform:translateY(-3px)} .do .do-ic{width:42px;height:42px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .do .do-ic svg{width:20px;height:20px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .do h3{font-size:16px;margin-bottom:6px} .do p{font-size:13px;color:var(--slate);flex:1} .fs-note{margin-top:30px;display:flex;gap:16px;align-items:baseline;background:var(--cream);border:1.5px solid var(--cream-deep);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap} .fs-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px} .fs-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)} .fs-note span strong{color:var(--ink)} .fs-note a{color:var(--orange-deep);font-weight:700;text-decoration:none} .fs-note a:hover{text-decoration:underline} /* ============ PROCESS ============ */ .pflow{display:flex;flex-direction:column;gap:12px} .pstep{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:20px 24px;transition:border-color .3s,background .3s,box-shadow .3s} .pstep-head{display:flex;align-items:center;gap:18px} .pstep-n{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--cream);color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s} .pstep h3{font-size:17px;margin:0} .pstep-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s,margin .35s} .pstep-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0;padding-left:62px} .pstep-body .p-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;padding-left:62px} .pstep-body .p-tags span{border:1.5px solid var(--line);background:var(--cream);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--ink)} .pflow-js .pstep{opacity:.62} .pflow-js .pstep .pstep-body{max-height:0;opacity:0} .pflow-js .pstep.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 36px rgba(232,80,26,.10)} .pflow-js .pstep.active .pstep-n{background:var(--orange);color:#fff} .pflow-js .pstep.active .pstep-body{max-height:600px;opacity:1} /* ============ FIRST 90 DAYS + RHYTHM ============ */ .t90-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .t90-col{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s} .t90-col:hover{border-color:var(--orange);transform:translateY(-3px)} .t90-col .t90-tag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:5px 13px;margin-bottom:14px} .t90-col.hot .t90-tag{background:var(--orange)} .t90-col h3{font-size:17px;margin-bottom:8px} .t90-col ul{list-style:none;flex:1} .t90-col li{position:relative;padding:5px 0 5px 22px;font-size:13.5px;color:var(--slate);line-height:1.5} .t90-col li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--orange)} .seq-note{margin-top:26px;display:flex;gap:16px;align-items:baseline;background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--orange);border-radius:0 16px 16px 0;padding:20px 26px;flex-wrap:wrap} .seq-note b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap;font-size:15.5px} .seq-note span{flex:1;min-width:260px;font-size:14.5px;color:var(--slate)} .seq-note span strong{color:var(--ink)} .seq-note a{color:var(--orange-deep);font-weight:700;text-decoration:none} .seq-note a:hover{text-decoration:underline} .rhythm{margin-top:36px;background:var(--dark);border-radius:20px;padding:30px 34px;color:#fff} .rhythm .rh-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;margin-bottom:4px} .rhythm .rh-t .accent{color:var(--orange)} .rhythm .rh-s{font-size:13.5px;color:#C9C2B8;margin-bottom:22px} .rh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .rh{position:relative;background:#211B15;border:1.5px solid #3A332C;border-radius:14px;padding:18px 18px 16px} .rh .rh-n{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F1A07E;margin-bottom:6px} .rh b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;margin-bottom:4px} .rh p{font-size:12.5px;color:#C9C2B8;line-height:1.5} .rh::after{content:"\2192";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--orange);font-weight:800;font-size:16px;z-index:1} .rh:last-child::after{content:none} /* ============================================================ TRACK CHOOSER (Managed SEO / Managed SEO + AI Visibility) Same component as the local SEO page: two selectable cards rather than a pill toggle, so both options can be read before choosing and the live one is unmistakable. Selected state is driven by aria-pressed, which the pricing script sets, so there is no extra class to maintain. Without JavaScript both cards stay visible and the base prices show. ============================================================ */ .track-head{margin-bottom:16px} .track-head b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;color:var(--ink);margin-bottom:4px} .track-head span{font-size:14px;color:var(--slate)} .track{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px} .trk{position:relative;display:flex;align-items:flex-start;gap:14px;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:20px 22px;cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .18s,box-shadow .18s,background .18s} .trk:hover{border-color:var(--orange-line)} .trk:focus-visible{outline:3px solid var(--orange);outline-offset:3px} .trk-dot{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);margin-top:3px;position:relative;transition:border-color .18s} .trk-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .18s} .trk-body{display:block;min-width:0} .trk-body b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:5px;line-height:1.25} .trk-body em{display:block;font-style:normal;font-size:13px;color:var(--slate);line-height:1.6} .trk-price{display:block;margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-deep)} .trk-flag{position:absolute;top:-11px;left:20px;display:none;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);color:#fff;border-radius:999px;padding:4px 12px} .trk[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-soft);box-shadow:0 14px 34px rgba(232,80,26,.13)} .trk[aria-pressed="true"] .trk-dot{border-color:var(--orange)} .trk[aria-pressed="true"] .trk-dot::after{transform:scale(1)} .trk[aria-pressed="true"] .trk-flag{display:inline-block} .ai-line{display:none;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--orange-deep);background:var(--orange-soft);border:1.5px solid var(--orange);border-radius:999px;padding:4px 11px;margin-top:10px;width:fit-content} .ai-on .ai-line{display:inline-flex} /* ============ ACCORDION: HOW PLANS RUN ============ Uses native
. Content stays in the HTML source, so search engines and AI crawlers read it whether it is open or closed. No JS. */ .acc{margin-top:36px;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .2s,box-shadow .2s} .acc[open]{border-color:var(--orange);box-shadow:0 18px 44px rgba(232,80,26,.10)} .acc-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:24px 28px;background:var(--cream);transition:background .2s} .acc-sum::-webkit-details-marker{display:none} .acc-sum:hover{background:var(--cream-deep)} .acc-sum:focus-visible{outline:3px solid var(--orange);outline-offset:-3px} .acc-ic{flex-shrink:0;width:48px;height:48px;border-radius:14px;background:var(--paper);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center} .acc-ic svg{width:22px;height:22px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .acc-t{flex:1;min-width:0} .acc-t b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25} .acc-t em{display:block;font-style:normal;font-size:13.5px;color:var(--slate);margin-top:4px} .acc-mark{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap} .acc-mark i{width:26px;height:26px;border-radius:50%;border:2px solid var(--orange);position:relative;display:inline-block} .acc-mark i::before,.acc-mark i::after{content:"";position:absolute;background:var(--orange);transition:transform .3s} .acc-mark i::before{left:6px;right:6px;top:11px;height:2px} .acc-mark i::after{top:6px;bottom:6px;left:11px;width:2px} .acc[open] .acc-mark i::after{transform:rotate(90deg)} .acc[open] .acc-mark .m-open{display:none} .acc .acc-mark .m-close{display:none} .acc[open] .acc-mark .m-close{display:inline} .phase{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:26px 28px;border-top:1.5px solid var(--line);align-items:start} .phase.now{background:#FFF9F5} .ph-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:5px 13px;margin-bottom:10px} .phase.now .ph-badge{background:var(--orange)} .ph-side h4{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;line-height:1.2} .ph-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px 24px} .ph-list li{position:relative;padding:7px 0 7px 26px;font-size:14px;color:var(--ink);line-height:1.55} .ph-list li::before{content:"\2713";position:absolute;left:0;top:7px;color:var(--orange);font-weight:800;font-size:13px} .ph-list li.off{color:var(--slate)} .ph-list li.off::before{content:"\2014";color:#C9BFB1;font-weight:700} .ph-why{display:flex;gap:20px;align-items:flex-start;padding:26px 28px;background:var(--dark);color:#fff;flex-wrap:wrap} .ph-why .pw-q{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;line-height:1.3;max-width:15ch;color:#fff} .ph-why .pw-q .accent{color:var(--orange)} .ph-why p{flex:1;min-width:280px;font-size:14px;color:#C9C2B8;line-height:1.7} .ph-why p strong{color:#fff} /* ============ LINK RANGE BAND ============ */ .lr{margin-top:26px;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;background:var(--paper);border:1.5px solid var(--line);border-left:5px solid var(--orange);border-radius:0 20px 20px 0;padding:30px 34px} .lr-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:10px} .lr-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)} .lr h3{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;line-height:1.22} .lr h3 .accent{color:var(--orange)} .lr p{font-size:14.5px;color:var(--slate);line-height:1.7} .lr p strong{color:var(--ink)} .lr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px} .lr-chips span{display:inline-flex;align-items:center;gap:8px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;color:var(--ink)} .lr-chips span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--orange)} .lr-chips span.alt::before{background:#F1A07E} .lr-chips span.neu::before{background:#DED5C9} /* ============ FLEX BAND POINTS ============ */ .fb-points{list-style:none;margin-top:14px} .fb-points li{position:relative;padding:8px 0 8px 28px;font-size:14px;color:#C9C2B8;line-height:1.6} .fb-points li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:2px;background:var(--orange)} .fb-points li b{color:#fff;font-weight:700} /* ============ MID CTA BAND ============ */ .midcta{background:var(--dark);padding:52px 0} .midcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .midcta h2{color:#fff;font-size:clamp(22px,2.8vw,30px)} .midcta h2 .accent{color:var(--orange)} .midcta p{color:#C9C2B8;font-size:14.5px;margin-top:4px} .midcta .mc-btns{display:flex;gap:12px;flex-wrap:wrap} /* ============ WHY V2A (dark) ============ */ .why-dark{background:var(--dark);color:#fff;border-top:4px solid var(--orange)} .why-dark .h2{color:#fff} .why-dark .sec-intro{color:#C9C2B8} .why-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .why{background:#211B15;border:1.5px solid #3A332C;border-radius:18px;padding:26px 24px;transition:border-color .15s,transform .15s} .why:hover{border-color:var(--orange);transform:translateY(-3px)} .why .w-ic{width:40px;height:40px;border-radius:11px;background:rgba(232,80,26,.14);border:1.5px solid rgba(232,80,26,.4);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .why .w-ic svg{width:19px;height:19px;stroke:#F1A07E;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .why h3{font-size:16.5px;margin-bottom:7px;color:#fff} .why p{font-size:13.5px;color:#C9C2B8} .why-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .why-cta .micro{font-size:13px;color:#9A9288} /* ============ PRICING ============ */ .assure-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px} .assure-chips .chip{background:var(--cream);display:inline-flex;align-items:center;gap:7px;border-color:var(--cream-deep)} .assure-chips .chip::before{content:"\2713";color:var(--orange);font-weight:800} .pf{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:22px 24px;font-size:14px;color:var(--slate)} .pf b{display:block;font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);margin-bottom:4px;font-size:15.5px} .pf-answer{margin-bottom:36px;border-left:4px solid var(--orange);border-radius:0 16px 16px 0} .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} .plan{background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:28px 24px 24px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s,box-shadow .15s} .plan:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 18px 44px rgba(28,24,20,.08)} .plan.hot{border:2px solid var(--orange);box-shadow:0 20px 50px rgba(232,80,26,.14)} .plan .p-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 14px;white-space:nowrap} .plan h3{font-size:20px} .plan .p-for{font-size:12.5px;color:var(--slate);margin:6px 0 16px;min-height:56px;line-height:1.5} .plan .p-pricebox{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:14px;padding:14px 16px;margin-bottom:16px} .plan .p-start{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep)} .plan .p-price{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:29px;line-height:1.15} .plan .p-price small{font-size:12px;color:var(--slate);font-weight:600;font-family:'Inter'} .plan .p-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);margin:2px 0 6px} .plan .p-lbl-dark{color:#F1A07E} .plan ul{list-style:none;margin:0 0 14px} .plan li{position:relative;padding:4.5px 0 4.5px 21px;font-size:12.6px;color:var(--ink);line-height:1.5} .plan li::before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:800} .plan ul.cap li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);top:11px} .plan .p-spacer{flex:1} .plan .btn{text-align:center;font-size:13.5px;padding:12px 14px;width:100%} .plan .p-alt{margin-top:9px;text-align:center;font-size:12px} .plan .p-alt a{color:var(--orange-deep);font-weight:700;text-decoration:none} .plan .p-alt a:hover{text-decoration:underline} .plan.custom{background:var(--dark);border-color:var(--dark);color:#fff} .plan.custom h3{color:#fff} .plan.custom .p-for{color:#C9C2B8} .plan.custom .p-pricebox{background:#211B15;border-color:#3A332C} .plan.custom .p-price{color:#fff;font-size:20px;padding:3px 0} .plan.custom li{color:#E8E2DA} .plan.custom .p-alt a{color:#F1A07E} .flex-band{margin-top:36px;background:var(--dark);border-radius:20px;padding:32px 36px;color:#fff;display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center} .fb-viz{display:flex;gap:18px;align-items:flex-end} .fb-col{display:flex;flex-direction:column;align-items:center;gap:8px} .fb-stackwrap{height:120px;width:44px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:10px;overflow:hidden} .fb-stack{display:flex;flex-direction:column;width:100%;height:100%} .fb-stack i{display:block;width:100%} .fb-stack .sg-t{background:#8C4A2F} .fb-stack .sg-c{background:#E8975C} .fb-stack .sg-a{background:var(--orange)} .fb-col span{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9A9288} .fb-legend{display:flex;flex-direction:column;gap:6px;margin-left:6px;align-self:center} .fb-legend span{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#C9C2B8;white-space:nowrap} .fb-legend i{width:10px;height:10px;border-radius:3px;display:inline-block} .flex-band h3{font-size:20px;margin-bottom:8px;color:#fff} .flex-band h3 .accent{color:var(--orange)} .flex-band p{font-size:14px;color:#C9C2B8} .flex-band p strong{color:#fff} .price-cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .price-cta-row .hint{flex-basis:100%;font-size:13.5px;color:var(--slate);background:var(--cream);border:1.5px solid var(--cream-deep);border-left:3px solid var(--orange);border-radius:0 10px 10px 0;padding:11px 15px;margin-bottom:4px} .price-cta-row .hint b{color:var(--ink)} .price-foot{margin-top:22px;font-size:13px;color:var(--slate)} .price-foot a{color:var(--orange-deep);font-weight:700;text-decoration:none} .price-foot a:hover{text-decoration:underline} /* ============ COMPARISON (dark) ============ */ .compare-dark{background:var(--dark);color:#fff;border-top:4px solid var(--orange)} .compare-dark .h2{color:#fff} .compare-dark .sec-intro{color:#C9C2B8} .compare-dark .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E} .tbl-scroll{overflow-x:auto;border-radius:18px;border:1.5px solid #3A332C} table.cmp{display:table;width:100%;border-collapse:collapse;min-width:760px;background:#211B15;font-size:14px;table-layout:fixed} .cmp th,.cmp td{padding:14px 20px;text-align:left;border-bottom:1px solid #33291F;vertical-align:top} .cmp thead th{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;background:#2A241E;width:22%} .cmp thead th.v2a{background:var(--orange);color:#fff;width:40%} .cmp thead th:last-child{width:38%} .cmp td:first-child{color:#E8E2DA;font-weight:700;font-size:13px;width:22%} .cmp td.v2a{background:rgba(232,80,26,.12);color:#fff;width:40%} .cmp td{color:#9A9288} .cmp td.v2a b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px} .cmp td.v2a small{display:block;font-size:12.5px;color:#C9C2B8;margin-top:2px} .cmp .yes{color:#7ED9A2;font-weight:800;margin-right:7px} .cmp .no{color:#E58080;font-weight:800;margin-right:7px} /* ============ INDUSTRIES ============ */ .ind-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ind-t{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:24px 22px 22px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s} .ind-t:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 16px 40px rgba(28,24,20,.08)} .ind-t::after{content:"";position:absolute;top:0;left:22px;right:auto;width:44px;height:3px;border-radius:0 0 4px 4px;background:var(--orange);opacity:0;transition:opacity .15s} .ind-t:hover::after{opacity:1} .ind-t .it-head{display:flex;align-items:center;gap:13px;margin-bottom:13px} .ind-t .it-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-deep);display:flex;align-items:center;justify-content:center} .ind-t .it-ic svg{width:20px;height:20px;stroke:var(--orange-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ind-t h3{font-size:16.5px} .ind-t .sub-chips{display:flex;flex-wrap:wrap;gap:7px} .ind-t .sub-chips span{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--ink)} .ind-close{margin-top:32px;text-align:center;font-size:14.5px;color:var(--slate)} .ind-close a{color:var(--orange-deep);font-weight:700;text-decoration:none} .ind-close a:hover{text-decoration:underline} /* ============ ECOSYSTEM + WHITE LABEL ============ */ .eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .eco{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 22px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s} .eco:hover{border-color:var(--orange);transform:translateY(-3px)} .eco .wc-num{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;font-weight:800;color:var(--orange);letter-spacing:.06em} .eco h3{font-size:17.5px;margin:10px 0 8px} .eco p{font-size:13.5px;color:var(--slate);flex:1;margin-bottom:18px} .eco .btn{text-align:center;font-size:13.5px;padding:11px 12px;width:100%} .wl-band{margin-top:36px;background:var(--dark);border-radius:20px;padding:34px 38px;color:#fff;display:flex;align-items:center;gap:28px;flex-wrap:wrap;border-left:5px solid var(--orange)} .wl-band .wlb-txt{flex:1;min-width:280px} .wl-band h3{font-size:22px;margin-bottom:6px;color:#fff} .wl-band h3 .accent{color:var(--orange)} .wl-band p{font-size:14.5px;color:#C9C2B8} .wl-band .btn{white-space:nowrap} /* ============================================================ INVOICE REQUEST MODAL There is no checkout on this page. Plan buttons carry data-open-invoice and open this dialog; the invoice is sent afterwards. Repeating unit: none, this is a single block. ============================================================ */ .modal[hidden]{display:none} .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px} .modal-backdrop{position:absolute;inset:0;background:rgba(26,21,15,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .modal-card{position:relative;z-index:1;background:var(--paper);border-radius:20px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.4);animation:modal-in .22s ease-out} @keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--slate);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s} .modal-x:hover{border-color:var(--orange);color:var(--orange-deep)} .modal-body{padding:32px 34px 28px} .modal-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border-radius:999px;padding:5px 13px;margin-bottom:14px} .modal-card h3{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;color:var(--ink);margin-bottom:10px;line-height:1.2} .modal-lede{font-size:14.5px;color:var(--slate);margin-bottom:22px;line-height:1.6} .mf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .mf-field{margin-bottom:14px;display:flex;flex-direction:column;min-width:0} .mf-field label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .mf-field .req{color:var(--orange-deep)} .mf-field .opt{color:var(--slate);font-weight:400} .mf-field input,.mf-field select,.mf-field textarea{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;width:100%;max-width:100%;transition:border-color .15s,box-shadow .15s} .mf-field input::placeholder,.mf-field textarea::placeholder{color:#A69E93} .mf-field input:focus,.mf-field select:focus,.mf-field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,80,26,.14)} .mf-field textarea{resize:vertical} .mf-total{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:#fff;border-radius:12px;padding:15px 20px;margin-top:6px} .mf-total-label{font-size:13.5px;font-weight:600;color:#C9C2B8} .mf-total-amt{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;white-space:nowrap} .mf-total-note{font-size:12px;color:var(--slate);margin:10px 0 18px;line-height:1.55} .mf-submit{width:100%;background:var(--orange);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;border:none;border-radius:12px;padding:15px;cursor:pointer;box-shadow:0 8px 22px rgba(232,80,26,.3);transition:transform .15s} .mf-submit:hover{transform:translateY(-2px)} .mf-submit:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .mf-note{font-size:12.5px;color:var(--slate);text-align:center;margin-top:12px} .modal-done{text-align:center;padding-top:44px} .done-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font-size:28px;font-weight:800;margin-bottom:16px} .modal-done .modal-lede{margin-bottom:24px} /* ============ FAQ ============ */ .wrap-narrow{max-width:880px} .faq-list{margin-top:34px} .faq-foot{margin-top:24px;color:var(--slate)} .faq-foot a{color:var(--orange-deep);font-weight:700} .qgroup{margin-bottom:26px} .qgroup>h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--line);font-family:'Inter',sans-serif} .qflow{display:flex;flex-direction:column;gap:10px} .qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:18px 22px;transition:border-color .3s,box-shadow .3s,opacity .3s} .qitem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer} .qitem-head h3{font-size:16px;font-weight:700;margin:0;color:var(--ink)} .qitem-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative;transition:border-color .3s,background .3s} .qitem-mark::before,.qitem-mark::after{content:"";position:absolute;background:var(--slate);transition:background .3s,transform .3s} .qitem-mark::before{left:5px;right:5px;top:9px;height:2px} .qitem-mark::after{top:5px;bottom:5px;left:9px;width:2px} .qitem-body{max-height:600px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s} .qitem-body p{color:var(--slate);font-size:14.5px;margin:14px 0 0} .qflow-js .qitem{opacity:.7} .qflow-js .qitem .qitem-body{max-height:0;opacity:0} .qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 12px 30px rgba(232,80,26,.09)} .qflow-js .qitem.active .qitem-mark{border-color:var(--orange);background:var(--orange)} .qflow-js .qitem.active .qitem-mark::before,.qflow-js .qitem.active .qitem-mark::after{background:#fff} .qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)} .qflow-js .qitem.active .qitem-body{max-height:600px;opacity:1} /* ============ FINAL CTA + FORM ============ */ .cta-band{background:var(--dark);color:#fff;padding:96px 0} .cta-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center} .cta-band h2{font-size:clamp(30px,4vw,44px);margin:18px 0 14px;color:#fff} .cta-band .cta-sub{color:#C9C2B8;max-width:56ch;margin-bottom:24px} .cta-list{list-style:none;margin-bottom:22px} .cta-list li{position:relative;padding:7px 0 7px 30px;font-size:15px;color:#E8E2DA} .cta-list li::before{content:"\2713";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:6px;background:rgba(232,80,26,.18);border:1.5px solid var(--orange);color:#F1A07E;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center} .cta-micro{font-size:13px;color:#9A9288;margin-top:18px} .form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.3)} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .f-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)} .f-field input,.f-field select,.f-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14px;background:var(--cream);color:var(--ink)} .f-field textarea{min-height:90px;resize:vertical} .f-field-last{margin-bottom:16px} .form-card .btn{width:100%;text-align:center;margin-top:6px} .form-note{text-align:center;font-size:12px;color:var(--slate);margin-top:12px} /* footer */ footer{background:#120E0B;color:#9A9288;padding:34px 0;font-size:13px} .foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-base a{color:#C9C2B8;text-decoration:none} .foot-base a:hover{color:#fff} .foot-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#fff;font-size:15px} .foot-brand i{font-style:normal;color:var(--orange)} /* ============================================================ MOBILE (single consolidated breakpoint set) Everything responsive lives here so one place controls phones. Rules of this block: multi-column grids go to one card per row, fixed desktop heights release to auto, absolutely positioned decoration goes out of flow, the comparison table becomes stacked cards instead of scrolling sideways, and nothing keeps a nowrap or a min-width wider than the screen. Verified at 390px with no horizontal scroll. ============================================================ */ @media(max-width:1080px){ .do-grid{grid-template-columns:1fr 1fr} .plan-grid{grid-template-columns:1fr 1fr} .t90-grid{grid-template-columns:1fr 1fr} .why-grid{grid-template-columns:1fr 1fr} .ind-tiles{grid-template-columns:1fr 1fr} .eco-grid{grid-template-columns:1fr 1fr} .lr{grid-template-columns:1fr;gap:20px} .ph-list{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr 1fr} .rh-grid{grid-template-columns:1fr 1fr} .rh:nth-child(2)::after{content:none} } @media(max-width:880px){ .hero{padding:64px 0 78px} .hero-grid,.cta-grid{grid-template-columns:1fr} section{padding:66px 0} /* hero visual: height lock released, decorative back card removed */ .hero-grid{min-height:0} .gsc-viz{min-height:0;padding:22px 0 0} .gsc-stack,.gsc-glow{display:none} .mrow{grid-template-columns:44px 1fr;gap:8px 18px} .mrow p{grid-column:2} .acc-sum{gap:14px;padding:18px 20px} .acc-mark span{display:none} .acc[open] .acc-mark .m-close{display:none} .phase{grid-template-columns:1fr;gap:14px;padding:22px 20px} /* label-and-prose band: it must stack, not sit side by side. Leaving it as a flex row lets the paragraph collapse to a sliver and wrap one word per line. Same pattern as .fs-note and .seq-note below. */ .ph-why{flex-direction:column;gap:12px;padding:22px 20px} .ph-why .pw-q{max-width:none} .ph-why p{min-width:0;width:100%} .ind-tiles{grid-template-columns:1fr} .eco-grid{grid-template-columns:1fr} .flex-band{grid-template-columns:1fr;gap:24px} .midcta .wrap{flex-direction:column;align-items:flex-start} /* JUMP NAV ON SMALL SCREENS. The row wraps so every option is visible at once and nothing has to be scrolled sideways, and the CTA drops onto its own full-width line underneath. The underline hover is swapped for a filled pill, which reads better on a wrapped block than a row of hanging borders. If links are added here, re-check the scroll-margin-top values below: they exist to stop an anchored heading landing behind this taller bar. */ .jump-in{flex-wrap:wrap;overflow-x:visible;gap:2px 4px;padding-top:10px;padding-bottom:12px} .jump a{flex-shrink:1;padding:8px 11px;font-size:12.5px;border-bottom:none;border-radius:8px} .jump a:hover{background:var(--cream);color:var(--ink);border-bottom-color:transparent} .jump .j-cta{margin-left:0;width:100%;text-align:center;padding:12px 16px;margin-top:8px} .jump .j-cta:hover{background:var(--orange-deep);color:#fff} /* taller nav needs a deeper anchor offset */ section[id],header[id],div[id]{scroll-margin-top:132px} } @media(max-width:760px){ /* track chooser: one card per row so both stay fully readable */ .track{grid-template-columns:1fr;gap:12px} /* comparison table becomes stacked cards: no sideways scrolling. Column order on this page is label, Visual2Action, other agencies. */ .tbl-scroll{overflow:visible;border:none;border-radius:0} table.cmp{min-width:0;background:transparent;display:block} .cmp tbody,.cmp tr,.cmp td{display:block;width:100%} .cmp thead{display:none} .cmp tr{background:#211B15;border:1.5px solid #3A332C;border-radius:16px;overflow:hidden;margin-bottom:14px} .cmp td{border-bottom:none;padding:14px 18px;width:auto} .cmp td:first-child{background:var(--dark);color:#fff;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:11px 18px;width:auto} .cmp td.v2a{width:auto} .cmp td.v2a::before{content:"Visual2Action";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#F1A07E;margin-bottom:5px} .cmp td:last-child::before{content:"Most SEO agencies";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:5px} .cmp td:last-child{border-top:1.5px solid #33291F} } @media(max-width:640px){ .wrap{padding:0 18px} .jump a{padding:7px 10px;font-size:12px} section[id],header[id],div[id]{scroll-margin-top:168px} /* every two-column grid collapses to one */ .do-grid,.plan-grid,.t90-grid,.why-grid,.rh-grid,.ind-tiles,.eco-grid{grid-template-columns:1fr} .f-row,.mf-row{grid-template-columns:1fr;gap:0} .lr{padding:24px 22px} .rh::after{content:none} .pstep-body p,.pstep-body .p-tags{padding-left:0} .gsc-cap{gap:8px} .gsc-cap .gc-s{text-align:left} /* nothing keeps a fixed size or a nowrap wider than a phone */ .plan .p-for{min-height:0} .gsc-chart svg{height:104px} .fb-stackwrap{height:96px} .hero-ctas{gap:10px} .hero-ctas .btn{width:100%;text-align:center;white-space:normal} .gkw .k-t,.a-txt{min-width:0} .gkw{gap:8px} .gkw .k-t{white-space:normal} /* label above its paragraph, each on a full-width row. Without this the paragraph shares the row with the label and wraps two words at a time. Repeat this pattern for any future label + prose strip. */ .fs-note,.seq-note,.choose-note{flex-direction:column;gap:8px;padding:18px 20px;border-radius:0 14px 14px 0} .fs-note b,.seq-note b,.choose-note b{white-space:normal} .fs-note span,.seq-note span,.choose-note span{flex:none;min-width:0;width:100%} /* type steps down so headings never force a horizontal scroll */ .hero h1{font-size:clamp(28px,7.6vw,37px)} .h2{font-size:clamp(24px,6.4vw,30px)} .hero .kicker{font-size:16px} .stat{padding:26px 20px} .stat .st-num{font-size:26px} .stat .st-label{font-size:11px;letter-spacing:.09em} .qitem{padding:15px 16px} .qitem-head h3{font-size:15px} .price-cta-row,.why-cta,.month-cta,.midcta .mc-btns{gap:14px} .price-cta-row .btn,.why-cta .btn,.month-cta .btn,.midcta .mc-btns .btn{width:100%;text-align:center} .form-card{padding:24px 20px} .trk{padding:17px 18px} .track-head b{font-size:17px} /* BUGFIX: the white-label band kept a 280px text floor and a nowrap button, which together overflowed a 390px screen. Both released. */ .wl-band{flex-direction:column;align-items:flex-start;padding:26px 22px;gap:18px} .wl-band .wlb-txt{min-width:0} .wl-band .btn{width:100%;text-align:center;white-space:normal} .ph-why p{min-width:0} .lr-chips span{white-space:normal} section{padding:56px 0} } @media(max-width:600px){ .modal{padding:12px} .modal-body{padding:26px 20px 22px} .modal-card h3{font-size:21px} .mf-total{flex-direction:column;align-items:flex-start;gap:4px} } @media(prefers-reduced-motion:reduce){ .modal-card{animation:none} html{scroll-behavior:auto} }