/* ==========================================================================
   STACK IT - DESIGN SYSTEM FOUNDATIONS
   Tier 1 of 4 · v1.3 (additive - print-bridge metadata + print tokens added)
   This document uses the tokens it documents.
   ========================================================================== */

/* --- The token layer that the rest of the doc references ---------------- */
:root {
  /* ----------------------------------------------------------------------
     COLOR TOKENS
     ----------------------------------------------------------------------
     Each color token below is annotated with its CMYK conversion and a
     suggested Pantone Solid Coated match. For the tokens already published
     in the v1.1 doc's Print Bridge table, these match those values exactly.
     For tokens not in that table, values are starting suggestions - confirm
     against a real press proof on the actual paper stock before final
     production. The hex value remains the authoritative digital reference.
     -------------------------------------------------------------------- */

  /* Brand action */
  --stk-blue:           #2563eb;  /* CMYK 84/58/0/0   · Pantone 2174 C    (per v1.1) */
  --stk-blue-hover:     #1d4ed8;  /* CMYK 88/68/0/8   · Pantone 2728 C    (per v1.1) */
  --stk-blue-deep:      #1e3a8a;  /* CMYK 78/58/0/46  · Pantone 2748 C    (suggested) */

  /* Blue scale (light) */
  --stk-blue-300:       #93c5fd;  /* CMYK 42/22/0/1   · Pantone 290 C     (suggested) */
  --stk-blue-400:       #60a5fa;  /* CMYK 58/28/0/0   · Pantone 2925 C    (per v1.1) */
  --stk-blue-200:       #bfdbfe;  /* CMYK 25/14/0/0   · Pantone 290 C lt. (suggested) */
  --stk-blue-50:        #eff6ff;  /* CMYK 6/4/0/0     · Pantone 656 C / process build */

  /* Atmosphere darks */
  --stk-navy-900:       #071224;  /* CMYK 100/90/50/65 · Pantone Black 6 C (per v1.1) */
  --stk-navy-800:       #0b1a35;  /* CMYK 95/85/40/55 · Pantone 282 C     (per v1.1) */
  --stk-navy-700:       #0d2554;  /* CMYK 85/56/0/67  · Pantone 281 C     (suggested) */

  /* Text scale */
  --stk-ink:            #0f172a;  /* CMYK 95/83/40/50 · Pantone 296 C     (per v1.1) */
  --stk-ink-2:          #1e293b;  /* CMYK 49/31/0/77  · Pantone 5395 C    (suggested) */
  --stk-ink-3:          #334155;  /* CMYK 40/24/0/67  · Pantone 432 C     (suggested) */
  --stk-muted:          #64748b;  /* CMYK 28/17/0/45  · Pantone Cool Gray 9 C (suggested) */
  --stk-muted-2:        #94a3b8;  /* CMYK 20/11/0/28  · Pantone Cool Gray 7 C (suggested) */
  --stk-muted-3:        #cbd5e1;  /* CMYK 10/5/0/12   · Pantone Cool Gray 3 C (suggested) */

  /* Surfaces & borders */
  --stk-white:          #ffffff;  /* CMYK 0/0/0/0     · substrate / paper white */
  --stk-surface-1:      #f8fafc;  /* CMYK 2/1/0/1     · too light for spot; process build */
  --stk-surface-2:      #f1f5f9;  /* CMYK 3/2/0/2     · too light for spot; process build */
  --stk-border:         #e2e8f0;  /* CMYK 6/3/0/6     · too light for spot; process build */

  /* Status */
  --stk-success:        #16a34a;  /* CMYK 87/0/55/36  · Pantone 363 C     (suggested) */
  --stk-success-bg:     #f0fdf4;  /* CMYK 6/0/3/0     · too light for spot; process build */
  --stk-success-bd:     #bbf7d0;  /* CMYK 25/0/16/3   · Pantone 351 C lt. (suggested) */
  --stk-success-deep:   #14532d;  /* CMYK 88/0/82/68  · Pantone 357 C     (suggested) - AA text on success-bg */
  --stk-warning:        #b45309;  /* CMYK 0/55/100/29 · Pantone 159 C     (suggested) */
  --stk-warning-bg:     #fffbeb;  /* CMYK 0/1/8/0     · too light for spot; process build */
  --stk-warning-bd:     #fde68a;  /* CMYK 0/9/53/1    · Pantone 1215 C    (suggested) */
  --stk-warning-deep:   #78350f;  /* CMYK 0/56/88/53  · Pantone 161 C     (suggested) - AA text on warning-bg */
  --stk-error:          #dc2626;  /* CMYK 0/83/83/14  · Pantone 1795 C    (suggested) */
  --stk-error-bg:       #fef2f2;  /* CMYK 0/4/4/0     · too light for spot; process build */
  --stk-error-bd:       #fecaca;  /* CMYK 0/20/20/1   · Pantone 1765 C    (suggested) */
  --stk-error-deep:     #7f1d1d;  /* CMYK 0/77/77/50  · Pantone 1815 C    (suggested) - AA text on error-bg */
  --stk-gold:           #f4b400;  /* CMYK 2/28/100/0  · Pantone 7549 C    (per v1.1) */

  /* Radius */
  --stk-r-sm:           4px;
  --stk-r-md:           8px;
  --stk-r-btn:          12px;
  --stk-r-card:         16px;
  --stk-r-panel:        18px;
  --stk-r-pill:         999px;

  /* Accordion / disclosure motion (shared: faq, stk-accordion, rubric) */
  --stk-acc-dur:        900ms;
  --stk-acc-ease:       cubic-bezier(.45,0,.25,1);

  /* Motion */
  --stk-ease:           cubic-bezier(.4, 0, .2, 1);
  --stk-t-fast:         .15s;
  --stk-t-base:         .2s;
  --stk-t-reveal:       .22s;
  --stk-t-size:         .25s;

  /* Type */
  --stk-display:        'Sora', sans-serif;
  --stk-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --stk-mono:           'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ======================================================================
     v1.3 - BRAND-BRIDGE TOKENS (additive)
     ----------------------------------------------------------------------
     Print typography (point sizes), logo geometry (clear space + minimum
     sizes), and stationery page metrics. Extends the foundation into
     print + physical brand expression. Purely additive - nothing above
     this block changed.
     ====================================================================== */

  /* Print typography - point sizes for print equivalents of the digital scale */
  --stk-pt-h1:          32pt;     /* flagship headlines on covers, posters */
  --stk-pt-h2:          22pt;     /* section heads on stationery */
  --stk-pt-h3:          16pt;     /* sub-heads, key labels */
  --stk-pt-body:        10.5pt;   /* default body copy in letters, docs */
  --stk-pt-body-lg:     12pt;     /* lead paragraphs, executive summaries */
  --stk-pt-small:       8.5pt;    /* fine print, legal lines, footnotes */
  --stk-pt-micro:       7pt;      /* hairline (URL footers, address lines) */

  /* Logo geometry - clear space + minimum sizes */
  --stk-logo-clear-ratio:     0.5;   /* clear space = 50% of logo height on each side */
  --stk-logo-min-px:          24px;  /* minimum size on screen (icon-only mark) */
  --stk-logo-min-px-wordmark: 32px;  /* minimum size of horizontal lockup on screen */
  --stk-logo-min-pt:          12pt;  /* minimum size in print (icon-only) */
  --stk-logo-min-in-wordmark: 0.5in; /* minimum size of horizontal lockup in print */

  /* Stationery - standard page metrics */
  --stk-paper-bc-w:          3.5in;
  --stk-paper-bc-h:          2in;
  --stk-paper-bc-bleed:      0.125in;
  --stk-paper-letter-w:      8.5in;
  --stk-paper-letter-h:      11in;
  --stk-paper-a4-w:          210mm;
  --stk-paper-a4-h:          297mm;
  --stk-paper-margin:        0.75in;
  --stk-paper-margin-bleed:  0.125in;

  /* Page layout - section spacing system + container widths */
  --stk-section-y-xs:        32px;     /* very tight (utility strips, consent area) */
  --stk-section-y-sm:        48px;     /* tight (compact content sections) */
  --stk-section-y-md:        80px;     /* default (most body sections) */
  --stk-section-y-lg:        120px;    /* generous (hero, flagship sections) */
  --stk-section-y-xl:        160px;    /* flagship hero on the homepage */
  --stk-section-x:           24px;     /* section horizontal padding (desktop) */
  --stk-section-x-mobile:    20px;     /* section horizontal padding (mobile) */
  --stk-container-narrow:    760px;    /* reading width (articles, FAQ, forms) */
  --stk-container-default:   1080px;   /* standard page width */
  --stk-container-wide:      1280px;   /* wide layouts (job board, article shell) */
  --stk-container-heading:   900px;    /* section heading width (wider than reading, never edge-to-edge) */
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--stk-body);
  color: var(--stk-ink);
  background: var(--stk-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--stk-blue); }
a:hover { color: var(--stk-blue-hover); }

/* --- Section shell ------------------------------------------------------- */
.section { padding: 96px 24px; position: relative; }
.section-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.section--dark { background: linear-gradient(145deg, #071224 0%, #0b1a35 40%, #0d2554 70%, #0b1a35 100%); color: var(--stk-muted-3); overflow: hidden; }
.section--surface { background: var(--stk-surface-1); }

/* atmosphere parts (so we can reuse the signature) */
.atmos-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.atmos-blob {
  position: absolute; pointer-events: none;
  background: radial-gradient(ellipse, rgba(37,99,235,.18) 0%, transparent 65%);
}
.atmos-blob--top {
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 420px;
}
.atmos-blob--side {
  top: 30%; left: -140px;
  width: 420px; height: 420px;
  background: radial-gradient(ellipse, rgba(96,165,250,.08) 0%, transparent 65%);
}
.atmos-blob--corner {
  bottom: -100px; right: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(ellipse, rgba(96,165,250,.08) 0%, transparent 65%);
}

/* --- Eyebrow (recurring signature device) -------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--stk-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stk-blue-400);
  margin-bottom: 24px;
}
.eyebrow::before, .eyebrow::after {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: currentColor; opacity: .5;
}
.eyebrow--dark { color: var(--stk-blue); }

/* --- Headlines ----------------------------------------------------------- */
h1, h2, h3 { font-family: var(--stk-display); color: var(--stk-ink); margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.section--dark h1, .section--dark h2, .section--dark h3,
.hero h1, .hero h2, .hero h3 { color: #fff; }

.h-display { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1.05; }
.h-section { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; margin-bottom: 16px; }
.h-sub { font-size: clamp(18px, 2vw, 22px); font-weight: 600; margin: 32px 0 12px; }

.title-accent {
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Lead paragraph ------------------------------------------------------ */
.lead {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--stk-muted-2);
  max-width: 720px;
  line-height: 1.65;
  margin: 0 0 32px;
}
.section--surface .lead, .section--light .lead { color: var(--stk-ink-3); }

p { margin: 0 0 16px; }
.section--dark p { color: var(--stk-muted-3); }
.section--surface p, .section--light p { color: var(--stk-ink-3); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding: 120px 24px 96px;
  position: relative;
  background: linear-gradient(145deg, #071224 0%, #0b1a35 40%, #0d2554 70%, #0b1a35 100%);
  color: var(--stk-muted-3);
  overflow: hidden;
}
.hero-inner {
  max-width: 1180px; margin: 0 auto;
  position: relative; z-index: 1;
}
.hero-logo {
  display: inline-block;
  margin-bottom: 56px;
  height: 64px;
}
.hero-logo img { height: 100%; width: auto; display: block; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--stk-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--stk-muted-2);
}
.hero-meta span strong { color: #fff; font-weight: 700; }

/* ==========================================================================
   SECTION TOC (sticky anchor nav)
   ========================================================================== */
.toc {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,18,36,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 14px 24px;
}
.toc-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.toc-inner::-webkit-scrollbar { display: none; }
.toc-label {
  font-family: var(--stk-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stk-blue-400); white-space: nowrap;
  padding-right: 16px; border-right: 1px solid rgba(255,255,255,.12);
}
.toc-inner a {
  font-family: var(--stk-display);
  font-size: 13px; font-weight: 500;
  color: var(--stk-muted-3); text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--stk-t-fast) var(--stk-ease), border-color var(--stk-t-fast) var(--stk-ease);
}
.toc-inner a:hover, .toc-inner a:focus-visible {
  color: #fff;
  border-bottom-color: var(--stk-blue-400);
  outline: none;
}

/* ==========================================================================
   TIER ROADMAP (the system at a glance)
   ========================================================================== */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 900px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  padding: 28px 24px;
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  background: var(--stk-white);
  position: relative;
}
.tier--current {
  border-color: var(--stk-blue);
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%);
  box-shadow: 0 8px 28px -12px rgba(37,99,235,.3);
}
.tier-num {
  font-family: var(--stk-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--stk-muted-2);
  margin-bottom: 8px;
}
.tier--current .tier-num { color: var(--stk-blue); }
.tier-name {
  font-family: var(--stk-display);
  font-size: 18px; font-weight: 700;
  color: var(--stk-ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.tier-desc { font-size: 13.5px; color: var(--stk-muted); line-height: 1.55; margin: 0; }
.tier-status {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--stk-display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stk-muted-2);
}
.tier--current .tier-status { color: var(--stk-blue); }

/* ==========================================================================
   COLOR SWATCHES
   ========================================================================== */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.swatch {
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  background: var(--stk-white);
  overflow: hidden;
  transition: transform var(--stk-t-base) var(--stk-ease), box-shadow var(--stk-t-base) var(--stk-ease);
}
.swatch:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(15,23,42,.18); }
.swatch-chip {
  height: 110px;
  position: relative;
  border-bottom: 1px solid var(--stk-border);
}
.swatch-chip--checker {
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.swatch-body { padding: 16px 18px 18px; }
.swatch-name {
  font-family: var(--stk-display);
  font-size: 13.5px; font-weight: 700;
  color: var(--stk-ink);
  margin-bottom: 6px;
  letter-spacing: -.005em;
}
.swatch-hex {
  font-family: var(--stk-mono);
  font-size: 12px;
  color: var(--stk-muted);
  text-transform: uppercase;
}
.swatch-var {
  display: block;
  font-family: var(--stk-mono);
  font-size: 11.5px;
  color: var(--stk-blue);
  margin-top: 8px;
}
.swatch-role {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stk-surface-2);
  font-size: 12.5px;
  color: var(--stk-muted);
  line-height: 1.4;
}

/* gradient swatch */
.swatch-chip--gradient {
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
}

/* ==========================================================================
   CODE BLOCKS
   ========================================================================== */
.code {
  background: var(--stk-navy-900);
  color: #e2e8f0;
  border-radius: var(--stk-r-card);
  padding: 24px 28px;
  font-family: var(--stk-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  position: relative;
  margin: 24px 0 32px;
  border: 1px solid rgba(255,255,255,.06);
}
.code .c-comment { color: var(--stk-muted); font-style: italic; }
.code .c-prop { color: var(--stk-blue-400); }
.code .c-val { color: #cbd5e1; }
.code .c-num { color: #fbbf24; }
.code .c-sel { color: var(--stk-blue-300); }
.code-label {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--stk-display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--stk-muted);
}
.code pre { margin: 0; white-space: pre; font-family: inherit; }

/* ==========================================================================
   TYPE SPECIMENS
   ========================================================================== */
.type-row {
  display: grid;
  grid-template-columns: 140px 1fr 280px;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--stk-border);
}
.type-row:first-of-type { border-top: none; }
@media (max-width: 760px) {
  .type-row { grid-template-columns: 1fr; gap: 8px; }
}
.type-label {
  font-family: var(--stk-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--stk-blue);
}
.type-spec {
  font-family: var(--stk-mono);
  font-size: 12px;
  color: var(--stk-muted);
  line-height: 1.5;
}
.type-spec .pipe { color: var(--stk-muted-3); margin: 0 8px; }
.type-sample { color: var(--stk-ink); }

/* ==========================================================================
   SCALE BARS
   ========================================================================== */
.scale-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 24px 0 40px;
}
.scale-item {
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  padding: 20px 22px;
  background: var(--stk-white);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scale-preview {
  height: 56px;
  background: var(--stk-blue);
}
.scale-preview--r4 { border-radius: 4px; }
.scale-preview--r8 { border-radius: 8px; }
.scale-preview--r12 { border-radius: 12px; }
.scale-preview--r14 { border-radius: 14px; }
.scale-preview--r16 { border-radius: 16px; }
.scale-preview--r18 { border-radius: 18px; }
.scale-preview--r999 { border-radius: 999px; }

.scale-name {
  font-family: var(--stk-display);
  font-size: 13px; font-weight: 700;
  color: var(--stk-ink);
}
.scale-meta {
  font-family: var(--stk-mono);
  font-size: 11.5px;
  color: var(--stk-muted);
}

/* ==========================================================================
   ELEVATION CARDS
   ========================================================================== */
.elev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 24px 0 40px;
}
.elev-card {
  background: var(--stk-white);
  border-radius: var(--stk-r-card);
  padding: 28px 24px;
  text-align: center;
}
.elev-1 { box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.elev-2 { box-shadow: 0 6px 28px rgba(0,0,0,.08); }
.elev-3 { box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.elev-cta { box-shadow: 0 4px 14px rgba(37,99,235,.25); background: var(--stk-blue); color: #fff; }
.elev-cta-hover { box-shadow: 0 8px 22px rgba(37,99,235,.35); background: var(--stk-blue); color: #fff; }
.elev-drop { box-shadow: 0 16px 32px -8px rgba(15,23,42,.15); }
.elev-mega { box-shadow: 0 18px 40px -16px rgba(15,23,42,.14); }

.elev-name {
  font-family: var(--stk-display);
  font-size: 13.5px; font-weight: 700;
  margin-bottom: 6px;
}
.elev-spec {
  font-family: var(--stk-mono);
  font-size: 11px;
  color: var(--stk-muted);
  line-height: 1.5;
  word-break: break-all;
}
.elev-cta .elev-name, .elev-cta-hover .elev-name { color: #fff; }
.elev-cta .elev-spec, .elev-cta-hover .elev-spec { color: rgba(255,255,255,.85); }

/* ==========================================================================
   MOTION DEMOS
   ========================================================================== */
.motion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0 40px;
}
.motion-card {
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  padding: 24px;
}
.motion-name {
  font-family: var(--stk-display);
  font-size: 13.5px; font-weight: 700;
  margin-bottom: 6px;
}
.motion-val {
  font-family: var(--stk-mono);
  font-size: 12px;
  color: var(--stk-blue);
  margin-bottom: 10px;
}
.motion-use {
  font-size: 13px;
  color: var(--stk-muted);
  line-height: 1.5;
}

/* ==========================================================================
   ATMOSPHERE DEMO
   ========================================================================== */
.atmos-demo {
  position: relative;
  border-radius: var(--stk-r-panel);
  padding: 64px 40px;
  background: linear-gradient(145deg, #071224 0%, #0b1a35 40%, #0d2554 70%, #0b1a35 100%);
  overflow: hidden;
  margin: 32px 0;
  color: #fff;
  min-height: 280px;
}
.atmos-demo-title {
  position: relative; z-index: 1;
  font-family: var(--stk-display);
  font-size: 32px; font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.atmos-demo-sub {
  position: relative; z-index: 1;
  color: var(--stk-muted-2);
  font-size: 15px;
  max-width: 480px;
}

/* glass panel demo */
.glass {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--stk-r-panel);
  padding: 28px;
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin-top: 28px;
}
.glass-stat {
  font-family: var(--stk-display);
  font-size: 42px; font-weight: 800;
  color: #fff; line-height: 1;
}
.glass-label {
  font-family: var(--stk-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stk-muted-2);
  margin-top: 6px;
}

/* ==========================================================================
   RULE CALLOUT
   ========================================================================== */
.rule {
  border-left: 3px solid var(--stk-blue);
  background: var(--stk-surface-1);
  padding: 18px 22px;
  border-radius: 0 var(--stk-r-card) var(--stk-r-card) 0;
  margin: 24px 0;
}
.section--dark .rule {
  background: rgba(96,165,250,.06);
  border-left-color: var(--stk-blue-400);
}
.rule-label {
  display: block;
  font-family: var(--stk-display);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--stk-blue);
  margin-bottom: 6px;
}
.section--dark .rule-label { color: var(--stk-blue-400); }
.rule p { margin: 0; font-size: 14.5px; color: var(--stk-ink-3); }
.section--dark .rule p { color: var(--stk-muted-3); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 40px;
  font-size: 14px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--stk-border);
  vertical-align: top;
}
.tbl thead th {
  font-family: var(--stk-display);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--stk-muted);
  background: var(--stk-surface-1);
  border-bottom: 1px solid var(--stk-border);
}
.tbl tbody tr:hover { background: var(--stk-surface-1); }
.section--dark .tbl tbody tr:hover { background: rgba(255,255,255,.04); }
.tbl code, .tbl .mono {
  font-family: var(--stk-mono);
  font-size: 12.5px;
  color: var(--stk-blue);
  background: var(--stk-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.tbl .tbd {
  font-family: var(--stk-mono);
  font-size: 11.5px;
  color: var(--stk-muted);
  font-style: italic;
}

/* ==========================================================================
   LOGO PREVIEWS
   ========================================================================== */
.logo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.logo-tile {
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  padding: 32px 24px 22px;
  background: var(--stk-white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  min-height: 180px;
}
.logo-tile--dark {
  background: linear-gradient(145deg, #071224 0%, #0b1a35 100%);
  border-color: rgba(255,255,255,.08);
}
.logo-tile img { max-width: 160px; height: auto; }
.logo-tile-name {
  font-family: var(--stk-mono);
  font-size: 11px;
  color: var(--stk-muted);
}
.logo-tile--dark .logo-tile-name { color: var(--stk-muted-2); }

/* ==========================================================================
   ACCESSIBILITY DEMO BLOCKS
   ========================================================================== */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 24px 0 40px;
}
.a11y-card {
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  padding: 24px;
  background: var(--stk-white);
}
.a11y-name {
  font-family: var(--stk-display);
  font-size: 14px; font-weight: 700;
  color: var(--stk-ink);
  margin-bottom: 8px;
}
.a11y-desc {
  font-size: 13.5px;
  color: var(--stk-muted);
  line-height: 1.55;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot {
  background: var(--stk-navy-900);
  color: var(--stk-muted-2);
  padding: 64px 24px 48px;
  font-size: 13.5px;
}
.foot-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot h4 {
  font-family: var(--stk-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--stk-blue-400);
  margin: 0 0 12px;
}
.foot p { color: var(--stk-muted-2); margin: 0; line-height: 1.7; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .toc { display: none; }
  .section, .hero { padding: 36px 24px; page-break-inside: avoid; }
  .section--dark, .hero { background: #0b1a35 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .atmos-grid, .atmos-blob { display: none; }
}