/* NOTE: moved from public/apps/ai-virtual-try-on/assets/styles.css (deleted) during the React port. Four edits, nothing else: 1. the three @font-face rules are gone — next/font/google (lib/fonts.ts) now serves Raleway / Josefin Sans, and their relative url(fonts/*.ttf) were the ONLY url() in this sheet, which is what made the move safe; 2. .gtm-hidden moved to /prehook-ui.css (it was duplicated in the quiz sheet); 3. the chrome injector's VTO_OVERRIDES block is appended at the END — it must stay last: .site-header .site-nav a (0,3,0) only beats .site-nav>a:not(.ph-btn) (0,3,0) on source order; 4. this sheet's :root used to alias the design system: --purple-50..700 and --ease were identical-value copies of /prehook-ui.css's --prehook-purple-50..700 and --ease-standard. The 37 + 8 usages now reference the canonical tokens and the aliases are gone, so a change to the purple scale reaches this page. Computed values are unchanged (hex case only). 5. the :root block now holds ONLY the five entries that deliberately WIN over /prehook-ui.css (--font-body and the four --shadow-*). The same-name, same-value copies of --ink-*, --paper, --cream, --success and --font-display were deleted (review finding CQ-05: tokens live in /prehook-ui.css and nowhere else); every computed value is unchanged because /prehook-ui.css is linked first and holds identical values. 6. `.hero::before,.hero::after{display:none!important}` was deleted — no sheet gives either pseudo-element `content`, so it matched nothing (CQ-11), and the ex-VTO_OVERRIDES `.hero` background now reads var(--cream) instead of re-stating that token's hex (CQ-12). Everything else — the !importants, the :is(#ph-boost,.activecampaign-shell) block, .menu-toggle{display:none}, and the whole ex-VTO_OVERRIDES block including the `@media(min-width:901px) .site-header .site-nav` rule (NOT a no-op: it restores gap:26px over the `@media (width<=1100px)` rule's 18px) — is byte-identical. */ /* ========================================================================== AI Virtual Try-On — page-specific stylesheet. Shared components (tokens, sections, headings, kickers, leads, buttons, cards, check dots, FAQ accordion) come from /prehook-ui.css — the quiz- derived Prehook design system, linked BEFORE this sheet. Rules here are page furniture only, plus a few explicitly-commented geometry pins that keep this page's as-shipped metrics (pixel-regression gated). No inline styles, no Tailwind — semantic classes only. ========================================================================== */ /* the ONLY tokens this page overrides: its own body stack and shadow scale. Everything else comes from /prehook-ui.css, linked before this sheet. */ :root{--font-body:"Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--shadow-sm:0 2px 8px #25303f14;--shadow-md:0 12px 30px #25303f1c;--shadow-lg:0 30px 70px #25303f29;--shadow-purple:0 14px 34px #8561aa47} /* ---- base (family/background/margin/smoothing come from prehook-ui) ---- */ body{color:var(--ink-900);font-size:15px;line-height:1.55} body,button,a{font-family:var(--font-body)} img{max-width:100%;display:block} a,button{color:inherit} .skip-link{z-index:1000;background:var(--ink-950);color:#fff;border-radius:6px;padding:10px 14px;position:fixed;top:12px;left:12px;transform:translateY(-180%)} .skip-link:focus{transform:translateY(0)} /* page container: chrome-width (75rem / 24px gutters) to line up with the shared Prehook header/footer bars used on the standalone app pages */ .container{max-width:75rem;margin-inline:auto;padding-inline:24px} /* ---- page geometry pins (own vto-* classes, applied in markup next to the shared ph-* classes — the shared prehook-ui definitions stay untouched) --- */ /* kickers shipped at line-height 1.4 (ph-kicker inherits body line-height) */ .vto-kicker{line-height:1.4} .vto-kicker--light{color:var(--prehook-purple-300)} /* section-head leads shipped capped at 64ch */ .vto-copy{max-width:64ch} /* section heads shipped at max-width 790 (shared ph-section-head is 760) */ .vto-section-head{max-width:790px} /* check dots shipped at 21px circle / 11px glyph (shared ph-check-dot is 22/12 — the 1px wider dot re-wraps pricing-card bullet lines) */ .vto-check-dot{width:21px;height:21px;font-size:11px} /* buttons shipped at line-height 1 */ .vto-btn{line-height:1} /* old .button carried border:1px solid #0000 — the standalone final-CTA install button needs it back for its shipped 56px height (hero buttons already get 56px from flex-stretch next to the bordered secondary) */ .final-install .ph-btn{border:1px solid #0000} .vto-btn:focus-visible,.site-nav a:focus-visible,.menu-toggle:focus-visible,.vto-faq-q:focus-visible{outline-offset:3px;outline:3px solid #b391d299} /* ---- page typography ---------------------------------------------------- */ h1,h2,h3,p{margin-top:0} h1,h2,h3{color:var(--ink-900);font-family:var(--font-display)} /* every VTO h3 is a card title (22px/700); catalog & trust keep smaller sizes */ h3{margin-bottom:0;font-size:22px;font-weight:700;line-height:1.25} /* ---- section skins on top of ph-section --------------------------------- */ .section--dark{background:radial-gradient(circle at 85% 15%, #8561aa3d, transparent 34%), var(--ink-950);position:relative;overflow:hidden} .section--dark:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:42px 42px;position:absolute;inset:0} .section-heading--left{text-align:left;align-items:flex-start;margin:0 0 40px} /* ---- header / mobile nav ------------------------------------------------- */ .site-header{z-index:100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffeb;border-bottom:1px solid #eaeaf1eb;position:sticky;top:0} .nav-shell{justify-content:space-between;align-items:center;height:76px;display:flex} .brand img{width:auto;height:32px} .site-nav{align-items:center;gap:26px;display:flex} .site-nav>a:not(.ph-btn){color:var(--ink-900);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700;text-decoration:none;position:relative} .site-nav>a:not(.ph-btn):after{background:var(--prehook-purple-500);content:"";height:2px;transition:transform .18s var(--ease-standard);position:absolute;bottom:-7px;left:0;right:0;transform:scaleX(0)} .site-nav>a:not(.ph-btn):hover{color:var(--prehook-purple-600)} .site-nav>a:not(.ph-btn):hover:after{transform:scaleX(1)} .nav-cta{min-height:44px;padding:12px 20px} .menu-toggle{cursor:pointer;background:0 0;border:0;width:44px;height:44px;padding:10px;display:none} .menu-toggle span{background:var(--ink-900);height:2px;transition:transform .18s var(--ease-standard), opacity .18s var(--ease-standard);border-radius:2px;margin:5px 0;display:block} /* ---- hero ----------------------------------------------------------------- */ .hero{background:linear-gradient(180deg, white 0%, #fdfbf8 58%, var(--cream) 100%);padding:92px 0 96px;position:relative;overflow:hidden} /* hero + children pre-positioned so the injected chrome (bg rotator) never needs to write inline position/z-index */ .hero-orb{filter:blur(2px);pointer-events:none;border-radius:50%;position:absolute;z-index:1} .hero-orb--one{background:radial-gradient(circle,#e6daf0e6,#f4eefa00 68%);width:520px;height:520px;top:-180px;right:-110px} .hero-orb--two{background:radial-gradient(circle,#efd29b47,#efd29b00 70%);width:480px;height:480px;bottom:-170px;left:-210px} .hero-grid{grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);align-items:center;gap:58px;display:grid;position:relative;z-index:1} .hero-copy{flex-direction:column;align-items:flex-start;gap:24px;display:flex} .hero-copy h1 span{color:var(--prehook-purple-500);font-style:italic;display:block} /* geometry pin: lead shipped at 48ch / 1.65 (ph-lead is 1.6) */ .hero-lead{max-width:48ch;line-height:1.65} .hero-actions{flex-wrap:wrap;gap:12px;display:flex} .vto-hero-proof{color:var(--ink-500);letter-spacing:.11em;text-transform:uppercase;align-items:center;gap:10px;margin-top:4px;font-size:11px;font-weight:700;line-height:1.4;display:flex} .vto-hero-proof i{background:var(--ink-300);border-radius:50%;width:4px;height:4px} .hero-visual{box-shadow:var(--shadow-lg);animation:hero-rise .7s var(--ease-standard) both;background:#fff;border:1px solid #dbdcdee6;border-radius:16px;overflow:hidden} .hero-video{aspect-ratio:16/9;background:var(--ink-950)} .hero-video iframe{border:0;width:100%;height:100%;display:block} @keyframes hero-rise{0%{opacity:0;transform:translateY(22px)}} /* ---- signal strip ---------------------------------------------------------- */ .signal-strip{border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100);background:#fff} .signal-grid{grid-template-columns:repeat(4,1fr);display:grid} .signal-grid span{color:var(--ink-700);font-family:var(--font-display);letter-spacing:.15em;text-align:center;text-transform:uppercase;padding:24px 18px;font-size:12px;font-weight:750;position:relative} .signal-grid span:not(:last-child):after{background:var(--ink-100);content:"";width:1px;position:absolute;top:21px;bottom:21px;right:0} /* ---- journey cards (ph-card base) ------------------------------------------ */ .journey-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid} .journey-card{min-height:330px;transition:transform .2s var(--ease-standard), box-shadow .2s var(--ease-standard), border-color .2s var(--ease-standard);flex-direction:column;padding:30px;display:flex} .journey-card:hover{border-color:var(--prehook-purple-200);box-shadow:var(--shadow-md);transform:translateY(-5px)} .journey-top{justify-content:space-between;align-items:flex-start;margin-bottom:auto;display:flex} .journey-icon{background:var(--prehook-purple-50);width:58px;height:58px;color:var(--prehook-purple-600);font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:26px;font-weight:800;display:flex} .journey-number{color:var(--ink-200);font-family:var(--font-display);letter-spacing:-.04em;font-size:46px;font-weight:850;line-height:1} .journey-card h3{margin-top:46px} .journey-card p{color:var(--ink-500);margin:14px 0 0;font-size:17px} /* ---- dark merchant-value section -------------------------------------------- */ .dark-heading{z-index:1;grid-template-columns:1.2fr .8fr;align-items:end;gap:80px;margin-bottom:64px;display:grid;position:relative} .dark-heading h2{color:#fff;max-width:760px;margin-top:16px} .dark-heading>p{color:#ffffffad;margin:0;font-size:19px} .outcome-grid{z-index:1;grid-template-columns:repeat(4,1fr);gap:16px;display:grid;position:relative} .outcome-card{background:#ffffff0e;border:1px solid #ffffff1f;border-radius:12px;min-height:280px;padding:26px} .outcome-card>span{color:var(--prehook-purple-300);font-family:var(--font-display);letter-spacing:.16em;font-size:12px;font-weight:800} .outcome-card h3{color:#fff;margin-top:70px;font-size:22px} .outcome-card p{color:#ffffffa3;margin:14px 0 0;font-size:15px;line-height:1.65} /* ---- storefront / customizer -------------------------------------------------- */ .storefront-grid{grid-template-columns:.84fr 1.16fr;align-items:center;gap:80px;display:grid} .feature-list,.pricing-card ul{flex-direction:column;gap:15px;margin:0;padding:0;list-style:none;display:flex} .feature-list li,.pricing-card li{color:var(--ink-700);align-items:flex-start;gap:11px;font-size:16px;display:flex} .customizer{border:1px solid var(--ink-100);box-shadow:var(--shadow-lg);background:#fff;border-radius:14px;overflow:hidden} .customizer-head{border-bottom:1px solid var(--ink-100);height:58px;color:var(--ink-900);font-family:var(--font-display);justify-content:space-between;align-items:center;padding:0 20px;font-size:14px;font-weight:750;display:flex} .saved-chip{color:var(--success);font-family:var(--font-body);letter-spacing:.1em;text-transform:uppercase;background:#3f9d581a;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:700} .customizer-body{grid-template-columns:.78fr 1.22fr;min-height:420px;display:grid} .customizer-controls{border-right:1px solid var(--ink-100);background:var(--ink-50);padding:24px 20px} .control-row{margin-bottom:18px} .control-row span,.color-row>span{color:var(--ink-500);letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;font-size:10px;font-weight:700;display:block} .control-row strong{border:1px solid var(--ink-200);color:var(--ink-900);background:#fff;border-radius:5px;padding:9px 10px;font-size:12px;font-weight:400;line-height:1.3;display:block} .color-row i{background:var(--prehook-purple-500);width:29px;height:29px;box-shadow:0 0 0 1px var(--ink-200);border:3px solid #fff;border-radius:50%;margin-right:6px;display:inline-block} .color-row i:nth-of-type(2){background:#fff} .color-row i:nth-of-type(3){background:var(--ink-950)} .customizer-preview{background:linear-gradient(145deg,#fff,#fdfbf8);flex-direction:column;justify-content:center;padding:48px 38px;display:flex} .customizer-preview p{color:var(--ink-900);font-family:var(--font-display);margin:0;font-size:24px;font-weight:800} .preview-price{color:var(--ink-700);margin-top:5px;font-size:15px} .size-row{gap:8px;margin:28px 0 16px;display:flex} .size-row span{border:1px solid var(--ink-200);width:39px;height:35px;color:var(--ink-700);border-radius:4px;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex} .size-row .selected{border-color:var(--ink-950);background:var(--ink-950);color:#fff} .preview-tryon,.preview-cart{background:var(--prehook-purple-500);color:#fff;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;justify-content:center;align-items:center;gap:9px;height:46px;margin-top:9px;font-size:11px;font-weight:700;display:flex} .preview-cart{border:1px solid var(--ink-950);color:var(--ink-950);background:#fff} /* ---- catalog (ph-card base) ---------------------------------------------------- */ .catalog-grid{grid-template-columns:repeat(4,1fr);gap:20px;display:grid} .catalog-card{overflow:hidden} .catalog-image{aspect-ratio:4/5;background:var(--cream);overflow:hidden} .catalog-image img{object-fit:cover;width:100%;height:100%;transition:transform .5s var(--ease-standard)} .catalog-card:hover img{transform:scale(1.035)} .catalog-card>div:last-child{padding:18px 18px 20px} .catalog-card h3{font-size:18px} .catalog-card p{color:var(--ink-500);margin:5px 0 0;font-size:13px} .catalog-note{max-width:780px;color:var(--ink-500);text-align:center;margin:26px auto 0;font-size:14px} /* ---- data & analytics ------------------------------------------------------------ */ .data-grid{grid-template-columns:.76fr 1.24fr;align-items:center;gap:72px;display:grid} .event-list{flex-wrap:wrap;gap:8px;display:flex} .event-list span{border:1px solid var(--prehook-purple-100);color:var(--prehook-purple-600);letter-spacing:.06em;background:#fff;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:700} .data-footnote{color:var(--ink-500);margin:24px 0 0;font-size:13px;line-height:1.55} .analytics-shell{border:1px solid var(--ink-100);min-height:490px;box-shadow:var(--shadow-lg);background:#fff;border-radius:14px;grid-template-columns:138px 1fr;display:grid;overflow:hidden} .analytics-sidebar{border-right:1px solid var(--ink-100);background:#fbfbfc;flex-direction:column;gap:8px;padding:22px 14px;display:flex} .analytics-sidebar img{border-radius:7px;width:34px;height:34px;margin:0 0 18px 7px} .analytics-sidebar span{color:var(--ink-500);border-radius:6px;padding:9px 10px;font-size:11px;font-weight:700} .analytics-sidebar .active{background:var(--prehook-purple-50);color:var(--prehook-purple-600)} .analytics-main{padding:25px} .analytics-title{justify-content:space-between;align-items:center;display:flex} .analytics-title div{flex-direction:column;display:flex} .analytics-title div>span{color:var(--prehook-purple-500);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:700} .analytics-title strong{color:var(--ink-900);font-family:var(--font-display);margin-top:4px;font-size:22px} .range-chip{border:1px solid var(--ink-100);color:var(--ink-500);border-radius:5px;padding:7px 9px;font-size:10px} .metric-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;display:grid} .metric-grid>div{border:1px solid var(--ink-100);border-radius:8px;flex-direction:column;justify-content:space-between;min-height:92px;padding:14px;display:flex} .metric-grid span{color:var(--ink-500);letter-spacing:.05em;text-transform:uppercase;font-size:9px;font-weight:700;line-height:1.4} .metric-grid strong{color:var(--ink-900);font-family:var(--font-display);font-size:17px} .chart-card{border:1px solid var(--ink-100);border-radius:8px;height:250px;margin-top:16px;padding:18px} .chart-head{color:var(--ink-900);font-family:var(--font-display);justify-content:space-between;align-items:center;font-size:12px;font-weight:750;display:flex} .chart-head i{background:var(--prehook-purple-500);width:7px;height:7px;box-shadow:0 0 0 4px var(--prehook-purple-50);border-radius:50%} .chart-bars{border-bottom:1px solid var(--ink-100);background-image:linear-gradient(var(--ink-100) 1px, transparent 1px);background-size:100% 45px;align-items:flex-end;gap:8px;height:178px;padding-top:24px;display:flex} .chart-bars i{background:linear-gradient(180deg, var(--prehook-purple-300), var(--prehook-purple-500));opacity:.86;border-radius:4px 4px 0 0;flex:1;min-width:5px} /* daily-activity mock data (was inline style= heights) */ .chart-bars i:nth-child(1){height:44%} .chart-bars i:nth-child(2){height:67%} .chart-bars i:nth-child(3){height:53%} .chart-bars i:nth-child(4){height:78%} .chart-bars i:nth-child(5){height:62%} .chart-bars i:nth-child(6){height:91%} .chart-bars i:nth-child(7){height:72%} .chart-bars i:nth-child(8){height:58%} .chart-bars i:nth-child(9){height:84%} .chart-bars i:nth-child(10){height:70%} .chart-bars i:nth-child(11){height:96%} .chart-bars i:nth-child(12){height:82%} /* ---- social proof ------------------------------------------------------------------- */ .social-proof-section{overflow:hidden} .social-proof-grid{grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);align-items:center;gap:95px;display:grid} .phone-wrap{justify-content:center;align-items:center;min-height:650px;display:flex;position:relative} .phone-glow{background:radial-gradient(circle, var(--prehook-purple-100), #f4eefa00 68%);border-radius:50%;width:520px;height:520px;position:absolute} .phone-wrap img{z-index:1;aspect-ratio:667/1422;object-fit:contain;filter:drop-shadow(0 30px 35px #25303f38);width:min(100%,305px);height:auto;position:relative} .social-proof-copy .ph-section-head{margin-bottom:34px} .moderation-steps{flex-direction:column;gap:10px;display:flex} .moderation-steps>div{border:1px solid var(--ink-100);border-radius:10px;grid-template-columns:38px 1fr;gap:14px;padding:18px 20px;display:grid} .moderation-steps>div>span{background:var(--prehook-purple-50);width:34px;height:34px;color:var(--prehook-purple-600);font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:800;display:flex} .moderation-steps p{color:var(--ink-500);margin:0;font-size:14px;line-height:1.5} .moderation-steps strong{color:var(--ink-900);font-family:var(--font-display);margin-bottom:3px;font-size:15px;display:block} /* ---- pricing (ph-card base) ----------------------------------------------------------- */ .pricing-section{background:radial-gradient(circle at 12% 10%, #e6daf0a6, transparent 24%), linear-gradient(180deg, var(--cream), white 56%)} .included-row{border:1px solid var(--ink-100);background:#ffffffd1;border-radius:10px;grid-template-columns:repeat(4,1fr);max-width:1080px;margin:-20px auto 34px;display:grid} .included-row span{color:var(--ink-700);text-align:center;padding:15px 12px;font-size:12px;font-weight:700;position:relative} .included-row span:not(:last-child):after{background:var(--ink-100);content:"";width:1px;position:absolute;top:13px;bottom:13px;right:0} .vto-pricing-grid{grid-template-columns:repeat(4,1fr);align-items:stretch;gap:16px;max-width:1200px;margin-inline:auto;display:grid} .pricing-card{min-height:470px;box-shadow:var(--shadow-sm);flex-direction:column;padding:26px 22px 22px;display:flex;position:relative} .pricing-card--recommended{border:2px solid var(--prehook-purple-500);box-shadow:var(--shadow-purple);transform:translateY(-10px)} .recommended-label{background:var(--prehook-purple-500);color:#fff;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:6px 13px;font-size:10px;font-weight:700;line-height:1.4;position:absolute;top:-15px;left:50%;transform:translate(-50%)} .plan-head>p{color:var(--ink-900);font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-size:15px;font-weight:800} .plan-price{align-items:flex-end;gap:6px;display:flex} .plan-price strong{color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(36px,3.2vw,46px);font-weight:850;line-height:1} .plan-price span{color:var(--ink-500);padding-bottom:5px;font-size:11px} .credit-pill{background:var(--prehook-purple-50);color:var(--prehook-purple-700);text-align:center;border-radius:6px;margin:20px 0 10px;padding:9px 10px;font-size:11px;font-weight:700;line-height:1.3} .plan-overage{min-height:34px;color:var(--ink-700);text-align:center;margin:0 0 20px;font-size:12px;font-weight:750;line-height:1.4} .pricing-card ul{margin-bottom:26px} .pricing-card li{font-size:13px;line-height:1.45} /* geometry pin: pricing CTAs shipped compact (18px vertical pad, 50px min) */ .pricing-card .ph-btn{letter-spacing:.1em;margin-top:auto;padding:18px 12px;font-size:11px;min-height:50px} .pricing-note{max-width:820px;color:var(--ink-500);text-align:center;margin:34px auto 0;font-size:13px} /* ---- trust ------------------------------------------------------------------------------ */ .trust-section{background:var(--ink-950);padding:84px 0} .trust-grid{grid-template-columns:.8fr 1.2fr;align-items:start;gap:70px;display:grid} .trust-intro h2{color:#fff;margin-top:16px} .trust-cards{grid-template-columns:repeat(3,1fr);gap:12px;display:grid} .trust-cards article{background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;min-height:245px;padding:22px} .trust-cards article>span{color:var(--prehook-purple-300);font-family:var(--font-display);font-size:28px} .trust-cards h3{color:#fff;margin-top:54px;font-size:17px} .trust-cards p{color:#ffffff9e;margin:10px 0 0;font-size:13px;line-height:1.55} /* ---- FAQ (ph-faq-* accordion) ------------------------------------------------------------ */ .faq-grid{grid-template-columns:1fr 1fr;align-items:start;gap:10px 18px;max-width:1100px;margin-inline:auto;display:grid} /* geometry pins: questions shipped 74px min / 20px side pads */ .vto-faq-q{min-height:74px;padding:18px 20px} .vto-faq-a-text{padding:0 20px 20px} /* ---- final CTA ----------------------------------------------------------------------------- */ .final-cta{background:var(--prehook-purple-50);padding:100px 0;position:relative;overflow:hidden} .final-dots{pointer-events:none;background:radial-gradient(circle,#8561aa33 1.2px,#0000 1.5px) 0 0/24px 24px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 24%,#0000 72%);mask-image:radial-gradient(#000 24%,#0000 72%)} /* no max-width here: in the reference cascade the .container cap (75rem) always won over the old 920px value by source order, so the rendered final CTA measures 1200px (1152px content) — keep that geometry */ .final-cta-inner{text-align:center;flex-direction:column;align-items:center;display:flex;position:relative} .final-cta h2{margin-top:18px} .final-cta p:not(.ph-kicker){max-width:64ch;color:var(--ink-700);margin:22px auto 28px;font-size:19px} .activecampaign-shell{width:min(100%,700px);margin-top:4px;position:relative} .activecampaign-shell>._form_3{width:100%} /* the :is(#ph-boost,...) arm lends ID-level specificity so this reset also beats the AC embed's injected #_form__{background:#fff!important; border-radius:0!important} rules (the old site.js did this with inline style.setProperty(...,'important'), which the no-inline-styles rework removed — class rules need the specificity boost instead) */ .activecampaign-shell .early-access-form,:is(#ph-boost,.activecampaign-shell) form.early-access-form{width:100%!important;max-width:none!important;box-shadow:none!important;color:var(--ink-900)!important;font-family:var(--font-body)!important;background:0 0!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;position:relative!important} .activecampaign-shell .early-access-form ._form-content{width:100%!important;margin:0!important;font-family:inherit!important} .activecampaign-shell .early-access-form ._field_header,.activecampaign-shell .early-access-form ._field_html,.activecampaign-shell .early-access-form .pvto-hidden-field,.activecampaign-shell .early-access-form ._form-branding,.activecampaign-shell .early-access-form ._clear-element{display:none!important} .activecampaign-shell .early-access-form .access-input-row{width:100%!important;max-width:none!important;margin:0!important} .access-input-row>label{color:var(--ink-900);letter-spacing:.08em;text-align:left;text-transform:uppercase;margin-bottom:9px;font-size:12px;font-weight:700;display:block} .activecampaign-shell .early-access-form .access-input-row>label{width:auto!important;color:var(--ink-900)!important;font-family:var(--font-body)!important;letter-spacing:.08em!important;text-align:left!important;text-transform:uppercase!important;margin:0 0 9px!important;font-size:12px!important;font-weight:700!important;line-height:1.5!important} .access-input-group{box-shadow:var(--shadow-md);background:#fff;border:1px solid #8561aa47;border-radius:12px;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px;display:grid} .activecampaign-shell .early-access-form .access-input-group{width:100%!important;max-width:none!important;box-shadow:var(--shadow-md)!important;background:#fff!important;border:1px solid #8561aa47!important;border-radius:12px!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;margin:0!important;padding:6px!important;display:grid!important} .activecampaign-shell .early-access-form .access-input-group ._field-wrapper{min-width:0!important;margin:0!important;position:relative!important} .activecampaign-shell .early-access-form .access-input-group ._button-wrapper{width:auto!important;margin:0!important;position:relative!important} .access-input-group input{min-width:0;color:var(--ink-900);font:inherit;background:0 0;border:0;outline:0;padding:0 18px} .activecampaign-shell .early-access-form .access-input-group input:is([type=text],[type=email]){width:100%!important;min-width:0!important;height:100%!important;min-height:52px!important;color:var(--ink-900)!important;font-family:var(--font-body)!important;background:0 0!important;border:0!important;border-radius:7px!important;outline:0!important;margin:0!important;padding:0 18px!important;font-size:16px!important;line-height:1.4!important;display:block!important} .access-input-group input::placeholder{color:var(--ink-300)} .activecampaign-shell .early-access-form .access-input-group input::placeholder{color:var(--ink-300)!important} .access-input-group input:focus-visible{box-shadow:inset 0 0 0 2px var(--prehook-purple-500);border-radius:7px} .activecampaign-shell .early-access-form .access-input-group input:focus-visible{box-shadow:inset 0 0 0 2px var(--prehook-purple-500)!important} .access-input-group .ph-btn{min-width:220px} .activecampaign-shell .early-access-form .access-input-group .ph-btn{border:1px solid var(--prehook-purple-500)!important;background:var(--prehook-purple-500)!important;color:#fff!important;width:auto!important;min-width:220px!important;min-height:52px!important;font-family:var(--font-display)!important;letter-spacing:.11em!important;text-transform:uppercase!important;border-radius:8px!important;margin:0!important;padding:15px 22px!important;font-size:11px!important;font-weight:700!important;line-height:1.2!important} /* early-access submit = primary CTA token; the ActiveCampaign embed injects #_form__ ._submit{padding/border-radius/...!important} (ID specificity + !important). The form id changes every load, so :is(#ph-boost, ...) lends ID-level specificity to a class match ( :is() takes its most specific argument's specificity ); the plain class chain is kept as fallback. */ .activecampaign-shell .early-access-form .access-input-group .ph-btn, :is(#ph-boost,.activecampaign-shell) form ._submit.ph-btn{border-radius:6px!important;padding:18px 24px!important;font-size:13px!important;font-family:var(--font-body)!important;letter-spacing:2.34px!important;min-height:0!important;border:1px solid #8561AA!important;background:#8561AA!important;color:#FFFFFF!important} :is(#ph-boost,.activecampaign-shell) form ._submit.ph-btn:hover{box-shadow:0 10px 30px rgba(133,98,170,.3)} .access-input-group .ph-btn:disabled{cursor:wait;opacity:.72} .access-consent{max-width:620px;color:var(--ink-500);text-align:left;justify-content:center;align-items:flex-start;gap:9px;margin:14px auto 0;font-size:12px;line-height:1.5;display:flex} .activecampaign-shell .early-access-form .access-consent{width:auto!important;max-width:620px!important;color:var(--ink-500)!important;font-family:var(--font-body)!important;text-align:left!important;justify-content:center!important;align-items:flex-start!important;gap:9px!important;margin:14px auto 0!important;font-size:12px!important;font-weight:400!important;line-height:1.5!important;display:flex!important} .access-consent input{width:16px;height:16px;accent-color:var(--prehook-purple-500);flex:none;margin-top:1px} .activecampaign-shell .early-access-form .access-consent input{accent-color:var(--prehook-purple-500);flex:none!important;width:16px!important;height:16px!important;margin:1px 0 0!important;padding:0!important;display:inline-block!important} .activecampaign-shell .early-access-form .access-consent span{width:auto!important;margin:0!important;display:inline!important} .access-message{min-height:22px;font-weight:700;color:var(--prehook-purple-700)!important;margin:10px auto 0!important;font-size:13px!important} .activecampaign-shell .early-access-form .access-message,.access-loader{min-height:22px!important;color:var(--prehook-purple-700)!important;font-family:var(--font-body)!important;text-align:center!important;margin:10px auto 0!important;font-size:13px!important;font-weight:700!important;line-height:1.5!important} .access-message.is-error,.access-loader.is-error{color:#9b2c2c!important} .activecampaign-shell .early-access-form ._form-thank-you{width:100%!important;color:var(--prehook-purple-700)!important;font-family:var(--font-body)!important;text-align:center!important;box-shadow:var(--shadow-md)!important;background:#fff!important;border:1px solid #8561aa47!important;border-radius:12px!important;padding:18px 20px!important;font-size:16px!important;font-weight:700!important;line-height:1.5!important} .activecampaign-shell .early-access-form ._error{z-index:5!important} .final-fine{color:var(--ink-500);letter-spacing:.12em;text-transform:uppercase;margin-top:18px;font-size:11px;font-weight:700} section[id]{scroll-margin-top:76px} /* ---- responsive ------------------------------------------------------------------------------ */ @media (width<=1100px){.site-nav{gap:18px}.site-nav>a:not(.ph-btn){font-size:10px}.hero-grid{grid-template-columns:.9fr 1.1fr;gap:34px}.outcome-grid,.vto-pricing-grid{grid-template-columns:repeat(2,1fr)}.vto-pricing-grid{gap:24px}.pricing-card--recommended{transform:none}.storefront-grid,.data-grid{gap:48px}.trust-grid{grid-template-columns:1fr;gap:42px}} @media (width<=900px){.menu-toggle{display:block}.site-nav{border-bottom:1px solid var(--ink-100);box-shadow:var(--shadow-md);background:#fffffffa;flex-direction:column;align-items:stretch;gap:0;padding:22px 20px 26px;display:none;position:absolute;top:76px;left:0;right:0}.site-nav.is-open{display:flex}.site-nav>a:not(.ph-btn){padding:13px 4px;font-size:12px}.site-nav>a:not(.ph-btn):after{display:none}.nav-cta{margin-top:14px}.menu-toggle.is-open span:first-child{transform:translateY(7px)rotate(45deg)}.menu-toggle.is-open span:nth-child(2){opacity:0}.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.hero{padding-top:72px}.hero-grid{grid-template-columns:1fr;gap:50px}.hero-copy{max-width:700px}.hero-visual{max-width:720px}.signal-grid,.included-row{grid-template-columns:repeat(2,1fr)}.signal-grid span:nth-child(2):after,.included-row span:nth-child(2):after{display:none}.signal-grid span:nth-child(-n+2),.included-row span:nth-child(-n+2){border-bottom:1px solid var(--ink-100)}.journey-grid{grid-template-columns:1fr}.journey-card{min-height:280px}.dark-heading{grid-template-columns:1fr;gap:24px}.outcome-grid{grid-template-columns:repeat(2,1fr)}.storefront-grid,.data-grid{grid-template-columns:1fr}.storefront-copy,.data-copy{max-width:720px}.catalog-grid{grid-template-columns:repeat(2,1fr)}.social-proof-grid{grid-template-columns:.76fr 1.24fr;gap:45px}.phone-wrap{min-height:570px}.trust-cards{grid-template-columns:repeat(3,1fr)}} @media (width<=700px){.hero{padding:58px 0 72px}.hero-actions{flex-direction:column;width:100%}.hero-actions .ph-btn{width:100%}.vto-hero-proof{flex-wrap:wrap}.access-input-group{grid-template-columns:1fr}.activecampaign-shell .early-access-form .access-input-group{grid-template-columns:1fr!important}.access-input-group input{min-height:54px}.access-input-group .ph-btn{width:100%;min-width:0}.activecampaign-shell .early-access-form .access-input-group .ph-btn{width:100%!important;min-width:0!important}.signal-grid span{padding:18px 8px;font-size:10px}.journey-card{min-height:260px;padding:24px}.outcome-grid,.vto-pricing-grid{grid-template-columns:1fr}.outcome-card{min-height:220px}.outcome-card h3{margin-top:46px}.customizer-body{grid-template-columns:1fr}.customizer-controls{border-right:0;border-bottom:1px solid var(--ink-100);grid-template-columns:1fr 1fr;gap:12px;display:grid}.control-row,.color-row{margin-bottom:0}.customizer-preview{padding:34px 24px}.analytics-shell{grid-template-columns:1fr;min-height:auto}.analytics-sidebar{display:none}.metric-grid{grid-template-columns:1fr}.metric-grid>div{min-height:72px}.chart-card{height:220px}.chart-bars{height:148px}.social-proof-grid{grid-template-columns:1fr;gap:30px}.phone-wrap{order:2;min-height:540px}.social-proof-copy{order:1}.pricing-card{min-height:430px}.trust-cards{grid-template-columns:1fr}.trust-cards article{min-height:210px}.trust-cards h3{margin-top:38px}.faq-grid{grid-template-columns:1fr}} @media (width<=430px){.catalog-grid{grid-template-columns:1fr}.catalog-image{aspect-ratio:5/4}.included-row{grid-template-columns:1fr}.included-row span{border-bottom:1px solid var(--ink-100)}.included-row span:after{display:none}.included-row span:last-child{border-bottom:0}.customizer-controls{grid-template-columns:1fr}.analytics-main{padding:18px}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}} /* ========================================================================== ex-VTO_OVERRIDES (scripts/inject-app-headers.py) — injected as the LAST