/* ================================================================= tokens
   The hero is night and the page is daylight. That is the argument, not a
   flourish: the dark field is the 1am moment the product exists for, the
   light below it is the sober explanation you read beforehand.
   NIGHT tokens are fixed in both themes - that field is the same at noon. */
:root{
  --night:#0B0F17;           /* indigo-black. a screen at 1am. */
  --night-2:#121826;
  --night-ink:#E8EBF1;
  --night-muted:#8792A5;
  --night-faint:#5A6478;
  --brass:#C89B45;           /* the one warm point. used almost nowhere else. */

  --ground:#F6F7F9;          /* cool paper, blue-biased. not cream. */
  --raised:#FFFFFF;
  --sunk:#ECEEF2;
  --ink:#131821;
  --muted:#59626F;
  --faint:#88919D;
  --rule:#DCE0E6;
  --rule-strong:#C0C7D0;
  --brass-ink:#8A6114;       /* brass that survives on paper */
  --brass-soft:#F3E9D4;
  --slate:#3C5068;           /* the HELD direction */
  --slate-soft:#E3E8EF;
  --shadow:0 1px 2px rgba(19,24,33,.05), 0 10px 30px -16px rgba(19,24,33,.22);

  --gutter:30px;             /* 16px at phone width. one knob, used everywhere. */
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --ground:#0E1219; --raised:#151A23; --sunk:#11161D;
    --ink:#E6E9EF; --muted:#98A1AE; --faint:#6C7684;
    --rule:#242B36; --rule-strong:#374050;
    --brass-ink:#D9A64A; --brass-soft:#2A2314;
    --slate:#8FB0D6; --slate-soft:#192130;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1219; --raised:#151A23; --sunk:#11161D;
  --ink:#E6E9EF; --muted:#98A1AE; --faint:#6C7684;
  --rule:#242B36; --rule-strong:#374050;
  --brass-ink:#D9A64A; --brass-soft:#2A2314;
  --slate:#8FB0D6; --slate-soft:#192130;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  background:var(--ground); color:var(--ink); margin:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:1060px; margin:0 auto; padding:0 var(--gutter)}
.skip{position:absolute; left:-9999px; top:0; z-index:99; background:var(--brass); color:#10131A; padding:10px 16px; border-radius:2px; text-decoration:none; font-size:.92rem}
.skip:focus{left:12px; top:12px}
.col{max-width:62ch}
h1,h2{font-family:Newsreader,Georgia,"Times New Roman",serif; font-weight:500; text-wrap:balance; margin:0}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.022em}
h2{font-size:clamp(1.7rem,3.1vw,2.4rem); line-height:1.16; letter-spacing:-.014em}
h3{font-family:"IBM Plex Sans",sans-serif; font-size:1.1rem; font-weight:600; line-height:1.35; margin:0; letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin:0}
.lede{font-size:1.16rem; color:var(--muted); line-height:1.6}
.stack{display:flex; flex-direction:column}
.g10{gap:10px}.g14{gap:14px}.g18{gap:18px}.g22{gap:22px}
.mt30{margin-top:30px}

/* ================================================================= the night field
   Mostly empty on purpose. One small lit object, low in the frame, carries it. */
.night{position:relative; background:var(--night); color:var(--night-ink); overflow:hidden; isolation:isolate}
#grain{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none}
.night::after{ /* the light the countdown throws. pure CSS, no image. */
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:-30%; width:min(1100px,140%); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(200,155,69,.16), rgba(200,155,69,.05) 38%, transparent 66%);
}
.night-in{position:relative; z-index:1}

.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.brand{font-family:"IBM Plex Mono",monospace; font-weight:500; letter-spacing:.03em; font-size:1.03rem; color:var(--night-ink); text-decoration:none}
.brand span{color:var(--brass)}
.nav-right{display:flex; align-items:center; gap:20px}
.nav-right a{color:var(--night-muted); text-decoration:none; font-size:.92rem}
.nav-right a:hover{color:var(--night-ink)}
.nav-right a[aria-current="page"]{color:var(--night-ink)}

.hero{padding:96px 0 0; min-height:min(74vh,660px); display:flex; flex-direction:column; justify-content:space-between}
.hero h1{color:var(--night-ink); max-width:17ch}
.hero .sub{color:var(--night-muted); font-size:1.17rem; max-width:54ch; line-height:1.6}
.thesis{font-family:Newsreader,Georgia,serif; font-style:italic; font-size:1.45rem; color:var(--brass); margin-top:4px}

/* the one lit object */
.beacon{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; padding:72px 0 44px}
.req{display:flex; flex-direction:column; gap:9px; min-width:min(300px,100%)}
.req-label{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--night-faint)}
.clock{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem,7vw,4.2rem); line-height:.95; letter-spacing:-.03em;
  color:var(--brass); text-shadow:0 0 44px rgba(200,155,69,.3);
}
.req-note{font-size:.86rem; color:var(--night-faint); max-width:34ch}
.hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-bottom:6px}
.btn{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none; border-radius:2px;
  background:var(--brass); color:#10131A; border:1px solid var(--brass);
  padding:14px 24px; font-weight:600; font-size:.98rem;
}
.btn:hover{background:transparent; color:var(--brass)}
.btn .p{font-family:"IBM Plex Mono",monospace; font-weight:500; opacity:.72}
.platform{font-size:.83rem; color:var(--night-faint); max-width:42ch}
.night-link{font-size:.9rem; color:var(--night-muted); text-decoration:underline; text-underline-offset:3px}
.night-link:hover{color:var(--night-ink)}

/* interior page header. same night field, no countdown. */
.page-head{padding:60px 0 66px; display:flex; flex-direction:column; gap:16px}
.page-head h1{color:var(--night-ink); max-width:22ch; font-size:clamp(2.1rem,4.8vw,3.4rem)}
.page-head .eyebrow{color:var(--night-faint)}
.page-head .sub{color:var(--night-muted); font-size:1.1rem; max-width:58ch; line-height:1.6}
.page-head .stamp{font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--night-faint); letter-spacing:.04em}

/* ================================================================= daylight */
section{padding:72px 0; border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}

/* running prose, used by every interior page. When .prose sits on the same
   element as .wrap, the wrap keeps its width and gutter and the 66ch reading
   measure applies to the children, so prose starts at the same left edge as
   every section heading on the site rather than floating in the middle. */
.prose{max-width:66ch}
.wrap.prose{max-width:1060px}
.wrap.prose > *{max-width:66ch}
.wrap.prose > .tbl-wrap{max-width:none}
.prose > *:first-child{margin-top:0}
.prose h2{margin:46px 0 14px}
.prose h3{margin:32px 0 8px}
.prose p{color:var(--muted); margin:13px 0}
.prose ul,.prose ol{color:var(--muted); margin:14px 0; padding-left:20px}
.prose li{margin:7px 0}
.prose li::marker{color:var(--faint)}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--brass-ink); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose code{font-family:"IBM Plex Mono",monospace; font-size:.88em; background:var(--sunk); padding:2px 6px; border-radius:2px; color:var(--ink); overflow-wrap:anywhere}
.prose hr{border:0; border-top:1px solid var(--rule); margin:38px 0}

.note{border-left:2px solid var(--rule-strong); padding:3px 0 3px 17px; margin:22px 0; color:var(--muted); font-size:.95rem}
.note strong{color:var(--ink)}
.note.warn{border-left-color:var(--brass-ink)}
.note p + p{margin-top:10px}

.verbatim{
  font-family:Newsreader,Georgia,serif; font-size:1.2rem; line-height:1.5; color:var(--ink);
  border-left:2px solid var(--brass-ink); padding:6px 0 6px 18px; margin:26px 0; max-width:54ch;
}

.tbl-wrap{overflow-x:auto; margin:28px calc(var(--gutter) * -1); padding:0 var(--gutter); -webkit-overflow-scrolling:touch}
.tbl{width:100%; min-width:520px; border-collapse:collapse; font-size:.92rem}
.tbl th,.tbl td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--muted)}
.tbl thead th{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--rule-strong)}
.tbl tbody th{color:var(--ink); font-weight:500}
.tbl td strong{color:var(--ink); font-weight:600}
.tbl .soon{color:var(--faint)}

.pair{display:grid; grid-template-columns:1fr 1fr; margin-top:36px; border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.half{padding:30px 28px; background:var(--raised)}
.half + .half{border-left:1px solid var(--rule); background:var(--sunk)}
.dir{font-family:"IBM Plex Mono",monospace; font-size:.69rem; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px}
.dir.now{color:var(--brass-ink)}
.dir.wait{color:var(--slate)}
.dir .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.half h3{margin:15px 0 10px}
.half p{color:var(--muted); font-size:.95rem}
.half ul{margin:15px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.half li{font-size:.9rem; color:var(--muted); padding-left:17px; position:relative}
.half li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--rule-strong)}

.layers{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:34px}
.layer{display:flex; flex-direction:column; gap:11px}
.layer .eyebrow{color:var(--brass-ink)}
.layer .eyebrow.soon{color:var(--faint)}
.layer p{color:var(--muted); font-size:.96rem}

.leaves{margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.leaves li{display:grid; grid-template-columns:32px 1fr; gap:16px; align-items:baseline; padding:17px 0; border-bottom:1px solid var(--rule)}
.leaves .n{font-family:"IBM Plex Mono",monospace; font-size:.77rem; color:var(--faint)}
.leaves p{font-size:.96rem; color:var(--muted)}
.leaves p + p{margin-top:7px}
.leaves strong{color:var(--ink); font-weight:500}
.never{margin-top:24px; font-size:.97rem; color:var(--ink); font-weight:500}

.limits{margin:34px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:22px}
.limits li{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start}
.limits .x{font-family:"IBM Plex Mono",monospace; color:var(--faint); font-size:.88rem; border:1px solid var(--rule-strong); width:22px; height:22px; border-radius:2px; display:grid; place-items:center; flex:none; margin-top:3px}
.limits strong{display:block; font-weight:600; font-size:.99rem; margin-bottom:3px}
.limits p{color:var(--muted); font-size:.94rem}

.tiers{display:grid; grid-template-columns:1fr 1.12fr; gap:20px; margin-top:36px; align-items:start}
.tier{border:1px solid var(--rule); border-radius:3px; padding:30px 28px; background:var(--raised); display:flex; flex-direction:column; gap:17px}
.tier.lock{border-color:var(--brass-ink); box-shadow:var(--shadow)}
.tier-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.tier-name{font-family:Newsreader,Georgia,serif; font-size:1.48rem}
.tier-price{font-family:"IBM Plex Mono",monospace; font-size:1.24rem}
.tier-price .per{font-size:.78rem; color:var(--faint)}
.tier p{color:var(--muted); font-size:.95rem}
.tier ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.tier li{font-size:.93rem; color:var(--muted); padding-left:18px; position:relative}
.tier li::before{content:""; position:absolute; left:0; top:.6em; width:9px; height:1px; background:var(--brass-ink)}
.tier .soon{color:var(--faint)}
.tier-note{font-size:.84rem; color:var(--faint)}
.btn-dark{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none; border-radius:2px;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink);
  padding:13px 22px; font-weight:600; font-size:.96rem; align-self:flex-start;
  cursor:pointer; font-family:inherit; line-height:1.3;
}
.btn-dark:hover{background:transparent; color:var(--ink)}
.btn-dark .p{font-family:"IBM Plex Mono",monospace; font-weight:500; opacity:.72}
.commit{font-family:Newsreader,Georgia,serif; font-style:italic; font-size:1.18rem; color:var(--ink); margin-top:30px}

/* waitlist form */
.wl{margin-top:26px; max-width:52ch}
.wl-label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
/* tier choice. Two radios, Free first, because Free is now a waitlist too. */
.wl-tier{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:20px}
.wl-opt{display:inline-flex; align-items:center; gap:9px; font-size:.95rem; color:var(--ink); cursor:pointer}
.wl-opt input{accent-color:var(--brass-ink); width:15px; height:15px; margin:0; flex:none; cursor:pointer}
.wl-row{display:flex; gap:10px; flex-wrap:wrap}
.wl-input{
  flex:1 1 240px; min-width:0; font:inherit; font-size:.96rem; color:var(--ink);
  background:var(--raised); border:1px solid var(--rule-strong); border-radius:2px; padding:12px 14px;
}
.wl-input::placeholder{color:var(--faint)}
.wl-input:focus{border-color:var(--ink); outline:none}
.wl-note{margin-top:12px; font-size:.86rem; color:var(--faint)}
.wl-note a{color:var(--brass-ink)}
.wl-msg{margin-top:12px; font-size:.92rem; color:var(--ink)}

/* steps, used on the early-access page */
.steps{margin:28px 0 0; padding:0; list-style:none; counter-reset:step}
.steps li{counter-increment:step; display:grid; grid-template-columns:32px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--rule)}
.steps li:first-child{border-top:1px solid var(--rule)}
.steps li::before{content:counter(step,decimal-leading-zero); font-family:"IBM Plex Mono",monospace; font-size:.77rem; color:var(--faint); padding-top:.25em}
.steps strong{display:block; color:var(--ink); font-weight:600; font-size:.99rem; margin-bottom:4px}
.steps p{color:var(--muted); font-size:.94rem}
.steps p + p{margin-top:8px}
.steps code{font-family:"IBM Plex Mono",monospace; font-size:.88em; background:var(--sunk); padding:2px 6px; border-radius:2px; color:var(--ink)}

/* faq */
.qa{margin:34px 0 0; border-top:1px solid var(--rule)}
.qa > div{padding:22px 0; border-bottom:1px solid var(--rule)}
.qa h3{margin-bottom:8px}
.qa p{color:var(--muted); font-size:.95rem}
.qa p + p{margin-top:10px}
.qa a{color:var(--brass-ink)}

/* changelog */
.rel{margin:34px 0 0; border-top:1px solid var(--rule)}
.rel > div{padding:24px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:130px 1fr; gap:20px}
.rel .v{font-family:"IBM Plex Mono",monospace; font-size:.95rem; color:var(--ink)}
.rel .d{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--faint); display:block; margin-top:4px}
.rel p{color:var(--muted); font-size:.95rem}
.rel ul{margin:10px 0 0; padding-left:20px; color:var(--muted); font-size:.95rem}

/* 404 */
.gone{padding:110px 0 130px}
.gone h1{max-width:18ch}
.gone .links{display:flex; gap:22px; flex-wrap:wrap; margin-top:28px}
.gone .links a{color:var(--brass-ink); text-decoration:underline; text-underline-offset:3px; font-size:.97rem}

footer{border-top:1px solid var(--rule); padding:40px 0 64px; color:var(--faint); font-size:.87rem}
.foot-in{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot-links{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
.foot-links a{color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-in a{color:var(--muted); text-decoration:none}
.foot-in a:hover{color:var(--ink)}
.tbtn{border:1px solid var(--rule-strong); background:transparent; color:var(--muted); border-radius:999px; height:30px; padding:0 14px; cursor:pointer; font:inherit; font-size:.82rem}
.tbtn:hover{color:var(--ink); border-color:var(--ink)}

/* hidden has to beat the display rules above it, or hiding the form after a
   successful submit does nothing (.wl-row is a flex container). */
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media (max-width:820px){
  .pair,.layers,.tiers{grid-template-columns:1fr}
  .half + .half{border-left:0; border-top:1px solid var(--rule)}
  .hero{padding:68px 0 0; min-height:0}
  .beacon{padding:56px 0 40px; gap:28px}
  section{padding:56px 0}
  .page-head{padding:48px 0 54px}
  .rel > div{grid-template-columns:1fr; gap:8px}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .nav{height:58px}
  .nav-right{gap:15px}
  .nav-right a{font-size:.87rem}
  .gone{padding:80px 0 96px}
}