/* ============================================================================
   d3VIEW Design System — theme.css  (Phase 1 mockup contract, v1 2026-07-02)
   ----------------------------------------------------------------------------
   One identity, two density registers:
     body.register-expressive  -> blogs, marketing, home, about
     body.register-strict      -> docs, release notes, builds
   Palette: d3VIEW platform indigos (#172144 / #30487f) on Anthropic-warm
   earthy neutrals, with a book-cloth clay accent used sparingly.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand indigos (from the d3VIEW platform) --- */
  --indigo-950: #10182f;   /* deepest — hero/footer grounds */
  --indigo-900: #172144;   /* platform --indigo-blue-dark */
  --indigo-800: #22315e;
  --indigo-700: #30487f;   /* platform --indigo-blue-light */
  --indigo-600: #3f5b9c;
  --indigo-500: #5470bd;   /* interactive on light */
  --indigo-400: #7a90d4;
  --indigo-300: #a8b8e6;
  --indigo-200: #cdd6f1;
  --indigo-100: #e6ebf8;
  --indigo-050: #f2f4fb;

  /* --- Warm creme neutrals (aligned to the assembler theme tokens) --- */
  --oat-050: #faf8f2;      /* page ground, expressive */
  --oat-100: #f4efe4;      /* cards, wells (assembler --panel-soft) */
  --oat-200: #e5ddcd;      /* soft borders, dividers (assembler --line) */
  --oat-300: #d4c9b3;      /* strong borders (assembler --line-hi) */
  --ink-900: #34302a;      /* primary text — warm near-black (assembler --ink) */
  --ink-700: #55503f;      /* secondary text */
  --ink-500: #6d6759;      /* muted text, captions (assembler --ink-mut) */
  --ink-300: #9c9480;      /* faint (assembler --ink-dim) */

  /* --- Strict-register paper (a touch cooler + brighter for density) --- */
  --paper-000: #fdfdfb;
  --paper-100: #f6f5f1;
  --paper-200: #eceae3;

  /* --- Accents — GRADIENT-FAMILY ONLY (Rahul 2026-07-03 v1.2): every blue on the
         site comes from the brand ramp indigo-900→600→400. Purple-leaning vivids
         (#4f46e5 etc.) are banned. Functional status greens/oranges are status
         semantics, not theme accent. --- */
  --grad-brand: linear-gradient(150deg, var(--indigo-900), var(--indigo-600) 60%, var(--indigo-400));
  --clay-600: #30487f;     /* legacy token names kept so component classes don't churn; */
  --clay-500: #3f5b9c;     /* accent = indigo-600 from the brand ramp */
  --clay-100: #e6ebf8;     /*   soft = indigo-100 */
  --moss-600: #3f7d4f;     /* NEW / added */
  --moss-100: #e9efdf;
  --amber-600: #3f5b9c;    /* UPDATE / changed — in-family indigo-600 */
  --amber-100: #e6ebf8;
  --rust-600: #a8431f;     /* FIX — muted orange (not a blue; status only) */
  --rust-100: #f6e6d8;

  /* --- Type --- */
  --font-display: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-hero: clamp(2.4rem, 5.5vw, 4rem);

  /* --- Rhythm --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-8: 3rem;    --space-10: 4rem;  --space-12: 6rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(23,33,68,.06), 0 4px 16px rgba(23,33,68,.07);
  --shadow-lift: 0 2px 4px rgba(23,33,68,.08), 0 12px 32px rgba(23,33,68,.12);
  --container: 1120px;
  --container-narrow: 760px;   /* reading measure — posts, docs body */
}

/* ============================== BASE ==================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-900);
  font-feature-settings: 'cv05' 1, 'cv11' 1;
}
img { max-width: 100%; display: block; }
a { color: var(--indigo-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 3px; }

/* Registers */
body.register-expressive { background: var(--oat-050); }
body.register-strict     { background: var(--paper-000); }

h1, h2, h3, h4 { margin: 0 0 var(--space-4); line-height: 1.18; color: var(--indigo-900); }
body.register-expressive h1,
body.register-expressive h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}
body.register-expressive h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
body.register-strict h1, body.register-strict h2,
body.register-strict h3, body.register-strict h4 {
  font-family: var(--font-body);
  font-weight: 650;
  letter-spacing: 0;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p  { margin: 0 0 var(--space-4); }
code, kbd { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-100);
  border: 1px solid var(--paper-200); border-radius: 4px; padding: 0.1em 0.35em; }
pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.55;
  background: var(--indigo-950); color: #dfe5f4; border-radius: var(--radius-md);
  padding: var(--space-5); overflow-x: auto; }
pre code { background: none; border: none; padding: 0; color: inherit; }
hr { border: none; border-top: 1px solid var(--oat-200); margin: var(--space-8) 0; }

/* ============================ LAYOUT ==================================== */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-12) 0; }
.section-tight { padding: var(--space-8) 0; }

/* ============================ HEADER ==================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--oat-200);
}
.site-header [hidden] { display: none !important; }
body.register-expressive .site-header { background: rgba(250,249,245,.88); }
body.register-strict     .site-header { background: rgba(253,253,251,.92); }
.site-header .container {
  width: 100%; max-width: none; height: 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--space-5);
  padding-inline: clamp(var(--space-4), 2vw, var(--space-6));
}
.site-header .logo { justify-self: start; }
.logo { display: flex; align-items: center; font-weight: 700; font-size: 1.25rem;
  color: var(--indigo-900); letter-spacing: -0.02em; }
.logo:hover { text-decoration: none; }
.logo .logo-3 { color: var(--indigo-500); }
.logo img { height: 34px; width: auto; display: block; }
.site-footer .logo img { height: 38px; }
.nav { display: flex; gap: var(--space-5); align-items: center; }
.nav-primary { grid-column: 2; justify-self: center; }
.nav-account-zone {
  grid-column: 3; min-width: 0; justify-self: end;
  display: flex; align-items: center;
}
.nav-account-zone .btn { padding: .52rem 1rem; }
.nav a { color: var(--ink-700); font-size: var(--text-sm); font-weight: 500; }
.nav a:hover { color: var(--indigo-700); text-decoration: none; }
.nav a.active { color: var(--indigo-900); font-weight: 600; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--oat-050); }
.nav .btn { padding: .52rem 1rem; }
.nav-popover { position: relative; }
.nav-popover summary { list-style: none; color: var(--ink-700); font-size: var(--text-sm);
  font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: .35rem; }
.nav-popover summary::-webkit-details-marker { display: none; }
.nav-popover summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-popover summary:hover, .nav-popover summary.active { color: var(--indigo-900); }
.nav-popover-panel { position: absolute; top: calc(100% + .8rem); right: 0; width: 190px;
  background: #fffefb; border: 1px solid var(--oat-200); border-radius: var(--radius-md);
  padding: var(--space-2); box-shadow: var(--shadow-lift); }
.nav-popover-panel a { display: block; padding: .55rem .7rem; border-radius: var(--radius-sm); }
.nav-popover-panel a:hover { background: var(--indigo-050); }
.nav-popover-panel a.active { color: var(--indigo-900); background: var(--indigo-050); font-weight: 650; }
.nav-popover[data-nav-group="products"] .nav-popover-panel {
  right: auto;
  left: 0;
  width: min(520px, calc(100vw - 48px));
}
.nav-platform-link { font-weight: 700; }
.nav-platform-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 2px 0 8px;
  padding: 8px 0 10px 12px;
  border-bottom: 1px solid var(--indigo-100);
}
.nav-platform-apps a { color: var(--ink-500); font-size: var(--text-xs); }
.nav-mobile-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0 0 var(--space-2) var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--indigo-200);
}
.nav-mobile-apps a { font-size: var(--text-xs); }
.nav-popover-panel .resource-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nav-lock { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink-300); }
.nav-account-guest { display: flex; align-items: center; gap: var(--space-3); }
.nav-account-guest .nav-sign-in { color: var(--indigo-900); font-size: var(--text-sm); font-weight: 650; }
.nav-account { position: relative; }
.nav-account > summary {
  list-style: none; cursor: pointer; max-width: 170px; padding: .48rem .78rem;
  border: 1px solid var(--indigo-300); border-radius: var(--radius-pill);
  color: var(--indigo-900); font-size: var(--text-sm); font-weight: 650;
  display: flex; align-items: center; gap: var(--space-2);
}
.nav-account > summary::-webkit-details-marker { display: none; }
.nav-account > summary::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-100);
}
.nav-account > summary span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-account-panel {
  position: absolute; top: calc(100% + .75rem); right: 0; width: 230px;
  padding: var(--space-2); background: #fffefb; border: 1px solid var(--oat-200);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
.nav-account-panel p, .nav-mobile-user p {
  margin: 0; padding: .5rem .7rem; color: var(--ink-500); font-size: var(--text-xs);
}
.nav-account-panel strong, .nav-mobile-user strong {
  display: block; color: var(--ink-900); font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.nav-account-panel .nav-auth-status, .nav-mobile-user .nav-auth-status {
  color: var(--clay-600); font-weight: 600;
}
.nav-account-panel a, .nav-account-panel button,
.nav-mobile nav button[data-portal-logout] {
  display: block; width: 100%; border: 0; background: transparent; color: var(--indigo-700);
  padding: .55rem .7rem; text-align: left; font: inherit; font-size: var(--text-sm);
  cursor: pointer; border-radius: var(--radius-sm);
}
.nav-account-panel a:hover, .nav-account-panel button:hover,
.nav-mobile nav button[data-portal-logout]:hover {
  background: var(--indigo-050); text-decoration: none;
}
.nav-mobile { display: none; grid-column: 3; justify-self: end; position: relative; }
.nav-mobile > summary { list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: 650;
  color: var(--indigo-900); border: 1px solid var(--oat-300); border-radius: var(--radius-pill); padding: .45rem .85rem; }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile nav { position: absolute; right: 0; top: calc(100% + .75rem); width: min(280px, calc(100vw - 2rem));
  padding: var(--space-3); background: #fffefb; border: 1px solid var(--oat-200); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift); display: grid; max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
.nav-mobile nav a { padding: .55rem .65rem; color: var(--ink-700); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.nav-mobile nav a:hover { background: var(--indigo-050); text-decoration: none; }
.nav-mobile nav a.active { color: var(--indigo-900); background: var(--indigo-050); font-weight: 650; }
.nav-mobile nav .btn { color: var(--oat-050); text-align: center; justify-content: center; margin-top: var(--space-2); }
.nav-mobile-account {
  display: grid; padding-top: var(--space-2); margin-top: var(--space-2);
  border-top: 1px solid var(--oat-200);
}
.nav-mobile-user p { padding-left: .65rem; }
@media (max-width: 1100px) {
  .site-header .container { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-desktop { display: none; }
  .nav-mobile { display: block; grid-column: 2; }
}

/* ============================ BUTTONS =================================== */
.btn { display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.7rem 1.3rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; transition: all .15s ease;
  white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--indigo-900); color: var(--oat-050); }
.btn-primary:hover { background: var(--indigo-700); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn-secondary { background: transparent; color: var(--indigo-900); border-color: var(--indigo-300); }
.btn-secondary:hover { border-color: var(--indigo-700); background: var(--indigo-050); }
.btn-clay { background: var(--clay-500); color: #fff; }
.btn-clay:hover { background: var(--clay-600); transform: translateY(-1px); box-shadow: var(--shadow-soft); }

/* ============================= HERO ===================================== */
.hero { padding: var(--space-12) 0 var(--space-10); }
.hero h1 { font-size: var(--text-hero); max-width: 18ch; margin-bottom: var(--space-5); }
.hero .lede { font-size: var(--text-md); color: var(--ink-700); max-width: 54ch; }
.hero-dark { background: var(--grad-brand); }
.hero-dark h1 { color: var(--oat-050); }
.hero-dark .lede { color: var(--indigo-200); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-500);
  margin-bottom: var(--space-3); display: block; }
.hero-dark .eyebrow { color: var(--indigo-300); }

/* ============================= CARDS ==================================== */
.card { background: #fff; border: 1px solid var(--oat-200); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: var(--shadow-soft); }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
body.register-expressive .card { background: #fffefb; }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--ink-700); font-size: var(--text-sm); margin: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Feature icon chip */
.icon-chip { width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--indigo-100); color: var(--indigo-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
  font-size: 1.3rem; }

/* ============================= TAGS ===================================== */
.tag { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; padding: 0.18em 0.7em; border-radius: var(--radius-pill);
  border: 1px solid transparent; }
.tag-indigo { background: var(--indigo-100); color: var(--indigo-800); }
.tag-clay   { background: var(--clay-100);   color: var(--clay-600); }
.tag-moss   { background: var(--moss-100);   color: var(--moss-600); }   /* NEW / added */
.tag-amber  { background: var(--amber-100);  color: var(--amber-600); }  /* UPDATE / changed */
.tag-rust   { background: var(--rust-100);   color: var(--rust-600); }   /* BUG / fixed */

/* ======================= BLOG / EDITORIAL =============================== */
.post-meta { display: flex; gap: var(--space-3); align-items: center;
  font-size: var(--text-sm); color: var(--ink-500); }
.post-meta .dot::before { content: '·'; margin: 0 var(--space-1); }
.post-card { display: flex; flex-direction: column; gap: var(--space-3); }
.post-card .thumb { aspect-ratio: 16/9; border-radius: var(--radius-lg);
  background: var(--grad-brand);
  overflow: hidden; }
.post-card .thumb img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .35s ease;
}
.post-card:hover .thumb img { transform: scale(1.025); }
.post-card .thumb-illustration { color: var(--indigo-200); }
.post-thumb-svg { width: 100%; height: 100%; display: block; }
.post-thumb-grid { fill: none; stroke: currentColor; stroke-width: 1; opacity: .2; }
.post-thumb-line { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.post-thumb-surface { fill: rgba(168,184,230,.12); stroke: var(--indigo-200); stroke-width: 3; }
.post-thumb-flow { fill: rgba(16,24,47,.28); stroke: var(--indigo-200); stroke-width: 4; }
.post-thumb-points { fill: #fff; stroke: var(--indigo-400); stroke-width: 4; }
.prose { font-size: var(--text-md); line-height: 1.75; }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose blockquote { border-left: 3px solid var(--clay-500); margin: var(--space-6) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink-700); }

/* ==================== STRICT: CHANGELOG / RELEASES ====================== */
.release { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-6);
  padding: var(--space-8) 0; border-top: 1px solid var(--paper-200); }
.release:first-of-type { border-top: none; }
.release .version { font-family: var(--font-mono); font-weight: 600;
  font-size: var(--text-lg); color: var(--indigo-900); }
.release .version .release-product { margin-top: var(--space-2); }
.release .version .date { display: block; font-size: var(--text-xs);
  color: var(--ink-500); font-weight: 400; margin-top: var(--space-1); }
.release ul { list-style: none; padding: 0; margin: 0; }
.release li { padding: var(--space-2) 0; font-size: var(--text-sm);
  display: flex; gap: var(--space-3); align-items: baseline; }
.release li .tag { flex-shrink: 0; }
@media (max-width: 700px) { .release { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ========================= STRICT: DOCS ================================= */
.docs-shell { display: grid; grid-template-columns: 260px minmax(0,1fr) 200px;
  gap: var(--space-8); align-items: start; }
.docs-nav { position: sticky; top: 80px; font-size: var(--text-sm);
  max-height: calc(100vh - 100px); overflow-y: auto; padding-right: var(--space-3); }
.docs-nav .nav-group { font-weight: 650; color: var(--indigo-900);
  margin: var(--space-5) 0 var(--space-2); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; }
.docs-nav a { display: block; color: var(--ink-700); padding: 0.3rem var(--space-3);
  border-left: 2px solid var(--paper-200); }
.docs-nav a:hover { color: var(--indigo-700); text-decoration: none;
  border-left-color: var(--indigo-400); }
.docs-nav a.active { color: var(--indigo-900); font-weight: 600;
  border-left-color: var(--indigo-700); background: var(--indigo-050); }
.docs-toc { position: sticky; top: 80px; font-size: var(--text-xs); color: var(--ink-500); }
.docs-toc a { display: block; color: var(--ink-500); padding: 0.25rem 0; }
.breadcrumbs { font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--ink-500); margin-bottom: var(--space-5); }
.breadcrumbs a { color: var(--ink-500); }
@media (max-width: 1000px) { .docs-shell { grid-template-columns: 1fr; } .docs-nav, .docs-toc { position: static; } }

/* =========================== CALLOUTS =================================== */
.callout { border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm); margin: var(--space-5) 0; border: 1px solid; }
.callout-note { background: var(--indigo-050); border-color: var(--indigo-200); }
.callout-warn { background: var(--amber-100); border-color: #e3cf9e; }
.callout .callout-title { font-weight: 650; display: block; margin-bottom: var(--space-1); }

/* ============================ TABLES ==================================== */
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th { text-align: left; font-weight: 650; color: var(--indigo-900);
  border-bottom: 2px solid var(--paper-200); padding: var(--space-2) var(--space-3); }
table.data td { border-bottom: 1px solid var(--paper-200); padding: var(--space-2) var(--space-3); }
table.data tr:hover td { background: var(--paper-100); }

/* ============================ FOOTER ==================================== */
.site-footer { background: var(--indigo-950); color: var(--indigo-200);
  padding: var(--space-10) 0 var(--space-8); margin-top: var(--space-12);
  font-size: var(--text-sm); }
.site-footer a { color: var(--indigo-200); }
.site-footer a:hover { color: var(--oat-050); }
.site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.site-footer h4 { color: var(--oat-050); font-size: var(--text-sm); font-family: var(--font-body); }
.site-footer .footer-meta { margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--indigo-800); color: var(--indigo-400); font-size: var(--text-xs);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 800px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ====================== TEXTURE / DECOR ================================= */
/* Subtle warm grain for expressive heroes — cozy, not noisy */
.texture-dots { background-image: radial-gradient(var(--oat-300) 1px, transparent 1px);
  background-size: 22px 22px; }
.rule-clay { width: 56px; height: 3px; background: var(--clay-500);
  border-radius: 2px; margin-bottom: var(--space-5); }

/* ================== PORTAL OUTCOME PAGES ================================ */
/* Session expired, access denied, not found, unavailable. Served by the
   gateway and by Apache's ErrorDocument. These live HERE, not inline, because
   the gateway's CSP is `default-src 'self'` with no nonce and no
   'unsafe-inline' -- an inline <style> block is dropped by the browser and the
   page renders unstyled. */
    body.portal-outcome-page {
      min-height: 100vh; margin: 0; padding: 24px; display: grid; place-items: center;
      background: var(--grad-brand, linear-gradient(150deg, #172144, #3f5b9c 60%, #7a90d4));
      color: var(--oat-050, #faf8f2); font-family: var(--font-body, "Open Sans", sans-serif);
    }
    .portal-outcome-card {
      width: min(100%, 520px); padding: clamp(28px, 6vw, 52px);
      border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg, 16px);
      background: rgba(16,24,47,.94); box-shadow: 0 24px 80px rgba(9,15,43,.34);
    }
    .portal-outcome-card img { width: 182px; height: auto; margin-bottom: 32px; }
    .portal-outcome-card .eyebrow {
      margin: 0 0 12px; color: var(--indigo-300, #a8b8e6);
      font-family: var(--font-mono, monospace); font-size: .78rem;
      letter-spacing: .12em; text-transform: uppercase;
    }
    .portal-outcome-card h1 {
      margin: 0 0 14px; color: var(--oat-050, #faf8f2);
      font-family: var(--font-display, Georgia, serif); font-size: clamp(2rem, 6vw, 3rem);
      font-weight: 550; line-height: 1.12;
    }
    .portal-outcome-card p {
      margin: 0 0 28px; color: var(--indigo-200, #cdd6f1); line-height: 1.65;
    }
    .portal-outcome-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .portal-outcome-card .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: .7rem 1.3rem; border: 1px solid transparent;
      border-radius: var(--radius-pill, 999px); background: var(--clay-500, #3f5b9c);
      color: #fff; font: 600 .875rem var(--font-body, "Open Sans", sans-serif); text-decoration: none;
    }
    .portal-outcome-card .btn:hover { background: var(--clay-600, #30487f); }
    .portal-outcome-card .btn-quiet {
      background: transparent; border-color: rgba(255,255,255,.32);
      color: var(--indigo-200, #cdd6f1);
    }
    .portal-outcome-card .btn-quiet:hover {
      background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5);
    }