/* ============================================================
   SYSGRAFT — shared design system
   Source of truth: sysgraft-brand-guidelines.html · v1.0
   Every colour, face and rule below traces to the guidelines.
   Flat by conviction: no gradients, shadows, glows, or effects.
   ============================================================ */

/* ---------- 1 · Tokens ---------- */
:root{
  /* Colour — guidelines ch.06 */
  --ink:#1B1C1E;            /* Graphite Ink — structural text, the mark */
  --slate:#3C3D3F;          /* secondary text */
  --ash:#8A857A;            /* captions, meta */
  --paper:#F7F4EC;          /* the brand ground */
  --paper-2:#F1ECE0;        /* recessed panels inside the Paper world */
  --hairline:#DDD7C9;       /* rules, borders */
  --card:#FFFFFF;           /* functional surface inside Paper — never the ground */
  --orange:#E04A00;         /* Register Orange — the seam and accents ONLY */
  --orange-dark:#B93D02;    /* inline links (passes AA on Paper) */
  --orange-lift:#EF6A2E;    /* orange on dark surfaces only (ch.05) */
  --ink-surface:#17181B;    /* dark stage / hover-deepened ink */
  --ink-hairline:#2A2B2E;   /* hairline on dark surfaces */
  --ink-edge:#43454B;       /* mark edge on dark surfaces (ch.05) */
  /* Functional — data & UI states only, never marketing (ch.06) */
  --pos:#2E6E4E; --caution:#B4791A; --alert:#B03A24; --info:#2F5E7E;

  /* Type — guidelines ch.07. Shallow by design. */
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','SF Mono',monospace;
  --fs-display:clamp(2.125rem, 1.65rem + 1.6vw, 2.75rem);  /* 34 → 44px / 600 */
  --fs-heading:clamp(1.5rem, 1.4rem + .45vw, 1.8125rem);   /* 24 → 29px / 600 */
  --fs-subhead:1.125rem;                                   /* 18px / 600 */
  --fs-lead:1.1875rem;                                     /* 19px lead */
  --fs-body:1rem;                                          /* 16px / 400 */
  --fs-small:.875rem;                                      /* 14px support text */
  --fs-nav:.90625rem;                                      /* 14.5px nav */
  --fs-caption:.75rem;                                     /* 12px mono meta */
  --fs-micro:.6875rem;                                     /* 11px mono labels */

  /* Space & layout */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:3rem;  --sp-8:4rem;
  --section-y:clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --container:1320px;        /* wide grids, nav */
  --container-prose:1200px;  /* centred content column — generous, not cramped, but no longer left-pinned with a dead void on the right */
  --measure:none;            /* no separate per-paragraph cap — the container above already bounds line length sensibly */
  --measure-lead:none;
  --radius:10px;             /* cards (guidelines) */
  --radius-sm:8px;           /* buttons, small chips */
  --header-h:64px;
}

/* ---------- 2 · Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--orange);color:#fff}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit}

/* Motion: one quiet transition speed, fully removed on request */
a,button,summary{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* Focus — visible everywhere, on register */
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.625rem 1rem;font-size:var(--fs-small);text-decoration:none;
}
.skip-link:focus{left:.5rem;top:.5rem}

/* ---------- 3 · Typography ---------- */
h1{font-size:var(--fs-display);font-weight:600;letter-spacing:-.015em;line-height:1.08}
h2{font-size:var(--fs-heading);font-weight:600;letter-spacing:-.01em;line-height:1.14}
h3{font-size:var(--fs-subhead);font-weight:600;line-height:1.35}
p{max-width:var(--measure)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--slate);max-width:var(--measure-lead)}
.small{font-size:var(--fs-small);color:var(--slate)}
.text-slate{color:var(--slate)}
.text-ash{color:var(--ash)}
.mono{font-family:var(--mono)}
.caption{font-family:var(--mono);font-size:var(--fs-caption);color:var(--ash);letter-spacing:.05em}

/* Mono eyebrow with the 22px seam dash — verbatim from the guidelines */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dark);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--orange);flex:none}

/* Prose flow — used inside copy sections */
.flow > * + *{margin-top:var(--sp-4)}
.flow > h2{margin-top:var(--sp-7)}
.flow > h3{margin-top:var(--sp-6)}

/* ---------- 4 · Layout primitives ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.container--prose{max-width:var(--container-prose)}
.section{padding-block:var(--section-y);scroll-margin-top:calc(var(--header-h) + 1rem)}
.rule{border:0;height:1px;background:var(--hairline);margin-block:var(--sp-6)}

/* ---------- 5 · Links ---------- */
.link-inline{color:var(--orange-dark);text-decoration:underline;text-underline-offset:2px}
.link-inline:hover{color:var(--ink)}
/* Transitional CTA — lighter treatment than the button, arrow lives in the copy */
.link-transitional{
  display:inline-block;
  color:var(--orange-dark);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.link-transitional:hover{color:var(--ink)}

/* ---------- 6 · Buttons ---------- */
/* Primary CTA: Graphite Ink face, Paper text, one Register Orange seam on the
   left edge. Orange is never a fill (ch.06/ch.10) — it marks the seam only. */
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1;
  text-decoration:none;text-align:center;
  border:0;border-radius:var(--radius-sm);
  padding:.875rem 1.375rem;
  cursor:pointer;
}
.btn-primary{
  background:var(--ink);color:var(--paper);
  border-left:3px solid var(--orange);
}
.btn-primary:hover{background:var(--ink-surface)}
.btn--compact{padding:.6875rem 1rem;font-size:var(--fs-small)}
/* The mono note that sits under a CTA (“Free · 5 minutes · no sales call”) */
.btn-note{
  display:block;margin-top:var(--sp-2);
  font-family:var(--mono);font-size:var(--fs-caption);
  color:var(--ash);letter-spacing:.03em;
}

/* ---------- 7 · Cards & panels ---------- */
.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--sp-5)}
.panel{background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--sp-5)}

/* Reference code chip — mono, individually-issued feel (ch.08) */
.refcode{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.05em;color:var(--orange-dark)}

/* Placeholder marker — unfilled client truth. Dev-visible, grep-able,
   dashed caution border (3:1 non-text contrast on both grounds). */
.placeholder{
  display:inline-block;
  font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.02em;
  color:var(--slate);
  border:1px dashed var(--caution);border-radius:6px;
  padding:.25rem .625rem;background:var(--paper-2);
}

/* ---------- 8 · Site header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.site-header > .container{
  display:flex;align-items:center;gap:var(--sp-6);
  min-height:var(--header-h);position:relative;
}
.brand{display:flex;align-items:center;gap:.6875rem;text-decoration:none;color:var(--ink);flex:none}
.brand svg{width:28px;height:28px}
.brand-word{font-weight:600;font-size:1rem;letter-spacing:.02em}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)}
.site-nav ul{display:flex;align-items:center;gap:1.125rem;list-style:none;margin:0;padding:0}
.site-nav ul a{
  display:inline-block;
  font-size:var(--fs-nav);color:var(--slate);text-decoration:none;
  padding:.4375rem 0;border-bottom:2px solid transparent;
}
.site-nav ul a:hover{color:var(--ink)}
/* Current page: the seam sits under where you are — on register */
.site-nav ul a[aria-current="page"]{color:var(--ink);font-weight:500;border-bottom-color:var(--orange)}

.nav-toggle{
  display:none;margin-left:auto;
  align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:.5rem .875rem;color:var(--ink);font-size:var(--fs-small);font-weight:500;
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--ash)}
.nav-toggle .bars{display:block}

@media (max-width:1400px){
  .nav-toggle{display:inline-flex}
  /* With JS: nav collapses into a paper sheet under the header */
  html.js .site-nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--hairline);
    padding:var(--sp-5) clamp(1.25rem,4vw,2.5rem) var(--sp-6);
  }
  html.js .site-header.nav-open .site-nav{display:block}
  /* Without JS: nav simply stacks in the header — everything still reachable */
  html:not(.js) .site-header > .container{flex-wrap:wrap;padding-block:var(--sp-3)}
  html:not(.js) .site-nav{width:100%;margin-left:0}
  .site-nav{flex-direction:column;align-items:stretch;gap:var(--sp-4)}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav ul a{
    display:block;font-size:1rem;padding:.75rem 0;
    border-bottom:1px solid var(--hairline);
  }
  .site-nav ul a[aria-current="page"]{border-bottom:1px solid var(--hairline);border-left:2px solid var(--orange);padding-left:.75rem}
  .site-nav .header-cta{align-self:flex-start}
}

/* ---------- 9 · Site footer ---------- */
/* Graphite close — the guidelines end their own document the same way (ch.10). */
.site-footer{background:var(--ink);color:var(--paper)}
.site-footer .container{padding-block:var(--sp-8) var(--sp-5)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-7)}
.footer-brand{display:flex;align-items:center;gap:.6875rem;margin-bottom:var(--sp-4)}
.footer-brand svg{width:26px;height:26px}
.footer-brand .brand-word{color:var(--paper);font-size:.9375rem}
.footer-line{font-size:var(--fs-small);color:var(--ash);max-width:34ch}
.footer-col .col-label{
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ash);margin-bottom:var(--sp-3);
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-block:.375rem}
.footer-col a{color:var(--paper);text-decoration:none;font-size:var(--fs-nav)}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-col .placeholder{color:var(--ash);background:transparent}
.footer-bottom{
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  border-top:1px solid var(--ink-hairline);
  margin-top:var(--sp-7);padding-top:var(--sp-4);
  font-family:var(--mono);font-size:var(--fs-caption);color:var(--ash);letter-spacing:.04em;
}
.site-footer :focus-visible{outline-color:var(--orange-lift)}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-6)}
}

/* ---------- 9b · Homepage-introduced components ---------- */

/* Crop marks — corner registration marks, borrowed from the guidelines'
   own cover treatment (ch.05/ch.09). A quiet nod on the two most
   "foundational" sections: the hero and the anti-migration promise. */
.crop-mark{position:absolute;width:11px;height:11px;pointer-events:none}
.crop-mark--tl{top:-4px;left:0;border-left:1px solid var(--ash);border-top:1px solid var(--ash)}
.crop-mark--tr{top:-4px;right:0;border-right:1px solid var(--ash);border-top:1px solid var(--ash)}

/* Full-bleed Paper-2 band — sets the citable "stakes" figure apart
   without leaving the Paper world (Paper-2 is a permitted recessed tone) */
.band{background:var(--paper-2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}

/* Trust strip — four plain claims, each carrying the seam mark */
.trust-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius)}
.trust-strip li{background:var(--card);padding:1.125rem 1.25rem;font-size:.875rem;color:var(--slate);border-left:2px solid var(--orange);line-height:1.45}
.trust-strip li:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.trust-strip li:last-child{border-radius:0 var(--radius) var(--radius) 0}
@media (max-width:800px){
  .trust-strip{grid-template-columns:1fr}
  .trust-strip li{border-radius:0 !important}
  .trust-strip li:first-child{border-radius:var(--radius) var(--radius) 0 0 !important}
  .trust-strip li:last-child{border-radius:0 0 var(--radius) var(--radius) !important}
}

/* Three-column supporting cards (Home problem section) */
.grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:760px){.grid-3col{grid-template-columns:1fr}}

/* The stakes figure — large mono numeral, the single most citable
   number on the page. Deliberately not orange (fails AA at this
   role/size is moot since it's large display text, but Ink keeps the
   accent rule intact — orange marks the seam only, never a headline). */
.stat-figure{
  font-size:clamp(1.875rem,1.4rem + 2vw,2.75rem);
  font-weight:500;letter-spacing:-.01em;color:var(--ink);
  margin-block:.25rem;
}

/* Plan steps — a real sequence, so numbering earns its place. A hairline
   seam runs down through the numerals, echoing the mark's vertical axis. */
.plan-steps{list-style:none;margin:1.75rem 0 0;padding:0;position:relative}
.plan-steps::before{
  content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--hairline);
}
.plan-steps li{display:grid;grid-template-columns:40px 1fr;gap:1.25rem;position:relative}
.plan-steps li + li{margin-top:2rem}
.plan-num{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--paper);border:1px solid var(--hairline);
  font-size:.8125rem;color:var(--orange-dark);font-weight:500;
}
.plan-steps h3{margin-bottom:.375rem}
@media (max-width:600px){
  .plan-steps li{grid-template-columns:32px 1fr;gap:1rem}
  .plan-num{width:32px;height:32px;font-size:.75rem}
  .plan-steps::before{left:15px}
}

/* Closing CTA — full-bleed ink panel, bookends the footer the way the
   guidelines close their own document (ch.10 "IN ONE LINE" panel) */
.closing-cta{background:var(--ink)}
.btn-primary-inverse{
  display:inline-block;font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1;
  text-decoration:none;text-align:center;border:0;border-radius:var(--radius-sm);
  padding:.875rem 1.375rem;cursor:pointer;
  background:var(--paper);color:var(--ink);border-left:3px solid var(--orange);
}
.btn-primary-inverse:hover{background:#fff}
.link-transitional--inverse{color:var(--orange-lift)}
.link-transitional--inverse:hover{color:var(--paper)}

/* Check list — the "how the pricing works" bullets, seam-marked like the trust strip */
.check-list{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.875rem}
.check-list li{padding-left:1rem;border-left:2px solid var(--orange);font-size:.9375rem;color:var(--slate);line-height:1.55}

/* Article byline */
.byline{font-family:var(--mono);font-size:var(--fs-caption);color:var(--ash);letter-spacing:.03em;margin-top:.625rem}

/* Insights hub — the one live answer, and the honest coming-soon list */
.insight-card{margin-top:1.5rem;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.5rem 1.75rem}
.insight-card h3{font-size:1.0625rem}
.insight-list{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.insight-list li{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;font-size:.9375rem;color:var(--slate);padding-bottom:.75rem;border-bottom:1px solid var(--hairline)}
.insight-list li:last-child{border-bottom:0;padding-bottom:0}
.insight-list .status-tag{flex:none}

/* Founder block — photo beside text on desktop, stacked on mobile.
   Modest size deliberately: presence, not a hero portrait. */
.founder-block{display:flex;gap:2rem;align-items:flex-start;margin-top:1.5rem}
.founder-photo{
  flex:none;width:180px;height:180px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--hairline);
}
.founder-text{flex:1;min-width:0}
.founder-signature{
  margin-top:1.25rem !important;font-family:var(--mono);font-size:.9375rem;
  color:var(--slate);letter-spacing:.02em;max-width:none;
}
@media (max-width:560px){
  .founder-block{flex-direction:column;align-items:flex-start}
  .founder-photo{width:140px;height:140px}
}

/* Status tag — "coming soon", the one legitimate marketing-adjacent use
   of a functional colour: it signals a real UI/availability state, not
   a decorative accent (guidelines ch.06 reserves Caution for exactly this) */
.status-tag{display:inline-flex;align-items:center;gap:.375rem;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--caution);border:1px solid var(--caution);border-radius:20px;padding:.3125rem .75rem;background:rgba(180,121,26,.08)}
.status-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--caution);flex:none}

/* Snapshot questionnaire — five-step wizard, one dimension per step */
.snap-wizard{margin-top:2rem}
.snap-progress{margin-bottom:2rem}
.snap-progress-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-caption);color:var(--ash);letter-spacing:.04em;margin-bottom:.625rem}
.snap-progress-track{height:4px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:4px;overflow:hidden}
.snap-progress-fill{height:100%;background:var(--ink);transition:width .25s ease}

.snap-step{display:none}
.snap-step.is-active{display:block}
.snap-step h2{margin-bottom:.375rem}

.snap-question{margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--hairline)}
.snap-question:first-of-type{margin-top:1.5rem;padding-top:0;border-top:0}
.snap-question p{font-size:1rem;font-weight:500;margin-bottom:.875rem}

.snap-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem}
.snap-option{
  font-family:var(--sans);font-size:.8125rem;font-weight:500;text-align:center;
  color:var(--slate);background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:.75rem .5rem;cursor:pointer;line-height:1.3;
}
.snap-option:hover{border-color:var(--ash)}
.snap-option.is-selected{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.snap-option:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.snap-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.snap-back{background:none;border:0;color:var(--slate);font-size:.9375rem;font-weight:500;cursor:pointer;padding:.5rem 0}
.snap-back:hover{color:var(--ink)}
.snap-back[hidden]{visibility:hidden}
.snap-next{border:0}
.snap-next:disabled{opacity:.4;cursor:not-allowed}

.snap-details-row{display:grid;gap:1rem;max-width:28rem}
.snap-details-row label{display:block;font-size:var(--fs-small);font-weight:500;color:var(--slate);margin-bottom:.5rem}
.snap-details-row input{
  width:100%;font-family:var(--sans);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.75rem 1rem;
}
.snap-details-row input:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}

.snap-loading{display:none;text-align:center;padding:3rem 0}
.snap-loading.is-active{display:block}
.snap-loading .spinner{width:28px;height:28px;border:3px solid var(--hairline);border-top-color:var(--ink);border-radius:50%;margin:0 auto 1rem;animation:snap-spin 0.8s linear infinite}
@keyframes snap-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.snap-loading .spinner{animation:none}}
.snap-error{display:none;color:var(--alert);font-size:var(--fs-small);margin-top:1rem}
.snap-error.is-active{display:block}

@media (max-width:640px){
  .snap-options{grid-template-columns:1fr 1fr}
}

/* Snapshot result page */
.result-overall{display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;margin:1.5rem 0}
.result-overall .num{font-family:var(--mono);font-size:3.5rem;font-weight:500;color:var(--ink);line-height:1}
.result-overall .num small{font-size:1.25rem;color:var(--ash);font-weight:400}
.result-dim{margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--hairline)}
.result-dim:first-of-type{margin-top:0;padding-top:0;border-top:0}
.result-dim-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.result-dim-top h3{font-size:1.0625rem}
.result-dim-score{font-family:var(--mono);font-size:1.0625rem;font-weight:500}
.result-dim-score .of20{color:var(--ash);font-size:.8125rem}

/* Admin page — password gate and submissions table */
.admin-gate{max-width:24rem}
.admin-gate input{
  width:100%;font-family:var(--sans);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.75rem 1rem;margin:.75rem 0 1rem;
}
.admin-gate input:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.admin-gate-error{display:none;color:var(--alert);font-size:var(--fs-small);margin-top:.75rem}
.admin-gate-error.is-active{display:block}
.admin-table{border-collapse:collapse;width:100%;font-size:.875rem}
.admin-table th{text-align:left;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--ash);padding:.625rem .75rem;border-bottom:1px solid var(--hairline);white-space:nowrap}
.admin-table td{padding:.625rem .75rem;border-bottom:1px solid var(--hairline);vertical-align:top}
.admin-table tr:hover td{background:var(--paper-2)}

/* Capture form — snapshot.html's email placeholder. Deliberately plain:
   one field, one button, no dark patterns. */
.form-label{display:block;font-size:var(--fs-small);font-weight:500;color:var(--slate);margin-bottom:.5rem}
.form-row{display:flex;gap:.625rem;flex-wrap:wrap}
.form-row input[type="email"]{
  flex:1 1 240px;min-width:0;
  font-family:var(--sans);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:.75rem 1rem;
}
.form-row input[type="email"]:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.form-row .btn{flex:none}
.form-note{margin-top:.75rem;font-size:var(--fs-small);color:var(--caution)}
@media (max-width:480px){
  .form-row{flex-direction:column;align-items:stretch}
}

/* Tier chip — E1–E5 labels, styled like the brand's reference codes */
.tier-chip{display:inline-block;font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--orange-dark);background:var(--paper-2);border:1px solid var(--hairline);border-radius:5px;padding:.1875rem .5rem}

/* Price table — flat, hairline-ruled, mono figures per the guidelines'
   "data & meta" typography role */
.price-table{width:100%;border-collapse:collapse;margin-top:1.25rem;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.price-table th,.price-table td{padding:.875rem 1.125rem;text-align:left;border-bottom:1px solid var(--hairline);font-size:.9375rem}
.price-table thead th{background:var(--paper-2);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
.price-table td.figure,.price-table th.figure{font-family:var(--mono);font-size:.875rem}
.price-table tbody tr:last-child td{border-bottom:0}
@media (max-width:560px){
  .price-table{font-size:.875rem}
  .price-table th,.price-table td{padding:.75rem}
}

/* Pull-quote — the reframe callout */
.pullquote{border-left:3px solid var(--orange);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:1.25rem 1.5rem;margin:1.5rem 0 0}
.pullquote p{margin:0;max-width:none;font-size:1.0625rem;color:var(--slate);font-style:italic}

/* Formula card — "people trust maths more than prose," so the exit-payment
   equation gets real visual weight: labelled mono terms, then the same
   shape worked through with real numbers. */
/* Cost-compare — "the invoice that never arrives" (pricing.html).
   Same card/label/mono language as .formula-card, deliberately, so the two
   read as one family on the page. Orange plain = the seam rule only (a line,
   not text). Orange-dark = the one headline figure that's the actual point. */
.cost-compare{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card);padding:1.5rem 1.75rem;margin:1.75rem 0}
.cost-compare svg{display:block;width:100%;height:auto}
.cost-compare .cc-mobile{display:none}
@media (max-width:640px){
  .cost-compare .cc-desktop{display:none}
  .cost-compare .cc-mobile{display:block}
}
/* Dimension preview — the same five-axis shape as the real radar chart
   (ported from the same geometry as the backend's radar-chart.js), shown
   empty since no assessment has been taken yet. No fabricated scores. */
/* Graft illustration — About page only. One placement, deliberately rare:
   a horticultural graft union, the literal thing the name describes.
   Companion to the registration-mark system, not a variant of it —
   different register (biological precision vs. engineering precision),
   so it's never repeated at icon scale or placed near the primary mark. */
/* Product mockup — Home, "Grafted, not replaced". Illustrative only, always
   captioned as such — this is not a real client's software, and nothing
   here should read as a case study or a claimed result. Mirrors the
   "Built and maintained by Sysgraft" endorsement pattern from the
   guidelines (ch.09) exactly: recessive mark, quiet, stating stewardship. */
.product-mockup{margin:2rem auto;max-width:460px}
.product-mockup .cap{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ash);letter-spacing:.06em;text-transform:uppercase;margin-top:.875rem;text-align:center}
.pm-shell{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--card)}
.pm-body{display:flex}
.pm-nav{width:108px;background:var(--card);border-right:1px solid var(--hairline);padding:12px 8px;flex:none}
.pm-navitem{font-family:var(--sans);font-size:11.5px;color:var(--slate);padding:6px 7px;border-radius:5px}
.pm-navitem.active{color:var(--ink);font-weight:600;background:var(--paper-2)}
.pm-main{flex:1;padding:14px 16px}
.pm-title{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);margin-bottom:11px}
.pm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.pm-card{background:var(--paper);border:1px solid var(--hairline);border-radius:7px;padding:8px 9px}
.pm-card .pm-label{display:block;font-family:var(--mono);font-size:8.5px;color:var(--ash);text-transform:uppercase;letter-spacing:.04em}
.pm-card .pm-value{display:block;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);margin-top:3px}
.pm-card .pm-value.pm-pos{color:var(--pos)}
.pm-card .pm-value.pm-alert{color:var(--alert)}
.pm-chart{display:flex;align-items:flex-end;gap:4px;height:44px;background:var(--paper);border:1px solid var(--hairline);border-radius:7px;padding:8px}
.pm-chart span{display:block;width:100%;background:var(--slate);border-radius:1px}
.pm-endorsement{display:flex;align-items:center;gap:6px;padding:8px 14px;border-top:1px solid var(--hairline);background:var(--card)}
.pm-endorsement svg{flex:none}
.pm-endorsement .pm-etext{font-family:var(--sans);font-size:9.5px;color:var(--ash)}
.pm-endorsement .pm-ebrand{font-family:var(--sans);font-size:9.5px;font-weight:600;color:var(--slate);letter-spacing:.02em}

/* Ledger rows — extends the product-mockup family for the /ledger page.
   Tag colours deliberately reuse the architecture diagram's own legend:
   orange = AI-drafted (matches "AI insight out"), info-blue = write
   (matches "written back"), so the colour language stays one system. */
.pm-log{display:flex;flex-direction:column;gap:7px}
.pm-logrow{display:flex;align-items:center;gap:9px;padding:7px 9px;background:var(--paper);border:1px solid var(--hairline);border-radius:7px}
.pm-logtime{font-family:var(--mono);font-size:9px;color:var(--ash);flex:none;width:34px}
.pm-logwhat{font-family:var(--sans);font-size:10.5px;color:var(--slate);flex:1;line-height:1.4}
.pm-logwhat b{color:var(--ink);font-weight:600}
.pm-logtag{font-family:var(--mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:20px;flex:none;white-space:nowrap}
.pm-logtag--read{color:var(--ash);background:var(--paper-2)}
.pm-logtag--draft{color:var(--orange-dark);background:rgba(224,74,0,.08)}
.pm-logtag--approved{color:var(--pos);background:rgba(46,110,78,.10)}
.pm-logtag--write{color:var(--info);background:rgba(47,94,126,.10)}
@media (max-width:480px){
  .pm-logrow{flex-wrap:wrap}
  .pm-logwhat{flex:1 1 100%;order:3;margin-top:2px}
}

.graft-illustration{margin:2rem auto;text-align:center;max-width:480px}
.graft-illustration svg{width:100%;height:auto;display:block}
.graft-illustration .cap{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ash);letter-spacing:.06em;text-transform:uppercase;margin-top:.875rem}

.dim-preview{margin:1.75rem 0;text-align:center;overflow-x:auto}
.dim-preview svg{max-width:420px;min-width:300px;width:100%;height:auto}
.dim-preview .cap{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ash);letter-spacing:.06em;text-transform:uppercase;margin-top:.75rem}

.formula-card{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card);padding:1.5rem 1.75rem;margin-top:1.5rem}
.formula-label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--ash);text-transform:uppercase;margin-bottom:.875rem}
.formula-row{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem;font-family:var(--mono)}
.formula-term{background:var(--paper-2);border:1px solid var(--hairline);border-radius:6px;padding:.5rem .875rem;font-size:.875rem;color:var(--ink)}
.formula-op{color:var(--ash);font-size:1.125rem}
.formula-eq{color:var(--orange-dark);font-size:1.125rem;font-weight:600}
.formula-result{font-size:1.0625rem;font-weight:600;color:var(--ink)}
.formula-divider{height:1px;background:var(--hairline);margin:1.375rem 0}
.formula-example .formula-term{background:transparent}
.formula-example .formula-result{font-size:1.5rem;color:var(--orange-dark)}
@media (max-width:560px){
  .formula-row{gap:.5rem}
  .formula-term{padding:.4375rem .625rem;font-size:.8125rem}
}

/* System links — the "running something else?" grid on the hub page */
.system-links{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.system-links li{border-bottom:1px solid var(--hairline)}
.system-links li:nth-child(odd){border-right:1px solid var(--hairline)}
.system-links a{display:block;padding:.875rem 1.125rem;color:var(--ink);text-decoration:none;font-size:.9375rem;font-weight:500;background:var(--card)}
.system-links a:hover{background:var(--paper-2)}
.system-links a span{color:var(--orange-dark);margin-left:.25rem}
@media (max-width:600px){
  .system-links{grid-template-columns:1fr}
  .system-links li:nth-child(odd){border-right:none}
}

/* FAQ list — self-contained Q&A pairs, fully visible (not JS-collapsed)
   so AEO crawlers and AI assistants can read every answer directly */
.faq-list{margin-top:1.5rem;display:flex;flex-direction:column}
.faq-item{padding-block:1.375rem;border-top:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item h3{font-size:1rem;margin-bottom:.5rem}

/* ---------- 10 · Foundation/specimen page only ---------- */
.spec-section{padding-block:var(--sp-7);border-bottom:1px solid var(--hairline)}
.spec-section:last-of-type{border-bottom:0}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-4)}
.sw{background:var(--card);border:1px solid var(--hairline);border-radius:9px;overflow:hidden}
.sw .chip{height:64px}
.sw .meta{padding:.625rem .75rem}
.sw .nm{font-size:.8125rem;font-weight:500}
.sw .hx{font-family:var(--mono);font-size:var(--fs-micro);color:var(--ash);margin-top:2px}
.sw .use{font-size:var(--fs-micro);color:var(--ash);margin-top:.375rem;line-height:1.45}
.state-row{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.state{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:var(--fs-caption);color:var(--slate);border:1px solid var(--hairline);border-radius:20px;padding:.3125rem .75rem;background:var(--card)}
.state .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ================= CALCULATOR TOOL ================= */
.calc-error{display:none;color:var(--alert);font-size:var(--fs-small);margin-top:1rem}
.calc-error.is-active{display:block}
.calc-result{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--hairline)}
.calc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.calc-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:1.25rem 1.375rem}
.calc-card.is-best{border-color:var(--orange);border-width:1.5px}
.calc-card .calc-card-label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ash)}
.calc-card .calc-card-figure{font-family:var(--mono);font-size:1.375rem;font-weight:500;color:var(--ink);margin-top:.5rem}
.calc-card .calc-card-note{font-size:var(--fs-small);color:var(--slate);margin-top:.5rem}
.calc-assumptions{margin-top:1.5rem;background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:1rem 1.25rem;font-size:var(--fs-small);color:var(--slate)}
.calc-assumptions summary{cursor:pointer;font-weight:500;color:var(--ink)}
.calc-assumptions ul{margin-top:.75rem;padding-left:1.125rem}
.calc-assumptions li{margin-bottom:.375rem}
.calc-email-cta{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.calc-email-cta.is-open .calc-email-form{display:grid}
.calc-email-form{display:none;margin-top:1rem}
.calc-email-success{display:none;color:var(--pos);font-size:var(--fs-small);margin-top:1rem}
.calc-email-success.is-active{display:block}
@media(max-width:720px){
  .calc-cards{grid-template-columns:1fr}
}

/* ================= SPECIFICATION PREVIEW TOOL ================= */
.spec-text-input{
  width:100%;max-width:32rem;font-family:var(--sans);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.75rem 1rem;
  margin-top:.5rem;
}
.spec-text-input:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.spec-options{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.theme-chip{display:inline-block;font-family:var(--mono);font-size:var(--fs-small);color:var(--slate);background:var(--paper-2);border:1px solid var(--hairline);border-radius:20px;padding:.3125rem .75rem;margin:0 .375rem .375rem 0}

/* ================= ADMIN — TABS, DETAIL VIEW ================= */
.admin-tabs{display:flex;gap:.5rem;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.admin-tab{
  font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--ash);
  background:none;border:none;border-bottom:2px solid transparent;padding:.75rem .25rem;margin-bottom:-1px;cursor:pointer;
}
.admin-tab:hover{color:var(--ink)}
.admin-tab.is-active{color:var(--ink);border-bottom-color:var(--orange)}
.admin-row{cursor:pointer}
.admin-row:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.admin-back{font-size:var(--fs-small);background:none;border:none;padding:0;cursor:pointer;color:var(--orange-dark)}

/* ================= ADMIN — POST EDITOR ================= */
.editor-row{display:grid;gap:1rem;max-width:42rem}
.editor-row label{display:block;font-size:var(--fs-small);font-weight:500;color:var(--slate);margin-bottom:.5rem}
.editor-row input[type="text"],.editor-row input[type="email"]{
  width:100%;font-family:var(--sans);font-size:.9375rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.75rem 1rem;
}
.editor-row textarea{
  width:100%;font-family:var(--mono);font-size:.875rem;line-height:1.6;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.875rem 1rem;
  resize:vertical;min-height:22rem;
}
.editor-row input:focus-visible,.editor-row textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.editor-row .char-count{font-size:var(--fs-micro);color:var(--ash);margin-top:.375rem;text-align:right}
.status-badge{display:inline-flex;align-items:center;gap:.375rem;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;padding:.25rem .625rem;border-radius:20px}
.status-badge.draft{color:var(--ash);background:var(--paper-2);border:1px solid var(--hairline)}
.status-badge.published{color:var(--pos);background:rgba(46,110,78,.08);border:1px solid rgba(46,110,78,.25)}
.editor-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
.editor-actions .btn-danger{color:var(--alert);border:1px solid var(--alert);background:none}
.editor-actions .btn-danger:hover{background:rgba(176,58,36,.06)}
.media-upload-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.media-upload-row input[type="file"]{font-size:var(--fs-small)}