/* ==========================================================================
   TENDERCO V3 — design system  ·  palette: SPRING (locked)
   All audit fixes applied: modular type scale, 4px/8px spacing, ≥16px body,
   skip nav, semantic landmark support, CSS/SVG logo only.
   ========================================================================== */

:root{
  /* ---- SPRING palette ---- */
  --field:#A6DB5E;
  --field-d:#8CC544;
  --field-ink:#4C6B2A;
  --field-d-text:var(--field-ink);
  --field-l:#BEE585;

  --cream:#F2EFE4;
  --cream-2:#EAE6D8;

  --char:#1C1C1A;
  --char-soft:#3A3A36;
  --char-mut:#5F5D56;
  --white:#FFFFFF;

  --r-field:28px; --r-nav:20px; --r-panel:22px; --r-card:16px; --r-pill:999px;
  --font:Figtree,-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* ---- content widths ----
     The shell is ~1290px of content on a desktop viewport, which is wider than
     any single column of text or list should ever run. Blocks that stand alone
     in a full-width row use one of these two widths and centre themselves.
     --w-prose: a reading column (prose, a lone panel of copy)
     --w-block: a stacked component (accordion, queue, spine, log)
  */
  --w-prose:760px;
  --w-block:960px;

  /* ---- Modular type scale (1.125 minor third, base 16px) ----
     8 sizes only, mapped to rem values:
     --text-xs:  0.75rem   (12px) — mono labels, legal micro-copy
     --text-sm:  0.875rem  (14px) — captions, footer, small UI
     --text-base: 1rem     (16px) — body default (≥16px per UI-1)
     --text-md:  1.125rem  (18px) — lead paragraphs, sub heads
     --text-lg:  1.25rem   (20px) — h3 equivalent
     --text-xl:  1.5rem    (24px) — h2 small
     --text-2xl: 1.875rem  (30px) — h2
     --text-3xl: 2.25rem+  (36px+) — h1 (fluid)
  */
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-md:1.125rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
  --text-2xl:1.875rem;
  --text-3xl:clamp(2.5rem,6.6vw,5rem);

  /* ---- 4px/8px spacing scale ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:48px;
  --sp-10:56px;
  --sp-11:64px;
  --sp-12:80px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);color:var(--char);font-family:var(--font);
  font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.038em;line-height:1.06}
h1{font-size:var(--text-3xl);font-weight:800;letter-spacing:-.048em;line-height:.96}
h2{font-size:clamp(var(--text-2xl),4.3vw,3rem)}
h3{font-size:var(--text-lg);letter-spacing:-.028em}
p{margin:0;font-size:var(--text-base)}
li{font-size:var(--text-base)}

/* ---------- skip navigation ---------- */
.skip-nav{
  position:absolute;top:-100%;left:var(--sp-4);z-index:100;
  background:var(--char);color:var(--white);padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-pill);text-decoration:none;font-weight:600;
  font-size:var(--text-sm);transition:top .2s ease;
}
.skip-nav:focus{top:var(--sp-4);color:var(--white)}

/* ---------- layout ---------- */
.shell{max-width:1340px;margin-inline:auto;padding:0 var(--sp-6)}
.fin{padding-inline:clamp(var(--sp-6),4.5vw,60px)}
.sec{padding-block:clamp(var(--sp-11),8vw,110px)}
.sechead{max-width:44ch}
.sechead p{margin-top:var(--sp-4);font-size:var(--text-md);color:var(--char-mut)}
.centre{text-align:center;margin-inline:auto}
.prose{max-width:var(--w-prose);margin-inline:auto}
.hold{max-width:var(--w-block);margin-inline:auto}

/* ---------- nav: white card overlapping the field ---------- */
.nav{position:relative;z-index:5;background:var(--white);border-radius:var(--r-nav);
  display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  box-shadow:0 1px 3px rgba(0,0,0,.05);margin-top:var(--sp-5)}
.logo{display:flex;align-items:center;text-decoration:none;line-height:1}
.logo .wordmark{font-size:var(--text-xl);font-weight:800;letter-spacing:-.055em;color:var(--char);line-height:1;
  font-family:var(--font);text-decoration:none}
.nav .links{display:flex;align-items:center;gap:var(--sp-6);margin-left:var(--sp-3)}
.nav .links a{font-size:var(--text-base);font-weight:500;text-decoration:none;color:var(--char-soft)}
.nav .links a:hover{color:var(--char)}
.nav .links a[aria-current="page"]{color:var(--char);font-weight:700}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.burger{width:42px;height:42px;border-radius:var(--r-pill);background:var(--field);flex:none;
  display:none;place-items:center;border:0;cursor:pointer}
.burger i{display:block;width:15px;height:1.5px;background:var(--char);position:relative;transition:transform .15s ease,opacity .15s ease}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:15px;height:1.5px;background:var(--char);transition:transform .15s ease,top .15s ease}
.burger i::before{top:-5px}.burger i::after{top:5px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

/* ---------- mobile nav menu (<=920px) ---------- */
@media(max-width:920px){
  .burger{display:grid}
  .nav .links{
    display:none;
    position:absolute;
    top:calc(100% + var(--sp-3));
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-1);
    margin-left:0;
    background:var(--white);
    border-radius:var(--r-nav);
    box-shadow:0 14px 36px rgba(0,0,0,.16);
    padding:var(--sp-3);
    z-index:20;
  }
  .nav .links.open{display:flex}
  .nav .links a{padding:var(--sp-4) var(--sp-4);border-radius:var(--r-card);width:100%;font-size:var(--text-base)}
  .nav .links a:hover{background:var(--cream)}
  .nav .links a[aria-current="page"]{background:var(--cream-2)}
}

/* ---------- buttons ---------- */
.btn{border-radius:var(--r-pill);padding:var(--sp-4) var(--sp-6);font-size:var(--text-base);font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border:0;cursor:pointer;font-family:var(--font);transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:var(--sp-3) var(--sp-5)}
.b-dark{background:var(--char);color:var(--white)}
.b-white{background:var(--white);color:var(--char)}
.b-line{border:1.5px solid rgba(28,28,26,.3);color:var(--char);background:transparent}
.btnrow{display:flex;gap:var(--sp-3);flex-wrap:wrap}

.b-dark:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(28,28,26,.18)}
.b-white:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(28,28,26,.1)}
.b-line:hover{transform:translateY(-1px);border-color:rgba(28,28,26,.5)}

@media (prefers-reduced-motion: reduce){
  .b-dark:hover,.b-white:hover,.b-line:hover{transform:none;box-shadow:none}
}

/* ---------- the field ---------- */
.field{background:var(--field);border-radius:var(--r-field);margin-top:-32px;
  padding-top:82px;padding-bottom:clamp(52px,6vw,82px)}
.kick{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--char);opacity:.75;margin-bottom:var(--sp-6)}

/* ---------- hero ---------- */
.hero h1{max-width:16ch}
.hero .sub{margin-top:var(--sp-6);font-size:clamp(var(--text-md),1.75vw,1.375rem);line-height:1.5;
  max-width:44ch;color:var(--char);opacity:.72}
.hero .btnrow{margin-top:var(--sp-7)}

/* ---------- metadata row ---------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:var(--sp-7);gap:var(--sp-3) var(--sp-5);
  border-top:1px solid rgba(28,28,26,.16);padding-top:var(--sp-4)}
.meta span{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--char);opacity:.80;padding-right:var(--sp-5);
  border-right:1px solid rgba(28,28,26,.18);line-height:1.4}
.meta span:last-child{border-right:0;padding-right:0}
.meta.on-white span{color:var(--char-mut);opacity:1;border-right-color:var(--cream-2)}

@media(max-width:900px){
  .meta{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:var(--sp-4) var(--sp-5)}
  .meta span{padding-right:0;border-right:0}
}
@media(max-width:560px){
  .meta{grid-template-columns:1fr;gap:var(--sp-3)}
  .meta span{display:flex;align-items:center;gap:var(--sp-3)}
  .meta span::before{content:"";flex:none;width:4px;height:4px;
    border-radius:var(--r-pill);background:currentColor}
}

/* ---------- panels ---------- */
.panel{background:var(--white);border-radius:var(--r-panel);padding:clamp(var(--sp-6),2.8vw,34px)}
.panel.ink{background:var(--char);color:var(--cream)}
.panel.ink p{color:#B8B5AC}
.panel p{color:var(--char-soft);font-size:var(--text-base)}
.plab{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  opacity:.7;margin-bottom:var(--sp-4)}

/* ---------- tray of image cards ---------- */
.tray{background:var(--white);border-radius:var(--r-panel);padding:var(--sp-4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media(max-width:860px){.tray{grid-template-columns:1fr}}
.tcard{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:215px;
  display:flex;align-items:flex-end;padding:var(--sp-5);color:var(--white);text-decoration:none}
.tcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 36%,rgba(0,0,0,.6))}
.tcard>*{position:relative;z-index:2}
.tcard .row{display:flex;align-items:center;width:100%;gap:var(--sp-3)}
.tcard span{font-size:var(--text-md);font-weight:600}
.tcard .arrow{margin-left:auto;width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--white);color:var(--char);display:grid;place-items:center;font-size:var(--text-sm);flex:none}

/* ---------- lists ---------- */
.inc{list-style:none;margin:var(--sp-5) 0 var(--sp-6);padding:0;font-size:var(--text-base)}
.inc li{padding:var(--sp-2) 0 var(--sp-2) 25px;position:relative;color:var(--char-soft)}
.inc li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px;
  border-radius:var(--r-pill);background:var(--field)}
.tick,.cross{list-style:none;margin:var(--sp-4) 0 0;padding:0;font-size:var(--text-base)}
.tick li,.cross li{padding:var(--sp-2) 0 var(--sp-2) 27px;position:relative;color:var(--char-soft)}
.tick li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:var(--field-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C6B2A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat}
.cross li{color:var(--char-mut)}
.cross li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8578' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/9px no-repeat}

/* ---------- price ---------- */
.price{display:flex;align-items:baseline;gap:var(--sp-2);margin:var(--sp-1) 0 var(--sp-1)}
.price b{font-size:clamp(2.75rem,5.4vw,3.75rem);font-weight:800;letter-spacing:-.05em;line-height:.92}
.price span{font-size:var(--text-base);color:var(--char-mut)}

/* ---------- stat trio ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.trio div{background:var(--white);border-radius:var(--r-card);padding:var(--sp-5)}
.trio b{display:block;font-size:var(--text-2xl);font-weight:800;letter-spacing:-.04em;line-height:1}
.trio i{font-style:normal;display:block;font-size:var(--text-xs);color:var(--char-mut);margin-top:var(--sp-1)}

/* ---------- two-column blocks ---------- */
.evg{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-4)}
.evcol{display:grid;gap:var(--sp-4);align-content:start}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:900px){.evg{grid-template-columns:1fr}}
/* Stacks at the same width as .commitments (860px), which sits directly below a
   .fit pair on both the home and pricing pages. Held as two columns into the
   760–860 range the panels run ~350px wide, the grid equalises their heights,
   and the shorter panel is left with a band of empty white beneath its list. */
@media(max-width:860px){.fit{grid-template-columns:1fr}}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--cream-2)}
.acc details{border-bottom:1px solid var(--cream-2)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding:var(--sp-5) 0;cursor:pointer;list-style:none;font-weight:600;font-size:var(--text-base)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:16px;height:16px;transition:transform .2s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6C64' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details>div{padding-bottom:var(--sp-5);color:var(--char-mut);font-size:var(--text-base);max-width:68ch}
.acc summary:hover{color:var(--field-d-text)}

/* ---------- thesis line (motion 02) ---------- */
.tline{margin-top:var(--sp-6)}
.tline .row{margin-bottom:var(--sp-5)}
.tline .row:last-child{margin-bottom:0}
.tline .cap{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-4);
  color:var(--char-mut);margin-bottom:var(--sp-2)}
.tline .cap span{white-space:nowrap}
.tline .row.good .cap{color:var(--field-d-text)}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.playing .draw{animation:draw 1.25s cubic-bezier(.22,1,.36,1) forwards}
.playing .draw.s2{animation-delay:.7s}
.playing .draw.s3{animation-delay:1.4s}
.playing .draw.long{animation-duration:2.1s;animation-delay:.15s}
.playing .pop{animation:pop .45s cubic-bezier(.34,1.56,.64,1) backwards}
.pop{transform-box:fill-box;transform-origin:center}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:560px){
  .tline .cap{font-size:var(--text-xs);letter-spacing:.07em;gap:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-2)}
  .tline .row{margin-bottom:var(--sp-6)}
  .tline line{stroke-width:7}
  .tline circle{r:7}
}

/* ---------- scroll spine (motion 03) ---------- */
.spine{position:relative;display:grid;grid-template-columns:70px 1fr;background:var(--white);
  border-radius:var(--r-panel);overflow:hidden}
@media(max-width:640px){.spine{grid-template-columns:52px 1fr}}
.rail{position:relative;border-right:1px solid var(--cream-2)}
.track{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--cream-2);transform:translateX(-50%)}
.fill{position:absolute;left:50%;top:0;width:2px;height:0;background:var(--field-d);
  transform:translateX(-50%);transition:height .1s linear}
.node{position:absolute;left:50%;width:11px;height:11px;border-radius:50%;background:var(--white);
  border:2px solid var(--cream-2);transform:translate(-50%,-50%);transition:.3s}
.node.on{background:var(--field-d);border-color:var(--field-d);box-shadow:0 0 0 5px var(--field-l)}
.step{padding:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--cream-2);
  opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.step:last-child{border-bottom:0}
.step.dim{opacity:.34;transform:translateY(6px)}
.step.on{opacity:1;transform:none}
.step .n{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.12em;color:var(--field-d-text);
  display:block;margin-bottom:var(--sp-2)}
.step p{margin-top:var(--sp-2);color:var(--char-mut);font-size:var(--text-base)}

/* ---------- live queue (motion 04) ---------- */
.qwrap{background:var(--white);border-radius:var(--r-panel);padding:clamp(var(--sp-6),3vw,34px)}
.queue{display:grid;gap:var(--sp-2)}
.q{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-card);
  background:var(--cream);font-size:var(--text-base);transition:.45s cubic-bezier(.22,1,.36,1)}
.q .dot{width:9px;height:9px;border-radius:50%;background:#CFCCC2;flex:none;transition:.4s}
.q .st{margin-left:auto;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--char-mut);transition:.4s}
.q.active{background:var(--field-l);transform:translateX(5px)}
.q.active .dot{background:var(--field-d);animation:blink 1.15s ease-in-out infinite}
.q.active .st{color:#4C6B2A}
.q.done{opacity:.45}
.q.done .dot{background:var(--char)}
.qbar{height:2px;background:var(--cream-2);margin-top:var(--sp-4);overflow:hidden;border-radius:2px}
.qbar i{display:block;height:100%;width:0;background:var(--field-d)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- ticker (motion 05) ---------- */
.ticker{overflow:hidden;padding:52px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tracks{display:flex;width:max-content;animation:slide 40s linear infinite}
.tracks span{font-size:clamp(var(--text-md),2.1vw,1.625rem);font-weight:600;padding-inline:var(--sp-5);
  white-space:nowrap;letter-spacing:-.025em}
.tracks span::after{content:"·";margin-left:var(--sp-5);opacity:.4}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- closing field + footer ----------
   The tail of every page is deliberately tight: the footer's own top padding
   is the only gap under the closing field, and the page ends on the same 24px
   inset the shell already uses on the sides, so there is no dead band of cream
   below the last line of the footer. */
.close{background:var(--field);border-radius:var(--r-field);
  padding:clamp(44px,6vw,86px) var(--sp-6);text-align:center}
.close h2{max-width:20ch;margin-inline:auto}
.close p{margin-top:var(--sp-4);opacity:.72;font-size:var(--text-md)}
.footer{padding-block:var(--sp-7) var(--sp-6);font-size:var(--text-sm);color:var(--char-mut)}
.footer-in{display:flex;flex-wrap:wrap;gap:var(--sp-6);justify-content:space-between;align-items:center}
.footer a{text-decoration:none}
.footer a:hover{color:var(--char)}
.flinks{display:flex;flex-wrap:wrap;gap:var(--sp-5)}

/* ---------- ledger ---------- */
.ledger{background:var(--white);border-radius:var(--r-panel);padding:clamp(var(--sp-6),3vw,38px)}
.ledger-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--char-mut);padding-bottom:var(--sp-4);border-bottom:1.5px dashed var(--cream-2);margin-bottom:2px}
.li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
  border-bottom:1px dashed var(--cream-2);font-size:var(--text-base);color:var(--char-soft)}
.li span:last-child{font-family:var(--mono);color:var(--field-d-text);flex:none;font-weight:600}
.ledger .total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:var(--sp-5);margin-top:var(--sp-2);border-top:1.5px solid var(--char)}
.ledger .total span{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--char-mut)}
.ledger .total b{font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.04em;font-weight:800}
.ledger .nfp-note{margin-top:var(--sp-4);font-size:var(--text-sm);text-align:center;color:var(--char-mut)}
.ledger .nfp-note a{color:var(--field-d-text);font-weight:600;text-decoration:none}
.ledger .nfp-note a:hover{text-decoration:underline}

/* ---------- lead split: hero copy beside the ledger card ----------
   Stacked below 921px, where the card fills its column rather than sitting in
   a 560px block with dead space down the right-hand side. */
.lead-split{display:grid;gap:var(--sp-8)}
@media(min-width:921px){
  .lead-split{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(var(--sp-8),5vw,72px);align-items:center}
  /* the hero heads its own column here, so it stays left of the card rather
     than centring the way a full-width hero does */
  .lead-split .hero{text-align:left}
  .lead-split .hero h1,.lead-split .hero .sub{margin-inline:0}
  .lead-split .hero .btnrow,.lead-split .hero .meta{justify-content:flex-start}
  .lead-split .ledger{max-width:560px;margin-inline:0}
}

/* ---------- founder-forward about split ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-4);align-items:stretch}
@media(max-width:900px){.split{grid-template-columns:1fr}}
/* square source (1254x1254) filling a taller column — cover, biased up so the face stays in frame */
.split .photo{display:block;width:100%;height:100%;min-height:360px;
  object-fit:cover;object-position:50% 30%;
  border-radius:var(--r-panel);background:var(--field);
  background-image:linear-gradient(150deg,var(--field-d),var(--field) 60%,var(--field-l))}
@media(max-width:900px){
  .split .photo{height:auto;min-height:0;aspect-ratio:1/1;max-height:440px}
}
.split .copy{background:var(--white);border-radius:var(--r-panel);padding:clamp(28px,4vw,52px);
  display:flex;flex-direction:column;justify-content:center}
.split .copy p{color:var(--char-soft);font-size:var(--text-md);margin-top:var(--sp-4);max-width:48ch}
.split .copy p:first-of-type{margin-top:var(--sp-5)}
.split .sig{margin-top:var(--sp-5);font-family:Georgia,serif;font-style:italic;font-size:var(--text-2xl);color:var(--char)}

/* ---------- NFP tint block ---------- */
.tintblock{background:var(--field-l);border-radius:var(--r-panel);padding:clamp(var(--sp-6),3vw,36px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media(max-width:760px){.tintblock{grid-template-columns:1fr}}
.tintblock div{text-align:center}
.tintblock b{display:block;font-size:clamp(var(--text-xl),3vw,2rem);font-weight:800;letter-spacing:-.03em}
.tintblock i{font-style:normal;display:block;margin-top:var(--sp-2);font-size:var(--text-sm);color:var(--char-soft)}

/* ---------- partner calculator ---------- */
.calc{background:var(--white);border-radius:var(--r-panel);padding:clamp(var(--sp-6),3vw,36px)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr}}
.calc-field{margin-bottom:var(--sp-6)}
.calc-field:last-child{margin-bottom:0}
.calc-field label{display:flex;justify-content:space-between;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--sp-3)}
.calc-field .val{font-family:var(--mono);color:var(--field-d-text);font-weight:600}
.calc-field input[type=range]{width:100%;accent-color:var(--field-d)}
.calc-out{background:var(--cream);border-radius:var(--r-card);padding:clamp(var(--sp-5),2.6vw,28px)}
.calc-out .row{display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--cream-2);font-size:var(--text-base)}
.calc-out .row:last-child{border-bottom:0}
.calc-out .row b{font-size:var(--text-xl);font-weight:800;letter-spacing:-.03em}
.calc-out .headline{background:var(--char);color:var(--cream);border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4);text-align:center}
.calc-out .headline b{display:block;font-size:clamp(var(--text-2xl),3.2vw,2.5rem);font-weight:800;letter-spacing:-.03em;color:var(--white)}
.calc-out .headline span{font-size:var(--text-xs);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.calc-foot{margin-top:var(--sp-4);font-size:var(--text-sm);color:var(--char-mut);text-align:center;
  max-width:var(--w-prose);margin-inline:auto}

/* ---------- partner earnings chart ----------
   One series (commission per year), so no legend: the heading names what is
   plotted. The columns carry the only colour in the block and every value is
   also written out above its column, so nothing depends on the fill being
   legible against white. Bars are capped rather than filling their band —
   the leftover width is deliberate air. */
.calc-chart{margin-top:var(--sp-7);border-top:1px solid var(--cream-2);padding-top:var(--sp-6)}
.calc-chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-6)}
.calc-chart-head b{font-size:var(--text-base);font-weight:700;letter-spacing:-.02em}
.calc-chart-head span{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--char-mut)}
.calc-plot{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2);align-items:end;
  height:180px;border-bottom:1px solid var(--cream-2)}
.calc-bar{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-2);height:100%}
.calc-bar .v{flex:none;font-size:var(--text-sm);font-weight:700;letter-spacing:-.02em;
  color:var(--char);text-align:center;white-space:nowrap}
.calc-bar i{display:block;width:100%;max-width:24px;margin-inline:auto;min-height:2px;
  background:var(--field-d);border-radius:4px 4px 0 0}
.calc-xaxis{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2);margin-top:var(--sp-3)}
.calc-xaxis span{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;
  color:var(--char-mut);text-align:center}
@media(max-width:560px){
  .calc-plot{height:150px}
  .calc-bar .v{font-size:var(--text-xs)}
}
.tiertable-wrap{overflow-x:auto;margin-top:var(--sp-2);-webkit-overflow-scrolling:touch}
.tiertable{width:100%;min-width:480px;border-collapse:collapse;font-size:var(--text-base)}
.tiertable th,.tiertable td{text-align:left;padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--cream-2);white-space:nowrap}
.tiertable th{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--char-mut);font-weight:500}
.tiertable td:last-child,.tiertable th:last-child{text-align:right}

/* ---------- legal/simple content ---------- */
.legal{max-width:74ch;margin-inline:auto}
.legal h2{margin-top:var(--sp-9);font-size:var(--text-xl)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--char-soft);font-size:var(--text-base);margin-top:var(--sp-3)}
.legal ul{padding-left:var(--sp-6)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-7)}
@media(max-width:760px){.steps3{grid-template-columns:1fr}}
.steps3 .panel .n{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.12em;color:var(--field-d-text);display:block;margin-bottom:var(--sp-2)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .draw{stroke-dashoffset:0!important}
  .step{opacity:1!important;transform:none!important}
}

/* ---------- focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.tcard:focus-visible{
  outline:2.5px solid var(--char);
  outline-offset:2px;
  border-radius:var(--r-card);
}
.nav .links a:focus-visible{outline-offset:4px}
.burger:focus-visible{outline-offset:3px}
input[type=range]:focus-visible{outline-offset:6px}

/* ---------- nav mobile CTA ---------- */
.nav .right .btn-nav-primary{display:inline-flex}
.nav-mobile-cta{display:none}
@media(max-width:920px){
  .nav .right .btn-nav-primary{display:none}
  .nav-mobile-cta{
    display:block;
    padding:var(--sp-2) var(--sp-2) var(--sp-1);
    border-top:1px solid var(--cream-2);
    margin-top:var(--sp-2);
  }
  .nav-mobile-cta .btn{width:100%;justify-content:center}
}

/* ---------- text inputs ---------- */
.input-wrap{position:relative;margin-bottom:0}
.input-wrap input[type=text],
.input-wrap input[type=email],
.input-wrap input[type=tel]{
  width:100%;font-family:var(--font);font-size:var(--text-base);color:var(--char);
  background:var(--cream);border:1.5px solid rgba(28,28,26,.18);
  border-radius:var(--r-card);padding:var(--sp-4) var(--sp-4);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  outline:none;-webkit-appearance:none;appearance:none;
}
.input-wrap input::placeholder{color:var(--char-mut)}
.input-wrap input:hover{border-color:rgba(28,28,26,.35)}
.input-wrap input:focus{
  border-color:var(--char);background:var(--white);
  box-shadow:0 0 0 3px rgba(28,28,26,.08);
}
.input-error{display:none;color:#B43E2A;font-size:var(--text-sm);margin-top:var(--sp-2)}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:50;
  background:rgba(28,28,26,.55);backdrop-filter:blur(3px);
  /* flex-start + auto margins on the dialog: centred while there is room, and
     scrollable from the top rather than clipped once there isn't */
  display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-4);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-dialog{
  background:var(--white);border-radius:var(--r-panel);
  padding:clamp(28px,4.5vw,48px);width:100%;max-width:490px;
  position:relative;max-height:calc(100dvh - var(--sp-8));overflow-y:auto;
  margin-block:auto;
  transform:translateY(14px);transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.open .modal-dialog{transform:none}
/* a 490px card is not the place for the page's fluid display heading */
.modal-dialog h2{font-size:var(--text-xl);line-height:1.15}
.modal-close{
  position:absolute;top:var(--sp-4);right:var(--sp-4);width:36px;height:36px;
  border-radius:var(--r-pill);background:var(--cream);border:0;cursor:pointer;
  font-size:var(--text-lg);color:var(--char);display:grid;place-items:center;line-height:1;
}
.modal-close:hover{background:var(--cream-2)}
.modal-back{
  background:none;border:0;cursor:pointer;padding:0;margin-bottom:var(--sp-5);
  font-size:var(--text-sm);color:var(--char-mut);font-family:var(--font);
  display:inline-flex;align-items:center;gap:var(--sp-1);
}
.modal-back:hover{color:var(--char)}
.modal-label{font-size:var(--text-sm);font-weight:600;color:var(--char);margin:var(--sp-5) 0 var(--sp-2)}
.modal-label:first-of-type{margin-top:0}
.modal-or{text-align:center;font-size:var(--text-sm);color:var(--char-mut);
  margin:var(--sp-2) 0;font-family:var(--mono);letter-spacing:.06em}
.modal-path-cards{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.modal-path-card{
  background:var(--cream);border:1.5px solid rgba(28,28,26,.12);
  border-radius:var(--r-card);padding:var(--sp-5) var(--sp-5);text-align:left;cursor:pointer;
  font-family:var(--font);transition:border-color .15s ease,background .15s ease;
}
.modal-path-card:hover{border-color:rgba(28,28,26,.5);background:var(--white)}
.modal-path-card strong{display:block;font-size:var(--text-base);font-weight:700;color:var(--char)}
.modal-path-card span{display:block;font-size:var(--text-sm);color:var(--char-mut);margin-top:var(--sp-1)}
.chip-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);
  border:1.5px solid rgba(28,28,26,.18);background:transparent;
  cursor:pointer;font-size:var(--text-base);font-family:var(--font);
  color:var(--char-soft);transition:all .15s ease;
}
.chip:hover{border-color:rgba(28,28,26,.5);color:var(--char)}
.chip.selected{background:var(--field);border-color:var(--field-d);color:var(--char);font-weight:600}
.modal-success-icon{
  width:56px;height:56px;border-radius:50%;background:var(--field);
  display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);margin:0 auto var(--sp-5);
}
.modal-note{font-size:var(--text-sm);color:var(--char-mut);text-align:center;margin-top:var(--sp-3)}

/* ---------- commitments block (D7 trust section) ---------- */
.commitments{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media(max-width:860px){.commitments{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.commitments{grid-template-columns:1fr}}
.commitment{background:var(--white);border-radius:var(--r-card);padding:var(--sp-5) var(--sp-6)}
.commitment .cicon{font-size:var(--text-lg);margin-bottom:var(--sp-3)}
.commitment h3{font-size:var(--text-base);font-weight:700;margin:0;color:var(--char);letter-spacing:-.01em}
.commitment p{margin-top:var(--sp-2);font-size:var(--text-base);color:var(--char-mut);line-height:1.55}

/* ==========================================================================
   DESKTOP BALANCE (>=921px)
   Above the mobile-nav breakpoint the content column is ~1290px wide — wide
   enough that a left-aligned heading or a narrow block leaves a large void
   beside it, and wide enough that a single row of text runs well past a
   readable measure. These rules centre what stands alone and cap what
   stretches. Everything at 920px and below is deliberately left untouched.
   ========================================================================== */
@media(min-width:921px){

  /* section heads sit over the middle of the content they introduce */
  .sechead{max-width:58ch;margin-inline:auto;text-align:center}

  /* hero: centred in the field rather than hugging its left edge */
  .hero{text-align:center}
  .hero h1,.hero .sub{margin-inline:auto}
  .hero .btnrow,.hero .meta{justify-content:center}

  /* the pricing ledger is a narrow card in a very wide field */
  .ledger{margin-inline:auto}

  /* stacked components: cap the row so labels and values stay related */
  .acc,.qwrap,.spine{max-width:var(--w-block);margin-inline:auto}
  .step p{max-width:68ch}

  /* evergreen split: let the price column run the full height of the
     taller column beside it instead of leaving a void underneath */
  .evg>.evcol:last-child{align-content:stretch}
  .evg>.evcol:last-child .panel{display:flex;flex-direction:column}
  .evg>.evcol:last-child .inc{margin-bottom:auto}
}