/* ==========================================================================
   keepperfectbags.com — theme (single source of truth)

   Palette: deep steel blue + amber signal + cold white paper
   Identity: engineering blueprint — deliberately NOT the graphite/jade
   register of keepperfectknit.com and NOT the brass/serif luxury register of
   the leather handbag domains. This is a procurement-decision tool site, so
   the surface is drawn like a drawing sheet, not like a catalogue.

   The four things that make it read differently:
     1  blueprint grid. A CSS 40px major / 10px minor rule behind the hero and
        every tool panel — the visual grammar of a drawing sheet.
     2  mono labels and mono numerals. Every number, table head and eyebrow is
        monospaced with tabular figures, which is how specification sheets look.
     3  hard geometry. 2px radii, hairline 1px borders, no drop shadows.
     4  an amber rule above every H2 — 28px of solid signal fading to hairline
        — so a long technical article scans like a datasheet.
   ========================================================================== */

:root{
  --ink:#0E1B2A;
  --ink-2:#2C3A4B;
  --ink-3:#55677C;
  --muted:#6E7F92;

  --paper:#F5F7F9;
  --surface:#FFFFFF;
  --surface-2:#EEF1F5;
  --surface-3:#E3E8EE;
  --line:#DAE0E8;
  --line-2:#C2CBD6;

  --signal:#C8781E;
  --signal-dk:#9A5A12;
  --signal-lt:#E8A758;
  --void:#0E1B2A;
  --void-2:#172533;
  --void-3:#26374A;

  --warn:#8A4B0E;
  --radius:2px;
  --radius-lg:4px;
  --maxw:1200px;

  --sans:"Inter Variable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",
         Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,
         "Liberation Mono","Courier New",monospace;

  --grid-col:rgba(255,255,255,.07);
  --grid-col-dk:rgba(14,27,42,.055);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:17px;line-height:1.75;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.006em;
}
::selection{background:var(--signal);color:#fff}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:var(--signal-dk);text-decoration:none;
  border-bottom:1px solid rgba(0,115,95,.32);transition:color .15s,border-color .15s}
a:hover{color:var(--ink);border-bottom-color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{line-height:1.2;color:var(--ink);margin:0 0 .6em;font-weight:700;
  letter-spacing:-.022em;text-wrap:balance}
h1{font-size:2.4rem;font-weight:800}
h2{font-size:1.5rem;margin-top:2.6em;padding-top:1.1em;position:relative}
/* the datasheet rule + signal square: the signature mark of this theme */
h2::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--signal) 0%,var(--signal) 28px,
             var(--line) 28px,var(--line) 100%);
}
h2::after{
  content:"";position:absolute;top:0;left:0;width:28px;height:2px;background:var(--signal);
}
h3{font-size:1.1rem;margin-top:2em;letter-spacing:-.012em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin:.42em 0}
strong{color:var(--ink);font-weight:700}
table,kpi b,.kpi span{font-variant-numeric:tabular-nums}
hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:99;background:var(--signal);color:#fff;
  padding:9px 15px;border-radius:var(--radius);border:0;font-family:var(--mono);font-size:.8rem}

/* ---------- header ----------
   near-black bar, one hairline of signal underneath, and a mono brand tag.
   Deliberately flat: no gradient, no drop shadow. */
.site-head{background:var(--void);color:#fff;border-bottom:2px solid var(--signal);
  position:relative;z-index:30}
/* Header is two bands on purpose.
   Band 1 holds brand + CTA at opposite ends; band 2 is a full-width index of
   all 14 sections split over two lines. Trying to fit brand + 14 links + CTA
   in one row is simple arithmetic it cannot win: the links need 893px and the
   remaining column is 662px, so the nav spilled out under the CTA. Giving the
   index its own full-width band removes the width gamble entirely. */
.head-top{max-width:var(--maxw);margin:0 auto;padding:10px 22px 7px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;border:0;color:#fff;flex:0 0 auto}
.brand:hover{color:#fff}
.brand-mark{width:40px;height:40px;border-radius:var(--radius);background:var(--signal);
  color:var(--void);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;letter-spacing:-.5px;font-family:var(--mono)}
.brand-name{font-weight:800;font-size:1.02rem;line-height:1.15;display:block;letter-spacing:-.01em}
.brand-tag{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-lt);font-weight:500;margin-top:2px}
.nav{max-width:var(--maxw);margin:0 auto;padding:0 22px 8px;width:100%;
  box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.nav-list{justify-content:flex-start;flex-wrap:wrap}
.nav-list{list-style:none;display:flex;gap:1px;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{color:#c6d1dd;border:0;padding:6px 9px;border-radius:var(--radius);
  font-size:.82rem;font-weight:600;display:block;letter-spacing:-.005em;white-space:nowrap;
  border-bottom:1px solid transparent;transition:background .15s,color .15s}
.nav-list a:hover{background:var(--void-3);color:#fff}
.nav-list a[aria-current="page"]{background:var(--void-3);color:#fff}
.nav-list a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--signal)}
.nav-sub{border-top:1px solid rgba(255,255,255,.09);padding-top:2px;margin-top:2px}
.nav-sub a{font-size:.75rem;font-weight:500;color:#8d9dad;padding:3px 7px;font-family:var(--mono)}
.nav-sub a:hover{color:#fff}
.nav-sub-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#5f6f80;font-weight:600;padding:4px 10px 4px 0;align-self:center;white-space:nowrap}
.nav-cta-m{display:none}
/* the desktop CTA sits in the same flex row as the brand and the two nav
   lines — as its own block it fell to a third row and read as a bug. */
.head-cta{flex:0 0 auto;border:0;background:var(--signal);color:var(--void);font-weight:700;
  padding:9px 16px;border-radius:var(--radius);font-size:.84rem;white-space:nowrap;
  font-family:var(--mono);letter-spacing:.02em}
.head-cta:hover{background:var(--signal-lt);color:var(--void)}
.nav-toggle{display:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding:40px 0 70px;align-items:start}
.content{min-width:0}
.side{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stack>*+*{margin-top:1.2em}

/* ---------- hero ----------
   Blueprint grid: a 40px major rule with a 10px subdivision, drawn with two
   crossed gradient pairs. Faint enough to read as a drawing sheet behind the
   copy rather than as a pattern. */
.hero{background:var(--void);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-col) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-col) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px;
}
.hero::after{
  content:"";position:absolute;right:-14%;top:-45%;width:62%;height:190%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,120,30,.26),transparent 72%);
}
.hero .wrap{position:relative;z-index:1}
.hero-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal-lt);font-weight:600;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--signal);display:block}
.hero h1{color:#fff;font-size:3.05rem;max-width:20em;font-weight:800;
  letter-spacing:-.034em;line-height:1.1;margin-bottom:.5em}
.hero-sub{color:#b3c0ce;font-size:1.1rem;max-width:46em;margin-bottom:2em;line-height:1.7}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
/* split hero: copy left, one framed specimen tile right. The tile is a light
   card so a white-background product shot reads as a specimen rather than as
   a cut-out floating on the dark ground. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:38px}
.hero-grid--split{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:56px;align-items:center}
.hero-fig{margin:0;background:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);overflow:hidden;position:relative}
.hero-fig img{display:block;width:100%;height:auto}
.hero-fig figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);background:var(--paper);
  border-top:1px solid var(--line);padding:9px 12px;text-align:center}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius)}
.stat{background:var(--void);padding:16px 18px}
.stat-num{display:block;font-size:1.62rem;font-weight:800;color:#fff;line-height:1.15;
  font-family:var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-label{display:block;font-size:.72rem;color:#8d9dad;margin-top:5px;
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.76rem;color:var(--muted);padding:16px 0 0;font-family:var(--mono)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:6px;color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{border:0;color:var(--muted)}
.crumbs a:hover{color:var(--signal-dk)}

/* ---------- article ---------- */
.article{max-width:none}
.article h2{scroll-margin-top:88px}
.lede{font-size:1.14rem;color:var(--ink-2);border-left:3px solid var(--signal);
  padding:2px 0 2px 20px;margin-bottom:1.8em;line-height:1.68}
.answer-box{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:var(--radius);padding:20px 22px;margin:0 0 1.8em}
.answer-box p:last-child{margin-bottom:0}
.answer-box strong{color:var(--ink)}

.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 2.2em}
.toc-title{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:10px}
.toc ol{margin:0;padding-left:1.15em;columns:2;column-gap:28px}
.toc li{margin:.26em 0;font-size:.9rem}
.toc li::marker{color:var(--signal);font-family:var(--mono);font-size:.8em}
@media(max-width:640px){.toc ol{columns:1}}

/* ---------- key points ---------- */
.key-points{background:var(--surface);border:1px solid var(--line);
  border-top:2px solid var(--signal);border-radius:var(--radius);padding:20px 24px;margin:0 0 2em}
.key-points h3{margin-top:0;font-size:1rem}
.key-points ul{margin-bottom:0;padding-left:1.1em}
.key-points li{font-size:.96rem}
.key-points li::marker{color:var(--signal)}
/* one takeaway reads as a statement, not as a list of one - drop the orphan
   bullet and set it as a highlight line on a signal bar */
.key-points--solo ul{list-style:none;padding-left:0;margin-bottom:0}
.key-points--solo li{font-size:1.02rem;line-height:1.68;padding-left:16px;
  border-left:2px solid var(--signal)}

/* ---------- tool panels ----------
   Every P0 tool is a drawing-sheet frame: white fill, 2px steel-blue outline,
   amber result block. Deliberately not tinted like the reading surface so the
   reader can see it is an instrument, not prose. */
.tool{border:2px solid var(--ink);border-radius:var(--radius);
  background:var(--surface);padding:22px 22px 20px;margin:0 0 1.6em}
.tool-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:18px}
.tool-head h3{margin:0;font-size:1.02rem;letter-spacing:-.01em}
.tool-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-dk);background:#FBF0E2;
  border:1px solid #EBD3B4;border-radius:var(--radius);padding:2px 7px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-bottom:16px}
.tool-field{display:flex;flex-direction:column;gap:5px}
.tool-field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.tool-field input,.tool-field select{
  font-family:var(--mono);font-size:.95rem;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:9px 11px;background:var(--surface);width:100%}
.tool-field input:focus,.tool-field select:focus{
  outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
.tool-note{font-size:.82rem;color:var(--muted);margin:0 0 16px}
.tool-result{border-left:3px solid var(--signal);background:#FBF6EF;
  padding:16px 18px;border-radius:0 var(--radius) var(--radius) 0}
.tool-result h4{margin:0 0 10px;font-size:.82rem;font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal-dk)}
.tool-out{font-family:var(--mono);font-size:1.02rem;color:var(--ink);margin:0 0 6px}
.tool-out b{font-weight:700}
.tool-sub{font-size:.84rem;color:var(--ink-3);margin:0}
.tool-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:4px}
.tool-table th,.tool-table td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.tool-table th{background:var(--surface-2);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tool-table td.n{font-family:var(--mono);text-align:right}
.tool-disclaimer{font-size:.76rem;color:var(--muted);margin:14px 0 0;
  border-top:1px solid var(--line);padding-top:10px}
@media(max-width:640px){
  .tool{padding:16px 14px}
  .tool-result{position:sticky;bottom:0}
}

/* ---------- download cards ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px;margin:0 0 1.8em}
.dl-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:18px;display:flex;flex-direction:column;gap:8px}
.dl-card .dl-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-dk)}
.dl-card p{margin:0;font-size:.88rem;color:var(--ink-3);flex:1}
.dl-card .dl-meta{font-family:var(--mono);font-size:.74rem;color:var(--muted)}

/* ---------- quick answer block (AEO) ---------- */
.quick{border:1px solid var(--line);border-left:3px solid var(--signal);
  background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 18px;margin:0 0 1.6em}
.quick p{margin:0;font-size:1rem;line-height:1.7}
.quick .quick-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-dk);display:block;margin-bottom:6px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:0 0 2em}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:19px 19px 20px;position:relative;transition:border-color .18s,transform .18s}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--signal);
  transition:width .22s ease}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card:hover::before{width:100%}
.card h3{margin:0 0 .45em;font-size:1rem}
.card p{margin:0;font-size:.9rem;color:var(--ink-3)}
.card-meta{margin-top:.9em;font-family:var(--mono);font-size:.7rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.card-icon{width:30px;height:30px;border-radius:2px;background:var(--void);color:var(--signal-lt);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.76rem;
  margin-bottom:12px;font-family:var(--mono)}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;margin:0 0 2.1em;border:1px solid var(--line);
  border-radius:var(--radius);-webkit-overflow-scrolling:touch;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.87rem;min-width:540px}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:11px 14px;
  background:var(--surface-2);font-weight:600;border-bottom:1px solid var(--line)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{background:var(--void);color:#fff;font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;font-family:var(--mono)}
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:hover{background:#E7F6F3}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink);font-weight:600}

/* ---------- callout ---------- */
.callout{border:1px solid var(--line);border-left:3px solid var(--ink);background:var(--surface);
  border-radius:var(--radius);padding:17px 20px;margin:0 0 1.9em}
.callout p:last-child{margin-bottom:0}
.callout-title{font-weight:700;color:var(--ink);display:block;margin-bottom:.35em;font-size:.95rem}
.callout--info{border-left-color:var(--ink)}
.callout--key{border-left-color:var(--signal);background:#F3FBF9}
.callout--warn{border-left-color:var(--warn);background:#FDF7EF}

/* ---------- quote ---------- */
.quote{margin:0 0 2em;padding:22px 24px;background:var(--surface-2);color:var(--ink-2);
  border-radius:var(--radius);border-left:3px solid var(--signal)}
.quote p{margin:0 0 .6em;font-size:1.05rem;font-style:normal;color:var(--ink)}
.quote cite{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase}

/* ---------- figure ---------- */
.figure{margin:0 0 2.1em}
.figure img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-3)}
.figure figcaption{font-family:var(--mono);font-size:.74rem;color:var(--muted);
  margin-top:10px;line-height:1.6;letter-spacing:.01em}

/* ---------- params (spec block) ---------- */
.params{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 2.1em}
.params dt{background:var(--surface-2);padding:11px 15px;font-family:var(--mono);font-size:.66rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:0}
.params dd{background:var(--surface);padding:11px 15px;margin:0;font-weight:600;color:var(--ink);
  font-size:.92rem;font-variant-numeric:tabular-nums}

/* ---------- cta ---------- */
.cta-panel{background:var(--void);color:#fff;border-radius:var(--radius-lg);
  padding:30px 26px;border:0;position:relative;overflow:hidden}
.cta-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-col) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-col) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px}
.cta-panel::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--signal)}
.cta-panel>*{position:relative;z-index:1}
.cta-panel h2,.cta-panel h3{color:#fff;margin-top:0;font-size:1.18rem;letter-spacing:-.02em}
.cta-panel p{color:#b3c0ce;font-size:.94rem;margin-bottom:1.1em}
.cta-panel .btn{margin-top:4px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;border:0;border-radius:var(--radius);padding:12px 20px;font-weight:700;
  font-size:.86rem;cursor:pointer;font-family:var(--mono);letter-spacing:.02em;
  transition:background .16s,color .16s,border-color .16s}
.btn--primary{background:var(--signal);color:var(--void)}
.btn--primary:hover{background:var(--signal-lt);color:var(--void);border-bottom-color:transparent}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* ---------- faq ---------- */
.faq{margin:0 0 1.8em}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;
  background:var(--surface);overflow:hidden}
.faq-q{margin:0;font-size:1rem;font-weight:700;color:var(--ink);padding:15px 18px 15px 46px;
  background:var(--surface-2);position:relative;letter-spacing:-.015em}
.faq-q::before{content:"Q";position:absolute;left:18px;top:15px;font-family:var(--mono);
  font-size:.74rem;color:var(--signal);font-weight:700;letter-spacing:.04em}
.faq-a{padding:14px 18px 16px 46px;position:relative;border-top:1px solid var(--line)}
.faq-a::before{content:"A";position:absolute;left:18px;top:15px;font-family:var(--mono);
  font-size:.74rem;color:var(--muted);font-weight:700;letter-spacing:.04em}
.faq-a p{margin:0 0 .8em;font-size:.95rem}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:.4em 0 .6em;font-size:.93rem}

/* ---------- PAA ---------- */
.paa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 22px 18px;margin:0 0 2.1em}
.paa-item{padding:15px 0;border-bottom:1px solid var(--line)}
.paa-item:last-child{border-bottom:0}
.paa-q{font-weight:700;color:var(--ink);margin:0 0 .4em;font-size:.98rem;letter-spacing:-.012em}
.paa-a{margin:0;font-size:.93rem;color:var(--ink-3)}

/* ---------- links block ---------- */
.linklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:9px;
  margin:0 0 2.1em;padding:0;list-style:none}
.linklist li{margin:0}
.linklist a{display:block;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 15px;font-size:.9rem;font-weight:600;background:var(--surface);color:var(--ink);
  border-bottom:1px solid var(--line);transition:border-color .16s,color .16s}
.linklist a:hover{border-color:var(--signal);color:var(--signal-dk);background:#F3FBF9}

/* ---------- kpi ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 2.1em;overflow:hidden}
.kpi{background:var(--surface);padding:17px 18px}
.kpi b{display:block;font-size:1.42rem;color:var(--ink);line-height:1.2;
  font-family:var(--mono);letter-spacing:-.02em;font-weight:700}
.kpi span{font-family:var(--mono);font-size:.7rem;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}

/* ---------- badges / meta ---------- */
.badge{display:inline-block;background:var(--surface-2);color:var(--ink-2);border-radius:2px;
  padding:3px 10px;font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.badge--amber{background:#DCF5F1;color:var(--signal-dk)}
.meta-line{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-bottom:1.6em;
  letter-spacing:.04em}

/* ---------- pager ---------- */
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:2.4em 0 0;padding:0;list-style:none;align-items:center}
.pager a,.pager span{border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px;
  font-family:var(--mono);font-size:.82rem;font-weight:600;background:var(--surface)}
.pager a:hover{border-color:var(--signal);color:var(--signal-dk)}
.pager span[aria-current]{background:var(--void);color:#fff;border-color:var(--void)}

/* ---------- index grid ---------- */
.post-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:14px;
  margin:1.8em 0 0;padding:0;list-style:none}
.post-list li{margin:0}
.post-list a{display:block;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;background:var(--surface);height:100%;position:relative;
  border-bottom:1px solid var(--line);transition:border-color .16s,transform .16s}
.post-list a::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--signal);transition:width .22s ease}
.post-list a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.post-list a:hover::before{width:100%}
.post-list strong{display:block;font-size:.98rem;line-height:1.42;margin-bottom:.4em;color:var(--ink)}
.post-list em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--muted);
  display:block;letter-spacing:.05em;text-transform:uppercase}
.post-list .thumb{width:100%;height:158px;object-fit:cover;border-radius:2px;display:block;
  margin-bottom:.85em;background:var(--surface-3)}

/* ---------- footer ---------- */
.site-foot{background:var(--void);color:#93a3b4;padding:52px 0 26px;margin-top:70px;
  font-size:.86rem;position:relative;overflow:hidden}
.site-foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px}
.site-foot .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.foot-col h4{color:#fff;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .9em;font-weight:600}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:.46em 0}
.site-foot a{color:#aebccb;border:0;font-size:.85rem}
.site-foot a:hover{color:var(--signal-lt)}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:1em}
.foot-brand .brand-name{color:#fff}
.sns{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.sns a{display:inline-block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:2px;padding:6px 11px;font-family:var(--mono);font-size:.7rem;font-weight:600}
.sns a:hover{background:var(--signal);color:var(--void);border-color:var(--signal)}
.foot-note{margin-top:16px;font-size:.8rem;color:#7c8b9c;line-height:1.7;max-width:34em}
.foot-legal{padding-top:20px;font-family:var(--mono);font-size:.7rem;color:#66757f;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;letter-spacing:.04em}
.foot-legal a{color:#8b9aab;font-size:.7rem}

/* ---------- 404 ---------- */
.error-wrap{text-align:center;padding:100px 20px}
.error-code{font-size:4.4rem;font-weight:800;color:var(--signal);line-height:1;
  margin-bottom:.25em;font-family:var(--mono);letter-spacing:-.04em}

/* ---------- sources / citations ---------- */
.sources{margin:2.6em 0 0;padding:22px 24px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--signal);border-radius:var(--radius)}
.sources h2{font-size:1.2rem;margin:0 0 .35em;padding-top:0}
.sources h2::before,.sources h2::after{display:none}
.sources-lede{font-size:.92rem;color:var(--muted);margin:0 0 1.1em}
.src-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.src-list li{font-size:.9rem;line-height:1.58;color:var(--ink-3);
  padding-left:16px;position:relative}
.src-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--signal);border-radius:1px}
.src-list li a{font-weight:600}
.src-pub{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);
  border-radius:2px;padding:1px 8px;margin:0 6px;vertical-align:1px;white-space:nowrap}
.src-note{color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr);gap:38px}
  .side{position:static;max-width:660px}
  /* stack the split hero: the tile drops under the copy */
  .hero-grid--split{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero-fig{max-width:420px}
  /* the nav becomes a drawer here; band 1 keeps brand + Menu button */
  .head-top{padding:10px 16px 8px;gap:12px}
  .nav-toggle{display:inline-block;margin-left:auto;background:var(--void-3);color:#fff;border:0;
    border-radius:var(--radius);padding:9px 13px;font-weight:600;font-size:.8rem;cursor:pointer;
    font-family:var(--mono)}
  .nav{margin:0;width:100%;order:3;display:none}
  .nav[data-open="true"]{display:block}
  .nav-list{flex-direction:column;gap:1px;margin-top:10px}
  .nav-list a{padding:11px 13px;font-size:.9rem}
  .nav-sub{border-top:1px solid rgba(255,255,255,.08);align-items:stretch}
  .nav-sub-label{padding:14px 13px 2px;align-self:flex-start}
  .nav-sub a{padding:10px 13px;font-size:.82rem}
  .nav-list a{line-height:1.34}
  .nav-cta-m{display:block;margin-top:12px}
  .nav-cta-m a{background:var(--signal);color:var(--void);font-weight:700;
    font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;
    border-radius:var(--radius);padding:12px 13px;text-align:center;display:block}
  .nav-cta-m a:hover{background:var(--signal-lt);color:var(--void)}
  .head-cta{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{font-size:16px}
  h1{font-size:1.85rem}
  h2{font-size:1.32rem;margin-top:2.2em}
  .hero{padding:46px 0 38px}
  .hero h1{font-size:2rem;letter-spacing:-.026em}
  .hero-sub{font-size:1rem;margin-bottom:1.6em}
  .layout{padding:26px 0 46px}
  .wrap{padding:0 16px}
  .head-top{padding:10px 16px 7px;gap:12px}
  .nav{padding:0 16px 8px}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .brand-tag{display:none}
  .stat-num{font-size:1.4rem}
}
@media(max-width:420px){
  .hero h1{font-size:1.7rem}
}
@media print{
  .site-head,.site-foot,.side,.hero-actions{display:none}
  .layout{grid-template-columns:1fr}
  .hero{background:#fff;color:var(--ink);padding:0}
  .hero h1,.hero-sub{color:var(--ink)}
}

/* small-screen guards: no horizontal bleed, hero CTAs stack, stats wrap 2-up */
html,body{max-width:100%;overflow-x:hidden}
/* Below ~1240px the 14-item index no longer holds two tidy lines, so tighten
   the nav type rather than letting a stray item wrap on its own. */
@media(max-width:1240px){
  .nav-list a{padding:8px 7px;font-size:.81rem}
  .nav-sub a{padding:4px 6px;font-size:.75rem}
  .nav-sub-label{padding-right:6px}
  .head-cta{padding:9px 13px;font-size:.8rem}
}
@media(max-width:720px){
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{width:100%;text-align:center}
  .hero-stats{grid-template-columns:1fr 1fr !important}
}
@media(max-width:420px){
  .hero-stats{grid-template-columns:1fr !important}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}