/* ============================================================
   Dealsourcing Partners — website design system
   Source of truth: brand/DEALSOURCING_BRAND_GUIDELINES.md
   Brand idea: Institutional Precision
   ============================================================ */

:root{
  /* Core brand values (immutable) */
  --ds-ink:#182521;
  --ds-paper:#F6F4EE;
  --ds-white:#FFFFFF;
  --ds-evergreen:#214D40;
  --ds-slate:#59645F;
  --ds-hairline:#D8DDD6;
  --ds-brass:#9A7946;
  --ds-error:#A13232;
  /* Derived (allowed) */
  --ds-evergreen-soft:#E8EFEC;
  --ds-brass-soft:#F1EBE1;
  --ds-brass-light:#C4A875;   /* small accent text on Ink only */
  --ds-error-soft:#F5E8E6;
  --ds-ink-muted:#30403A;
  /* Type stacks — IBM Plex (open-source; engineered, institutional voice) */
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-serif:"Source Serif 4",Georgia,serif;
  /* Layout */
  --maxw:1440px;
  --gutter:clamp(20px,5vw,80px);
  --shadow-overlay:0 12px 32px rgba(24,37,33,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--ds-paper);
  color:var(--ds-ink);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ds-evergreen);outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--ds-white)}

/* ---------- type hierarchy ---------- */
.display,h1,h2{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,5vw,4.75rem);line-height:.98}
h2{font-size:clamp(2.2rem,4.2vw,4.4rem);line-height:1;letter-spacing:-.035em;max-width:16ch}
h3{font-size:1.25rem;line-height:1.25;font-weight:600;font-family:var(--font-sans)}
.lede{font-size:clamp(1.12rem,1.8vw,1.5rem);line-height:1.42;max-width:65ch}
.small{font-size:.875rem;line-height:1.45}
.label{
  font-family:var(--font-mono);
  font-size:.6875rem;line-height:1.2;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ----------
   .vh: every section occupies the device viewport height, content
   vertically centered (100svh = small viewport height, mobile-correct). */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,8vw,112px)}
.vh{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.vh>.container{width:100%}
.section-head{max-width:56ch;margin-bottom:clamp(32px,4vw,64px)}
.section-head .label{color:var(--ds-brass);display:block;margin-bottom:16px}
.section-head p{margin-top:20px}

/* ---------- masthead (Ink, controlled) ---------- */
.masthead{background:var(--ds-ink);color:var(--ds-paper)}
.masthead-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter);
  display:flex;align-items:center;gap:32px;min-height:76px;
}
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none}
.lockup .mark{width:34px;height:auto;fill:var(--ds-brass)}
.lockup .word{display:flex;flex-direction:column;line-height:1.1}
.lockup .word b{font-size:.8125rem;font-weight:600;letter-spacing:.18em; color:var(--ds-brass-soft)}
.lockup .word span{font-size:.5625rem;font-weight:600;letter-spacing:.42em;color:var(--ds-brass-light)}
.lockup .os-chip{
  display:inline-flex;align-items:center;justify-content:center;margin-left:10px;
  border:1px solid var(--ds-brass-light);border-radius:4px;color:var(--ds-paper);
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.18em;
  padding:3px 7px 2px;
}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.5vw,32px)}
.masthead nav a{font-size:.875rem;font-weight:500;text-decoration:none;color:var(--ds-paper);opacity:.85}
.masthead nav a:hover{opacity:1}
.masthead nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--ds-brass-light)}
.masthead .btn{flex-shrink:0}
/* Single-line masthead at every width: icon-only lockup + text links hidden <=800px
   (shared block below), so the CTA stays right-aligned exactly like on desktop. */

/* ---------- buttons (compact rectangles) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding:10px 22px;border-radius:4px;
  font-family:var(--font-sans);font-size:.875rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:opacity .15s ease, background-color .15s ease, color .15s ease;
}
.btn .arr{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.btn-primary{background:var(--ds-evergreen);color:var(--ds-white)}
.btn-primary:hover{background:var(--ds-ink-muted)}
.btn-secondary{background:transparent;color:var(--ds-ink);border-color:var(--ds-ink)}
.btn-secondary:hover{background:var(--ds-ink);color:var(--ds-paper)}
.on-ink .btn-secondary,.btn-secondary.on-ink{color:var(--ds-paper);border-color:var(--ds-paper)}
.on-ink .btn-secondary:hover{background:var(--ds-paper);color:var(--ds-ink)}

/* ---------- brand-book cover hero (ink + muted brass) ---------- */
.hero-cover{min-height:calc(100svh - 76px);background:var(--ds-ink);color:var(--ds-white);display:flex;align-items:flex-end;padding-block:clamp(56px,9vh,120px)}
.hero-cover .container{width:100%}
.cover-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:end}
.hero-cover--paper{background:var(--ds-paper);color:var(--ds-ink);align-items:center;padding-block:clamp(72px,10vh,128px)}
.hero-cover--paper .label{color:var(--ds-evergreen)}
.hero-cover--paper h1 em{color:inherit}
.hero-cover--paper .cover-thesis{color:var(--ds-ink)}
.hero-cover--paper .issue-row{border-top-color:var(--ds-ink);color:var(--ds-ink)}
.hero-cover--paper .cover-grid{align-items:center}
.hero-cover--paper .cover-thesis-col{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding-right:clamp(0px,3vw,56px)}
#hero .cover-thesis-col{padding-right:0}
.cover-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-steps{padding-block:clamp(64px,8vw,112px)}
.hero-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.5vw,56px)}
.hero-step{border-top:2px solid var(--ds-ink);padding-top:clamp(22px,2.5vw,36px)}
.hero-step b{display:block;color:var(--ds-brass);font-family:var(--font-serif);font-size:clamp(2rem,3vw,3rem);font-weight:500;line-height:1}
.hero-step h3{margin-top:18px;font-size:clamp(1.2rem,1.7vw,1.5rem)}
.hero-step p{margin-top:24px;color:var(--ds-slate);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.5}
/* One continuous scale for every viewport (no breakpoint jumps): 7vw linear,
   floored at 2.35rem so "opportunities" still fits a 320px line. */
.hero-cover h1{font-size:clamp(2.35rem,7vw,6.75rem);line-height:.92;letter-spacing:-.035em;max-width:12ch}
.hero-cover h1 em{font-style:normal;color:var(--ds-brass-light)}
.hero-cover .label{color:var(--ds-brass-light);display:block;margin-bottom:24px}
.cover-thesis{font-size:.875rem;line-height:1.5;max-width:52ch}
.issue-row{margin-top:clamp(40px,6vh,72px);padding-top:1rem;border-top:1px solid var(--ds-ink-muted);display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;color:var(--ds-hairline);font-size:.75rem;text-transform:uppercase;letter-spacing:.09em}
@media (max-width:800px){
  .cover-grid{grid-template-columns:1fr}
  .hero-steps-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- homepage mobile optimization ---------- */
@media (max-width:800px){
  /* masthead: compact, no wrap-jumps; hide text links, keep lockup + CTA */
  .masthead-inner{gap:12px;padding-block:14px;min-height:60px;flex-wrap:nowrap}
  .masthead nav{gap:12px;margin-left:auto}
  .masthead nav a:not(.btn){display:none}
  .masthead .lockup .word{display:none}
  .masthead .btn{min-height:38px;padding:8px 14px;font-size:.8125rem}
  /* hero: height by content (small screens can't spare 100svh), left-aligned, full-width buttons */
  .hero-cover, .hero-cover.hero-cover--paper{min-height:0;padding-block:clamp(48px,12vh,88px);align-items:flex-start}
  /* headline order locked word-per-line below 801px; size keeps the single global scale */
  .hero-cover h1 .hl{display:block}
  .hero-cover .label{margin-bottom:18px}
  .hero-cover--paper .cover-thesis-col{padding-right:0}
  /* subheading tracks the viewport instead of holding a fixed size */
  .cover-thesis{font-size:clamp(.9rem,.78rem + .6vw,1.0625rem);line-height:1.5;max-width:38ch}
  .cover-actions{margin-top:24px;width:100%}
  .cover-actions .btn{flex:1 1 auto;justify-content:center;min-height:46px}
  /* steps strip: single column, tighter */
  .hero-steps{padding-block:clamp(44px,7vw,64px)}
  .hero-step{padding-top:18px}
  .hero-step p{margin-top:14px}
  /* section rhythm */
  .section{padding-block:clamp(44px,9vw,64px)}
  .section-head{margin-bottom:clamp(24px,6vw,36px)}
  /* where do you fit */
  .paths{grid-template-columns:minmax(0,1fr)}
  .path{padding:24px 20px}
  /* connection: stacked, shorter field, centered mark */
  .connect-copy{padding:24px 20px}
  .connect-copy h2{font-size:clamp(1.6rem,7vw,2.1rem)}
  .connect-field{min-height:300px}
  .connect-mark{width:clamp(120px,38vw,170px)}
  /* markets teaser cards */
  .grid{grid-template-columns:minmax(0,1fr)}
  /* standard (ink band): no forced viewport height on small screens; relaxed rows */
  .band.vh{min-height:0;padding-block:clamp(52px,10vw,72px)}
  .standard-row{grid-template-columns:44px 1fr;gap:8px 16px;padding-block:20px}
  .standard-row h3{font-size:1.0625rem}
  .standard-row p{grid-column:2;font-size:.9rem}
  .standard-row .num{font-size:.72rem;padding-top:3px}
  /* founder: stacked, centered, avatar centered */
  .founder{padding-block:clamp(40px,9vw,64px)}
    /* .founder scoping outranks the generic <=880 justify-items:start rule */
  .founder .founder-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}
  .founder-photo{width:148px;height:148px}
  .founder-sub{margin-inline:auto}
  .founder-actions{justify-content:center;width:100%}
  .founder-actions .btn{flex:1 1 auto;justify-content:center}
  .founder-mail{margin-top:10px}
  /* closing */
  .closing{padding-block:clamp(56px,12vw,88px)}
  .closing-box h2{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  .closing-actions{margin-top:24px}
  .closing-actions .btn{flex:1 1 auto;justify-content:center;min-height:46px}
  /* generic: big display type steps down, wraps stay inside the gutter */
  h2{font-size:clamp(1.75rem,7.5vw,2.6rem)}
  .lede{font-size:1.0625rem}
  .issue-row{gap:8px 18px;font-size:.7rem}
  /* footer: stack, full-width tap targets */
  footer{margin-top:clamp(44px,9vw,64px)}
  .footer-inner{flex-direction:column;gap:28px;padding-block:40px 28px}
  footer nav{margin-left:0;width:100%;gap:14px 22px}
}
@media (max-width:380px){
  .cover-actions, .founder-actions, .closing-actions{flex-direction:column}
  .cover-actions .btn, .founder-actions .btn, .closing-actions .btn{width:100%}
}

/* tri-column section head, per brand book */
.section-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:clamp(16px,2vw,32px);align-items:end;max-width:none}
.section-head.split .label{margin-bottom:0}
.section-head.split p{margin:0;color:var(--ds-slate);font-size:.9375rem}
@media (max-width:800px){.section-head.split{grid-template-columns:1fr}.section-head.split .label{margin-bottom:12px}}

/* ---------- hero (paper) ---------- */
.hero{padding-block:clamp(48px,6vw,96px)}
.hero .label{color:var(--ds-brass);display:block;margin-bottom:24px}
.hero h1{max-width:16ch}
.hero .lede{margin-top:28px}

/* ---------- connection is a process (dark-green field, brass icon, scroll-triggered) ---------- */
.connect-layout{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--ds-hairline);background:var(--ds-white)}
.connect-copy{padding:clamp(28px,4vw,56px);align-self:center}
.connect-copy .label{color:var(--ds-brass);display:block;margin-bottom:14px}
.connect-copy h2{font-size:clamp(1.9rem,3vw,3rem)}
.connect-copy p{margin-top:18px;color:var(--ds-slate);max-width:46ch}
.connect-field{position:relative;min-height:480px;display:grid;place-items:center;border-left:1px solid var(--ds-hairline);overflow:hidden;background:var(--ds-evergreen)}
.connect-routes{position:absolute;inset:0;width:100%;height:100%;color:var(--ds-brass-light);opacity:.85}
.connect-routes path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:520;stroke-dashoffset:520}
.connect-routes circle{fill:var(--ds-brass-light);opacity:0}
.connect-mark{width:clamp(160px,22vw,260px);height:auto;color:var(--ds-brass);fill:var(--ds-brass-light)}
.connect-field.in-view .connect-routes path{animation:route-draw 1.35s .25s ease-out forwards}
.connect-field.in-view .connect-routes circle{animation:point-in .25s 1.1s ease-out forwards}
.connect-field.in-view .connect-mark{animation:mark-in .9s .45s ease-out both}
@keyframes route-draw{to{stroke-dashoffset:0}}
@keyframes point-in{to{opacity:1}}
@keyframes mark-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.connect-routes path{stroke-dashoffset:0}.connect-routes circle{opacity:1}.connect-mark{opacity:1;transform:none}}
@media (max-width:880px){.connect-layout{grid-template-columns:1fr}.connect-field{border-left:0;border-top:1px solid var(--ds-hairline);min-height:360px}}

/* ---------- numbered vetting standard (ink band) ---------- */
.standard-stack{display:flex;flex-direction:column;margin-top:clamp(32px,4vw,56px)}
.standard-row{display:grid;grid-template-columns:100px 1fr 1.4fr;gap:clamp(20px,4vw,64px);padding-block:26px;border-bottom:1px solid var(--ds-ink-muted);align-items:baseline}
.standard-row:last-child{border-bottom:0}
.standard-row .num{font-family:var(--font-mono);font-size:.8rem;color:var(--ds-brass-light)}
.standard-row h3{color:var(--ds-white);font-size:1.2rem;margin:0}
.standard-row p{color:#B9C2BD;font-size:.95rem;margin:0}
@media (max-width:800px){.standard-row{grid-template-columns:56px 1fr}.standard-row p{grid-column:2}}
.btn-brass{background:var(--ds-brass);color:var(--ds-white);border-color:var(--ds-brass)}
.btn-brass:hover{background:var(--ds-brass-light);border-color:var(--ds-brass-light);color:var(--ds-ink)}

/* ---------- founder ---------- */
.founder{min-height:50vh;display:flex;align-items:center;padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--ds-hairline)}
.founder-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;justify-content:center;max-width:960px;margin-inline:auto}
.founder-photo{width:clamp(150px,17vw,210px);height:clamp(150px,17vw,210px);border-radius:50%;object-fit:cover;object-position:center 20%;border:1px solid var(--ds-hairline)}
.founder .label{color:var(--ds-brass);display:block;margin-bottom:12px}
.founder-name{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.02em;color:var(--ds-evergreen)}
.founder-sub{margin-top:14px;max-width:56ch;color:var(--ds-slate);font-size:.9375rem}
.founder-mail{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:.875rem;color:var(--ds-ink);text-decoration:none;border-bottom:1px solid var(--ds-brass)}
.founder-mail:hover{color:var(--ds-evergreen)}
.founder-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
@media (max-width:880px){.founder-grid{grid-template-columns:1fr;justify-items:start;max-width:none}}

/* ---------- closing ---------- */
.closing{padding-block:clamp(72px,10vw,140px);background:var(--ds-paper);border-top:1px solid var(--ds-hairline)}
.closing-box{max-width:880px;margin-inline:auto;text-align:center;padding-inline:var(--gutter)}
.closing-box h2{margin:0 auto}
.closing-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* tablet tuning: two-col connection holds until 880, then earlier rules; founder re-centers */
@media (min-width:801px) and (max-width:1024px){
  .cover-grid{gap:clamp(24px,4vw,48px)}
  .standard-row{grid-template-columns:72px 1fr 1.2fr;gap:clamp(16px,3vw,40px)}
  .connect-field{min-height:420px}
}

/* graph + points texture (white sections) */
.graph-bg{position:relative;overflow:hidden}
.graph-bg::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.52;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M96 0H0V96' fill='none' stroke='%23D8DDD6' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%239A7946'/%3E%3C/svg%3E")}
.graph-bg>.container{position:relative;z-index:1}

/* ---------- dual-path CTAs ---------- */
.paths-band{background:var(--ds-white)}
.paths-head{margin-bottom:clamp(28px,4vw,48px)}
.paths-head h2{font-family:var(--font-sans);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.05}
/* min(300px,100%): tracks may shrink with the viewport — no card crop at narrow widths */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.path{
  background:var(--ds-white);border:1px solid var(--ds-hairline);border-radius:8px;
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px;
}
.path.em{border-top:3px solid var(--ds-evergreen)}
.path .label{color:var(--ds-brass)}
.path h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.path p{color:var(--ds-slate);flex:1}
.path .btn{align-self:flex-start;margin-top:8px}

/* ---------- numbered stages ---------- */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:1px solid var(--ds-ink);border-bottom:1px solid var(--ds-hairline)}
.stage{padding:32px 28px 40px;border-left:1px solid var(--ds-hairline)}
.stage:first-child{border-left:none}
.stage .n{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--ds-evergreen);letter-spacing:.12em}
.stage h3{margin:14px 0 10px}
.stage p{font-size:.9375rem;color:var(--ds-slate)}
@media (max-width:900px){
  .stages{grid-template-columns:1fr 1fr}
  .stage:nth-child(3){border-left:none}
  .stage:nth-child(n+3){border-top:1px solid var(--ds-hairline)}
}
@media (max-width:560px){
  .stages{grid-template-columns:1fr}
  .stage{border-left:none}
  .stage:nth-child(n+2){border-top:1px solid var(--ds-hairline)}
}

/* ---------- cards / records ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px}
.card{
  background:var(--ds-white);border:1px solid var(--ds-hairline);border-radius:6px;
  padding:28px;display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease;
}
.card:hover{border-color:var(--ds-ink)}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card h3{font-size:1.0625rem}
.card p{color:var(--ds-slate);font-size:.9375rem;flex:1}
.card .go{font-size:.875rem;font-weight:600;color:var(--ds-evergreen);display:inline-flex;align-items:center;gap:8px}
.card .go .arr{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}

/* status tags — compact categorical, never color-alone */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);
  font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;border:1px solid var(--ds-hairline);
  color:var(--ds-slate);background:var(--ds-paper);
}
.tag.live{border-color:var(--ds-evergreen);color:var(--ds-evergreen);background:var(--ds-evergreen-soft)}
.tag::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor}

/* ---------- ink statement band ---------- */
.band{background:var(--ds-ink);color:var(--ds-paper)}
.band.vh{min-height:100vh;min-height:100svh}
.band .section-head .label{color:var(--ds-brass-light)}
.band h2{max-width:22ch}
.band .lede{color:var(--ds-brass-light)}
.band .arrow-link{color:var(--ds-brass-light)}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:clamp(40px,5vw,64px)}
.principle{border-top:1px solid var(--ds-ink-muted);padding-top:20px}
.principle h3{color:var(--ds-white);margin-bottom:8px}
.principle p{color:#B9C2BD;font-size:.9375rem}

/* ---------- Dealsourcing OS panel (experts page) ----------
   minmax(0,…) lets both tracks shrink with the viewport; below 880px the
   CTA column stacks under the copy instead of pinning right and leaking
   past the card (which also forced page-wide overflow onto other sections). */
.os-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:center}
.os-actions{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.os-actions p{color:var(--ds-slate)}
@media (max-width:880px){.os-panel{grid-template-columns:minmax(0,1fr)}}

/* terms + why-pay tables */
.terms-table{border-top:1px solid var(--ds-hairline);max-width:960px}
.term-row{display:grid;grid-template-columns:220px 1fr;gap:16px 32px;padding:22px 0;border-bottom:1px solid var(--ds-hairline)}
.term-row dt{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ds-evergreen)}
.term-row dd{margin:0;color:var(--ds-slate);font-size:.9375rem}
@media (max-width:800px){.term-row{grid-template-columns:1fr;gap:6px;padding:18px 0}}

/* ---------- markets page hero (thin, centered, sans) ---------- */
.market-hero{padding-block:clamp(28px,4vw,56px) clamp(20px,3vw,40px);text-align:center}
.market-hero h1{font-family:var(--font-sans);font-weight:600;letter-spacing:-.02em;font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.05}
.market-hero + .section{padding-top:clamp(16px,3vw,40px)}

/* ---------- detail / article ---------- */
.page-hero{padding-block:clamp(48px,6vw,96px)}
.page-hero .label{color:var(--ds-brass);display:block;margin-bottom:20px}
.page-hero .lede{margin-top:24px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.panel{background:var(--ds-white);border:1px solid var(--ds-hairline);border-radius:8px;padding:clamp(28px,3vw,40px)}
.panel .label{color:var(--ds-brass);display:block;margin-bottom:14px}
.panel p + p{margin-top:14px}
.panel ul{list-style:none;margin-top:8px}
.panel li{padding:12px 0;border-top:1px solid var(--ds-hairline);font-size:.9375rem;color:var(--ds-ink-muted)}
.panel li:first-child{border-top:none}
.panel li b{display:block;color:var(--ds-ink);font-weight:600;margin-bottom:2px}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{background:var(--ds-white);border:1px solid var(--ds-hairline);border-radius:6px}
.faq details + details{margin-top:12px}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-weight:600;font-size:1rem;min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:10px;height:10px;flex-shrink:0;margin-left:auto;
  border-right:2px solid var(--ds-ink);border-bottom:2px solid var(--ds-ink);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 24px 24px;color:var(--ds-slate);max-width:70ch}
.faq .a p + p{margin-top:12px}

/* ---------- forms ---------- */
.form{max-width:640px}
.field{margin-bottom:24px}
.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:8px}
.field .hint{font-weight:400;color:var(--ds-slate);margin-top:2px}
.field input[type="text"],.field input[type="email"],.field textarea,.field select{
  width:100%;min-height:44px;padding:10px 14px;border-radius:4px;
  border:1px solid var(--ds-hairline);background:var(--ds-white);
  font:inherit;color:var(--ds-ink);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--ds-evergreen);outline-offset:1px;border-color:var(--ds-evergreen);
}
.field .req{color:var(--ds-brass)}
.consent{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--ds-evergreen-soft);border:1px solid var(--ds-hairline);border-radius:6px;
  padding:16px;font-size:.875rem;color:var(--ds-ink-muted);
}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--ds-evergreen);flex-shrink:0}
.privacy-note{
  font-size:.8125rem;color:var(--ds-slate);
  border-top:1px solid var(--ds-hairline);padding-top:16px;margin-top:24px;
}

/* ---------- CTA band ---------- */
.cta-band{border-top:1px solid var(--ds-hairline);padding-block:clamp(56px,7vw,96px)}
.cta-band .cols{align-items:stretch}

/* ---------- footer ---------- */
footer{background:var(--ds-ink);color:var(--ds-paper);margin-top:clamp(64px,8vw,112px)}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter) 40px;
  display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;
}
.footer-inner .lockup .mark{fill:var(--ds-paper)}
footer nav{display:flex;gap:24px;flex-wrap:wrap;margin-left:auto}
footer nav a{font-size:.875rem;text-decoration:none;opacity:.8}
footer nav a:hover{opacity:1}
.footer-base{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 40px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  color:#8B968F;font-size:.8125rem;
}
.footer-address{font-style:normal}
.footer-base a{opacity:.85;text-decoration:none;border-bottom:1px solid var(--ds-brass);padding-bottom:1px}
.footer-base a:hover{opacity:1}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ds-white);padding:12px 20px;z-index:10}
.skip:focus{left:0}
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;
  color:var(--ds-evergreen);text-decoration:none;
}
.arrow-link .arr{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.arrow-link:hover{text-decoration:underline;text-underline-offset:4px}
.centered{min-height:100vh;display:flex;flex-direction:column}
.centered main{flex:1}