/* ============================================================================
   Steward Host, plainly: the public site (served at /).
   ----------------------------------------------------------------------------
   The brand layer is unchanged: this file reads design/theme.css for every
   colour, the type scale and the spacing scale. No colour is written here.
   The idea is an editorial page: a photographic cover, then numbered chapters
   with a rail, a receipt for the money, and a facing pair for the trust table.
   Base styles below are the phone's own composition; the (min-width:1000px)
   block is the desktop's own composition, not the same page made wider.
   Plain CSS only: no scripting, no WebGL, no layout that needs either.
   ========================================================================= */

/* ---- shell ------------------------------------------------------------- */
html,body{ max-width:100%; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--text);
  font-size:1.0625rem;
  line-height:1.6;
}
picture{ display:block; }
figure{ margin:0; }
img,svg,table{ max-width:100%; }
main{ display:block; }

.wrap{
  --pad:clamp(18px,4.5vw,40px);
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Pico draws `ul li` as a square marker on the <li> itself, so every list of
   our own has to silence it on the item, not only on the list. */
.foot li,
.side li,
.plain li,
.facts li,
.fact-rows li,
.limits-ed li,
.steps-ed li{ list-style:none; }

/* the reader can see that a bracketed fact is a placeholder, not a value */
.ph{
  background:var(--mark-bg); color:var(--mark-ink);
  border:1px solid var(--mark-border); border-radius:var(--radius-xs);
  padding:0 .25em;
}

/* small tracked label, used for every eyebrow on the page */
.kicker,
.rail-label,
.side-label,
.ledger-head,
.foot-head{
  font-family:var(--label-font);
  font-size:var(--label-size);
  letter-spacing:var(--label-tracking);
  text-transform:var(--label-case);
  font-weight:var(--label-weight);
  margin:0;
}
.kicker{ color:var(--primary); margin:0 0 var(--space-3); }
.rail-label,
.side-label,
.foot-head{ color:var(--text-muted); }
.ledger-head{ color:var(--primary); }

/* ---- masthead ---------------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:30;
  padding-block:0;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.masthead-in{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:58px;
}
.brand{
  display:inline-flex; align-items:center; gap:var(--space-2);
  flex:0 1 auto; min-width:0;
  color:var(--text); text-decoration:none; font-weight:700;
}
.brandmark{ width:21px; height:21px; flex:none; display:block; color:var(--primary); }
.brand-name{ font-size:var(--text-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flag{
  flex:none; margin:0;
  font-family:var(--label-font); font-size:.64rem;
  letter-spacing:var(--label-tracking); text-transform:uppercase; font-weight:600;
  color:var(--primary-hover); background:var(--primary-soft);
  border:1px solid var(--primary-soft-border); border-radius:var(--radius-pill);
  padding:.22rem .55rem;
}
.jump{ display:none; }
.jump-one{
  margin-left:auto; flex:none;
  font-size:var(--text-sm); font-weight:600; color:var(--primary);
  text-decoration:none; border-bottom:1px solid var(--primary-soft-border);
  padding-bottom:1px;
}
/* At 320px the name, the pill and the one link cannot share a row without
   the link being clipped. The pill is the thing to drop: the pre-launch fact
   is said again, in full, in the closing band and the footer. */
@media (max-width:400px){
  .flag{ display:none; }
}

/* ---- opener: photographic cover, then the indigo panel (phone) --------- */
.opener{ border-bottom:1px solid var(--border); }
.opener-in{ display:grid; gap:0; }
.opener-photo{
  order:-1;
  margin-inline:calc(var(--pad) * -1);
  margin-block:0 var(--space-5);
}
.opener-photo img{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 10; object-fit:cover; object-position:50% 45%;
}
.opener-photo figcaption{
  padding:var(--space-3) var(--pad) 0;
  font-size:var(--text-sm); color:var(--text-muted);
}
.opener-copy{
  margin-inline:calc(var(--pad) * -1);
  padding:clamp(28px,6.4vw,46px) var(--pad) clamp(30px,6.4vw,46px);
  background:var(--brand-900);
  color:var(--neutral-0);
}
.opener-copy h1{
  margin:0 0 var(--space-4);
  font-size:clamp(1.98rem,8.6vw,2.5rem);
  line-height:1.06; letter-spacing:-.03em; font-weight:700;
  color:var(--neutral-0);
  text-wrap:balance;
}
.opener-copy .kicker{ color:color-mix(in srgb,var(--neutral-0) 76%,transparent); }
.opener-copy .standfirst{
  color:color-mix(in srgb,var(--neutral-0) 84%,transparent);
  font-size:clamp(1.06rem,4.4vw,1.2rem); line-height:1.5;
  margin:0 0 var(--space-4); max-width:44ch;
}
.opener-note{
  margin:0; max-width:44ch; font-size:var(--text-md);
  color:color-mix(in srgb,var(--neutral-0) 82%,transparent);
}
.opener-go{ margin:var(--space-5) 0 0; }
.go{
  display:inline-flex; align-items:center; gap:.6em;
  min-height:44px; padding:.7rem 1.1rem;
  color:var(--neutral-0); text-decoration:none; font-weight:650; font-size:var(--text-md);
  border:1px solid color-mix(in srgb,var(--neutral-0) 42%,transparent);
  border-radius:var(--radius-sm);
}
.go::after{
  content:""; width:.5em; height:.5em; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(-1px,1px);
}
.go:hover{ background:color-mix(in srgb,var(--neutral-0) 12%,transparent); }
.opener-price{
  margin:var(--space-5) 0 0; font-size:var(--text-sm);
  color:color-mix(in srgb,var(--neutral-0) 78%,transparent);
}
.opener-price strong{ color:var(--neutral-0); font-size:var(--text-base); }

/* desktop-only contents strip */
.index{ display:none; }

/* ---- chapters ---------------------------------------------------------- */
.chapter{ border-top:1px solid var(--border); padding-block:clamp(44px,8vw,104px); }
.chapter-in{ display:grid; gap:var(--space-5); }
.rail{
  display:flex; align-items:baseline; gap:var(--space-3);
  padding-top:var(--space-3);
  border-top:2px solid var(--accent);
}
.num{
  font-size:.95rem; font-weight:700; letter-spacing:.04em;
  color:var(--primary); font-variant-numeric:tabular-nums;
}
.body h2{
  margin:0 0 var(--space-4);
  font-size:clamp(1.7rem,7.2vw,2.1rem);
  line-height:1.08; letter-spacing:-.028em; font-weight:700;
  text-wrap:balance;
}
.body > p{ max-width:70ch; }
.standfirst{
  font-size:clamp(1.06rem,4.4vw,1.2rem); line-height:1.5;
  color:var(--text-secondary); margin:0 0 var(--space-4); max-width:58ch;
}
.small{
  display:block; font-size:var(--text-sm); color:var(--text-muted);
  margin:var(--space-5) 0 0; max-width:70ch;
}
.small a{ color:var(--text-secondary); }

/* 01: the six things, as a numbered editorial list */
.plain{ list-style:none; margin:var(--space-5) 0 0; padding:0; counter-reset:plain; display:grid; gap:0; }
.plain li{
  counter-increment:plain;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-1) var(--space-4);
  align-items:baseline;
  padding:var(--space-4) 0;
  border-top:1px solid var(--border);
}
.plain li::before{
  content:counter(plain,decimal-leading-zero);
  grid-row:1; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  color:var(--primary); font-variant-numeric:tabular-nums;
}
.plain h3{ grid-column:2; margin:0; font-size:var(--text-base); font-weight:650; }
.plain p{ grid-column:2; margin:0; font-size:var(--text-md); color:var(--text-secondary); }

/* 02 and 06: two sides facing each other */
.facing{ display:grid; gap:0; margin-top:var(--space-5); }
.side{ padding:var(--space-5) 0; border-top:1px solid var(--border); }
.side-label{ margin:0 0 var(--space-3); }
.side ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.side li{
  margin:0; padding-left:var(--space-5); position:relative;
  color:var(--text-secondary); font-size:var(--text-md);
}
.side li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:7px; height:7px; border:2px solid var(--border-strong); border-radius:50%;
}
.side-lead li{ color:var(--text); }
.side-lead li::before{ border-color:var(--accent); }

/* full-bleed photographic band */
.band-photo{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-muted);
}
.band-photo img{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 3; object-fit:cover; object-position:50% 45%;
}
.band-photo figcaption{
  padding:var(--space-3) 0 var(--space-4);
  font-size:var(--text-sm); color:var(--text-muted);
}
.band-tall img{ object-position:50% 32%; aspect-ratio:4 / 5; }

/* 03: three steps, as a phone timeline */
.steps-ed{
  list-style:none; margin:var(--space-5) 0 0; padding:0;
  display:grid; gap:0;
}
.steps-ed li{
  position:relative;
  padding:0 0 var(--space-6) 3.1rem;
}
.steps-ed li::after{
  content:""; position:absolute; left:15px; top:2.2rem; bottom:0;
  width:2px; background:var(--border);
}
.steps-ed li:last-child{ padding-bottom:0; }
.steps-ed li:last-child::after{ display:none; }
.step-num{
  position:absolute; left:0; top:0;
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--primary); color:var(--on-primary);
  font-size:var(--text-sm); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.steps-ed h3{ margin:0 0 var(--space-2); font-size:var(--text-base); font-weight:650; }
.steps-ed p{ margin:0; font-size:var(--text-md); color:var(--text-secondary); }

/* a short list of facts, one to a rule */
.fact-rows{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:0; }
.fact-rows li{
  padding:var(--space-4) 0; border-top:1px solid var(--border);
  font-size:var(--text-md); color:var(--text-secondary);
}
.fact-rows strong{ color:var(--text); }

/* 04: the money, as a receipt */
.cost-in{ display:grid; gap:var(--space-6); margin-top:var(--space-5); }
.cost-ledger{
  border:1px solid var(--border-strong); background:var(--surface);
  padding:clamp(22px,4.5vw,32px);
}
.ledger-head{ margin:0 0 var(--space-4); }
.ledger{ margin:0; padding:0; display:grid; gap:0; }
.ledger-line{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); padding:var(--space-3) 0;
  border-top:1px solid var(--border);
}
.ledger-line:first-child{ border-top:0; }
.ledger-line dt{ margin:0; font-size:var(--text-md); color:var(--text-secondary); }
.ledger-line dd{
  margin:0; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ledger-total{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3);
  margin:var(--space-3) 0 0; padding-top:var(--space-4);
  border-top:2px solid var(--primary);
}
.ledger-total span{
  font-family:var(--label-font); font-size:var(--label-size);
  letter-spacing:var(--label-tracking); text-transform:var(--label-case);
  font-weight:var(--label-weight); color:var(--text-secondary);
}
.ledger-total strong{
  font-size:clamp(1.7rem,7.4vw,2.1rem); font-weight:700; letter-spacing:-.03em;
  color:var(--primary); font-variant-numeric:tabular-nums; line-height:1;
}
.ledger-gst{ margin:var(--space-2) 0 0; text-align:right; font-size:var(--text-sm); color:var(--text-muted); }
.ledger-note{
  margin:var(--space-5) 0 0; padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-size:var(--text-sm); color:var(--text-secondary);
}
.cost-copy p{ margin:0 0 var(--space-4); max-width:62ch; }
.cost-copy p:last-child{ margin-bottom:0; }

/* 05: the honest limits, said quietly */
.limits-ed{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:0; }
.limits-ed li{
  position:relative; padding:var(--space-5) 0 var(--space-5) var(--space-5);
  border-top:1px solid var(--border);
}
.limits-ed li::before{
  content:""; position:absolute; left:0; top:var(--space-5);
  width:3px; height:1.5rem; background:var(--accent);
}
.limits-ed h3{ margin:0 0 var(--space-2); font-size:var(--text-lg); font-weight:650; }
.limits-ed p{ margin:0; font-size:var(--text-md); color:var(--text-secondary); }

/* 06: the can-see pairs, and the eight facts */
.pairs{ margin-top:var(--space-5); display:grid; gap:0; }
.pair{ display:grid; gap:0; padding:var(--space-5) 0; border-top:1px solid var(--border); }
.pair .cell .side-label{ margin:0 0 var(--space-2); }
.pair .cell:nth-child(2) .side-label{ color:var(--accent-ink); }
.pair .cell p:last-child{ margin:0; font-size:var(--text-md); color:var(--text-secondary); }
.facts{ list-style:none; margin:var(--space-6) 0 0; padding:0; counter-reset:facts; display:grid; gap:0; }
.facts li{
  counter-increment:facts;
  position:relative;
  padding:var(--space-4) 0 var(--space-4) 2.6rem;
  border-top:1px solid var(--border);
  font-size:var(--text-md); color:var(--text-secondary);
}
.facts li::before{
  content:counter(facts,decimal-leading-zero);
  position:absolute; left:0; top:calc(var(--space-4) + .25em);
  font-size:.76rem; font-weight:700; letter-spacing:.06em;
  color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.facts strong{ color:var(--text); }

/* ---- closing band and footer ------------------------------------------- */
.closing{
  background:var(--brand-900); color:var(--neutral-0);
  padding-block:clamp(46px,8vw,92px);
}
.closing h2{
  margin:0 0 var(--space-4);
  font-size:clamp(1.6rem,6.4vw,2.4rem);
  line-height:1.08; letter-spacing:-.028em; color:var(--neutral-0);
}
.closing p{ margin:0; max-width:64ch; color:color-mix(in srgb,var(--neutral-0) 84%,transparent); }
.kicker-light{ color:color-mix(in srgb,var(--neutral-0) 76%,transparent); margin:0 0 var(--space-3); }

.foot{
  background:var(--bg-subtle); border-top:1px solid var(--border);
  padding:clamp(40px,7vw,72px) 0 var(--space-6);
  font-size:var(--text-md); color:var(--text-muted);
}
.foot-in{ display:grid; gap:var(--space-6); }
.foot-name{
  display:inline-flex; align-items:center; gap:var(--space-2);
  margin:0 0 var(--space-3); font-weight:700; color:var(--text);
}
.foot p{ margin:0 0 var(--space-2); max-width:44ch; }
.foot-head{ color:var(--text-secondary); margin:0 0 var(--space-3); }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin:0 0 var(--space-2); }
.foot a{ color:var(--text-secondary); text-decoration:none; }
.foot a:hover{ color:var(--primary); text-decoration:underline; }
.foot-legal{
  margin-top:var(--space-6); padding-top:var(--space-5);
  border-top:1px solid var(--border); font-size:var(--text-sm);
}
.foot-legal p{ max-width:70ch; }

/* ============================================================================
   DESKTOP: its own composition, not the phone's widened.
   The cover becomes a split panel, the index strip appears, every chapter gains
   a sticky numbered rail on the left, the money becomes a receipt beside its
   explanation, and the trust pairs face each other across a rule.
   ========================================================================= */
@media (min-width:1000px){
  .jump{
    display:flex; align-items:center; margin-left:auto;
    gap:clamp(14px,1.8vw,26px); flex-wrap:nowrap;
  }
  .jump a{
    font-size:var(--text-sm); color:var(--text-secondary); text-decoration:none;
    white-space:nowrap; padding-bottom:1px; border-bottom:1px solid transparent;
  }
  .jump a:hover{ color:var(--text); border-bottom-color:var(--border-strong); }
  .jump-one{ display:none; }

  .index{ display:block; border-bottom:1px solid var(--border); background:var(--bg-subtle); }
  .index-in{ display:flex; gap:clamp(18px,2.6vw,38px); padding-block:var(--space-3); flex-wrap:wrap; }
  .index a{
    display:inline-flex; align-items:baseline; gap:var(--space-2);
    font-size:var(--text-sm); color:var(--text-secondary); text-decoration:none; white-space:nowrap;
  }
  .index a:hover{ color:var(--primary); }
  .index .n{
    font-size:.7rem; font-weight:700; letter-spacing:.06em;
    color:var(--primary); font-variant-numeric:tabular-nums;
  }

  .opener{ padding-block:clamp(40px,5vw,68px); }
  .opener-in{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    gap:0; align-items:stretch;
  }
  .opener-photo{ order:0; display:flex; flex-direction:column; margin:0; }
  .opener-photo picture{ flex:1; min-height:0; display:flex; }
  .opener-photo img{
    flex:1; min-height:clamp(360px,40vw,520px);
    aspect-ratio:auto; object-position:50% 50%;
  }
  .opener-photo figcaption{ padding:var(--space-3) 0 0; }
  .opener-copy{ margin:0; padding:clamp(42px,4.6vw,64px); }
  .opener-copy h1{ font-size:clamp(2.5rem,4.1vw,3.8rem); line-height:1.0; }

  .chapter-in{ grid-template-columns:168px minmax(0,1fr); gap:clamp(32px,5vw,76px); }
  .rail{
    flex-direction:column; align-items:flex-start; gap:var(--space-2);
    position:sticky; top:84px; align-self:start;
  }
  .num{ font-size:1.05rem; }
  .body h2{ font-size:clamp(2rem,3vw,2.9rem); }
  .body > p,
  .standfirst,
  .cost-copy p{ max-width:62ch; }

  .plain{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,4vw,64px); }

  .facing{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .side{ padding:var(--space-5) clamp(24px,3vw,40px) var(--space-6) 0; }
  .side + .side{
    border-left:1px solid var(--border);
    padding-left:clamp(24px,3vw,40px); padding-right:0;
  }

  .band-photo img{ height:clamp(300px,40vw,500px); aspect-ratio:auto; }
  .band-tall img{ height:clamp(320px,42vw,520px); }
  /* A portrait in a full-width band crops badly, so on a desktop the tall
     photograph becomes a plate: the portrait on the right, its line set large
     on the tinted ground beside it. */
  .band-tall{
    display:grid; align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  }
  .band-tall picture{ grid-column:2; grid-row:1; }
  .band-tall figcaption{
    grid-column:1; grid-row:1;
    align-self:center; justify-self:start;
    margin:0; padding:clamp(34px,4vw,58px) clamp(30px,5vw,72px);
    max-width:30ch;
    font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.42;
  }

  .steps-ed{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 clamp(24px,3vw,48px);
    border-top:2px solid var(--accent); padding-top:var(--space-5);
  }
  .steps-ed li{ padding:0; }
  .steps-ed li::after{ display:none; }
  .step-num{
    position:static; width:38px; height:38px; border-radius:var(--radius-sm);
    font-size:var(--text-base); margin-bottom:var(--space-4);
  }

  .cost-in{ grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:start; }

  .limits-ed{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(26px,3.4vw,52px); }
  .limits-ed li{ border-top:2px solid var(--accent); padding:var(--space-4) 0 0; }
  .limits-ed li::before{ display:none; }

  .pair{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(32px,4vw,64px); }
  .pair .cell + .cell{ border-left:1px solid var(--border); padding-left:clamp(32px,4vw,64px); }

  .facts li{ max-width:80ch; }

  .foot-in{ grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-6) clamp(32px,5vw,72px); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}