/* Sunbots Marketing · v8 shared stylesheet — assets/v8/site.css ------------------------------------------------------------------------ The stylesheet of the v8 homepage (index.html) and of every page that reuses its chrome — copy the , header and footer of index.html. The v5 pages still on the old design (pricing, about, contact, how-it-works) keep assets/site.css; nothing here may be relied on by them. Four layers, in cascade order: 1. @font-face — self-hosted Inter, Fraunces and JetBrains Mono (OFL-1.1, licences in ./fonts). No request to Google Fonts from any v8 page: the design export's preconnects were removed with the inline CSS. 2. v6 base — tokens, type, layout, header, footer, cards, FAQ, forms. 3. v8 components — hero, outcome cards, plans, industry cards, final CTA. 4. Integration layer — what the SERVED page needs beyond the export: the class names scripts/sync-marketing-site.mjs and assets/analytics.js emit (.btn.ghost/.solid, .cta-signup, .cta-login, .consent*), the cookie-preferences control, and dark-section link colours. Relative url()s resolve against THIS file (/site/assets/v8/), so the fonts load the same off disk and when served; never write url("assets/…"). Removed from the export on purpose: the i18n language dropdown (v8 pages are English-only and do not load assets/i18n.js), and the design tool's data-om-* hooks, and the placeholder .slot boxes. */ /* ---- 1. fonts ---- Fraunces and Inter are variable (wght 100–900; Fraunces also opsz), so one file per subset serves every weight. Only latin + latin-ext ship: latin-ext carries ₹ (U+20B9). */ @font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-variable-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-variable-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-variable-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-variable-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-variable-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-variable-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---- 2. v6 base (design export) ---- Matches the product: warm bone canvas, forest ink, signal green on the CTA only. Three type sizes (L / M / S), no bold weights, no reveal-on-scroll, no hover traps. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} :root{ --bg:oklch(0.985 0.004 95);--surface:#fff;--sunken:oklch(0.965 0.005 95);--inverse:oklch(0.165 0.012 145);--inverse-2:oklch(0.22 0.012 145); --ink-1:oklch(0.18 0.012 145);--ink-2:oklch(0.36 0.01 145);--ink-3:oklch(0.48 0.01 145); --on-dark:oklch(0.97 0.005 95);--on-dark-2:oklch(0.97 0.005 95/.74);--on-dark-line:oklch(0.97 0.005 95/.16); --line-1:oklch(0.92 0.005 95);--line-2:oklch(0.86 0.006 95); --green-50:oklch(0.975 0.018 150);--green-100:oklch(0.945 0.045 150);--green-500:oklch(0.62 0.175 150);--green-600:oklch(0.535 0.165 150);--green-700:oklch(0.44 0.135 150); --amber-100:oklch(0.96 0.04 80);--amber-700:oklch(0.52 0.13 65);--red-700:oklch(0.5 0.16 25); --display:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --t-l:clamp(36px,4.4vw,56px);--t-m:18px;--t-s:15px; --wrap:1120px;--pad:clamp(20px,4vw,40px);--r:10px; --shadow:0 24px 48px -28px oklch(0.18 0.012 145/.28),0 2px 6px -2px oklch(0.18 0.012 145/.08); } body{margin:0;background:var(--bg);color:var(--ink-1);font:400 var(--t-m)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-wrap:pretty} h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} img{display:block;max-width:100%;height:auto} svg{display:block} a{color:var(--ink-1);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--green-700);text-decoration-color:currentColor} ::selection{background:var(--green-100);color:var(--ink-1)} :focus-visible{outline:3px solid var(--green-500);outline-offset:3px} .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--inverse);color:var(--on-dark);padding:10px 16px;border-radius:8px;font-size:var(--t-s)} .skip:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* type */ h1,h2,.l{font:300 var(--t-l)/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance;color:var(--ink-1)} h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1} h3,h4{font:500 var(--t-m)/1.35 var(--sans);letter-spacing:-.005em} b,strong{font-weight:500} .g,em{font-style:italic;font-weight:300} .s{font-size:var(--t-s)} .mono{font-family:var(--mono)} .muted{color:var(--ink-2)} .hint{color:var(--ink-3);font-size:var(--t-s)} .lead{color:var(--ink-2);max-width:62ch} .label{font-size:var(--t-s);color:var(--ink-3);margin:0 0 16px} .stack{display:grid;gap:12px} /* layout */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .narrow{max-width:760px} section{padding:clamp(64px,8vw,104px) 0} section+section{padding-top:0} .hero{padding-top:clamp(56px,7vw,96px)} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center} .split.top{align-items:start} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .center{text-align:center} .center .lead,.center .label,.center .trust{margin-left:auto;margin-right:auto} .mt1{margin-top:12px}.mt2{margin-top:20px}.mt3{margin-top:32px}.mt4{margin-top:48px}.mt5{margin-top:64px} /* buttons + trust Filled buttons use --green-600, not the export's --green-500: white on #00a247 is 3.4:1, under WCAG AA's 4.5:1 for 15-18px text; #008632 is 4.7:1. The same step applies to .btn.solid, .mini.ok and the card arrows below. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:8px;font:500 var(--t-s)/1 var(--sans);background:var(--green-600);color:#fff;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s} .btn:hover{background:var(--green-700);color:#fff} .btn svg{width:16px;height:16px} .btn--ink{background:var(--inverse);color:var(--on-dark)}.btn--ink:hover{background:var(--inverse-2);color:var(--on-dark)} .btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink-1)}.btn--ghost:hover{background:var(--surface);border-color:var(--ink-3);color:var(--ink-1)} .btn--sm{min-height:40px;padding:0 16px} .cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px} .center .cta{align-items:center} .trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--t-s);color:var(--ink-3);max-width:60ch} .trust span{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap} .center .trust{justify-content:center} .trust span:not(:last-child)::after{content:none} .btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .center .btns{justify-content:center} .more{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-s);font-weight:500} .more svg{width:16px;height:16px} /* header */ header.top{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-1)} header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-1);flex:none} .logo svg{width:28px;height:28px;flex:none} .logo b{font:400 var(--t-m)/1 var(--display);letter-spacing:-.01em;white-space:nowrap} .nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)} .nav a{font-size:var(--t-s);color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s} .nav a:hover{color:var(--ink-1);border-bottom-color:var(--line-2)} .nav a[aria-current="page"],.nav a[aria-current="true"]{color:var(--ink-1);border-bottom-color:var(--green-500)} .topright{display:flex;align-items:center;gap:10px;flex:none} .mnav{display:none;position:relative} .mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;font-size:var(--t-s);color:var(--ink-1);background:var(--surface)} .mnav summary::-webkit-details-marker{display:none} .mnav[open] summary{background:var(--sunken)} .mnav nav{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:grid;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow)} .mnav nav a{display:block;padding:12px 14px;border-radius:6px;font-size:var(--t-s);text-decoration:none;color:var(--ink-1)} .mnav nav a:hover{background:var(--sunken)} .mnav nav a[aria-current="page"],.mnav nav a[aria-current="true"]{color:var(--green-700)} @media (max-width:900px){.nav{display:none}.mnav{display:block}} @media (max-width:560px){.logo b{display:none}} /* cards, frames */ .card{background:var(--surface);border:1px solid var(--line-1);border-radius:12px;padding:24px} .shot{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)} .shot img{width:100%} .shot figcaption{padding:12px 16px;font-size:var(--t-s);color:var(--ink-3);border-top:1px solid var(--line-1);background:var(--surface)} .shot--plain{box-shadow:none} .chips{display:flex;flex-wrap:wrap;gap:10px} .chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:var(--t-s);color:var(--ink-1)} .tick{position:relative;padding-left:26px} .tick::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:1.5px solid var(--green-600);border-bottom:1.5px solid var(--green-600);transform:rotate(-45deg)} .cross{position:relative;padding-left:26px;color:var(--ink-2)} .cross::before{content:"×";position:absolute;left:2px;top:-.05em;color:var(--ink-3);font-size:1.2em;line-height:1.3} .list>li{padding:14px 0;border-top:1px solid var(--line-1)} .list>li:last-child{border-bottom:1px solid var(--line-1)} .kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline} .kv>span:last-child{color:var(--ink-3);text-align:right;font-size:var(--t-s)} .kv.tot>span{color:var(--ink-1)} .note{border:1px solid var(--line-1);background:var(--surface);border-radius:var(--r);padding:16px 20px;font-size:var(--t-s);color:var(--ink-2);max-width:760px} .note b{display:block;font-weight:500;color:var(--ink-1);margin-bottom:4px} /* fixes map */ .fix{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.4fr);gap:20px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line-1)} .fix:last-child{border-bottom:1px solid var(--line-1)} .fix .was{color:var(--ink-3);font-size:var(--t-s)} .fix .was s{text-decoration-color:oklch(0.6 0.12 25)} .fix .arr{color:var(--ink-3);text-align:center} .fix .now b{display:block;font-weight:500} .fix .now span{color:var(--ink-2);font-size:var(--t-s)} /* roads */ .road{background:var(--surface);border:1px solid var(--line-1);border-radius:12px;padding:28px} .road .label{margin-bottom:8px} .road ul{margin-top:18px;display:grid;gap:10px} .road li{font-size:var(--t-s)} /* dark band */ .band{background:var(--inverse);color:var(--on-dark)} section.band{padding:clamp(64px,8vw,104px) 0} .band h1,.band h2,.band h3{color:var(--on-dark)} .band p,.band .lead,.band .label,.band .hint{color:var(--on-dark-2)} .band .trust{color:var(--on-dark-2)} .band .trust span+span::before{color:var(--on-dark-line)} .band a{color:var(--on-dark);text-decoration-color:var(--on-dark-line)} .band a:hover{color:var(--on-dark);text-decoration-color:currentColor} .band .btn{color:#fff} .band .card{background:oklch(1 0 0/.04);border-color:var(--on-dark-line);color:var(--on-dark)} .band .card p,.band .card span{color:var(--on-dark-2)} .band .card h3{color:var(--on-dark)} .band .note{background:oklch(1 0 0/.04);border-color:var(--on-dark-line);color:var(--on-dark-2)} .band .note b{color:var(--on-dark)} .band .list>li{border-color:var(--on-dark-line)} .band .kv>span:last-child{color:var(--on-dark-2)} /* demo widget */ .demo{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;text-align:left} .demo-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-1);background:var(--sunken);font:400 var(--t-s)/1 var(--mono);color:var(--ink-3)} .demo-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)} .demo-bar i:first-child{margin-left:2px} .demo-bar span{margin-left:8px} .demo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)} .demo-left{padding:24px;border-right:1px solid var(--line-1)} .demo-right{padding:24px;background:var(--bg);min-height:420px} .demo label{display:block;font-size:var(--t-s);color:var(--ink-3);margin-bottom:8px} .demo-in{display:flex;gap:8px;flex-wrap:wrap} .demo-in input{flex:1 1 180px;min-width:0;min-height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;font:400 var(--t-s) var(--sans);color:var(--ink-2);background:var(--sunken)} .demo-in input:focus{border-color:var(--ink-3);outline:none} .scan{margin-top:20px} .scan li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line-1);font-size:var(--t-s);color:var(--ink-3);transition:color .3s} .scan li .ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);margin-top:3px;display:grid;place-items:center;transition:background .3s,border-color .3s} .scan li .ck svg{width:10px;height:10px;opacity:0;color:#fff} .scan li.on{color:var(--ink-1)} .scan li.on .ck{background:var(--green-500);border-color:var(--green-500)} .scan li.on .ck svg{opacity:1} .scan li.run .ck{border-color:var(--ink-1);border-top-color:transparent;animation:spin .8s linear infinite} .scan li .f{display:block;color:var(--ink-3);opacity:0;transition:opacity .3s} .scan li.on .f{opacity:1} .scan-out{margin-top:16px;padding:14px 16px;border-radius:8px;background:var(--green-50);color:var(--green-700);font-size:var(--t-s);opacity:0;transition:opacity .4s} .scan-out.on{opacity:1} @keyframes spin{to{transform:rotate(360deg)}} .demo-empty{color:var(--ink-3);font-size:var(--t-s);padding:12px 0} .drafts{display:grid;gap:12px} .draft{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:14px;border:1px solid var(--line-1);border-radius:10px;background:var(--surface);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s} .draft.in{opacity:1;transform:none} .draft .th{width:88px;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--sunken)} .draft .th img{width:100%;height:100%;object-fit:cover} .draft .th.txt{display:grid;place-items:center;padding:10px;background:var(--inverse);color:var(--on-dark);font:300 var(--t-s)/1.2 var(--display);text-align:center;letter-spacing:-.01em} .draft h4{font-weight:500;font-size:var(--t-s)} .draft .cap{font-size:var(--t-s);color:var(--ink-2);margin-top:4px} .draft .cap[contenteditable="true"]{outline:1px solid var(--green-500);border-radius:4px;padding:2px 4px;background:var(--green-50)} .draft .why{font-size:var(--t-s);color:var(--ink-3);margin-top:8px} .draft .why b{font-weight:500;color:var(--ink-2)} .draft .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:var(--t-s);color:var(--ink-3)} .draft .pend{background:var(--amber-100);color:var(--amber-700);border-radius:999px;padding:2px 10px} .draft .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .mini{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:6px;font:500 var(--t-s)/1 var(--sans);border:1px solid var(--line-2);background:var(--surface);color:var(--ink-1);cursor:pointer} .mini:hover{border-color:var(--ink-3)} .mini.ok{background:var(--green-600);color:#fff;border-color:transparent}.mini.ok:hover{background:var(--green-700)} .draft .done{display:none;margin-top:12px;font-size:var(--t-s);color:var(--green-700)} .draft .why-rej{display:none;margin-top:12px} .draft[data-state="approved"] .acts,.draft[data-state="rejected"] .acts{display:none} .draft[data-state="approved"] .done,.draft[data-state="rejected"] .done{display:block} .draft[data-state="rejected"] .done{color:var(--ink-2)} .draft[data-state="reason"] .acts{display:none} .draft[data-state="reason"] .why-rej{display:block} .demo-end{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-1);font-size:var(--t-s);color:var(--ink-2);display:none} .demo-end.on{display:block} /* pricing */ .plan{display:flex;flex-direction:column;position:relative;background:var(--surface);border:1px solid var(--line-1);border-radius:12px;padding:28px 24px 24px} .plan--rec{border-color:var(--ink-1)} .plan .flag{position:absolute;top:-13px;left:24px;background:var(--inverse);color:var(--on-dark);border-radius:999px;padding:4px 12px;font-size:var(--t-s);line-height:1.2} .plan .tier{font-size:var(--t-s);color:var(--ink-3)} .plan h3{margin-top:6px} .plan .who{margin-top:16px;font-size:var(--t-s);color:var(--ink-2);order:1} .plan .price{margin-top:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .plan .price b{font:300 var(--t-l)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .plan .price i{font-style:normal;font-size:var(--t-s);color:var(--ink-3)} .plan ul{margin-top:20px;display:grid;gap:8px;order:2} .plan li{font-size:var(--t-s);color:var(--ink-2)} .plan .meta{margin-top:auto;padding-top:20px;font-size:var(--t-s);color:var(--ink-3);order:3} .plan .btn{margin-top:16px;width:100%;order:4} .plan .btn+.btn{margin-top:10px} .ptable-wrap{overflow-x:auto;border:1px solid var(--line-1);border-radius:12px;background:var(--surface)} .ptable{border-collapse:collapse;width:100%;min-width:720px;font-size:var(--t-s)} .ptable caption{caption-side:top;text-align:left;padding:14px 18px 0;font-size:var(--t-s);color:var(--ink-3)} .ptable th,.ptable td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-1);font-weight:400;font-variant-numeric:tabular-nums} .ptable thead th{color:var(--ink-3);border-bottom-color:var(--line-2)} .ptable thead th span{display:block;color:var(--ink-1)} .ptable th.rec,.ptable td.rec{background:var(--green-50)} .ptable tbody tr:last-child td,.ptable tbody tr:last-child th{border-bottom:0} .ptable tbody th{color:var(--ink-2)} .ptable td b{font-weight:500} /* faq */ .faq details{border-top:1px solid var(--line-1)} .faq details:last-child{border-bottom:1px solid var(--line-1)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:18px 0;font-weight:500} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";flex:none;color:var(--ink-3);font-family:var(--display);font-weight:300;font-size:1.3em;line-height:1;transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--green-700)} .faq .a{padding:0 0 20px;color:var(--ink-2);max-width:64ch} /* chat vignette */ .chat{display:grid;gap:8px} .chat .day{justify-self:center;font-size:var(--t-s);color:var(--ink-3)} .msg{max-width:86%;padding:10px 14px;border-radius:12px;font-size:var(--t-s);line-height:1.45;background:var(--sunken)} .msg.you{justify-self:end;background:var(--green-100);border-bottom-right-radius:4px} .msg.them{justify-self:start;border-bottom-left-radius:4px} .msg .t{display:block;text-align:right;color:var(--ink-3);margin-top:4px} /* steps strip */ .strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .strip li{padding:16px;border:1px solid var(--line-1);border-radius:10px;background:var(--surface);font-size:var(--t-s)} .strip li span{display:block;color:var(--ink-3);margin-bottom:6px} .strip li b{font-weight:500} .band .strip li{background:oklch(1 0 0/.04);border-color:var(--on-dark-line)} .band .strip li span{color:var(--on-dark-2)} /* forms */ .form{display:grid;gap:16px;max-width:640px} .form label{display:block;font-size:var(--t-s);color:var(--ink-2);margin-bottom:6px} .form label i{font-style:normal;color:var(--ink-3)} .form input,.form textarea{width:100%;font:400 var(--t-m)/1.4 var(--sans);color:var(--ink-1);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:12px 14px} .form textarea{resize:vertical;min-height:120px} .form input::placeholder,.form textarea::placeholder{color:var(--ink-3)} .form input:focus,.form textarea:focus{border-color:var(--ink-1);outline:none} .form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .status{font-size:var(--t-s);color:var(--green-700)} .status:empty{display:none} .status[data-bad="true"]{color:var(--red-700)} /* footer */ .foot{border-top:1px solid var(--line-1);padding:56px 0 32px} .foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} .foot h2{font:400 var(--t-s)/1.35 var(--sans);letter-spacing:-.005em;color:var(--ink-3)} .foot ul{margin-top:12px;display:grid;gap:10px} .foot a{font-size:var(--t-s);color:var(--ink-2);text-decoration:none} .foot a:hover{color:var(--green-700);text-decoration:underline} .foot .brand b{font:400 var(--t-m)/1 var(--display)} .foot .brand p{margin-top:14px;font-size:var(--t-s);color:var(--ink-2);max-width:34ch} .legalrow{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-1);display:flex;flex-wrap:wrap;gap:8px 24px} .bottom{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:var(--t-s);color:var(--ink-3)} /* scope grid */ .scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-1);border:1px solid var(--line-1);border-radius:12px;overflow:hidden} .scope li{background:var(--surface);padding:22px 22px 26px;display:grid;gap:6px;align-content:start} .scope li span{font-size:var(--t-s);color:var(--ink-3)} .scope li p{font-size:var(--t-s);color:var(--ink-2)} /* lead-source table */ .leads{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)} .leads .scroll{overflow-x:auto} .leads table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-s)} .leads th,.leads td{padding:12px 16px;text-align:left;border-top:1px solid var(--line-1);vertical-align:top;font-weight:400} .leads thead th{color:var(--ink-3);border-top:0;background:var(--sunken)} .leads td:first-child{font-weight:500;white-space:nowrap} .leads .path{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;color:var(--ink-2)} .leads .path i{font-style:normal;color:var(--ink-3)} .leads .src{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--green-50);color:var(--green-700);white-space:nowrap} .leads figcaption{padding:12px 16px;font-size:var(--t-s);color:var(--ink-3);border-top:1px solid var(--line-1)} .terms dt{font-weight:500;margin-top:16px} .terms dt:first-child{margin-top:0} .terms dd{color:var(--ink-2);font-size:var(--t-s);margin-top:4px} .plain{display:grid;gap:14px} .plain li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line-1)} .plain li:last-child{border-bottom:1px solid var(--line-1)} .plain li span:first-child{color:var(--ink-3);font-size:var(--t-s);padding-top:3px} .plain li p{color:var(--ink-2);font-size:var(--t-s);margin-top:4px} /* ICP families */ .hero .icps{margin-top:28px;display:grid;gap:8px;justify-items:center} .types{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:var(--t-s);color:var(--ink-2);max-width:70ch} .types a{color:var(--ink-2);text-decoration-color:var(--line-2)} .types a:hover{color:var(--green-700)} .icp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-1);border:1px solid var(--line-1);border-radius:12px;overflow:hidden} .icp>li{background:var(--surface);padding:20px 22px 22px;display:grid;gap:8px;align-content:start} .icp>li span{font-size:var(--t-s);color:var(--ink-3)} .icp p{font-size:var(--t-s);color:var(--ink-2)} .icp>li:target{outline:2px solid var(--green-500);outline-offset:-2px} .scope li.grp{grid-column:1/-1;background:var(--sunken);padding:14px 22px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline} .scope li.grp h3{color:var(--ink-1)} .scope li.grp p{color:var(--ink-3)} .pstrip .card{display:grid;gap:6px;align-content:start} .pstrip .card .price{font:300 var(--t-l)/1 var(--display);letter-spacing:-.02em;font-size:clamp(28px,3vw,36px);font-variant-numeric:tabular-nums} .pstrip .card .price i{font:400 var(--t-s)/1 var(--sans);color:var(--ink-3);margin-left:6px} .pstrip .card p{font-size:var(--t-s);color:var(--ink-2)} .pstrip .card .who{color:var(--ink-3)} .nums{display:grid;gap:7px;margin-top:8px;font-size:var(--t-s);color:var(--ink-2)} .nums li{white-space:nowrap} .nums b{color:var(--ink-1);font-weight:500;font-variant-numeric:tabular-nums} .ptable thead th{white-space:nowrap} @media (max-width:1100px) and (min-width:861px){.icp{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:860px){.icp{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.icp{grid-template-columns:minmax(0,1fr)}} /* responsive */ @media (max-width:960px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}.foot .cols{grid-template-columns:1fr 1fr}} @media (max-width:1100px) and (min-width:861px){.scope{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:860px){.split,.grid3,.demo-body,.scope{grid-template-columns:minmax(0,1fr)}.demo-left{border-right:0;border-bottom:1px solid var(--line-1)}.demo-right{min-height:0}.fix{grid-template-columns:minmax(0,1fr);gap:6px}.fix .arr{display:none}} @media (max-width:600px){.grid2,.grid4,.form .row2{grid-template-columns:minmax(0,1fr)}.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .cols{grid-template-columns:1fr}.btn{white-space:normal}.draft{grid-template-columns:64px minmax(0,1fr)}.draft .th{width:64px}} @media (max-width:480px){header.top .btn{display:none}} @media print{.top,.foot,.band,.mnav,.skip,.demo{display:none}section{padding:24px 0}} /* v7 · structure additions: industry pills, marketing-team blocks, sample cards, free-tool banner, sticky bar, stats */ .nav a.free{color:var(--green-700)} .nav a.free::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green-500);margin-right:7px;vertical-align:middle} .mnav nav a.free{color:var(--green-700)} .pills{display:flex;flex-wrap:wrap;gap:10px} .pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:var(--t-s);color:var(--ink-1);text-decoration:none;transition:border-color .15s,background .15s,color .15s} .pills a:hover{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)} .pills a.all{border-style:dashed;color:var(--ink-2)} .pills a[aria-current="page"]{border-color:var(--ink-1);background:var(--sunken)} .center .pills{justify-content:center} .midcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:18px 22px;border:1px solid var(--line-1);border-radius:12px;background:var(--sunken)} .midcta p{margin:0;font-size:var(--t-s);color:var(--ink-2)} .midcta p b{color:var(--ink-1);font-weight:500} .team{display:grid;gap:clamp(56px,7vw,96px)} .member{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:center} .member:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} .member:nth-child(even)>.visual{order:-1} .member .role{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-s);color:var(--green-700);margin-bottom:14px} .member .role i{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--green-100);color:var(--green-700);font:400 13px/1 var(--mono);font-style:normal} .member .leads table{min-width:0} .member .leads .path{display:inline} .member .leads .path i{margin:0 5px} .member .leads td{padding:10px 14px} .member .sample th,.member .sample td{padding:10px 14px} .member .sample td:nth-child(2),.member .leads .src{white-space:nowrap} .member h2,.member h3.l{font-size:clamp(26px,3vw,38px)} .member .lead{margin-top:14px} .member ul{margin-top:22px;display:grid;gap:10px} .member li{font-size:var(--t-s);color:var(--ink-2)} .member .btns{margin-top:24px} .member .shot{margin:0} .creatives{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:12px;align-items:start} .creatives .stack{display:grid;gap:12px} .creatives img{border-radius:10px;border:1px solid var(--line-2);box-shadow:var(--shadow);width:100%} .ptable td.rec{color:var(--ink-1)} .sample{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;text-align:left} .sample .bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-1);background:var(--sunken);font:400 var(--t-s)/1.3 var(--mono);color:var(--ink-3)} .sample .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none} .sample .bar span{margin-left:8px} .sample .scroll{overflow-x:auto} .sample table{width:100%;border-collapse:collapse;font-size:var(--t-s)} .sample th,.sample td{padding:12px 18px;text-align:left;border-top:1px solid var(--line-1);font-weight:400;vertical-align:top} .sample thead th{color:var(--ink-3);border-top:0} .sample td:first-child{color:var(--ink-1)} .sample td{color:var(--ink-2)} .sample .yes{color:var(--green-700);white-space:nowrap} .sample .no{color:var(--ink-3);white-space:nowrap} .sample .warn{color:var(--amber-700);white-space:nowrap} .sample .foot{padding:12px 18px;font-size:var(--t-s);color:var(--ink-3);border-top:1px solid var(--line-1)} .brief li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;padding:12px 18px;border-top:1px solid var(--line-1);font-size:var(--t-s)} .brief li:first-child{border-top:0} .brief li span:first-child{color:var(--ink-3)} .brief li span:last-child{color:var(--ink-1)} .week li{padding:16px 18px;border-top:1px solid var(--line-1);display:grid;gap:5px} .week li:first-child{border-top:0} .week .ch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--t-s);color:var(--ink-3)} .week .ch .pend{background:var(--amber-100);color:var(--amber-700);border-radius:999px;padding:1px 9px} .week h4{font-weight:500;font-size:var(--t-m);line-height:1.35} .week p{font-size:var(--t-s);color:var(--ink-2)} .week p b{font-weight:500;color:var(--ink-2)} .magnet{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px);border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)} .magnet .tag{display:inline-block;font:400 var(--t-s)/1 var(--mono);color:var(--green-700);background:var(--green-50);border-radius:999px;padding:6px 10px;margin-bottom:14px} .magnet h3{font:300 clamp(24px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance} .magnet p{margin-top:10px;color:var(--ink-2);font-size:var(--t-s);max-width:62ch} .magnet .cta{margin-top:0;align-items:flex-start;gap:10px} .magnet .cta .hint{max-width:30ch} .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--inverse);color:var(--on-dark);border-top:1px solid var(--on-dark-line);padding:10px var(--pad);padding-bottom:max(10px,env(safe-area-inset-bottom))} .stickybar[hidden]{display:none} .stickybar .in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap} .stickybar .tag{font:400 13px/1 var(--mono);color:var(--green-500);border:1px solid currentColor;border-radius:999px;padding:5px 9px;flex:none} .stickybar p{flex:1 1 240px;font-size:var(--t-s);color:var(--on-dark-2);margin:0} .stickybar p b{color:var(--on-dark);font-weight:500} .stickybar .btn{min-height:38px;padding:0 16px;flex:none} .stickybar .x{appearance:none;background:none;border:0;color:var(--on-dark-2);cursor:pointer;font:300 24px/1 var(--display);padding:2px 6px;flex:none} .stickybar .x:hover{color:var(--on-dark)} body.has-stickybar{padding-bottom:78px} .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .stat{padding:24px;border:1px solid var(--line-1);border-radius:12px;background:var(--surface)} .stat b{display:block;font:300 clamp(32px,3.6vw,48px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat span{display:block;margin-top:10px;font-size:var(--t-s);color:var(--ink-2)} .stat small{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)} .ihero .split{align-items:center;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} .week .ch span+span::before{content:"·";margin-right:10px;color:var(--line-2)} @media (max-width:1000px){.ihero .split{grid-template-columns:minmax(0,1fr)}} .ihero .lead{max-width:none} .ihero .types{justify-content:flex-start;max-width:none;margin-top:18px} .foot .cols{grid-template-columns:1.5fr 1.15fr 1fr 1fr 1fr} .foot .addr{margin-top:12px;font-size:var(--t-s);color:var(--ink-3)} @media (max-width:960px){.foot .cols{grid-template-columns:1fr 1fr}} @media (max-width:1000px){.member,.member:nth-child(even){grid-template-columns:minmax(0,1fr)}.member:nth-child(even)>.visual{order:0}} @media (max-width:860px){.magnet{grid-template-columns:minmax(0,1fr)}} @media (max-width:600px){.stats{grid-template-columns:minmax(0,1fr)}.foot .cols{grid-template-columns:1fr}.stickybar .tag{display:none}} @media print{.stickybar,.midcta{display:none}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}} /* ---- 3. v8 components (design export) ---- Written for the homepage, shared so every v8 page can reuse them. */ .hx{background:var(--inverse);color:var(--on-dark);position:relative;overflow:hidden;padding:clamp(48px,6vw,88px) 0 clamp(48px,6vw,88px)} .hx::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 78% 10%,oklch(0.62 0.175 150/.26),transparent 70%),radial-gradient(45% 55% at 8% 95%,oklch(0.535 0.165 150/.16),transparent 70%);pointer-events:none} .hx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,transparent 0 2px,oklch(1 0 0/.5) 2px 3px),repeating-linear-gradient(90deg,transparent 0 3px,oklch(1 0 0/.35) 3px 4px)} .hx .wrap{position:relative;z-index:1} .hx .eyebrow{font:400 13px/1 var(--mono);color:oklch(0.78 0.16 150);letter-spacing:.08em;text-transform:uppercase} .hx h1{font:300 clamp(38px,4.6vw,64px)/1.02 var(--display);letter-spacing:-.03em;color:var(--on-dark);margin-top:22px} .hx h1 em{display:block} .hx h1 em{font-style:italic;font-weight:300;color:oklch(0.8 0.15 150)} .hx .sub{margin-top:22px;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--on-dark-2)} .hx .btns{margin-top:34px} .hx .trust{margin-top:18px;color:var(--on-dark-2)} .hx .btn--ghost{border-color:oklch(1 0 0/.22);color:var(--on-dark)} .hx .btn--ghost:hover{background:oklch(1 0 0/.08);border-color:oklch(1 0 0/.45);color:var(--on-dark)} .hx .pill,.hx .eyebrow,.hx h1,.hx .sub,.hx .conv,.hx .micro,.hx .btns,.hx .trust{animation:up .8s cubic-bezier(.2,.7,.2,1) both} .hx .conv{animation-delay:.28s}.hx .micro{animation-delay:.36s} .hx h1{animation-delay:.08s}.hx .sub{animation-delay:.18s}.hx .btns{animation-delay:.28s}.hx .trust{animation-delay:.36s} @keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes card{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* marquee of business types */ .marq{overflow:hidden;padding:20px 0;border-bottom:1px solid var(--line-1);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .marq ul{display:flex;gap:10px;width:max-content;animation:marq 90s linear infinite} .marq:hover ul{animation-play-state:paused} .marq li a,.marq li span{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;font-size:var(--t-s);color:var(--ink-2);background:var(--surface);text-decoration:none} .marq li a:hover{border-color:var(--green-600);color:var(--green-700);background:var(--green-50)} @keyframes marq{to{transform:translateX(-50%)}} /* chapters */ .chap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,80px);align-items:start;padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line-1)} .chap:first-of-type{border-top:0;padding-top:0} .chap:last-child{padding-bottom:0} .chap .num{font:300 italic clamp(72px,9vw,132px)/.9 var(--display);color:var(--green-100);letter-spacing:-.05em} .chap .kicker{margin-top:10px;font:400 13px/1 var(--mono);color:var(--green-700);text-transform:uppercase;letter-spacing:.08em} .chap h2{margin-top:14px;font-size:clamp(30px,3.6vw,46px)} .chap .lead{margin-top:14px;font-size:var(--t-m);max-width:38ch} .chap ul.pts{margin-top:20px;display:grid;gap:9px} .chap ul.pts li{font-size:var(--t-s);color:var(--ink-2)} .chap .vis{display:grid;gap:16px;position:sticky;top:88px} .vis2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} @media (max-width:960px){.chap{grid-template-columns:minmax(0,1fr)}.chap .vis{position:static}} @media (max-width:640px){.vis2{grid-template-columns:minmax(0,1fr)}} /* AI answer card */ .ai{border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .ai .bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-1);background:var(--sunken);font:400 13px/1.3 var(--mono);color:var(--ink-3)} .ai .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}.ai .bar span{margin-left:8px} .ai .thread{padding:20px;display:grid;gap:12px} .ai .q{justify-self:end;max-width:80%;background:var(--inverse);color:var(--on-dark);padding:10px 14px;border-radius:14px 14px 4px 14px;font-size:var(--t-s)} .ai .a{justify-self:start;max-width:92%;background:var(--sunken);padding:12px 14px;border-radius:14px 14px 14px 4px;font-size:var(--t-s);color:var(--ink-1)} .ai .a ol{margin-top:6px;display:grid;gap:4px;padding-left:18px;list-style:decimal;color:var(--ink-2)} .ai .a ol li::marker{color:var(--ink-3)} .ai .verdict{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 20px;border-top:1px solid var(--line-1);font-size:var(--t-s)} .ai .verdict b{font-weight:500;color:var(--red-700)} .ai .verdict span{color:var(--ink-2)} .ai .verdict .fixline{color:var(--green-700)} .play .ai .q,.play .ai .a,.play .ai .verdict{opacity:0;animation:card .5s cubic-bezier(.2,.7,.2,1) forwards} .play .ai .a{animation-delay:.7s}.play .ai .a li{opacity:0;animation:card .4s forwards}.play .ai .a li:nth-child(1){animation-delay:1.1s}.play .ai .a li:nth-child(2){animation-delay:1.4s}.play .ai .a li:nth-child(3){animation-delay:1.7s}.play .ai .verdict{animation-delay:2.3s} /* lead paths */ .flow{display:grid;gap:10px} .flow li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;border:1px solid var(--line-1);border-radius:12px;background:var(--surface)} .flow .path{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .flow .step{display:inline-flex;align-items:center;gap:8px} .flow .node{padding:6px 11px;border-radius:8px;background:var(--sunken);font-size:var(--t-s);color:var(--ink-2)} .flow .node.hot{background:var(--green-50);color:var(--green-700)} .flow i{font-style:normal;color:var(--ink-3)} .flow .who{font-size:var(--t-s);color:var(--ink-1);font-weight:500;white-space:nowrap;display:flex;gap:10px;align-items:baseline} .flow .who small{font-weight:400;color:var(--ink-3);font-size:12px} .play .flow li{opacity:0;animation:card .5s cubic-bezier(.2,.7,.2,1) forwards} .play .flow li:nth-child(2){animation-delay:.25s}.play .flow li:nth-child(3){animation-delay:.5s}.play .flow li:nth-child(4){animation-delay:.75s} .counted{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--t-s);color:var(--ink-3);align-items:center} .counted span{padding:6px 12px;border:1px dashed var(--line-2);border-radius:999px;color:var(--ink-2)} /* report */ .report{border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .report .bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-1);background:var(--sunken);font:400 13px/1.3 var(--mono);color:var(--ink-3)} .report .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}.report .bar span{margin-left:8px} .report .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .report .grid div{padding:20px 18px;border-right:1px solid var(--line-1)} .report .grid div:last-child{border-right:0} .report b{display:block;font:300 clamp(30px,3vw,40px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .report span{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)} .report .next{padding:14px 18px;border-top:1px solid var(--line-1);font-size:var(--t-s);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center} .report .next b{display:inline;font:500 var(--t-s)/1.4 var(--sans);color:var(--green-700)} @media (max-width:640px){.report .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report .grid div:nth-child(2){border-right:0}.report .grid div:nth-child(-n+2){border-bottom:1px solid var(--line-1)}} /* plans */ .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch} .planx{padding:28px;border:1px solid var(--line-1);border-radius:18px;background:var(--surface);display:grid;gap:14px;align-content:start} .planx.rec{background:var(--inverse);color:var(--on-dark);border-color:transparent} .planx .name{font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);display:flex;justify-content:space-between;gap:8px} .planx.rec .name{color:oklch(0.8 0.15 150)} .planx .amt{font:300 clamp(38px,3.8vw,52px)/1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums} .planx .amt i{font:400 var(--t-s)/1 var(--sans);color:var(--ink-3);margin-left:8px} .planx.rec .amt i{color:var(--on-dark-2)} .planx .who{font-size:var(--t-s);color:var(--ink-2)}.planx.rec .who{color:var(--on-dark-2)} .planx .nums{margin-top:2px}.planx.rec .nums{color:var(--on-dark-2)}.planx.rec .nums b{color:var(--on-dark)} .planx .btn{margin-top:8px;width:100%} .planx .btn--ghost{color:var(--ink-1)} @media (max-width:1000px){.planx{padding:22px}.planx .amt i{display:block;margin:6px 0 0}.planx .nums li{white-space:normal}} @media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}.planx .amt i{display:inline;margin:0 0 0 8px}} /* timeline */ .tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .tl li{position:relative;padding-top:22px} .tl li::before{content:"";position:absolute;left:0;right:-24px;top:0;height:1px;background:var(--line-2)} .tl li:last-child::before{right:0} .tl li::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--green-500)} .tl .k{font:400 12px/1 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em} .tl h3{margin-top:8px} .tl p{margin-top:6px;font-size:var(--t-s);color:var(--ink-2)} @media (max-width:640px){.tl{grid-template-columns:minmax(0,1fr)}.tl li::before{right:0}} /* big band */ .bandx h2{font-size:clamp(38px,5.4vw,72px);letter-spacing:-.03em;max-width:18ch;margin:0 auto} .sect-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px} .sect-head h2{max-width:22ch} .sect-head .more{margin-bottom:6px} @media (prefers-reduced-motion:reduce){.play .ai .q,.play .ai .a,.play .ai .a li,.play .ai .verdict,.play .flow li{animation:none!important;opacity:1!important;transform:none!important}} /* v8b · animation stage + image-card carousel */ .btn--lg{min-height:54px;padding:0 28px;font-size:var(--t-m)} .anim-wrap{margin-top:clamp(44px,5vw,72px);border:1px solid oklch(1 0 0/.14);border-radius:18px;overflow:hidden;background:#141d18;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);animation:up .9s .45s cubic-bezier(.2,.7,.2,1) both} .anim{position:relative;width:100%;aspect-ratio:1280/764} .anim-note{margin:14px 0 0;font:400 13px/1.4 var(--mono);color:var(--on-dark-2);text-align:center;padding-bottom:clamp(40px,5vw,64px)} .rule{border-top:1px solid var(--line-1);padding-top:clamp(56px,7vw,96px)} .cmp{border:1px solid var(--line-1);border-radius:14px;background:var(--surface);overflow:hidden;font-size:var(--t-s)} .cmp [role=row]{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.25fr;border-top:1px solid var(--line-1)} .cmp [role=row]:first-child{border-top:0} .cmp [role=row]>span{padding:16px 18px;color:var(--ink-2);min-width:0} .cmp .k{color:var(--ink-1)} .cmp [role=columnheader]{color:var(--ink-1);font-weight:500} .cmp [role=columnheader] small{display:block;font-weight:400;color:var(--ink-3);margin-top:3px;font-size:13px} .cmp .rec{background:var(--green-50);color:var(--green-700)} .cmp [role=columnheader].rec{color:var(--green-700)} .faq .a{font-size:var(--t-s)} .tl p{max-width:26ch} @media (max-width:640px){.hx h1{max-width:none}.hx .sub{font-size:17px}.cmp [role=row]{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp .k{grid-column:1/-1;padding-bottom:0;font-size:13px;color:var(--ink-3)}.cmp [role=columnheader]:first-child{display:none}.cmp [role=row]>span{padding:12px 12px;font-size:14px}.cmp [role=row]:first-child>span{padding-top:14px}.flow .who{flex-basis:100%;justify-content:space-between;padding-top:8px;border-top:1px dashed var(--line-1)}.ai .verdict{flex-direction:column;align-items:flex-start}.report .next{font-size:14px}.planx{padding:22px}.magnet .cta{margin-top:0}} .icar{padding-top:clamp(64px,8vw,104px)!important;padding-bottom:clamp(56px,7vw,96px)} .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;max-width:var(--wrap);margin:0 auto;padding:32px var(--pad) 8px;scrollbar-width:none;scroll-padding-left:var(--pad)} .track::-webkit-scrollbar{display:none} .icard{position:relative;flex:0 0 clamp(220px,23vw,268px);aspect-ratio:4/5;border-radius:16px;overflow:hidden;scroll-snap-align:start;text-decoration:none;color:#fff;background:var(--inverse);isolation:isolate;display:block} .icard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .icard:hover img{transform:scale(1.05)} .icard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,oklch(0.165 0.012 145/.9));pointer-events:none} .icard .lbl{position:absolute;left:18px;right:56px;bottom:18px;z-index:1;font:400 21px/1.15 var(--display);letter-spacing:-.01em;color:#fff;text-wrap:balance} .icard .arr{position:absolute;right:16px;bottom:16px;z-index:1;width:32px;height:32px;border-radius:50%;background:oklch(1 0 0/.16);display:grid;place-items:center;color:#fff;font-size:15px;transition:background .2s} .icard:hover .arr{background:var(--green-600)} .icard.all{background:var(--green-50);border:1px dashed var(--green-600)} .icard.all::after{content:none} .icard.all .lbl{color:var(--green-700)} .icard.all .arr{background:var(--green-600)} .carnav{display:flex;gap:8px} .cbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font:400 16px/1 var(--sans);color:var(--ink-1)} .cbtn:hover{border-color:var(--ink-3);background:var(--sunken)} /* v8d · hero: split layout, autopilot engine panel */ .hx-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center} .hx-copy{min-width:0} .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid oklch(0.62 0.175 150/.45);background:oklch(0.62 0.175 150/.1);font:400 13px/1 var(--sans);color:oklch(0.85 0.14 150)} .pill svg{width:14px;height:14px;flex:none} .conv{display:flex;gap:10px;margin-top:30px} .conv .field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 16px;border:1px solid oklch(1 0 0/.2);border-radius:10px;background:oklch(1 0 0/.06);color:var(--on-dark-2);transition:border-color .15s,background .15s} .conv .field:focus-within{border-color:oklch(0.62 0.175 150/.8);background:oklch(1 0 0/.09)} .conv .field svg{width:18px;height:18px;flex:none} .conv input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--on-dark);font:400 16px/1.2 var(--sans)} .conv input::placeholder{color:var(--on-dark-2)} .conv .btn{flex:none} .micro{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:var(--t-s);color:var(--on-dark-2)} .ok{position:relative;display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--green-500);flex:none} .ok::after{content:"";position:absolute;left:4px;top:4px;width:7px;height:4px;border-left:1.5px solid var(--inverse);border-bottom:1.5px solid var(--inverse);transform:rotate(-45deg)} .orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,oklch(0.7 0.17 150),oklch(0.45 0.14 150));display:grid;place-items:center;animation:glow 2.6s ease-in-out infinite} .orb svg{width:34px;height:34px;color:var(--inverse)} @keyframes glow{0%,100%{box-shadow:0 0 0 6px oklch(0.62 0.175 150/.14),0 0 0 14px oklch(0.62 0.175 150/.06)}50%{box-shadow:0 0 0 9px oklch(0.62 0.175 150/.18),0 0 0 20px oklch(0.62 0.175 150/.05)}} .tog{display:inline-flex;align-items:center;gap:10px;margin:0;padding:5px 12px 5px 5px;border-radius:999px;background:oklch(1 0 0/.07);border:1px solid oklch(1 0 0/.12);font-size:13px;color:var(--on-dark)} .tog .sw{width:32px;height:18px;border-radius:999px;background:var(--green-500);position:relative;flex:none} .tog .sw::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#fff} .tog b{color:oklch(0.8 0.15 150);font-weight:500} #week .anim-wrap{margin-top:16px;animation:none} #week .anim-note{color:var(--ink-3);padding-bottom:0} @media (max-width:960px){.hx-grid{grid-template-columns:minmax(0,1fr)}.hx .sub{max-width:56ch}} .tog{white-space:nowrap} @media (max-width:640px){.conv{flex-direction:column}.conv .btn{width:100%}.hx h1 em{display:inline}} @media (prefers-reduced-motion:reduce){.orb,.ft{animation:none!important}} /* v8e · seven-section structure */ .flow3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:none!important} .flow3 i{font-style:normal;color:oklch(0.8 0.15 150)} .pad{padding-top:clamp(56px,7vw,96px)} section.tstrip{padding:18px 0;border-bottom:1px solid var(--line-1)} .tstrip .in{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 32px;font:400 13px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em} .tstrip .k{text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--green-700)} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin-bottom:0} .step{border:1px solid var(--line-1);border-radius:16px;background:var(--surface);overflow:hidden;display:grid;grid-template-rows:150px 1fr} .step .sv{background:var(--sunken);border-bottom:1px solid var(--line-1);position:relative;overflow:hidden;display:grid;place-items:center;padding:18px} .step .sv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top} .step .tx{padding:20px 22px 24px} .step .k{font:400 12px/1 var(--mono);color:var(--green-700);text-transform:uppercase;letter-spacing:.08em} .step h3{margin-top:10px;font-size:var(--t-m)} .step p+p,.step h3+p{margin-top:8px;font-size:var(--t-s);color:var(--ink-2)} .lchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .lchips span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-size:13px;color:var(--ink-1)} .mini-t{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;overflow:hidden} .mini-t td{padding:7px 12px;border-top:1px solid var(--line-1);color:var(--ink-2)} .mini-t tr:first-child td{border-top:0} .mini-t td:first-child{color:var(--ink-1)} .mini-t td:last-child{text-align:right;white-space:nowrap} .mini-t .warn{color:var(--amber-700)}.mini-t .no{color:var(--ink-3)} .ind4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .ind4 .icard{flex:none;width:auto} .icard .lbl small{display:block;margin-top:5px;font:400 13px/1.35 var(--sans);color:oklch(1 0 0/.72);letter-spacing:0} .qual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} .qual .card h3{font-size:var(--t-m)} .qual ul{margin-top:14px;display:grid;gap:10px} .qual li{font-size:var(--t-s);color:var(--ink-2)} .adcard{margin:0;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .adcard .bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-1);background:var(--sunken);font:400 13px/1.3 var(--mono);color:var(--ink-3)} .adcard .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}.adcard .bar span{margin-left:8px} .adcard .body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:22px;align-items:center} .adcard .radius{position:relative;width:150px;height:150px;justify-self:center} .adcard .radius i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid oklch(0.535 0.165 150/.55)} .adcard .radius i:nth-child(1){width:14px;height:14px;background:var(--green-500);border:0}.adcard .radius i:nth-child(2){width:60px;height:60px}.adcard .radius i:nth-child(3){width:106px;height:106px}.adcard .radius i:nth-child(4){width:150px;height:150px;border-style:dashed} .adcard .radius b{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% - 44px));padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font:400 11px/1.4 var(--mono);color:var(--ink-2);white-space:nowrap} .adcard .nums3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .adcard .nums3 b{display:block;font:300 clamp(26px,2.4vw,34px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .adcard .nums3 span{display:block;margin-top:6px;font-size:13px;color:var(--ink-3)} .adcard .tgt{margin:16px 0 0;font-size:13px;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line-1)} .case{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:1px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .case .cl{padding:clamp(24px,3vw,40px)} .case .tag{display:inline-block;font:400 12px/1 var(--mono);color:var(--amber-700);background:var(--amber-100);border-radius:999px;padding:6px 10px} .case h3{margin-top:16px;font:300 clamp(26px,2.8vw,36px)/1.15 var(--display);letter-spacing:-.015em;text-wrap:balance} .case .cl p{margin-top:14px;font:400 var(--t-s)/1.5 var(--sans);color:var(--ink-2);max-width:48ch} .case .r{background:var(--sunken);border-left:1px solid var(--line-1);display:grid;grid-template-columns:1fr 1fr} .case .r div{padding:24px;border-bottom:1px solid var(--line-1)} .case .r div:nth-child(odd){border-right:1px solid var(--line-1)} .case .r div:nth-last-child(-n+2){border-bottom:0} .case .r b{display:block;font:300 clamp(30px,3vw,40px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap} .case .r span{display:block;margin-top:8px;font-size:13px;color:var(--ink-3)} section.final{background:var(--inverse);color:var(--on-dark);padding:clamp(64px,8vw,112px) 0} .final h2{color:var(--on-dark);font-size:clamp(32px,4.4vw,56px);letter-spacing:-.025em;max-width:20ch;margin:0 auto} .final .lead{color:var(--on-dark-2)} .final .conv{max-width:640px;margin:32px auto 0} .final .micro{justify-content:center} @media (max-width:960px){.ind4{grid-template-columns:repeat(2,minmax(0,1fr))}.case{grid-template-columns:minmax(0,1fr)}.case .r{border-left:0;border-top:1px solid var(--line-1)}} @media (max-width:800px){.steps{grid-template-columns:minmax(0,1fr)}.step{grid-template-rows:140px 1fr}.qual{grid-template-columns:minmax(0,1fr)}} @media (max-width:560px){.adcard .body{grid-template-columns:minmax(0,1fr)}.adcard .radius{width:120px;height:120px}.adcard .radius i:nth-child(4){width:120px;height:120px}.adcard .radius i:nth-child(3){width:86px;height:86px}.adcard .radius b{transform:translate(-50%,calc(-50% - 34px))}.tstrip .in{gap:8px 18px}} /* v8f · floating icons */ .orbit{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto;padding:0;animation:up .9s .4s cubic-bezier(.2,.7,.2,1) both} .orbit .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed oklch(1 0 0/.14)} .orbit .r1{width:62%;height:62%}.orbit .r2{width:100%;height:100%;border-color:oklch(1 0 0/.09)} .hubc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px} .hubc .orb{width:88px;height:88px}.hubc .orb svg{width:46px;height:46px} .ft{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;animation:float var(--dur,6s) ease-in-out var(--delay,0s) infinite} .ft svg{width:48px;height:48px;padding:12px;border-radius:14px;background:oklch(1 0 0/.08);border:1px solid oklch(1 0 0/.14);color:var(--on-dark);box-shadow:0 14px 30px -16px rgba(0,0,0,.8)} .ft.big svg{width:58px;height:58px;padding:14px;border-radius:16px;background:oklch(0.62 0.175 150/.16);border-color:oklch(0.62 0.175 150/.45);color:oklch(0.86 0.14 150)} .ft small{font:400 11px/1 var(--mono);color:var(--on-dark-2);white-space:nowrap;letter-spacing:.02em} @keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-9px)}} @media (max-width:640px){.orbit{width:min(100%,440px)}.ft svg{width:38px;height:38px;padding:9px;border-radius:11px}.ft.big svg{width:46px;height:46px;padding:11px}.ft small{font-size:9px}.ft{gap:4px}.hubc .orb{width:76px;height:76px}.hubc .orb svg{width:40px;height:40px}.hubc .tog{font-size:12px}} .hx-grid{align-items:center} @media (min-width:961px){.orbit{margin-right:0}} /* v8g · feature / advantage / benefit */ .fab{border-top:1px solid var(--line-2)} .fab-h,.fab-r{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0 32px} .fab-h{padding:14px 0;border-bottom:1px solid var(--line-1)} .fab-h span{font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)} .fab-h span:last-child{color:var(--green-700)} .fab-r{padding:28px 0;border-bottom:1px solid var(--line-1)} .fab-r [role=cell]{min-width:0} .fab-r h3{font-size:var(--t-m);margin-bottom:8px;text-wrap:balance} .fab-r p{font-size:var(--t-s);color:var(--ink-2)} .fab-r .ben p{color:var(--ink-1);display:flex;gap:10px} .fab-r .ben p::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6b45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat} .fl{display:none} @media (max-width:800px){.fab-h{display:none}.fab-r{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px 0}.fl{display:block;font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px}.fab-r .ben .fl{color:var(--green-700)}} /* v8h · outcome cards */ .oc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .ocard{border:1px solid var(--line-1);border-radius:18px;background:var(--surface);overflow:hidden;display:grid;grid-template-rows:auto 1fr;min-width:0} .ocard .v{padding:22px 22px 0;background:var(--sunken);border-bottom:1px solid var(--line-1);height:250px;overflow:hidden;position:relative} .ocard .v::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--sunken));pointer-events:none} .ocard .v .shot,.ocard .v .sample,.ocard .v .adcard,.ocard .v .leads{margin:0} .ocard .v .creatives{transform:scale(.92);transform-origin:top left} .ocard .t{padding:22px 24px 24px} .ocard .k{font:400 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--green-700)} .ocard h3{margin-top:10px;font:300 clamp(24px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance} .ocard .f{margin-top:10px;font-size:var(--t-s);color:var(--ink-2)} .ocard .a{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--green-50);color:var(--green-700);font-size:13px} .gbpl{padding:10px 18px 16px;display:grid;gap:9px;font-size:var(--t-s);color:var(--ink-2);list-style:none;margin:0} .js .ocard .v>*{opacity:0;transform:translateY(10px)} .ocard.play .v>*{animation:rung .6s cubic-bezier(.2,.7,.2,1) .1s forwards} @keyframes rung{to{opacity:1;transform:none}} @media (max-width:760px){.oc2{grid-template-columns:minmax(0,1fr)}.ocard .v{height:210px}} @media (prefers-reduced-motion:reduce){.ocard .v>*{animation:none!important;opacity:1!important;transform:none!important}} /* v8i · card-sized visuals */ .ocard .adcard .body{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px} .ocard .adcard .radius{width:96px;height:96px} .ocard .adcard .radius i:nth-child(2){width:40px;height:40px}.ocard .adcard .radius i:nth-child(3){width:68px;height:68px}.ocard .adcard .radius i:nth-child(4){width:96px;height:96px} .ocard .adcard .radius b{transform:translate(-50%,calc(-50% - 28px))} .ocard .adcard .nums3{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:10px} .ocard .adcard .nums3 b{font-size:22px;white-space:nowrap} .ocard .adcard .tgt{display:none} .leads.compact table{min-width:0;width:100%;table-layout:fixed;font-size:13px} .leads.compact th:first-child,.leads.compact td:first-child{width:84px} .leads.compact .path{display:flex;flex-wrap:wrap;gap:4px 6px} .leads.compact .path span{white-space:nowrap} .ocard .sample table{font-size:13px} .ocard .sample td:last-child,.ocard .sample th:last-child{text-align:right;white-space:nowrap} /* ---- 4. integration layer ---------------------------------------------- */ /* Button aliases. The sync script injects `btn btn--sm ghost cta-login` and analytics.js builds the consent buttons as `btn btn--sm ghost|solid` — the v5 class names. The export only knows the `btn--ghost` modifier. */ .btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink-1)} .btn.ghost:hover{background:var(--surface);border-color:var(--ink-3);color:var(--ink-1)} .btn.solid{background:var(--green-600);color:#fff} .btn.solid:hover{background:var(--green-700);color:#fff} /* Header at narrower widths. The served header carries three buttons — Start now (the data-t="cta.start" anchor, which the sync script repoints at /signup and marks .cta-signup), Log in (.cta-login, injected by sync) and Book a demo (.cta-demo) — where the export had room for two. They yield in this order so the bar never wraps, and signup is never the one that goes: ≤1040px Book a demo goes (the hero form and the menu still offer it) ≤760px Log in goes (it is in the menu and the footer) ≤480px the export hides every header button; .cta-signup opts back in, as `.top .btn.ghost.cta-signup` does in assets/site.css. */ @media (max-width:1040px){header.top .cta-demo{display:none}} @media (max-width:760px){header.top .cta-login{display:none}} @media (max-width:480px){header.top .btn.cta-signup{display:inline-flex}} /* Footer. The sync script injects `Start now` and `Log in` links into the WhatsApp item (it anchors on data-t="foot.wa"); stack them like the rest. */ .foot li{display:grid;gap:10px;justify-items:start} .foot .addr span{color:var(--ink-3)} /* The "Cookie preferences" control the cookie policy promises in the footer: a