/* What Owners Need — shared stylesheet
   Built on the brand tokens: navy, gold, paper; Archivo, Newsreader, IBM Plex Mono. */

:root{
  --navy:#16293F;
  --navy-deep:#101F31;
  --navy-raised:#1E3550;
  --navy-line:#2C4562;
  --gold:#B8902B;
  --gold-bright:#D8B04A;
  --gold-text:#7C6018;
  --paper:#F4F2EC;
  --paper-sunk:#EAE7DF;
  --sheet:#FFFFFF;
  --ink:#14202E;
  --ink-muted:#4C5862;
  --on-navy:#F4F2EC;
  --on-navy-muted:#A9B6C4;
  --rule:#D2CEC4;
  --border-strong:#78818A;

  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:20px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --sans:Archivo,system-ui,-apple-system,sans-serif;
  --serif:Newsreader,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:31px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--sans); letter-spacing:-.022em; margin:0;}
p{margin:0;}
a{color:var(--ink);}
:focus-visible{outline:2px solid var(--gold-text); outline-offset:3px; border-radius:2px;}
img{max-width:100%; display:block;}

.fig{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--s6);}
.narrow{max-width:700px; margin-left:0;}
.skip{
  position:absolute; left:-9999px; background:var(--navy); color:var(--on-navy);
  padding:var(--s3) var(--s5); border-radius:0 0 var(--r-md) 0; z-index:100;
}
.skip:focus{left:0; top:0;}

/* ===================== nav ===================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(22,41,63,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--navy-line);
}
.nav .inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); padding-top:var(--s4); padding-bottom:var(--s4);
}
.brand{display:flex; align-items:center; gap:var(--s3); text-decoration:none;}
.brand img{width:36px; height:36px; border-radius:50%;}
.brand b{
  font-family:var(--sans); font-weight:600; font-size:17px;
  color:var(--on-navy); letter-spacing:-.01em; white-space:nowrap;
}
.nav ul{
  display:flex; align-items:center; gap:var(--s6);
  list-style:none; margin:0; padding:0;
}
.nav a.link{
  font-family:var(--sans); font-size:15px; font-weight:500;
  color:var(--on-navy-muted); text-decoration:none; padding:var(--s2) 0;
  border-bottom:2px solid transparent;
}
.nav a.link:hover{color:var(--on-navy);}
.nav a.link[aria-current="page"]{color:var(--on-navy); border-bottom-color:var(--gold);}

/* ===================== buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:16px; font-weight:600; line-height:24px;
  padding:14px 30px; border-radius:var(--r-md); border:none;
  text-decoration:none; cursor:pointer; min-height:50px; white-space:nowrap;
}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:var(--gold-bright);}
.btn-navy{background:var(--navy); color:var(--on-navy);}
.btn-navy:hover{background:var(--navy-raised);}
.btn-ghost{
  background:transparent; color:var(--on-navy);
  box-shadow:inset 0 0 0 1.5px var(--navy-line);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--on-navy-muted);}
.btnrow{display:flex; flex-wrap:wrap; gap:var(--s4);}

/* ===================== sections ===================== */
.sec{padding:var(--s9) 0;}
.sec-sm{padding:var(--s8) 0;}
.on-navy{background:var(--navy); color:var(--on-navy);}
.on-navy h1,.on-navy h2,.on-navy h3{color:var(--on-navy);}
.on-navy p{color:var(--on-navy-muted);}
.on-sheet{background:var(--sheet);}
.edged{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}

.display{font-size:clamp(38px,6.2vw,62px); line-height:1.03; font-weight:700;}
.h1{font-size:clamp(32px,4.6vw,44px); line-height:1.1; font-weight:700;}
.h2{font-size:clamp(26px,3.2vw,33px); line-height:1.18; font-weight:700;}
.h3{font-size:20px; line-height:28px; font-weight:600;}
.lede{font-size:20px; line-height:33px; color:var(--ink-muted);}
.on-navy .lede{color:var(--on-navy-muted);}
.sm{font-size:16px; line-height:26px; color:var(--ink-muted);}
.measure{max-width:62ch;}
.measure-s{max-width:54ch;}

/* ===================== hero ===================== */
.hero{
  background:var(--navy); color:var(--on-navy);
  padding:var(--s9) 0 var(--s9);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px;
  background:var(--paper);
}
.hero .inner{position:relative; z-index:1;}
.hero .grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--s8); align-items:start;
}
.hero h1{margin-bottom:var(--s5); max-width:14ch;}
.hero .lede{margin-bottom:var(--s7); max-width:46ch;}

/* ===================== the statement ===================== */
.stmt{
  background:var(--sheet); color:var(--ink);
  border-radius:var(--r-xl); padding:var(--s7) var(--s6) var(--s6);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.08);
}
.stmt table{width:100%; border-collapse:collapse;}
.stmt caption{
  text-align:left; font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--ink-muted); padding-bottom:var(--s5);
}
.stmt th{font-weight:400; text-align:left;}
.stmt td,.stmt th{padding:7px 0;}
.stmt .line th{font-family:var(--sans); font-size:16px; font-weight:500; color:var(--ink);}
.stmt .line td{
  text-align:right; font-size:16px; color:var(--ink);
  font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stmt .sum th,.stmt .sum td{border-top:1px solid var(--rule); padding-top:11px; font-weight:600;}
.stmt .total th,.stmt .total td{border-top:2.5px solid var(--ink); padding-top:13px; padding-bottom:var(--s5);}
.stmt .total th{font-size:18px; font-weight:700;}
.stmt .total td{font-size:21px; font-weight:600;}
.cash{
  background:var(--paper); border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--s4) var(--s5);
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
}
.cash .k{font-family:var(--sans); font-size:17px; font-weight:700;}
.cash .v{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:21px; font-weight:600; color:var(--gold-text); white-space:nowrap;
}
.stmt .after{margin-top:var(--s5); font-size:16px; line-height:26px; color:var(--ink-muted);}
.stmt .fineprint{
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:12.5px; line-height:19px; color:var(--ink-muted);
}

/* ===================== stage list ===================== */
ol.stage{list-style:none; margin:0; padding:0; counter-reset:stage;}
ol.stage > li{
  counter-increment:stage; position:relative;
  padding:var(--s6) 0 var(--s6) 64px; border-top:1px solid var(--rule);
}
@media (min-width:941px){
  ol.stage > li{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);
    column-gap:var(--s8); align-items:start;
  }
  ol.stage > li > h2,
  ol.stage > li > h3,
  ol.stage > li > p{grid-column:1;}
  ol.stage > li > ul{grid-column:2; grid-row:1 / span 3; margin-top:0; align-content:start;}
}
ol.stage > li:first-child{border-top:none; padding-top:0;}
ol.stage > li::before{
  content:counter(stage); position:absolute; left:0; top:var(--s6);
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; color:var(--gold-text);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1.5px var(--gold);
}
ol.stage > li:first-child::before{top:0;}
ol.stage h3,ol.stage .h3{margin-bottom:var(--s3);}
ol.stage p{color:var(--ink-muted); font-size:17px; line-height:28px; max-width:58ch;}
ol.stage ul{
  margin:var(--s4) 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);
}
ol.stage ul li{
  font-family:var(--sans); font-size:13.5px; line-height:20px; color:var(--ink-muted);
  background:var(--paper-sunk); border-radius:var(--r-sm); padding:5px 11px;
}
.on-sheet ol.stage ul li{background:var(--paper);}

/* ===================== two-up prose ===================== */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8);}
.stack-5 > * + *{margin-top:var(--s5);}
.stack-4 > * + *{margin-top:var(--s4);}
.stack-6 > * + *{margin-top:var(--s6);}

/* ===================== stat strip ===================== */
.strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s7);}
.strip .n{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:34px; line-height:1.1; font-weight:600; color:var(--gold-bright);
  margin-bottom:var(--s3);
}
.strip p{font-size:16px; line-height:26px;}

/* ===================== callout ===================== */
.callout{
  background:var(--sheet); border-left:3px solid var(--gold);
  border-radius:0 var(--r-lg) var(--r-lg) 0; padding:var(--s6);
}
.callout p{font-size:19px; line-height:31px;}

/* ===================== forms ===================== */
form{display:flex; flex-direction:column; gap:var(--s5); max-width:540px;}
.field{display:flex; flex-direction:column; gap:var(--s2);}
label{font-family:var(--sans); font-size:14px; font-weight:500;}
input,textarea{
  font-family:var(--sans); font-size:16px; line-height:24px; color:var(--ink);
  background:var(--sheet); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); padding:13px 15px; width:100%;
}
textarea{min-height:150px; resize:vertical;}
input:focus,textarea:focus{border-color:var(--gold-text);}
.hp{position:absolute; left:-9999px;}
.note{
  font-family:var(--sans); font-size:15px; line-height:23px;
  padding:var(--s4) var(--s5); border-radius:var(--r-md);
  background:var(--sheet); border-left:3px solid var(--gold);
  max-width:540px; margin-bottom:var(--s5);
}

/* ===================== footer ===================== */
footer{background:var(--navy-deep); color:var(--on-navy-muted); padding:var(--s8) 0 var(--s6);}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7); margin-bottom:var(--s7);}
footer h4{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--on-navy);
  margin-bottom:var(--s4); letter-spacing:0;
}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:var(--s3);}
footer a{font-family:var(--sans); font-size:15px; color:var(--on-navy-muted); text-decoration:none;}
footer a:hover{color:var(--on-navy); text-decoration:underline;}
footer .tag{font-family:var(--sans); font-size:15px; line-height:24px; max-width:34ch;}
footer .fine{
  font-family:var(--sans); font-size:13px; line-height:21px;
  padding-top:var(--s5); border-top:1px solid var(--navy-line);
}

/* ===================== responsive ===================== */
@media (max-width:940px){
  .hero .grid{grid-template-columns:minmax(0,1fr); gap:var(--s7);}
  .hero{padding-bottom:var(--s8);}
  .hero::after{display:none;}
  .two{grid-template-columns:minmax(0,1fr); gap:var(--s6);}
  footer .cols{grid-template-columns:1fr 1fr; gap:var(--s6);}
}
@media (max-width:720px){
  body{font-size:17px; line-height:29px;}
  .wrap{padding:0 var(--s5);}
  .sec{padding:var(--s8) 0;}
  .hero{padding:var(--s7) 0 var(--s8);}
  .nav ul{gap:var(--s5);}
  .nav a.link{font-size:14px;}
  .brand b{font-size:16px;}
  .strip{grid-template-columns:minmax(0,1fr); gap:var(--s6);}
  .stmt{padding:var(--s6) var(--s5);}
  .cash{flex-direction:column; gap:var(--s1);}
  ol.stage > li{padding-left:50px;}
  ol.stage > li::before{width:30px; height:30px; font-size:13px;}
  footer .cols{grid-template-columns:1fr; gap:var(--s6);}
  .lede{font-size:18px; line-height:30px;}
}
@media (max-width:420px){
  .nav .inner{flex-wrap:wrap; gap:var(--s3);}
  .nav ul{width:100%; gap:var(--s4); padding-bottom:var(--s1);}
}