/* ============================================================ BTC DCA Engine — marketing landing page (index.html) Sentence II tokens ported from src/app.css. Dark mode is the `.dark` class on (shared with the app via localStorage.theme). ============================================================ */ :root{ --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#EDEBE5; --surface-3:#E1DED6; --surface-4:#CFCBC1; --ink:#15140F; --ink-2:#55524A; --ink-3:#6E6A61; --rule:#E3E0D8; --rule-strong:#C9C5BA; --accent:#F7931A; --accent-ink:#8F4C06; --accent-tint:#FBE9D3; --up:#146138; --up-tint:#DFF3E7; --down:#A32B2A; --down-tint:#F9E2E1; --s2:#2A78D6; --s3:#C2417C; --s1:#D67208; /* display glass — identical in both themes */ --well:#0A0B0D; --well-2:#15171B; --well-3:#1F2228; --well-edge:#2A2E35; --well-grid:#1C1F24; --well-ink:#F3F4F6; --well-dim:#8E95A0; --well-faint:#7F8793; --amber:#FFB454; --well-up:#3BC47A; --well-down:#FF6B63; --ref:#8E95A0; --focus:#8F4C06; --on-accent:#15140F; --scrim:rgba(21,20,15,.35); --scrim-modal:rgba(21,20,15,.5); --display:"Bricolage Grotesque","Hanken Grotesk",-apple-system,sans-serif; --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --r-surface:3px; color-scheme:light; } :root.dark{ --bg:#17181B; --surface:#1F2024; --surface-2:#26282D; --surface-3:#31343A; --surface-4:#43474F; --ink:#F2F3F5; --ink-2:#A9AEB7; --ink-3:#8A909A; --rule:#2B2E34; --rule-strong:#3E424A; --accent-ink:#F5A340; --accent-tint:rgba(247,147,26,.16); --up:#3DC17A; --up-tint:rgba(61,193,122,.14); --down:#F06560; --down-tint:rgba(240,101,96,.14); --s2:#3987E5; --s3:#D55181; --focus:#F7931A; --scrim:rgba(0,0,0,.55); --scrim-modal:rgba(0,0,0,.7); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;min-height:100dvh;overflow-x:hidden} h1,h2,h3,h4{text-wrap:balance;margin:0} p{text-wrap:pretty;margin:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} img,svg{max-width:100%} :where(button,a,input,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px} ::selection{background:var(--accent-tint);color:var(--ink)} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:999px} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ── utilities ── */ .num{font-variant-numeric:tabular-nums} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .disp{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .accent-ink{color:var(--accent-ink)} /* ── header / nav ── */ .brand{display:inline-flex;align-items:center;color:var(--ink)} .brand .lockup{height:30px;width:auto;display:block} .lp-nav{margin-left:auto;display:inline-flex;gap:2px;align-items:center} .lp-nav a{color:var(--ink-2);font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:999px} .lp-nav a:hover{color:var(--ink);background:var(--surface-2)} .theme-btn{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--ink-2);background:var(--surface-2)} .theme-btn:hover{color:var(--ink);background:var(--surface-3)} .icon{width:16px;height:16px;flex:none} /* ── pill / button ── */ .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 16px; font-size:14px;font-weight:600;background:var(--surface-2);color:var(--ink);line-height:1.2;white-space:nowrap; transition:background-color .15s,color .15s,transform .15s} .pill:hover{background:var(--surface-3)} .pill.solid{background:var(--accent);color:var(--on-accent)} .pill.solid:hover{background:var(--accent-ink);color:var(--bg)} .pill.quiet{background:transparent;color:var(--ink-2)} .pill.quiet:hover{background:var(--surface-2);color:var(--ink)} .pill.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-strong)} .pill.ghost:hover{background:var(--surface-2)} .pill.lg{padding:13px 22px;font-size:15px} .pill.round{width:34px;height:34px;padding:0} /* ── badges ── */ .t{display:inline-flex;align-items:center;gap:4px;font-weight:600;border-radius:999px;padding:2px 9px;font-size:11.5px;white-space:nowrap} .t.up{color:var(--up);background:var(--up-tint)} .t.down{color:var(--down);background:var(--down-tint)} .t.pro{color:var(--accent-ink);background:var(--accent-tint);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px} .t.free,.t.guest{color:var(--ink-2);background:var(--surface-2);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px} /* ── ruled figures ── */ .figs{display:grid;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)} .figs>div{padding:16px 18px 16px 0;min-width:0} .figs>div+div{border-left:1px solid var(--rule);padding-left:18px} .figs .k{font-size:13px;color:var(--ink-2)} .figs .v{font-family:var(--display);font-variation-settings:"opsz" 40;font-weight:700;font-size:28px;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:6px;overflow-wrap:anywhere} .figs .v small{font-size:14px;color:var(--ink-3);margin-left:3px;letter-spacing:0} .figs .s{font-size:12.5px;color:var(--ink-3);margin-top:6px} /* ── section head ── */ .sec-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .sec-head h2{font-family:var(--display);font-variation-settings:"opsz" 24;font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:-.025em;line-height:1.1} .sec-head .r{margin-left:auto;font-size:13px;color:var(--ink-3)} /* ── ruled comparison table ── */ .tbl-wrap{overflow-x:auto} .tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;min-width:520px} .tbl thead th{font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:right;padding:0 0 10px 14px;border-bottom:1px solid var(--rule-strong);white-space:nowrap} .tbl thead th:first-child{text-align:left;padding-left:0} .tbl tbody th{text-align:left;padding:14px 14px 14px 0;border-bottom:1px solid var(--rule);font-weight:600;white-space:nowrap;vertical-align:middle} .tbl tbody th .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:0} .tbl tbody td{padding:14px 0 14px 14px;border-bottom:1px solid var(--rule);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap;vertical-align:middle} .tbl tbody td .big{font-family:var(--display);font-variation-settings:"opsz" 24;font-weight:700;font-size:19px;letter-spacing:-.02em} .tbl tbody td .up{color:var(--up);font-weight:600} .tbl tbody tr:hover th,.tbl tbody tr:hover td{background:var(--surface-2)} /* ── the well (dark instrument glass) — same in both themes ── */ .well{background:var(--well);border-radius:var(--r-surface);padding:22px 24px 18px;color:var(--well-ink); box-shadow:inset 0 0 0 1px var(--well-edge),inset 0 2px 14px rgba(0,0,0,.6);position:relative; --bg:var(--well);--ink:var(--well-ink);--ink-2:var(--well-dim);--ink-3:var(--well-faint);--rule:var(--well-grid); --rule-strong:var(--well-edge);--focus:var(--amber);--surface:var(--well-2);--surface-2:var(--well-3); --surface-3:var(--well-edge);--surface-4:var(--well-faint);--up:var(--well-up);--down:var(--well-down); --accent-ink:var(--amber);--accent-tint:rgba(255,180,84,.14);--scrim:rgba(0,0,0,.6)} .well .head{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap} .well .ro{display:flex;flex-direction:column;gap:5px;min-width:0} .well .ro .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-dim);white-space:nowrap} .well .ro b{font:600 22px var(--mono);letter-spacing:-.01em;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap} .well .ro.main b{font-size:clamp(30px,4.4vw,40px);color:var(--well-ink)} .well .ro b small{font-size:13px;color:var(--well-dim);margin-left:4px;font-weight:500} .well .ro b.up{color:var(--well-up)} .well .ctrls{margin-left:auto;display:flex;gap:6px;align-self:flex-start;flex-wrap:wrap} .seg{display:inline-flex;gap:2px;background:var(--well-2);border-radius:999px;padding:3px;box-shadow:inset 0 0 0 1px var(--well-edge)} .seg button{font:600 10.5px var(--mono);letter-spacing:.04em;color:var(--well-dim);padding:5px 11px;border-radius:999px;transition:background-color .15s,color .15s;line-height:1.4} .seg button:hover{color:var(--well-ink)} .seg button.on{background:var(--well-ink);color:var(--well)} .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .chips .lbl{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-faint);margin-right:4px} .tog{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px 5px 9px;font-size:12.5px;font-weight:600; color:var(--well-dim);background:var(--well-2);box-shadow:inset 0 0 0 1px var(--well-edge);cursor:pointer; transition:background-color .15s,color .15s;white-space:nowrap;line-height:1.3} .tog:hover{color:var(--well-ink)} .tog .sw{width:8px;height:8px;border-radius:50%;background:var(--well-faint);flex:none;transition:background-color .15s,box-shadow .15s} .tog.on{color:var(--well-ink);background:var(--well-3)} .tog.on .sw{background:var(--amber);box-shadow:0 0 6px var(--amber)} .tog .p{font:600 9px var(--mono);letter-spacing:.08em;color:var(--amber);background:rgba(255,180,84,.14);border-radius:999px;padding:1px 6px;text-transform:uppercase} .legend{display:flex;gap:16px;flex-wrap:wrap;font:500 11px var(--mono);color:var(--well-dim);align-items:center} .legend .li{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:none;border:0;font:inherit;color:inherit} .legend .li i{width:16px;height:3px;display:inline-block;border-radius:2px} .legend .li b{color:var(--well-ink);font-weight:600} .chart-foot{display:flex;gap:16px;margin-top:10px;font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--well-faint);flex-wrap:wrap;align-items:center} .chart-foot .src{margin-left:auto} /* ── chart svg ── */ .chart-box{position:relative;width:100%} .chart-svg{display:block;width:100%;height:100%;overflow:visible} .chart-svg .grid-line{stroke:var(--well-grid);stroke-width:1} .chart-svg .grid-lbl{fill:var(--well-faint);font:500 10px var(--mono);letter-spacing:.04em} .chart-svg .series{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .chart-svg .series.hi{stroke-width:2.75} .chart-svg .end-dot{stroke:var(--well);stroke-width:2} .chart-svg .end-lbl{font:600 11px var(--mono);letter-spacing:-.01em} .chart-svg .cross{stroke:var(--well-faint);stroke-width:1;stroke-dasharray:3 3;opacity:0} .tt{position:absolute;pointer-events:none;background:var(--well-3);color:var(--well-ink);border-radius:var(--r-surface); padding:10px 12px;font:500 11.5px var(--mono);z-index:5;min-width:180px;box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0;transition:opacity .12s;transform:translate(-50%,0)} .tt .tt-d{color:var(--well-dim);font-size:10px;letter-spacing:.08em;margin-bottom:7px;text-transform:uppercase} .tt .r{display:flex;gap:14px;justify-content:space-between;margin-top:4px;white-space:nowrap} .tt .r .nm{display:inline-flex;align-items:center;gap:7px} .tt .r i{width:8px;height:8px;border-radius:50%;display:inline-block} .tt .r b{font-variant-numeric:tabular-nums;font-weight:600} /* ── footer ── */ .lp-foot{display:flex;gap:18px;font:500 11px var(--mono);letter-spacing:.06em;color:var(--ink-3);flex-wrap:wrap; border-top:1px solid var(--rule);padding:22px 0 40px;align-items:center;margin-top:20px} .lp-foot a:hover{color:var(--ink)} .lp-foot .r{margin-left:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap} /* ── skip link, page rhythm, reveal ── */ .skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:999px;font-weight:600;font-size:13px} .skip:focus{top:12px} .sec{padding:clamp(48px,7vw,84px) 0} .sec-tight{padding:clamp(34px,5vw,56px) 0} /* reveal is a progressive enhancement: only armed once JS adds .reveal-ready, so with no/failed JS every section stays fully visible. */ .reveal-ready [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.4,0,.1,1),transform .7s cubic-bezier(.4,0,.1,1)} .reveal-ready [data-reveal].in{opacity:1;transform:none} .reveal-ready [data-reveal][data-delay="1"]{transition-delay:.08s} .reveal-ready [data-reveal][data-delay="2"]{transition-delay:.16s} .reveal-ready [data-reveal][data-delay="3"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){.reveal-ready [data-reveal]{opacity:1;transform:none}} @keyframes spin{to{transform:rotate(360deg)}} /* ============================================================ Direction D — the blend: editorial hero · matrix · use-cases ============================================================ */ .lp-top{position:sticky;top:0;z-index:40;display:block;padding:12px 0; background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)} .lp-top .wrap{display:flex;align-items:center;gap:16px;width:100%} .k-head{margin-bottom:8px} .kicker{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)} .lead{font-size:clamp(16px,1.7vw,19px);color:var(--ink-2);max-width:62ch;line-height:1.6;margin-top:14px} /* ---- HERO ---- */ .ed-hero{padding:clamp(40px,7vw,84px) 0 clamp(22px,4vw,40px)} .dateline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 11px var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-3);padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:26px} .dateline .sep{color:var(--rule-strong)} .dateline .live{display:inline-flex;align-items:center;gap:7px;color:var(--accent-ink)} .dateline .live i{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block} .ed-h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,7.2vw,84px);line-height:1.0;letter-spacing:-.04em;max-width:15ch;text-wrap:balance} .ed-h1 em{font-style:normal;color:var(--accent-ink)} .ed-h1 .strike{position:relative;color:var(--ink-3);white-space:nowrap} .ed-h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.07em;background:var(--accent);transform:rotate(-3deg)} .ed-lede{font-size:clamp(17px,1.9vw,21px);color:var(--ink-2);max-width:56ch;line-height:1.55;margin-top:24px} .ed-lede b{color:var(--ink);font-weight:600} .ed-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px} /* ---- EXHIBIT ---- */ .exhibit{margin:0} .exhibit .well{padding:20px 24px 16px} .exhibit .well .top{display:flex;align-items:flex-end;gap:20px 34px;flex-wrap:wrap;margin-bottom:8px} .tallies{display:flex;gap:22px 32px;flex-wrap:wrap;align-items:flex-end} .tally{display:flex;flex-direction:column;gap:5px} .tally .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-faint);display:inline-flex;align-items:center;gap:7px} .tally .k i{width:9px;height:9px;border-radius:50%} .tally b{font:600 15px var(--mono);color:var(--well-ink);font-variant-numeric:tabular-nums} .tally.lead b{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);letter-spacing:-.03em;color:var(--amber)} .exhibit .ctrls{margin-left:auto} .exhibit-chart{height:clamp(250px,34vw,360px);margin-top:6px} .exhibit figcaption{font:500 12px var(--mono);letter-spacing:.02em;color:var(--ink-3);margin-top:14px;text-wrap:pretty} /* ---- pull quote ---- */ .pull{margin:0;padding:clamp(30px,5vw,56px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .pull p{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.2vw,44px);letter-spacing:-.03em;line-height:1.12;max-width:20ch;margin:0 auto;text-align:center;text-wrap:balance} .pull .by{display:block;text-align:center;margin-top:18px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} /* ---- method / standardization ---- */ .method-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:26px} .flow{background:var(--well);border-radius:var(--r-surface);box-shadow:inset 0 0 0 1px var(--well-edge);padding:26px;color:var(--well-ink)} .flow-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center} .flow-node{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:12px 14px;background:var(--well-2);border-radius:var(--r-surface);box-shadow:inset 0 0 0 1px var(--well-edge);min-width:92px} .flow-node .fk{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--well-faint)} .flow-node .fv{font:600 15px var(--mono);color:var(--well-ink)} .flow-node.amber .fv{color:var(--amber)} .flow-op{font:600 18px var(--mono);color:var(--well-faint)} .flow-cap{margin-top:18px;font:500 11.5px var(--mono);color:var(--well-dim);text-align:center} .units{display:flex;flex-direction:column;margin-top:2px} .unit-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)} .unit-row:first-child{border-top:1px solid var(--rule-strong)} .unit-row .dot{width:9px;height:9px;border-radius:50%;flex:none} .unit-row .nm{font-weight:600} .unit-row .u{margin-left:auto;font:600 14px var(--mono);font-variant-numeric:tabular-nums} .unit-row .u small{color:var(--ink-3);font-weight:500;margin-left:3px} /* ---- capabilities ---- */ .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px} .cap{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-surface);padding:20px;display:flex;flex-direction:column;gap:9px;position:relative;transition:border-color .2s,transform .2s} .cap:hover{border-color:var(--rule-strong);transform:translateY(-2px)} .cap .ci{display:flex;align-items:center;gap:10px} .cap .ci .sw{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px color-mix(in srgb,var(--accent) 60%,transparent)} .cap .ci .n{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .cap h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.15} .cap p{font-size:13.5px;color:var(--ink-2);line-height:1.55} .cap .tag{position:absolute;top:16px;right:16px} /* ---- risk readout ---- */ .risk-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:460px} .risk-tbl th,.risk-tbl td{text-align:right;padding:14px 0 14px 16px;border-bottom:1px solid var(--rule);white-space:nowrap;font-size:14px} .risk-tbl thead th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--rule-strong)} .risk-tbl th:first-child,.risk-tbl td:first-child{text-align:left;padding-left:0;font-family:var(--sans)} .risk-tbl tbody th{font-weight:600} .risk-tbl tbody th .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:0} .risk-tbl .hero-col{color:var(--accent-ink);font-weight:700} .risk-tbl tbody th .h{font:500 11px var(--mono);color:var(--ink-3);margin-left:8px} .risk-note{font:500 13px var(--mono);color:var(--ink-3);margin-top:16px;line-height:1.55;text-wrap:pretty;max-width:80ch} .risk-note b{color:var(--ink)} /* ---- tier matrix (the spine) ---- */ .matrix-wrap{overflow-x:auto;margin-top:24px} .matrix{width:100%;border-collapse:collapse;min-width:660px} .matrix th,.matrix td{padding:13px 16px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle} .matrix thead .th-feat{text-align:left} .matrix thead .th-tier{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;border-bottom:2px solid var(--rule-strong)} .matrix thead .th-tier .sub{display:block;font:500 10px var(--mono);color:var(--ink-3);letter-spacing:.04em;margin-top:3px;text-transform:none} .matrix thead .th-pro{background:var(--accent-tint);color:var(--accent-ink);border-radius:var(--r-surface) var(--r-surface) 0 0} .matrix td.col-pro,.matrix th.col-pro{background:var(--accent-tint)} .matrix tbody th{text-align:left;font-weight:500;font-size:14px;color:var(--ink);white-space:nowrap} .matrix tbody th .h{display:block;font:500 11px var(--mono);color:var(--ink-3);margin-top:2px;white-space:normal} .matrix td{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink)} .matrix .yes{color:var(--accent-ink);font-weight:700} .matrix .no{color:var(--ink-3)} .matrix tr.price-row td,.matrix tr.price-row th{border-bottom:0;padding-top:18px;font-weight:700} .matrix tr.price-row .price{font-family:var(--display);font-size:22px;letter-spacing:-.02em} .matrix tr.price-row .price small{font-size:12px;color:var(--ink-3);font-weight:500;font-family:var(--mono)} .matrix .cta-row td{padding-top:14px} .matrix .cta-row .pill{width:100%} /* ---- use cases ---- */ .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 44px;margin-top:26px} .case{border-left:2px solid var(--accent);padding:6px 0 6px 20px} .case .q{display:block;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1.2} .case p{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.55} .case .who{margin-top:10px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)} /* ---- final CTA band ---- */ .cta-band{background:var(--well);color:var(--well-ink);border-radius:var(--r-surface);padding:clamp(30px,5vw,52px); text-align:center;position:relative;overflow:hidden; --ink:var(--well-ink);--ink-2:var(--well-dim);--ink-3:var(--well-faint);--surface-2:var(--well-3);--surface-3:var(--well-edge); --rule-strong:var(--well-edge);--focus:var(--amber)} .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% -20%,rgba(255,180,84,.22),transparent 60%);pointer-events:none} .cta-band h2{position:relative;font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,44px);letter-spacing:-.03em;line-height:1.05;max-width:20ch;margin:0 auto} .cta-band p{position:relative;color:var(--well-dim);margin-top:14px;font-size:15px} .cta-band .acts{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px} @media (max-width:920px){ .method-grid{grid-template-columns:1fr;gap:26px} .caps{grid-template-columns:repeat(2,1fr)} .cases{grid-template-columns:1fr} } @media (max-width:560px){ .lp-nav a:not(.pill){display:none} .caps{grid-template-columns:1fr} .exhibit .well{padding:16px 14px} .tallies{gap:16px 22px} }