/* ============================================================================
   Rexo Rail — dark PRODUCT (rexorail.com refresh)
   Same instrument as the parent, machine temperature. Brief §3 dark tokens,
   deepened & de-glowed. Signature: the receipt-flow hero. One move: ledger rows.
   ============================================================================ */

@import url("fonts.css");

@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  /* DARK — product (brief §3, deepened marketing field, de-glowed) */
  --field:   #0B1420;   /* marketing ground — navy ledger-forward, not black void */
  --field-2: #0f1117;   /* recessed / receipt fill */
  --ink:     #f5f7fb;
  --ink-2:   #b3bccb;
  --ink-3:   #7f8a9c;
  --line:    rgba(245,247,251,0.08);
  --line-2:  rgba(245,247,251,0.14);
  --accent:  #428dcc;   /* the real brand blue — 5.21:1 on #0B1420, passes AA */
  --ink-3-strong: #9aa6b6;   /* darker-side mono for small text */

  /* signals — the product's honest money state (§3.1: allowed on the live product / machine) */
  --clear: #4ade80; --approach: #e0a34a; --stop: #e5484d;

  --f-display: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px; --s-12:96px; --s-16:128px;
  --maxw:1120px; --margin-col:92px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--field);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;font-feature-settings:"cv05" 1,"ss01" 1,"tnum" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* type scale (§2.3) */
.display-xl{font-family:var(--f-display);font-variation-settings:"opsz" 144,"wght" 340;font-weight:340;font-size:clamp(2.6rem,1.6rem + 4vw,4rem);line-height:1.03;letter-spacing:-.015em;margin:0}
.display-l{font-family:var(--f-display);font-variation-settings:"opsz" 40,"wght" 400;font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,2.75rem);line-height:1.08;letter-spacing:-.015em;margin:0}
.head-m{font-family:var(--f-display);font-variation-settings:"opsz" 40,"wght" 400;font-weight:400;font-size:1.75rem;line-height:1.15;letter-spacing:-.01em;margin:0}
.body-l{font-size:1.1875rem;line-height:1.6;letter-spacing:-.005em;color:var(--ink-2)}
.body-sm{font-size:.9375rem}
.mono-hero{font-family:var(--f-mono);font-weight:600;font-size:clamp(2rem,1.4rem + 2vw,2.75rem);letter-spacing:-.01em;font-feature-settings:"tnum" 1;line-height:1}
.mono-value{font-family:var(--f-mono);font-weight:500;font-size:.9375rem;letter-spacing:-.01em;font-feature-settings:"tnum" 1}
.mono-label{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3-strong)}
.mono-micro{font-family:var(--f-mono);font-weight:500;font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3-strong)}
.accent{color:var(--accent)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-3)}

/* ledger row (§5a) */
.row{display:grid;grid-template-columns:var(--margin-col) 1fr minmax(140px,auto);gap:0 var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row__key{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.06em;color:var(--ink-3-strong);padding-top:.35em}
.row__body{min-width:0}
.row__body p{margin:var(--s-1) 0 0;color:var(--ink-2);max-width:54ch}
.row__val{justify-self:end;text-align:right;white-space:nowrap}

.section{padding:var(--s-12) 0}
.section__head{margin-bottom:var(--s-8)}
.eyebrow{display:block;margin-bottom:var(--s-2)}

/* nav */
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--field);z-index:10}
.nav__in{display:grid;grid-template-columns:var(--margin-col) 1fr auto;gap:var(--s-4);align-items:center;padding:var(--s-3);max-width:var(--maxw);margin:0 auto}
.nav__mark{font-family:var(--f-display);font-variation-settings:"opsz" 40,"wght" 400;font-size:1.25rem;letter-spacing:-.01em}
.nav__links{display:flex;gap:var(--s-6);justify-self:end;align-items:center}
.nav__links a{font-size:.9375rem;color:var(--ink-2)}
.nav__links a:hover{color:var(--ink)}

/* buttons — flat, no glow */
.btn{display:inline-block;font-family:var(--f-mono);font-weight:500;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;border-radius:9px;border:1px solid transparent;cursor:pointer}
.btn--primary{background:var(--accent);color:#0B1420}/* on-palette field token; dark text passes AA on #428dcc (5.5:1) where §5 "white text" would fail (3.4:1) — flagged to Conner */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink)}

/* hero */
.hero{padding:var(--s-16) 0 var(--s-12);border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:var(--margin-col) 1fr;gap:0 var(--s-4)}
.hero__key{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-3-strong);padding-top:.6em}
.hero h1{max-width:16ch}
.hero__lead{margin:var(--s-4) 0 var(--s-6);max-width:48ch}
.hero__cta{display:flex;gap:var(--s-2);align-items:center}

/* ---- receipt-flow (the rail signature) ---- */
.flow{margin-top:var(--s-8);display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:var(--s-6);align-items:center}
.receipt{background:var(--field-2);border:1px dashed var(--line-2);border-radius:4px;padding:var(--s-4);font-family:var(--f-mono);font-size:.8125rem;color:var(--ink-2);line-height:1.9}
.receipt .r-head{color:var(--ink);letter-spacing:.04em;text-transform:uppercase;font-size:.75rem;margin-bottom:var(--s-2);display:block}
.receipt .r-line{display:flex;justify-content:space-between;gap:var(--s-2)}
.receipt .r-total{border-top:1px solid var(--line-2);margin-top:var(--s-2);padding-top:var(--s-2);color:var(--ink)}
.flow__arrow{align-self:center;position:relative}
.flow__to{border-left:2px dashed var(--line-2);padding-left:var(--s-4)}
.flow__to .mono-label{display:block;margin-bottom:var(--s-1)}
.flow__code{display:grid;grid-template-columns:1fr auto;gap:var(--s-2);align-items:baseline;padding:var(--s-2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow__code .k{font-family:var(--f-mono);font-size:.8125rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.flow__code .v{font-family:var(--f-mono);font-weight:500;font-feature-settings:"tnum" 1;color:var(--accent)}
.flow__note{margin-top:var(--s-2)}

/* dotted-leader proof (§5d) */
.leader{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s-2);align-items:baseline;padding:var(--s-2) 0}
.leader__label{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.leader__dots{border-bottom:1px dotted var(--line-2);transform:translateY(-.28em)}
.leader__amt{font-family:var(--f-mono);font-weight:500;font-feature-settings:"tnum" 1;white-space:nowrap;color:var(--ink)}
.win__rule{border:0;border-top:1px solid var(--line-2);margin:var(--s-2) 0}
.win__net{color:var(--accent)!important}
.sig{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;padding-left:var(--s-2)}
.sig--clear{color:var(--clear)}.sig--approach{color:var(--approach)}.sig--stop{color:var(--stop)}

/* proof panel (a recessed band, 1px ruled — not a card) */
.panel{background:var(--field-2);border:1px solid var(--line-2);border-radius:9px;padding:var(--s-8)}
.measure{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.measure__line{flex:1;border-top:1px dashed var(--line-2);height:0}

/* footer */
.footer{border-top:1px solid var(--line-2);padding:var(--s-8) 0 var(--s-12);margin-top:var(--s-12)}
.footer__grid{display:grid;grid-template-columns:var(--margin-col) 1fr auto;gap:var(--s-4);align-items:start}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6)}
.footer__links a{color:var(--ink-2);font-size:.9375rem}
.footer__sig{justify-self:end;text-align:right}

@media (max-width:720px){
  :root{--margin-col:40px}
  .nav__in{grid-template-columns:1fr auto}
  .nav__in>.mono-label{display:none}
  .leader{grid-template-columns:1fr auto}
  .leader__dots{display:none}
  .panel{padding:var(--s-6) var(--s-4)}
  .nav__links a:not(.btn){display:none}
  .hero__grid,.footer__grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:var(--s-4)}
  .flow__to{border-left:0;padding-left:0;border-top:2px dashed var(--line-2);padding-top:var(--s-4)}
  .row{grid-template-columns:32px 1fr}
  .row__val{grid-column:2;justify-self:start;text-align:left;margin-top:var(--s-2)}
}