/* Landing + shared shell. Hassle tokens, upcap-calm layout, teller terminal.
   Ported from the Claude Design ui-tests bundle (2026-07-27).
   Used by index.html, seis.html and investors.html.
   NOTE: css/pages.css (the 15-page legacy stylesheet) is UNRELATED and untouched. */
:root{
--paper:#FFFFFF;--bone:#F6F6F3;--mist:#EFEFEA;--ink:#0A0B0D;--ink-soft:#15171B;
--night:#0C0D11;--night-2:#131519;--night-line:#23262D;
/* grey-500 / grey-600 are TEXT-ONLY tokens (never used for a border or fill).
   They carry every muted label on the site — eyebrows, source tags, .fine
   captions — at 11–12.5px, so they must clear WCAG 2 AA 4.5:1 against BOTH
   --paper (#FFF) and --bone (#F6F6F3). The bundle shipped grey-500 at #8A8A82,
   which is 3.47:1 on paper and 3.21:1 on bone — a `color-contrast` violation on
   ~35 nodes per page. #6E6E66 is 5.14:1 on paper / 4.75:1 on bone; grey-600 is
   stepped down with it so the muted scale still reads as three distinct tones. */
--grey-100:#F2F2EE;--grey-200:#E6E6E0;--grey-300:#D4D4CC;--grey-400:#B4B4AB;--grey-500:#6E6E66;--grey-600:#5B5B54;--grey-700:#494941;
--signal:#00B863;--signal-deep:#03351F;--signal-soft:rgba(0,184,99,.10);--signal-line:rgba(0,184,99,.30);
--term-green:#3DE08A;--term-dim:#5D8A72;--term-cyan:#62D5D0;--amber:#E8A33D;
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--r-btn:11px;--r-card:16px;--r-lg:22px;--r-pill:100px;
--elev-soft:0 1px 2px rgba(10,11,13,.04),0 4px 14px rgba(10,11,13,.05);
--elev-pop:0 18px 60px -18px rgba(10,11,13,.18),0 2px 6px rgba(10,11,13,.04);
--elev-press:0 3px 0 0 rgba(10,11,13,.85);
--max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--signal-deep)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
::selection{background:var(--signal);color:#022}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--font);letter-spacing:-.01em;padding:14px 20px;border-radius:var(--r-btn);border:none;cursor:pointer;transition:transform .12s cubic-bezier(.2,.7,.3,1),box-shadow .12s,border-color .15s,background .15s}
.btn--primary{background:var(--ink);color:var(--paper);box-shadow:var(--elev-press)}
.btn--primary:hover{color:var(--paper);transform:translateY(1px);box-shadow:0 2px 0 0 rgba(10,11,13,.85)}
.btn--primary:active{transform:translateY(3px);box-shadow:0 0 0 0 rgba(10,11,13,.85)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--grey-300)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--sm{padding:10px 15px;font-size:14px}
.btn--onnight{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 0 rgba(0,0,0,.6)}
.btn--onnight:hover{color:var(--ink);transform:translateY(1px);box-shadow:0 2px 0 0 rgba(0,0,0,.6)}
.btn--outline-night{background:transparent;color:#fff;border:1px solid #33363D}
.btn--outline-night:hover{color:#fff;border-color:#6B6F78}

.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.nav[data-stuck]{border-color:var(--grey-200);background:rgba(255,255,255,.86);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15)}
.nav-in{max-width:var(--max);margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:32px;transition:padding .3s}
.nav[data-stuck] .nav-in{padding-top:11px;padding-bottom:11px}
.brand{font:700 17px/1 var(--mono);letter-spacing:-.03em;display:inline-flex;gap:1px}
.brand .pr{color:var(--signal)}
.nav-links{display:flex;gap:24px;margin-left:8px;font-size:14.5px;color:var(--grey-700)}
.nav-links a{white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-right .lg{font-size:14.5px;color:var(--grey-700)}

.sec{padding:112px 0;position:relative}
.sec--bone{background:var(--bone);border-top:1px solid var(--grey-200);border-bottom:1px solid var(--grey-200)}
.sec--night{background:var(--night);color:#EDEDE8}
.sec--tight{padding:64px 0}
/* Category line (Purple Cow): the one sentence that names what Hassle is FOR.
   Mono, so it reads as a stated position rather than marketing prose. */
.cat{font:400 clamp(17px,2.1vw,22px)/1.8 var(--mono);letter-spacing:-.01em;color:var(--grey-700);max-width:64ch;margin:0 auto}
.cat strong{color:var(--ink);font-weight:700}
/* Clause-by-clause build on the category line. This sentence is a four-beat
   rhetorical build whose payoff IS the last clause, so pacing it makes the
   reader ARRIVE at "Hassle solves proof" rather than be handed it.
   Rides the existing [data-rv] -> .in observer: ZERO new JS, no new dependency,
   no scroll listener. Text stays at full opacity throughout: the motion is
   progressive enhancement, never a readability or contrast gate.
   `inline-block` is required for transform on an inline element, but the spans
   still wrap naturally because each is a whole clause. */
.cat--build span{display:inline-block;opacity:1;transform:translateY(6px);
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.cat--build.in span{transform:none}
.cat--build.in span:nth-child(1){transition-delay:.05s}
.cat--build.in span:nth-child(2){transition-delay:.34s}
.cat--build.in span:nth-child(3){transition-delay:.63s}
/* The payoff lands on a longer beat — the pause before it is the point. */
.cat--build.in span:nth-child(4){transition-delay:1.02s}
.eyebrow{display:flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--grey-500);margin-bottom:20px}
.sec--night .eyebrow{color:var(--term-dim)}
.h2{font-size:clamp(32px,4.4vw,50px)}
.lede{font-size:19px;line-height:1.5;color:var(--grey-700);max-width:56ch;margin-top:18px}
.sec--night .lede{color:#A7ABAF}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-left:auto;margin-right:auto}
.dot{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:pulse 1.8s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,184,99,.45)}50%{opacity:.6;box-shadow:0 0 0 5px rgba(0,184,99,0)}}

.hero{position:relative;padding:96px 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;background:linear-gradient(180deg,#FCF1E8,#F4ECDE);transform:translateZ(0);will-change:transform}
/* The veil height is PROPORTIONAL, not a fixed band. A flat 220px was a magic
   number measured against one hero and then applied to all of them: on a short
   hero (pricing: eyebrow + h1 + lede) it is a generous share of the height and
   blends gently, but on a tall one (home: pill + h1 + lede + CTAs + note + the
   proof card) the same 220px is a sliver at the very bottom, so the colour sits
   flat and then snaps into the next section.
   `clamp(220px, 42%, 520px)` self-corrects: the % resolves against the hero, so
   short heroes clamp to the old 220px floor and are PIXEL-IDENTICAL to before,
   while tall heroes start blending far earlier. No per-page tuning, and it
   keeps working when hero content changes.
   Safe by stacking: .hero-in and .proof are z-index 2, this is z-index 1 and
   pointer-events:none — it can never wash over content or eat a click.
   Cost, stated: the canvas underneath is a live drifting mesh, so a taller veil
   shows less of that animation. Judged worth it — the drift reads as texture,
   the seam between sections reads as a defect. */
.hero-veil{position:absolute;left:0;right:0;bottom:0;height:clamp(220px,42%,520px);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--paper) 92%);z-index:1;pointer-events:none}
.hero-in{position:relative;z-index:2;text-align:center}
.hero h1{font-size:clamp(46px,7.6vw,86px);margin:26px 0 0;letter-spacing:-.045em}
.hero h1 .g{color:var(--signal)}
.hero .lede{font-size:20px;max-width:52ch;margin:22px auto 0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.center .cta-row{justify-content:center}
.hero-note{margin-top:18px;font:500 12.5px/1.6 var(--mono);color:var(--grey-500)}
.hero-note a{color:var(--grey-700);border-bottom:1px solid var(--grey-300)}
.hero-note a:hover{color:var(--ink)}

.card{background:var(--paper);border:1px solid var(--grey-200);border-radius:var(--r-lg);box-shadow:var(--elev-pop);overflow:hidden}
.proof{margin:64px auto 0;max-width:960px;position:relative;z-index:2}
.proof-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--grey-200);font:500 12.5px/1 var(--mono);color:var(--grey-600)}
.proof-head .sp{margin-left:auto;color:var(--grey-500)}
.proof-body{display:grid;grid-template-columns:1.15fr 1fr}
.proof-col{padding:24px 24px 26px}
.proof-col+.proof-col{border-left:1px solid var(--grey-200);background:var(--bone)}
.col-t{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500);margin-bottom:16px}
.claim{display:flex;align-items:baseline;gap:11px;padding:9px 0;border-bottom:1px dashed var(--grey-200);font-size:14.5px}
.claim:last-child{border-bottom:none}
.claim .tick{color:var(--signal);font:600 13px/1.4 var(--mono);flex:none}
.claim .tick.warn{color:var(--amber)}
.claim .src{margin-left:auto;font:500 11.5px/1 var(--mono);color:var(--grey-500);white-space:nowrap}
.mrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--grey-300);font-size:14.5px}
.mrow:last-child{border-bottom:none}
.mrow .fit{margin-left:auto;font:500 11.5px/1 var(--mono);padding:5px 9px;border-radius:var(--r-pill);background:var(--signal-soft);border:1px solid var(--signal-line);color:var(--signal-deep);white-space:nowrap}
.mrow .fit.mid{background:rgba(232,163,61,.12);border-color:rgba(232,163,61,.35);color:#6B4610}
.proof-foot{display:flex;gap:18px;flex-wrap:wrap;padding:13px 20px;border-top:1px solid var(--grey-200);background:var(--paper);font:500 12px/1 var(--mono);color:var(--grey-500)}

.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;position:relative}
/* The rail must terminate ON the step markers, not near them. Marker centres
   are derived, not guessed: .step:first-child has padding-left:0, so circle 1's
   centre sits at exactly its 23px radius; .step:last-child has padding-left:26px,
   so circle 3's centre sits 26+23=49px into the final third. Hence left:23px and
   right:calc(33.3333% - 49px). The previous 12%/12% span floated 105px clear of
   the first marker and overshot the last by 178px at the 1064px content width.
   Animating transform instead of width keeps it off the layout path. */
.flow:before{content:"";position:absolute;top:23px;left:23px;right:calc(33.3333% - 49px);height:1px;background:var(--grey-300)}
.flow:after{content:"";position:absolute;top:23px;left:23px;right:calc(33.3333% - 49px);height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.4,0,.2,1) .1s}
.flow.lit:after{transform:scaleX(1)}
.step{padding:0 26px;position:relative}
.step:first-child{padding-left:0}
.step:last-child{padding-right:0}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--grey-300);display:grid;place-items:center;font:600 13px/1 var(--mono);color:var(--grey-600);position:relative;z-index:2;transition:border-color .3s,color .3s,box-shadow .3s}
.step.lit .n{border-color:var(--signal);color:var(--signal-deep);box-shadow:0 0 0 5px rgba(0,184,99,.10)}
.step h3{font-size:21px;margin:22px 0 9px;letter-spacing:-.025em}
.step p{font-size:15.5px;color:var(--grey-700);max-width:30ch}
.step code{display:inline-block;margin-top:16px;font:500 12.5px/1 var(--mono);padding:7px 11px;border-radius:8px;background:var(--grey-100);border:1px solid var(--grey-200);color:var(--ink-soft)}
.step code .p{color:var(--signal)}

.term-shell{margin-top:44px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;padding-bottom:14px}
.tab{font:500 13.5px/1 var(--mono);padding:9px 14px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--grey-600);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.tab:hover{color:var(--ink);background:var(--grey-100)}
.tab[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.term{background:var(--night);border:1px solid var(--night-line);border-radius:var(--r-card);overflow:hidden;box-shadow:0 30px 70px -34px rgba(10,11,13,.5)}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--night-2);border-bottom:1px solid var(--night-line)}
.term-bar i{width:10px;height:10px;border-radius:50%;display:block}
/* #6E747E on --night-2 is 3.88:1 — fails AA. #868C97 is 5.41:1. */
.term-title{margin-left:10px;font:500 12px/1 var(--mono);color:#868C97}
.term-body{padding:22px 22px 26px;font:400 13.5px/1.85 var(--mono);color:#C9CFD6;min-height:238px;white-space:pre-wrap;overflow-x:auto}
.tl{display:block}
/* Static (non-typed) terminal body: the JS terminal appends elements with no
   text nodes between them, so the container can be pre-wrap. Hand-written
   markup has a newline between every line, which pre-wrap would render as a
   blank row — so collapse at the container and keep `pre` per line instead. */
.term-body--static{white-space:normal}
.term-body--static .tl{white-space:pre-wrap}
.g{color:var(--term-green)}.c{color:var(--term-dim)}.w{color:#fff}.am{color:var(--amber)}.cy{color:var(--term-cyan)}
.cur{display:inline-block;width:8px;height:15px;background:var(--term-green);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.term-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px;padding-top:34px;border-top:1px solid var(--grey-200)}
.term-notes h4{font-size:16.5px;letter-spacing:-.02em;margin-bottom:7px}
.term-notes p{font-size:14.5px;color:var(--grey-700)}
.term-notes a{color:var(--signal-deep);border-bottom:1px solid var(--signal-line)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split--top{align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font:500 12px/1 var(--mono);padding:7px 11px;border-radius:var(--r-pill);border:1px solid var(--night-line);color:#A7ABAF}
/* Light-section variant: the bundle only styled .chip for --night. On paper or
   bone the night tone is 2.13:1 (fails AA), so give it the ink-side palette —
   same pattern as the .pane light variant below. */
.sec:not(.sec--night) .chip{border-color:var(--grey-300);color:var(--grey-700)}
.panes{display:grid;gap:14px}
.pane{border:1px solid var(--night-line);border-radius:var(--r-card);background:var(--night-2);padding:20px 22px}
.pane h4{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--term-dim);margin-bottom:14px}
.pane ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:14.5px}
.pane li{display:flex;gap:10px;align-items:baseline;color:#DDE1E4}
.pane li:before{content:"✓";color:var(--term-green);font:600 12px/1.5 var(--mono)}
.pane--no li{color:#8C9198}
.pane--no li:before{content:"✕";color:#6B4B7A}
/* Light-section variant: the adviser panes on index.html sit on paper, not night. */
.sec:not(.sec--night) .pane{border-color:var(--grey-200);background:var(--bone)}
.sec:not(.sec--night) .pane h4{color:var(--grey-500)}
.sec:not(.sec--night) .pane li{color:var(--grey-700)}
.sec:not(.sec--night) .pane li:before{color:var(--signal)}
.sec:not(.sec--night) .pane--no li{color:var(--grey-600)}

.ladder{display:grid;gap:10px}
.rung{display:grid;grid-template-columns:150px 1fr 128px;align-items:center;gap:16px;font:500 13px/1 var(--mono)}
.rung .nm{color:var(--grey-600)}
.rung .track{height:8px;border-radius:var(--r-pill);background:var(--grey-200);overflow:hidden}
.rung .fill{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--grey-400);transition:width 1s cubic-bezier(.4,0,.2,1)}
.rung .mt{font-size:11.5px;color:var(--grey-500);text-align:right}
.rung.on .nm{color:var(--ink)}
.rung.on .fill{background:var(--signal)}
.rung.here .mt{color:var(--signal-deep)}
.fine{font:400 12.5px/1.7 var(--mono);color:var(--grey-500);margin-top:30px;max-width:72ch}
.sec--night .fine{color:var(--term-dim)}

.plogos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 46px;margin-top:34px;font:500 15px/1 var(--font);color:var(--grey-500);letter-spacing:-.01em}
.plogos span{opacity:.85}

.cta{position:relative;overflow:hidden;padding:128px 0;text-align:center;border-top:1px solid var(--grey-200)}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;transform:translateZ(0);will-change:transform}
.cta-in{position:relative;z-index:2}
.cta h2{font-size:clamp(34px,5.2vw,58px)}
.cmd{display:inline-flex;gap:10px;margin-top:30px;padding:12px 18px;border-radius:var(--r-btn);background:var(--night);color:#D5DCE3;font:500 13.5px/1 var(--mono);box-shadow:var(--elev-soft)}
.cmd .g{color:var(--term-green)}

.footer{background:var(--night);color:#8A909A;padding:64px 0 32px;font-size:14.5px}
.footer a{color:#8A909A}
.footer a:hover{color:#fff}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer .brand{color:#fff}
.f-tag{margin-top:14px;max-width:34ch;line-height:1.6}
/* #5E646E on --night is 3.25:1 — fails AA. #868C97 is 5.74:1 and still sits
   below the #8A909A link tone, so the column headings stay de-emphasised. */
.footer h5{margin:0 0 14px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#868C97}
.footer ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.f-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:22px;border-top:1px solid var(--night-line);font:500 12.5px/1 var(--mono);color:#868C97}

.knock{display:grid;gap:10px;margin-top:44px}
.krow{display:grid;grid-template-columns:1fr auto auto;gap:26px;align-items:center;padding:18px 22px;border:1px solid var(--grey-200);border-radius:var(--r-card);background:var(--paper)}
.krow .kn{font-size:16.5px;font-weight:600;letter-spacing:-.025em}
.krow .km{margin-top:5px;font:500 12.5px/1.5 var(--mono);color:var(--grey-500)}
.krow .kr{font:500 12px/1.7 var(--mono);color:var(--grey-600);text-align:right;white-space:nowrap}
.krow .kb{font:600 13.5px/1 var(--font);padding:11px 15px;border:1px solid var(--grey-300);border-radius:var(--r-btn);white-space:nowrap}
@media (max-width:760px){.krow{grid-template-columns:1fr;gap:14px}.krow .kr,.krow .kb{text-align:left}}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.tcard{border:1px solid var(--grey-200);border-radius:var(--r-card);background:var(--paper);padding:24px 22px}
.tcard .tk{display:block;margin-bottom:15px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500)}
.tcard h4{font-size:17.5px;letter-spacing:-.028em}
.tcard p{margin-top:9px;font-size:14.5px;color:var(--grey-700)}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

[data-rv]{opacity:1;transform:translateY(14px);transition:transform .7s cubic-bezier(.2,.6,.2,1)}
[data-rv].in{transform:none}
@media (prefers-reduced-motion:reduce){[data-rv],.cat--build span{opacity:1;transform:none;transition:none}.dot,.cur{animation:none}
  /* The JS honoured reduced-motion by collapsing its stagger, but the CSS
     transitions still ran — so the rail still swept for .9s and the markers
     still faded. Kill the transitions too, and land the rail in its end state. */
  .flow:after{transition:none;transform:scaleX(1)}
  .step .n{transition:none}}

@media (max-width:1000px){
.split{grid-template-columns:1fr;gap:44px}
.flow{grid-template-columns:1fr;gap:36px}
.flow:before,.flow:after{display:none}
.step{padding:0}
.step p{max-width:46ch}
.term-notes{grid-template-columns:1fr;gap:26px}
.proof-body{grid-template-columns:1fr}
.proof-col+.proof-col{border-left:none;border-top:1px solid var(--grey-200)}
.f-top{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:720px){
.sec{padding:80px 0}
.nav-links{display:none}
.rung{grid-template-columns:112px 1fr;gap:12px}
.rung .mt{display:none}
.rung.here .mt{display:block;grid-column:2;text-align:left;margin-top:-4px}
}