/* EventLock homepage, Build 0.231. Paper and ink. The date is the fixed point. */

:root{
  color-scheme:light;
  --paper:#FBF7EF;--paper-2:#F4EDE0;--plate:#FFFDFC;--apricot:#F4DFCA;
  --ink:#171827;--ink-hover:#2F3142;--slate:#555867;--mute:#6B6E7C;
  --hairline:#E7DFD1;--hairline-strong:#D6CBB8;
  --gold:#C5913A;--gold-text:#7A5719;--gold-on-ink:#E9CB96;
  --paper-on-ink:#FBF7EF;--slate-on-ink:#B9BBC6;
  --sage:#5F8A6B;--sage-text:#3E6B4B;--coral:#E8735A;--coral-text:#B0432C;
  --focus:#315EE5;
  --serif:Newsreader,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --t-caption:12px;--t-label:13px;--t-small:14px;
  --t-body:clamp(16px,15.2px + .25vw,17px);
  --t-lead:clamp(18px,16.8px + .4vw,20px);
  --t-h3:25px;
  --t-h2-s:clamp(31px,26px + 1.8vw,42px);
  --t-h2:clamp(38px,28px + 3.2vw,64px);
  --t-h1:clamp(40px,26px + 3.4vw,74px);
  --t-date:clamp(96px,64px + 12vw,208px);
  --t-price:40px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--s-11:160px;
  --r-1:2px;--r-2:4px;--r-3:8px;
  --shadow-plate:0 1px 2px rgba(23,24,39,.06),0 12px 32px -20px rgba(23,24,39,.22);
  --ease-out:cubic-bezier(0.22,1,0.36,1);--ease-draw:cubic-bezier(0.16,1,0.3,1);
  --d-fast:120ms;--d-base:200ms;--d-reveal:520ms;--d-draw:700ms;
  --margin:20px;
}
@media (min-width:600px){:root{--margin:32px}}
@media (min-width:1200px){:root{--margin:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:88px;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;text-rendering:optimizeLegibility}
p{margin:0}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--hairline-strong);transition:text-decoration-color var(--d-fast)}
a:hover{text-decoration-color:var(--gold)}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-1)}
.band :focus-visible,.final :focus-visible{outline-color:var(--gold-on-ink)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Type roles */
.h1{font-family:var(--serif);font-weight:400;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.02em;max-width:19ch;font-optical-sizing:auto}
.h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.015em;max-width:22ch;font-optical-sizing:auto}
.h2-s{font-family:var(--serif);font-weight:400;font-size:var(--t-h2-s);line-height:1.15;letter-spacing:-.01em;max-width:22ch}
.h3{font-family:var(--sans);font-weight:600;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.005em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--slate);max-width:34em}
.body{color:var(--slate);max-width:38em}
.body p + p{margin-top:var(--s-4)}
.small{font-size:var(--t-small);line-height:1.55}
.mono{font-family:var(--mono);font-weight:500}
.label{font-family:var(--mono);font-weight:500;font-size:var(--t-label);line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.caption{font-family:var(--mono);font-weight:500;font-size:var(--t-caption);line-height:1.5;letter-spacing:.06em;color:var(--mute)}
.fig{color:var(--gold-text)}
em{font-style:italic}

/* Layout */
.wrap{width:100%;max-width:calc(1200px + 2 * var(--margin));margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6) 16px}
@media (min-width:600px){.grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-6) 20px}}
@media (min-width:900px){.grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-7) 24px}}
.section{padding-block:var(--s-9)}
@media (min-width:900px){.section{padding-block:var(--s-10)}}
.section > .wrap > .rule,.rule{height:1px;background:var(--hairline-strong);margin-bottom:var(--s-5)}
.folio{display:flex;align-items:baseline;gap:var(--s-3);font-family:var(--mono);font-weight:500;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--s-5)}
.folio b{font-weight:500;color:var(--mute)}
.ruled{position:relative}
@media (min-width:1200px){
  .ruled > .wrap{background-image:repeating-linear-gradient(to right,rgba(231,223,209,.55) 0 1px,transparent 1px calc((100% - 2 * var(--margin) + 24px) / 12));background-position:var(--margin) 0;background-size:calc(100% - 2 * var(--margin) + 12px) 100%;background-repeat:no-repeat}
}

/* Buttons */
.btn{display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;min-height:48px;padding:14px 22px;border:1px solid var(--ink);border-radius:var(--r-2);background:var(--ink);color:var(--paper);font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color var(--d-fast),border-color var(--d-fast)}
.btn:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
.btn.sec:hover{background:transparent;border-color:var(--ink)}
.btn.inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.inv:hover{background:#F4EDE0;border-color:#F4EDE0}
.btn.sm{min-height:40px;padding:10px 16px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.trust{margin-top:var(--s-4)}

/* Nav */
.skip{position:fixed;left:var(--s-4);top:-100px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r-2);text-decoration:none}
.skip:focus{top:var(--s-4)}
.top{position:sticky;top:0;z-index:50;background:var(--paper)}
.top::after{content:"";display:block;height:1px;background:var(--hairline);opacity:0;transition:opacity 160ms}
.top.is-scrolled::after{opacity:1}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
@media (min-width:900px){.nav{height:72px}}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 17px/1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.brand img{width:28px;height:28px;border-radius:6px}
.links{display:none;align-items:center;gap:var(--s-5)}
.links a{font:500 15px/1 var(--sans);color:var(--slate);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color var(--d-fast),border-color var(--d-fast)}
.links a:hover,.links a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:var(--s-5)}
.nav-right .login{display:none;font:500 15px/1 var(--sans);color:var(--slate);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav-right .login:hover{color:var(--ink);border-bottom-color:var(--gold)}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:0 4px;background:none;border:0;font:500 15px/1 var(--sans);color:var(--ink);cursor:pointer}
.menu-btn i{display:block;width:18px;height:11px;position:relative}
.menu-btn i::before,.menu-btn i::after,.menu-btn i b{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink)}
.menu-btn i::before{top:0}.menu-btn i b{top:4.75px}.menu-btn i::after{bottom:0}
.panel{display:none;background:var(--paper);border-bottom:1px solid var(--hairline-strong)}
.panel.is-open{display:block}
.panel .wrap{padding-block:var(--s-4) var(--s-6)}
.panel a{display:block;padding:16px 0;text-decoration:none;font-family:var(--serif);font-size:var(--t-h2-s);line-height:1.15;border-bottom:1px solid var(--hairline)}
.panel .panel-actions{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-5)}
.panel .panel-actions a{border:0;font:500 16px/1 var(--sans);padding:0}
.panel .panel-actions .btn{justify-content:center;padding:14px 22px;font-weight:600}
@media (min-width:900px){
  .links,.nav-right .login{display:flex}
  .menu-btn,.panel{display:none!important}
}
html:not(.js) .menu-btn{display:none}
html:not(.js) .panel{display:block}
@media (min-width:900px){html:not(.js) .panel{display:none!important}}

/* Date block */
.date{display:inline-block;padding:16px 0 12px;border-top:1px solid currentColor;color:var(--ink);position:relative;min-width:6ch}
.date::after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-draw) var(--ease-draw)}
.date.is-in::after,html:not(.js) .date::after{transform:scaleX(1)}
.date .wd,.date .mo{display:block;font-family:var(--mono);font-weight:500;font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.4}
.date .num{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-date);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);font-optical-sizing:auto;margin:6px 0 4px}
.date .lock{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding-bottom:10px;font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;color:var(--gold-text);opacity:0;transition:opacity var(--d-base) var(--ease-out);transition-delay:calc(var(--d-draw) + 100ms)}
.date.is-in .lock,html:not(.js) .date .lock{opacity:1}
.date .lock svg{width:12px;height:12px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.date.sm .num{font-size:40px;margin:2px 0}
.date.sm{padding:8px 0 6px}
.date.sm .lock{margin-top:4px;padding-bottom:4px}
.date.md .num{font-size:96px}
@media (min-width:900px){.date.md .num{font-size:112px}}
@media (min-width:1200px){.date.md .num{font-size:144px}}
.date.inv{color:var(--paper-on-ink)}
.date.inv .num{color:var(--paper-on-ink);font-size:120px}
.date.inv .wd,.date.inv .mo{color:var(--slate-on-ink)}
.date.inv .lock{color:var(--gold-on-ink)}
.date.inv .lock svg{stroke:var(--paper-on-ink)}

/* Plates */
.plate{margin:0;max-width:100%}
.plate .frame{border:1px solid var(--hairline-strong);border-radius:var(--r-2);background:var(--plate);padding:0;box-shadow:var(--shadow-plate);overflow:hidden}
@media (min-width:600px){.plate .frame{padding:8px}}
.plate img{width:100%;height:auto;border-radius:2px}
.plate figcaption{margin-top:var(--s-3);font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;line-height:1.5;color:var(--mute)}
.plate figcaption .fig{color:var(--gold-text);margin-right:8px}
.plate figcaption span + span{display:block}
.plate .who{display:inline-block;margin-bottom:var(--s-2);font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.plate .who::before{content:"";display:inline-block;width:12px;height:1px;background:var(--gold);vertical-align:middle;margin-right:8px}
.phone{margin:0;max-width:390px}
.phone .frame{border:1px solid var(--hairline-strong);border-radius:var(--r-3);background:var(--plate);padding:12px;box-shadow:var(--shadow-plate)}
.phone img{width:100%;height:auto;border-radius:4px}
.phone figcaption{margin-top:var(--s-3);font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;line-height:1.5;color:var(--mute)}
.phone figcaption .fig{color:var(--gold-text);margin-right:8px}

/* Example blocks (plain HTML, visibly an example) */
.example{border:1px solid var(--hairline-strong);border-radius:var(--r-2);background:var(--paper-2);padding:var(--s-5)}
.example .ex-label{display:block;margin-bottom:var(--s-4)}
.example ul li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--hairline);font-size:var(--t-body)}
.example ul li:first-child{border-top:0;padding-top:0}
.example ul li:last-child{padding-bottom:0}
.example ul li .t{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;color:var(--mute);white-space:nowrap}
.example ul li .who-t{font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;color:var(--mute);min-width:9ch}
.example .note{margin-top:var(--s-4);font-size:var(--t-small);color:var(--slate)}
.mark{flex:none;display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hairline-strong);position:relative;top:-2px;margin-right:4px}
.mark.coral{background:var(--coral)}.mark.sage{background:var(--sage)}.mark.gold{background:var(--gold)}
.example .amt{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.example .ex-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--hairline)}
.example .ex-line:first-of-type{border-top:0;padding-top:0}
.example .ex-line .st{font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em}
.example .ex-line .st.sage{color:var(--sage-text)}
.example .ex-line .st.coral{color:var(--coral-text)}
.example .ex-sum{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:4px;border-top:1px solid var(--ink);font-weight:600}
.example .ex-type{font-family:var(--mono);font-weight:500;font-size:var(--t-small);background:var(--plate);border:1px solid var(--hairline-strong);border-radius:var(--r-1);padding:10px 12px;margin-bottom:var(--s-3)}
.example .ex-type b{font-weight:500;color:var(--mute);margin-right:8px}
.example .ex-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-4)}
.example .ex-btns span{font:500 14px/1 var(--sans);padding:9px 12px;border:1px solid var(--hairline-strong);border-radius:var(--r-2);background:var(--plate);color:var(--ink)}
.example .ex-btns span:last-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Hero */
.hero{padding-top:var(--s-6);padding-bottom:var(--s-9)}
@media (min-width:900px){.hero{padding-bottom:var(--s-10)}}
.hero-strip{border-top:1px solid var(--hairline-strong);border-bottom:1px solid var(--hairline-strong);padding-block:var(--s-6);display:grid;gap:var(--s-5);align-items:end}
@media (min-width:900px){.hero-strip{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px}}
/* Homepage hero: headline alone, full strip width (no date lockup column). */
.hero-strip.solo{grid-template-columns:minmax(0,1fr);padding-block:var(--s-7) var(--s-6)}
.hero-strip.solo .h1{max-width:24ch;font-size:clamp(44px,26px + 5.2vw,108px)}
/* Spoken hero: the headline sits on the banner photograph, the paragraph continues the
   same quotation in the ruled strip below it. */
.hero-strip.solo.spoken{gap:var(--s-4);padding-block:var(--s-5)}
.hero-strip.solo.spoken .h1{max-width:26ch;font-size:clamp(31px,19px + 3.1vw,58px)}
.hero-strip.solo.spoken + .hero-row{padding-top:var(--s-5)}
@media (min-width:900px){.hero-strip.solo.spoken + .hero-row{padding-top:var(--s-5)}}
.spoken-line{max-width:62ch;margin:0;font-family:var(--serif);font-size:clamp(17px,15px + .45vw,21px);line-height:1.5;color:var(--slate);text-wrap:pretty}
/* Desktop: the paragraph keeps the left 7/12, mirroring the copy column below. */
@media (min-width:900px){.hero-strip.solo.spoken{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:20px}
  .hero-strip.solo.spoken .spoken-line{grid-column:1}}

/* Full-bleed banner. Lives outside .wrap, so it is page-width without a 100vw
   scrollbar hack. Mobile stacks (photo, then headline on paper); from 900px up the
   headline is laid over the photograph on an ink scrim. */
.banner-hero{padding-top:0}
.hero-banner{position:relative;margin-bottom:var(--s-6)}
.hero-banner .wrap{background-image:none}
.hero-banner-media{display:block}
.hero-banner-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-banner-scrim{display:none}
.hero-banner-text{padding-top:var(--s-6)}
.hero-banner-text .h1{max-width:24ch;font-size:clamp(31px,19px + 3.1vw,58px)}
@media (min-width:900px){
  .hero-banner{margin-bottom:0;height:clamp(400px,66vh,760px)}
  .hero-banner-media,.hero-banner-media img{position:absolute;inset:0;width:100%;height:100%}
  .hero-banner-media img{object-fit:cover;object-position:50% 20%;aspect-ratio:auto}
  /* Ink scrim, the same ink the .band and .final sections use for paper-on-ink text.
     Bottom-up for the text band, plus a left wash so the first characters of each
     line are never the weakest point. */
  .hero-banner-scrim{display:block;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(23,24,39,.88) 0%,rgba(23,24,39,.74) 26%,rgba(23,24,39,.44) 52%,rgba(23,24,39,0) 78%),
               linear-gradient(to right,rgba(23,24,39,.62) 0%,rgba(23,24,39,.28) 42%,rgba(23,24,39,0) 66%)}
  .hero-banner-text{position:absolute;inset:0;display:flex;align-items:flex-end;padding-top:0;padding-bottom:var(--s-7)}
  .hero-banner-text .h1{max-width:17ch;color:var(--paper-on-ink);
    text-shadow:0 1px 2px rgba(23,24,39,.55),0 2px 24px rgba(23,24,39,.45)}
}
.plate.photo .frame{background:transparent}
.hero-row{padding-top:var(--s-8)}
.hero-copy{display:flex;flex-direction:column;gap:var(--s-4)}
.hero-copy .label{margin-bottom:0}
.hero-copy .lead{margin-bottom:var(--s-4)}
.hero-copy,.hero-plate{grid-column:1/-1}
@media (min-width:900px){.hero-copy{grid-column:1/6}.hero-plate{grid-column:6/13}}
/* Homepage only: the photo left the hero row, so the lead sits beside the actions
   instead of stacking above them and pushing the buttons down the page. */
@media (min-width:900px){
  .hero-copy.hero-copy-split{grid-column:1/13;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;row-gap:var(--s-3)}
  .hero-copy.hero-copy-split .lead{grid-column:1;grid-row:1/3;margin-bottom:0}
  .hero-copy.hero-copy-split .actions{grid-column:2;grid-row:1;align-self:start}
  .hero-copy.hero-copy-split .caption.trust{grid-column:2;grid-row:2}
}

/* Bridge */
.bridge{padding-block:var(--s-9)}
.bridge .body{max-width:38em;font-size:var(--t-lead);line-height:1.5;color:var(--ink)}
.bridge .body p + p{margin-top:var(--s-5)}
.bridge .body{grid-column:1/-1}
@media (min-width:900px){.bridge .body{grid-column:3/11}}

/* Story */
.story-head{margin-bottom:var(--s-8)}
.story-head .lead{margin-top:var(--s-4)}
.story{display:grid;gap:var(--s-7) 24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.story{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}}
.rail{align-self:start}
@media (min-width:1200px) and (min-height:641px){.rail{position:sticky;top:96px}}
.rail ol{display:flex;flex-wrap:wrap;gap:6px 18px}
@media (min-width:1200px){.rail ol{flex-direction:column;gap:0}}
.rail li{display:flex;align-items:center;gap:10px;font:500 15px/1 var(--sans);color:var(--mute);padding:9px 0;transition:color var(--d-base)}
@media (min-width:1200px){.rail li{border-bottom:1px solid var(--hairline);padding:12px 0}.rail li:last-child{border-bottom:0}}
.rail li .mark{top:0;margin:0;transition:background-color 400ms var(--ease-out)}
.rail li.is-done{color:var(--slate)}
.rail li.is-done .mark{background:var(--sage)}
.rail li.is-current{color:var(--ink)}
.rail li.is-current .mark{background:var(--gold)}
.rail li .n{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.06em;color:var(--mute);min-width:2ch}
.rail .rail-note{margin-top:var(--s-4);max-width:24em}
html:not(.js) .rail li{color:var(--ink)}
.stops{display:flex;flex-direction:column;gap:var(--s-9)}
.stop{display:grid;gap:var(--s-6)}
.stop .h3{max-width:22ch}
.stop .when{display:block;margin-bottom:var(--s-3)}
.stop .who-line{display:block;margin-top:var(--s-2);font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;color:var(--mute)}
.stop .body{margin-top:var(--s-4)}
.receipt{margin-top:var(--s-5);padding:var(--s-4) 0 0;border-top:1px dashed var(--hairline-strong);max-width:34em}
.receipt .label{display:block;margin-bottom:6px;font-size:var(--t-caption);letter-spacing:.08em}
.receipt p{font-family:var(--mono);font-size:var(--t-small);line-height:1.6;color:var(--slate)}
.stop .proof{max-width:760px}
.callout{margin-top:var(--s-5);max-width:34em}
.callout .example .ex-label{margin-bottom:var(--s-3)}
.callout p.intro{font-style:italic;font-family:var(--serif);font-size:19px;color:var(--ink);margin-bottom:var(--s-3)}
.story-end{margin-top:var(--s-8);text-align:center}

/* Ledger table (honest math) */
.math .lead{margin-top:var(--s-4)}
.ledger{width:100%;border-collapse:collapse;margin-top:var(--s-7);font-size:var(--t-small)}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--hairline)}
.ledger th{font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--ink)}
.ledger td:first-child{color:var(--ink);font-weight:500;width:34%}
.ledger td{color:var(--slate);font-family:var(--mono);font-variant-numeric:tabular-nums}
.ledger td:last-child{color:var(--ink)}
.ledger-scroll{overflow-x:auto}
.math .after{margin-top:var(--s-6);font-size:var(--t-lead);line-height:1.5;color:var(--ink);max-width:34em}
.outcomes{margin-top:var(--s-7);display:grid;gap:0}
@media (min-width:900px){.outcomes{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.outcomes li{padding:var(--s-4) 0;border-top:1px solid var(--hairline);color:var(--slate)}
.outcomes li::before{content:"";display:block;width:12px;height:1px;background:var(--gold);margin-bottom:var(--s-3)}

/* Three people */
.three{padding-block:var(--s-9)}
@media (min-width:900px){.three{padding-block:var(--s-11)}}
.three-grid{display:grid;gap:var(--s-8) 24px}
@media (min-width:900px){.three-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.three-side{align-self:start}
@media (min-width:900px) and (min-height:641px){.three-side{position:sticky;top:112px}}
.three-side .lead{margin-top:var(--s-4)}
.rail-v{display:none;margin-top:var(--s-6)}
@media (min-width:900px){.rail-v{display:block}}
.rail-v li{display:flex;align-items:center;gap:12px;font:600 20px/1.3 var(--sans);color:var(--mute);padding:10px 0;transition:color var(--d-base)}
.rail-v li .mark{top:0;margin:0;transition:background-color var(--d-base)}
.rail-v li[aria-current="true"]{color:var(--ink)}
.rail-v li[aria-current="true"] .mark{background:var(--gold)}
html:not(.js) .rail-v li{color:var(--ink)}
html:not(.js) .rail-v li .mark{background:var(--gold)}
.rail-v + p{margin-top:var(--s-4)}
.panels{display:flex;flex-direction:column;gap:var(--s-8)}
.panel-v .h3{margin-bottom:var(--s-3)}
.panel-v .body{margin-bottom:var(--s-5)}
.panel-v .date.sm{margin-bottom:var(--s-5)}
.panel-v .plate{max-width:760px}
.three-foot{margin-top:var(--s-8);color:var(--slate);max-width:38em}

/* Client */
.client-grid{display:grid;gap:var(--s-7) 24px}
@media (min-width:900px){.client-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.client .lead{margin-top:var(--s-4)}
.client .body{margin-top:var(--s-4)}
.points{margin-top:var(--s-5)}
.points li{padding:12px 0;border-top:1px solid var(--hairline);color:var(--slate);display:flex;gap:12px;align-items:baseline}
.points li:last-child{border-bottom:1px solid var(--hairline)}
.points li::before{content:"";flex:none;display:inline-block;width:12px;height:1px;background:var(--gold);position:relative;top:-4px}
.micro{margin-top:var(--s-4)}

/* Contractors */
.hire{background:var(--apricot)}
.hire .rule{background:var(--hairline-strong)}
.hire-grid{display:grid;gap:var(--s-7) 24px}
@media (min-width:900px){.hire-grid{grid-template-columns:minmax(0,6fr) minmax(0,1fr) minmax(0,5fr)}.hire-copy{grid-column:1}.hire-phone{grid-column:3}}
.hire .lead{margin-top:var(--s-4);color:var(--ink)}
.lockup{margin-top:var(--s-6);border-top:1px solid var(--ink)}
.lockup li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hairline-strong)}
.lockup .fig-n{font-family:var(--mono);font-weight:500;font-size:var(--t-price);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.lockup .fig-d{font:500 18px/1.4 var(--sans);color:var(--ink)}
.zero{margin-top:var(--s-6);font:600 20px/1.4 var(--sans);color:var(--ink);max-width:30em}
.zero + .small{margin-top:var(--s-3);color:var(--slate);max-width:38em}
.hire .points{margin-top:var(--s-6)}
.hire .points li{border-color:var(--hairline-strong);color:var(--ink)}
.hire .note{margin-top:var(--s-5);color:var(--slate);max-width:38em}
.hire .actions{margin-top:var(--s-6)}
.hire .btn.sec{border-color:var(--ink)}
.hire-phone{display:flex;flex-direction:column;align-items:center}
@media (min-width:900px){.hire-phone{align-items:flex-start}}
@media (max-width:899px){.hire-phone{order:-1}}

/* Forms */
.forms-grid{display:grid;gap:var(--s-7) 24px}
@media (min-width:900px){.forms-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.forms .lead{margin-top:var(--s-4)}
.forms .body{margin-top:var(--s-4)}
.forms .support{margin-top:var(--s-5);color:var(--slate);max-width:34em}
.forms .actions{margin-top:var(--s-6)}
.forms .plate{max-width:800px}

/* Founder */
.founder .body{font-size:var(--t-lead);line-height:1.5;color:var(--ink);max-width:36em;margin-top:var(--s-5)}
.founder .inner{grid-column:1/-1}
@media (min-width:900px){.founder .inner{grid-column:3/11}}

/* Pricing */
.pricing .lead{margin-top:var(--s-4)}
.sheet{margin-top:var(--s-8);display:grid;gap:0}
@media (min-width:600px){.sheet{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}}
@media (min-width:900px){.sheet{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}}
.plan{padding:var(--s-5) 0;border-top:1px solid var(--hairline-strong);display:flex;flex-direction:column;gap:var(--s-3)}
@media (min-width:900px){.plan{padding:var(--s-5) 24px;border-top:0;border-left:1px solid var(--hairline)}.plan:first-child{border-left:0;padding-left:0}.plan:last-child{padding-right:0}}
.plan.rec{border-top:2px solid var(--gold)}
@media (min-width:900px){.plan.rec{border-top:2px solid var(--gold);margin-top:-2px}.plan{margin-top:0}}
.plan .name{font-family:var(--serif);font-weight:400;font-size:var(--t-h2-s);line-height:1.15;letter-spacing:-.01em}
.plan .eyebrow{min-height:1.4em}
.plan .price{font-family:var(--mono);font-weight:500;font-size:var(--t-price);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.plan .per{font-size:var(--t-small);color:var(--slate)}
.plan .pos{color:var(--slate);min-height:3.2em}
.plan ul{margin-top:var(--s-2);flex:1}
.plan ul li{display:flex;gap:10px;align-items:baseline;padding:8px 0;font-size:var(--t-small);color:var(--slate)}
.plan ul li::before{content:"";flex:none;display:inline-block;width:12px;height:1px;background:var(--gold);position:relative;top:-4px}
.plan .btn{margin-top:var(--s-3);align-self:flex-start}
.contact-rows{margin-top:var(--s-8);border-top:1px solid var(--hairline-strong)}
.contact-rows li{display:grid;gap:8px;padding:var(--s-5) 0;border-bottom:1px solid var(--hairline)}
@media (min-width:900px){.contact-rows li{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px}}
.contact-rows .t{font-weight:600}
.contact-rows .d{color:var(--slate)}
.money{margin-top:var(--s-6);color:var(--slate);max-width:44em;font-size:var(--t-small)}
.compare{margin-top:var(--s-9)}
.compare .h2-s{margin-bottom:var(--s-4)}
.compare .lead{max-width:38em}
.swipe{display:block;margin-top:var(--s-5)}
@media (min-width:900px){.swipe{display:none}}
.table-scroll{overflow-x:auto;margin-top:var(--s-5);border:1px solid var(--hairline-strong);border-radius:var(--r-2)}
.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--t-small)}
.cmp th,.cmp td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.cmp thead th{background:var(--plate);font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.cmp thead th:first-child{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:500}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp tbody td{color:var(--slate)}
.cmp .grp th{font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);padding-top:20px;background:var(--paper)}
.cmp .inc{color:var(--sage-text);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cmp .inc svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cmp .lk{color:var(--mute);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cmp .lk svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cmp .lk small{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.06em}
@media (max-width:899px){.cmp th:first-child,.cmp td:first-child{position:sticky;left:0;background:var(--paper);z-index:1;box-shadow:none;border-right:1px solid var(--hairline)}.cmp thead th:first-child{background:var(--plate)}}
.legend{margin-top:var(--s-3)}

/* FAQ */
.faq-inner{max-width:100%;grid-column:1/-1}
@media (min-width:900px){.faq-inner{grid-column:3/11}}
.faq .lead{margin-top:var(--s-4)}
.faq-list{margin-top:var(--s-7);border-top:1px solid var(--hairline)}
.faq-list details{border-bottom:1px solid var(--hairline)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;min-height:44px;font:600 18px/1.35 var(--sans);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--mono);font-weight:500;font-size:20px;color:var(--mute);flex:none}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details[open]{background:var(--paper-2);margin-inline:calc(-1 * var(--s-4));padding-inline:var(--s-4)}
.faq-list details > div{padding:0 0 20px;color:var(--slate);max-width:38em}
@keyframes faq-in{from{opacity:0}to{opacity:1}}
.faq-list details[open] > div{animation:faq-in var(--d-base) var(--ease-out)}

/* Ink band and final */
.band{background:var(--ink);color:var(--paper-on-ink);padding-block:var(--s-9)}
.final{background:var(--ink);color:var(--paper-on-ink);padding-block:var(--s-10)}
.final-grid{display:grid;gap:var(--s-7) 24px;align-items:end}
@media (min-width:900px){.final-grid{grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr)}}
.final .h2{color:var(--paper-on-ink)}
.final .lead{color:var(--slate-on-ink);margin-top:var(--s-4)}
.final .actions{margin-top:var(--s-6)}
.final a.tl{color:var(--paper-on-ink);text-decoration-color:var(--gold-on-ink)}
.final .trust{color:var(--slate-on-ink)}

/* Footer */
.foot{border-top:1px solid var(--hairline-strong);padding-block:var(--s-7)}
.foot-grid{display:grid;gap:var(--s-5)}
@media (min-width:900px){.foot-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.foot .brand img{width:24px;height:24px}
.foot p{margin-top:var(--s-3);font-size:var(--t-small);color:var(--mute);max-width:40em}
.foot p a{color:var(--mute)}
.foot ul{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:var(--t-small)}
.foot ul a{color:var(--slate)}
.foot .build{margin-top:var(--s-5);text-align:left}
@media (min-width:900px){.foot .build{text-align:right}}

/* Reveal */
html.js .reveal{opacity:0;transform:translateY(12px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}

@media (prefers-reduced-motion:reduce){
  :root{--d-fast:0ms;--d-base:0ms;--d-reveal:0ms;--d-draw:0ms}
  html{scroll-behavior:auto}
  html.js .reveal,html.js .reveal.is-in{opacity:1;transform:none;transition:none}
  .date::after{transform:none;transition:none}
  .date .lock{opacity:1;transition:none}
  .rail li .mark,.rail-v li .mark,.rail li,.rail-v li{transition:none}
  .rail-v li{color:var(--ink)}.rail-v li .mark{background:var(--gold)}
  .faq-list details[open] > div{animation:none}
  .top::after{transition:none}
}

/* Build 0.237: short homepage (beats, replaces table, calendar, lockup placement) and the subpage hero subhead */
.subhead{color:var(--ink);max-width:24ch}
.beats-grid{display:grid;gap:var(--s-7) 24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.beats-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.beats-grid .rail{grid-column:1/-1}}
@media (min-width:1200px){.beats-grid{grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr)}.beats-grid .rail{grid-column:auto}}
.rail-date{margin-bottom:var(--s-4)}
.beats{display:flex;flex-direction:column}
.beat{display:grid;grid-template-columns:2.5ch minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0;border-top:1px solid var(--hairline)}
.beat:first-child{border-top:0;padding-top:0}
.beat > .n{font-family:var(--mono);font-weight:500;font-size:var(--t-label);letter-spacing:.06em;color:var(--gold-text);padding-top:7px}
.beat .h3{margin-bottom:var(--s-2)}
.beats-end{padding-top:var(--s-5);border-top:1px solid var(--ink)}
.receipt-line{font-family:var(--mono);font-size:var(--t-small);line-height:1.6;color:var(--slate);max-width:34em}
.more{display:inline-block;margin-top:var(--s-4);font:600 16px/1.3 var(--sans);color:var(--ink);text-decoration-color:var(--gold)}
.beats-plate{align-self:start}
@media (min-width:1200px) and (min-height:641px){.beats-plate{position:sticky;top:96px}}
.ledger.stack th.num,.ledger.stack td.num{text-align:right;padding-right:0;white-space:nowrap}
.ledger.stack td:first-child{width:44%}
.ledger.stack td:nth-child(2){font-family:var(--sans);color:var(--slate)}
.ledger.stack tfoot th,.ledger.stack tfoot td{border-top:1px solid var(--ink);border-bottom:0;padding-top:16px;font-family:var(--sans);font-size:var(--t-body);font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.ledger.stack tfoot td.num{font-family:var(--mono);font-weight:500}
.sources{margin-top:var(--s-4)}
.cal-grid{display:grid;gap:var(--s-7) 24px}
@media (min-width:900px){.cal-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.hire-lockup{display:none;width:100%;margin-top:0;margin-bottom:var(--s-6)}
@media (min-width:900px){.hire-lockup{display:block}}
.compare-link{margin-top:var(--s-5)}
.plans-home{margin-top:var(--s-4)}

/* 0.242: Set up section (typographic plate of the drafted service fields; no screenshot exists yet) */
.setup-grid{display:grid;gap:var(--s-7) 24px}
@media (min-width:900px){.setup-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.setup-plate{max-width:760px}
.drafted .fields{margin:0}
.drafted .fields div{padding:12px 0;border-top:1px solid var(--hairline)}
.drafted .fields div:first-child{border-top:0;padding-top:0}
.drafted .fields dt{font-family:var(--mono);font-weight:500;font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.drafted .fields dd{margin:0;font-size:var(--t-small);line-height:1.6;color:var(--slate)}

/* Build 0.255 — feature-set homepage. New scoped classes only. */
.beats-strip{display:flex;flex-direction:column}
.beat-line{padding:var(--s-4) 0;border-top:1px solid var(--hairline)}
.beat-line:first-child{border-top:0;padding-top:0}
.beat-line .body{margin:0}
.beat-line .body b{font-weight:600;color:var(--ink)}
.service-result .fields dd{font-size:var(--t-body);color:var(--ink)}
.service-result .ex-btns span:last-child{background:var(--ink);color:var(--paper-on-ink)}
.cap-strong{font-family:var(--sans);font-size:var(--t-body);line-height:1.6;color:var(--ink)}
.setup-after{margin-top:var(--s-7)}
.feature-grid{list-style:none;margin:var(--s-7) 0 0;padding:0;display:grid;gap:var(--s-5) 40px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.feature-grid li{padding-top:var(--s-4);border-top:1px solid var(--hairline)}
.feature-grid li b{display:block;font-weight:600;font-size:var(--t-body);color:var(--ink);margin-bottom:var(--s-2)}
.feature-grid li p{margin:0;font-size:var(--t-small);line-height:1.65;color:var(--slate)}
.getlist{list-style:none;margin:var(--s-6) 0 0;padding:0;max-width:760px}
.getlist li{padding:var(--s-4) 0;border-top:1px solid var(--hairline);font-size:var(--t-body);line-height:1.6;color:var(--slate)}
.getlist li:first-child{border-top:0;padding-top:0}
.getlist li b{font-weight:600;color:var(--ink)}
.cap-strong span{font-family:var(--sans);font-size:var(--t-body);line-height:1.6;letter-spacing:0;text-transform:none;color:var(--ink)}

/* Build 0.258 — practice call section. New scoped classes only. */
.practice-body{margin-top:var(--s-6)}
.practice-limits{margin-top:var(--s-6)}
.practice-note{margin-top:var(--s-3);max-width:46em;text-transform:none;letter-spacing:.02em}
