/* ---------------------------------------------------------------
   name-1 — Oxblood on white.
   Ink and hairlines carry the structure; oxblood appears only where
   something is decided, live, or released. Space Mono is reserved for
   values a machine produced or a specification fixed.
   --------------------------------------------------------------- */

:root{
  --white:#FFFFFF;
  --paper:#F5F1EE;
  --panel:#FAF8F6;
  --ink:#1A1210;
  --ink-2:#5C504B;
  --ink-3:#94867F;
  --line:rgba(26,18,16,.13);
  --line-2:rgba(26,18,16,.26);
  --accent:#702C24;
  --accent-2:#8A3A30;
  --accent-wash:rgba(112,44,36,.06);
  --ok:#3F6B4A;

  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1180px;
  --bar:68px;                         /* the header's height; the hero fills the screen below it */
  --gut:clamp(20px,5vw,48px);
  --rail:168px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fold:cubic-bezier(.45,0,.12,1);   /* the wordmark: a firm start and a soft stop, like the plate */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--ink)}
.display{font-size:clamp(2.7rem,7vw,5.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.h2{font-size:clamp(1.85rem,3.3vw,2.55rem);font-weight:300;letter-spacing:-.022em;line-height:1.12;text-wrap:balance}
.h3{font-size:1.16rem;font-weight:500;letter-spacing:-.008em;line-height:1.35}
.h4{font-size:.98rem;font-weight:500;letter-spacing:-.004em}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.52;color:var(--ink-2);max-width:34em}
.prose{max-width:36em;color:var(--ink-2)}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:500;color:var(--ink)}
.small{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.dim{color:var(--ink-3)}
.val{font-family:var(--mono);font-size:.82rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.accent{color:var(--accent)}

/* ---------- measure ---------- */
.measure{max-width:40em}
.measure-sm{max-width:34em}
.phone{max-width:300px;width:100%;margin-inline:auto}
.mt-5{margin-top:clamp(38px,5.2vw,62px)}

/* ---------- bracketed labels ----------
   A bracket marks a label or a live value, never prose. The brackets are oxblood
   and the word inside stays ink, which is the same idea as the red hyphen in the
   wordmark. On an oxblood band they drop to one colour, as the logo rules require.
   The " / """ gives them empty alternative text so screen readers skip them. */
.tag::before{content:"[" / "";color:var(--accent);margin-right:.2em}
.tag::after{content:"]" / "";color:var(--accent);margin-left:.2em}
.band--red .tag::before,.band--red .tag::after,
.lede .tag::before,.lede .tag::after{color:inherit;opacity:.72}

/* ---------- shell and bands ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.band{border-top:1px solid var(--line)}
.band--paper{background:var(--paper);border-top:none}
.band--red{background:var(--accent);border-top:none;color:var(--paper)}
.band--red .h2,.band--red .h3,.band--red .h4{color:var(--paper)}
.band--red .band__rail{color:rgba(245,241,238,.6)}
.band--red .lead,.band--red .prose,.band--red p{color:rgba(245,241,238,.84)}
.band--red .prose strong{color:var(--paper)}
.band--red .cols > div{border-top-color:rgba(245,241,238,.34)}
.band--red .link{color:var(--paper);border-bottom-color:rgba(245,241,238,.5)}
.band--red .link:hover{color:var(--paper);border-bottom-color:var(--paper)}
.band--red .btn{border-color:var(--paper);color:var(--paper)}
.band--red .btn:hover{background:var(--paper);color:var(--accent)}
.band--red .btn--paper{background:var(--paper);border-color:var(--paper);color:var(--accent)}
.band--red .btn--paper:hover{background:var(--white);border-color:var(--white);color:var(--accent)}
/* short, hard-hitting points rather than paragraphs */
.hits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:38px}
.hits > div{border-top:1px solid rgba(245,241,238,.42);padding-top:16px}
.hits h3{font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.hits p{margin:7px 0 0;font-size:.92rem;line-height:1.5;color:rgba(245,241,238,.76)}
@media (max-width:760px){.hits{grid-template-columns:1fr;gap:22px;margin-top:30px}}
.band__grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 clamp(28px,5vw,64px);padding-block:clamp(56px,7vw,92px) clamp(60px,7.5vw,100px)}
.band__rail{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-3);padding-top:.55rem}
.band__rail span{display:block;position:sticky;top:96px}
.band__body{min-width:0}
.band__body > * + *{margin-top:22px}
.band__body > .actions{margin-top:30px}
.h3 + .prose{margin-top:10px}
@media (max-width:820px){
  .band__grid{grid-template-columns:1fr;gap:0;padding-block:clamp(44px,8vw,64px) clamp(46px,8vw,68px)}
  .band__rail{padding-top:0;margin-bottom:18px}
  .band__rail span{position:static}
}

/* ---------- links and actions ---------- */
.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color .18s,color .18s}
.link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.btn{
  display:inline-block;font:inherit;font-size:.94rem;line-height:1;cursor:pointer;
  padding:15px 26px;border:1px solid var(--ink);background:none;color:var(--ink);
  text-decoration:none;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s;
}
.btn:hover{background:var(--ink);color:var(--white)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn--quiet{border-color:var(--line-2);color:var(--ink-2)}
.btn--quiet:hover{background:none;border-color:var(--ink);color:var(--ink)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.42}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{background:none;color:var(--ink);border-color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--white);padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
/* Solid, not frosted: a see-through bar blurs the hero's hairlines passing
   under it into a grey haze, and the blur costs the GPU on every scroll. */
.top{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--bar)}
.mark{display:inline-flex;align-items:baseline;font-family:var(--mono);font-size:1.02rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap}
.mark i{font-style:normal;color:var(--accent)}

/* ---------- the wordmark folds ----------
   The header says name-1 at the top of every page and n-1 once the visitor
   scrolls. Scroll down and "ame" slides back into the n the way the blocking
   plate retracts into the solenoid, while -1 closes up behind it; back at the
   top it slides out again.
   The column animates from its own width to nothing, so no glyph is measured;
   the letters are pinned to its right edge, so they leave under the n rather
   than being wiped away. Every header starts at data-fold="auto", shown in
   full; site.js sets "long" at the top and "short" below it, and nothing
   changes without JavaScript. */
.mark__fold{display:inline-grid;grid-template-columns:1fr;transition:grid-template-columns .56s var(--fold)}
.mark__fold > span{display:flex;justify-content:flex-end;min-width:0;overflow:hidden}
.top[data-fold="short"] .mark__fold{grid-template-columns:0fr}

.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,32px)}
/* :not(.btn) matters. Without it these beat .btn / .btn:hover on specificity and
   repaint the Sign in button's label, which on hover leaves ink on ink. */
.nav a:not(.btn){font-size:.93rem;color:var(--ink-2);text-decoration:none;transition:color .16s}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{color:var(--ink)}
.nav .btn{padding:11px 20px;font-size:.88rem}
.burger{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:1px;background:var(--ink);margin:5px auto;transition:transform .22s var(--ease),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none;border-top:1px solid var(--line);background:var(--white)}
.drawer a{display:block;padding:15px 0;font-size:1rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}
.drawer.is-open{display:block}

@media (max-width:820px){
  .nav{display:none}
  .burger{display:block}
}

/* ---------- the home hero ----------
   Two skins of the same block, so the page can alternate oxblood-on-white with
   paper-on-oxblood: .lede is red, .lede--light is white with the headline in red. */
.lede{position:relative;background:var(--accent);color:var(--paper);overflow:hidden}
.lede--light{background:var(--white);color:var(--ink);border-bottom:1px solid var(--line)}
.lede__grid{--gap:clamp(32px,5vw,72px);position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:var(--gap);align-items:center;padding-block:clamp(20px,min(5vw,4.5svh),72px)}
/* The home hero is always the whole first screen, whatever its shape: the
   header plus this fill it exactly, and the dashboard starts below the fold.
   The border on the header is the extra pixel. Its type and spacing take the
   smaller of a width share and a height share (the svh terms), so on a short
   screen everything in it still fits rather than running off the bottom. */
.lede--light > .lede__grid{min-height:calc(100svh - var(--bar) - 1px)}
.lede__eyebrow{margin:0 0 clamp(14px,min(3vw,3.4svh),34px);font-family:var(--mono);font-size:.74rem;
  letter-spacing:.05em;color:rgba(245,241,238,.66)}
.lede--light .lede__eyebrow{color:var(--ink-3)}
.lede__eyebrow{text-wrap:balance}
.stack{font-size:clamp(2.9rem,min(7.4vw,11svh),5.8rem);font-weight:300;letter-spacing:-.034em;line-height:1.0;
  color:var(--paper);margin:0;text-wrap:balance}
.lede--light .stack{color:var(--accent)}
.stack span{display:block}
.lede__sub{margin:clamp(14px,min(3.2vw,3.4svh),38px) 0 0;font-size:clamp(1rem,min(1.65vw,2.6svh),1.32rem);line-height:1.45;
  color:rgba(245,241,238,.88);max-width:28em}
.lede--light .lede__sub{color:var(--ink-2)}
.lede__cta{margin-top:clamp(16px,min(3.6vw,3.8svh),42px)}
.lede__note{margin:clamp(14px,min(2.8vw,3svh),32px) 0 0;padding-top:clamp(10px,1.8svh,16px);border-top:1px solid rgba(245,241,238,.28);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:rgba(245,241,238,.62);max-width:30em}
.lede--light .lede__note{border-top-color:var(--line);color:var(--ink-3)}
.btn--paper{background:var(--paper);border-color:var(--paper);color:var(--accent);font-weight:500}
.btn--paper:hover{background:var(--white);border-color:var(--white);color:var(--accent)}

/* ---------- the pine in section ----------
   site.js grows it into the canvas. The square is larger than the art column
   and sits behind the text (z-index:-1 inside the grid's stacking context).
   Three limits keep it clean at every size: --reach is how far it may run
   left, into the gap but never under the copy; --room is how far it may run
   right, short of the screen edge so the caption under it stays visible; and
   it is never taller than the screen, less --cap for the caption. Within
   those it centres on the column, nudged right by --nudge, and the square and
   its caption are centred together. */
.lede__art{position:relative;align-self:stretch;min-height:clamp(320px,40vw,560px);
  --reach:calc(var(--gap) - 16px);
  --room:calc(var(--gut) + max(0px,(100vw - var(--shell)) / 2) - 18px);
  --nudge:0%;
  --cap:3em;
  --d:min(132%,calc(100svh - 132px - var(--cap)),860px,calc(100% + var(--reach) + var(--room)))}
.lede__section{position:absolute;top:calc(50% - var(--cap) / 2);
  right:calc(-1 * clamp(var(--d) - 100% - var(--reach),(var(--d) - 100%) / 2 + var(--nudge),var(--room)));
  width:var(--d);aspect-ratio:1;transform:translateY(-50%);z-index:-1;pointer-events:none}
.lede__section canvas{position:absolute;inset:0;width:100%;height:100%}
/* the caption hangs under the square, so it can never sit on the drawing */
.lede__fig{position:absolute;right:0;top:calc(100% + 10px);margin:0;text-align:right;font-family:var(--mono);font-size:.68rem;
  line-height:1.6;letter-spacing:.02em;color:var(--ink-3)}
.lede__plate{position:relative;z-index:1;max-width:1440px;padding-block:clamp(40px,6vw,88px) clamp(52px,7vw,100px)}
@media (min-width:1300px){
  /* bigger, and nudged towards the edge of the screen */
  .lede__art{--nudge:8%;--d:min(150%,calc(100svh - 132px - var(--cap)),980px,calc(100% + var(--reach) + var(--room)))}
}
@media (max-width:900px){
  .lede__grid{grid-template-columns:1fr;gap:clamp(26px,7vw,40px);padding-block:clamp(18px,5vw,32px) clamp(40px,8vw,64px)}
  /* On a phone or tablet the section is a figure above the text: the whole
     tree inside the page margins like everything else, with its caption
     directly under it, then the copy. */
  .lede__art{order:-1;min-height:0;padding-bottom:calc(3.2 * .68rem + 10px)}
  .lede__section{position:relative;top:auto;right:auto;left:auto;transform:none;width:min(100%,520px);margin-inline:auto}
  .lede__fig{right:auto;left:0;text-align:left}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,88px) clamp(44px,6vw,72px)}
.hero__line{max-width:16em;margin-bottom:clamp(30px,4.6vw,54px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(30px,5vw,60px);align-items:start}
.hero__copy .lead{margin:0}
.hero__copy .actions{margin-top:34px}
.hero__note{margin:20px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-3)}

.stage{border:1px solid var(--line);background:var(--white)}
.stage__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--ink-3)}
.stage__art{padding:18px 16px 8px}
.stage__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.state{color:var(--ink-2);transition:color .3s}
.state.is-open{color:var(--accent)}
.replay{border:0;background:none;padding:0;font:inherit;font-family:var(--mono);font-size:.72rem;color:var(--ink-3);cursor:pointer;border-bottom:1px solid var(--line-2)}
.replay:hover{color:var(--accent);border-bottom-color:var(--accent)}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:34px}
}

/* ---------- mechanism drawing ---------- */
.mech{width:100%;height:auto}
.mech .edge{fill:none;stroke:var(--ink);stroke-width:1.25}
.mech .thin{fill:none;stroke:var(--ink-3);stroke-width:1}
.mech .hatch{stroke:var(--ink-3);stroke-width:1}
.mech .fillw{fill:var(--white)}
.mech .lbl{font-family:var(--mono);font-size:10.5px;fill:var(--ink-3);letter-spacing:.02em}
.mech .coil{fill:none;stroke:var(--ink);stroke-width:1.25;transition:stroke .25s}
.mech .part{transition:transform .5s var(--ease)}
.mech .spring{stroke:var(--ink-2);stroke-width:1.1;transform-origin:244px 160px;transition:transform .5s var(--ease)}
.mech .arc{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:0;transition:opacity .3s}
.mech .arc-tip{fill:var(--accent);stroke:none}
.mech .spark{fill:var(--accent);opacity:0}
.mech .plug{transition:transform .62s var(--ease);transform-origin:580px 158px}

/* at phone scale the part names would render around 5px, so they come off and
   the drawing keeps only what it can show: the movement */
@media (max-width:760px){
  .mech .annot{display:none}
  .mech .vlbl{font-size:18px}
}
.mech[data-phase="pulse"] .coil,.mech[data-phase="release"] .coil,.mech[data-phase="turn"] .coil{stroke:var(--accent)}
.mech[data-phase="pulse"] .spark{animation:spark .55s linear}
.mech[data-phase="release"] .part,.mech[data-phase="turn"] .part{transform:translateX(34px)}
.mech[data-phase="release"] .spring,.mech[data-phase="turn"] .spring{transform:scaleX(.54)}
.mech[data-phase="turn"] .plug{transform:rotate(90deg)}
.mech[data-phase="turn"] .arc{opacity:1}
@keyframes spark{0%{opacity:0;transform:translateX(0)}12%{opacity:1}100%{opacity:0;transform:translateX(-150px)}}

/* ---------- the flow ---------- */
.flow{margin-top:34px}
.flow__track{position:relative;padding-top:8px}
.flow__line{position:absolute;left:0;right:0;top:36px;height:1px;background:var(--line)}
.flow__fill{position:absolute;top:36px;left:0;width:0;height:1px;background:var(--accent);transition:width .8s var(--ease)}
.flow__nodes{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,30px)}
.flow__node{display:block}
.flow__dot{display:block;position:relative;width:13px;height:13px;margin:22px 0 20px;border:1px solid var(--line-2);background:var(--white);border-radius:50%;transition:border-color .3s,background .3s}
.flow__node .h4{display:block;transition:color .3s}
.flow__node .say{display:block;margin-top:6px;font-size:.855rem;line-height:1.5;color:var(--ink-3);transition:color .3s}
.flow__node.is-on .flow__dot{border-color:var(--accent);background:var(--accent)}
.flow__node.is-on .say{color:var(--ink-2)}
.flow__node.is-past .flow__dot{border-color:var(--accent);background:var(--white)}
.flow__note{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.flow__note span{display:block;max-width:40em;font-size:1.02rem;line-height:1.55;color:var(--ink-2)}

@media (max-width:760px){
  .flow__nodes{grid-template-columns:1fr;gap:0}
  .flow__line{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .flow__fill{display:none}
  .flow__node{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 16px;padding:16px 0;border-bottom:1px solid var(--line)}
  .flow__node:last-child{border-bottom:0}
  .flow__dot{margin:6px 0 0}
}

/* ---------- three product surfaces, on the home page ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.2vw,42px);margin-top:38px}
.trio__art{height:clamp(170px,19vw,250px);display:flex;align-items:center;justify-content:center;padding:20px;margin-bottom:18px}
.trio__art picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.trio__art img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.trio > div{display:flex;flex-direction:column}
.trio h3{padding-top:16px;border-top:1px solid var(--accent)}
.trio p{margin:8px 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.trio__more{align-self:flex-start;margin-top:auto;padding-top:14px;font-size:.88rem;color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(112,44,36,.3)}
.trio__more:hover{border-bottom-color:var(--accent)}
@media (max-width:760px){
  .trio{grid-template-columns:1fr;gap:34px}
  .trio__art{height:170px}
}

/* ---------- figures ---------- */
.fig{margin:0}
.fig img{width:100%}
.fig figcaption{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--ink-3)}
.fig--inset{background:var(--paper);padding:clamp(18px,3.5vw,38px)}

/* ---------- spec rows ---------- */
.spec{margin:30px 0 0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 26px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.96rem;line-height:1.5}
.spec dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-3);padding-top:.32rem}
.spec dd{margin:0;color:var(--ink-2)}
.spec dd b{font-weight:500;color:var(--ink)}
@media (max-width:600px){
  .spec div{grid-template-columns:1fr;gap:3px;padding:14px 0}
  .spec dt{padding-top:0}
}

/* ---------- columns ---------- */
.cols{display:grid;gap:clamp(26px,3.4vw,44px);margin-top:36px}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols > div{border-top:1px solid var(--line-2);padding-top:18px}
.cols p{margin:7px 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
@media (max-width:760px){
  .cols--2,.cols--3{grid-template-columns:1fr;gap:24px}
}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.split--wide-art{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
@media (max-width:860px){
  .split,.split--wide-art{grid-template-columns:1fr;gap:30px}
  .split--flip > *:first-child{order:2}
}

/* ---------- checks ---------- */
.checks{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.checks li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:.96rem;color:var(--ink-2)}
.checks li::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:translateY(-1px)}

/* ---------- timeline ---------- */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,34px);margin-top:36px}
.stages > div{border-top:1px solid var(--line);padding-top:18px}
.stages > div.is-now{border-top-color:var(--accent)}
.stages time{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ink-3);margin-bottom:9px}
.stages .is-now time{color:var(--accent)}
.stages p{margin:6px 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:820px){.stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (max-width:480px){.stages{grid-template-columns:1fr}}

/* ---------- call to action ---------- */
.cta{padding-block:clamp(56px,7vw,92px)}
.band--red .cta .h2,.band--red .cta .prose{color:inherit}
.cta .h2{max-width:16em}
.cta .prose{margin-top:18px}
.cta .actions{margin-top:30px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--paper);padding:clamp(44px,5.5vw,68px) 0 30px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,44px)}
.foot__grid h2{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.04em;color:var(--ink-3);margin-bottom:14px}
.foot__grid ul{list-style:none;margin:0;padding:0}
.foot__grid li{margin-bottom:9px}
.foot__grid li a{font-size:.92rem;color:var(--ink-2);text-decoration:none;transition:color .16s}
.foot__grid li a:hover{color:var(--accent)}
.foot__blurb{font-size:.92rem;line-height:1.55;color:var(--ink-2);max-width:26em;margin:14px 0 0}
.foot__base{margin-top:clamp(34px,4.5vw,52px);padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--ink-3)}
@media (max-width:820px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:480px){
  .foot__grid{grid-template-columns:1fr}
}

/* ---------- document pages ---------- */
.doc{padding-block:clamp(44px,6vw,76px) clamp(56px,7vw,96px)}
.doc__grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 clamp(28px,5vw,64px)}
.doc__meta{font-family:var(--mono);font-size:.7rem;line-height:1.7;letter-spacing:.02em;color:var(--ink-3)}
.doc__meta span{display:block;position:sticky;top:96px}
.doc__body{min-width:0;max-width:40em}
.doc__body h2{font-size:1.32rem;font-weight:500;letter-spacing:-.012em;margin:clamp(38px,4.5vw,54px) 0 0;padding-top:20px;border-top:1px solid var(--line)}
.doc__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc__body h3{font-size:1rem;font-weight:500;margin:26px 0 0}
.doc__body p{margin:.85em 0 0;color:var(--ink-2)}
.doc__body ul,.doc__body ol{margin:.85em 0 0;padding-left:1.15em;color:var(--ink-2)}
.doc__body li{margin-bottom:.5em}
.doc__body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(112,44,36,.3)}
.doc__body a:hover{border-bottom-color:var(--accent)}
.doc__body table{width:100%;border-collapse:collapse;margin:22px 0 0;font-size:.93rem}
.doc__body th,.doc__body td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.doc__body th{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.04em;color:var(--ink-3);border-bottom-color:var(--line-2)}
.doc__body > h1{margin-bottom:18px}
.doc__lede{font-size:1.1rem;line-height:1.55;color:var(--ink-2);margin:0 0 clamp(30px,4vw,44px)}
@media (max-width:820px){
  .doc__grid{grid-template-columns:1fr}
  .doc__meta{margin-bottom:26px}
  .doc__meta span{position:static}
}

/* a value still to be supplied once the company is registered */
.tbd{font-family:var(--mono);font-size:.82em;letter-spacing:-.01em;color:var(--accent);background:var(--accent-wash);padding:1px 6px;white-space:nowrap}

/* ---------- sign in ---------- */
.signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 68px)}
.signin__form{display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,80px) var(--gut)}
.signin__inner{width:100%;max-width:370px;margin:0 auto}
.signin__inner h1{font-size:1.9rem}
.signin__aside{background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,80px) var(--gut)}
.signin__aside .inner{max-width:400px;margin:0 auto;width:100%}
.field{margin-top:22px}
.field label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-3);margin-bottom:8px}
.field input{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);padding:13px 14px;transition:border-color .16s;
}
.field input:focus{outline:none;border-color:var(--accent)}
.field input::placeholder{color:var(--ink-3)}
.signin .btn{width:100%;margin-top:26px;text-align:center}
.signin__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;font-size:.87rem;color:var(--ink-3)}
.notice{margin-top:26px;padding:16px 18px;background:var(--paper);border-left:2px solid var(--accent);font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.notice b{font-weight:500;color:var(--ink)}
@media (max-width:860px){
  .signin{grid-template-columns:1fr;min-height:0}
  .signin__aside{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- 404 ---------- */
.gone{padding-block:clamp(70px,12vw,150px);text-align:left}
.gone > * + *{margin-top:18px}
.gone .actions{margin-top:32px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}