/* Single Source Projects — remote preconstruction.
   One stylesheet, single source of truth. Edit here, nowhere else.

   Design intent: utilitarian, dense, high contrast. A contractor's tool, not a
   boutique. No gradients, no glow, no film grain, no decorative animation.
   Brand carries in the navy ground, the gold accent and the plumb-line mark.

   Type: system stack only — no webfonts. Fastest possible LCP, no FOUT, and no
   change needed to the strict CSP. Segoe UI on Windows, SF Pro on Mac, Roboto on
   Android. All three read as a straight, workmanlike grotesk, which is the point. */

:root{
  --bg:        #0b1119;   /* near-black navy ground */
  --bg-2:      #0f1825;   /* raised panel */
  --bg-3:      #142033;   /* second raised step / table stripe */
  --line:      #22314a;   /* hairline */
  --line-2:    #2e405e;   /* stronger hairline / input border */
  --ink:       #eef3f9;   /* primary text  — 16.3:1 on --bg */
  --ink-2:     #b8c6d9;   /* secondary text — 9.6:1 on --bg */
  --muted:     #8798af;   /* tertiary text — 5.6:1 on --bg, AA at all sizes */
  --gold:      #cfa646;   /* brand accent  — 8.5:1 on --bg */
  --gold-dim:  #a8863a;
  --navy:      #0f2440;   /* brand navy, used for solid fills */
  --ok:        #6fbf8b;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 40px);
  --panel: clamp(20px, 2.2vw, 26px);  /* ONE inset for every boxed panel */
  --r: 4px;               /* small radius — square-ish reads as a tool */
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Blueprint grid — a flat 2px-line lattice, no gradients. Very low contrast. */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(120,150,190,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,190,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, #000 0, #000 60vh, transparent 110vh);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 60vh, transparent 110vh);
}
main, header, footer{ position:relative; z-index:1; }

/* ---------- type ----------
   text-wrap:balance on headings, pretty on prose. This is the whole reason the page
   reads tidy instead of ragged: no more "…takeoff / shops." or a lone "learn." on its
   own line. Ignored by browsers that do not support it, so it costs nothing. */
h1,h2,h3,h4{ color:var(--ink); font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(34px, 5.6vw, 60px); letter-spacing:-.03em; }
h2{ font-size:clamp(26px, 3.6vw, 40px); }
h3{ font-size:clamp(18px, 2vw, 21px); letter-spacing:-.01em; }
p,li{ text-wrap:pretty; }
p{ margin:0 0 1em; }
a{ color:var(--gold); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:#e2c076; }
strong,b{ color:var(--ink); font-weight:650; }
ul{ margin:0 0 1em; padding-left:1.15em; }
li{ margin:.35em 0; }
::selection{ background:var(--gold); color:#0b1119; }

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.lede{ font-size:clamp(17px,2.1vw,20px); color:var(--ink-2); max-width:60ch; }
.small{ font-size:14px; color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }
section{ padding-block:clamp(56px, 8vw, 104px); }
/* ONE rule owns every section seam. Anything that also declares its own border on a
   shared edge stacks a second hairline on top of this one and the seam renders 2px —
   which is what .hero, .offer and .final were all doing. Set the colour here instead. */
section + section{ border-top:1px solid var(--line); }
section + .final{ border-top-color:var(--line-2); }
.sec-head{ max-width:70ch; margin-bottom:clamp(28px,4vw,48px); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,17,25,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--wrap); margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; gap:22px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-.01em; margin-right:auto; }
.brand svg{ width:26px; height:26px; flex:none; }
.brand span{ font-size:16px; white-space:nowrap; }
.brand .sub{ display:none; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:550;
  padding:11px 12px; border-radius:var(--r); min-height:44px; display:inline-flex; align-items:center;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-2); }
.nav-links a.cta{
  background:var(--gold); color:#161006; font-weight:700; margin-left:8px;
  border:1px solid var(--gold);
}
.nav-links a.cta:hover{ background:#e2c076; color:#161006; }
@media (max-width:860px){
  .nav-links a.hide-sm{ display:none; }
  .brand span{ font-size:15px; }
}
/* Below ~560px the brand plus two links no longer fit on one row and the sticky bar
   wraps to three lines, eating a third of the screen. Phone nav = brand + the one CTA;
   everything else is a tap away in the hero and the footer. */
@media (max-width:560px){
  .nav-links a:not(.cta){ display:none; }
  .nav-links a.cta{ margin-left:0; }
}
@media (max-width:420px){
  .brand span{ font-size:0; }
  .brand span::after{ content:"Single Source"; font-size:15px; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; border-radius:var(--r);
  font-size:16px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary{ background:var(--gold); color:#161006; border-color:var(--gold); }
.btn-primary:hover{ background:#e2c076; color:#161006; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--ink); background:var(--bg-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(52px,9vw,110px) clamp(48px,7vw,88px); }
.hero .eyebrow{ margin-bottom:18px; }
.hero h1{ max-width:17ch; }
.hero h1 .gold{ color:var(--gold); }
.hero .lede{ margin-top:20px; max-width:56ch; }
.hero-services{
  margin:26px 0 30px; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:0 10px;
  font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.01em;
}
.hero-services li{ margin:0; }
/* Trailing separator, not leading: a leading "·" becomes the first character of the
   wrapped line on a phone. Hung off the previous item it can only ever end a line. */
.hero-services li:not(:last-child)::after{ content:"·"; color:var(--gold); margin-left:10px; }
.hero-micro{ margin-top:18px; font-size:14px; color:var(--muted); }
.hero-micro b{ color:var(--ink-2); font-weight:650; }

/* ---------- problem list ---------- */
.pain{ display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pain li{
  list-style:none; margin:0; padding:16px 20px;
  border-bottom:1px solid var(--line); color:var(--ink-2); font-size:16px;
  display:flex; gap:14px; align-items:flex-start;
}
.pain li:last-child{ border-bottom:0; }
.pain li:nth-child(odd){ background:var(--bg-2); }
.pain li::before{
  content:""; flex:none; width:7px; height:7px; margin-top:9px;
  background:var(--gold); transform:rotate(45deg);
}
.pain-note{ margin-top:26px; font-size:17px; color:var(--ink); max-width:62ch; }

/* ---------- card grids ---------- */
.cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.cards-3{ grid-template-columns:repeat(3,1fr); }
.cards-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--bg-2); padding:var(--panel); }
.card h3{ margin:0 0 8px; }
.card p{ margin:0; color:var(--ink-2); font-size:15.5px; }
.card .k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px; }
.card ul{ margin:12px 0 0; padding-left:1.1em; font-size:14.5px; color:var(--muted); }
@media (max-width:900px){ .cards-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cards-3,.cards-2{ grid-template-columns:1fr; } }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s; }
.step{ border-top:2px solid var(--gold); padding-top:18px; }
.step .n{
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--gold);
  letter-spacing:.1em; display:block; margin-bottom:10px;
}
.step h3{ font-size:18px; margin:0 0 8px; }
.step p{ margin:0; font-size:15.5px; color:var(--ink-2); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- the offer band ---------- */
.offer{ background:var(--bg-2); }
.offer-in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:start; }
.offer h2{ font-size:clamp(28px,4vw,44px); }
/* Baseline-aligning a two-line label against an 84px numeral hangs its second line
   below the number and reads crooked. Sit the label block on the numeral's foot. */
.offer .price{
  display:flex; align-items:flex-end; gap:16px; margin:0 0 6px;
}
.offer .price .amt{ font-size:clamp(52px,9vw,84px); font-weight:800; color:var(--gold); line-height:.92; letter-spacing:-.04em; }
.offer .price .was{ font-size:16px; color:var(--ink-2); line-height:1.35; padding-bottom:5px; }
.offer .price .was s{ color:var(--muted); }
.offer-box{
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r); padding:var(--panel);
}
.offer-box h3{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; font-weight:700; }
.deliver{ list-style:none; margin:0; padding:0; }
.deliver li{ position:relative; padding-left:24px; margin:0 0 11px; font-size:15.5px; color:var(--ink-2); }
.deliver li:last-child{ margin-bottom:0; }
.deliver li::before{
  content:""; position:absolute; left:2px; top:8px; width:9px; height:5px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}
.fine{ margin-top:22px; font-size:13.5px; color:var(--muted); line-height:1.55; }
.fine b{ color:var(--ink-2); }
.slots{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--bg-3); border:1px solid var(--line-2);
  padding:8px 14px; border-radius:99px;
}
.slots .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
@media (max-width:820px){ .offer-in{ grid-template-columns:1fr; } }

/* ---------- trades ---------- */
.trades{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.trades li{
  margin:0; padding:11px 17px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); font-size:15.5px; font-weight:600; color:var(--ink);
}
.trades li.more{ background:transparent; color:var(--muted); font-weight:500; border-style:dashed; }

/* ---------- comparison / why ---------- */
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.why > div{ background:var(--bg-2); padding:var(--panel); }
.why h3{ margin:0 0 8px; font-size:19px; }
.why p{ margin:0; font-size:15.5px; }
@media (max-width:720px){ .why{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-size:17px; font-weight:650; color:var(--ink); min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:12px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .a{ padding:0 0 22px; max-width:78ch; color:var(--ink-2); font-size:16px; }
.faq .a p:last-child{ margin-bottom:0; }

/* ---------- final CTA ---------- */
.final{ background:var(--navy); text-align:center; }
.final h2{ max-width:20ch; margin-inline:auto; }
.final p{ max-width:56ch; margin-inline:auto; color:#c9d8ee; }
.final .btn-row{ justify-content:center; margin-top:26px; }

/* ---------- forms ---------- */
.form{ display:grid; gap:18px; max-width:720px; }
.f{ display:grid; gap:7px; }
.f label{ font-size:14px; font-weight:650; color:var(--ink); letter-spacing:.01em; }
.f label .opt{ color:var(--muted); font-weight:500; }
.f input, .f select, .f textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r);
  padding:13px 14px; min-height:50px;
}
.f textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.f input:focus, .f select:focus, .f textarea:focus, .btn:focus-visible, a:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
.f .hint{ font-size:13.5px; color:var(--muted); }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .f-row{ grid-template-columns:1fr; } }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* need-type picker */
.picks{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:600px){ .picks{ grid-template-columns:1fr; } }
.pick{ position:relative; }
.pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.pick span{
  display:block; padding:15px 16px; min-height:56px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--ink); font-weight:650; font-size:15.5px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center;
}
.pick span small{ display:block; font-weight:450; font-size:13.5px; color:var(--muted); margin-top:3px; }
.pick input:checked + span{ border-color:var(--gold); background:var(--bg-3); box-shadow:inset 0 0 0 1px var(--gold); }
.pick input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.filebox{
  border:1px dashed var(--line-2); border-radius:var(--r); padding:16px; background:var(--bg-2);
}
.filebox input[type=file]{ font-size:14px; color:var(--ink-2); background:transparent; border:0; padding:0; min-height:auto; }
.filebox input[type=file]::file-selector-button{
  font:inherit; font-weight:650; cursor:pointer; margin-right:12px;
  padding:9px 14px; border-radius:var(--r);
  background:var(--bg-3); color:var(--ink); border:1px solid var(--line-2);
}
.filebox input[type=file]::file-selector-button:hover{ border-color:var(--gold); }

/* upload queue: name, size, state. One row per file, never wider than the box. */
#fileList{ margin:12px 0 0; padding:0; list-style:none; font-size:13.5px; color:var(--ink-2); }
#fileList li{
  display:flex; align-items:baseline; gap:10px;
  padding:7px 0; border-top:1px solid var(--line);
}
#fileList li .fn{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; color:var(--ink); }
#fileList li .fz{ flex:0 0 auto; color:var(--muted); font-variant-numeric:tabular-nums; }
#fileList li span:last-child{ flex:0 0 auto; font-weight:650; font-variant-numeric:tabular-nums; }
#fileList .fs-ok{ color:#7fd6a0; }
#fileList .fs-up{ color:var(--gold); }
#fileList .fs-err{ color:#ff9aa4; font-weight:600; }

.formNote{ font-size:13.5px; color:var(--muted); max-width:62ch; }
.formMsg{ font-size:15px; padding:14px 16px; border-radius:var(--r); display:none; }
.formMsg.err{ display:block; background:#2a1518; border:1px solid #6b2b33; color:#ffc9cf; }
.formMsg.ok{ display:block; background:#12251a; border:1px solid #2f6b45; color:#c6f0d6; }

/* ---------- pricing table ---------- */
.ptable{ width:100%; border-collapse:collapse; border:1px solid var(--line); font-size:16px; }
.ptable th, .ptable td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.ptable thead th{ background:var(--bg-3); color:var(--ink); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.ptable tbody tr:nth-child(even){ background:var(--bg-2); }
.ptable tbody tr:last-child td{ border-bottom:0; }
.ptable .p{ color:var(--gold); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.tier{ background:var(--bg-2); padding:var(--panel); display:flex; flex-direction:column; }
.tier.feat{ background:var(--bg-3); }
.tier .k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.tier .amt{ font-size:40px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin:12px 0 2px; line-height:1; }
.tier .amt small{ font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; }
.tier ul{ list-style:none; padding:0; margin:18px 0 0; font-size:15.5px; }
.tier li{ padding-left:20px; position:relative; margin:0 0 9px; color:var(--ink-2); }
.tier li::before{ content:""; position:absolute; left:2px; top:9px; width:8px; height:4px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
@media (max-width:820px){ .tiers{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding-block:44px 40px; font-size:14.5px; color:var(--muted); }
.foot-in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.foot h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 12px; font-weight:700; }
.foot a{ color:var(--ink-2); text-decoration:none; }
.foot a:hover{ color:var(--gold); text-decoration:underline; }
.foot ul{ list-style:none; padding:0; margin:0; }
.foot li{ margin:0 0 8px; }
.foot .legal{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; line-height:1.6; }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr 1fr; } .foot-in > div:first-child{ grid-column:1/-1; } }

/* ---------- misc ---------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:99; background:var(--gold); color:#161006; padding:10px 16px; border-radius:var(--r); }
hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- tap targets ----------
   Footer and brand links rendered at ~20-26px tall, well under the 44px minimum.
   A contractor reads this on a phone in a truck; make everything thumb-sized. */
.brand{ min-height:44px; }
.foot li a{ display:inline-block; padding:12px 0; }
/* ...but a mouse does not need a 44px target, and on desktop that padding turns the
   footer into a loose, unstructured column. Tighten it only where the pointer is fine. */
@media (pointer:fine){
  .foot li a{ padding:5px 0; }
  .foot .legal a{ padding:2px 3px; }
}
.foot li{ margin:0; }
.foot .legal a{ display:inline-block; padding:12px 3px; }

/* ---------- paid banner (post-Stripe return) ---------- */
.paidBanner{
  display:flex; gap:14px; align-items:flex-start;
  background:#12251a; border:1px solid #2f6b45; border-radius:var(--r);
  padding:16px 18px; margin:0 0 22px; max-width:760px;
}
.paidBanner::before{
  content:""; flex:none; width:12px; height:7px; margin-top:6px;
  border-left:3px solid var(--ok); border-bottom:3px solid var(--ok);
  transform:rotate(-45deg);
}
.paidBanner b{ color:#c6f0d6; display:block; font-size:17px; }
.paidBanner span{ color:#9fc9b0; font-size:15px; }

/* ---------- sample deliverable walkthrough ---------- */
.sample-note{
  background:#221a10; border:1px solid #6b4a2b; border-radius:var(--r);
  padding:14px 18px; margin:0 0 26px; font-size:14.5px; color:#e8d5b0; max-width:78ch;
}
.sample-note b{ color:#f3e3b6; }
.plan-sheet{
  border:1px solid var(--line-2); border-radius:var(--r); background:#fff;
  padding:10px; margin:0 0 10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.plan-sheet img{ display:block; width:100%; min-width:620px; height:auto; }
.flow{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:0 0 clamp(28px,4vw,44px); padding:0; list-style:none;
}
.flow li{
  margin:0; padding:9px 14px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink);
}
.flow li.head{ background:var(--gold); color:#161006; border-color:var(--gold); }
.flow .arw{ color:var(--gold); font-weight:700; padding:0 2px; }
.stage{ border-top:2px solid var(--gold); padding-top:20px; margin:0 0 clamp(36px,5vw,56px); }
.stage .n{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.12em; display:block; margin-bottom:8px; }
.stage h3{ font-size:clamp(19px,2.2vw,24px); margin:0 0 8px; }
.stage > p{ max-width:74ch; }
.xtable{ width:100%; border-collapse:collapse; font-size:14px; border:1px solid var(--line); }
.xtable th, .xtable td{ text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top; }
.xtable thead th{ background:var(--bg-3); color:var(--ink); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.xtable tbody tr:nth-child(even){ background:var(--bg-2); }
.xtable tbody tr:last-child td{ border-bottom:0; }
.xtable .q{ color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.xtable .verify{ color:#e8a07a; font-weight:700; white-space:nowrap; }
.xtable code{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.twocol > div{ background:var(--bg-2); padding:var(--panel); }
.twocol h4{ margin:0 0 12px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.twocol ul{ margin:0; padding-left:1.1em; font-size:14.5px; }
.twocol li{ margin:0 0 7px; }
@media (max-width:760px){ .twocol{ grid-template-columns:1fr; } }

/* ---------- package header mock (sample page) ----------
   Shows the band that actually prints at the top of all eight tabs, so the
   "Prepared for" architecture is visible before anyone downloads anything. */
.pkg-head{
  border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  margin:0 0 18px; max-width:860px; background:var(--bg-2);
}
.pkg-band{
  background:var(--navy); padding:14px 18px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
}
.pkg-band .pkg-co{ font-size:15px; font-weight:700; color:#fff; letter-spacing:.06em; }
.pkg-band .pkg-doc{ font-size:14px; color:var(--gold); letter-spacing:.02em; }
.pkg-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }
.pkg-meta > div{ background:var(--bg-2); padding:12px 18px; }
.pkg-meta span{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.pkg-meta b{ font-size:15.5px; color:var(--ink); font-weight:650; }
@media (max-width:620px){ .pkg-meta{ grid-template-columns:1fr; } }