
.landing,.site-header{--nv:#0a1426;--nv-2:#101e38;--nv-ink:#e8eefc;--nv-soft:#c3cee6;--nv-muted:#9fb0d0;--nv-line:rgba(159,176,208,.22);--nv-rule:rgba(159,176,208,.07);
--verm:#ff6a45;--verm-ink:#c2410c;--mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
--tile-base:var(--nv);--tile-text-lo:var(--ink);--tile-text-hi:#fff}
@media (prefers-color-scheme:dark){.landing{--verm-ink:#ff8a6b;--tile-base:#c3cee6;--tile-text-hi:#0b1220}}
main.landing-main{max-width:none;padding:0}
.landing .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.landing .wrap{max-width:1180px;margin:0 auto;padding:0 var(--s4)}
.landing section{padding:56px 0}
.landing section+section{border-top:1px solid var(--line)}
.landing h2{font-size:clamp(1.75rem,4.4vw,2.75rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 var(--s4);font-weight:800;max-width:22ch;text-wrap:balance}
.landing .sub{color:var(--muted);font-size:1.0625rem;max-width:62ch;margin-bottom:var(--s5)}
.landing a:focus-visible,.landing summary:focus-visible,.landing input:focus-visible,.landing select:focus-visible,.nav-cta:focus-visible{outline:3px solid var(--verm);outline-offset:3px}

/* ---- header on the home page: navy, one solid action ---- */
.site-header{background:var(--nv);border-bottom:1px solid var(--nv-line)}
.site-header .brand{color:#fff}.site-header .brand .badge{background:transparent;border:1px solid var(--nv-line);color:var(--nv-muted);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em}
.site-header .nav-public a,.site-header .support-link{color:var(--nv-ink)}.site-header .support-link{border-color:var(--nv-line)}
.site-header .nav-public a:hover,.site-header .support-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-cta{display:none;align-items:center;min-height:44px;padding:0 14px;border-radius:2px;background:var(--verm);color:var(--nv);font-weight:750;text-decoration:none;white-space:nowrap;font-size:.9375rem}
.nav-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);color:var(--nv-ink);font-weight:650;text-decoration:none}
.site-header .support-link{display:none}
.nav-cta:hover{background:#ff8463;color:var(--nv)}

/* ---- the board: hero and closing band ---- */
.hero,.close{background-color:var(--nv);color:var(--nv-ink)}
.landing section.hero{padding:24px 0 48px;border-top:0}
.hero h1{font-size:clamp(2.3rem,7.4vw,4.6rem);line-height:1;letter-spacing:-.035em;font-weight:850;margin:var(--s6) 0 var(--s5);color:#fff;text-wrap:balance}
.hero h1 span{display:block}
.hero .lede{font-size:1.125rem;line-height:1.6;color:var(--nv-soft);max-width:56ch;margin-bottom:var(--s5)}
.landing .ctas{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;margin:0 0 var(--s3)}
.landing .cta{display:inline-flex;align-items:center;justify-content:center;flex:1 1 100%;min-height:52px;padding:0 24px;border-radius:2px;background:var(--verm);color:var(--nv);font-weight:750;text-decoration:none;font-size:1.0625rem}
.landing .cta:hover{background:#ff8463;color:var(--nv)}
.landing .cta-2{display:inline-flex;align-items:center;min-height:48px;color:inherit;font-weight:650;text-underline-offset:5px}
.close .cta-2{color:var(--nv-ink)}.close .cta-2:hover{color:#fff}
.landing .fine{font-size:var(--fs-sm);color:var(--muted);margin:0;max-width:52ch}.hero .fine{color:var(--nv-muted)}

.live{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8125rem;line-height:1.7;color:var(--nv-soft);display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0;padding-bottom:var(--s3);border-bottom:1px solid var(--nv-line)}
.live b{color:#fff;font-weight:700}.live .sep{color:var(--nv-muted)}
.live a{color:inherit;text-decoration:none}.live a:hover{text-decoration:underline;text-underline-offset:4px}
.live-k{color:#fff;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--verm);animation:pulse 2.4s ease-in-out infinite}
.live-at{flex-basis:100%;color:var(--nv-muted)}.live-x{display:none}

.hero-grid{display:grid;gap:var(--s5)}
.inbox{background:var(--nv-2);border:1px solid var(--nv-line);padding:20px 20px 16px;align-self:end}
.inbox-k{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-soft);margin:0 0 var(--s3)}
.inbox-title{font-size:1.25rem;font-weight:750;line-height:1.3;color:#fff;margin:0 0 4px}
.inbox-sol{font-family:var(--mono);font-size:.8125rem;color:var(--nv-muted);margin:0 0 var(--s3)}
.inbox dl{margin:0;border-top:1px solid var(--nv-line)}
.inbox dl div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--nv-line)}
.inbox dt{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nv-muted);padding-top:2px}
.inbox dd{margin:0;color:var(--nv-ink);font-size:.9375rem}
.inbox .fit dd{color:var(--nv-ink)}
.track{display:flex;justify-content:space-between;align-items:center;height:22px;margin-bottom:6px;padding:0 6px;border:1px dashed var(--nv-muted);font-family:var(--mono);font-size:.6875rem;color:var(--nv-muted)}
.inbox-title a{color:#fff;text-decoration:none}.inbox-title a:hover{text-decoration:underline;text-underline-offset:4px}
.inbox-open{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:var(--s4) 0 0}
.inbox-open a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--verm);color:#fff;font-weight:700;text-decoration:none;border-radius:2px}
.inbox-open a:hover{background:var(--verm);color:var(--nv)}
.inbox-open span{font-size:var(--fs-xs);color:var(--nv-muted)}
.inbox-note{font-size:var(--fs-xs);color:var(--nv-muted);margin:var(--s3) 0 0}

.board{margin-top:56px}
.board-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-muted);margin:0 0 var(--s2)}
.board-h span:first-child{color:#fff;font-weight:700}
.board-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--nv-ink)}
.board-rows li{border-bottom:1px solid var(--nv-line);animation:flap .5s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 0}
.b-row{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 0;color:inherit;text-decoration:none}
.b-row:hover{background:rgba(255,255,255,.04)}.b-row:hover .b-title{text-decoration:underline;text-underline-offset:4px}
.board-rows li:nth-child(2){animation-delay:.07s}.board-rows li:nth-child(3){animation-delay:.14s}.board-rows li:nth-child(4){animation-delay:.21s}.board-rows li:nth-child(5){animation-delay:.28s}.board-rows li:nth-child(6){animation-delay:.35s}
.b-left{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:1.125rem;color:#fff;grid-column:1;grid-row:1}
.b-left.hot{color:var(--verm)}
.board-rows time{font-family:var(--mono);color:var(--nv-muted);grid-column:2;grid-row:1;justify-self:end;align-self:center;font-size:.875rem}
.b-title{grid-column:1/-1;grid-row:2;font-weight:650;color:#fff;line-height:1.35}
.b-meta{grid-column:1/-1;grid-row:3;color:var(--nv-muted);font-size:var(--fs-sm)}

/* ---- before and after: one ruled table ---- */
.pairs{width:100%;border-collapse:collapse}
.pairs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pairs tr{display:grid;gap:6px;padding:16px 0;border-top:1px solid var(--line)}
.pairs tbody tr:last-child{border-bottom:1px solid var(--line)}
.pairs td,.pairs th{display:block;padding:0;border:0}
.pairs td::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.pairs td:first-child{color:var(--muted)}
.pairs td:last-child{font-weight:600}
.pairs td:last-child::before{color:var(--ink)}

/* ---- after the match ---- */
.after-grid{display:grid;gap:var(--s5);margin:0}
.after-grid div{border-top:2px solid var(--ink);padding-top:var(--s3)}
.after-grid dt{font-weight:750;font-size:1.125rem;margin-bottom:4px}
.after-grid dd{margin:0;color:var(--muted)}

/* ---- tile map ---- */
.where-grid{display:grid;gap:var(--s5)}
.tiles{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;max-width:780px}
.tile{aspect-ratio:1;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--line);color:var(--muted);line-height:1.1;min-width:0}
.tile b{font-size:clamp(8px,2.3vw,13px);font-weight:700}
.tile i{display:none;font-style:normal;font-family:var(--mono);font-size:11px}
.tile.l1{background:color-mix(in srgb,var(--tile-base) 18%,var(--card));color:var(--tile-text-lo)}
.tile.l2{background:color-mix(in srgb,var(--tile-base) 38%,var(--card));color:var(--tile-text-lo)}
.tile.l3{background:color-mix(in srgb,var(--tile-base) 65%,var(--card));color:var(--tile-text-hi)}
.tile.l4{background:var(--tile-base);color:var(--tile-text-hi)}
.tiles-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:var(--s3);color:var(--muted);font-size:var(--fs-sm)}
.tiles-key .tile{width:14px;height:14px;aspect-ratio:auto}
a.tile{text-decoration:none}a.tile:hover{outline:2px solid var(--ink);outline-offset:1px}
.rank{list-style:none;margin:0;padding:0;align-self:start;border-top:2px solid var(--ink)}
.rank li{border-bottom:1px solid var(--line)}
.rank a{display:grid;grid-template-columns:2.5rem minmax(0,1fr) 4rem;align-items:center;gap:var(--s3);min-height:44px;padding:0;color:var(--ink);text-decoration:none;font-family:var(--mono);font-variant-numeric:tabular-nums}
.rank a:hover .rank-s{text-decoration:underline;text-underline-offset:3px}
.rank-s{font-weight:700}.rank-n{text-align:right}
.rank-bar{height:6px;background:var(--line)}.rank-bar span{display:block;height:100%;background:var(--ink)}

/* ---- money ---- */
.roi{display:grid;gap:var(--s5)}
.roi fieldset{border:0;margin:0;padding:0;min-width:0}
.roi label{display:block;font-weight:600;margin:var(--s4) 0 var(--s1)}.roi label:first-of-type{margin-top:0}
.roi input,.roi select{width:100%;min-height:48px;font:inherit;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.375rem;padding:0 2px;border:0;border-bottom:2px solid var(--field);border-radius:0;background:transparent;color:var(--ink)}
.roi select{font-size:1.125rem}
.slip{border-top:2px dashed var(--field);border-bottom:2px dashed var(--field);padding:var(--s4) 0;font-family:var(--mono);font-variant-numeric:tabular-nums;align-self:start}
.slip-h{font-size:.875rem;color:var(--muted);margin-bottom:var(--s2)}
.slip ul{list-style:none;margin:0;padding:0}
.slip li{display:flex;align-items:baseline;gap:8px;padding:8px 0;font-size:1rem}
.slip li::after{content:"";flex:1;order:1;border-bottom:2px dotted var(--field);transform:translateY(-4px);min-width:16px}
.slip li span{order:0;white-space:nowrap}.slip li output{order:2;font-weight:700}
.slip li.total{border-top:2px solid var(--ink);margin-top:var(--s2);padding-top:var(--s3);font-size:1.375rem}
.slip li.total output{color:var(--verm-ink)}
.roi-note{grid-column:1/-1;color:var(--muted);font-size:var(--fs-sm);margin:0}

/* ---- plan ---- */
.plan-grid{display:grid;gap:var(--s5)}
.price{margin:var(--s3) 0 var(--s2);display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.price .amt{font-size:clamp(3.25rem,10vw,5.5rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.price .per{font-size:1.25rem;color:var(--muted)}
.incl{list-style:none;margin:0;padding:0;align-self:end;border-top:2px solid var(--ink)}
.incl li{padding:12px 0;border-bottom:1px solid var(--line)}

/* ---- questions ---- */
.faq-grid{display:grid;gap:var(--s5)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{min-height:56px;display:flex;align-items:center;cursor:pointer;font-weight:650;font-size:1.0625rem;list-style:none;padding-right:32px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;font-family:var(--mono);font-size:1.5rem;color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);max-width:66ch;padding-bottom:var(--s4)}
.ask{border-top:2px solid var(--ink);padding-top:var(--s3);align-self:start}
.ask-h{font-weight:750;font-size:1.125rem;margin-bottom:var(--s2)}
.faq a,.ask a{color:var(--ink);text-decoration-color:var(--verm-ink);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---- closing band ---- */
.landing section.close{padding:64px 0;border-top:0}
.close h2{color:#fff;font-size:clamp(1.9rem,5.6vw,3.4rem);max-width:24ch}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes flap{from{opacity:0;transform:perspective(600px) rotateX(-80deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.board-rows li,.live .dot{animation:none}.faq summary::after{transition:none}}

@media (min-width:600px){.tile i{display:block}.live-at{flex-basis:auto;margin-left:auto}.live-x{display:inline}
.nav-signin{display:none}.nav-cta{display:inline-flex}.landing .cta{flex:0 0 auto}}
@media (min-width:760px){
.landing section{padding:88px 0}
.landing section.hero{padding:28px 0 72px}
.hero,.close{background-image:linear-gradient(to bottom,transparent 39px,var(--nv-rule) 39px,var(--nv-rule) 40px);background-size:100% 40px}
.hero .lede{font-size:1.25rem}
.pairs thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.pairs thead tr{border-top:0;padding:0 0 10px}
.pairs th{text-align:left;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pairs th:last-child{color:var(--ink)}
.pairs tr{grid-template-columns:1fr 1fr;column-gap:var(--s6);padding:18px 0}
.pairs td::before{display:none}
.after-grid{grid-template-columns:1fr 1fr;column-gap:var(--s6);row-gap:var(--s6)}
.roi{grid-template-columns:1fr 1fr;column-gap:72px}
.plan-grid{grid-template-columns:1fr 1fr;column-gap:72px}
.b-row{grid-template-columns:7rem minmax(0,1fr) minmax(0,19rem) 4.5rem;align-items:baseline;gap:20px;padding:14px 8px;margin:0 -8px}
.b-left,.b-title,.b-meta,.board-rows time{grid-row:1}
.b-left{grid-column:1}.b-title{grid-column:2}.b-meta{grid-column:3}.board-rows time{grid-column:4}
}
@media (min-width:980px){
.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:end}
.hero-grid.solo{grid-template-columns:1fr}
.hero h1{margin-top:64px}
.where-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:56px;align-items:start}
.faq-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:72px}
.after-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-grid .ask{margin-top:calc(2.75rem + var(--s4))}
}
