/* Architecture of Grace — head styles, extracted 2026-07-01 for caching/page-weight.
   Order preserved exactly as the original <style> blocks in <head>. */

/* ===== base ===== */
/* ============================================================
   ARCHITECTURE OF GRACE · UNIVERSAL CHECK-IN · v2
   Depth mode: 6-point + intensity + reflection
   ============================================================ */

:root {
  --navy:        #0A1E33;
  --navy-deep:   #06121F;
  --navy-soft:   #13314F;
  --gold:        #D9A33B;
  --gold-soft:   #F2C964;
  --gold-pale:   #F1DFA8;
  --cream:       #F4EEE2;
  --cream-deep:  #EDE6D6;
  --paper:       #FCF8F0;
  --ink:         #0A1E33;
  --ink-soft:    #46506E;
  --ink-faint:   #5C667E;   /* .30ed — was #646E86; 4.1:1 on cream-deep, now 4.6:1 */
  --rule:        #E4DAC5;
  --rule-soft:   #EFEADB;

  --green:       #2E6B3A;
  --green-bg:    #E8F0E7;
  --amber:       #7E5B18;   /* .30ed — was #8A6D1F; 4.08:1 on amber-bg, now 5.15:1 */
  --amber-bg:    #F5EAC8;
  --red:         #8B2A2A;
  --red-bg:      #F3DFDC;

  /* 6-step heatmap (frequency × intensity) */
  --heat-0: #E8F0E7;  /* never */
  --heat-1: #DEE9D6;  /* rarely */
  --heat-2: #F5EAC8;  /* sometimes */
  --heat-3: #F0D9A3;  /* often */
  --heat-4: #E8B07A;  /* very often */
  --heat-5: #C56A4C;  /* constantly */

  --shadow-sm:   0 1px 2px rgba(27,58,95,.06), 0 1px 3px rgba(27,58,95,.04);
  --shadow-md:   0 4px 6px -1px rgba(27,58,95,.08), 0 2px 4px -1px rgba(27,58,95,.04);
  --shadow-lg:   0 10px 25px -5px rgba(27,58,95,.12), 0 4px 10px -3px rgba(27,58,95,.06);
  --shadow-xl:   0 25px 50px -12px rgba(27,58,95,.18);

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;

  --font-serif:  "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ⚠ ADDED .4302 — --gold-deep was asked for by ~70 rules and never defined,
     so they all fell through to a #9a6f24 fallback that misses 4.5:1 on cream,
     and three rules asking for it with no fallback were invalid outright.
     DO NOT override either of these in the dark block: --gold-pale and --cream
     are not overridden there, so these chips keep a warm light ground in both
     themes and a dark value would put pale text back on pale ground. */
  --gold-deep:#7d5a15;
  --on-warm:#0A1E33;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Accessibility: respect reduced-motion preferences (matters for the autism-adapted audience) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Accessibility: clear keyboard focus indicator for anyone navigating without a mouse */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.response-option:focus-visible, .intensity-option:focus-visible, .mode-card:focus-visible { outline-offset: 3px; }
html { scroll-behavior: auto; overflow-x: clip; scrollbar-gutter: stable; } /* aog-still: was smooth */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(at 20% 0%, rgba(184,137,58,.04) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(27,58,95,.03) 0px, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.stage { position: relative; z-index: 1; min-height: 100vh; }

.serif { font-family: var(--font-serif); }
.display {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.display-xl { font-size: clamp(36px, 6vw, 64px); }
.display-lg { font-size: clamp(28px, 4vw, 42px); }
.display-md { font-size: clamp(22px, 3vw, 30px); }
.eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ink-soft);
  line-height: 1.45;
}
.small { font-size: 12.5px; color: var(--ink-faint); }
.muted { color: var(--ink-soft); }

.container { max-width: 880px; margin: 0 auto; padding: 32px 28px 120px; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 32px 28px 120px; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 28px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 110;
  background: #FDFCF7;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand-mark {
  width: 31px; height: 31px;
  background: var(--navy); color: var(--gold-soft);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 600; font-size: 16px;
  border-radius: 6px; box-shadow: var(--shadow-sm);
}
.brand-name {
  font-family: var(--font-serif); font-weight: 600; font-size: 16px;
  color: var(--navy); line-height: 1.1;
}
.brand-sub { font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.05em; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.topbar-back{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--navy); text-decoration:none; margin-right:16px; white-space:nowrap; cursor:pointer; }
.topbar-back .tb-arr{ color:var(--gold); font-weight:700; }
.topbar-back:hover{ color:var(--gold); }
:root[data-theme="dark"] .topbar-back{ color:var(--cream); }

.lang-toggle {
  display: inline-flex;
  background: var(--cream);
  border-radius: 999px; padding: 3px;
  border: 1px solid var(--rule);
}
.lang-toggle button {
  background: transparent; border: none;
  padding: 5px 12px; border-radius: 999px;
  color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 12px;
  transition: all 0.2s var(--ease);
}
.lang-toggle button.active {
  background: var(--navy); color: white;
  box-shadow: var(--shadow-sm);
}

.screen { display: none; animation: fadeIn 0.4s var(--ease-out); margin: 0; padding: 0; }
.screen.active { display: block; }
@keyframes fadeIn {
  /* Opacity-only: panels and screens settle in place instead of sliding up,
     so switching tabs/screens stays grounded (no vertical jump). */
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect the OS "reduce motion" setting: no fades, slides, or smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Welcome / Hero */
.hero { padding: 28px 0 8px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero h1 { margin-bottom: 16px; }
.hero .lede { max-width: 620px; margin-bottom: 32px; }

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0 36px;
}
.stat { background: var(--paper); padding: 18px 20px; text-align: center; }
.stat-num {
  font-family: var(--font-serif); font-size: 32px; font-weight: 600;
  color: var(--navy); line-height: 1; margin-bottom: 4px;
}
.stat-label {
  font-size: 11px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

/* Mode chooser */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0 32px;
}
@media (max-width: 720px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card {
  background: white;
  border: 2px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px 26px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.mode-left { flex: 0 0 210px; padding-right: 24px; border-right: 1px solid var(--rule-soft); }
.mode-right { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .mode-card { flex-direction: column; gap: 12px; }
  .mode-left { flex: none; padding-right: 0; border-right: none; border-bottom: 1px solid var(--rule-soft); padding-bottom: 10px; width: 100%; }
}
.mode-card:hover {
  border-color: var(--navy-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.mode-card.selected {
  border-color: var(--navy);
  background: var(--cream);
  box-shadow: var(--shadow-lg);
}
.mode-card.selected::before {
  content: "\2713";
  position: absolute;
  top: 18px; right: 22px;
  width: 28px; height: 28px;
  background: var(--gold);
  color: var(--on-warm);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
}
.mode-eyebrow {
  font-size: 11px; color: var(--gold); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 8px;
}
.mode-title {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.mode-time {
  font-family: var(--font-serif); font-style: italic;
  color: var(--gold); font-size: 15px;
  margin-bottom: 0;
}
.mode-desc {
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 10px;
}
.mode-features {
  list-style: none;
  font-size: 13px;
  color: var(--ink-soft);
}
.mode-features li {
  padding: 4px 0 4px 22px;
  position: relative;
}
.mode-features li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}

/* Script Card */
.checkin-reassure{ text-align:center; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--gold); margin:6px auto 0; max-width:560px; }
.made-with{ text-align:center; font-family:var(--font-serif); font-style:italic; font-size:16px; line-height:1.5; color:var(--navy-soft); max-width:540px; margin:20px auto 4px; opacity:.9; }
.made-with::before{ content:""; display:block; width:42px; height:1px; background:var(--gold); opacity:.7; margin:0 auto 14px; }
.share-card{ max-width:560px; margin:22px auto 0; background:var(--cream-deep,#F4EFE0); border:1px solid var(--rule,#E6DCC4); border-left:4px solid var(--gold); border-radius:14px; padding:18px 20px; }
.share-card-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.share-card-head h4{ font-family:var(--font-serif); font-size:18px; color:var(--navy); margin:0 0 4px; }
.share-card-head p{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0; }
.share-ico{ flex:0 0 auto; color:var(--gold); margin-top:2px; }
.share-qr{ width:206px; height:206px; margin:14px auto 8px; align-items:center; justify-content:center; background:#fff; border:1px solid var(--rule,#E6DCC4); border-radius:10px; padding:8px; }
.share-qr-msg{ text-align:center; color:var(--ink-soft); max-width:380px; margin:0 auto; }
@media print{ .share-card{ display:none !important; } }
/* .30ed — the ambient bloom is a screen thing. It was printing as a grey
   wash in the corner of every sheet the dashboard produces. */
@media print{ body::before{ display:none !important; content:none !important; } }
.script-card {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin: 24px 0;
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.script-card::before {
  content: "\201C";
  position: absolute;
  top: -20px; right: 12px;
  font-family: var(--font-serif);
  font-size: 140px;
  color: var(--gold);
  opacity: 0.12;
  line-height: 1; font-weight: 600;
}
.script-card p {
  margin: 10px 0;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
  position: relative;
}

/* Form */
.form-section {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 32px 0;
  box-shadow: var(--shadow-sm);
}
.form-section h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 18px;
  font-weight: 600;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .welcome-fields { grid-template-columns: 1fr !important; } }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label {
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  transition: all 0.15s var(--ease);
}
.field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: white;
  box-shadow: 0 0 0 3px rgba(27,58,95,.08);
}

/* Home / School context toggle (pseudonymity control) */
.ctx-block { margin-bottom: 24px; }
.ctx-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--cream-deep); border: 1.5px solid var(--rule); border-radius: 999px; }
.ctx-opt { border: none; background: transparent; cursor: pointer; padding: 9px 22px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; transition: all .18s var(--ease); }
.ctx-opt:hover { color: var(--navy); }
.ctx-opt.active { background: #1B3A5F !important; color: #fff !important; box-shadow: 0 1px 2px rgba(27,58,95,.10); }
.ctx-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; max-width: 62ch; }
.ctx-note strong { color: var(--navy); font-weight: 600; }

/* Buttons */
.nav-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; gap: 12px;
}
/* Keep Back/Next reachable when the intensity box expands the card */
.survey-stage .nav-row{
  position: sticky; bottom: 0; z-index: 6;
  background: var(--paper);
  margin-top: 18px; padding: 14px 0 16px;
}
.survey-stage .nav-row::before{
  content:""; position:absolute; left:0; right:0; top:-24px; height:24px;
  background:linear-gradient(to top, var(--paper), transparent); pointer-events:none;
}
.btn {
  background: var(--navy); color: white;
  border: 1.5px solid var(--navy);
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: 0.03em; cursor: pointer;
  transition: all 0.2s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover:not(:disabled) {
  background: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:disabled {
  background: var(--rule); border-color: var(--rule);
  color: var(--ink-faint); cursor: not-allowed;
}
.btn-secondary {
  background: transparent; color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--cream); color: var(--navy-deep);
}
.btn-ghost {
  background: transparent; color: var(--ink-soft);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--navy); background: var(--cream); }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.btn-danger { background: var(--red); border-color: var(--red);
  /* .30dx — --red lightens to #EC9B93 in dark, and this button's label
     comes from .btn as #fff: 2.17:1, measured. --aog-on is white in light
     and near-black in dark — the token that exists for exactly this. */
  color: var(--aog-on, #fff);
}
.btn-danger:hover { background: #6F1F1F; }
.btn-arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(2px); }

/* Primary conversion CTA — quiet gold prominence, reserved for the top
   "Begin Self-Reflection" / "Open Dashboard" actions. Everything else stays navy. */
.btn-cta {
  background: var(--gold); color: var(--navy);
  border-color: var(--gold); font-weight: 800;
  box-shadow: 0 8px 22px -8px rgba(176,127,38,.55);
}
.btn-cta:hover:not(:disabled) {
  background: var(--gold-soft); border-color: var(--gold-soft);
  color: var(--navy-deep);
}
:root[data-theme="dark"] .btn-cta { color: var(--navy); }

/* The word "Grace" — a reserved warm-gold accent for quiet prominence
   wherever the wordmark appears in body copy (hero already uses .foil). */
.grace-word { color: var(--gold-deep, #9a6f24); font-style: inherit; }
:root[data-theme="dark"] .grace-word { color: var(--gold-soft); }
.sf-nm .grace-word { color: var(--gold-soft); }


/* ============================================================
   SURVEY ITEM STYLES — v2 with 6-point scale + intensity
   ============================================================ */

.survey-stage { padding-top: 16px; }

.progress-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.progress-meta {
  font-size: 12px; color: var(--ink-faint); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.progress-track {
  flex: 1; height: 4px;
  background: var(--rule-soft);
  border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
  width: 0%;
  transition: width 0.5s var(--ease-out);
  border-radius: 2px;
}

.item-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 30px 34px 26px;
  box-shadow: var(--shadow-md);
  margin-bottom: 18px;
  animation: slideUp 0.35s var(--ease-out);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) { .item-card { padding: 28px 22px; } }

.domain-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream);
  border: 1px solid var(--gold-pale);
  color: var(--gold-deep);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 20px;
}
.domain-chip::before {
  content: ""; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%;
}
.item-text {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 20px;
  /* Reserve a stable height (~longest question) and center the text so the
     response options and Next button never shift as you move between questions. */
  min-height: 150px;
  display: flex;
  align-items: center;
}

/* Sticky survey/reflection action bar: keeps Back/Next always visible and stops
   the buttons from jumping when the intensity follow-up appears (every device). */
.survey-actions {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  margin-top: 18px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--rule);
  z-index: 30;
}
.survey-stage { padding-bottom: 6px; }
#intensityArea:not(:empty) { margin-top: 14px; }

/* 6-point response - one card per row on mobile, 3+3 grid on desktop */
.response-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
@media (max-width: 900px) { .response-grid-6 { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 560px) {
  .response-grid-6 { grid-template-columns: 1fr; gap: 14px; }
}

.response-option {
  background: var(--paper);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 10px;
  min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; text-align: center;
  transition: all 0.2s var(--ease);
  user-select: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.response-option:hover {
  border-color: var(--navy-soft);
  background: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.response-option.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
  box-shadow: 0 8px 18px -4px rgba(10,30,51,.32), 0 0 0 3px var(--gold-pale);
  transform: translateY(-2px);
}
.response-option.selected::after{
  content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--gold-soft);box-shadow:0 0 0 2px rgba(242,201,100,.3);
}
.response-option .freq-label {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  transition: color 0.2s var(--ease);
}
.response-option.selected .freq-label { color: white; }
.response-option .freq-hint {
  font-size: 10.5px; color: var(--ink-faint);
  font-style: italic;
  line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.response-option.selected .freq-hint { color: var(--gold-soft); }

/* Mobile: finger-friendly answer options (placed after base so it wins) */
@media (max-width: 560px) {
  .response-option {
    min-height: 64px;
    padding: 16px 20px 16px 56px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    border-radius: 14px;
    gap: 2px;
  }
  /* left-side radio indicator */
  .response-option::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--rule);
    background: #fff;
    transition: border-color .15s, background .15s;
  }
  .response-option.selected::before {
    border-color: var(--gold-soft);
    background: var(--gold-soft);
    box-shadow: inset 0 0 0 4px var(--navy);
  }
  .response-option .freq-label { font-size: 17px; font-weight: 600; margin-bottom: 0; }
  .response-option .freq-hint { font-size: 12.5px; margin: 0; padding: 0; text-align: left; max-width: none; }
  /* hide the old top-right corner dot on mobile; the radio replaces it */
  .response-option.selected::after { display: none; }
}

/* Intensity follow-up - appears below */
.intensity-block {
  background: var(--cream);
  border: 1px solid var(--gold-pale);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 20px;
  animation: slideUp 0.3s var(--ease-out);
}
.intensity-prompt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.4;
}
.intensity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 500px) { .intensity-grid { grid-template-columns: 1fr 1fr; } }
.intensity-option {
  background: white;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.2s var(--ease);
}
.intensity-option:hover {
  border-color: var(--gold);
  background: var(--cream-deep);
}
.intensity-option.selected {
  background: var(--gold);
  color: var(--on-warm);
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
}

/* Reflection screen */
.reflection-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}
@media (max-width: 600px) { .reflection-card { padding: 24px 22px; } }
.reflection-card .domain-chip { margin-bottom: 16px; }
.reflection-card h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.25;
}
.reflection-card p.prompt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 18px;
}
.reflection-card textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 110px;
  resize: vertical;
  transition: all 0.15s var(--ease);
}
.reflection-card textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: white;
  box-shadow: 0 0 0 3px rgba(27,58,95,.08);
}
.reflection-card .small { margin-top: 8px; }
.choice-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0; }
.choice-chip{ font-family:inherit; font-size:15px; line-height:1; padding:11px 16px; border-radius:999px; border:1.5px solid var(--rule); background:#fff; color:var(--ink); cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease; -webkit-appearance:none; appearance:none; }
.choice-chip:hover{ border-color:var(--gold); }
.choice-chip.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
:root[data-theme="dark"] .choice-chip{ background:#0E1822; border-color:var(--rule); color:var(--ink); }
:root[data-theme="dark"] .choice-chip:hover{ border-color:var(--gold); }
:root[data-theme="dark"] .choice-chip.on{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
@media (max-width:600px){ .choice-chip{ font-size:16px; padding:13px 16px; } }

/* Thanks / Farewell */
.thanks-stage { text-align: center; padding: 80px 20px; }
.thanks-mark {
  width: 80px; height: 80px;
  background: var(--gold); color: var(--on-warm);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  margin-bottom: 28px;
  font-family: var(--font-serif); font-size: 40px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: pop 0.5s var(--ease-out);
}
@keyframes pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.thanks-stage h1 { margin-bottom: 16px; }
.thanks-stage .lede { max-width: 480px; margin: 0 auto 32px; }


/* ============================================================
   DASHBOARD STYLES — v2
   ============================================================ */

.admin-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px; margin-bottom: 26px;
  flex-wrap: wrap; gap: 14px;
}
.admin-title { flex: 1 1 240px; min-width: 0; }
.admin-title h1 { margin-bottom: 6px; }
.admin-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-self: flex-start; max-width: 520px; }
.admin-actions .backend-status { font-size: 11px; padding: 4px 9px; opacity: .85; }
#tabHint { display: none; }

.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tab {
  background: transparent; border: none;
  padding: 12px 18px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink-faint); cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  /* Animate only color/underline — never layout — so the row can't shift or rewrap. */
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tab:hover { color: var(--navy); }
/* Active state reads through colour + gold underline (constant text weight = no horizontal reflow). */
.tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.tab-panel { display: none; animation: fadeIn 0.3s var(--ease-out); }
.tab-panel.active { display: block; }
.tab-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -20px 0 6px; flex-wrap: wrap; }
.tab-hint { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 0; }
.tab-help-btn { background: none; border: 1px solid var(--rule); color: var(--gold); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; padding: 5px 13px; border-radius: 999px; transition: all .15s var(--ease); }
.tab-help-btn:hover { background: var(--cream-deep, #F3ECDD); border-color: var(--gold); }
.tab-help { background:var(--rule-soft,#EFEADB); border: 1px solid var(--rule); border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 16px 20px; margin: 6px 0 22px; font-size: 14px; line-height: 1.6; color: var(--ink); box-shadow: var(--shadow-sm); }
.tab-help[hidden] { display: none; }
/* ===== Responsive dashboard chrome — keeps the educator view tidy from phone to fullscreen ===== */
@media (max-width: 1024px){
  #screen-admin .container-wide{ padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 760px){
  #screen-admin .container-wide{ padding: 18px 14px 88px; }
  /* Tab strip: compact so it wraps into a tidy block (overflow would clip the "More" dropdown) */
  #screen-admin .tabs{ gap: 2px 4px; margin-bottom: 16px; }
  #screen-admin .tab{ padding: 8px 11px; font-size: 13px; }
  /* Role selector: full-width, horizontally scrollable so the five roles never cram */
  #screen-admin .dash-roles{ gap: 8px; margin-bottom: 10px; }
  #screen-admin .dash-roles-lab{ flex-basis: 100%; }
  #screen-admin .dash-roles-seg{ width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #screen-admin .dash-roles-seg::-webkit-scrollbar{ display: none; }
  #screen-admin .dash-roles-seg .drole{ flex: 0 0 auto; }
  /* Top action buttons stack full-width and left-aligned */
  #screen-admin .admin-actions{ width: 100%; max-width: none; justify-content: flex-start; }
}
.tab-help h5 { font-family: var(--font-serif); font-size: 18px; color: var(--navy); margin: 0 0 6px; font-weight: 600; }
.tab-help strong { color: var(--navy); }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--navy); }
th.sorted { color: var(--navy); }
.sort-ind { color: var(--gold); font-size: 11px; }
.home-detail-head { font-family: var(--font-serif); font-size: 18px; color: var(--navy); margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.ov-summary {
  background:var(--rule-soft,#EFEADB);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 16px 20px; margin-bottom: 24px;
  font-size: 16px; line-height: 1.55; color: var(--ink);
}
.ov-summary strong { color: var(--navy); }
.kpi {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-label {
  font-size: 11px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; margin-bottom: 8px;
}
.kpi-value {
  font-family: var(--font-serif); font-size: 36px; font-weight: 600;
  color: var(--navy); line-height: 1; margin-bottom: 6px;
}
.kpi-sub { font-size: 12px; color: var(--ink-soft); }
.kpi-accent { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.accent-navy { background: var(--navy); }
.accent-gold { background: var(--gold); }
.accent-green { background: var(--green); }
.accent-amber { background: var(--amber); }
.accent-red { background: var(--red); }

.domain-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.domain-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.domain-card-title {
  font-family: var(--font-serif); font-size: 20px;
  color: var(--navy); font-weight: 600;
}
.domain-card-score {
  font-family: var(--font-serif); font-size: 32px; font-weight: 600;
  color: var(--navy);
}
.domain-card-score span { color: var(--ink-faint); font-size: 16px; }
.bar { height: 8px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; margin: 12px 0; }
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 100%);
  border-radius: 4px;
  transition: width 0.6s var(--ease-out);
}
/* ===== Dashboard "pop": band-colored, plain-language domain cards ===== */
.domain-card.dom-pop { border-radius: var(--radius-lg, 14px); }
.dom-pop .bar { height: 11px; margin: 12px 0 14px; }
.dom-pop .bar-fill { transform-origin: left center; animation: aogBarGrow 0.9s cubic-bezier(.16,1,.3,1) both; }
@keyframes aogBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dom-pop .domain-card-score { font-size: 40px; font-weight: 800; }
.dom-pop .domain-card-score span { font-size: 15px; font-weight: 600; }
.dom-band {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 800;
  letter-spacing: .03em; padding: 5px 13px; border-radius: 999px;
}
.dom-band::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* KPI numbers — bigger, bolder pop */
.kpi-value { font-size: 44px; font-weight: 800; line-height: 1.05; }
@media (prefers-reduced-motion: reduce){ .dom-pop .bar-fill { animation: none; } }

.dist-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.dist-bar {
  display: flex; height: 36px;
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dist-segment {
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 13px;
  transition: all 0.3s var(--ease);
  min-width: 0; overflow: hidden;
}
.dist-green { background: var(--green); }
.dist-amber { background: var(--amber); }
.dist-red   { background: var(--red); }
.dist-legend {
  display: flex; gap: 18px; margin-top: 12px;
  font-size: 13px; color: var(--ink-soft);
  flex-wrap: wrap;
}
.legend-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.dot-green { background: var(--green); }
.dot-amber { background: var(--amber); }
.dot-red   { background: var(--red); }

/* ===== P3 (2026-06-05) · OVERVIEW CHART TOGGLE (bar / radar / trend) ===== */
.ov-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ov-toggle{ display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; background:var(--paper,#fff); flex:0 0 auto; }
:root[data-theme="dark"] .ov-toggle{ background:#0E1822; }
.ovt-btn{
  font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:var(--ink-soft); background:transparent; border:none; padding:7px 15px; cursor:pointer;
  transition:background .15s,color .15s;
}
.ovt-btn + .ovt-btn{ border-left:1px solid var(--rule); }
.ovt-btn:hover{ color:var(--ink); }
.ovt-btn.active{ background:var(--gold); color:var(--navy); }
.domt-btn{ appearance:none; border:0; background:transparent; cursor:pointer; padding:6px 14px; font-family:Inter,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--ink-soft); transition:background .15s ease,color .15s ease; }
.domt-btn + .domt-btn{ border-left:1px solid var(--rule); }
.domt-btn:hover{ color:var(--ink); }
.domt-btn.active{ background:var(--navy); color:#fff; }
.dist-view{ padding:6px 4px 2px; }
/* CHART FRAME (2026-06): constant height so Bar/Dials/Trend switching stays put. */
.dist-chart{ min-height:164px; display:flex; flex-direction:column; justify-content:center; }
/* trend: per-window distribution rows */
.trend-grid{ display:flex; flex-direction:column; gap:10px; }
.trend-row{ display:flex; align-items:center; gap:12px; }
.trend-win{ flex:0 0 92px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.trend-bar{ flex:1; display:flex; height:30px; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.trend-n{ flex:0 0 auto; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:22px; text-align:right; }
@media (max-width:560px){ .trend-win{ flex-basis:64px; font-size:11.5px; } }

.table-card {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.table-card-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.table-card-head h3 {
  font-family: var(--font-serif); font-size: 19px; color: var(--ink);
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  background:var(--rule-soft,#EFEADB); color: var(--ink-soft);
  text-align: left; padding: 12px 16px; font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); }
tr:last-child td { border-bottom: none; }
/* AOG-HOVER-WASH-V1: a see-through gold wash, so a row never turns white under light text */
tr:hover td { background: rgba(201,162,74,.12); }

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-red   { background: var(--red-bg); color: var(--red); }

.filter-bar {
  display: flex; gap: 10px; margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: white;
  font-family: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; min-width: 140px;
}

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-faint); }
.empty-state .display-md { color: var(--ink-faint); margin-bottom: 8px; }

.backend-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.backend-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.backend-online .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(46,107,58,.15); }
.backend-offline .dot { background: var(--amber); }
.backend-online { color: var(--green); }
.backend-offline { color: var(--amber); }

.section-head { margin: 32px 0 16px; }
.section-head h2 {
  font-family: var(--font-serif); font-size: 24px;
  color: var(--navy); font-weight: 600; margin-bottom: 4px;
}

.hyb-foot{background:var(--navy);color:#C9D2DE;padding:56px 7vw 40px;margin-top:0}
.hyb-foot .sf-inner{max-width:1000px;margin:0 auto;text-align:center}
.hyb-foot .sf-brand{display:inline-flex;gap:12px;align-items:center;margin-bottom:18px}
.hyb-foot .sf-mk{width:42px;height:42px;background:linear-gradient(180deg,#F2C964,#D9A33B);color:var(--navy);display:grid;place-items:center;font-family:var(--font-serif);font-weight:700;font-size:22px;border-radius:6px}
.hyb-foot .sf-nm{font-family:var(--font-serif);font-weight:600;font-size:19px;color:var(--cream);text-align:left}
.hyb-foot .sf-sb{font-size:11.5px;color:#8FA0B5;text-align:left}
.hyb-foot .sf-mission{font-family:var(--font-sans);font-size:14px;line-height:1.6;max-width:620px;margin:0 auto 22px;color:#A9B6C7}
.hyb-foot .sf-pillars{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.hyb-foot .sf-pillars span{font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--gold-soft);border:1px solid rgba(242,201,100,.3);padding:6px 15px;border-radius:30px}
.hyb-foot .sf-links{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px}
.hyb-foot .sf-links a{color:#C9D2DE;text-decoration:none;font-family:var(--font-sans);font-size:13.5px;font-weight:500;transition:color .15s;cursor:pointer}
.hyb-foot .sf-links a:hover{color:var(--gold-soft)}
.hyb-foot .sf-social{display:flex;gap:14px;justify-content:center;margin-bottom:22px}
.hyb-foot .sf-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#A9B6C7;transition:all .15s}
.hyb-foot .sf-social a:hover{color:var(--navy);background:var(--gold-soft);border-color:var(--gold-soft);transform:translateY(-2px)}
.hyb-foot .sf-social svg{width:18px;height:18px}
.hyb-foot .sf-legal{font-family:var(--font-sans);font-size:11.5px;color:#7E8EA3;line-height:1.6;max-width:680px;margin:0 auto}
.hyb-foot .sf-made{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--gold-soft);margin-top:14px;letter-spacing:.01em}
@media (max-width:760px){ .hyb-foot{padding:44px 6vw 34px} .hyb-foot .sf-links{gap:16px 22px} }

/* Modal */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(18,40,67,.6);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  animation: fadeIn 0.25s var(--ease-out);
}
.modal-back.active { display: flex; }
.modal {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 440px; width: 92%;
  padding: 32px;
  box-shadow: var(--shadow-xl);
}
.modal h2 { font-family: var(--font-serif); color: var(--navy); margin-bottom: 8px; }
.modal p { color: var(--ink-soft); margin-bottom: 18px; font-size: 14px; }
.modal input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; margin-bottom: 16px;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ============================================================
   HOME VIEW — Heatmap + reflections + conversation guide
   ============================================================ */
.home-header {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.home-header-id .home-name {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
.home-header-id .small { color: var(--ink-soft); }
.home-header-scores { display: flex; gap: 24px; flex-wrap: wrap; }
.home-score {
  text-align: center;
  min-width: 70px;
}
.home-score .label {
  font-size: 10.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; margin-bottom: 4px;
}
.home-score .val {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 600;
  color: var(--navy); line-height: 1;
}
.home-score .max { color: var(--ink-faint); font-size: 14px; }

.home-domain-section {
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.home-domain-head {
  padding: 16px 24px;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.home-domain-name {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--navy);
  font-weight: 600;
}
.home-domain-score {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--navy);
  font-weight: 600;
}
.home-domain-score span { color: var(--ink-faint); font-size: 14px; }
/* Elegant per-domain progress bar (reflects the already-computed 0–100 score) */
.home-domain-bar { height: 7px; margin: 14px 24px 4px; background: rgba(10,30,51,.08); border-radius: 999px; overflow: hidden; }
.home-domain-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6B9080 0%, var(--gold) 100%); transition: width .7s cubic-bezier(.16,1,.3,1); }
@media (max-width:640px){ .home-domain-bar { margin: 12px 16px 4px; } }
:root[data-theme="dark"] .home-domain-bar { background: rgba(255,255,255,.10); }
/* ---- Collapsible domain sections (clear "open me" affordance) ---- */
.home-domain-head { cursor: pointer; user-select: none; transition: background .15s var(--ease, ease); }
.home-domain-head:hover { background: var(--cream-deep, #efe6d2); }
.home-domain-head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.home-domain-headL { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-domain-headR { display: flex; align-items: center; gap: 12px; }
.home-domain-count { font-family: var(--font-sans, system-ui); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-faint); background: rgba(10,30,51,.06); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.home-domain-chev { color: var(--gold-deep, #9a6f24); font-size: 15px; line-height: 1; transition: transform .25s var(--ease, ease); width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--gold, #D9A33B) 14%, transparent); flex: none; }
.home-domain-head:hover .home-domain-chev { background: color-mix(in srgb, var(--gold, #D9A33B) 26%, transparent); }
.home-domain-section.hd-collapsed .home-domain-chev { transform: rotate(-90deg); }
.home-domain-body { max-height: 6000px; opacity: 1; overflow: hidden; transition: max-height .35s var(--ease, ease), opacity .25s var(--ease, ease); }
.home-domain-section.hd-collapsed .home-domain-body { max-height: 0; opacity: 0; }
.home-domain-section.hd-collapsed .home-domain-bar { margin-bottom: 14px; }
.home-domain-tools { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 0 0 10px; }
.home-domain-tools .hd-allbtn { font-family: var(--font-sans, system-ui); font-size: 12px; font-weight: 700; color: var(--navy); background: white; border: 1.5px solid var(--rule); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: all .15s var(--ease, ease); }
.home-domain-tools .hd-allbtn:hover { border-color: var(--gold); color: var(--gold-deep, #8a6418); }
.home-domain-tools .hd-exportbtn { background: var(--navy); color: #fff; border-color: var(--navy); margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }
.home-domain-tools .hd-exportbtn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.home-domain-tools .hd-exportbtn svg { width: 13px; height: 13px; }
:root[data-theme="dark"] .home-domain-head:hover { background: var(--navy-soft); }
:root[data-theme="dark"] .home-domain-count { background: rgba(255,255,255,.08); color: var(--ink-soft); }
:root[data-theme="dark"] .home-domain-tools .hd-allbtn { background: var(--paper); color: var(--ink); }
@media print { .home-domain-section .home-domain-body { max-height: none !important; opacity: 1 !important; } .home-domain-chev, .home-domain-tools { display: none !important; } }
/* ---- Generic collapsible block (matches report domains) ---- */
.aog-coll { background: white; border: 1px solid var(--rule); border-radius: var(--radius-lg, 14px); margin: 18px 0; overflow: hidden; box-shadow: var(--shadow-sm); }
.aog-coll-head { width: 100%; text-align: left; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--cream); border: 0; border-bottom: 1px solid var(--rule); font-family: inherit; transition: background .15s var(--ease, ease); }
.aog-coll.hd-collapsed .aog-coll-head { border-bottom-color: transparent; }
.aog-coll-head:hover { background: var(--cream-deep, #efe6d2); }
.aog-coll-head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.aog-coll-title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--navy); }
.aog-coll-chev { color: var(--gold-deep, #9a6f24); font-size: 16px; line-height: 1; transition: transform .25s var(--ease, ease); width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--gold, #D9A33B) 16%, transparent); flex: none; }
.aog-coll-head:hover .aog-coll-chev { background: color-mix(in srgb, var(--gold, #D9A33B) 30%, transparent); }
.aog-coll.hd-collapsed .aog-coll-chev { transform: rotate(-90deg); }
.aog-coll-body { max-height: 8000px; opacity: 1; overflow: hidden; transition: max-height .4s var(--ease, ease), opacity .25s var(--ease, ease); }
.aog-coll.hd-collapsed .aog-coll-body { max-height: 0; opacity: 0; }
.aog-coll-body .home-conversation { background: transparent; border-left: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 18px 24px; }
.aog-coll-body .home-conversation > h4:first-child { display: none; }
:root[data-theme="dark"] .aog-coll-head:hover { background: var(--navy-soft); }
@media print { .aog-coll .aog-coll-body { max-height: none !important; opacity: 1 !important; } .aog-coll-chev { display: none !important; } }
/* Closed-loop callout — lowest domain mapped to its exact resources (dynamic) */
.home-cl { margin: 16px 0; padding: 18px 22px; background: var(--cream); border-left: 4px solid var(--gold); border-radius: var(--radius); }
.home-cl-ey { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.home-cl-body { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.home-cl-body strong { color: var(--navy); }
.home-cl-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; cursor: pointer; }
.home-cl-link:hover { color: var(--gold-deep,#9a6f24); }
:root[data-theme="dark"] .home-cl { background: #0E1822; }
:root[data-theme="dark"] .home-cl-body strong, :root[data-theme="dark"] .home-cl-link { color: var(--cream); }

/* The heatmap item row */
.home-item {
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  align-items: center;
}
.home-item:last-child { border-bottom: none; }
.home-item.has-books { cursor: pointer; }
.home-item .hi-toggle { display:inline-flex; align-items:center; gap:5px; margin-left:10px; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gold-deep,#9a6f24); white-space:nowrap; vertical-align:middle; background:#FBF1D6; border:1px solid var(--gold); border-radius:999px; padding:3px 11px; }
.home-item.has-books:hover .hi-toggle { background:#F3E6C6; }
.home-item .hi-chev { display:inline-block; transition:transform .2s; }
.home-item.open .hi-chev { transform:rotate(180deg); }
.home-item-detail { grid-column:1 / -1; display:none; margin:12px 0 2px; padding:14px 16px; background:#FBF7EC; border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:9px; }
.home-item.open .home-item-detail { display:block; }
.home-item .hid-con { font-family:var(--font-serif); font-size:15.5px; color:var(--navy); margin-bottom:8px; }
.home-item .hid-label { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.home-item .hid-novels { display:flex; flex-direction:column; gap:7px; }
.home-item .hid-novel { font-size:13px; line-height:1.45; color:var(--ink); }
.home-item .hid-bk { font-weight:700; color:var(--navy); }
.home-item-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faint);
  font-weight: 600;
}
.home-item-text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.home-item-text em.rev-tag {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cream-deep);
}

.heat-cell {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  min-width: 110px;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.06);
}
/* Phones: the item rows (number · text · frequency pill) were overflowing the right
   edge because the pill has a 110px min-width. Tighten padding/gap and let the pill
   size to its label so the row stays inside the card. */
@media (max-width:640px){
  .home-item{ padding:14px 12px; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; }
  .home-item-num{ font-size:14px; }
  .home-item-text{ font-size:13.5px; }
  .heat-cell{ min-width:0; padding:7px 10px; font-size:11.5px; }
}
.heat-0 { background: var(--heat-0); }
.heat-1 { background: var(--heat-1); }
.heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); }
.heat-4 { background: var(--heat-4); color: var(--on-warm); }
.heat-5 { background: var(--heat-5); color: var(--on-warm); }

/* Intensity marker on item row */
.intensity-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}
.intensity-badge strong { color: var(--gold); font-style: normal; font-weight: 700; }

/* Reflection display in Home View */
.home-reflection {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  padding: 16px 22px;
  margin: 12px 24px 16px;
  border-radius: var(--radius-sm);
}
.home-reflection .label {
  font-size: 10.5px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 6px;
}
.home-reflection .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.5;
}

/* ---- Closed-loop resource cards (results -> clickable, viewable) ---- */
.rc-wrap{ margin:22px 0 4px; }
.rc-head{ font-family:var(--font-serif); font-size:20px; color:var(--navy); margin-bottom:3px; }
.rc-sub-line{ font-size:12.5px; color:var(--ink-soft,#6b6256); margin-bottom:14px; }
.rc-card.rc-hero{ display:block; background:linear-gradient(135deg,var(--navy) 0%,#16314f 100%);
  color:#fff; border-radius:12px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,.06); }
.rc-card.rc-hero .rc-kind{ color:var(--gold-light,#E7B85E); }
.rc-card.rc-hero .rc-title{ color:#fff; font-size:18px; }
.rc-card.rc-hero .rc-sub{ color:rgba(255,255,255,.78); }
.rc-hero-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.rc-hero-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:13px; font-weight:700;
  padding:8px 15px; border-radius:8px; white-space:nowrap; transition:transform .12s, background .12s; }
.rc-hero-btn:hover{ transform:translateY(-1px); }
.rc-hero-story{ background:var(--gold-light,#E7B85E); color:#1a1a18; }
.rc-hero-story:hover{ background:#f2c977; }
.rc-hero-lesson{ background:transparent; color:#fff; border:1.5px solid var(--gold-light,#E7B85E); }
.rc-hero-lesson:hover{ background:rgba(231,184,94,.16); }
.rc-go.rc-locked{ display:inline-flex; align-items:center; background:transparent; color:var(--navy);
  border:1.5px solid var(--rule,#d9cdb2); font-weight:700; }
.rc-go.rc-locked:hover{ border-color:var(--gold); color:var(--gold-deep,#9a6f24); }
.rc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.rc-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--rule,#e7ddc9);
  border-left:3px solid var(--gold); border-radius:11px; padding:14px 15px; box-shadow:var(--shadow-sm); }
.rc-card .rc-kind{ font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.rc-card .rc-title{ font-family:var(--font-serif); font-size:16px; color:var(--navy); line-height:1.25; }
.rc-card .rc-sub{ font-size:12.5px; color:var(--ink-soft,#6b6256); line-height:1.45; margin-top:5px; flex:1; }
.rc-go{ align-self:flex-start; margin-top:12px; display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:7px; white-space:nowrap; }
.rc-free{ background:var(--navy); color:#fff; }
.rc-free:hover{ background:var(--navy-deep,#13283f); }
.rc-buy{ background:var(--gold); color:#1a1a18; font-weight:700; }
.rc-buy:hover{ background:var(--gold-deep,#a87a2e); }
.rc-lib{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.rc-lib:hover{ background:var(--navy); color:#fff; }
/* younger-band reference strip */
.yr-wrap{ margin-top:16px; padding:14px 16px; background:#FCF8EE; border:1px dashed var(--rule,#e7ddc9); border-radius:11px; }
.yr-head{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); }
.yr-note{ font-size:12px; color:var(--ink-soft,#6b6256); margin:3px 0 10px; line-height:1.45; }
.yr-row{ display:flex; align-items:baseline; gap:10px; padding:5px 0; flex-wrap:wrap; }
.yr-row + .yr-row{ border-top:1px solid #efe6d2; }
.yr-band{ flex:0 0 auto; min-width:52px; font-family:var(--font-serif); font-weight:600; color:var(--navy); font-size:14.5px; }
.yr-links{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.yr-link{ text-decoration:none; color:var(--navy); font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid var(--gold,#cdbfa3); background:#FCF6E6; }
.yr-link:hover{ background:#F3E6C6; }
.yr-link.yr-lib{ color:var(--ink-soft,#6b6256); font-weight:600; }
.yr-dot{ display:none; }
/* always-available accessibility door */
.rc-access{ margin-top:18px; padding-top:13px; border-top:1px solid var(--rule,#e7ddc9); font-size:13px; line-height:1.5; }
.rc-access-q{ color:var(--ink-soft,#6b6256); }
.rc-access-link{ color:var(--navy); font-weight:700; text-decoration:none; border-bottom:1px solid var(--gold); white-space:nowrap; }
.rc-access-link:hover{ color:var(--gold-deep,#9a6f24); }
/* clickable chapter chips inside the per-item "In the books" detail */
.home-item a.hid-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; color:var(--navy); padding:9px 12px; margin:3px 0;
  border:1px solid var(--rule); border-radius:8px; background:#fff; transition:background .12s, border-color .12s; }
.home-item a.hid-link:hover{ background:#FBF1D6; border-color:var(--gold); }
.home-item .hid-open{ display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.03em;
  color:#fff; background:var(--gold-deep,#9a6f24); padding:5px 12px; border-radius:999px; white-space:nowrap; }
/* Voices — public comment wall */
.hyb-voices{ padding:10px 7vw 6px; }
.wv-inner{ max-width:1000px; margin:0 auto; }
.wv-head{ text-align:center; margin-bottom:18px; }
.wv-title{ font-size:26px; color:var(--navy); margin:4px 0 0; }
.wv-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.wv-card{ background:#fff; border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:12px; padding:16px 18px; }
.wv-quote{ font-family:var(--font-serif); font-size:15.5px; line-height:1.55; color:var(--navy); margin-bottom:10px; }
.wv-by{ font-size:12.5px; color:var(--ink-soft); }
.wv-role{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); background:#FBF1D6; border:1px solid var(--gold); border-radius:999px; padding:1px 7px; margin-left:6px; }
.wv-empty{ text-align:center; color:var(--ink-soft); font-style:italic; font-size:14px; padding:6px 0; }
.wv-cta{ text-align:center; margin-top:16px; }
.wv-link{ color:var(--navy); font-weight:700; text-decoration:none; border-bottom:2px solid var(--gold); padding-bottom:2px; cursor:pointer; }
.wv-link:hover{ color:var(--gold-deep,#9a6f24); }
.voi-form{ background:#FCF8EE; border:1px solid var(--rule,#e7ddc9); border-radius:14px; padding:18px 18px 16px; margin-bottom:26px; }
.voi-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.voi-input{ font-family:var(--font-sans); font-size:14px; color:var(--navy); background:#fff; border:1px solid var(--rule,#cdbfa3); border-radius:9px; padding:10px 12px; }
.voi-row .voi-input{ flex:1; min-width:160px; }
.voi-select{ cursor:pointer; }
.voi-textarea{ width:100%; resize:vertical; line-height:1.5; }
.voi-formfoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap; }
.voi-count{ font-size:12px; color:var(--ink-soft,#6b6256); }
.voi-status{ font-size:13px; margin:8px 0 0; line-height:1.5; }
.voi-fineprint{ font-size:11.5px; color:var(--ink-soft,#6b6256); line-height:1.5; margin:10px 0 0; }
.voi-public{ font-size:12px; font-weight:600; color:var(--gold-strong,#8a6a25); margin:8px 0 2px; }
:root[data-theme="dark"] .voi-public{ color:var(--gold-soft); }
.voi-wall{ display:flex; flex-direction:column; gap:12px; }
.voi-card{ background:#fff; border:1px solid var(--rule,#e7ddc9); border-left:3px solid var(--gold); border-radius:11px; padding:14px 16px; }
.voi-card .voi-meta{ font-size:12px; color:var(--ink-soft,#6b6256); margin-bottom:5px; }
.voi-card .voi-who{ font-weight:700; color:var(--navy); }
.voi-card .voi-role{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); background:#FBF1D6; border:1px solid var(--gold); border-radius:999px; padding:1px 8px; margin-left:6px; }
.voi-card .voi-body{ font-family:var(--font-serif); font-size:15.5px; color:var(--navy); line-height:1.5; }
.voi-empty{ font-size:13.5px; color:var(--ink-soft,#6b6256); font-style:italic; }
.home-conversation {
  background: linear-gradient(180deg, #FBF6E8 0%, var(--cream-deep) 100%);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.home-conversation h4 {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--navy);
  margin-bottom: 10px;
}
.home-conversation p {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 12px;
}
.home-conversation ul { margin: 8px 0 12px 22px; }
.home-conversation li {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 8px;
}
.home-conversation li em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
}
.home-conversation .severity-block {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  border-left: 3px solid var(--red);
  color: var(--ink);
  font-size: 14px;
}
.home-conversation .severity-block strong { color: var(--red); }

/* ===== P4 (2026-06-05) · "NOW WHAT?" ACTION BLOCKS ====================
   One concrete next step per lower-scoring domain on the viewer's own
   report, so results never dead-end on data. ======================== */
.now-what{
  margin:14px 0 4px;
  padding:14px 16px 13px;
  border-radius:var(--radius-sm);
  background:var(--gold-pale, #FBF3DC);
  border-left:3px solid var(--gold);
}
:root[data-theme="dark"] .now-what{ background:rgba(242,201,100,.10); }
.now-what .nw-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.now-what .nw-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
.now-what .nw-kind{
  font-family:var(--font-sans);
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-strong, #9A7320);
}
:root[data-theme="dark"] .now-what .nw-kind{ color:var(--gold-soft); }
.now-what .nw-step{ font-size:14px; line-height:1.55; color:var(--ink); margin:0 0 8px; }
.now-what .nw-link{
  font-family:var(--font-sans); font-size:12.5px; font-weight:700;
  color:var(--navy); text-decoration:none;
}
:root[data-theme="dark"] .now-what .nw-link{ color:var(--gold-soft); }
.now-what .nw-link:hover{ text-decoration:underline; }

/* ============================================================
   GUIDE SUB-SECTIONS — Resource Index & Ecosystem
   ============================================================ */
.guide-subnav { position:sticky; top:var(--aog-topbar-h, 68px); z-index:40; background:var(--paper); display:flex; justify-content:center; gap:4px; border-bottom:1px solid var(--rule); margin-bottom:24px; flex-wrap:wrap; padding:8px 6px 0; box-shadow:0 4px 10px -8px rgba(10,30,51,.15); }
.guide-subtab {
  background:transparent; border:none; padding:10px 16px;
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--ink-faint); cursor:pointer;
  border-bottom:2.5px solid transparent; margin-bottom:-1px;
  transition:all .2s var(--ease);
}
.guide-subtab:hover { color:var(--navy); }
.guide-subtab.active { color:var(--navy); border-bottom-color:var(--gold); }

/* Resource Library (Downloads) accordion */
.lib-cat { border:1px solid var(--rule); border-radius:10px; margin-bottom:12px; overflow:hidden; background:#fff; }
.lib-cat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; cursor:pointer; user-select:none; background:var(--cream); }
.lib-cat-head:hover { background:#F1EADb; }
.lib-cat-title { font-weight:600; color:var(--navy); font-size:15.5px; }
.lib-cat-note { font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.lib-cat-count { font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.lib-chevron { transition:transform .18s ease; color:var(--gold); font-size:16px; line-height:1; }
.lib-cat.open .lib-chevron { transform:rotate(90deg); }
.lib-cat-body { display:none; padding:6px 20px 14px; }
.lib-cat.open .lib-cat-body { display:block; }
.lib-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 2px; border-top:1px solid var(--rule-soft); }
.lib-item:first-child { border-top:none; }
.lib-item-title { font-size:14px; color:var(--ink); }
.lib-dl { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:7px; background:var(--navy); color:#fff; font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap; }
.lib-dl:hover { background:var(--navy-deep,#13283f); }
.lib-soon { font-size:12px; color:var(--ink-soft); font-style:italic; white-space:nowrap; padding:7px 4px; }
.lib-soon-list { font-size:12px; line-height:1.7; color:#8a8268; padding:13px 2px 2px; border-top:1px dashed var(--line,#E3D9C4); margin-top:8px; }
.lib-soon-label { display:block; font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:#b09a63; margin-bottom:5px; }

/* Front doors on the welcome screen */
.front-doors { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; padding-top:26px; border-top:1px solid var(--rule); }
.foundation-wrap { margin-top:52px; }
.door { display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid var(--rule); border-radius:14px; background:#fff; text-decoration:none; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s; }
.door:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(27,58,95,.12); border-color:var(--gold); }
.door-icon { font-size:20px; line-height:1; width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:11px; }
.door-open .door-icon { color:var(--gold); background:rgba(184,137,58,.12); }
.door-locked .door-icon { color:var(--navy); background:rgba(27,58,95,.08); }
.door-text { flex:1; }
.door-title { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); }
.door-sub { font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin-top:3px; }
.door-arrow { color:var(--gold); font-size:18px; transition:transform .18s var(--ease-out); }
.door:hover .door-arrow { transform:translateX(4px); }
@media (max-width:640px){ .front-doors { grid-template-columns:1fr; } }
.front-doors-top { margin:0 0 34px; padding:0 0 28px; border-top:none; border-bottom:1px solid var(--rule); }

/* Graffiti brand mural on the welcome hero */
.aog-graffiti { max-width:760px; margin:2px 0 30px; animation:aogPop .75s cubic-bezier(.2,.8,.25,1) both; }
.aog-graffiti svg { width:100%; height:auto; max-width:100%; display:block; border-radius:22px; filter:drop-shadow(0 16px 38px rgba(14,32,49,.28)); }
@keyframes aogPop { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
@media (max-width:640px){ .aog-graffiti { margin-bottom:24px; } }

/* Welcome showcase row: door · GRAFFITI · door (little · big · little) */
.hero-showcase { display:grid; grid-template-columns:minmax(178px,0.92fr) minmax(0,3.5fr) minmax(178px,0.92fr); gap:18px; align-items:center; margin:6px 0 30px; }
.hero-showcase > * { min-width:0; }
.aog-graffiti-hero { max-width:none; margin:0; }
.hero-center { text-align:center; }
.hero-center .lede { margin-left:auto; margin-right:auto; }
.door-flank { flex-direction:column; text-align:center; align-items:center; justify-content:center; gap:11px; padding:24px 16px; height:100%; }
.door-flank .door-text { flex:none; }
.door-flank .door-icon { width:50px; height:50px; font-size:23px; }
.door-flank .door-title { font-size:16px; }
.door-flank .door-sub { font-size:12px; }
.door-flank .door-arrow { display:none; }
.door-flank:hover { transform:translateY(-4px); }
@media (max-width:860px){
  .hero-showcase { grid-template-columns:minmax(0,1fr); gap:14px; }
  .aog-graffiti-hero { order:-1; }
  .door-flank { flex-direction:row; text-align:left; align-items:center; justify-content:flex-start; height:auto; gap:14px; padding:18px 20px; }
  .door-flank .door-text { flex:1; min-width:0; }
  .door-flank .door-icon { width:44px; height:44px; font-size:20px; }
  .door-flank .door-arrow { display:block; }
}
.door-title { overflow-wrap:break-word; }

/* Interactive Ecosystem */
.eco-hero { margin:4px 0 22px; }
/* Bold hybrid Guide header */
#screen-guide .container-wide{padding-top:0 !important}
.guide-hero{background:radial-gradient(125% 150% at 50% 0%, #244D75 0%, #143049 55%, #07151F 100%);margin:-32px calc(50% - 50vw) 24px;padding:32px 7vw 28px;position:relative;overflow:hidden}
.guide-hero::before{content:"";position:absolute;top:-30%;right:-5%;width:55%;height:160%;background:radial-gradient(circle,rgba(242,201,100,.15),transparent 65%);pointer-events:none}
.guide-hero-inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:28px;position:relative}
.guide-hero-ey{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft)}
.guide-hero-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(40px,6vw,76px);line-height:.95;letter-spacing:-.02em;color:var(--cream);margin:12px 0 14px}
.guide-hero-lede{font-family:var(--font-sans);font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:#C2CEDD;max-width:680px}
.guide-hero-lede em{color:var(--gold-soft);font-style:italic}
.guide-hero-back{flex:0 0 auto;background:rgba(244,238,226,.10);border:1.5px solid rgba(242,201,100,.4);color:var(--cream);white-space:nowrap}
.guide-hero-back:hover{background:rgba(242,201,100,.16);transform:translateY(-2px)}
@media (max-width:760px){ .guide-hero{padding:44px 6vw 40px} .guide-hero-inner{flex-direction:column} .guide-hero-back{align-self:flex-start} }
.guide-slimbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:2px 0 14px; margin-bottom:16px; border-bottom:1px solid var(--rule); }
.guide-slim-label { font-size:14px; color:var(--ink-soft); }
.guide-slim-eyebrow { color:var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:11.5px; }
.eco-shell { background:linear-gradient(180deg,#fff, #FCFAF4); }
.eco-head { margin-bottom:2px; }
.eco-title { font-size:25px !important; margin:2px 0 6px !important; }
.eco-lede { font-size:13.5px !important; }
.eco-stage { margin-top:4px !important; gap:18px !important; }
.eco-canvas { width:100%; max-width:920px; margin:0 auto; }
.eco-detail { min-height:0 !important; }
.eco-head { text-align:center; max-width:620px; margin:0 auto 8px; }
.eco-title { font-size:30px; color:var(--navy); margin:2px 0 8px; letter-spacing:-.01em; }
.eco-lede { font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.eco-stage { display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:10px; }
.eco-canvas { min-width:0; }
#ecoSvg { width:100%; height:auto; display:block; }
/* P1 (2026): compress the ecosystem hero on wider screens so the Guide's tab row
   (.guide-subnav, already sticky) reaches the fold instead of sitting under a
   full-height diagram. Mobile keeps its existing full-width stacking untouched. */
@media (min-width:761px){
  /* tighten the navy title band */
  .guide-hero{ padding:28px 7vw 24px !important; }
  .guide-hero-title{ font-size:clamp(28px,4vw,44px); margin:8px 0 10px; }
  .guide-hero-lede{ font-size:15px; }
  /* compress the diagram block */
  .eco-hero{ margin:4px 0 12px; }
  .eco-hero .eco-shell{ padding:14px 30px 16px !important; }
  .eco-canvas{ max-width:620px; }
  #ecoSvg{ max-height:34vh; }
  .eco-stage{ gap:12px !important; }
  .eco-frame{ margin-top:12px; padding-top:12px; }
}
.eco-c1 { font-family:var(--serif); font-size:18px; font-weight:600; fill:var(--navy); letter-spacing:.06em; }
.eco-c2 { font-family:var(--sans,Inter,sans-serif); font-size:9.5px; fill:#9A7B3C; letter-spacing:.14em; text-transform:uppercase; }
.eco-elabel { font-family:var(--sans,Inter,sans-serif); font-size:10.5px; fill:#5C6678; font-style:italic; paint-order:stroke; stroke:#FCFAF4; stroke-width:4px; stroke-linejoin:round; }
.eco-elabel-g { fill:#8a6a1f; }
:root[data-theme="dark"] .eco-elabel{ stroke:var(--paper); }
.eco-ring { transform-box:fill-box; transform-origin:center; animation:ecoPulse 4.5s ease-in-out infinite; }
.eco-flow { animation:ecoDash 1.1s linear infinite; }
@keyframes ecoPulse { 0%,100%{ opacity:.5;} 50%{ opacity:.9;} }
@keyframes ecoDash { to { stroke-dashoffset:-26; } }
.eco-node { cursor:pointer; transition:transform .2s var(--ease-out); transform-box:fill-box; transform-origin:center; }
.eco-cardbox { fill:url(#ecoCard); stroke:#E0D7C2; stroke-width:1.25; filter:url(#ecoSoft); transition:stroke .2s, filter .2s; }
.eco-cardbox-hero { fill:url(#ecoHero); stroke:#D9A33B; stroke-width:2; }
.eco-name-hero { fill:#FFFFFF !important; }
.eco-role-hero { fill:#C2CEDD !important; }
.eco-live { animation:ecoBlink 2.6s ease-in-out infinite; }
@keyframes ecoBlink { 0%,100%{ opacity:.35;} 50%{ opacity:1;} }
.eco-tag { font-family:var(--sans,Inter,sans-serif); font-size:9.5px; font-weight:700; letter-spacing:.12em; }
.eco-name { font-family:var(--serif); font-size:15.5px; font-weight:600; fill:var(--navy); }
.eco-role { font-family:var(--sans,Inter,sans-serif); font-size:10px; fill:#7A8194; }
.eco-node:hover, .eco-node:focus, .eco-node.is-active { transform:translateY(-6px) scale(1.035); outline:none; }
.eco-node:focus-visible .eco-cardbox { stroke:var(--gold); stroke-width:3; }
.eco-node:hover .eco-cardbox, .eco-node:focus .eco-cardbox, .eco-node.is-active .eco-cardbox { stroke:var(--gold); stroke-width:2.75; filter:url(#ecoGlow); }
@keyframes ecoFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
.eco-detail { width:100%; max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:11px; padding:10px 20px; box-shadow:0 5px 16px rgba(27,58,95,.05); display:grid; grid-template-columns:minmax(135px,165px) 1fr; column-gap:20px; row-gap:1px; align-items:start; }
.eco-detail .ed-tag   { grid-column:1; grid-row:1; }
.eco-detail .ed-title { grid-column:1; grid-row:2; }
.eco-detail .ed-role  { grid-column:1; grid-row:3; }
.eco-detail .ed-blurb { grid-column:2; grid-row:1 / 4; align-self:center; }
.eco-detail .ed-go, .eco-detail .ed-hint { grid-column:2; grid-row:4; justify-self:start; }
.eco-detail .ed-tag { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.eco-detail .ed-title { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy); margin:2px 0 1px; }
.eco-detail .ed-role { font-size:11.5px; color:var(--ink-soft); margin-bottom:3px; }
.eco-detail .ed-blurb { font-size:12.5px; line-height:1.45; color:var(--ink); }
.eco-detail .ed-go { display:inline-flex; align-items:center; gap:6px; margin-top:7px; padding:6px 13px; border-radius:7px; background:var(--navy); color:#fff; font-size:12px; font-weight:500; text-decoration:none; cursor:pointer; transition:background .18s, transform .18s; border:none; }
.eco-detail .ed-go:hover { background:var(--navy-deep,#13283f); transform:translateX(3px); }
.eco-detail .ed-hint { font-size:11.5px; color:var(--ink-soft); font-style:italic; margin-top:6px; }
.eco-frame { font-size:13px; line-height:1.6; color:var(--ink-soft); margin-top:24px; padding-top:18px; border-top:1px solid var(--rule-soft); }
.eco-frame strong { color:var(--navy); }
@media (max-width:760px){ .eco-detail { display:block; } }
@media (min-width:1200px){ .eco-detail{ max-width:680px; padding:14px 26px; column-gap:26px; } }
.guide-section { display:none; }
.guide-section.active { display:block; animation:aogFadeIn .28s var(--ease, ease) both; }
.docpane:not([hidden]) { animation:aogFadeIn .24s var(--ease, ease) both; }
@keyframes aogFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .guide-section.active, .docpane:not([hidden]){ animation:none; } }

/* Resource Index inside guide */
.ri-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px; padding:14px; background:var(--cream); border:1px solid var(--rule); border-radius:var(--radius); }
.ri-toolbar input { flex:1; min-width:180px; padding:9px 13px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:white; font-family:inherit; font-size:14px; color:var(--ink); }
.ri-toolbar select { padding:9px 13px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:white; font-family:inherit; font-size:13px; color:var(--ink); cursor:pointer; }
.ri-toolbar input:focus, .ri-toolbar select:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,58,95,.08); }
/* Domain filter pills (filter the index by construct domain) */
.ri-pills { flex-basis:100%; display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.ri-pill { font-family:var(--font-sans); font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--ink-soft); background:white; border:1px solid var(--rule); border-radius:999px; padding:6px 14px; cursor:pointer; transition:background .15s var(--ease), color .15s, border-color .15s; }
.ri-pill:hover { border-color:var(--navy); }
.ri-pill .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.ri-pill .dot-A { background:#C45A3B; } .ri-pill .dot-B { background:#2E6B3A; } .ri-pill .dot-C { background:#2B4D7A; }
.ri-pill.is-active { background:var(--navy); color:white; border-color:var(--navy); }
.ri-pill.is-active .dot { box-shadow:0 0 0 2px rgba(255,255,255,.5); }
:root[data-theme="dark"] .ri-pill { background:var(--paper); color:var(--ink-soft); }
:root[data-theme="dark"] .ri-pill.is-active { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.ri-pill-empty { padding:18px; text-align:center; color:var(--ink-faint); font-size:14px; }

.ri-domain { margin-bottom:28px; }
.ri-domain-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; cursor:pointer; user-select:none; border-radius:12px; padding:6px 8px; margin-left:-8px; margin-right:-8px; transition:background .15s var(--ease); }
.ri-domain-head:hover { background:var(--cream); }
.ri-domain-head:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ri-badge { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-family:var(--font-serif); font-size:21px; font-weight:600; color:white; flex-shrink:0; position:relative; }
.ri-badge svg { width:21px; height:21px; }
.ri-badge-A { background:#C45A3B; }
.ri-badge-B { background:#2E6B3A; }
.ri-badge-C { background:#2B4D7A; }
.ri-domain-title { font-family:var(--font-serif); font-size:21px; font-weight:600; color:var(--navy); line-height:1.1; }
.ri-domain-sub { font-size:12px; color:var(--ink-faint); }
.ri-domain-count { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); background:var(--cream-deep); border-radius:999px; padding:2px 9px; margin-left:2px; white-space:nowrap; }
.ri-domain-chev { margin-left:auto; color:var(--ink-faint); font-size:15px; transition:transform .25s var(--ease); flex-shrink:0; }
.ri-domain.ri-collapsed .ri-domain-chev { transform:rotate(-90deg); }
.ri-domain-cards { transition:max-height .3s var(--ease), opacity .2s var(--ease); overflow:hidden; }
.ri-domain.ri-collapsed .ri-domain-cards { max-height:0 !important; opacity:0; pointer-events:none; }
:root[data-theme="dark"] .ri-domain-head:hover { background:var(--navy-soft); }
:root[data-theme="dark"] .ri-domain-count { background:var(--navy-soft); color:var(--ink-soft); }

.ri-card { background:white; border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.ri-card-head { padding:14px 18px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:background .15s var(--ease); }
.ri-card-head:hover { background:var(--cream); }
.ri-card-left { display:flex; align-items:center; gap:12px; }
.ri-tag { font-family:var(--font-serif); font-style:italic; font-size:13px; font-weight:600; color:white; padding:3px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.ri-tag-A { background:#C45A3B; }
.ri-tag-B { background:#2E6B3A; }
.ri-tag-C { background:#2B4D7A; }
.ri-name { font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--navy); line-height:1.2; }
.ri-flag { font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.ri-chev { color:var(--ink-faint); font-size:16px; transition:transform .25s var(--ease); flex-shrink:0; }
.ri-card.open .ri-chev { transform:rotate(180deg); }
.ri-body { max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.ri-card.open .ri-body { max-height:2600px; }
/* CLOSED-LOOP DEEP LINK (2026-06) */
.ri-card.ri-hit{ box-shadow:0 0 0 3px var(--gold,#B8893A); border-color:var(--gold,#B8893A); animation:riHitPulse 2.2s var(--ease,ease); }
@keyframes riHitPulse{ 0%{box-shadow:0 0 0 0 rgba(184,137,58,.55);} 25%{box-shadow:0 0 0 5px rgba(184,137,58,.40);} 100%{box-shadow:0 0 0 3px rgba(184,137,58,.0);} }
@media (prefers-reduced-motion: reduce){ .ri-card.ri-hit{ animation:none; } }
.ri-book.ri-book-hit{ border-radius:8px; box-shadow:0 0 0 3px var(--gold,#B8893A); background:var(--gold-pale,#FBF3DF); animation:riBookHit 2.4s var(--ease,ease); }
@keyframes riBookHit{ 0%{box-shadow:0 0 0 0 rgba(184,137,58,.6);} 22%{box-shadow:0 0 0 5px rgba(184,137,58,.42);} 100%{box-shadow:0 0 0 3px rgba(184,137,58,0);} }
@media (prefers-reduced-motion: reduce){ .ri-book.ri-book-hit{ animation:none; } }
.nw-links{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.hd-teach-link,.ov-teach-link{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:800; color:var(--gold-deep,#9a6f24); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
:root[data-theme="dark"] .hd-teach-link,:root[data-theme="dark"] .ov-teach-link{ color:var(--gold-soft); }
.hd-teach-link:hover,.ov-teach-link:hover{ text-decoration-thickness:2.5px; }
/* Scope line under Recommended focus (2026-08-27): says what the card counted,
   so it can never silently disagree with Today's Picture. */
.hd-teach-scope,.ov-teach-scope{ margin-top:7px; font-size:12.5px; line-height:1.45; color:var(--ink-soft,#46506E); font-variant-numeric:tabular-nums; }

/* In-the-novels block inside a construct card */
.ri-novels { margin-top:14px; padding-top:14px; border-top:1px dashed var(--gold); }
.ri-novels-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.ri-novels-list { display:flex; flex-wrap:wrap; gap:8px; }
.ri-novel { font-size:12.5px; color:var(--ink); background:var(--rule-soft,#EFEADB); border:1px solid #ECE3CC; border-radius:8px; padding:6px 10px; line-height:1.35; }
.ri-novel-bk { font-weight:600; color:var(--navy); }
.ri-inner { padding:0 18px 18px; }
.ri-what { font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; padding-top:14px; border-top:1px solid var(--rule-soft); }
.ri-what strong { color:var(--ink); }
.ri-book { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:10px 0; border-bottom:1px solid var(--rule-soft); }
.ri-book:last-child { border-bottom:none; }
.ri-chip { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); background:var(--cream-deep); border:1px solid var(--rule); padding:5px 9px; border-radius:6px; white-space:nowrap; text-align:center; min-width:108px; }
.ri-chip-grade { display:block; font-size:9.5px; color:var(--ink-faint); font-weight:600; margin-top:2px; }
.ri-res { font-size:13.5px; color:var(--ink); line-height:1.5; }
.ri-res .loc { font-weight:600; color:var(--navy); }
.ri-res .res { color:var(--ink-soft); }
/* Clickable resource rows — open the lesson/story preview, like the results page */
a.ri-book.ri-book-link { grid-template-columns:auto 1fr auto; text-decoration:none; cursor:pointer; border-radius:8px; margin:0 -8px; padding:10px 8px; transition:background .15s ease, box-shadow .15s ease; }
a.ri-book.ri-book-link:hover { background:var(--gold-pale,#FBF3DF); box-shadow:inset 3px 0 0 var(--gold); }
a.ri-book.ri-book-link .ri-open { align-self:center; color:var(--gold); font-weight:700; font-size:13px; opacity:.5; transition:opacity .15s ease, transform .15s ease; }
a.ri-book.ri-book-link:hover .ri-open { opacity:1; transform:translate(2px,-2px); }
a.ri-novel.ri-novel-link { display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease; }
a.ri-novel.ri-novel-link:hover { background:var(--gold-pale,#FBF3DF); border-color:var(--gold); transform:translateY(-1px); }
a.ri-novel.ri-novel-link .ri-open { color:var(--gold); font-weight:700; font-size:12px; opacity:.6; transition:opacity .15s ease; }
a.ri-novel.ri-novel-link:hover .ri-open { opacity:1; }
.ri-empty { text-align:center; padding:40px 20px; color:var(--ink-faint); }
.ri-nextstep { margin-top:26px; padding:22px 24px; background:linear-gradient(165deg,#FFF8E8,#F6EAC9); border:1px solid var(--gold-pale); border-radius:16px; text-align:center; }
:root[data-theme="dark"] .ri-nextstep { background:var(--navy-soft); border-color:rgba(242,201,100,.25); }
.ri-nextstep-t { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--navy); margin-bottom:14px; }
:root[data-theme="dark"] .ri-nextstep-t { color:var(--gold-soft); }
.ri-nextstep-cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Ecosystem layers inside guide */
.eco-layers { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
@media (max-width:680px){ .eco-layers{ grid-template-columns:1fr; } }
.eco-layer { border-radius:var(--radius); padding:18px 20px; border:1px solid var(--rule); background:var(--cream); }
.eco-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:5px; color:white; margin-bottom:10px; }
.eco-layer-title { font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--navy); line-height:1.15; margin-bottom:4px; }
.eco-layer-role { font-size:12.5px; color:var(--ink-soft); }
#ecoDiagram svg { width:100%; height:auto; display:block; }

/* ===== MOBILE UI FIXES (Thursday update) ===== */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar .brand { order: -1; width: 100%; text-align: center; }
  .hero h1 { font-size: clamp(28px, 8vw, 42px); }
  .hero .lede { font-size: 16px; }
  .hero-showcase { grid-template-columns: 1fr; gap: 12px; }
  .tool-card { padding: 18px 14px; }
  .item-card { padding: 24px 18px; }
}

/* ===== DARK MODE — family content text fix ===== */
:root[data-theme="dark"] .family-content,
:root[data-theme="dark"] .family-content p,
:root[data-theme="dark"] .family-content h2,
:root[data-theme="dark"] .family-content h3,
:root[data-theme="dark"] #screen-family .lede,
:root[data-theme="dark"] #screen-family p {
  color: var(--cream) !important;
}

/* ===== TEACHER TOOLS SCREEN ===== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0 40px;
}
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .tools-grid { grid-template-columns: 1fr; }
}
/* Top feature pair: Co-Regulation + Beyond "Fine" — side-by-side on desktop,
   stacked on phones for big, thumb-friendly cards. */
.aog-top-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto 24px;
}
.aog-top-pair .tool-card { margin: 0; max-width: none; height: 100%; }
@media (max-width: 700px) {
  .aog-top-pair { grid-template-columns: 1fr; max-width: 520px; gap: 16px; }
}
.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 24px 16px 20px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
:root[data-theme="dark"] .tool-card { background: var(--navy-soft); border-color: rgba(255,255,255,.1); }
.tool-icon { font-size: 42px; margin-bottom: 16px; }
.tool-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; line-height: 1.3; }
:root[data-theme="dark"] .tool-title { color: var(--cream); }
.tool-desc { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 12px; line-height: 1.4; }

/* ===== PECS CARDS SCREEN ===== */
.pecs-screen { background: linear-gradient(180deg, #F8F4EB 0%, var(--cream-deep) 100%); min-height: 100vh; padding-bottom: 80px; }
:root[data-theme="dark"] .pecs-screen { background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%); }
.pecs-category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.pecs-tab { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--rule); background: white; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
:root[data-theme="dark"] .pecs-tab { background: var(--navy-soft); border-color: rgba(255,255,255,.15); color: var(--cream); }
.pecs-tab.active { background: var(--navy); color: white; border-color: var(--navy); }
:root[data-theme="dark"] .pecs-tab.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pecs-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin: 16px 0 32px; }
.pecs-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border: 2px solid var(--rule); border-radius: var(--radius); padding: 12px 8px; cursor: pointer; transition: all 0.15s var(--ease); text-align: center; user-select: none; }
:root[data-theme="dark"] .pecs-card { background: var(--navy-soft); border-color: rgba(255,255,255,.12); }
.pecs-card:hover, .pecs-card:focus { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pecs-card-icon { font-size: 36px; line-height: 1; margin-bottom: 6px; }
.pecs-card-label { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.2; }
:root[data-theme="dark"] .pecs-card-label { color: var(--cream); }
.pecs-strip-wrap { background: var(--cream-deep); border: 2px dashed var(--gold); border-radius: var(--radius-lg); padding: 12px; margin: 0 0 16px; min-height: 90px; }
:root[data-theme="dark"] .pecs-strip-wrap { background: rgba(255,255,255,.04); }
.pecs-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 60px; }
.pecs-strip-card { position: relative; display: flex; flex-direction: column; align-items: center; background: white; border: 2px solid var(--gold); border-radius: var(--radius); padding: 8px 6px; min-width: 72px; text-align: center; }
:root[data-theme="dark"] .pecs-strip-card { background: var(--navy-soft); }
.pecs-strip-card .remove-btn { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: white; border: none; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pecs-empty-strip { color: var(--ink-faint); font-style: italic; font-size: 13px; text-align: center; padding: 12px; width: 100%; }

/* ===== base ===== */
@font-face{font-family:'Rubik Wet Paint';font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAA2AAA4AAAAAHBgAAA0tAAIzMwAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgSocMAZgAFQRCAqtSKEwATYCJAMYCw4ABCAFg3AHIBv9FKOifnBWDLK/WuCmKLi8yBegYcJcIzdYMCGCRDDBJd0fT6q/tt9wbPP5pzn7e9+bmTjMG0mAsmwyMaCWZNDC2SZo61jQlUBFfIUV0y9iWh7yb+/uB2GgAQdaCbYFbW1FlFKmCbSzcolKbkn0E6ZXakGlIVoa94QZ0Ft6onunL64FpuNMALTVWqlEvVSW9xKcCSRPW9gCEkDvCMj3A9z8hwHIauvre/eqVM5YKD/MMGMxAxwUwkPIl+7L9t15Stn6WWsCFALzCmiMuicrAgWoBRCXFYEe++01E140m4WF52HvfW09CIhy1gpEevijQNga/cS8bplC3b2fPIwGGgCXL8O9MAG8juOHEYS3KI1AUif0lFoYMEEv7/4DV/EHbWf/xui8hBBZCBMRA5L2LiSwcSHrV1lDrnXOXUvH0SJqecuxZFbLC/FAo/vEk7OAzddH4aYUPdDa03tt27cBH0TFRHtFGYA28HR+VPTivS5Jis3Q6x0SPU2Zo1hs11QMGjZqg0jH335ZvT7g/d7nLVGEetZl9QMGTJaI54MjzSygEhNYrH+mVrevphkB/fJz2u41goHLVzcPoSPSNxMpDcioHbzxQEIqPafdDoczcLq7/a4usN52owh/Gjd9M4SoWVqVwno4KLuDUtFzK6VL0wekeQ93DkFRi5nuumAppEi8aUIJeVtoB2sujckIhWx6/WRpmWEYeJ2qNJVz1ds1GVJJjnNJCpXHNmc+PQOYT1QEKUl0DPPMtQ/91Rq57+O8VWh86W1zGf5l+9t77ax1tbfUN4307sgNMWjA+LRqY5AE36tSH3ttq9Lj9Dv8QchCkBCiqy273olpNL65CSl0bjOsTAJgdfsjzjlavO1emK4NHVoNnM8o6qGRGyc7Hp70FZmRI4L1GbPVGxYFbWfa5IumT2/KfffuROx+5g2gc/P3W/+1f8OcPVexEZAfjTGIoSwyZdy2qLsxQDlIRbLqzYeH9ptL4NSCNDiiD5OA+rIiIWnRSoPWiM8YffbNWnkN3FFeQVSXuwIFQUagXiMpo/bzfzlR0gYi6nRr1Zppj1JWP0Fw/YVn/Arwm08lMrBdKIPN0tdkp4vMouM6aNn4oUA81KhBOkdxHm8RiUDo5hTCkp23Oxl5oryW1t6a2S6n8cpjU7EuKEhh28btaJ8eD10gBYSgTl+PdSsUagH4tRkKtdvPreGXT90LjRRI5KxVCRHdX3FJq+ZyXjDBCjMbJwFmH/bxKHz1TS+zy0A1rPCqE+0tBIXEPFTI1mYJwkFcV2ymiitHRb7RIXFPQ4+3Xh+GmC8kkiOKdHJ0x1VJw/T+UlldDyP0sVqVzDVhrYxG0hNWJGRFMmbjBM48vKQclI6Jedd4KmW0T9Toc0UwRnGB40myD7LXlsYldbofEPPZwHDEjhOsxZav5mIq71JLN9NFA0fJg5sTgYrYmu+9XHpq5YgZ33x6tfbELA+eoOK/NrOlasYbCEtTYAC57gqw2BHE0mcd64dC9k6o4+bHtu85t2/0Yb1fJ/8Y+t2dQ+OWgUOhiNbRlWR19MaIaZKT0eQOa8gFSnmo+2wWOhvw4Fe9Bh2UNXRqHpkQOR+2jMnNSxK1Q0wfZLWf25+VTyub7vcaJDk/OG5sJR/acAiEjCpkkQeN8s08V8lDXX9XMgBEaXanhrUXesKMh5MwShq8wiazQg+jYe0AA5oJvjqaB75QnfQnllAEyssE8D9iCjKKcfHBKOgFA1UCIkvDgcCyssh+8LOJ6HcqDo/Ia0viu+4tZ7q2R5nfi4XxrB6G2v89J9eHzNDOsZ3f7gzLhp7jjEbmYKtd/WPqb8RM7BTX0WM9grTfrYgshIhaJI0NRaV/wk+tGQqaj/5te3ZLXHYoj7oSuiXCygtpHXd17P/mQvex0TlVJVJB0cAEAyrhZQnktuQ2VkFA4db0cujVaVvqUbeaz2xy8mJIkRAvp3oZ1Ge1d9q/UnCFm3ActyGzKSOEGgZt9E72UkDYApQUNqExWHTmMwc/X+u7fWPP8VGOaAW/c2t806W16w9tylMKW8ASjYkm2SwOVSfP04aA1ZFSDBtNLHJFY/PQpfRNphtXWQpHuH3OmOyyMgPKziXG8wSM/jg0rtywrnG8VW5wZryK+f9On1c0Nau0eSfTqvPu7Iv/vtx9dBSE7fkmQJKZSEaThTWiI98JgeSQ6g7ofU58E1K1wVsWSNp52+6i/0jlxt62gXx7zwt32F9vr8a/ET2RnNx5KS/sNuq8laAtc9sTdBmv/vhs25EXFTY+7Bfumvv4HqdNuzZz4sW0RXxrIr5Vxh29Py4TNiRBEpzWHygE250Gu3Xd/n5IbQqtEsSju6vWcIq+4h0+E8VEYn3i3bLNaZv1oCDilkrttAvFIoj0hjR8KS1l522CSz+9yQZNoSF6a+SDb1yxHNXnnAPwFIoI6ZEra+OJsAgyRf+9U686fSpp3qxC6Kvxkf7WSuS+bKsgryoU6+tgKy0gCW4f+fv8ez50d2G6QZrj8v51T519Wd+RE6QBaoaEpCIs36MQlCZKPOZPXhhSw6mx6AB3YerbN+o3l0/849iyd3LynZMwTY8QAtJUGgQ8adlD2YXTT1KBgCKkZkqTlkmx44ZOe76CFJu0xvRoGrtMoYo9FjXT8zpJkuxs649YsSvq1odFWAvq0Cghc/Kewx8KDDze0ZF38tIZnTIFKi8Yxhv1h0WhFqpWdRHQcrUzGyO9ANgVTsTD7vvjK0ajYedbWki04tQtjqPrYYeAnEpx0GKnBcXh14zs65jrUEifhGma1WThlpSiul05K93g3E03bg4ZERckMNp90+ivZJcDPebChRbWukXu2u7cfhL0FeN1Aa1BYyub5k970VSsdPp8r6b7DFvcOgBSPbMLxXB1qvtFL+odWIqQJKFsZW/e+jtKVXlJRSkIiCJIWJipKpAE6wyjhSXO9xxsePWXmDbtIZDpgSWSIpQ4bqxwdVfbrw6rl3z5MeWbzIhQsqVl5u662hoDgWwuEjhUTL2i7nRQjWSXzbL2y/DYqepI8LSM6HqCIAkFvgvKLJIo1ca1Wmxx8eXj5Ycq5cfKtVs8CZH0Xz6+9OJa4YHyg423nMwtn/X7fh350kuJSSvdqBlR4xrNEMIm2f0IyckPV078+6byGyvlhyvL1lFdFMyxW8o3xW9a/PTJE4ll4Qu/r2BMCM9UVK4w8KKj1rDyZ3z/9iFlMoVOCea25gS0TU42u38gvLjdf9GPrde2QCmQzDjdaXKCsXAsmHJb27WIpJEM6rSpJNDoTDqzQSYJl7HmaPvGTaIrOdCpstjLOYIk6NCJZhGnq9kb/N09MeFZnZrD4OBdHj2qoha0GxjiWu7gg1cdmlnuzfa5nWu2ry/Wh6xgqxMu3faqORDWsHrRXf4sYiGnJsdksfxAYakK8tBY4Q3Dz3RT2RudW3K6MKQhFEAoYXqwCAHoptBJAilTAbq5+LOjgZfWKi8yREGU7yiVHqwMnK08HjxZHVHBPksy+NSJm7sOra1I554PjG4zKEU22a3Su0pmQSxWhzr6MhzoIkiSRszwQ05DQ1rhbPRA5dHiJ555ehqEl57xp3ZDJMvKqDcCo3Emaag8XPaKuPQGyzhqglRCCGrJLm96+kgBHoYhcLC/Tq8LToWVHogZjVOzF5/9klZbGSm4sVAqdKixMBTeFlv3tobsRrsziPe50hVDyu5x/tN1aJiehyuvbIFJPmbCEbCR2WPH6/NM0AZp+RxHSGuSDaYXlnrENTxz2LJHShAg6+vNQHqnb+gyZyFtWr43XUqXk+NF2dx8hWhUAU9BnR4NaYZCUNhSoquoLnrssISy83b+cG7jY5td1TdPh4cFANJVwrVyu4WyRd5Wab1yjU1iXYgPhxPt3VSgaQ7DNrMA2ei0U1dIkS5lXArDqoKeqXfGDSc6cOtcyKhz4SmRsWzAhm0DN4kbX3187LbK4kNLNHckF/916/b7O3YujWvlF/S/66iXnmr++cQQQGJbbqY7dcmq2tz8sfOwAMWzSDE1nIo9HrY65QNPXNj4og12p4Qj7FsuVfRjD32oz2kyIqdu87849sLSm8ZeXDahV61iy3uHFRRBGq5tJhuLsgDBrOnwjKmynSBpNAEAgAAx+YG3fa++rr7/b0EpfwnA90vv/971+Z27L1xO/z+ufa19BxgEh/53JfnnVPzvxUF4PPkcI99hLP9Cfo+XT+vOP5XOL+tGbaSZCDO3hXhYajEB8yR2HvDu4NlILd7dKNT5ZqN0lZ83atZEplHXFBNfZmiPgwYdcdQ5x+2zx14nJZUUaF/SFBPZNTPhlKVcPKDjyBUPlunb5TjFnUzrMccdsZ938PZVnLriXrbvuBPv1NqktPHoW986a1O3x75c1SCu4fi9Rxyy1jaLtlntrHPOW9th26tvtomDMyyfFAIXmdrDTpqo3eOUg3PHlawBM1DQ18H1vhA4j1u3rFYv0sltSZunxcMTOd4RhxPdXlZnVko6uvy2SgAA) format('woff2');}

/* ===== base ===== */
.lib-item{ align-items:flex-start; }
.lib-item-main{ flex:1; padding-right:14px; }
.lib-item-desc{ font-size:12px; line-height:1.45; color:#6b6552; margin-top:3px; }
.lib-tie{ display:inline-block; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#7a5a1c; background:#FBE7AC; padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:6px; white-space:nowrap; }
.lib-preview-pill{ display:inline-block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--on-warm); background:var(--gold); padding:2px 9px; border-radius:20px; vertical-align:middle; margin-left:8px; white-space:nowrap; }
.lib-tag-fam{ display:inline-block; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#2B4D7A; background:#E7EEF6; padding:2px 7px; border-radius:20px; vertical-align:middle; margin-left:6px; white-space:nowrap; }
.lib-buy{ display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:7px; background:var(--gold); color:#1a1a18; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.lib-buy:hover{ background:var(--gold-deep,#a87a2e); }
.lib-license{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:7px; background:transparent; color:var(--navy); border:1.5px solid var(--navy); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap; }
.lib-license:hover{ background:var(--navy); color:#fff; }
.lib-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.lib-paths{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin:6px 0 22px; }
@media (max-width:680px){ .lib-paths{ grid-template-columns:minmax(0,1fr); } }
.lib-path{ border:1px solid var(--rule); border-radius:14px; padding:20px 22px; background:var(--cream); display:flex; flex-direction:column; min-width:0; }
.lib-path-ey{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--gold); margin-bottom:4px; }
.lib-path-t{ font-size:21px; color:var(--navy); margin:0 0 7px; line-height:1.1; }
.lib-path-b{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0 0 16px; flex:1; }
.lib-path-btn{ display:inline-block; align-self:flex-start; padding:10px 18px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none; }
.lib-path-primary{ background:var(--navy); color:#fff; }
.lib-path-primary:hover{ background:var(--navy-deep,#13283f); }
.lib-path-gold{ background:var(--gold); color:#1a1a18; font-weight:700; }
.lib-path-gold:hover{ background:var(--gold-deep,#a87a2e); }

/* ===== base ===== */
/* ===== AoG lobby (front door) ===== */
.topbar-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink-soft);text-decoration:none;margin-right:18px;white-space:nowrap}
.topbar-link::before{content:"\25CB";color:var(--ink-faint);font-size:12px}
.topbar-link:hover{color:var(--navy)}
.aog-hero-e2{position:relative;margin:-32px calc(50% - 50vw) 0;padding:60px 40px 66px;background:radial-gradient(120% 135% at 50% 0%,#21466A 0%,#163048 56%,#0C1C2C 100%);text-align:center;overflow:hidden}
.aog-hero-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1180px,92vw);height:520px;background:radial-gradient(ellipse at center,rgba(231,184,94,.40) 0%,rgba(231,184,94,.14) 40%,rgba(231,184,94,0) 70%);pointer-events:none}
.aog-htag{position:relative;font-family:var(--font-serif);font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:#E7C98A;opacity:.92;font-size:clamp(14px,2vw,20px)}
.aog-lock{position:relative;font-family:var(--font-serif);font-weight:700;line-height:.98;margin-top:10px}
.aog-lock .l1{display:block;font-size:clamp(40px,7vw,78px);font-weight:500;font-style:italic;letter-spacing:.01em}
.aog-lock .l2{display:block;font-size:clamp(78px,15vw,168px);letter-spacing:.02em;margin-top:-4px}
.foil{background:linear-gradient(177deg,#FCEFC8 0%,#F3D58E 19%,#E7B85E 41%,#D2A03F 56%,#B07F26 78%,#8F6418 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.1px rgba(120,82,20,.28);filter:drop-shadow(0 2px 0 rgba(7,18,31,.40)) drop-shadow(0 16px 30px rgba(0,0,0,.30))}
.aog-hrule{position:relative;height:0;border:0;border-top:1px solid rgba(231,184,94,.5);width:120px;margin:18px auto 0}
.aog-intro{text-align:center;padding:40px 0 6px}
.aog-lede{font-size:clamp(17px,2.2vw,20px);line-height:1.6;color:var(--ink-soft);max-width:760px;margin:0 auto}
.aog-lede b{color:var(--navy)}
.aog-aud{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;justify-content:center}
.aog-aud span{font-size:13px;color:var(--navy);background:#fff;border:1px solid var(--rule);padding:7px 16px;border-radius:30px}
.aog-aud span.lead{background:var(--gold);color:#1a130a;border-color:var(--gold);font-weight:600}
.aog-lobby{padding:32px 0 0;position:relative;z-index:2}
.aog-doors{display:flex;flex-direction:column;gap:16px}
.aog-checkins{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#screen-choose .aog-door{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;align-items:center}
#screen-choose .aog-door .arr{margin-left:0}
.ri-adult-note{background:#FBF4E4;border:1px solid var(--gold);border-left:4px solid var(--gold);border-radius:10px;padding:12px 16px;margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.ri-adult-note strong{color:var(--navy)}
.aog-doors>.aog-door.primary{padding:30px 34px}
.aog-doors>.aog-door.primary .t{font-size:25px}
.aog-doors>.aog-door.primary .ic{width:56px;height:56px;font-size:26px}
.aog-door{display:flex;align-items:center;gap:16px;text-decoration:none;border-radius:16px;padding:24px 26px;box-shadow:0 14px 30px -10px rgba(27,58,95,.28);transition:transform .18s,box-shadow .18s}
.aog-door:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(27,58,95,.34)}
.aog-door.primary{background:linear-gradient(180deg,#21466A,#173049);border:1px solid #21466A}
.aog-door.primary .ic{background:var(--gold);color:#10243a}
.aog-door.primary .t{color:#fff}.aog-door.primary .s{color:#D8E0EC}.aog-door.primary .arr{color:var(--gold-soft)}
.aog-door.primary .sh{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#10243a;background:var(--gold);padding:3px 10px;border-radius:20px;margin-bottom:7px}
.aog-door.secondary{background:#fff;border:1px solid var(--rule)}
/* Choose-screen card distinction */
.aog-door.choose-card{border-radius:18px}
.aog-door.choose-student{background:linear-gradient(165deg,#FFF8E8,#F8EBCB);border:1px solid #E5D2A2}
.aog-door.choose-student .ic{background:linear-gradient(180deg,#F2C964,#D9A33B);color:var(--navy)}
.aog-door.choose-student .t{color:var(--navy)}
.aog-door.choose-adult{background:linear-gradient(165deg,#13314F,#0A1E33);border:1px solid #1E4A72}
.aog-door.choose-adult .ic{background:rgba(242,201,100,.18);color:var(--gold-soft)}
.aog-door.choose-adult .t{color:#fff}
.aog-door.choose-adult .s{color:#C2CEDD}
.aog-door.choose-adult .arr{color:var(--gold-soft)}
.aog-door.choose-specialist{grid-column:1 / -1;background:linear-gradient(165deg,#EAF3F4,#FCF8F0);border:1.5px solid #0E7C86}
.aog-door.choose-specialist .ic{background:rgba(14,124,134,.14);color:#0E7C86}
.aog-door.choose-specialist .t{color:var(--navy)}
.aog-door.choose-specialist .arr{color:#0E7C86}
.ch-spec-tag{display:inline-block;font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0B5A61;background:rgba(14,124,134,.14);border-radius:999px;padding:2px 9px;margin-bottom:5px}
:root[data-theme="dark"] .aog-door.choose-specialist{background:linear-gradient(165deg,#0E2A30,#0A1E33);border-color:#0E7C86}
:root[data-theme="dark"] .aog-door.choose-specialist .t{color:#fff}
:root[data-theme="dark"] .ch-spec-tag{color:#8FD3DA;background:rgba(14,124,134,.28)}
.aog-door .ic{width:50px;height:50px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:23px;background:var(--gold-pale);color:var(--gold-deep)}
.aog-door .ic svg{width:25px;height:25px}
.aog-doors>.aog-door.primary .ic svg{width:29px;height:29px}
.aog-door .t{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--navy)}
.aog-door .s{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
/* Keep the check-in picker ("Who's checking in?") within one screen at 100% */
#screen-choose #checkinPicker{ padding:14px 0 2px; }
#screen-choose #checkinPicker .display-xl{ font-size:clamp(26px,3.4vw,42px); margin:2px 0 6px; line-height:1.04; }
#screen-choose #checkinPicker .eyebrow{ font-size:11px; }
#screen-choose #checkinPicker .lede{ font-size:clamp(12.5px,1.4vw,15px); line-height:1.42; max-width:62ch; margin:0 auto; }
#screen-choose .aog-lobby{ padding-top:14px; }
#screen-choose .aog-checkins{ gap:12px; }
#screen-choose .aog-door{ padding:14px 18px; }
#screen-choose .aog-door .ic{ width:40px; height:40px; }
#screen-choose .aog-door .ic svg{ width:20px; height:20px; }
#screen-choose .aog-door .t{ font-size:18px; }
#screen-choose .aog-door .s{ font-size:12.5px; line-height:1.4; margin-top:2px; }
.aog-door .arr{margin-left:auto;color:var(--gold);font-size:23px}
.aog-foundation-rest{margin-top:-14px;position:relative;z-index:1}
@media (max-width:640px){ .aog-checkins{grid-template-columns:1fr} .aog-hero-e2{padding:42px 20px 46px} .aog-lock .l1{font-size:30px} .aog-lock .l2{font-size:clamp(54px,16vw,108px)} .aog-htag{font-size:12px;letter-spacing:.28em} .topbar{padding:12px 16px;flex-wrap:wrap;row-gap:8px} .topbar-link{margin-right:10px} }

/* ===== bold-pass-v1 ===== */
/* ============================================================
   BOLD PASS v1 — additive overrides only. Modern + confident.
   Navy/gold brand kept. Structure untouched.
   ============================================================ */

/* 1. Hero: keep the well-tuned baseline foil; only deepen the navy + a touch more scale */
.aog-hero-e2{
  padding:84px 40px 90px !important;
  background:radial-gradient(125% 140% at 50% 0%, #244D75 0%, #143049 54%, #07151F 100%) !important;
  border-bottom:1px solid rgba(231,184,94,.20);
}
.aog-htag{letter-spacing:.46em !important;color:#EDD49A !important;opacity:1 !important}
.aog-lock .l2{font-size:clamp(84px,15.5vw,182px) !important}
.aog-hrule{width:150px !important;border-top:1px solid rgba(231,184,94,.55) !important;margin-top:24px !important}

/* 2. Lede + audience chips: more presence */
.aog-intro{padding:52px 0 6px !important}
.aog-lede{font-size:clamp(18px,2.3vw,22px) !important;line-height:1.62 !important;color:#3A4355 !important}
.aog-aud span{
  font-size:13px !important;padding:8px 18px !important;
  border:1px solid #DCD2BC !important;box-shadow:0 1px 2px rgba(27,58,95,.05) !important;
  transition:transform .15s, box-shadow .15s;
}
.aog-aud span:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(27,58,95,.10)}
.aog-aud span.lead{
  background:linear-gradient(180deg,#D8AB54,#B8893A) !important;color:#1a130a !important;
  border-color:#B8893A !important;box-shadow:0 4px 12px rgba(184,137,58,.32) !important;
}

/* 3. Door cards: bolder lift + crisper edges */
.aog-door{border-radius:18px !important;transition:transform .2s var(--ease, ease), box-shadow .2s !important}
.aog-door:hover{transform:translateY(-4px) !important;box-shadow:0 26px 50px -14px rgba(15,42,74,.42) !important}
.aog-door.primary{
  background:linear-gradient(165deg,#28527C 0%,#15324C 78%) !important;
  border:1px solid #2C5882 !important;box-shadow:0 22px 44px -14px rgba(15,42,74,.5) !important;
}
.aog-door.primary .sh{
  background:linear-gradient(180deg,#E7C98A,#C19A4F) !important;color:#10243a !important;
  letter-spacing:.18em !important;box-shadow:0 2px 8px rgba(184,137,58,.4);
}
.aog-door.primary .ic{box-shadow:0 6px 16px rgba(184,137,58,.4) !important}

/* 4. Foundation card: warmer, bolder, the four ideas become real tokens */
.aog-what{
  border-radius:20px !important;padding:42px 48px 40px !important;
  border:1px solid #E6DBC2 !important;
  box-shadow:0 1px 0 #fff inset, 0 18px 44px -16px rgba(27,58,95,.14) !important;
}
.aog-what::before{width:84px !important;height:4px !important;background:linear-gradient(90deg,#E7C98A,#B8893A) !important}
.aog-what h2{font-size:clamp(30px,3.4vw,42px) !important;letter-spacing:-0.01em !important;margin:9px 0 17px !important}
.aog-what .ey{letter-spacing:.32em !important}
.aog-what .pillars span.tag{
  font-size:13px !important;font-weight:600 !important;letter-spacing:.02em !important;
  color:#15324C !important;
  background:linear-gradient(180deg,#FBF3DF,#F2E6C8) !important;
  border:1px solid #DFC894 !important;padding:8px 20px !important;border-radius:24px !important;
  box-shadow:0 2px 6px rgba(184,137,58,.14);
  transition:transform .15s, box-shadow .15s;
}
.aog-what .pillars span.tag:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(184,137,58,.26);
  background:linear-gradient(180deg,#F7E9C6,#EBD9A8) !important;
}
.aog-what .pl-label{letter-spacing:.22em !important;color:#A8966C !important}

/* 5. Top bar: a touch more authority */
.brand-mark{box-shadow:0 4px 12px -2px rgba(15,42,74,.3)}

/* ===== hybrid-welcome ===== */
/* ============================================================
   HYBRID WELCOME — blocky editorial front door
   Uses app tokens (--navy/--gold/etc). Fonts: Fraunces + Inter.
   ============================================================ */
#screen-welcome .hyb-welcome{margin:-32px calc(50% - 50vw) 0;width:100vw}
.hyb-hero{background:var(--navy);color:var(--cream);padding:52px 7vw 0;position:relative;overflow:hidden}
.hyb-hero::before{content:"";position:absolute;top:-30%;right:-5%;width:60%;height:160%;background:radial-gradient(circle,rgba(242,201,100,.16),transparent 65%);pointer-events:none}
.hyb-hk{position:relative;font-family:var(--font-sans);font-weight:700;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft)}
.hyb-title{position:relative;font-family:var(--font-serif);font-weight:600;line-height:.82;margin:18px 0 0;letter-spacing:-.02em}
.hyb-title .l1{display:block;font-size:clamp(38px,6vw,82px);font-style:italic;font-weight:400;color:#D7C9A8}
.hyb-title .l2{display:block;font-size:clamp(96px,18vw,262px);
  background:linear-gradient(176deg,#FBEFC9 0%,#F2CE7E 28%,#DCAB4C 58%,#B5821F 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(4px 6px 0 #06121f) drop-shadow(9px 14px 24px rgba(0,0,0,.4))}
.hyb-bar{position:relative;display:inline-flex;align-items:center;gap:18px;margin-top:34px;padding:14px 0}
.hyb-bar .word{font-family:var(--font-sans);font-weight:600;font-size:clamp(14px,1.5vw,17px);color:#CFC09C;white-space:nowrap}
.hyb-bar .word b{color:var(--gold-soft)}
.hyb-bar .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-soft);opacity:.55}
.hyb-aud{position:relative;display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:26px}
.hyb-aud .hyb-aud-label{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8FA0B5;padding:0 4px 0 0}
.hyb-aud span:not(.hyb-aud-label){font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--cream);background:rgba(244,238,226,.10);border:1px solid rgba(242,201,100,.28);padding:9px 17px;border-radius:40px;transition:background .15s,border-color .15s}
.hyb-aud span:not(.hyb-aud-label):hover{background:rgba(242,201,100,.14);border-color:rgba(242,201,100,.5)}
.hyb-cta{position:relative;display:flex;gap:0;margin:30px 0 0;padding-bottom:0}
.hyb-cta a{font-family:var(--font-sans);font-weight:700;font-size:16px;padding:22px 38px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:all .18s;cursor:pointer}
.hyb-cta .hyb-c1{background:var(--gold-soft);color:var(--navy)}
.hyb-cta .hyb-c1:hover{background:#fff;transform:none}
.hyb-cta .hyb-c2{background:transparent;color:var(--cream);border:2px solid rgba(244,238,226,.35);margin-left:-2px}
.hyb-cta .hyb-c2:hover{background:rgba(244,238,226,.1)}

/* statement band */
.hyb-statement{background:var(--navy);color:var(--cream);padding:50px 7vw 58px;text-align:center;margin:0;border-top:1px solid rgba(242,201,100,.14)}
.hyb-statement .emo-line{font-family:var(--font-serif);font-weight:500;font-style:italic;font-size:clamp(25px,3.3vw,42px);line-height:1.12;max-width:840px;margin:0 auto;letter-spacing:-.015em;color:var(--cream)}
.hyb-statement .lead-line{font-family:var(--font-sans);font-weight:500;font-size:clamp(16px,1.9vw,21px);line-height:1.45;max-width:720px;margin:22px auto 0;color:rgba(244,238,226,.78)}
.hyb-statement .pillar-line{font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:clamp(19px,2.3vw,28px);line-height:1.3;margin:16px auto 0;color:var(--cream)}
.hyb-statement .pillar-line em{font-style:italic;font-weight:600;color:var(--gold-soft);border-bottom:2px solid var(--gold-soft);padding-bottom:1px}
/* statement band when it lives inside the hero fold: hero already supplies side padding + navy bg, so drop the band's own horizontal padding and divider */
.hyb-statement.hyb-statement--in-hero{padding:34px 0 8px;border-top:none}
@media (max-width:640px){ .hyb-statement.hyb-statement--in-hero{padding:26px 0 6px} }
#screen-welcome .hyb-hero{padding-bottom:18px}
/* Hero photo band — warm human image under the headline, contained so it stays crisp */
.hyb-photo{ margin:32px auto 6px; max-width:940px; border-radius:18px; overflow:hidden; line-height:0;
  box-shadow:0 22px 60px -24px rgba(0,0,0,.6); border:1px solid rgba(242,201,100,.22); }
.hyb-photo img{ display:block; width:100%; height:auto; }
@media (max-width:640px){ .hyb-photo{ margin:22px auto 4px; border-radius:14px; } }
/* Hero stays a single centered column on all sizes — the photo band sits under the
   headline (the original layout). No desktop two-column split. */
.hyb-onesent{position:relative;font-family:var(--font-sans);font-weight:500;font-size:clamp(17px,2vw,22px);line-height:1.5;color:rgba(244,238,226,.93);max-width:700px;margin:26px auto 0}
.hyb-forall{position:relative;font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(18px,2.1vw,24px);line-height:1.4;color:var(--cream);max-width:660px;margin:20px auto 0}
.hyb-leaders{position:relative;margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(242,201,100,.28)}
.hyb-leaders .hl-ey{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:11px}
.hyb-leaders .hl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hyb-leaders .hl-chip{font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:#fff;background:rgba(242,201,100,.14);border:1px solid rgba(242,201,100,.6);border-radius:999px;padding:7px 14px;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.hyb-leaders .hl-link{display:inline-block;margin-top:15px;font-family:var(--font-sans);font-weight:700;font-size:13.5px;color:var(--gold-soft);text-decoration:none}
.hyb-leaders .hl-link:hover{color:#fff}
@media(max-width:600px){.hyb-onesent{font-size:16px}}
/* ===== four-pillar emblems (founder story) ===== */
.pillar-grid{ display:flex; flex-direction:column; gap:9px; margin:6px 0 18px; }
.pillar-card{ display:flex; align-items:flex-start; gap:14px; background:var(--cream-deep); border:1px solid var(--rule); border-radius:13px; padding:13px 16px; }
:root[data-theme="dark"] .pillar-card{ border-color:rgba(242,201,100,.16); }
.pillar-emblem{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(217,163,59,.10); border:1px solid rgba(217,163,59,.30); }
.pillar-emblem svg{ width:25px; height:25px; color:var(--ink); }
.pillar-card-tx{ font-size:15px; line-height:1.55; color:var(--ink); padding-top:3px; }
.pillar-card-tx strong{ color:var(--navy); font-weight:600; }
:root[data-theme="dark"] .pillar-card-tx strong{ color:var(--gold-soft); }
/* ===== Documentation: audience pathways + after-a-flag ===== */
.doc-who{ padding-bottom:22px; border-bottom:1px dashed var(--rule); margin-bottom:24px; }
.doc-paths{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
@media(max-width:560px){ .doc-paths{ grid-template-columns:1fr; } }
.doc-path{ background:var(--cream-deep); border:1px solid var(--rule); border-radius:12px; padding:13px 15px; }
:root[data-theme="dark"] .doc-path{ border-color:rgba(242,201,100,.16); }
.doc-path .dp-t{ font-family:var(--font-sans); font-weight:700; font-size:13.5px; color:var(--navy); margin-bottom:4px; }
:root[data-theme="dark"] .doc-path .dp-t{ color:var(--gold-soft); }
.doc-path .dp-s{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
a.doc-path{ display:block; text-decoration:none; cursor:pointer; transition:border-color .18s, transform .18s, box-shadow .18s; }
a.doc-path:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 20px rgba(27,58,95,.08); }
a.doc-path .dp-t::after{ content:" \2192"; color:var(--gold); font-weight:700; }
/* consolidated free shelf */
.free-shelf{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:680px){ .free-shelf{ grid-template-columns:1fr; } }
/* Collapsible free-shelf groups (cuts mobile scrolling) */
.free-shelf.is-grouped{ display:block; }
.fs-group{ border:1px solid var(--rule, #e6e1d5); border-radius:12px; margin-bottom:10px; background:var(--card, #fff); overflow:hidden; }
.fs-group>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; font-family:var(--font-sans); font-weight:800; font-size:14.5px; color:var(--navy); }
.fs-group>summary::-webkit-details-marker{ display:none; }
.fs-group>summary .fs-sum-r{ display:flex; align-items:center; gap:9px; }
.fs-group>summary .fs-sum-n{ font-size:12px; font-weight:700; color:var(--ink-soft); background:rgba(217,163,59,.14); border:1px solid rgba(217,163,59,.3); border-radius:999px; padding:2px 9px; }
.fs-group>summary .fs-chev{ transition:transform .18s ease; flex:0 0 auto; color:var(--ink-soft); }
.fs-group[open]>summary .fs-chev{ transform:rotate(180deg); }
.fs-group[open]>summary{ border-bottom:1px solid var(--rule, #e6e1d5); }
.fs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:14px; }
@media(max-width:680px){ .fs-grid{ grid-template-columns:1fr; padding:12px; } }
.free-card{ display:block; text-decoration:none; background:var(--cream-deep); border:1px solid var(--rule); border-radius:12px; padding:15px 17px; position:relative; transition:border-color .18s, transform .18s, box-shadow .18s; }
.free-card:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 20px rgba(27,58,95,.08); }
:root[data-theme="dark"] .free-card{ background:rgba(255,255,255,.03); border-color:rgba(242,201,100,.16); }
.free-card .fc-t{ font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:4px; padding-right:58px; }
:root[data-theme="dark"] .free-card .fc-t{ color:var(--gold-soft); }
.free-card .fc-d{ font-size:12.5px; line-height:1.5; color:var(--ink-soft); padding-right:58px; }
.free-card .fc-go{ position:absolute; top:15px; right:16px; font-family:var(--font-sans); font-weight:700; font-size:12px; color:var(--gold); white-space:nowrap; }
.free-card.has-cover{ display:flex; gap:14px; align-items:flex-start; }
.free-card .fc-cover{ flex:0 0 60px; line-height:0; }
.free-card .fc-cover img{ width:60px; height:auto; border-radius:6px; display:block; box-shadow:0 3px 8px rgba(27,58,95,.18); }
.free-card.has-cover .fc-body{ flex:1 1 auto; min-width:0; }
/* main-page free link */
.hyb-freelink{ text-align:center; padding:24px 22px 4px; }
.hyb-freelink a{ font-family:var(--font-sans); font-weight:700; font-size:15px; color:var(--navy); text-decoration:none; border-bottom:2px solid var(--gold-soft); padding-bottom:2px; cursor:pointer; }
.hyb-freelink a:hover{ color:var(--gold); }
:root[data-theme="dark"] .hyb-freelink a{ color:var(--cream); }
.hyb-free{ padding:14px 22px 18px; scroll-margin-top:84px; }
.hyb-free-inner{ max-width:980px; margin:0 auto; }
.hyb-free-h{ font-size:clamp(24px,3vw,32px); color:var(--navy); text-align:center; margin:0 0 6px; letter-spacing:-.01em; }
.hyb-free-lede{ font-family:var(--font-sans); font-size:15px; line-height:1.6; color:var(--ink-soft); text-align:center; max-width:660px; margin:0 auto 22px; }
:root[data-theme="dark"] .hyb-free-h{ color:var(--cream); }
.doc-flag-note{ background:var(--cream-deep); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:12px; padding:16px 20px; margin:10px 0 16px; }
.doc-flag-note .dfn-label{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
.doc-flag-note p{ font-size:14px; line-height:1.6; color:var(--ink); margin:0 0 8px; }
.doc-flag-note p:last-child{ margin-bottom:0; }
.doc-flag-note em{ color:var(--navy); font-style:italic; font-weight:600; }
:root[data-theme="dark"] .doc-flag-note em{ color:var(--gold-soft); }

/* ===== Decision-maker surfacing (Guide › Documentation) ===== */
.dm-intro{ background:var(--cream-deep); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:14px; padding:22px 26px; margin:0 0 26px; }
:root[data-theme="dark"] .dm-intro{ border-color:rgba(242,201,100,.16); }
.dm-intro .dm-ey{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
.dm-intro h3{ font-family:var(--font-serif); font-size:24px; color:var(--navy); margin:0 0 9px; line-height:1.12; }
:root[data-theme="dark"] .dm-intro h3{ color:var(--gold-soft); }
.dm-intro p{ font-size:15px; line-height:1.66; color:var(--ink); margin:0; }
.dm-intro p em{ color:var(--navy); font-style:italic; font-weight:600; }
:root[data-theme="dark"] .dm-intro p em{ color:var(--gold-soft); }

/* audience router */
.dm-router{ display:grid; grid-template-columns:repeat(auto-fit, minmax(216px,1fr)); gap:12px; margin:0 0 30px; }
@media(max-width:620px){ .dm-router{ grid-template-columns:1fr; } }
.dm-route{ display:block; text-decoration:none; background:#fff; border:1px solid var(--rule); border-radius:14px; padding:18px 18px 16px; transition:border-color .18s, transform .18s, box-shadow .18s; cursor:pointer; }
:root[data-theme="dark"] .dm-route{ background:rgba(255,255,255,.03); border-color:rgba(242,201,100,.16); }
.dm-route:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 22px rgba(27,58,95,.10); }
.dm-route .dm-r-ic{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(217,163,59,.10); border:1px solid rgba(217,163,59,.30); color:var(--navy); margin-bottom:12px; }
:root[data-theme="dark"] .dm-route .dm-r-ic{ color:var(--gold-soft); }
.dm-route .dm-r-ic svg{ width:21px; height:21px; }
.dm-route .dm-r-t{ font-family:var(--font-sans); font-weight:700; font-size:15px; color:var(--navy); margin-bottom:3px; }
:root[data-theme="dark"] .dm-route .dm-r-t{ color:var(--gold-soft); }
.dm-route .dm-r-s{ font-size:13px; line-height:1.5; color:var(--ink-soft); margin-bottom:10px; }
.dm-route .dm-r-go{ font-family:var(--font-sans); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--gold); }

/* section heads shared by the two grids */
.dm-sec{ margin:0 0 30px; }
.dm-sec-ey{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.dm-sec h3{ font-family:var(--font-serif); font-size:22px; color:var(--navy); margin:0 0 4px; }
:root[data-theme="dark"] .dm-sec h3{ color:var(--gold-soft); }
.dm-sec-sub{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 16px; max-width:640px; }

/* what this platform includes — feature grid */
.plat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
@media(max-width:760px){ .plat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .plat-grid{ grid-template-columns:1fr; } }
.plat-card{ background:var(--cream-deep); border:1px solid var(--rule); border-radius:13px; padding:16px 17px; }
:root[data-theme="dark"] .plat-card{ border-color:rgba(242,201,100,.16); }
.plat-card .plat-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(217,163,59,.10); border:1px solid rgba(217,163,59,.30); color:var(--navy); margin-bottom:11px; }
:root[data-theme="dark"] .plat-card .plat-ic{ color:var(--gold-soft); }
.plat-card .plat-ic svg{ width:20px; height:20px; }
.plat-card .plat-t{ font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:5px; }
:root[data-theme="dark"] .plat-card .plat-t{ color:var(--gold-soft); }
.plat-card .plat-s{ font-size:12.8px; line-height:1.52; color:var(--ink-soft); }

/* for administrators — value band */
.admin-band{ background:linear-gradient(135deg,#24496f 0%,var(--navy) 62%,#142c47 100%); border:1px solid var(--gold); border-radius:16px; padding:26px 30px 28px; margin:0 0 28px; color:var(--cream); }
.admin-band .ab-ey{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#E7B85E; margin-bottom:6px; }
.admin-band .ab-h{ font-family:var(--font-serif); font-size:24px; color:#fff; margin:0 0 6px; line-height:1.14; }
.admin-band .ab-sub{ font-size:14px; line-height:1.58; color:#dfe7ef; margin:0 0 20px; max-width:600px; }
.admin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px 22px; margin-bottom:22px; }
@media(max-width:560px){ .admin-grid{ grid-template-columns:1fr; } }
.admin-point{ display:flex; align-items:flex-start; gap:11px; }
.admin-point .ap-ck{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(231,184,94,.16); border:1px solid rgba(231,184,94,.5); margin-top:1px; }
.admin-point .ap-ck svg{ width:12px; height:12px; color:#E7B85E; }
.admin-point .ap-t{ font-family:var(--font-sans); font-weight:700; font-size:13.5px; color:#fff; margin-bottom:2px; }
.admin-point .ap-s{ font-size:12.8px; line-height:1.5; color:#cfdaea; }
.admin-flag{ display:flex; align-items:center; gap:10px; background:rgba(231,184,94,.10); border:1px solid rgba(231,184,94,.32); border-radius:10px; padding:11px 15px; margin-bottom:20px; }
.admin-flag svg{ flex:0 0 auto; width:18px; height:18px; color:#E7B85E; }
.admin-flag span{ font-size:13px; line-height:1.5; color:#f0e7d4; }
.admin-flag em{ color:#E7B85E; font-style:normal; font-weight:700; }
.admin-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.admin-cta a{ display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:13.5px; padding:12px 22px; border-radius:9px; text-decoration:none; }
.admin-cta .ac-gold{ background:var(--gold); color:#1a1a18; }
.admin-cta .ac-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.admin-cta .ac-ghost:hover{ border-color:#E7B85E; }

/* ===== P3 (2026-06-05) · "ACCESS DASHBOARD" VISIBILITY ==================
   High-contrast, gently pulsing treatment so the dashboard entry point
   stops getting lost next to the other links. Reusable utility. ====== */
.aog-pop{
  background:var(--gold) !important; color:var(--navy) !important;
  border:1.5px solid var(--gold) !important;
  box-shadow:0 6px 18px -8px rgba(242,201,100,.7);
  animation:aogPulseSubtle 2.6s var(--ease, ease-in-out) infinite;
}
.aog-pop:hover{ background:#E7B85E !important; border-color:#E7B85E !important; box-shadow:0 8px 22px -8px rgba(242,201,100,.85); }
@keyframes aogPulseSubtle{
  0%,100%{ box-shadow:0 6px 18px -8px rgba(242,201,100,.55); }
  50%{ box-shadow:0 8px 24px -6px rgba(242,201,100,.95); }
}
@media (prefers-reduced-motion:reduce){ .aog-pop{ animation:none; } }

/* ===== P6 (2026-06-05) · PROFESSIONAL DEVELOPMENT SECTION ============== */
.pd-wrap{ max-width:920px; }
.pd-head{ margin-bottom:22px; }
.pd-title{ font-size:30px; color:var(--navy); margin:6px 0 10px; line-height:1.12; }
.pd-lede{ font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:680px; margin:0; }
.pd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:16px; }
.pd-card{ background:var(--paper,#fff); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:14px; padding:18px 18px 16px; box-shadow:var(--shadow-sm); }
:root[data-theme="dark"] .pd-card{ background:#13314F; border-color:#1E4A72; border-left-color:var(--gold); }
.pd-card h3{ font-family:var(--font-serif); font-size:18px; color:var(--navy); margin:0 0 7px; line-height:1.2; }
:root[data-theme="dark"] .pd-card h3{ color:#fff; }
.pd-card p{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0; }
.pd-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.pd-cta a{ display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:13.5px; padding:12px 22px; border-radius:9px; text-decoration:none; }
.pd-cta .ac-gold{ background:var(--gold); color:var(--navy); }
.pd-cta .pd-ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--rule); }
:root[data-theme="dark"] .pd-cta .pd-ghost{ color:var(--cream); border-color:#2A4A6A; }
.pd-cta .pd-ghost:hover{ border-color:var(--gold); }

/* ===== PD print-ready resources (2026-06-29) ===== */
.pd-res{ margin-top:30px; padding-top:26px; border-top:1px solid var(--rule); }
.pd-res-ey{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:8px; }
.pd-res-h{ font-family:var(--font-serif); font-size:21px; color:var(--navy); margin:0 0 4px; line-height:1.15; }
:root[data-theme="dark"] .pd-res-h{ color:#fff; }
.pd-res-lede{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); max-width:700px; margin:0 0 18px; }
.pd-res-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.pd-res-card{ background:var(--paper,#fff); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:14px; padding:18px 18px 16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
:root[data-theme="dark"] .pd-res-card{ background:#13314F; border-color:#1E4A72; border-left-color:var(--gold); }
.pd-res-kick{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:6px; }
.pd-res-card h3{ font-family:var(--font-serif); font-size:18px; color:var(--navy); margin:0 0 7px; line-height:1.2; }
:root[data-theme="dark"] .pd-res-card h3{ color:#fff; }
.pd-res-card p{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; flex:1; }
.pd-res-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.pd-res-btn{ font-family:var(--font-sans); font-size:12.5px; font-weight:700; text-decoration:none; padding:9px 16px; border-radius:24px; cursor:pointer; }
.pd-res-btn.open{ background:var(--navy); color:#fff; } .pd-res-btn.open:hover{ background:#16314f; }
.pd-res-btn.pdf{ background:transparent; color:var(--ink); border:1.5px solid var(--gold); } .pd-res-btn.pdf:hover{ background:var(--cream); }
:root[data-theme="dark"] .pd-res-btn.pdf{ color:var(--cream); }
:root[data-theme="dark"] .pd-res-btn.pdf:hover{ background:var(--cream-deep,#2a4a6a); }

/* ===== P5 (2026-06-05) · "HOW THE FULL LIBRARY WORKS" ONE-PAGER ======== */
.lw-band{ background:linear-gradient(180deg,var(--cream) 0%,var(--paper,#fff) 100%); border:1px solid var(--rule); border-radius:18px; padding:26px 30px 24px; margin-bottom:22px; box-shadow:var(--shadow-sm); }
:root[data-theme="dark"] .lw-band{ background:#0E1822; border-color:#1E4A72; }
.lw-head{ margin-bottom:18px; }
.lw-title{ font-size:26px; color:var(--navy); margin:6px 0 8px; line-height:1.14; }
:root[data-theme="dark"] .lw-title{ color:#fff; }
.lw-sub{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); max-width:660px; margin:0; }
.lw-steps{ display:flex; align-items:stretch; gap:14px; }
.lw-step{ flex:1; background:var(--paper,#fff); border:1px solid var(--rule); border-top:3px solid var(--gold); border-radius:14px; padding:18px 16px; box-shadow:var(--shadow-sm); }
:root[data-theme="dark"] .lw-step{ background:#13314F; border-color:#1E4A72; border-top-color:var(--gold); }
.lw-num{ width:30px; height:30px; border-radius:50%; background:var(--gold); color:var(--navy); font-family:var(--font-sans); font-weight:800; font-size:15px; display:grid; place-items:center; margin-bottom:10px; }
.lw-st{ font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--navy); margin-bottom:6px; }
:root[data-theme="dark"] .lw-st{ color:#fff; }
.lw-sp{ font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.lw-arrow{ align-self:center; color:var(--gold); font-size:24px; font-weight:700; flex:0 0 auto; }
.lw-foot{ margin-top:16px; }
.lw-link{ font-family:var(--font-sans); font-weight:700; font-size:13.5px; color:var(--navy); text-decoration:none; }
:root[data-theme="dark"] .lw-link{ color:var(--gold-soft); }
.lw-link:hover{ text-decoration:underline; }
@media (max-width:680px){ .lw-steps{ flex-direction:column; } .lw-arrow{ transform:rotate(90deg); } }

/* ===== concrete lead in the foundation card ===== */
.aog-what-lead{ font-size:17px; line-height:1.6; color:var(--navy); font-weight:500; margin:0 0 16px; padding-left:14px; border-left:3px solid var(--gold); }
:root[data-theme="dark"] .aog-what-lead{ color:var(--gold-soft); }
.aog-what-lead strong{ font-weight:700; }

/* ===== student-journey flow ===== */
.aog-flow{ display:flex; align-items:center; flex-wrap:nowrap; gap:0; margin:0; }
@media(max-width:860px){ .aog-flow{ flex-direction:column; align-items:center; } }
.flow-step{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; background:var(--cream-deep); border:1px solid var(--rule); border-radius:13px; padding:15px 9px; }
:root[data-theme="dark"] .flow-step{ border-color:rgba(242,201,100,.16); }
.flow-step .fs-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(217,163,59,.10); border:1px solid rgba(217,163,59,.30); color:var(--navy); }
:root[data-theme="dark"] .flow-step .fs-ic{ color:var(--gold-soft); }
.flow-step .fs-ic svg{ width:18px; height:18px; }
.flow-step .fs-t{ font-family:var(--font-sans); font-weight:700; font-size:12.5px; color:var(--navy); line-height:1.18; }
:root[data-theme="dark"] .flow-step .fs-t{ color:var(--gold-soft); }
.flow-step .fs-s{ font-size:11px; line-height:1.35; color:var(--ink-soft); }
.flow-arr{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:var(--gold); padding:0 5px; }
.flow-arr svg{ width:18px; height:18px; }
.flow-branch{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; }
.flow-branch .flow-step{ flex:0 0 auto; }
@media(max-width:860px){ .flow-step{ width:100%; max-width:340px; } .flow-branch{ width:100%; max-width:340px; } .flow-arr{ transform:rotate(90deg); padding:7px 0; } }

/* ===== how it's different ===== */
.diff-list{ display:flex; flex-direction:column; gap:11px; }
.diff-pt{ background:var(--cream-deep); border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:12px; padding:14px 18px; }
:root[data-theme="dark"] .diff-pt{ border-color:rgba(242,201,100,.16); border-left-color:var(--gold); }
.diff-pt .dp-h{ font-family:var(--font-sans); font-weight:700; font-size:14.5px; color:var(--navy); margin-bottom:4px; line-height:1.3; }
:root[data-theme="dark"] .diff-pt .dp-h{ color:var(--gold-soft); }
.diff-pt .dp-b{ font-size:13.2px; line-height:1.56; color:var(--ink); }
.diff-pt .dp-b em{ color:var(--navy); font-style:italic; font-weight:600; }
:root[data-theme="dark"] .diff-pt .dp-b em{ color:var(--gold-soft); }


/* ===== welcome: Who it's for ===== */
.hyb-whofor{ padding:6px 22px 2px; }
.whofor-inner{ max-width:760px; margin:0 auto; text-align:center; }
.home-who-ey{ text-align:center; }
.home-who-h{ font-size:clamp(24px,3vw,30px); color:var(--navy); margin:5px 0 8px; line-height:1.15; }
:root[data-theme="dark"] .home-who-h{ color:var(--gold-soft); }
.whofor-lede{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:600px; margin:0 auto; }
.hyb-whofor .doc-paths{ text-align:left; margin-top:18px; }
.whofor-inner{ max-width:820px; }
.hyb-whofor .doc-paths{ gap:14px; }
.hyb-whofor .doc-path{ padding:18px 22px; border-radius:14px; }
.hyb-whofor .doc-path .dp-t{ font-size:15px; margin-bottom:6px; }
.hyb-whofor .doc-path .dp-s{ font-size:14px; line-height:1.55; }

/* doors */
.hyb-doors{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border-bottom:2.5px solid var(--navy)}
.hyb-door{padding:46px 7vw;text-decoration:none;display:block;position:relative;transition:background .2s;cursor:pointer}
.hyb-door .ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px}
.hyb-door .ic svg{width:29px;height:29px}
.hyb-door .badge{display:inline-block;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:2px;margin-bottom:14px}
.hyb-door .t{font-family:var(--font-serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1;letter-spacing:-.01em}
.hyb-door .s{font-family:var(--font-sans);font-size:15px;margin-top:14px;max-width:440px;line-height:1.5}
.hyb-door .foot{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid currentColor}
.hyb-door .foot .meta{font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.hyb-door .foot .arr{font-size:26px;line-height:1}
.hyb-door.prim{background:var(--navy);color:var(--cream)}
.hyb-door.prim .ic{background:linear-gradient(180deg,#F2C964,#D9A33B);color:var(--navy)}
.hyb-door.prim .badge{background:var(--gold-soft);color:var(--navy)}
.hyb-door.prim .foot{border-color:rgba(242,201,100,.22)}
.hyb-door.prim .foot .meta,.hyb-door.prim .foot .arr{color:var(--gold-soft)}
.hyb-door.prim:hover{background:var(--navy-deep)}
.hyb-door.sec{background:var(--cream);color:var(--navy);border-left:2.5px solid var(--navy)}
.hyb-door.sec .ic{background:var(--gold-pale);color:var(--gold-deep)}
.hyb-door.sec .badge{background:transparent;color:var(--gold);border:2px solid var(--gold)}
.hyb-door.sec .s{color:#465062cc}
.hyb-door.sec .foot{border-color:rgba(10,30,51,.14)}
.hyb-door.sec .foot .meta{color:#5A6072}.hyb-door.sec .foot .arr{color:var(--gold)}
.hyb-door.sec:hover{background:#fff}

/* foundation — restyled to match, centered card on cream */
#screen-welcome .aog-what{max-width:880px;margin:64px auto;background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:48px 7vw;text-align:center;position:relative;box-shadow:0 18px 44px -16px rgba(10,30,51,.14)}
#screen-welcome .aog-what::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:84px;height:4px;background:linear-gradient(90deg,#F2C964,#D9A33B);border-radius:0 0 4px 4px}
#screen-welcome .aog-what .ey{font-family:var(--font-sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:700}
#screen-welcome .aog-what h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(30px,3.4vw,42px);color:var(--ink);margin:9px 0 17px;line-height:1.05;letter-spacing:-.01em}
#screen-welcome .aog-what p{font-family:var(--font-sans);font-size:15px;line-height:1.62;color:#3f3d37;margin:0 auto 11px;max-width:680px}
#screen-welcome .aog-what .pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--rule)}
#screen-welcome .aog-what .pl-label{width:100%;font-family:var(--font-sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#A8966C;margin-bottom:8px;font-weight:700}
#screen-welcome .aog-what .pillars span.tag{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--navy);background:linear-gradient(180deg,#FBF3DF,#F2E6C8);border:1px solid #DFC894;padding:8px 20px;border-radius:24px;letter-spacing:.02em}

/* ===== B: center the main content on the homepage hero ===== */
.hyb-hero{text-align:center}
.hyb-hero .hyb-hk{display:block}
.hyb-hero .hyb-bar{margin-left:auto;margin-right:auto}
.hyb-hero .hyb-aud{justify-content:center}
.hyb-hero .hyb-cta{justify-content:center}

/* ===== B: The Story, moved to bottom of main page ===== */
.hyb-story{background:transparent;padding:0;border-top:none}
.hyb-story-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--rule);border-radius:var(--radius-lg);padding:40px 44px;box-shadow:var(--shadow-sm);text-align:left}
@media (max-width:760px){ .hyb-story-card{padding:30px 24px} }

/* ===== B: The Foundation pillars, on the Library page ===== */
.found-pillars{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;padding-top:18px;border-top:1px dashed var(--rule)}
.found-pl-label{width:100%;font-family:var(--font-sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#A8966C;margin-bottom:8px;font-weight:700}
.found-tag{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--navy);background:linear-gradient(180deg,#FBF3DF,#F2E6C8);border:1px solid #DFC894;padding:8px 20px;border-radius:24px;letter-spacing:.02em}

/* reveals */
.hyb-hero .hyb-hk,.hyb-hero .hyb-title,.hyb-hero .hyb-bar,.hyb-hero .hyb-vp,.hyb-hero .hyb-aud,.hyb-hero .hyb-cta{opacity:0;transform:translateY(16px);animation:hybRise .8s cubic-bezier(.16,1,.3,1) forwards}
.hyb-hero .hyb-title{animation-delay:.08s}.hyb-hero .hyb-bar{animation-delay:.32s}.hyb-hero .hyb-vp{animation-delay:.4s}.hyb-hero .hyb-aud{animation-delay:.42s}.hyb-hero .hyb-cta{animation-delay:.52s}
@keyframes hybRise{to{opacity:1;transform:none}}
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
/* Belt-and-suspenders: any reveal inside an active screen is always visible */
.screen.active .reveal { opacity: 1 !important; transform: none !important; }

/* Style tags inside screens must never render as visible block elements.
   In Chrome/Safari, <style> inside <body> renders as display:block with height,
   which creates blank space at the top of every screen. */
.screen style,
.screen > style,
main style,
body > div > main style { display: none !important; height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; }

/* Remove any accidental top padding/margin from screen wrappers */
.screen > .container:first-child,
.screen > .container-wide:first-child { padding-top: 0; }
.screen > div > .hero[style*="padding-top:48px"] { padding-top: 24px !important; }
.aog-what.reveal{margin-top:64px}

/* mobile */
@media (max-width:760px){
  .hyb-hero{padding:38px 6vw 0}
  .hyb-title .l2{font-size:20vw;line-height:.86;filter:drop-shadow(3px 4px 0 #06121f) drop-shadow(6px 9px 16px rgba(0,0,0,.4))}
  .hyb-bar{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:22px;width:100%;padding:12px 0}
  .hyb-bar .word{white-space:nowrap;font-size:13px;text-align:center}
  .hyb-bar .dot{display:none}
  .hyb-cta{flex-direction:column;width:100%}
  .hyb-cta a{justify-content:center;padding:18px 24px}
  .hyb-cta .hyb-c2{margin-left:0;margin-top:-2px}
  .hyb-statement{padding:42px 6vw}
  .hyb-doors{grid-template-columns:1fr}
  .hyb-door{padding:34px 6vw}
  .hyb-door.sec{border-left:none;border-top:2.5px solid var(--navy)}
}
@media (max-width:400px){
  .hyb-title .l2{font-size:21vw}
  .hyb-bar .dot{display:none}
  .hyb-bar .word{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .hyb-hero .hyb-hk,.hyb-hero .hyb-title,.hyb-hero .hyb-bar,.hyb-hero .hyb-aud,.hyb-hero .hyb-cta{animation:none;opacity:1;transform:none}
  .reveal{transition:none;opacity:1;transform:none}
}

/* ===== dark-mode-v1 ===== */
/* ============================================================
   C: DARK MODE — remap SURFACE + INK tokens only.
   --navy and --cream are intentionally NOT remapped: they double as
   accent/text-on-dark colors, so flipping them breaks the hero, doors,
   and footer. Instead we override the few sections that use --cream as
   a light background, plus inline navy text sitting on dark cards.
   ============================================================ */
:root[data-theme="dark"]{
  --paper:#152331;
  --cream-deep:#0C141D;
  --ink:#ECE5D6;
  --ink-soft:#BAC2D0;
  --ink-faint:#AEB7C8;
  --rule:#2B3B4B;
  --rule-soft:#22303E;
  --gold:#E7B85E;
  --green:#82D08E; --green-bg:#15301B;
  --amber:#E8C868; --amber-bg:#2E2710;
  --red:#EC9B93;   --red-bg:#3A1E1C;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 10px rgba(0,0,0,.4);
  --shadow-lg:0 12px 30px rgba(0,0,0,.5);
  --shadow-xl:0 26px 54px rgba(0,0,0,.6);
}
/* surfaces */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .stage{ background:#101A24; }
:root[data-theme="dark"] .table-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .hyb-story{ background:transparent; }
:root[data-theme="dark"] .hyb-story-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .script-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .mode-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .lib-cat{ border-color:var(--rule); }
:root[data-theme="dark"] .lib-cat-head{ background:#13202C; }
:root[data-theme="dark"] .lib-cat-head:hover{ background:#182734; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{ background:#0E1822; color:var(--ink); border-color:var(--rule); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{ color:var(--ink-faint); }
/* .30fg — the 3 September axe pass: --navy and --cream are deliberately not remapped (see
   above), so the surfaces that used them as INK on the dark ground are fixed here by name.
   Family destination: navy-on-navy 1.04:1 → ink. Link generator: cream-on-cream 1.08:1. */
:root[data-theme="dark"] #screen-family :is(.fdx-q,.fdx-chip,.fam-tab.active,.fam-hub-t,.famcs-t,.fdx-btn,.t-checkin > b,.t-talk > b,.t-repair > b,.t-grow > b){ color:var(--ink) !important; }
:root[data-theme="dark"] #screen-family .fdx-eyebrow{ color:var(--gold) !important; }
:root[data-theme="dark"] #lgUrl{ background:#0E1822 !important; color:var(--ink) !important; }
/* light-theme small print that measured under 4.5:1 on the family and dashboard screens */
#screen-family .fc-grade{ color:#5F6B78 !important; }
#screen-family .fdx-eyebrow{ color:#7D5A12; }
:root[data-theme="dark"] #screen-family .fc-grade{ color:var(--ink-faint) !important; }
/* inline navy text that sits on dark cards → make legible */
:root[data-theme="dark"] .table-card [style*="color:var(--navy)"],
:root[data-theme="dark"] .hyb-story-card [style*="color:var(--navy)"]{ color:var(--gold-soft)!important; }
/* the secondary door uses a light cream background */
:root[data-theme="dark"] .hyb-door.sec{ background:#16242F; color:var(--ink); border-left-color:var(--rule); }
:root[data-theme="dark"] .hyb-door.sec:hover{ background:#1B2C3A; }
:root[data-theme="dark"] .hyb-door.sec .s{ color:var(--ink-soft); }
:root[data-theme="dark"] .hyb-door.sec .foot{ border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .hyb-door.sec .foot .meta{ color:var(--ink-soft); }
/* foundation pillar tags on the Library page */
:root[data-theme="dark"] .found-tag{ background:linear-gradient(180deg,#2A2415,#1F1B11); border-color:#4A3D1F; color:var(--gold-soft); }
/* generic last-resort: any element still painting itself white */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:white"]{ background:var(--paper)!important; }
/* --- dark-mode contrast fixes: top bar brand, welcome Voices strip, comment wall --- */
:root[data-theme="dark"] .topbar{ background:#101A24; border-bottom-color:var(--rule); }
:root[data-theme="dark"] .brand-name{ color:var(--ink); }
:root[data-theme="dark"] .brand-sub{ color:var(--ink-soft); }
:root[data-theme="dark"] .wv-title{ color:var(--ink); }
:root[data-theme="dark"] .wv-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .wv-quote{ color:var(--ink); }
:root[data-theme="dark"] .wv-link{ color:var(--ink); }
:root[data-theme="dark"] .voi-form{ background:#13202C; border-color:var(--rule); }
:root[data-theme="dark"] .voi-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .voi-card .voi-body,
:root[data-theme="dark"] .voi-card .voi-who{ color:var(--ink); }

/* ===== DARK-MODE CONTRAST AUDIT PATCH (2026-06) =====================
   Fixes two systemic issues found in dark mode:
   (1) cards/inputs with hard-coded light backgrounds that never flipped,
       leaving light text on a light surface;
   (2) var(--navy) text (navy is NOT remapped in dark) sitting on dark
       surfaces, rendering it nearly invisible.
   QR code (.share-qr) intentionally left white. ============================ */

/* (1) Stray light card/surface backgrounds -> dark surface */
:root[data-theme="dark"] .form-section,
:root[data-theme="dark"] .support-card,
:root[data-theme="dark"] .lib-path,
:root[data-theme="dark"] .aog-door.secondary,
:root[data-theme="dark"] .door,
:root[data-theme="dark"] .rc-card,
:root[data-theme="dark"] .wv-card,
:root[data-theme="dark"] .voi-input,
:root[data-theme="dark"] .ri-card,
:root[data-theme="dark"] .eco-detail,
:root[data-theme="dark"] .dm-route{ background:var(--paper); border-color:var(--rule); }

:root[data-theme="dark"] .ri-toolbar input,
:root[data-theme="dark"] .ri-toolbar select,
:root[data-theme="dark"] .aog-aud span,
:root[data-theme="dark"] .ri-novel,
:root[data-theme="dark"] .tk-pill{ background:#0E1822; color:var(--ink); border-color:var(--rule); }
:root[data-theme="dark"] .tk-pill.on{ background:var(--gold); color:var(--navy); border-color:var(--gold); }

:root[data-theme="dark"] .home-item-detail{ background:#0E1822; border-color:var(--rule); }
:root[data-theme="dark"] .home-item a.hid-link{ background:#0E1822; border-color:var(--rule); }

/* (2) Navy text on dark surfaces -> legible light ink */
:root[data-theme="dark"] .aog-door .t,
:root[data-theme="dark"] .mode-title,
:root[data-theme="dark"] .section-head h2,
:root[data-theme="dark"] .wp-tank-head h2,
:root[data-theme="dark"] .wp-section-head h2,
:root[data-theme="dark"] .wp-beat .bt,
:root[data-theme="dark"] .wp-who-card .wt,
:root[data-theme="dark"] .wp-launch .lh{ color:var(--ink); }

:root[data-theme="dark"] .made-with{ color:var(--ink-soft); }

/* secondary buttons: navy-on-transparent -> readable on dark */
:root[data-theme="dark"] .btn-secondary{ color:var(--ink); border-color:var(--rule); }
:root[data-theme="dark"] .btn-secondary:hover:not(:disabled){ background:#1B2C3A; color:var(--cream); }

/* active tabs / subtabs: navy underline text -> light (gold underline kept) */
:root[data-theme="dark"] .tab.active,
:root[data-theme="dark"] .guide-subtab.active{ color:var(--ink); }
:root[data-theme="dark"] .tab:hover,
:root[data-theme="dark"] .guide-subtab:hover{ color:var(--cream); }

/* gold-deep eyebrow labels (#9a6f24) are too dark on dark surfaces -> bright gold */
:root[data-theme="dark"] .ey,
:root[data-theme="dark"] .at-ey,
:root[data-theme="dark"] .oe,
:root[data-theme="dark"] .wp-section-head .ey,
:root[data-theme="dark"] .yr-head,
:root[data-theme="dark"] .wp-thesis p em{ color:var(--gold); }

/* language toggle: cream container -> dark so inactive label is legible */
:root[data-theme="dark"] .lang-toggle{ background:#0E1822; border-color:var(--rule); }
:root[data-theme="dark"] .lang-toggle button{ color:var(--ink-soft); }
:root[data-theme="dark"] .lang-toggle button.active{ background:var(--gold); color:#1b1405; }

/* distribution bars: bright pastel segments -> dark numerals for contrast */
:root[data-theme="dark"] .dist-green,
:root[data-theme="dark"] .dist-amber,
:root[data-theme="dark"] .dist-red{ color:#0A1E33; }

/* --- second pass: remaining light cards + headings inside dark cards --- */
:root[data-theme="dark"] .wp-org,
:root[data-theme="dark"] .reflection-card,
:root[data-theme="dark"] .domain-card{ background:var(--paper); border-color:var(--rule); }

/* inline cream backgrounds (set via style="") that don't flip */
:root[data-theme="dark"] [style*="background:var(--cream)"],
:root[data-theme="dark"] [style*="background: var(--cream)"]{ background:var(--paper)!important; }

/* navy headings / emphasis that now sit on dark card surfaces */
:root[data-theme="dark"] .form-section h2,
:root[data-theme="dark"] .form-section h3,
:root[data-theme="dark"] .share-card-head h4,
:root[data-theme="dark"] .wp-org h2,
:root[data-theme="dark"] .lib-path-t,
:root[data-theme="dark"] .domain-card-score,
:root[data-theme="dark"] .domain-card-title,
:root[data-theme="dark"] .ctx-note strong,
:root[data-theme="dark"] .eco-frame strong,
:root[data-theme="dark"] .wp-launch .field label{ color:var(--ink); }

:root[data-theme="dark"] .support-card strong,
:root[data-theme="dark"] .wp-org p strong{ color:var(--gold-soft); }

/* nudge faint caption colour up to clear AA on the navy demo cards */
:root[data-theme="dark"]{ --ink-faint:#AEB7C8; }
/* Dark-mode fix: cream-background cards stayed light while text flipped light
   (light-on-light). Give them a dark surface + light text, and lift the dark
   gold-deep eyebrow labels to a readable light gold. */
:root[data-theme="dark"] .home-reflection{ background:#0E1822; border-left-color:var(--gold); }
:root[data-theme="dark"] .home-reflection .quote{ color:var(--ink); }
:root[data-theme="dark"] .rn-affirm{ background:#0E1822; }
:root[data-theme="dark"] .rn-grownup{ background:#0E1822; color:var(--ink); }
:root[data-theme="dark"] .rn-grownup strong{ color:var(--gold-soft); }
:root[data-theme="dark"] .ic-coach{ background:#0E1822; }
:root[data-theme="dark"] .ic-coach p{ color:var(--ink); }
:root[data-theme="dark"] .ic-coach-h,
:root[data-theme="dark"] .rn-bridge-h,
:root[data-theme="dark"] .tc-crumbs-h,
:root[data-theme="dark"] .rn-teacher-sum{ color:var(--gold-soft); }

/* Daily Log (v2): cards/inputs used var(--card,#fff) (white) while text flipped light —
   give them dark surfaces and lift the hard-coded navy text to legible light ink. */
:root[data-theme="dark"] #panel-daily .dl-card,
:root[data-theme="dark"] #panel-daily .dl-gridwrap{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] #panel-daily .dl-logitem,
:root[data-theme="dark"] #panel-daily .dl-day,
:root[data-theme="dark"] #panel-daily .dl-field input,
:root[data-theme="dark"] #panel-daily .dl-field select,
:root[data-theme="dark"] #panel-daily .dl-periodsel,
:root[data-theme="dark"] #panel-daily .dl-otherin,
:root[data-theme="dark"] #panel-daily .dl-notein,
:root[data-theme="dark"] #panel-daily .dl-setbtn,
:root[data-theme="dark"] #panel-daily .dl-btn.ghost{ background:#0E1822; color:var(--ink); border-color:var(--rule); }
:root[data-theme="dark"] #panel-daily .dl-h,
:root[data-theme="dark"] #panel-daily .dl-logper,
:root[data-theme="dark"] #panel-daily .dl-chk span,
:root[data-theme="dark"] #panel-daily .dl-chk,
:root[data-theme="dark"] #panel-daily .dl-total{ color:var(--ink); }
:root[data-theme="dark"] #panel-daily .dl-logchk{ color:var(--ink-soft); }
:root[data-theme="dark"] #panel-daily .dl-lognote,
:root[data-theme="dark"] #panel-daily .dl-formlbl,
:root[data-theme="dark"] #panel-daily .dl-field label,
:root[data-theme="dark"] #panel-daily .dl-sub2,
:root[data-theme="dark"] #panel-daily .dl-note,
:root[data-theme="dark"] #panel-daily .dl-day .d{ color:var(--ink-faint); }
:root[data-theme="dark"] #panel-daily .dl-chk input,
:root[data-theme="dark"] #panel-daily .dl-grid input[type=checkbox]{ accent-color:var(--gold); }
:root[data-theme="dark"] #panel-daily .dl-add{ color:var(--gold); }
/* ===== END DARK-MODE CONTRAST AUDIT PATCH ===== */

body{ transition:background .25s ease, color .25s ease; }
/* toggle button */
.theme-toggle{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--rule); background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .15s,color .15s,border-color .15s; padding:0; }
.theme-toggle:hover{ background:rgba(127,127,127,.12); color:var(--ink); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ti-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .ti-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .ti-moon{ display:block; }

/* ===== D: onboarding tour ===== */
.tour-overlay{ position:fixed; inset:0; z-index:4000; }
.tour-overlay[hidden]{ display:none; }
.tour-spotlight{ position:absolute; border-radius:14px; box-shadow:0 0 0 9999px rgba(6,12,24,.74), 0 0 0 3px var(--gold-soft), 0 0 24px 6px rgba(242,201,100,.45); transition:all .3s cubic-bezier(.16,1,.3,1); pointer-events:none; background:rgba(242,201,100,.06); }
.tour-pop{ position:absolute; width:300px; max-width:calc(100vw - 28px); background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:16px; box-shadow:0 24px 60px -16px rgba(0,0,0,.5); padding:18px 20px 16px; transition:top .3s cubic-bezier(.16,1,.3,1), left .3s cubic-bezier(.16,1,.3,1); }
.tour-meta{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--gold); margin-bottom:6px; }
.tour-title{ font-family:var(--font-serif); font-weight:600; font-size:20px; color:var(--ink); line-height:1.15; margin-bottom:7px; }
:root:not([data-theme="dark"]) .tour-title{ color:var(--navy); }
.tour-body{ font-family:var(--font-sans); font-size:14px; line-height:1.55; color:var(--ink-soft); margin-bottom:14px; }
.tour-dots{ display:flex; gap:6px; margin-bottom:14px; }
.tour-dots i{ width:7px; height:7px; border-radius:50%; background:var(--rule); transition:background .2s,width .2s; }
.tour-dots i.on{ background:var(--gold); width:18px; border-radius:4px; }
.tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour-nav{ display:flex; gap:8px; }
.tour-skip{ background:none; border:none; color:var(--ink-faint); font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; padding:6px 4px; }
.tour-skip:hover{ color:var(--ink-soft); }
.tour-back{ background:transparent; border:1px solid var(--rule); color:var(--ink-soft); border-radius:9px; padding:8px 14px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; }
.tour-back:hover{ border-color:var(--gold); color:var(--ink); }
.tour-next{ background:var(--gold); border:1px solid var(--gold); color:#1b1405; border-radius:9px; padding:8px 16px; font-family:var(--font-sans); font-size:13px; font-weight:700; cursor:pointer; }
.tour-next:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }
.tour-fab{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:3500; display:none; align-items:center; gap:8px; background:var(--navy); color:var(--gold-soft); border:1px solid rgba(242,201,100,.4); border-radius:40px; padding:11px 16px 11px 13px; font-family:var(--font-sans); font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 10px 26px -8px rgba(0,0,0,.4); transition:transform .15s, background .15s; }
.tour-fab:hover{ transform:translateY(-1px); background:var(--navy-soft); }
.tour-fab svg{ width:20px; height:20px; }
.tour-fab.show{ display:inline-flex; }
@media (max-width:560px){ .tour-fab-label{ display:none; } .tour-fab{ padding:13px; border-radius:50%; } }
:root[data-theme="dark"] .tour-next{ color:#1b1405; }

/* ===== Family Mode entry bar (welcome) ===== */
.hyb-family{ display:flex; align-items:center; gap:18px; max-width:880px; margin:30px auto 0; padding:20px 26px; background:var(--paper); border:1px solid var(--rule); border-radius:18px; text-decoration:none; box-shadow:0 10px 30px -18px rgba(10,30,51,.2); transition:transform .15s, border-color .15s; }
.hyb-family:hover{ transform:translateY(-1px); border-color:var(--gold); }
.hyb-family-ic{ flex:0 0 auto; width:50px; height:50px; border-radius:13px; display:grid; place-items:center; background:var(--gold-pale); color:var(--gold-deep); }
.hyb-family-ic svg{ width:26px; height:26px; }
.hyb-family-t{ font-family:var(--font-serif); font-weight:600; font-size:21px; color:var(--navy); line-height:1.1; }
:root[data-theme="dark"] .hyb-family-t{ color:var(--ink); }
.hyb-family-s{ font-family:var(--font-sans); font-size:13.5px; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
.hyb-family-arr{ flex:0 0 auto; margin-left:auto; font-size:24px; color:var(--gold); }
@media (max-width:760px){ .hyb-family{ margin:24px 5vw 0; padding:18px 18px; gap:14px; } .hyb-family-arr{ display:none; } }

/* ===== Family Mode screen ===== */
.fam-switch{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 22px; }
.fam-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--rule); background:var(--paper); color:var(--ink-soft); font-family:var(--font-sans); font-weight:600; font-size:14px; cursor:pointer; transition:all .15s; }
.fam-chip:hover{ border-color:var(--gold); color:var(--ink); }
.fam-chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.fam-chip .fc-grade{ font-size:11px; font-weight:700; opacity:.7; }
.fam-chip.add{ border-style:dashed; color:var(--gold); }
.fam-empty{ text-align:center; max-width:520px; margin:10px auto; padding:34px 26px; background:var(--paper); border:1px solid var(--rule); border-radius:18px; }
.fam-empty h3{ font-family:var(--font-serif); font-size:22px; color:var(--navy); margin-bottom:8px; }
:root[data-theme="dark"] .fam-empty h3{ color:var(--ink); }
.fam-empty p{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:18px; }
.fam-panel{ max-width:760px; margin:0 auto; }
.fam-card{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:18px 20px; margin-bottom:14px; }
.fam-card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.fam-card-h .t{ font-family:var(--font-serif); font-size:19px; color:var(--navy); font-weight:600; }
:root[data-theme="dark"] .fam-card-h .t{ color:var(--ink); }
.fam-chart-wrap{ width:100%; overflow:hidden; }
.fam-chart svg{ width:100%; height:auto; display:block; }
.fam-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-top:10px; }
.fam-legend i{ display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:5px; }
.fam-hist{ display:flex; flex-direction:column; gap:10px; }
.fam-row{ display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid var(--rule); border-radius:12px; background:var(--cream-deep); flex-wrap:wrap; }
:root[data-theme="dark"] .fam-row{ background:#0E1822; }
.fam-row .fr-date{ font-weight:600; color:var(--ink); font-size:14px; min-width:120px; }
.fam-row .fr-score{ font-family:var(--font-serif); font-size:22px; color:var(--navy); font-weight:600; }
:root[data-theme="dark"] .fam-row .fr-score{ color:var(--gold-soft); }
.fam-row .fr-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; row-gap:8px; }
.fam-mini-btn{ background:transparent; border:1px solid var(--rule); color:var(--ink-soft); border-radius:8px; padding:7px 12px; font-family:var(--font-sans); font-size:12.5px; font-weight:600; cursor:pointer; }
.fam-mini-btn:hover{ border-color:var(--gold); color:var(--ink); }
.fam-report-host{ margin-top:8px; }
/* On phones, the full report opened inside a row was using desktop-sized padding and a
   space-between header, which read as off-center. Center it and tame the padding. */
@media (max-width:680px){
  /* let the action buttons wrap instead of pushing the row (and the report) off-screen */
  .fam-row{ align-items:flex-start; }
  .fam-row .fr-date{ min-width:0; flex:1 1 auto; }
  .fam-row .fr-actions{ width:100%; margin-left:0; justify-content:flex-start; }
  /* keep the opened report fully inside the viewport */
  .fam-report-host{ max-width:100%; }
  .fam-report-host .home-view, .fam-report-host .aog-tm, .fam-report-host .aog-sustain,
  .fam-report-host .home-conversation, .fam-report-host .home-header{ max-width:100%; box-sizing:border-box; }
  .fam-report-host .home-view{ width:100%; }
  .fam-report-host .home-header{ flex-direction:column; align-items:center; text-align:center; padding:18px 16px; gap:10px; }
  .fam-report-host .home-header-id{ text-align:center; }
  .fam-report-host .home-header-id .home-name{ font-size:25px; }
  .fam-report-host .home-header-scores{ justify-content:center; width:100%; gap:14px; }
  .fam-report-host .home-domain-section{ padding-left:16px; padding-right:16px; }
  .fam-report-host .home-conversation{ padding:18px 16px; }
  /* tool & sustain grids/tables single-column so nothing overflows */
  .fam-report-host .aog-tm-grid, .fam-report-host .aog-srt-grid{ grid-template-columns:1fr; }
  .fam-report-host .aog-sus-tbl{ font-size:12.5px; }
}
.fam-actions-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:6px 0 26px; }

/* ===== print: isolate the individual report ===== */
#printReport{ display:none; }
@media print{
  body * { visibility:hidden !important; }
  #printReport, #printReport * { visibility:visible !important; }
  /* ⚠⚠ STATIC, NOT ABSOLUTE. Every body child is display:none on paper, so an
     absolutely-positioned host left the document with NO in-flow content at
     all. Blink paginates that anyway; WebKit does not — an iPad printed the
     right page count and blank paper. #aogShareView already carries the same
     ruling. Found 2026-09-07 on Jimmy's iPad, right on his Mac. */
  #printReport{ display:block !important; position:static; width:100%; padding:0 6mm; }
  .topbar, .tour-fab, .theme-toggle, .hyb-foot { display:none !important; }
  @page { margin:14mm; }
  .home-item{ break-inside:avoid; }
  .rc-card, .home-domain-section{ break-inside:avoid; }
}

/* ===== 3: resume bar ===== */
.resume-bar{ width:100%; margin:32px 0 0; background:var(--navy); color:var(--cream); }
.resume-bar-inner{ max-width:880px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:13px 7vw; font-family:var(--font-sans); }
.resume-ic{ flex:0 0 auto; color:var(--gold-soft); display:inline-flex; }
.resume-ic svg{ width:20px; height:20px; }
.resume-txt{ font-size:14px; font-weight:600; }
.resume-actions{ margin-left:auto; display:flex; gap:8px; flex:0 0 auto; }
.resume-go{ background:var(--gold-soft); color:var(--navy); border:none; border-radius:8px; padding:8px 16px; font-family:var(--font-sans); font-weight:700; font-size:13px; cursor:pointer; }
.resume-go:hover{ background:#fff; }
.resume-x{ background:transparent; color:var(--cream); border:1px solid rgba(244,238,226,.35); border-radius:8px; padding:8px 14px; font-family:var(--font-sans); font-weight:600; font-size:13px; cursor:pointer; }
.resume-x:hover{ background:rgba(244,238,226,.12); }
@media (max-width:560px){ .resume-bar-inner{ flex-wrap:wrap; padding:12px 6vw; } .resume-txt{ flex-basis:100%; } .resume-actions{ margin-left:0; } }

/* ===== usability: text-entry polish (mobile) ===== */
.reflection-card textarea{ -webkit-appearance:none; appearance:none; }
:root[data-theme="dark"] .reflection-card textarea:focus{ background:#0E1822; box-shadow:0 0 0 3px rgba(242,201,100,.18); border-color:var(--gold); }
@media (max-width:760px){
  .reflection-card textarea{ font-size:16px; min-height:150px; padding:15px 16px; line-height:1.6; }
  .reflection-card{ padding-left:18px; padding-right:18px; }
  #closingInput, input[type="text"], select{ font-size:16px; }
  .nav-row{ gap:10px; }
}

/* ===== video walkthrough slots ===== */
.vid-slot{ max-width:560px; margin:18px auto 0; border:1px solid var(--rule); border-radius:16px; overflow:hidden; background:var(--paper); }
.vid-frame{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); display:grid; place-items:center; }
.vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-play{ width:62px; height:62px; border-radius:50%; background:rgba(242,201,100,.95); display:grid; place-items:center; color:var(--navy); box-shadow:0 8px 22px rgba(0,0,0,.3); }
.vid-play svg{ width:26px; height:26px; margin-left:3px; }
.vid-cap{ padding:13px 18px; }
.vid-cap .vt{ font-family:var(--font-sans); font-weight:700; font-size:13.5px; color:var(--ink); }
.vid-cap .vs{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.vid-soon{ position:absolute; bottom:10px; right:12px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); background:rgba(6,12,24,.5); padding:3px 9px; border-radius:20px; }

/* ===== good-conversation examples ===== */
.gc-card{ max-width:760px; margin:0 auto 18px; background:var(--paper); border:1px solid var(--rule); border-radius:18px; overflow:hidden; }
.gc-head{ display:flex; align-items:center; gap:10px; padding:18px 22px; cursor:pointer; user-select:none; }
.gc-head .gt{ font-family:var(--font-serif); font-size:18px; color:var(--navy); font-weight:600; }
:root[data-theme="dark"] .gc-head .gt{ color:var(--ink); }
.gc-head .gchev{ margin-left:auto; color:var(--gold); transition:transform .2s; }
.gc-card.open .gchev{ transform:rotate(180deg); }
.gc-body{ display:none; padding:0 22px 20px; }
.gc-card.open .gc-body{ display:block; }
.gc-intro{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; }
.gc-ex{ border-left:3px solid var(--gold); padding:4px 0 4px 16px; margin:0 0 16px; }
.gc-ex .gc-when{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
.gc-turn{ font-size:14px; line-height:1.5; margin:5px 0; color:var(--ink); }
.gc-turn b{ color:var(--navy); }
:root[data-theme="dark"] .gc-turn b{ color:var(--gold-soft); }
.gc-note{ font-size:12.5px; color:var(--ink-faint); font-style:italic; margin-top:6px; }

/* ===== C (extended): educator dashboard + report surfaces in dark ===== */
:root[data-theme="dark"] .kpi{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .kpi-value{ color:var(--gold-soft); }
:root[data-theme="dark"] th{ background:#0E1822; color:var(--ink-soft); border-bottom-color:var(--rule); }
:root[data-theme="dark"] td{ border-bottom-color:var(--rule-soft); }
:root[data-theme="dark"] tr:hover td{ background:rgba(201,162,74,.12); }
:root[data-theme="dark"] th.sortable:hover, :root[data-theme="dark"] th.sorted{ color:var(--ink); }
:root[data-theme="dark"] .modal{ background:var(--paper); border:1px solid var(--rule); }
:root[data-theme="dark"] .modal h2{ color:var(--ink); }
:root[data-theme="dark"] .modal input{ background:#0E1822; color:var(--ink); border-color:var(--rule); }
:root[data-theme="dark"] .filter-bar select,
:root[data-theme="dark"] .ri-toolbar select,
:root[data-theme="dark"] .lib-cat{ background:#0E1822; }
:root[data-theme="dark"] .lib-cat{ background:transparent; }
:root[data-theme="dark"] .rc-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .home-item-detail{ background:#0E1822; border-color:var(--rule); }
:root[data-theme="dark"] .home-item .hid-con,
:root[data-theme="dark"] .home-item .hid-bk{ color:var(--gold-soft); }
:root[data-theme="dark"] .door{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .eco-detail{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .eco-detail .ed-title{ color:var(--ink); }
:root[data-theme="dark"] .display{ color:var(--ink); }
:root[data-theme="dark"] .ov-summary{ background:#0E1822; color:var(--ink); }
:root[data-theme="dark"] .ov-summary strong{ color:var(--gold-soft); }
:root[data-theme="dark"] .dist-card{ background:var(--paper); border-color:var(--rule); }
:root[data-theme="dark"] .filter-bar{ background:#0E1822; border-color:var(--rule); }
:root[data-theme="dark"] .survey-stage .nav-row{ background:#101A24; }
:root[data-theme="dark"] .survey-stage .nav-row::before{ background:linear-gradient(to top,#101A24,transparent); }

/* ===== base ===== */
/* ===================================================================
   ITEM 6 · ACCESSIBILITY (A11y) — high-contrast + dyslexia-friendly font
   =================================================================== */
/* OpenDyslexic via CDN, with graceful system fallbacks if the font can't load. */
@font-face{
  font-family:"OpenDyslexic";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/opendyslexic-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.0.0/files/opendyslexic-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"OpenDyslexic";
  font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/opendyslexic-700.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.0.0/files/opendyslexic-latin-700-normal.woff2") format("woff2");
}

/* --- header control + popover --- */
.a11y-wrap{ position:relative; display:inline-flex; }
.a11y-btn.active{ border-color:var(--gold); color:var(--gold); }
.a11y-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:120;
  width:268px; max-width:80vw; padding:8px;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow-lg, 0 12px 30px rgba(0,0,0,.5));
}
.a11y-menu[hidden]{ display:none; }
.a11y-menu-h{ font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:6px 8px 8px; }
.a11y-row{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 8px; border:none; background:transparent; border-radius:10px;
  cursor:pointer; text-align:left; font-family:var(--font-sans); color:var(--ink);
  transition:background .12s var(--ease);
}
.a11y-row:hover{ background:rgba(217,163,59,.12); }
.a11y-row-tx{ flex:1 1 auto; display:flex; flex-direction:column; gap:1px; }
.a11y-row-t{ font-size:14px; font-weight:700; }
.a11y-row-s{ font-size:11.5px; color:var(--ink-soft); }
.a11y-switch{ flex:0 0 auto; position:relative; width:38px; height:22px; border-radius:999px; background:var(--rule); transition:background .15s var(--ease); }
.a11y-switch::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s var(--ease); }
.a11y-row[aria-checked="true"] .a11y-switch{ background:var(--gold); }
.a11y-row[aria-checked="true"] .a11y-switch::after{ transform:translateX(16px); }

/* --- dyslexia-friendly font: swap the two global font-family tokens --- */
:root.a11y-dyslexic{
  --font-sans:"OpenDyslexic","Comic Sans MS","Trebuchet MS",Verdana,sans-serif;
  --font-serif:"OpenDyslexic","Comic Sans MS","Trebuchet MS",Verdana,sans-serif;
}
:root.a11y-dyslexic body{ letter-spacing:.012em; word-spacing:.05em; line-height:1.7; }

/* --- high-contrast mode: strengthen text/background boundaries --- */
:root.a11y-contrast{
  --ink:#000; --ink-soft:#1c2230; --ink-faint:#3a4254; --rule:#4a4a4a; --rule-soft:#6a6a6a;
}
:root.a11y-contrast[data-theme="dark"]{
  --ink:#fff; --ink-soft:#e8edf5; --ink-faint:#c4ccd9; --rule:#9aa3b2; --rule-soft:#7c869a; --paper:#0c1622;
}
:root.a11y-contrast a:not(.btn):not(.brand):not(.topbar-back):not(.topbar-store):not(.hyb-cta):not(.hyb-door){ text-decoration:underline; text-underline-offset:2px; }
:root.a11y-contrast .btn, :root.a11y-contrast .card, :root.a11y-contrast .kpi,
:root.a11y-contrast input, :root.a11y-contrast select, :root.a11y-contrast .mode-card,
:root.a11y-contrast .domain-card, :root.a11y-contrast .a11y-switch{ border:1px solid var(--ink) !important; }
:root.a11y-contrast :focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
@media (max-width:600px){ .a11y-menu{ right:-6px; } }

/* ===================================================================
   ITEM 5 · AGES & STAGES — audience toggle + interpretive panel
   =================================================================== */
.ages-toggle-wrap{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.ages-toggle-label{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.ages-toggle{ display:inline-flex; background:var(--cream, rgba(10,30,51,.05)); border:1px solid var(--rule); border-radius:999px; padding:3px; }
:root[data-theme="dark"] .ages-toggle{ background:#0E1822; }
.ages-btn{ font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--ink-soft); background:transparent; border:none; padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .15s var(--ease), color .15s; }
.ages-btn:hover{ color:var(--ink); }
.ages-btn.active{ background:var(--navy); color:#fff; }
.ages-panel{ max-width:680px; margin:0 auto 22px; padding:16px 20px; border-radius:14px; border:1px solid var(--rule); border-left:4px solid var(--gold); background:var(--paper); box-shadow:var(--shadow-sm); }
.ages-panel.band-green{ border-left-color:var(--green); background:var(--green-bg); }
.ages-panel.band-amber{ border-left-color:var(--amber); background:var(--amber-bg); }
.ages-panel.band-red{ border-left-color:var(--red); background:var(--red-bg); }
.ages-panel-h{ font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.ages-panel-p{ font-family:var(--font-sans); font-size:15px; line-height:1.62; color:var(--ink); margin:0; }

/* ===================================================================
   ITEM 8 · CONTEXTUAL TOOLTIPS — floating, fixed-position (no layout shift)
   =================================================================== */
#aogTip{ position:fixed; z-index:2000; max-width:260px; padding:9px 12px; border-radius:10px; background:var(--navy); color:var(--cream); font-family:var(--font-sans); font-size:12.5px; font-weight:500; line-height:1.5; box-shadow:0 10px 30px -8px rgba(0,0,0,.5); pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease; }
#aogTip.on{ opacity:1; transform:translateY(0); }
#aogTip::after{ content:""; position:absolute; left:var(--tip-arrow,50%); bottom:-6px; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--navy); }
#aogTip.below::after{ top:-6px; bottom:auto; border-top-color:transparent; border-bottom-color:var(--navy); }
:root[data-theme="dark"] #aogTip{ background:#0E1822; color:var(--ink); border:1px solid var(--rule); }
:root[data-theme="dark"] #aogTip::after{ border-top-color:#0E1822; }
:root[data-theme="dark"] #aogTip.below::after{ border-bottom-color:#0E1822; }
[data-tip]{ cursor:help; }
[data-tip]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* ===== aog-body-styles-moved ===== */
/* Plain-language value prop — the first clear thing a newcomer reads */
        .hyb-vp{ position:relative; max-width:660px; margin:20px auto 0; text-align:center;
          font-family:var(--font-sans); font-size:clamp(15px,1.7vw,18px); line-height:1.55; font-weight:400;
          color:var(--cream); opacity:.96; }
        .hyb-vp strong{ font-weight:800; color:#fff; }
        .hyb-vp .hyb-vp-em{ font-family:var(--font-serif); font-style:italic; font-weight:600; color:var(--gold-soft); }
        .hyb-vp .hyb-vp-key{ color:var(--gold-soft); font-weight:700; }
        @media (max-width:600px){ .hyb-vp{ margin-top:16px; } }
        .hyb-lede{ max-width:644px; margin:16px auto 0; text-align:center; }
        .hyb-lede p{ font-family:var(--font-sans); font-size:15px; line-height:1.62; color:rgba(244,238,226,.82); margin:0 0 12px; }
        .hyb-lede p:last-child{ margin-bottom:0; }
        .hyb-lede .hl-lead{ font-size:16.5px; color:rgba(244,238,226,.95); }
        .hyb-lede .hl-close{ font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--gold-soft); margin-top:6px; }
        @media (max-width:600px){ .hyb-lede p{ font-size:14px; } .hyb-lede .hl-lead{ font-size:15px; } .hyb-lede .hl-close{ font-size:16px; } }
        .hyb-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
        .hyb-cta{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans); font-weight:800; font-size:16px; letter-spacing:.01em; border-radius:999px; padding:15px 30px; text-decoration:none; cursor:pointer; transition:background .15s var(--ease), transform .15s var(--ease), color .15s, border-color .15s; }
        .hyb-cta-primary{ color:var(--navy); background:var(--gold); border:1.5px solid var(--gold); box-shadow:0 8px 24px -6px rgba(0,0,0,.42); }
        .hyb-cta-primary:hover{ background:var(--gold-soft); transform:translateY(-1px); }
        .hyb-cta-secondary{ color:var(--gold-soft); background:rgba(242,201,100,.14); border:1.5px solid var(--gold); }
        .hyb-cta-secondary:hover{ background:var(--gold); color:var(--navy); transform:translateY(-1px); }
        @media (max-width:600px){ .hyb-cta{ width:100%; justify-content:center; font-size:15px; padding:14px 24px; } }

      /* ===== Hero elevation — eyebrow rule, trust line, pillar strip ===== */
      .hyb-eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 2px; }
      .hyb-eyebrow .ln{ height:1px; width:34px; background:linear-gradient(90deg,transparent,var(--gold)); }
      .hyb-eyebrow .ln.r{ background:linear-gradient(90deg,var(--gold),transparent); }
      .hyb-eyebrow .tx{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-soft); white-space:nowrap; }
      @media (max-width:600px){ .hyb-eyebrow .tx{ font-size:9.5px; letter-spacing:.22em; } .hyb-eyebrow .ln{ width:22px; } }

      .hyb-trust{ margin:18px auto 0; text-align:center; font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:.02em; color:rgba(244,238,226,.6); }
      .hyb-trust b{ color:var(--gold-soft); font-weight:700; }
      .hyb-trust .sep{ color:var(--gold-soft); opacity:.55; margin:0 8px; }
      @media (max-width:600px){ .hyb-trust{ font-size:12px; } .hyb-trust .sep{ margin:0 6px; } }

      .hyb-pillars{ display:flex; align-items:center; justify-content:center; gap:14px; margin:42px auto 6px; opacity:.5; }
      .hyb-pillars .ln{ height:1px; width:48px; background:linear-gradient(90deg,transparent,var(--gold-soft)); }
      .hyb-pillars .ln.r{ background:linear-gradient(90deg,var(--gold-soft),transparent); }
      .hyb-pillars .tx{ font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-soft); white-space:nowrap; }
      @media (max-width:640px){ .hyb-pillars{ gap:9px; margin-top:32px; } .hyb-pillars .ln{ width:16px; } .hyb-pillars .tx{ font-size:8.5px; letter-spacing:.12em; white-space:normal; } }

      /* ---- Homepage band shell (mirrors the .aog-what below-hero card pattern) ---- */
      #screen-welcome .p2-grow{ max-width:880px; margin:64px auto; background:var(--paper); border:1px solid var(--rule); border-radius:20px; padding:46px 7vw 40px; text-align:center; position:relative; box-shadow:0 18px 44px -16px rgba(10,30,51,.14); }
      #screen-welcome .p2-grow::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:84px; height:4px; background:linear-gradient(90deg,#F2C964,#D9A33B); border-radius:0 0 4px 4px; }
      .p2-grow .p2-ey{ font-family:var(--font-sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:700; }
      .p2-grow h2{ font-family:var(--font-serif); font-weight:600; font-size:clamp(27px,3.3vw,38px); color:var(--navy); margin:9px auto 12px; line-height:1.08; letter-spacing:-.01em; max-width:16ch; }
      .p2-grow .p2-lede{ font-family:var(--font-sans); font-size:15px; line-height:1.62; color:var(--ink-soft); margin:0 auto 6px; max-width:600px; }
      :root[data-theme="dark"] #screen-welcome .p2-grow{ background:#13314F; border-color:#1E4A72; }
      :root[data-theme="dark"] .p2-grow h2{ color:#fff; }

      /* ---- Shared horizontal chip-flow (homepage) ---- */
      .aogf-track{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:10px; max-width:760px; margin:30px auto 4px; }
      .aogf-chip{ position:relative; flex:0 1 auto; min-width:118px; max-width:170px; background:#fff; border:1px solid var(--rule); border-radius:14px; padding:13px 14px; text-align:left; box-shadow:var(--shadow-sm); }
      .aogf-chip .c-ey{ font-family:var(--font-sans); font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); display:block; }
      .aogf-chip .c-v{ font-family:var(--font-serif); font-size:14px; font-weight:600; color:var(--navy); line-height:1.28; margin-top:3px; }
      .aogf-chip.c-start{ border-color:var(--gold-soft); background:linear-gradient(180deg,var(--cream) 0%,#fff 100%); }
      .aogf-chip.c-end{ border-color:var(--gold); background:var(--navy); }
      .aogf-chip.c-end .c-ey{ color:var(--gold-soft); }
      .aogf-chip.c-end .c-v{ color:var(--cream); }
      .aogf-arrow{ align-self:center; color:var(--gold); font-size:17px; line-height:1; flex:0 0 auto; }
      :root[data-theme="dark"] .aogf-chip{ background:#16395B; border-color:#1E4A72; }
      :root[data-theme="dark"] .aogf-chip .c-v{ color:#fff; }
      :root[data-theme="dark"] .aogf-chip.c-start{ background:#13314F; }
      .p2-grow .p2-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; background:var(--navy); color:var(--cream); font-family:var(--font-sans); font-size:14.5px; font-weight:600; text-decoration:none; padding:12px 22px; border-radius:999px; transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out); box-shadow:var(--shadow-sm); }
      .p2-grow .p2-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
      .p2-grow .p2-cta .arr{ color:var(--gold-soft); transition:transform .18s var(--ease-out); }
      .p2-grow .p2-cta:hover .arr{ transform:translateX(4px); }
      :root[data-theme="dark"] .p2-grow .p2-cta{ background:var(--gold); color:var(--navy); }
      :root[data-theme="dark"] .p2-grow .p2-cta .arr{ color:var(--navy); }
      @media (max-width:560px){
        #screen-welcome .p2-grow{ padding:38px 22px 34px; }
        .aogf-track{ flex-direction:column; align-items:stretch; gap:6px; }
        .aogf-chip{ max-width:none; min-width:0; }
        .aogf-arrow{ transform:rotate(90deg); align-self:center; margin:1px 0; }
      }
      @media (prefers-reduced-motion: reduce){ .p2-grow .p2-cta, .p2-grow .p2-cta .arr{ transition:none; } }
      

        .hp-arch{ max-width:780px; margin:44px auto 0; text-align:center; }
        .hp-ey{ font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:9px; }
        .hp-arch h2{ font-family:var(--font-serif); font-weight:600; font-size:clamp(24px,3vw,33px); color:var(--cream); line-height:1.12; letter-spacing:-.01em; margin:0 auto 9px; }
        .hp-sub{ font-family:var(--font-sans); font-size:14.5px; line-height:1.56; color:rgba(244,238,226,.78); max-width:540px; margin:0 auto 24px; }
        .hp-structure{ max-width:680px; margin:0 auto; }
        /* the architrave the pillars hold up */
        .hp-lintel{ font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); background:linear-gradient(180deg,var(--gold-soft),var(--gold)); border-radius:13px 13px 4px 4px; padding:11px 14px; box-shadow:0 8px 22px -10px rgba(0,0,0,.55); }
        /* four columns */
        .hp-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 0; }
        .hp-pillar{ background:rgba(255,255,255,.05); border:1px solid rgba(242,201,100,.22); border-top:2px solid var(--gold); border-radius:6px; padding:17px 11px 19px; display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .18s var(--ease), background .18s var(--ease); }
        .hp-pillar:hover{ transform:translateY(-3px); background:rgba(255,255,255,.08); }
        .hp-emblem{ width:34px; height:34px; color:var(--gold-soft); display:grid; place-items:center; }
        .hp-emblem svg{ width:34px; height:34px; }
        .hp-name{ font-family:var(--font-serif); font-size:16.5px; font-weight:600; color:var(--cream); line-height:1.15; }
        .hp-desc{ font-family:var(--font-sans); font-size:11.5px; line-height:1.42; color:rgba(244,238,226,.72); }
        /* the foundation */
        .hp-base{ font-family:var(--font-serif); font-style:italic; font-size:13.5px; color:var(--gold-soft); background:rgba(242,201,100,.10); border:1px solid rgba(242,201,100,.22); border-radius:4px 4px 13px 13px; padding:10px 14px; }
        @media (max-width:600px){
          .hp-arch{ margin-top:36px; }
          .hp-cols{ grid-template-columns:repeat(2,1fr); }
          .hp-name{ font-size:15.5px; }
        }
        @media (prefers-reduced-motion: reduce){ .hp-pillar{ transition:none; } }
        

    .fw-hero{ position:relative; margin:6px calc(50% - 50vw) 0; width:100vw; padding:32px 7vw 28px; background:radial-gradient(125% 150% at 50% 0%, #244D75 0%, #143049 55%, #07151F 100%); text-align:center; overflow:hidden; }
    .fw-hero::before{ content:""; position:absolute; top:-30%; right:-5%; width:55%; height:160%; background:radial-gradient(circle, rgba(242,201,100,.15), transparent 65%); pointer-events:none; }
    .fw-hero .fw-ey{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-soft); }
    .fw-hero h1{ font-family:var(--font-serif); font-weight:600; font-size:clamp(28px,4vw,44px); line-height:1.05; color:#fff; margin:8px 0 10px; letter-spacing:-.01em; }
    .fw-hero p{ max-width:620px; margin:0 auto; font-family:var(--font-sans); font-size:clamp(16px,2vw,19px); line-height:1.55; color:rgba(244,238,226,.86); }
    .fw-wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }
    .fw-sec{ padding:54px 0; border-top:1px solid var(--rule); }
    .fw-sec:first-of-type{ border-top:none; }
    .fw-num{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
    .fw-h{ font-family:var(--font-serif); font-weight:600; font-size:clamp(26px,3.4vw,38px); line-height:1.1; color:var(--ink); margin:8px 0 6px; letter-spacing:-.01em; }
    .fw-sub{ font-family:var(--font-sans); font-size:15px; color:var(--ink-soft); margin:0 0 26px; max-width:60ch; }
    /* 1 — problem */
    .fw-quote{ position:relative; background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:16px; padding:30px 34px; box-shadow:var(--shadow-sm); }
    .fw-quote p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.3vw,23px); line-height:1.5; color:var(--ink); margin:0; }
    /* 2 — pillars */
    .fw-pillars{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .fw-pillar{ background:var(--paper); border:1px solid var(--rule); border-radius:16px; padding:24px 24px 22px; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
    .fw-pillar:hover{ transform:translateY(-3px); box-shadow:0 16px 38px -18px rgba(10,30,51,.4); }
    .fw-pillar-ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(217,163,59,.12); border:1px solid rgba(217,163,59,.32); color:var(--navy); margin-bottom:14px; }
    :root[data-theme="dark"] .fw-pillar-ic{ color:var(--gold-soft); }
    .fw-pillar-ic svg{ width:23px; height:23px; }
    .fw-pillar h3{ font-family:var(--font-serif); font-weight:600; font-size:22px; color:var(--navy); margin:0 0 4px; }
    :root[data-theme="dark"] .fw-pillar h3{ color:var(--gold-soft); }
    .fw-pillar .fw-q{ font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--gold-deep,#9a6f24); margin:0 0 9px; }
    :root[data-theme="dark"] .fw-pillar .fw-q{ color:var(--gold-soft); }
    .fw-pillar p{ font-family:var(--font-sans); font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
    /* 3 — grace over performance */
    .fw-gop{ background:linear-gradient(180deg,#FFFFFF,#FBF6EC); border:1px solid var(--rule); border-radius:22px; padding:34px clamp(20px,4vw,44px); color:var(--ink); box-shadow:0 18px 44px -24px rgba(10,30,51,.18); }
    .fw-gop .fw-num{ color:var(--gold-deep); }
    .fw-gop .fw-h{ color:var(--navy); }
    .fw-gop .fw-sub{ color:var(--ink-soft); }
    .fw-table{ display:grid; grid-template-columns:1fr auto 1fr; gap:0 0; margin-top:18px; border-radius:14px; overflow:hidden; }
    .fw-th{ font-family:var(--font-sans); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:14px 18px; }
    .fw-th-perf{ color:var(--ink-faint); }
    .fw-th-grace{ color:var(--gold-deep); text-align:right; }
    .fw-th-mid{ }
    .fw-row{ display:contents; }
    .fw-cell{ padding:15px 18px; font-family:var(--font-sans); font-size:clamp(15px,1.9vw,17px); border-top:1px solid var(--rule); display:flex; align-items:center; }
    .fw-cell-perf{ color:var(--ink-faint); }
    .fw-cell-grace{ color:var(--navy); font-weight:600; justify-content:flex-end; text-align:right; }
    .fw-cell-arrow{ border-top:1px solid var(--rule); display:grid; place-items:center; padding:0 8px; color:var(--gold-deep); }
    .fw-cell-arrow svg{ width:18px; height:18px; }
    .fw-gop-foot{ margin-top:18px; font-family:var(--font-sans); font-size:12.5px; color:var(--ink-faint); text-align:center; }
    /* 4 — how it works */
    .fw-flow{ display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap; margin-bottom:24px; }
    .fw-step{ flex:1 1 0; min-width:120px; text-align:center; background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:18px 12px; box-shadow:var(--shadow-sm); }
    .fw-step .fw-step-n{ font-family:var(--font-sans); font-size:11px; font-weight:700; color:var(--gold); letter-spacing:.12em; }
    .fw-step .fw-step-t{ font-family:var(--font-serif); font-weight:600; font-size:17px; color:var(--navy); margin-top:4px; }
    :root[data-theme="dark"] .fw-step .fw-step-t{ color:var(--ink); }
    .fw-arrow{ display:grid; place-items:center; color:var(--gold); flex:0 0 auto; padding:0 6px; }
    .fw-arrow svg{ width:22px; height:22px; }
    @media (max-width:760px){ .fw-flow{ flex-direction:column; align-items:stretch; } .fw-arrow{ transform:rotate(90deg); padding:6px 0; } }
    .fw-flow-note{ background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:14px; padding:20px 24px; }
    .fw-flow-note p{ font-family:var(--font-sans); font-size:15.5px; line-height:1.62; color:var(--ink); margin:0; }
    /* 5 — who it's for */
    .fw-who{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .fw-who-card{ background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--gold); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); }
    .fw-who-card h4{ font-family:var(--font-serif); font-weight:600; font-size:19px; color:var(--navy); margin:0 0 7px; }
    :root[data-theme="dark"] .fw-who-card h4{ color:var(--gold-soft); }
    .fw-who-card p{ font-family:var(--font-sans); font-size:13.8px; line-height:1.58; color:var(--ink-soft); margin:0; }
    /* 6 — the tool */
    .fw-tool{ text-align:center; background:linear-gradient(165deg,#FFF8E8,#F8EBCB); border:1px solid #E5D2A2; border-radius:20px; padding:40px clamp(20px,4vw,48px); }
    :root[data-theme="dark"] .fw-tool{ background:linear-gradient(165deg,#1c2c1a00,#13314F); border-color:var(--gold); }
    .fw-tool .fw-num{ color:var(--gold-deep,#9a6f24); }
    .fw-tool p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.4vw,24px); line-height:1.45; color:var(--navy); max-width:640px; margin:10px auto 22px; }
    :root[data-theme="dark"] .fw-tool p{ color:var(--ink); }
    .fw-cta{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans); font-weight:800; font-size:16.5px; color:var(--navy); background:var(--gold); border:1.5px solid var(--gold); border-radius:999px; padding:15px 34px; text-decoration:none; cursor:pointer; box-shadow:0 10px 28px -8px rgba(0,0,0,.4); transition:background .15s var(--ease), transform .15s var(--ease); }
    .fw-cta:hover{ background:var(--gold-soft); transform:translateY(-1px); }
    /* 7 — founder */
    .fw-founder{ display:flex; gap:24px; align-items:flex-start; background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:30px 32px; box-shadow:var(--shadow-sm); }
    .fw-founder-mark{ flex:0 0 auto; width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:var(--navy); color:var(--gold-soft); font-family:var(--font-serif); font-weight:600; font-size:34px; }
    .fw-founder p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(17px,2.1vw,21px); line-height:1.5; color:var(--ink); margin:0; }
    .fw-story{ max-width:64ch; margin:0 auto; }
    .fw-story p{ font-family:var(--font-sans); font-size:16px; line-height:1.72; color:var(--ink-soft); margin:0 0 17px; }
    .fw-story p:first-child{ font-size:17.5px; color:var(--ink); font-weight:500; }
    .fw-story strong{ color:var(--ink); font-weight:700; }
    .fw-story a{ color:var(--navy); font-weight:700; text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
    :root[data-theme="dark"] .fw-story p{ color:#C7D2DE; }
    :root[data-theme="dark"] .fw-story p:first-child{ color:#fff; }
    :root[data-theme="dark"] .fw-story strong{ color:#fff; }
    :root[data-theme="dark"] .fw-story a{ color:var(--gold-soft); }
    .fw-story-pillars{ list-style:none; margin:6px 0 20px; padding:0; display:grid; gap:11px; }
    .fw-story-pillars li{ font-family:var(--font-sans); font-size:15.5px; line-height:1.55; color:var(--ink-soft); padding-left:15px; border-left:2px solid var(--gold); }
    :root[data-theme="dark"] .fw-story-pillars li{ color:#C7D2DE; }
    .fw-note{ background:var(--cream); border:1px solid var(--gold-pale); border-radius:14px; padding:20px 22px; margin:26px 0 8px; }
    :root[data-theme="dark"] .fw-note{ background:#13314F; border-color:rgba(242,201,100,.25); }
    .fw-note-h{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:9px; }
    :root[data-theme="dark"] .fw-note-h{ color:var(--gold-soft); }
    .fw-note p{ margin:0 0 10px; font-size:15px; }
    .fw-note p:last-child{ margin-bottom:0; }
    .fw-story .fw-story-sign{ font-family:var(--font-serif); font-style:italic; font-size:18px; color:var(--ink); text-align:right; margin-top:20px; }
    :root[data-theme="dark"] .fw-story .fw-story-sign{ color:#fff; }
    .fw-close{ text-align:center; padding:48px 0 8px; }
    .fw-close a.sec{ display:inline-block; margin-top:16px; font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--gold-deep,#9a6f24); text-decoration:underline; text-underline-offset:2px; }
    :root[data-theme="dark"] .fw-close a.sec{ color:var(--gold-soft); }
    @media (max-width:760px){ .fw-pillars{ grid-template-columns:1fr; } .fw-who{ grid-template-columns:1fr; } .fw-founder{ flex-direction:column; align-items:center; text-align:center; } }
    @media (min-width:761px) and (max-width:980px){ .fw-who{ grid-template-columns:repeat(2,1fr); } }
  
    /* narrative + reveal restructure */
    .fw-intro{ max-width:680px; margin:8px auto 0; text-align:center; }
    .fw-intro p{ font-family:var(--font-sans); font-size:16px; line-height:1.66; color:var(--ink-soft); margin:0 0 14px; }
    .fw-intro p:last-child{ margin-bottom:0; }
    .fw-intro .fw-lead{ font-family:var(--font-serif); font-style:italic; font-size:clamp(19px,2.4vw,24px); line-height:1.45; color:var(--ink); }
    .fw-intro .fw-ask{ font-family:var(--font-serif); font-style:italic; font-size:clamp(17px,2.1vw,20px); color:var(--ink); }
    .fw-intro .fw-close-line{ font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.3vw,22px); color:var(--gold-deep,#9a6f24); margin-top:4px; }
    :root[data-theme="dark"] .fw-intro .fw-close-line{ color:var(--gold-soft); }
    .fw-intro .fw-mission-lead{ font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--gold-deep,#9a6f24); margin:8px 0 2px; }
    :root[data-theme="dark"] .fw-intro .fw-mission-lead{ color:var(--gold-soft); }
    .fw-founder{ max-width:680px; margin:30px auto 0; padding:22px 26px 4px; border-top:1px solid var(--rule); }
    .fw-founder-h{ font-family:var(--font-sans); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:9px; text-align:center; }
    :root[data-theme="dark"] .fw-founder-h{ color:var(--gold-soft); }
    .fw-founder p{ font-family:var(--font-sans); font-size:14.5px; line-height:1.66; color:var(--ink-soft); margin:0; text-align:left; }
    .fw-tabs{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:22px 0 0; }
    /* ===== Grace over Performance — framework graphic (image) ===== */
    .fw-arch{ max-width:860px; margin:30px auto 8px; border-radius:18px; overflow:hidden; line-height:0;
      box-shadow:0 22px 55px -26px rgba(10,30,51,.45); }
    .fw-arch img{ display:block; width:100%; height:auto; }
    /* Reusable warm page banner (Tools, Dashboard). Hides itself if the image is missing. */
    .aog-page-banner{ max-width:900px; margin:6px auto 22px; border-radius:16px; overflow:hidden; line-height:0;
      box-shadow:0 18px 45px -24px rgba(10,30,51,.4); }
    .aog-page-banner img{ display:block; width:100%; height:auto; }
    .fw-tab{ font-family:var(--font-sans); font-weight:700; font-size:14.5px; color:var(--navy); background:var(--paper); border:1.5px solid var(--gold); border-radius:999px; padding:12px 24px; cursor:pointer; transition:background .15s var(--ease), color .15s, transform .15s var(--ease); }
    :root[data-theme="dark"] .fw-tab{ color:var(--gold-soft); background:transparent; }
    .fw-tab:hover{ transform:translateY(-1px); background:var(--gold-pale); }
    .fw-tab.active{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
    .fw-panel{ /* slide-in animation removed — panels appear in place, no motion */ }
    .fw-panel[hidden]{ display:none !important; }
    #fw-panel-framework:not([hidden]){ display:flex; flex-direction:column; }
    .fw-panel .fw-sec:first-child{ border-top:none; padding-top:18px; }
    @keyframes fwReveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
    @media (prefers-reduced-motion: reduce){ .fw-panel{ animation:none; } }
  

        .hero-tank-wrap{ max-width:600px; margin:34px auto 4px; }
        .hero-tank-sub{ font-family:var(--font-sans); font-weight:600; font-size:14.5px; color:var(--gold-soft); margin:0 0 12px; letter-spacing:.01em; text-align:center; }
        /* Base tank styles — shared by the hero 60-second read. Restored here after the
           duplicate Workplace tank (which previously housed these definitions) was removed. */
        .wp-tank{ background:var(--paper); border:1px solid var(--gold); border-top:4px solid var(--gold); border-radius:18px; padding:30px 30px 26px; max-width:760px; margin:46px auto 0; box-shadow:var(--shadow-sm); }
        .wp-tank-head{ text-align:center; max-width:600px; margin:0 auto 16px; }
        .wp-tank-head .ey{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:6px; }
        .wp-tank-head h2{ font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--navy); line-height:1.2; }
        .wp-tank-head p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-top:8px; }
        .tk-item{ padding:14px 0; border-top:1px solid var(--rule-soft); }
        .tk-item:first-child{ border-top:none; }
        .tk-q{ font-size:15px; color:var(--ink); font-weight:500; margin-bottom:10px; }
        .tk-opts{ display:flex; flex-wrap:wrap; gap:8px; }
        .tk-pill{ flex:1 1 auto; min-width:118px; text-align:center; cursor:pointer; font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--rule); border-radius:999px; padding:9px 12px; transition:all .12s var(--ease); }
        .tk-pill:hover{ border-color:var(--gold); }
        .tk-pill.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
        .wp-tank .tk-go{ display:block; margin:18px auto 0; }
        .wp-tank-result{ margin-top:18px; border-radius:14px; padding:18px 20px; border:1px solid var(--rule); }
        .wp-tank-result .band{ font-family:var(--font-serif); font-size:19px; font-weight:600; margin-bottom:6px; }
        .wp-tank-result p{ font-size:14px; line-height:1.6; margin:0; }
        .wp-tank-result .flag{ margin-top:10px; font-size:12px; color:var(--ink-faint); font-style:italic; }
        .wp-tank-result.ok{ background:var(--green-bg); border-color:#bcd6bf; } .wp-tank-result.ok .band{ color:var(--green); }
        .wp-tank-result.low{ background:var(--amber-bg); border-color:#e3d199; } .wp-tank-result.low .band{ color:var(--amber); }
        .wp-tank-result.empty{ background:var(--red-bg); border-color:#e3b9b4; } .wp-tank-result.empty .band{ color:var(--red); }
        .wp-tank-result.warn{ background:var(--paper); }
        /* sits on the navy hero like the dashboard demo: paper card, deep lift, gold cap */
        .hero-tank.wp-tank{ margin:0 auto; max-width:600px; padding:24px 24px 22px; box-shadow:0 20px 54px -26px rgba(0,0,0,.6); }
        :root[data-theme="dark"] .hero-tank.wp-tank{ background:#13314F; border-color:var(--gold); }
        .hero-tank .wp-tank-head h2{ font-size:24px; }
        .hero-tank .wp-tank-head p{ font-size:13px; }
        /* the wow: a fuel gauge that fills to match the read */
        .tk-gauge{ margin:2px 0 12px; }
        .tk-gauge-track{ position:relative; height:16px; border-radius:999px; background:rgba(10,30,51,.10); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.16); }
        .tk-gauge-fill{ height:100%; width:0; border-radius:999px; transition:width 1.15s var(--ease-out); background:linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%) , currentColor; }
        .tk-gauge-label{ display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-top:9px; }
        .tk-gauge-label svg{ width:15px; height:15px; flex:0 0 auto; }
        .tk-gauge-pct{ color:var(--ink); }
        .wp-tank-result .tk-go2{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--font-sans); font-size:13.5px; font-weight:700; text-decoration:none; color:var(--navy); background:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:9px 18px; transition:transform .15s var(--ease), background .15s; }
        .wp-tank-result .tk-go2:hover{ transform:translateY(-1px); background:var(--gold-soft); }
        .wp-tank-result.empty .tk-go2, .wp-tank-result.low .tk-go2{ box-shadow:0 4px 14px rgba(0,0,0,.12); }
        .tk-tips{ margin-top:14px; padding-top:13px; border-top:1px solid var(--rule); }
        .tk-tips-h{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
        .tk-tips ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
        .tk-tips li{ position:relative; padding-left:22px; font-family:var(--font-sans); font-size:13.5px; line-height:1.55; color:var(--ink); }
        .tk-tips li::before{ content:""; position:absolute; left:4px; top:8px; width:7px; height:7px; border-radius:999px; background:var(--gold); }

        /* 2A: instant-results header inside the result screen */
        .tk-instant-top{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:12px; }
        .tk-instant-badge{ display:inline-flex; align-items:center; font-family:var(--font-sans); font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); background:var(--gold); border-radius:999px; padding:4px 11px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
        .tk-supports{ font-family:var(--font-sans); font-size:12.5px; font-weight:600; line-height:1.4; color:var(--ink-soft); }

        /* 2C: result text must not inherit the navy hero's light cream color.
           Force theme-aware ink so the "low tank" amber band stays readable in
           Day Mode (light text on light amber was unreadable). Band accent colors
           are set with higher specificity in the main sheet and are preserved. */
        .wp-tank-result, .wp-tank-result p{ color:var(--ink); }
        .wp-tank-result .flag{ color:var(--ink-faint); }

        /* Item 7: Grace Step micro-intervention callout + breathing animation */
        .grace-step{ margin:14px 0 4px; padding:16px 16px 14px; border-radius:14px; background:linear-gradient(180deg, rgba(242,201,100,.20), rgba(242,201,100,.07)); border:1.5px solid var(--gold); box-shadow:0 6px 18px -8px rgba(0,0,0,.3); }
        .grace-step-h{ display:flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); }
        .grace-step-h svg{ width:16px; height:16px; flex:0 0 auto; }
        :root[data-theme="dark"] .grace-step-h{ color:var(--gold-soft); }
        .grace-step-p{ font-family:var(--font-sans); font-size:14px; line-height:1.55; color:var(--ink); margin:8px 0 12px; }
        .grace-step-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:13.5px; font-weight:800; color:var(--navy); background:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:10px 20px; cursor:pointer; transition:transform .15s var(--ease), background .15s; }
        .grace-step-btn:hover{ transform:translateY(-1px); background:var(--gold-soft); }
        .grace-breath{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0 4px; }
        .grace-breath[hidden]{ display:none; }
        .grace-orb{ width:92px; height:92px; border-radius:999px; background:radial-gradient(circle at 50% 38%, var(--gold-soft), var(--gold)); box-shadow:0 0 0 8px rgba(242,201,100,.16), 0 8px 24px -6px rgba(0,0,0,.35); transform:scale(.6); }
        .grace-orb.gb-anim{ transition:transform var(--gb-dur,4s) ease-in-out; }
        .grace-cue{ font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--ink); min-height:24px; text-align:center; }
        @media (prefers-reduced-motion: reduce){ .grace-orb.gb-anim{ transition:none; } }
        @media (max-width:520px){ .hero-tank-wrap{ margin-top:26px; } .hero-tank.wp-tank{ padding:20px 16px 18px; } }
        

  /* trust strip shown on self-reflection intro screens */
  .pv-strip{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
    max-width:640px; margin:16px auto 0; padding:10px 18px; font-size:13px; color:var(--ink-soft);
    background:var(--rule-soft,#EFEADB); border:1px solid var(--rule); border-radius:999px; text-align:center; }
  .pv-strip svg{ width:15px; height:15px; flex:0 0 auto; color:var(--gold-deep,#9a6f24); }
  .pv-strip a{ color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold); white-space:nowrap; }
  .pv-strip a:hover{ color:var(--gold-deep,#9a6f24); }
  :root[data-theme="dark"] .pv-strip{ background:var(--navy-soft); border-color:rgba(255,255,255,.10); color:var(--cream); }
  :root[data-theme="dark"] .pv-strip a{ color:var(--gold-pale); border-bottom-color:var(--gold-soft); }
  /* "full details" link inside the workplace privacy card (dark bg) */
  .wp-priv-more{ text-align:center; margin:20px auto 0; }
  .wp-priv-more a{ color:var(--gold-soft); font-size:13px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(242,201,100,.5); }
  .wp-priv-more a:hover{ border-bottom-color:var(--gold-soft); }


  .support-card{ max-width:680px; margin:0 auto 22px; background:#FBF4E4; border:1px solid var(--gold); border-left:4px solid var(--gold); border-radius:12px; padding:15px 22px; text-align:left; }
  .support-card p{ font-size:13.5px; line-height:1.6; color:var(--ink); margin:0; }
  .support-card strong{ color:var(--navy); }
  

      .wp-skip{ text-align:center; margin:6px auto 0; }
      .wp-skip a{ font-size:13.5px; font-weight:600; color:var(--gold-deep,#9a6f24); text-decoration:none; border-bottom:1px solid var(--gold); }
      .wp-skip a:hover{ color:var(--navy); }
      :root[data-theme="dark"] .wp-skip a{ color:var(--gold-soft); }
      

  /* scoped wp- styles; reuse global tokens (navy/gold/Fraunces/Inter) */
  .wp-wrap{ max-width:880px; margin:0 auto; }
  .wp-eyebrow-rule{ display:flex; align-items:center; justify-content:center; gap:14px; margin:2px 0 14px; }
  .wp-eyebrow-rule .ln{ height:1px; width:46px; background:linear-gradient(90deg,transparent,var(--gold)); }
  .wp-eyebrow-rule .ln.r{ background:linear-gradient(90deg,var(--gold),transparent); }
  .wp-thesis{ max-width:760px; margin:30px auto 6px; text-align:center; }
  .wp-thesis p{ font-family:var(--font-serif); font-size:23px; line-height:1.5; color:var(--ink); font-weight:500; }
  .wp-thesis p em{ color:var(--gold-deep,#9a6f24); font-style:italic; }
  .wp-beats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:780px; margin:26px auto 4px; }
  .wp-beat{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:18px 16px; text-align:center; }
  .wp-beat .bt{ font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--navy); margin-bottom:4px; }
  .wp-beat .bs{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
  .wp-section-head{ text-align:center; max-width:680px; margin:54px auto 22px; }
  .wp-section-head .ey{ font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:8px; }
  .wp-section-head h2{ font-family:var(--font-serif); font-size:30px; font-weight:600; color:var(--navy); line-height:1.2; }
  .wp-section-head p{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin-top:10px; }
  .wp-who{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:840px; margin:0 auto; }
  .wp-who-card{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:18px; transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
  .wp-who-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .wp-who-card .ic{ width:38px; height:38px; border-radius:9px; background:rgba(217,163,59,.14); color:var(--gold-deep,#9a6f24); display:grid; place-items:center; margin-bottom:10px; }
  .wp-who-card .ic svg{ width:20px; height:20px; }
  .wp-who-card .wt{ font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--navy); margin-bottom:3px; }
  .wp-who-card .ws{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
  .wp-pillars{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:640px; margin:18px auto 0; }
  .wp-pillars .pill{ font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--navy); background:#FBF4E4; border:1px solid var(--gold); border-radius:999px; padding:6px 18px; }
  /* privacy promise — the make-or-break card */
  .wp-privacy{ background:linear-gradient(165deg,var(--navy-soft,#13314F),var(--navy)); color:#fff; border-radius:20px; padding:38px 36px; max-width:820px; margin:46px auto 0; box-shadow:var(--shadow-lg); }
  .wp-privacy .pe{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); text-align:center; margin-bottom:8px; }
  .wp-privacy h2{ font-family:var(--font-serif); font-size:30px; font-weight:600; text-align:center; line-height:1.2; margin-bottom:8px; }
  .wp-privacy .psub{ text-align:center; color:#C9D4E1; font-size:14.5px; line-height:1.6; max-width:560px; margin:0 auto 22px; }
  .wp-promises{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px 22px; max-width:680px; margin:0 auto; list-style:none; padding:0; }
  .wp-promises li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; color:#E7EDF4; }
  .wp-promises li svg{ width:19px; height:19px; flex:0 0 auto; color:var(--gold-soft); margin-top:1px; }
  /* launch card */
  .wp-launch{ background:var(--paper); border:1px solid var(--rule); border-radius:20px; padding:34px 32px; max-width:760px; margin:46px auto 0; box-shadow:var(--shadow-md); }
  .wp-launch .lh{ font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--navy); text-align:center; }
  .wp-launch .ls{ text-align:center; color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:8px auto 18px; max-width:520px; }
  .wp-launch .field{ max-width:420px; margin:0 auto 18px; }
  .wp-launch .field label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px; }
  .wp-launch .field .hint{ font-weight:400; color:var(--ink-faint); }
  .wp-launch .field input{ width:100%; padding:12px 14px; border:1px solid var(--rule); border-radius:10px; font-family:var(--font-sans); font-size:15px; color:var(--ink); background:#fff; }
  .wp-launch .field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,163,59,.18); }
  /* org soft-sell */
  .wp-org{ background:#FBF4E4; border:1px solid var(--gold); border-radius:18px; padding:32px 30px; max-width:820px; margin:46px auto 8px; text-align:center; }
  .wp-org .oe{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:8px; }
  .wp-org h2{ font-family:var(--font-serif); font-size:27px; font-weight:600; color:var(--navy); line-height:1.22; }
  .wp-org p{ font-size:14.5px; line-height:1.7; color:var(--ink); max-width:600px; margin:12px auto 20px; }
  .wp-org p strong{ color:var(--navy); }
  .wp-mission{ text-align:center; font-size:13px; color:var(--ink-faint); max-width:560px; margin:34px auto 0; line-height:1.6; }
  @media (max-width:720px){
    .wp-beats{ grid-template-columns:1fr; }
    .wp-who{ grid-template-columns:1fr; }
    .wp-promises{ grid-template-columns:1fr; }
    .wp-thesis p{ font-size:20px; }
  }
  

  .qs-card{ max-width:780px; margin:0 auto 20px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
  .qs-head{ padding:22px 26px 4px; border-top:4px solid var(--gold); }
  .qs-eyebrow{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
  .qs-title{ font-family:var(--font-serif); font-size:23px; line-height:1.16; color:var(--navy); margin:0 0 8px; }
  .qs-lede{ font-family:var(--font-sans); font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0; }
  .qs-steps{ list-style:none; margin:14px 0 0; padding:14px 18px 4px; display:grid; gap:11px; }
  @media(min-width:640px){ .qs-steps{ grid-template-columns:1fr 1fr; } }
  .qs-step{ display:flex; gap:13px; align-items:flex-start; padding:15px 16px; background:var(--cream); border:1px solid var(--rule-soft); border-radius:var(--radius); }
  .qs-num{ flex:0 0 auto; width:29px; height:29px; border-radius:50%; background:var(--navy); color:var(--gold-soft); font-family:var(--font-serif); font-weight:600; font-size:15px; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
  .qs-body{ min-width:0; }
  .qs-step-t{ font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:3px; }
  .qs-step-s{ font-family:var(--font-sans); font-size:13px; line-height:1.55; color:var(--ink-soft); }
  .qs-step-s strong{ color:var(--ink); font-weight:600; }
  .qs-jump{ margin-top:9px; background:transparent; border:0; padding:0; font-family:var(--font-sans); font-size:12.5px; font-weight:600; color:var(--amber); cursor:pointer; }
  .qs-jump:hover{ text-decoration:underline; }
  .qs-foot{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:10px 26px 22px; }
  .qs-video-frame{ display:none; } /* reveal + add an <iframe> here when the video is ready */
  .qs-note{ display:flex; align-items:flex-start; gap:9px; margin:0 26px; padding:13px 0 20px; border-top:1px solid var(--rule-soft); }
  .qs-note svg{ flex:0 0 auto; width:16px; height:16px; margin-top:1px; color:var(--gold); }
  .qs-note span{ font-family:var(--font-sans); font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
  .qs-note strong{ color:var(--navy); font-weight:600; }
  .qs-head{ position:relative; }
  .qs-toggle{ position:absolute; top:16px; right:18px; background:transparent; border:1px solid var(--rule); border-radius:999px; font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--ink-soft); padding:5px 12px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
  .qs-toggle:hover{ border-color:var(--gold); color:var(--navy); }
  .qs-caret{ transition:transform .15s ease; font-size:10px; }
  .qs-card.qs-collapsed .qs-caret{ transform:rotate(-90deg); }
  .qs-card.qs-collapsed .qs-lede,
  .qs-card.qs-collapsed .qs-steps,
  .qs-card.qs-collapsed .qs-foot,
  .qs-card.qs-collapsed .qs-note,
  .qs-card.qs-collapsed .qs-help,
  .qs-card.qs-collapsed .qs-data,
  .qs-card.qs-collapsed #aogIntroScript,
  .qs-card.qs-collapsed .qs-video-frame{ display:none; }
  .qs-card.qs-collapsed .qs-head{ padding:18px 26px; }
  /* Dark mode fix: the card panel uses --paper (goes dark) but the step tiles keep --cream
     (stays light). Adaptive --ink/--ink-soft therefore flip the wrong way, so we pin colors to
     the surface they sit on — light text on the dark panel, dark text on the cream tiles. */
  :root[data-theme="dark"] .qs-title{ color:var(--cream); }
  :root[data-theme="dark"] .qs-note strong{ color:var(--cream); }
  :root[data-theme="dark"] .qs-step-s{ color:#46506E; }
  :root[data-theme="dark"] .qs-step-s strong{ color:#0A1E33; }


        #about-view-howitworks .hiw-card{ max-width:760px; margin:0 auto; }
        .hiw-head{ text-align:center; max-width:600px; margin:0 auto 8px; }
        .hiw-lede{ font-size:15px; line-height:1.7; color:var(--ink); margin:14px auto 0; }
        .hiw-aud{ font-size:13px; line-height:1.6; color:var(--ink-soft); margin:10px auto 0; }
        .hiw-aud b{ color:var(--navy); font-weight:600; }
        :root[data-theme="dark"] .hiw-aud b{ color:var(--cream); }
        /* worked-example callout */
        .hiw-eg{ background:var(--cream-deep,#F4EFE0); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:12px; padding:14px 18px; margin:26px 0 8px; }
        .hiw-eg .eg-l{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:5px; }
        .hiw-eg .eg-q{ font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--navy); line-height:1.35; font-style:italic; }
        :root[data-theme="dark"] .hiw-eg{ background:#0E2942; }
        :root[data-theme="dark"] .hiw-eg .eg-q{ color:#fff; }
        /* vertical journey */
        .hiw-flow{ max-width:600px; margin:22px auto 4px; position:relative; }
        .hiw-step{ position:relative; padding:0 0 26px 56px; }
        .hiw-step:last-child{ padding-bottom:0; }
        .hiw-step::before{ content:""; position:absolute; left:18px; top:30px; bottom:-2px; width:2px; background:linear-gradient(var(--gold) 0%, var(--gold-pale) 100%); }
        .hiw-step:last-child::before{ display:none; }
        .hiw-node{ position:absolute; left:4px; top:2px; width:30px; height:30px; border-radius:50%; background:var(--gold-pale); color:var(--gold-deep,#9a6f24); display:grid; place-items:center; font-family:var(--font-serif); font-size:14px; font-weight:700; box-shadow:0 0 0 4px var(--paper); }
        .hiw-step.is-last .hiw-node{ background:var(--gold); color:var(--navy); }
        .hiw-ey{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); }
        .hiw-t{ font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--navy); line-height:1.2; margin:2px 0 5px; }
        .hiw-b{ font-size:14px; line-height:1.62; color:var(--ink-soft); }
        .hiw-b b{ color:var(--navy); font-weight:600; }
        :root[data-theme="dark"] .hiw-node{ box-shadow:0 0 0 4px #13314F; }
        :root[data-theme="dark"] .hiw-t{ color:#fff; }
        :root[data-theme="dark"] .hiw-b b{ color:var(--cream); }
        .hiw-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 4px; }
        @media (max-width:520px){ .hiw-step{ padding-left:48px; } .hiw-node{ width:26px; height:26px; font-size:13px; } .hiw-step::before{ left:16px; } }
        @media (prefers-reduced-motion: reduce){ #about-view-howitworks{ animation:none; } }
        

      .about-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--gold-pale); color:var(--gold-deep,#9a6f24); margin:0 0 14px; }
      .about-ic svg{ width:24px; height:24px; }
      :root[data-theme="dark"] .about-ic{ background:rgba(242,201,100,.16); color:var(--gold-soft); }
      .about-tiles{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
      .about-tile{ display:flex; align-items:center; gap:18px; width:100%; text-align:left; background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg); padding:22px 26px; box-shadow:var(--shadow-sm); cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
      .about-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gold-soft); }
      .about-tile:focus-visible{ outline:2px solid var(--gold-deep,#9a6f24); outline-offset:3px; }
      .about-tile .about-ic{ margin:0; flex:0 0 auto; }
      .about-tile .at-tx{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
      .about-tile .at-ey{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); }
      .about-tile .at-t{ font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--navy); line-height:1.2; }
      .about-tile .at-s{ font-size:13.5px; color:var(--ink-soft); line-height:1.45; }
      .about-tile .at-arr{ flex:0 0 auto; color:var(--gold); font-size:22px; }
      :root[data-theme="dark"] .about-tile{ background:#13314F; border-color:#1E4A72; }
      :root[data-theme="dark"] .about-tile:hover{ background:#16395B; }
      :root[data-theme="dark"] .about-tile .at-t{ color:#fff; }
      :root[data-theme="dark"] .about-tile .at-s{ color:#9FB0C4; }
      .about-view[hidden]{ display:none; }
      #about-index, .about-view{ scroll-margin-top: calc(var(--aog-topbar-h, 68px) + 70px); animation:aogFadeIn .28s var(--ease, ease) both; }
      .about-back{ display:flex; align-items:center; gap:8px; max-width:760px; width:100%; margin:0 auto 14px; padding:6px 2px; background:none; border:0; cursor:pointer; color:var(--navy); font-family:var(--font-sans); font-size:14px; font-weight:600; }
      .about-back svg{ width:18px; height:18px; }
      .about-back:hover{ color:var(--gold-deep,#9a6f24); }
      :root[data-theme="dark"] .about-back{ color:var(--gold-soft); }
      @media (prefers-reduced-motion: reduce){ .about-tile, #about-index, .about-view{ transition:none; animation:none; } }
            .about-page-title{ font-family:var(--font-serif); text-align:center; font-size:clamp(30px,4vw,46px); color:var(--navy); margin:8px 0 30px; letter-spacing:-.01em; }
      :root[data-theme="dark"] .about-page-title{ color:var(--cream); }
      

          #guide-resindex .ri-master-ey{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:7px; }
          #guide-resindex .ri-lead{ font-size:15.5px; line-height:1.62; color:var(--ink); margin:0 0 12px; font-weight:500; }
          #guide-resindex .ri-lead b{ color:var(--navy); font-weight:600; }
          :root[data-theme="dark"] #guide-resindex .ri-lead b{ color:var(--cream); }
          #guide-resindex .ri-hiw-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-size:13.5px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:1px; margin:0 0 20px; }
          #guide-resindex .ri-hiw-link:hover{ color:var(--gold-deep,#9a6f24); }
          :root[data-theme="dark"] #guide-resindex .ri-hiw-link{ color:var(--cream); }
          

            .aogwb-band{ margin-top:30px; padding-top:26px; border-top:1px solid var(--rule); }
            .aogwb-flag{ display:inline-block; font-family:var(--font-sans); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); background:var(--gold); padding:4px 11px; border-radius:999px; }
            .aogwb-band h3.aogwb-bh{ font-family:var(--font-serif); font-size:21px; color:var(--ink); margin:11px 0 4px; line-height:1.15; }
            .aogwb-band p.aogwb-bl{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); max-width:700px; margin:0; }
            .aogwb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:18px; }
            .aogwb-card{ display:flex; flex-direction:column; }
            .aogwb-kicker{ font-family:var(--font-sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:3px; }
            .aogwb-sub{ font-size:12.5px; font-style:italic; color:var(--ink-soft); margin:-1px 0 11px; line-height:1.45; }
            .aogwb-reframe{ margin:13px 0 0; padding:12px 15px; border-radius:9px; background:linear-gradient(90deg, rgba(217,163,59,.15), rgba(217,163,59,0)); border-left:2px solid var(--gold); font-size:13px; line-height:1.5; color:var(--ink); }
            .aogwb-toggle{ margin-top:15px; align-self:flex-start; font-family:var(--font-sans); font-weight:700; font-size:12.5px; color:var(--ink); background:transparent; border:1.5px solid var(--rule); border-radius:8px; padding:9px 16px; cursor:pointer; transition:border-color .18s ease, color .18s ease; }
            .aogwb-toggle:hover{ border-color:var(--gold); color:var(--gold); }
            .aogwb-module{ max-height:0; overflow:hidden; opacity:0; transition:max-height .55s ease, opacity .4s ease, margin .4s ease; }
            .aogwb-module.open{ max-height:1700px; opacity:1; margin-top:15px; }
            .aogwb-mi{ border-top:1px solid var(--rule); padding-top:15px; }
            .aogwb-pull{ font-family:var(--font-serif); font-size:15px; line-height:1.42; color:var(--ink); font-weight:500; margin:2px 0 15px; padding-left:13px; border-left:3px solid var(--gold); }
            .aogwb-seq{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; border:1px solid var(--rule); border-radius:10px; overflow:hidden; }
            .aogwb-seq li{ display:flex; gap:12px; align-items:flex-start; padding:11px 14px; background:var(--rule-soft); }
            .aogwb-seq li:nth-child(odd){ background:transparent; }
            .aogwb-seq .n{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--navy); font-family:var(--font-sans); font-size:11.5px; font-weight:700; display:grid; place-items:center; margin-top:1px; }
            .aogwb-seq .b strong{ display:block; font-size:13.5px; color:var(--ink); line-height:1.3; }
            .aogwb-seq .b em{ display:block; font-size:12px; color:var(--ink-soft); font-style:normal; line-height:1.5; margin-top:2px; }
            .aogwb-seq .src{ font-size:10.5px; color:var(--gold); font-weight:700; letter-spacing:.03em; }
            .aogwb-seq .anchor{ outline:2px solid var(--gold); outline-offset:-2px; }
            .aogwb-minis{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
            @media(max-width:520px){ .aogwb-minis{ grid-template-columns:1fr; } }
            .aogwb-mini{ background:var(--rule-soft); border:1px solid var(--rule); border-radius:9px; padding:13px 14px; }
            .aogwb-mini h4{ font-family:var(--font-sans); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
            .aogwb-mini p{ font-size:12.5px; line-height:1.5; color:var(--ink); margin:0; }
            .aogwb-mini p+p{ margin-top:6px; color:var(--ink-soft); }
            .aogwb-built{ margin-top:16px; font-size:12px; line-height:1.55; color:var(--ink-soft); }
            .aogwb-built b{ color:var(--gold); }
          

        .aog-acc-group{ max-width:760px; margin:6px auto 0; }
        .aog-acc{ background:#fff; border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow-sm); margin-bottom:10px; overflow:hidden; }
        :root[data-theme="dark"] .aog-acc{ background:var(--navy-soft); border-color:rgba(242,201,100,.14); }
        .aog-acc-head{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:transparent; border:0; cursor:pointer; padding:16px 18px; font-family:inherit; -webkit-appearance:none; appearance:none; color:var(--navy); transition:background .15s ease; }
        :root[data-theme="dark"] .aog-acc-head{ color:var(--gold-pale); }
        .aog-acc-head:hover{ background:var(--rule-soft); }
        :root[data-theme="dark"] .aog-acc-head:hover{ background:rgba(255,255,255,.04); }
        .aog-acc-head:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; border-radius:14px; }
        .aog-acc-title{ flex:1 1 auto; font-family:var(--font-serif); font-weight:600; font-size:17px; line-height:1.3; }
        .aog-chev{ flex:0 0 auto; width:21px; height:21px; color:var(--ink-faint); transition:transform .25s ease; }
        .aog-acc.open .aog-chev{ transform:rotate(180deg); }
        .aog-acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
        .aog-acc.open .aog-acc-body{ grid-template-rows:1fr; }
        .aog-acc-body > .aog-acc-inner{ overflow:hidden; }
        .aog-acc.open .aog-acc-inner{ padding:4px 20px 16px; border-top:1px solid var(--rule-soft); }
        :root[data-theme="dark"] .aog-acc.open .aog-acc-inner{ border-top-color:rgba(255,255,255,.08); }
        .aog-acc-inner > :first-child{ margin-top:12px; }
        

            .aog-diff{ max-width:920px; margin:26px auto 0; padding-top:22px; border-top:1px solid var(--rule); }
            .aog-diff .diff-ey{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:16px; }
            .diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
            @media(max-width:600px){ .diff-grid{ grid-template-columns:1fr; } }
            .diff-item{ background:var(--cream); border:1px solid var(--rule-soft); border-left:3px solid var(--gold); border-radius:12px; padding:14px 16px; }
            .diff-item--wide{ grid-column:1 / -1; }
            .diff-item .di-t{ font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:3px; }
            .diff-item .di-s{ font-family:var(--font-sans); font-size:12.8px; line-height:1.55; color:var(--ink-soft); }
          

            .doc-print-cta{ display:flex; align-items:center; gap:16px; margin-top:16px; padding:16px 20px; background:var(--cream); border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:12px; text-decoration:none; transition:border-color .18s, transform .18s, box-shadow .18s; }
            .doc-print-cta:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 20px rgba(27,58,95,.08); }
            .doc-print-cta .dpc-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--navy); color:var(--gold-soft); display:grid; place-items:center; }
            .doc-print-cta .dpc-ic svg{ width:21px; height:21px; }
            .doc-print-cta .dpc-tx{ flex:1; min-width:0; }
            .doc-print-cta .dpc-t{ display:block; font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--navy); }
            .doc-print-cta .dpc-s{ display:block; font-family:var(--font-sans); font-size:12.8px; line-height:1.5; color:var(--ink-soft); margin-top:2px; }
            .doc-print-cta .dpc-go{ flex:0 0 auto; font-family:var(--font-sans); font-weight:700; font-size:12.5px; color:var(--gold); white-space:nowrap; }
            .doc-print-cta.dpc-flash{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft), 0 10px 24px rgba(27,58,95,.14); transform:translateY(-2px); }
            @media(max-width:560px){ .doc-print-cta{ flex-wrap:wrap; } .doc-print-cta .dpc-go{ width:100%; } }
          

        .docnav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 24px; }
        .docnav-btn{ font-family:var(--font-sans); font-weight:700; font-size:13px; color:var(--ink-soft); background:transparent; border:1px solid var(--rule); border-radius:999px; padding:8px 16px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; }
        .docnav-btn:hover{ border-color:var(--gold); color:var(--navy); }
        .docnav-btn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
        :root[data-theme="dark"] .docnav-btn{ color:var(--ink-soft); border-color:var(--rule); }
        :root[data-theme="dark"] .docnav-btn:hover{ color:var(--cream); border-color:var(--gold); }
        :root[data-theme="dark"] .docnav-btn.active{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
        .docpane[hidden]{ display:none !important; }
        .dm-why{ max-width:640px; margin:0 0 22px; padding:0 0 18px; border-bottom:1px solid var(--rule); }
        .dm-why-ey{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-bottom:8px; }
        :root[data-theme="dark"] .dm-why-ey{ color:var(--gold-soft); }
        .dm-why p{ font-family:var(--font-serif); font-style:italic; font-size:clamp(16px,2vw,19px); line-height:1.5; color:var(--ink); margin:0; }
        

                .lp-prices{ list-style:none; margin:8px 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
                .lp-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--rule); border-radius:12px; background:var(--paper); }
                :root[data-theme="dark"] .lp-row{ background:var(--navy-soft); border-color:rgba(242,201,100,.14); }
                .lp-row .lp-tx{ flex:1 1 auto; min-width:0; }
                .lp-name{ font-family:var(--font-sans); font-weight:700; font-size:14px; color:var(--ink); line-height:1.25; }
                .lp-desc{ font-family:var(--font-sans); font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
                .lp-price{ font-family:var(--font-serif); font-weight:600; font-size:17px; color:var(--navy); white-space:nowrap; }
                :root[data-theme="dark"] .lp-price{ color:var(--gold-pale); }
                .lp-buy{ flex:0 0 auto; font-family:var(--font-sans); font-weight:700; font-size:13px; color:var(--navy); background:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:8px 16px; text-decoration:none; transition:transform .15s var(--ease), background .15s; white-space:nowrap; }
                .lp-buy:hover{ transform:translateY(-1px); background:var(--gold-soft); }
                .lp-best{ display:inline-block; font-family:var(--font-sans); font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--gold-pale); border-radius:999px; padding:2px 7px; margin-left:7px; vertical-align:middle; }
                .lp-ask{ font-family:var(--font-sans); font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
                .lp-ask a{ color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold); }
                .lp-ask a:hover{ color:var(--gold-deep,#9a6f24); }
              

   All classes are namespaced .st- / wrapped in .aog-store so they
   never collide with the welcome-screen .door styles.
   ============================================================ */
.aog-store{
  --st-surface:#ffffff; --st-border:#E4DAC5; --st-border-soft:#EFEADB;
  --st-ink:#0A1E33; --st-sub:#46506E; --st-faint:#8A92A6; --st-chip:#EDE6D6;
  --st-gold:#D9A33B; --st-gold-soft:#F2C964; --st-navy:#0A1E33; --st-navy-soft:#13314F;
  --st-ease:cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] .aog-store{
  --st-surface:#12222F; --st-border:#26405A; --st-border-soft:#1C3045;
  --st-ink:#EAF1F8; --st-sub:#9FB2C6; --st-faint:#7C8DA0; --st-chip:#1B2E40;
  --st-navy:#0E2238; --st-navy-soft:#1A3A5A;
}
.aog-store{font-family:var(--sans,"Inter",sans-serif);}
/* BACK TO TOP (2026-06): jumps back to the "Browse everything" doors */
.st-totop{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:3400;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--st-navy);color:var(--st-gold-soft);border:1px solid rgba(242,201,100,.4);box-shadow:0 12px 28px -10px rgba(0,0,0,.45);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s var(--st-ease),transform .2s var(--st-ease),background .15s;}
.st-totop.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.st-totop:hover{background:var(--st-navy-soft);}
.st-totop svg{display:block;}
@media (max-width:560px){.st-totop{right:16px;bottom:16px;width:44px;height:44px;}}

/* shelf headers */
.st-shelf{scroll-margin-top:88px;margin-top:42px;}
.st-shelf:first-child{margin-top:8px;}
.st-shelf-group{display:flex;align-items:center;gap:14px;margin:48px 0 2px;scroll-margin-top:88px;}
.st-shelf-group:first-of-type{margin-top:16px;}
.st-shelf-group-label{font-family:var(--sans,sans-serif);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--st-gold);white-space:nowrap;}
.st-shelf-group::after{content:"";height:1px;background:var(--st-border);flex:1;}
.st-shelf-group + .st-shelf{margin-top:10px;}
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 20px;flex-wrap:wrap;}
.st-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--st-gold);font-weight:700;margin-bottom:5px;}
.st-head h3{font-family:var(--serif,Georgia,serif);font-size:24px;font-weight:600;color:var(--st-ink);margin:0;line-height:1.1;}
.st-head p{font-size:13px;line-height:1.5;color:var(--st-sub);margin:0;max-width:440px;}

/* jump nav */
.st-jump{display:flex;flex-direction:column;gap:18px;margin:2px 0 16px;}
.st-jump-label{font-family:var(--sans,sans-serif);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--st-gold);margin:0 0 9px;}
.st-jump-row{display:flex;flex-wrap:wrap;gap:10px;}
.st-jump .st-door-chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans,sans-serif);font-size:13.5px;font-weight:700;color:var(--st-navy);text-decoration:none;background:var(--st-surface);border:1.5px solid var(--st-border);border-radius:13px;padding:11px 16px;box-shadow:0 1px 0 rgba(10,30,51,.04),0 10px 22px -18px rgba(10,30,51,.5);transition:transform .18s var(--st-ease),box-shadow .18s var(--st-ease),border-color .18s,background .18s;}
[data-theme="dark"] .st-jump .st-door-chip{color:var(--st-ink);}
.st-jump .st-dc-arrow{color:var(--st-gold);font-weight:800;font-size:15px;line-height:1;transition:transform .18s var(--st-ease);}
.st-jump .st-door-chip:hover{transform:translateY(-3px);border-color:var(--st-gold);background:var(--st-gold-soft);color:var(--st-navy);box-shadow:0 16px 30px -16px rgba(10,30,51,.45);}
[data-theme="dark"] .st-jump .st-door-chip:hover{background:rgba(242,201,100,.16);color:var(--st-ink);}
.st-jump .st-door-chip:hover .st-dc-arrow{transform:translateX(4px);}
@media (max-width:560px){ .st-jump-row{gap:8px;} .st-jump .st-door-chip{flex:1 1 calc(50% - 4px);justify-content:space-between;font-size:13px;padding:11px 13px;} }

/* ---- NOVEL DOORS (cover-forward, 5 across) ---- */
.st-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,168px));gap:16px 18px;justify-content:start;}
.st-door{background:var(--st-surface);border:1px solid var(--st-border);border-radius:15px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--st-ease),box-shadow .3s var(--st-ease),border-color .3s;}
.st-door:hover{transform:translateY(-3px);box-shadow:0 14px 28px -22px rgba(10,30,51,.40);border-color:var(--st-gold-soft);}
.st-cover{position:relative;display:block;overflow:hidden;background:#06121F;border-bottom:1px solid var(--st-border);}
.st-cover img{display:block;width:100%;height:auto;transition:transform .55s var(--st-ease);}
.st-door:hover .st-cover img{transform:scale(1.04);}
.st-seam{position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent);border-right:2px solid var(--st-gold-soft);transition:width .4s var(--st-ease);pointer-events:none;}
.st-door:hover .st-seam{width:10px;}
.st-knob{position:absolute;top:50%;left:12px;width:6px;height:6px;border-radius:50%;background:var(--st-gold-soft);box-shadow:0 0 0 3px rgba(242,201,100,.25);opacity:0;transform:translateY(-50%) scale(.4);transition:.4s var(--st-ease);pointer-events:none;}
.st-door:hover .st-knob{opacity:1;transform:translateY(-50%) scale(1);}
.st-enter{display:none;}
.st-door:hover .st-enter{opacity:1;transform:none;}
.st-door-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;}
.st-tags{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.st-chip{font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:999px;}
.st-chip-band{background:var(--st-navy);color:#F4EEE2;}
.st-chip-room{background:var(--st-chip);color:var(--st-navy-soft);}
[data-theme="dark"] .st-chip-room{color:var(--st-ink);}
.st-kicker{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--st-gold);font-weight:700;margin:0 0 4px;}
.st-title{font-family:var(--serif,Georgia,serif);font-size:16.5px;font-weight:600;color:var(--st-ink);margin:0 0 7px;line-height:1.15;}
.st-hook{font-size:12px;line-height:1.5;color:var(--st-sub);margin:0 0 13px;flex:1;}
.st-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
.st-price{font-family:var(--serif,Georgia,serif);font-size:17px;font-weight:600;color:var(--st-ink);}
.st-price-sub{font-family:var(--sans,sans-serif);font-size:10px;font-weight:500;color:var(--st-faint);}
/* clickable price labels — add to cart on click (belt-and-suspenders with the buttons) */
.st-price-buy{cursor:pointer;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1.5px solid var(--st-gold,#D9A33B);border-radius:999px;padding:5px 13px 5px 11px;margin:2px 0;background:color-mix(in srgb, var(--st-gold,#D9A33B) 12%, transparent);transition:background .15s,color .15s,transform .1s,box-shadow .15s;}
.st-price-buy::before{content:"+";font-weight:800;font-size:1.1em;line-height:1;color:var(--st-gold-deep,#9a6f24);}
.st-price-buy:hover{background:var(--st-gold,#D9A33B);color:var(--st-navy,#0A1E33);transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(10,30,51,.45);}
.st-price-buy:hover::before{color:var(--st-navy,#0A1E33);}
.st-price-buy:active{transform:translateY(0);}
.st-price-buy:focus-visible{outline:2px solid var(--st-gold);outline-offset:1px;}
.st-buy{font-family:var(--sans,sans-serif);font-size:12px;font-weight:700;color:#fff;background:var(--st-navy);border:none;border-radius:8px;padding:9px 12px;cursor:pointer;transition:.18s;white-space:normal;line-height:1.25;}
.st-buy:hover{background:var(--st-navy-soft);}
.st-buy.st-added{background:var(--st-gold);color:var(--st-navy);}
.st-free{font-size:11.5px;font-weight:600;color:var(--st-navy-soft);text-decoration:none;border-top:1px solid var(--st-border-soft);padding-top:10px;transition:.18s;}
[data-theme="dark"] .st-free{color:var(--st-gold-soft);}
.st-free:hover{color:var(--st-gold);}

/* ---- MATERIAL CARDS (everything else) ---- */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.st-card{display:flex;gap:14px;background:var(--st-surface);border:1px solid var(--st-border);border-radius:14px;padding:16px;
  transition:transform .25s var(--st-ease),box-shadow .25s var(--st-ease),border-color .25s;}
.st-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(10,30,51,.45);border-color:var(--st-gold);}
.st-tile{flex:none;width:54px;height:64px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,0)),var(--c,#B0832E);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 16px -10px var(--c,#B0832E);position:relative;}
.st-tile::after{content:"";position:absolute;left:7px;top:7px;bottom:7px;width:2px;border-radius:2px;background:rgba(255,255,255,.35);}
.st-tile svg{width:26px;height:26px;position:relative;}
.st-card-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.st-grade{align-self:flex-start;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--c,#B0832E);padding:3px 8px;border-radius:999px;margin-bottom:6px;}
.st-card h4{font-family:var(--serif,Georgia,serif);font-size:15.5px;font-weight:600;color:var(--st-ink);margin:0 0 5px;line-height:1.18;}
.st-desc{font-size:12px;line-height:1.5;color:var(--st-sub);margin:0 0 12px;flex:1;}
.st-cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.st-cprice{font-family:var(--serif,Georgia,serif);font-size:17px;font-weight:600;color:var(--st-ink);}
.st-cprice.st-tag{font-family:var(--sans,sans-serif);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--st-faint);}
.st-cprice.st-free-txt{font-style:italic;color:#5C6B4A;font-size:15px;}
[data-theme="dark"] .st-cprice.st-free-txt{color:#9CC08A;}
.st-actions{display:inline-flex;align-items:center;gap:10px;}
.st-prev{font-size:12px;font-weight:700;color:var(--st-navy);background:var(--st-gold-soft);border-radius:8px;padding:8px 13px;text-decoration:none;white-space:nowrap;transition:.18s;}
.st-prev:hover{background:var(--st-gold);}
.st-mbuy{font-size:12px;font-weight:700;color:#fff;background:var(--st-navy);border:none;border-radius:8px;padding:9px 13px;cursor:pointer;transition:.18s;white-space:normal;line-height:1.25;}
.st-mbuy:hover{background:var(--st-navy-soft);}
.st-mbuy.st-added{background:var(--st-gold);color:var(--st-navy);}
.st-freebtn{font-size:12px;font-weight:700;color:var(--st-navy);background:var(--st-gold-soft);border-radius:8px;padding:8px 13px;text-decoration:none;white-space:nowrap;transition:.18s;}
.st-freebtn:hover{background:var(--st-gold);}
.st-soon{font-size:11.5px;font-weight:700;color:var(--st-faint);letter-spacing:.04em;text-transform:uppercase;}
/* DIGITAL + PRINT two-price layout (2026-06) */
.st-foot.st-foot-2{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;}
.st-prices{display:flex;flex-direction:column;gap:1px;}
.st-buys{display:flex;flex-direction:column;gap:6px;align-items:stretch;}
.st-buys .st-buy{width:100%;text-align:center;}
.st-cprices{display:flex;flex-direction:column;gap:1px;}
.st-cprice-sub{font-family:var(--sans,sans-serif);font-size:10px;font-weight:500;color:var(--st-faint);}
.st-prices .st-price,.st-cprices .st-cprice{font-size:15px;}
.st-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;}

/* toast */
.st-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--st-navy,#0A1E33);color:#F4EEE2;font-size:14px;font-weight:600;padding:12px 22px;border-radius:11px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transition:.3s var(--st-ease,cubic-bezier(0.16,1,0.3,1));z-index:9000;}
.st-toast.st-show{opacity:1;transform:translate(-50%,0);}

/* ===== P2 (2026-06-05) · MOBILE STORE DENSITY ==========================
   Reduce scroll fatigue on phones: product cards go 2-up and compact, and
   the novel "doors" shrink so they don't dominate the scroll. Scoped to
   <=768px so the desktop store is untouched. Declared after the older
   560px rule so these win where they overlap. ========================== */
@media (max-width:768px){
  /* product grid: 2-up, denser */
  .aog-store .st-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .aog-store .st-card{flex-direction:column;gap:9px;padding:11px;}
  .aog-store .st-tile{width:42px;height:50px;}
  .aog-store .st-tile svg{width:21px;height:21px;}
  .aog-store .st-card h4{font-size:14px;}
  .aog-store .st-desc{font-size:11.5px;line-height:1.45;margin-bottom:10px;}
  .aog-store .st-cfoot{flex-wrap:wrap;gap:8px;}
  .aog-store .st-cprice{font-size:15px;}
  .aog-store .st-mbuy,.aog-store .st-freebtn,.aog-store .st-prev{font-size:11.5px;padding:7px 11px;}
  /* novel doors: shrink the covers/text so the shelf scrolls less */
  .aog-store .st-doors{grid-template-columns:repeat(2,1fr);gap:12px;}
  .aog-store .st-door-body{padding:11px 12px 13px;}
  .aog-store .st-title{font-size:14.5px;}
  .aog-store .st-hook{font-size:11.5px;line-height:1.45;margin-bottom:10px;}
  .aog-store .st-price{font-size:15px;}
}
@media (max-width:420px){
  .aog-store .st-grid{gap:10px;}
  .aog-store .st-card{padding:10px;}
  .aog-store .st-doors{gap:10px;}
}



    .pv-wrap{ max-width:720px; margin:0 auto; padding:22px 20px 110px; }
    .pv-hero{ text-align:center; margin:8px 0 22px; }
    .pv-hero .eyebrow{ display:block; margin-bottom:12px; }
    .pv-title{ font-family:var(--font-serif); font-weight:500; color:var(--navy);
      font-size:clamp(26px,4.4vw,40px); line-height:1.1; letter-spacing:-0.01em; margin-bottom:12px; }
    :root[data-theme="dark"] .pv-title{ color:var(--gold-pale); }
    .pv-lede{ font-family:var(--font-serif); font-style:italic; color:var(--ink-soft);
      font-size:clamp(16px,2.1vw,19px); line-height:1.5; max-width:560px; margin:0 auto; }

    /* accordion */
    .pv-acc{ background:#fff; border:1px solid var(--rule); border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm); margin-bottom:11px; overflow:hidden; }
    :root[data-theme="dark"] .pv-acc{ background:var(--navy-soft); border-color:rgba(242,201,100,.14); }
    .pv-acc-head{ width:100%; display:flex; align-items:center; gap:14px; text-align:left;
      background:transparent; border:0; cursor:pointer; padding:18px 18px; font-family:inherit;
      -webkit-appearance:none; appearance:none; color:var(--navy); transition:background .15s ease; }
    :root[data-theme="dark"] .pv-acc-head{ color:var(--gold-pale); }
    .pv-acc-head:hover{ background:var(--rule-soft); }
    :root[data-theme="dark"] .pv-acc-head:hover{ background:rgba(255,255,255,.04); }
    .pv-acc-head:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; border-radius:var(--radius-lg); }
    .pv-acc-head .pv-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
      background:var(--gold-pale); color:var(--gold-deep,#9a6f24); }
    :root[data-theme="dark"] .pv-acc-head .pv-ic{ background:rgba(242,201,100,.16); color:var(--gold-soft); }
    .pv-acc-head .pv-ic svg{ width:20px; height:20px; }
    .pv-acc-title{ flex:1 1 auto; font-family:var(--font-serif); font-weight:600; font-size:17.5px; line-height:1.3; }
    .pv-chev{ flex:0 0 auto; width:22px; height:22px; color:var(--ink-faint); transition:transform .25s var(--ease,ease); }
    .pv-acc.open .pv-chev{ transform:rotate(180deg); }
    .pv-acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--ease,ease); }
    .pv-acc.open .pv-acc-body{ grid-template-rows:1fr; }
    .pv-acc-inner{ overflow:hidden; }
    .pv-acc.open .pv-acc-inner{ padding:2px 20px 22px; border-top:1px solid var(--rule-soft); }
    :root[data-theme="dark"] .pv-acc.open .pv-acc-inner{ border-top-color:rgba(255,255,255,.08); }
    .pv-acc-inner p{ font-size:14.6px; line-height:1.66; color:var(--ink); margin:12px 0 0; }
    .pv-acc-inner p:first-child{ margin-top:14px; }
    :root[data-theme="dark"] .pv-acc-inner p{ color:var(--cream); }
    .pv-list{ list-style:none; margin:8px 0 0; padding:0; }
    .pv-list li{ position:relative; padding:11px 0 11px 28px; font-size:14.3px; line-height:1.6;
      color:var(--ink); border-top:1px solid var(--rule-soft); }
    :root[data-theme="dark"] .pv-list li{ color:var(--cream); border-top-color:rgba(255,255,255,.08); }
    .pv-list li:first-child{ border-top:0; }
    .pv-list li::before{ content:""; position:absolute; left:2px; top:17px; width:8px; height:8px; border-radius:50%; background:var(--gold); }
    .pv-list.pv-never li::before{ background:var(--ink-faint); }
    .pv-list strong{ color:var(--navy); font-weight:600; }
    :root[data-theme="dark"] .pv-list strong{ color:var(--gold-pale); }

    /* data row accent */
    #pvAccData{ border-color:var(--gold-pale); box-shadow:var(--shadow-md); }
    :root[data-theme="dark"] #pvAccData{ border-color:rgba(242,201,100,.30); }
    #pvAccData .pv-ic{ background:var(--gold); color:var(--navy); }
    .pv-panel-sub{ font-size:13px; color:var(--ink-soft); margin:14px 0 16px; }
    .pv-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
    .pv-stat{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius); padding:15px 10px; text-align:center; }
    :root[data-theme="dark"] .pv-stat{ background:var(--navy); border-color:rgba(255,255,255,.08); }
    .pv-stat-n{ font-family:var(--font-serif); font-weight:600; font-size:28px; color:var(--gold-deep,#9a6f24); line-height:1; }
    :root[data-theme="dark"] .pv-stat-n{ color:var(--gold-soft); }
    .pv-stat-l{ font-size:11px; letter-spacing:.03em; color:var(--ink-soft); margin-top:7px; text-transform:uppercase; font-weight:600; }
    .pv-actions{ display:flex; flex-wrap:wrap; gap:10px; }
    .pv-actions .btn{ flex:1 1 auto; min-width:150px; }
    .pv-danger{ background:transparent !important; color:var(--red) !important; border:1px solid var(--red) !important; }
    .pv-danger:hover{ background:var(--red-bg) !important; }
    .pv-note{ font-size:12.5px; color:var(--ink-faint); margin-top:14px; line-height:1.55; }
    .pv-done{ display:none; margin-top:14px; padding:11px 14px; border-radius:var(--radius);
      background:var(--green-bg); color:var(--green); font-size:13.5px; font-weight:500; text-align:center; }
    .pv-close{ text-align:center; font-size:13px; color:var(--ink-faint); margin-top:24px; }
    /* trust strip (shared with self-reflection screens) */
    .pv-strip{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap;
      max-width:640px; margin:16px auto 0; padding:10px 18px; font-size:13px; color:var(--ink-soft);
      background:var(--rule-soft,#EFEADB); border:1px solid var(--rule); border-radius:999px; text-align:center; }
    .pv-strip svg{ width:15px; height:15px; flex:0 0 auto; color:var(--gold-deep,#9a6f24); }
    .pv-strip a{ color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold); white-space:nowrap; }
    .pv-strip a:hover{ color:var(--gold-deep,#9a6f24); }
    :root[data-theme="dark"] .pv-strip{ background:var(--navy-soft); border-color:rgba(255,255,255,.10); color:var(--cream); }
    :root[data-theme="dark"] .pv-strip a{ color:var(--gold-pale); border-bottom-color:var(--gold-soft); }
    .wp-priv-more{ text-align:center; margin:20px auto 0; }
    .wp-priv-more a{ color:var(--gold-soft); font-size:13px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(242,201,100,.5); }
    .wp-priv-more a:hover{ border-bottom-color:var(--gold-soft); }
    @media (max-width:520px){ .pv-stats{ grid-template-columns:1fr; } .pv-actions .btn{ flex:1 1 100%; } }
  

/* ===== TEACHER TOOLS INTERACTIVE STYLES ===== */
#screen-teacher-tools,
#screen-pecs {
  display: none;
}
#screen-teacher-tools.active,
#screen-pecs.active {
  display: block !important;
  position: fixed !important;
  top: var(--aog-topbar-h, 72px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  background: var(--paper) !important;
  overflow-y: auto !important;
  padding-top: 0 !important;
  -webkit-overflow-scrolling: touch;
}
:root[data-theme="dark"] #screen-teacher-tools.active,
:root[data-theme="dark"] #screen-pecs.active {
  background: var(--navy-deep, #060f1a) !important;
}
/* Internal topbar inside tool screens sticks within the fixed scroll container */
#screen-teacher-tools .topbar,
#screen-pecs .topbar {
  position: sticky;
  top: 0;
  z-index: 101;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
:root[data-theme="dark"] #screen-teacher-tools .topbar,
:root[data-theme="dark"] #screen-pecs .topbar {
  background: var(--navy-deep, #060f1a);
}
#screen-teacher-tools .container,
#screen-pecs .container {
  padding-top: 8px;
}
.tool-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(10,30,51,0.92); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 20px;
}
.tool-modal-overlay.open { display: flex; }
.tool-modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  max-width: 520px; width: 92%;
  max-height: 94vh; overflow-y: auto;
  box-shadow: var(--shadow-xl);
  padding: 18px 20px 16px;
  position: relative;
  text-align: center;
}
:root[data-theme="dark"] .tool-modal { background: var(--navy-soft); }
.tool-modal-close {
  /* Sticky, not absolute: the modal itself is the scroll container, so an
     absolute ✕ scrolls away with the content — on a phone, a long tool
     (conversation starters) left no visible way out. Sticky keeps it at the
     top edge; the negative margin keeps the layout the absolute version had. */
  position: sticky; top: 0; z-index: 6;
  display: block; width: max-content; margin: -4px -6px -24px auto;
  background: inherit; border: none; border-radius: 999px;
  padding: 4px 7px; font-size: 22px; cursor: pointer;
  color: var(--ink-faint); line-height: 1;
}
.tool-modal-header { text-align: center; margin-bottom: 12px; }
.tool-modal-icon { font-size: 38px; margin-bottom: 4px; line-height: 1.1; }
.tool-modal-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
:root[data-theme="dark"] .tool-modal-title { color: var(--cream); }
.tool-modal-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.45; }

/* Orb breathing */
.tool-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 8px 0 20px; }
.tool-orb {
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--gold-soft), var(--gold));
  box-shadow: 0 0 0 12px rgba(242,201,100,.14), 0 8px 28px -6px rgba(0,0,0,.3);
  transform: scale(.55); transition: transform 4s ease-in-out;
}
.tool-cue { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink); min-height: 28px; }
:root[data-theme="dark"] .tool-cue { color: var(--cream); }
.tool-counter { font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); margin-top: 4px; }

/* Step-through guide */
.tool-steps { text-align: left; }
.tool-step-item { display: none; padding: 16px 0; }
.tool-step-item.active { display: block; }
.tool-step-num { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.tool-step-text { font-size: 16px; line-height: 1.6; color: var(--ink); }
:root[data-theme="dark"] .tool-step-text { color: var(--cream); }
.tool-step-progress { display: flex; gap: 6px; justify-content: center; margin: 16px 0; }
.tool-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); transition: background .2s; }
.tool-step-dot.done { background: var(--gold); }

/* Emotion wheel grid */
.emotion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 20px; }
.emotion-btn {
  padding: 12px 8px; border-radius: var(--radius); border: 2px solid var(--rule);
  background: white; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--ink); transition: all .15s; line-height: 1.3;
}
:root[data-theme="dark"] .emotion-btn { background: var(--navy-soft); color: var(--cream); }
.emotion-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.emotion-btn.selected { border-color: var(--gold); background: var(--gold-pale); }
.emotion-response { display: none; margin: 8px 0 16px; padding: 14px 16px; background:var(--rule-soft,#EFEADB); border-radius: var(--radius); font-size: 14px; line-height: 1.6; color: var(--ink); }
:root[data-theme="dark"] .emotion-response { background: rgba(255,255,255,.06); color: var(--cream); }
.emotion-response.visible { display: block; }

/* Timer ring */
.timer-ring-wrap { position: relative; width: 100px; height: 100px; margin: 0 auto 12px; }
.timer-ring-svg { transform: rotate(-90deg); }
.timer-ring-bg { fill: none; stroke: var(--rule); stroke-width: 6; }
.timer-ring-prog { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.timer-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--navy); }
:root[data-theme="dark"] .timer-ring-num { color: var(--cream); }

/* Tool card 3D tilt */
#screen-teacher-tools .tool-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Loading / success button states */
#screen-teacher-tools .tool-card button.loading {
  opacity: 0.7;
  cursor: wait;
  background: var(--rule) !important;
}
#screen-teacher-tools .tool-card button.success {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
}

/* Row headers + coreg card */
.tools-row-header {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 28px 0 12px;
  font-weight: 600;
}
.tool-card-coreg { border-color: var(--gold) !important; background: var(--cream) !important; }
.tool-card-coreg:hover { border-color: var(--navy) !important; }
/* The coreg card is always cream — pin its text to dark in both themes so it stays legible in dark mode. */
.tool-card-coreg .tool-title { color: #0A1E33 !important; }
.tool-card-coreg .tool-desc { color: #46506E !important; }
.tool-card-coreg .btn-secondary { color: #0A1E33 !important; border-color: #0A1E33 !important; background: transparent !important; }
.tool-card-coreg .btn-secondary:hover { background: #0A1E33 !important; color: var(--cream) !important; }

@media (max-width: 600px) {
  .tool-modal { padding: 14px 14px 14px; }
  .emotion-grid { grid-template-columns: repeat(2, 1fr); }
}
@keyframes jarShake {
  0%   { transform: rotate(-12deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(-8deg); }
  75%  { transform: rotate(6deg); }
  100% { transform: rotate(0); }
}


@media (max-width:560px){.st-doors{grid-template-columns:1fr 1fr;gap:12px;} .st-title{font-size:15px;} .st-grid{grid-template-columns:1fr;} .st-head{margin-bottom:14px;}}
/* ===== AoG CART (interim, no checkout backend) ===== */
.topbar-cart{position:relative;display:inline-grid;place-items:center;width:38px;height:34px;border-radius:9px;border:1px solid var(--rule);background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s,border-color .15s;padding:0;margin-right:10px;}
.topbar-cart:hover{background:rgba(127,127,127,.12);color:var(--ink);}
.topbar-cart svg{width:18px;height:18px;}
.aogcart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--gold);color:#0A1E33;font-family:var(--font-sans);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 6px -1px rgba(10,30,51,.5);}
.aogcart-badge[hidden]{display:none;}
@keyframes aogCartBump{0%{transform:scale(1);}30%{transform:scale(1.45);}100%{transform:scale(1);}}
.aogcart-badge.bump{animation:aogCartBump .42s var(--ease,ease);}
:root[data-theme="dark"] .topbar-cart{color:var(--cream);}

.aogcart-overlay{position:fixed;inset:0;background:rgba(6,18,31,.55);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:9500;}
.aogcart-overlay.open{opacity:1;pointer-events:auto;}
.aogcart-drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(390px,92vw);background:var(--paper,#FCF8F0);border-left:1px solid var(--rule);box-shadow:-24px 0 60px -30px rgba(6,18,31,.6);transform:translateX(110%);transition:transform .32s cubic-bezier(.16,1,.3,1);z-index:9600;display:flex;flex-direction:column;font-family:var(--font-sans);}
.aogcart-drawer.open{transform:none;}
:root[data-theme="dark"] .aogcart-drawer{background:#0E1822;border-left-color:#1E4A72;}

.aogcart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--rule);}
.aogcart-head h3{font-family:var(--font-serif,Georgia,serif);font-size:21px;font-weight:600;color:var(--navy);margin:0;}
:root[data-theme="dark"] .aogcart-head h3{color:#fff;}
.aogcart-close{background:none;border:none;font-size:26px;line-height:1;color:var(--ink-faint);cursor:pointer;padding:0 4px;transition:color .15s;}
.aogcart-close:hover{color:var(--navy);}
:root[data-theme="dark"] .aogcart-close:hover{color:var(--cream);}

.aogcart-items{flex:1;overflow-y:auto;padding:8px 22px;}
.aogcart-empty{text-align:center;color:var(--ink-faint);font-size:14px;padding:48px 10px;line-height:1.6;}
.aogcart-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"info rm" "qty line";gap:6px 10px;padding:16px 0;border-bottom:1px solid var(--rule-soft,#EFEADB);}
:root[data-theme="dark"] .aogcart-row{border-bottom-color:#1C3045;}
.aogcart-rinfo{grid-area:info;min-width:0;}
.aogcart-rtitle{font-family:var(--font-serif,Georgia,serif);font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.25;}
:root[data-theme="dark"] .aogcart-rtitle{color:#EAF1F8;}
.aogcart-rprice{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
.aogcart-rrm{grid-area:rm;align-self:start;background:none;border:none;font-size:18px;color:var(--ink-faint);cursor:pointer;padding:0 2px;transition:color .15s;}
.aogcart-rrm:hover{color:#B23A3A;}
.aogcart-qty{grid-area:qty;display:inline-flex;align-items:center;gap:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;align-self:center;}
.aogcart-qty button{width:28px;height:28px;border:none;background:transparent;color:var(--navy);font-size:15px;font-weight:700;cursor:pointer;transition:background .15s;}
.aogcart-qty button:hover{background:rgba(127,127,127,.12);}
:root[data-theme="dark"] .aogcart-qty button{color:var(--cream);}
.aogcart-qty span{min-width:30px;text-align:center;font-size:13px;font-weight:700;color:var(--navy);}
:root[data-theme="dark"] .aogcart-qty span{color:var(--cream);}
.aogcart-rline{grid-area:line;align-self:center;justify-self:end;font-family:var(--font-serif,Georgia,serif);font-size:15px;font-weight:600;color:var(--navy);}
:root[data-theme="dark"] .aogcart-rline{color:#EAF1F8;}
.aogcart-rline.req{font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.04em;}

.aogcart-foot{border-top:1px solid var(--rule);padding:18px 22px calc(22px + env(safe-area-inset-bottom));background:var(--cream,#F4EEE2);}
:root[data-theme="dark"] .aogcart-foot{background:#0B1622;border-top-color:#1E4A72;}
.aogcart-subtotal{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.aogcart-subtotal span{font-size:13px;color:var(--ink-soft);font-weight:600;}
:root[data-theme="dark"] .aogcart-subtotal span{color:#9FB0C4;}
.aogcart-subtotal strong{font-family:var(--font-serif,Georgia,serif);font-size:22px;font-weight:600;color:var(--navy);}
:root[data-theme="dark"] .aogcart-subtotal strong{color:#fff;}
.aogcart-note{font-size:11.5px;line-height:1.5;color:var(--ink-faint);margin:0 0 14px;}
.aogcart-request{width:100%;border:none;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--font-sans);font-size:14px;font-weight:700;padding:13px;cursor:pointer;transition:background .15s,opacity .15s;}
.aogcart-request:hover{background:#13314F;}
.aogcart-request:disabled{opacity:.45;cursor:not-allowed;}
:root[data-theme="dark"] .aogcart-request{background:var(--gold);color:#0A1E33;}
:root[data-theme="dark"] .aogcart-request:hover{background:var(--gold-soft);}
.aogcart-altrow{display:flex;gap:10px;margin-top:10px;}
.aogcart-altrow button{flex:1;border:1px solid var(--rule);border-radius:9px;background:transparent;color:var(--navy);font-family:var(--font-sans);font-size:12.5px;font-weight:600;padding:10px;cursor:pointer;transition:border-color .15s,color .15s;}
.aogcart-altrow button:hover{border-color:var(--gold);color:var(--gold);}
:root[data-theme="dark"] .aogcart-altrow button{color:var(--cream);}
@media (max-width:480px){.topbar-cart{margin-right:6px;}}

/* persistent top-bar Store link */
.topbar-store{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;margin-right:14px;white-space:nowrap;cursor:pointer;padding:6px 13px;border:1px solid var(--gold);border-radius:999px;background:var(--gold-pale);transition:background .15s,color .15s,transform .15s;}
.topbar-store:hover{background:var(--gold);color:var(--navy);transform:translateY(-1px);}
.topbar-store svg{color:var(--gold);}
.topbar-store:hover svg{color:var(--navy);}
:root[data-theme="dark"] .topbar-store{color:var(--cream);background:rgba(242,201,100,.16);border-color:rgba(242,201,100,.40);}
:root[data-theme="dark"] .topbar-store svg{color:var(--gold-soft);}
:root[data-theme="dark"] .topbar-store:hover{background:var(--gold-soft);color:var(--navy);}
@media (max-width:480px){.topbar-store{padding:7px 10px;margin-right:8px;}}
/* Self-Reflection — the single PRIMARY (filled) action; everything else stays an outline/pale pill */
.topbar-checkin{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:13px;font-weight:800;color:var(--cream,#FBF7EC);text-decoration:none;margin-right:14px;white-space:nowrap;cursor:pointer;padding:6px 15px;border:1px solid var(--navy);border-radius:999px;background:var(--navy);box-shadow:0 1px 4px rgba(10,30,51,.18);transition:transform .15s,filter .15s;}
.topbar-checkin:hover{transform:translateY(-1px);filter:brightness(1.1);}
.topbar-checkin svg{color:var(--gold-soft,#F2C964);}
:root[data-theme="dark"] .topbar-checkin{background:var(--gold);border-color:var(--gold);color:var(--navy);}
:root[data-theme="dark"] .topbar-checkin svg{color:var(--navy);}
@media (max-width:480px){.topbar-checkin{padding:7px 11px;margin-right:7px;} #checkinNavBtn{display:none !important;}}
/* Self-Reflection moves into the Explore dropdown on phones; hidden in the dropdown on larger screens */
.exnav-menu a.exnav-mobileonly{display:none !important;}
@media (max-width:480px){.exnav-menu a.exnav-mobileonly{display:flex !important;}}
/* standalone Library entry — neutral pill so the gold Store stays the commerce CTA */
.topbar-lib{background:transparent;border-color:var(--rule);color:var(--ink-soft);}
.topbar-lib svg{color:var(--ink-soft);}
.topbar-lib:hover{background:rgba(127,127,127,.12);color:var(--ink);transform:translateY(-1px);}
.topbar-lib:hover svg{color:var(--ink);}
:root[data-theme="dark"] .topbar-lib{color:var(--cream);background:transparent;border-color:#2A4A6A;}
:root[data-theme="dark"] .topbar-lib:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ===== grace-engine-styles ===== */
.triage-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:640px;margin:0 auto 28px;}
@media(max-width:560px){.triage-panel{grid-template-columns:1fr;}}
.triage-btn{appearance:none;border:2px solid var(--rule);border-radius:var(--radius-lg);padding:18px 14px;font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer;color:var(--navy);background:var(--paper);box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;min-height:64px;}
.triage-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.triage-btn:active{transform:translateY(0);}
.triage-btn.cant-calm{border-color:var(--red);background:var(--red-bg);color:var(--red);}
.triage-btn.shutting-down{border-color:var(--amber);background:var(--amber-bg);color:var(--amber);}
.triage-btn.needs-move{border-color:var(--green);background:var(--green-bg);color:var(--green);}
.triage-lead{text-align:center;font-family:var(--font-serif);font-size:18px;color:var(--ink-soft);margin:0 0 12px;}
:root[data-theme="dark"] .triage-btn{background:var(--navy-soft);color:var(--cream);}
.grace-practiced-banner{display:none;}
.grace-practiced-banner.visible-banner{display:block;text-align:center;margin:0 auto 20px;max-width:520px;padding:10px 16px;border-radius:999px;background:var(--green-bg);color:var(--green);font-size:14px;border:1px solid rgba(46,107,58,.25);}
.grace-practiced-banner strong{font-weight:700;}
.history-memory-card{max-width:520px;margin:0 auto 24px;background:var(--cream-deep);border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:var(--radius);padding:14px 18px;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease;}
.history-memory-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.history-memory-card p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.5;}
.history-memory-card span{color:var(--gold);font-weight:700;}
.history-memory-card strong{color:var(--navy);text-transform:capitalize;}
:root[data-theme="dark"] .history-memory-card{background:var(--navy-soft);}
.emotion-wheel-svg{display:block;max-width:320px;margin:8px auto;}
.wheel-wedge .wedge-path{transition:transform .2s ease,opacity .2s ease;transform-origin:center;transform-box:fill-box;}
.wheel-wedge:hover .wedge-path{opacity:1;}
.feelwheel-readout{text-align:center;min-height:48px;font-size:15px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}
.passport-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,18,31,.55);backdrop-filter:blur(3px);animation:graceFade .25s ease;}
.passport-award-card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:460px;width:100%;padding:28px 26px;text-align:center;border:1px solid var(--rule);}
.passport-award-card h3{font-family:var(--font-serif);color:var(--navy);font-size:24px;margin:0 0 8px;}
.passport-award-card p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0 0 16px;}
.passport-award-card canvas{width:100%;max-width:400px;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.passport-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.passport-actions button{font-family:var(--font-sans);font-weight:600;font-size:14px;padding:10px 18px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--rule);}
#download-passport-btn{background:var(--gold);color:var(--navy);border-color:var(--gold);}
#close-passport-btn{background:transparent;color:var(--ink-soft);}
@keyframes graceFade{from{opacity:0;}to{opacity:1;}}
.pecs-strip-card.speaking-highlight{outline:3px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 4px var(--gold-pale);transition:outline .1s ease,box-shadow .1s ease;}
#toolModal.crisis-priority-override .tool-modal{border-top:4px solid var(--red);}
.grace-universal-modal-overlay{position:fixed;inset:0;z-index:9998;display:none;align-items:flex-end;justify-content:center;background:rgba(6,18,31,.5);}
.grace-universal-modal-overlay.active-modal-viewport{display:flex;}
.grace-universal-modal-overlay .modal-surface-card{background:var(--paper);width:100%;max-width:560px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:14px 20px 24px;box-shadow:var(--shadow-xl);}
.mobile-swipe-handle{width:42px;height:5px;border-radius:999px;background:var(--rule);margin:4px auto 14px;}
.mobile-bottom-close-btn{display:block;width:100%;margin-top:16px;padding:12px;border-radius:var(--radius);border:1px solid var(--rule);background:var(--cream-deep);color:var(--navy);font-weight:600;cursor:pointer;}
.grace-universal-modal-overlay.crisis-priority-override .modal-surface-card{border-top:4px solid var(--red);}

/* ===== aog-jun11-doors ===== */
.wp-personal-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:760px;margin:18px auto 4px;padding:16px 20px;background:var(--cream-deep);border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:var(--radius-lg);}
.wp-personal-t{font-family:var(--font-serif);font-size:18px;color:var(--navy);font-weight:600;}
.wp-personal-s{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:2px;}
.wp-personal-btn{white-space:nowrap;flex:0 0 auto;}
:root[data-theme="dark"] .wp-personal-cta{background:var(--navy-soft);}
@media(max-width:560px){.wp-personal-cta{flex-direction:column;align-items:flex-start;}.wp-personal-btn{width:100%;text-align:center;}}

/* ===== aog-somatic-styles ===== */
/* ===== Paced breathing (SVG pacing circle) ===== */
.gbx-pats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px;}
.gbx-pat{appearance:none;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink-soft);font-family:var(--font-sans);font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .15s ease;}
.gbx-pat.active{background:var(--navy);color:var(--cream);border-color:var(--navy);}
:root[data-theme="dark"] .gbx-pat{background:var(--navy-soft);color:var(--cream);}
.gbx-stage{position:relative;width:240px;height:240px;margin:6px auto 4px;}
.gbx-svg{width:100%;height:100%;display:block;}
.gbx-track{fill:none;stroke:var(--rule);stroke-width:3;opacity:.6;}
.gbx-breath{transform-origin:120px 120px;transform-box:view-box;will-change:transform;}
.gbx-breath circle{fill:rgba(217,163,59,.16);stroke:var(--gold);stroke-width:4;}
:root[data-theme="dark"] .gbx-breath circle{fill:rgba(242,201,100,.14);}
.gbx-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;}
.gbx-cue{font-family:var(--font-serif);font-size:22px;color:var(--navy);font-weight:600;}
:root[data-theme="dark"] .gbx-cue{color:var(--cream);}
.gbx-count{font-family:var(--font-sans);font-size:34px;font-weight:700;color:var(--gold);line-height:1.1;margin-top:2px;}
.gbx-round{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:8px;min-height:34px;}
@media(prefers-reduced-motion:reduce){.gbx-breath{transition:none!important;transform:scale(.8)!important;}}

/* ===== Somatic Tap Pad ===== */
.gtap-pad{position:relative;overflow:hidden;width:100%;min-height:300px;margin:8px 0 0;border-radius:var(--radius-lg);background:radial-gradient(120% 120% at 50% 40%,var(--cream) 0%,var(--cream-deep) 100%);border:1.5px solid var(--rule);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;user-select:none;transition:transform .12s ease;}
:root[data-theme="dark"] .gtap-pad{background:radial-gradient(120% 120% at 50% 40%,var(--navy-soft) 0%,var(--navy) 100%);}
.gtap-pad.gtap-press{transform:scale(.99);}
.gtap-guide{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(217,163,59,.45) 0%,rgba(217,163,59,.12) 60%,transparent 70%);animation:gtapGuide 4s ease-in-out infinite;pointer-events:none;}
@keyframes gtapGuide{0%,100%{transform:scale(.75);opacity:.55;}50%{transform:scale(1.15);opacity:1;}}
@media(prefers-reduced-motion:reduce){.gtap-guide{animation:none;}}
.gtap-hint{position:absolute;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--ink-soft);transition:opacity .3s ease;pointer-events:none;}
.gtap-ripple{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(217,163,59,.4);transform:translate(-50%,-50%) scale(1);animation:gtapRipple .9s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none;}
@keyframes gtapRipple{to{transform:translate(-50%,-50%) scale(11);opacity:0;}}
.gtap-count{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:10px;min-height:18px;}

/* ===== PECS "Show to Teacher" full-screen SOS ===== */
.pecs-sos-trigger{background:var(--navy)!important;color:var(--cream)!important;font-weight:700;}
.pecs-sos-overlay{position:fixed;inset:0;z-index:10000;background:#fff;display:flex;flex-direction:column;animation:graceFade .2s ease;}
.pecs-sos-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:2px solid #111;}
.pecs-sos-badge{font-family:var(--font-sans);font-weight:800;font-size:clamp(16px,3vw,22px);letter-spacing:.12em;color:#111;}
.pecs-sos-close{appearance:none;border:2px solid #111;background:#fff;color:#111;width:44px;height:44px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1;}
.pecs-sos-cards{flex:1;display:grid;gap:10px;padding:16px;align-content:center;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.pecs-sos-cards[style*="--n:1"]{grid-template-columns:1fr;}
.pecs-sos-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:3px solid #111;border-radius:20px;padding:18px 12px;background:#fff;min-height:0;}
.pecs-sos-emoji{font-size:clamp(64px,16vw,150px);line-height:1;}
.pecs-sos-label{font-family:var(--font-sans);font-weight:800;font-size:clamp(20px,4.5vw,40px);color:#111;text-align:center;}
.pecs-sos-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:20px;color:#444;padding:24px;}

/* ===== Adult-first 10s grounding gate ===== */
.grace-ground-overlay{position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,18,31,.62);backdrop-filter:blur(4px);animation:graceFade .25s ease;}
.grace-ground-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:440px;width:100%;padding:30px 26px;text-align:center;}
.gg-eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.gg-title{font-family:var(--font-serif);font-size:25px;color:var(--navy);margin:6px 0 14px;font-weight:600;}
:root[data-theme="dark"] .gg-title{color:var(--cream);}
.gg-orb-wrap{display:flex;justify-content:center;margin:6px 0 16px;}
.gg-orb{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,var(--gold-soft) 0%,var(--gold) 70%);box-shadow:0 0 36px -6px var(--gold);animation:ggBreath 10s ease-in-out infinite;}
@keyframes ggBreath{0%,100%{transform:scale(.6);}40%,60%{transform:scale(1);}}
@media(prefers-reduced-motion:reduce){.gg-orb{animation:none;transform:scale(.85);}}
.gg-step{font-family:var(--font-serif);font-size:18px;color:var(--ink);min-height:52px;display:flex;align-items:center;justify-content:center;line-height:1.45;}
.gg-actions{display:flex;gap:10px;justify-content:center;margin:8px 0 14px;flex-wrap:wrap;}
.gg-why{font-size:12.5px;color:var(--ink-soft);line-height:1.5;border-top:1px solid var(--rule-soft);padding-top:12px;}
.gg-reset-btn{font-size:13px;padding:8px 16px;}

/* ===== Educator "Inside a lesson" sample package ===== */
.edu-sample{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule);}
.edu-sample .es-ey{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep,#9a6f24);}
.edu-sample h3{font-family:var(--font-serif);font-size:22px;color:var(--navy);margin:6px 0 6px;font-weight:600;}
:root[data-theme="dark"] .edu-sample h3{color:var(--cream);}
.edu-sample .es-lead{font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:640px;margin:0 0 18px;}
.edu-sample-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:760px){.edu-sample-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.edu-sample-grid{grid-template-columns:1fr;}}
.edu-sample-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:16px 14px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.edu-sample-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold);}
:root[data-theme="dark"] .edu-sample-card{background:var(--navy-soft);}
.edu-sample-card .es-ic{width:40px;height:40px;border-radius:10px;background:var(--gold-pale);color:var(--navy);display:grid;place-items:center;margin-bottom:2px;}
.edu-sample-card .es-ic svg{width:22px;height:22px;}
.edu-sample-card .es-t{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--navy);}
:root[data-theme="dark"] .edu-sample-card .es-t{color:var(--cream);}
.edu-sample-card .es-s{font-size:12.5px;line-height:1.45;color:var(--ink-soft);flex:1;}
.edu-sample-card .es-go{font-size:12px;font-weight:700;color:var(--gold-deep,#9a6f24);letter-spacing:.02em;}
.edu-sample-cta{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);font-family:var(--font-sans);font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:999px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .15s ease,background .15s ease;}
.edu-sample-cta:hover{transform:translateY(-1px);background:var(--gold-soft);}

/* ===== Take 5 (trace your hand) ===== */
.t5-stage{position:relative;width:240px;margin:8px auto 2px;text-align:center;}
.t5-svg{width:200px;height:230px;display:block;margin:0 auto;}
.t5-palm{fill:rgba(217,163,59,.14);stroke:var(--gold);stroke-width:2;}
.t5-finger{stroke:rgba(217,163,59,.30);stroke-width:20;}
.t5-tracer{fill:var(--gold);stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px var(--gold));}
.t5-cue{font-family:var(--font-serif);font-size:22px;color:var(--navy);font-weight:600;margin-top:6px;}
:root[data-theme="dark"] .t5-cue{color:var(--cream);}

/* ===== Body Check matrix ===== */
.bc-states{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 16px;}
@media(max-width:520px){.bc-states{grid-template-columns:1fr;}}
.bc-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:1.5px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);color:var(--navy);font-family:var(--font-sans);font-weight:600;font-size:14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.bc-state:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--gold);}
.bc-state.active{border-color:var(--gold);background:var(--gold-pale);}
:root[data-theme="dark"] .bc-state{background:var(--navy-soft);color:var(--cream);}
.bc-emoji{font-size:30px;line-height:1;}
.bc-card{background:var(--cream-deep);border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:var(--radius);padding:16px 18px;animation:graceFade .25s ease;}
:root[data-theme="dark"] .bc-card{background:var(--navy-soft);}
.bc-card-d{font-size:15px;color:var(--ink);line-height:1.55;margin:0 0 12px;}
.bc-card-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep,#9a6f24);margin-bottom:8px;}
.bc-tools{display:flex;gap:8px;flex-wrap:wrap;}
.bc-tool{appearance:none;border:1.5px solid var(--gold);background:var(--paper);color:var(--navy);font-family:var(--font-sans);font-weight:600;font-size:13.5px;padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .15s ease,transform .15s ease;}
.bc-tool:hover{background:var(--gold);transform:translateY(-1px);}
:root[data-theme="dark"] .bc-tool{background:var(--navy);color:var(--cream);}

/* ===== Four-sky (zone) self-reflection ===== */
.zc-zones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 16px;}
@media(max-width:560px){.zc-zones{grid-template-columns:repeat(2,1fr);}}
.zc-zone{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;border:2px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--navy);text-align:center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.zc-zone:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.zc-zone.active{border-color:var(--zc);box-shadow:0 0 0 3px color-mix(in srgb, var(--zc) 22%, transparent);}
.zc-dot{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.15);}
:root[data-theme="dark"] .zc-zone{background:var(--navy-soft);color:var(--cream);}
.zc-feel{font-size:12.5px;font-weight:700;letter-spacing:.02em;margin-bottom:8px;}

/* ===== Elevated tool grid: depth, spacing, custom icon badges, hover ===== */
#screen-teacher-tools .tools-grid{gap:18px;}
#screen-teacher-tools .tool-card{padding:22px 16px;border-radius:18px;box-shadow:0 1px 2px rgba(27,58,95,.05),0 8px 20px -10px rgba(27,58,95,.16);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
#screen-teacher-tools .tool-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -10px rgba(27,58,95,.26);border-color:var(--gold);}
.tool-icon.tool-icon-svg{display:inline-grid;place-items:center;width:54px;height:54px;margin:0 auto 8px;border-radius:16px;background:linear-gradient(155deg,var(--gold-pale),var(--cream-deep));color:var(--navy);box-shadow:inset 0 0 0 1px rgba(217,163,59,.3),0 4px 10px -4px rgba(27,58,95,.15);transition:transform .18s ease;}
.tool-icon.tool-icon-svg svg{width:27px;height:27px;}
#screen-teacher-tools .tool-card:hover .tool-icon-svg{transform:scale(1.07) rotate(-2deg);}
:root[data-theme="dark"] .tool-icon.tool-icon-svg{background:var(--navy);color:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(242,201,100,.25);}
.tool-card-coreg .tool-icon-svg{background:linear-gradient(155deg,var(--gold-soft),var(--gold-pale));}

/* ===== Polish: uniform buttons, bottom-aligned, hover, header breathing room ===== */
/* Pin every button to the bottom of its card so a whole row lines up, regardless
   of how many lines the description wraps to (the grid stretches cards to equal
   height, so margin-top:auto bottom-aligns them perfectly). */
#screen-teacher-tools .tool-card .tool-desc{margin-bottom:14px;}
#screen-teacher-tools .tool-card .btn{width:100%;min-width:120px;margin-top:auto;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease,color .15s ease;}
#screen-teacher-tools .tool-card .btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(27,58,95,.28);border-color:var(--gold);}
#screen-teacher-tools .tool-card .btn:active{transform:translateY(0);}
/* "Reset" link inside the green "practiced N tools today" banner */
.grace-reset-link{ background:none; border:none; color:inherit; font:inherit; font-size:12px; font-weight:700; opacity:.6; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0; margin-left:8px; }
.grace-reset-link:hover{ opacity:1; }

@media (min-width:641px){
  .topbar{padding-right:34px;}
  .topbar-actions{gap:11px;}
  .topbar-store,.topbar-lib{padding:6px 15px;}
}
/* Contain the header content to a centered max-width on wide screens so the bar
   reads as one deliberate element instead of stretching edge to edge. The full-width
   sticky background/border are preserved; only the content column is centered. */
@media (min-width:1201px){
  .topbar{ padding-left:max(28px, calc((100% - 1160px) / 2)); padding-right:max(28px, calc((100% - 1160px) / 2)); }
}
/* Phone toolbar: it was overcrowded and clipped the EN/ES toggle (worse on pages
   that also show the Back button). Drop the cart (Store still covers buying),
   tighten the pills, give the wrapped row a full width to lay out predictably,
   and add bottom clearance so the language toggle is never cut by the divider. */
@media (max-width:640px){
  #aogCartBtn, .topbar-cart{ display:none !important; }
  .topbar{ padding:12px 16px 16px; align-items:center; }
  .topbar-actions{ flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; row-gap:10px; width:100%; }
  .topbar-store, .topbar-lib{ padding:6px 10px; font-size:13px; }
  .topbar-store svg, .topbar-lib svg{ width:14px; height:14px; }
  .lang-toggle{ flex:0 0 auto; margin-bottom:2px; }
}
/* Tablet (iPad): the full-label nav doesn't fit and was clipping the cart on the
   right. Tighten the pills, drop the per-item right margins (the flex gap handles
   spacing), and let the row wrap to a second line instead of overflowing. */
@media (min-width:641px) and (max-width:1200px){
  .topbar{ flex-wrap:wrap; row-gap:8px; padding-right:20px; }
  .topbar-actions{ flex-wrap:wrap; justify-content:flex-end; gap:8px; row-gap:8px; }
  .topbar-store, .topbar-lib, .topbar-checkin{ margin-right:0; padding:6px 12px; }
  .topbar-store svg, .topbar-lib svg, .topbar-checkin svg{ width:15px; height:15px; }
}

/* ===== "How one answer becomes growth" — interactive walkthrough ===== */
.aogf-track{position:relative;}
.aogf-track.aogf-anim .aogf-chip{opacity:.42;transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease;}
.aogf-track.aogf-anim .aogf-chip.aogf-seen{opacity:1;}
.aogf-track.aogf-anim .aogf-chip.aogf-current{opacity:1;transform:translateY(-5px) scale(1.045);box-shadow:0 0 0 3px var(--gold),0 16px 30px -10px rgba(27,58,95,.42);z-index:2;}
.aogf-track .aogf-arrow{transition:color .3s ease,transform .3s ease,opacity .3s ease;}
.aogf-track.aogf-anim .aogf-arrow{opacity:.4;}
.aogf-track.aogf-anim .aogf-arrow.aogf-lit{opacity:1;color:var(--gold);transform:scale(1.4);}
.aogf-hint{text-align:center;font-size:13px;color:var(--ink-soft,#5a6b7b);margin:2px auto 14px;max-width:560px;line-height:1.5;font-style:italic;}
.aogf-chip.aogf-clickable{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.aogf-chip.aogf-clickable:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--gold),0 14px 26px -12px rgba(27,58,95,.45);}
.aogf-chip.aogf-clickable:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold),0 14px 26px -12px rgba(27,58,95,.45);}
.aogf-chip.aogf-pulse{animation:aogfPulse 1.15s ease 1;}
@keyframes aogfPulse{0%,100%{box-shadow:0 0 0 3px var(--gold),0 16px 30px -10px rgba(27,58,95,.42);}50%{box-shadow:0 0 0 8px rgba(217,163,59,.4),0 18px 36px -8px rgba(27,58,95,.5);}}
.aogf-spark{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--gold-soft) 38%,var(--gold) 72%);box-shadow:0 0 18px 5px rgba(242,201,100,.7);transform:translate(-50%,-50%);transition:left 1.5s cubic-bezier(.45,0,.25,1),top 1.5s cubic-bezier(.45,0,.25,1),opacity .35s ease;opacity:0;pointer-events:none;z-index:3;}
.aogf-spark.on{opacity:1;}
.aogf-replay{display:inline-flex;align-items:center;gap:7px;margin:14px auto 0;background:transparent;border:1.5px solid var(--gold);color:var(--gold-deep,#9a6f24);font-family:var(--font-sans);font-weight:600;font-size:13px;padding:7px 17px;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;}
.aogf-replay:hover{background:var(--gold);color:var(--navy);transform:translateY(-1px);}
/* Answer picker */
.aogf-picker{max-width:760px;margin:18px auto 2px;text-align:center;}
.aogf-picker-h{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#9a6f24);margin-bottom:10px;}
.aogf-picker-h2{margin-top:14px;}
.aogf-band-btns{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.aogf-band{appearance:none;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink-soft);font-family:var(--font-sans);font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;cursor:pointer;transition:all .15s ease;}
.aogf-band:hover{border-color:var(--gold);color:var(--navy);transform:translateY(-1px);}
.aogf-band.active{background:var(--gold);color:var(--navy);border-color:var(--gold);box-shadow:var(--shadow-sm);}
:root[data-theme="dark"] .aogf-band{background:var(--navy-soft);color:var(--cream);}
.aogf-picker-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.aogf-pick{appearance:none;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink-soft);font-family:var(--font-sans);font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .15s ease;}
.aogf-pick:hover{border-color:var(--gold);color:var(--navy);transform:translateY(-1px);}
.aogf-pick.active{background:var(--navy);color:var(--cream);border-color:var(--navy);box-shadow:var(--shadow-sm);}
:root[data-theme="dark"] .aogf-pick{background:var(--navy-soft);color:var(--cream);}
:root[data-theme="dark"] .aogf-pick.active{background:var(--gold);color:var(--navy);border-color:var(--gold);}
@media (prefers-reduced-motion:reduce){
  .aogf-spark{display:none;}
  .aogf-track.aogf-anim .aogf-chip{opacity:1 !important;transform:none !important;}
}

/* ===== mtss-styles ===== */
/* ===== MTSS Integration Report (elite edition) ===== */
.mtss-overlay{position:fixed;inset:0;z-index:10001;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;background:rgba(10,30,51,.55);backdrop-filter:blur(4px);overflow-y:auto;}
.mtss-overlay.open{display:flex;}
.mtss-modal{background:var(--paper,#FCF8F0);width:100%;max-width:900px;border-radius:16px;box-shadow:0 30px 70px -20px rgba(6,18,31,.6);overflow:hidden;font-family:var(--font-sans,system-ui);}
:root[data-theme="dark"] .mtss-modal{background:#0E1822;}
.mtss-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:var(--navy,#1B3A5F);}
.mtss-title{font-family:var(--font-serif,Georgia,serif);font-size:20px;font-weight:600;color:#fff;}
.mtss-head-actions{display:flex;gap:8px;align-items:center;}
.mtss-print{background:var(--gold,#B8893A);color:var(--navy,#1B3A5F);border:none;border-radius:8px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;}
.mtss-print:hover{filter:brightness(1.06);}
.mtss-close{background:transparent;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;opacity:.85;}
.mtss-close:hover{opacity:1;}
.mtss-tabs{display:flex;gap:4px;padding:10px 16px 0;background:var(--cream-deep,#F4ECDA);border-bottom:1px solid var(--rule,#D9CBA8);flex-wrap:wrap;}
:root[data-theme="dark"] .mtss-tabs{background:#10202E;}
.mtss-tab{background:transparent;border:none;border-bottom:3px solid transparent;padding:10px 14px;font-weight:700;font-size:13.5px;color:var(--ink-soft,#5A6B7B);cursor:pointer;}
.mtss-tab.active{color:var(--navy,#1B3A5F);border-bottom-color:var(--gold,#B8893A);}
:root[data-theme="dark"] .mtss-tab.active{color:var(--cream,#F4ECDA);}
.mtss-body{padding:18px 22px 26px;}

/* meta bar */
.mtss-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.mtss-meta label{flex:1;min-width:170px;display:flex;flex-direction:column;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft,#5A6B7B);gap:4px;}
.mtss-meta input{font-size:13.5px;font-weight:600;color:var(--ink,#2C3A47);padding:8px 10px;border:1px solid var(--rule,#D9CBA8);border-radius:8px;background:#fff;font-family:inherit;}

/* exports */
.mtss-exportbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:10px;}
.mtss-xbtn{background:var(--cream-deep,#F4ECDA);border:1px solid var(--rule,#D9CBA8);color:var(--navy,#1B3A5F);font-weight:700;font-size:12.5px;border-radius:8px;padding:7px 12px;cursor:pointer;}
.mtss-xbtn:hover{background:var(--cream,#FBF3DF);border-color:var(--gold,#B8893A);}

.mtss-report{background:#fff;border:1px solid var(--rule,#D9CBA8);border-radius:12px;padding:22px;}
:root[data-theme="dark"] .mtss-report{background:#0B1622;}
.mtss-rep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:2px solid var(--gold,#B8893A);padding-bottom:12px;margin-bottom:14px;flex-wrap:wrap;}
.mtss-rep-name{font-family:var(--font-serif,Georgia,serif);font-size:22px;font-weight:600;color:var(--navy,#1B3A5F);}
.mtss-rep-meta{font-size:12.5px;color:var(--ink-soft,#5A6B7B);margin-top:2px;}
.mtss-pill{display:inline-block;border:1.5px solid;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:800;white-space:nowrap;}
.mtss-rec{border-left:4px solid;background:var(--rule-soft,#EFEADB);border-radius:8px;padding:12px 14px;font-size:14px;color:var(--ink,#2C3A47);margin-bottom:6px;line-height:1.5;}
.mtss-traj{background:#EEF4FA;border:1px solid #cfe0ef;border-radius:8px;padding:10px 12px;font-size:13px;color:var(--navy,#1B3A5F);margin-bottom:10px;}
.mtss-sec-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#9a6f24);margin:18px 0 10px;}
.mtss-bar{display:grid;grid-template-columns:1fr 2.4fr auto;align-items:center;gap:10px;margin-bottom:8px;}
.mtss-bar-l{font-size:12.5px;color:var(--ink,#2C3A47);line-height:1.25;}
.mtss-bar-track{height:12px;background:var(--rule-soft,#EFE7D2);border-radius:999px;overflow:hidden;}
.mtss-bar-fill{height:100%;border-radius:999px;}
.mtss-bar-v{font-weight:800;font-size:13px;min-width:28px;text-align:right;}
.mtss-need{margin-top:12px;font-size:14px;color:var(--ink,#2C3A47);background:var(--cream-deep,#F4ECDA);border-radius:8px;padding:10px 12px;}
.mtss-p{font-size:14px;line-height:1.6;color:var(--ink,#2C3A47);margin:0;}
.mtss-pm{width:100%;border-collapse:collapse;margin-top:4px;}
.mtss-pm th{text-align:left;font-size:12px;color:var(--navy,#1B3A5F);font-weight:700;padding:8px 10px;width:24%;vertical-align:top;background:var(--cream-deep,#F4ECDA);border:1px solid var(--rule,#D9CBA8);}
.mtss-pm td.mtss-blank{border:1px solid var(--rule,#D9CBA8);height:30px;}
.mtss-pm td.mtss-blank{padding:0;}
.mtss-pm-in{width:100%;box-sizing:border-box;border:none;background:transparent;font:inherit;font-size:12.5px;color:var(--navy,#1B3A5F);padding:8px 10px;min-height:30px;}
.mtss-pm-in:focus{outline:2px solid var(--gold,#D9A33B);outline-offset:-2px;border-radius:0;}
.mtss-pm-note{font-size:11px;color:var(--ink-soft,#5A6B7B);margin:6px 0 0;font-style:italic;}
.mtss-foot{font-size:11.5px;color:var(--ink-faint,#8a96a3);font-style:italic;margin-top:16px;line-height:1.5;}

/* exec summary */
.mtss-exec{background:linear-gradient(180deg,#FBF3DF,#F6EEDB);border:1px solid var(--gold,#B8893A);border-radius:10px;padding:14px 16px;margin-bottom:6px;}
.mtss-exec-h{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#9a6f24);margin-bottom:6px;}
.mtss-exec p{margin:0;font-size:14px;line-height:1.6;color:var(--ink,#2C3A47);}

/* two-column triangle + benchmark */
.mtss-grid2{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start;}
@media (max-width:680px){.mtss-grid2{grid-template-columns:1fr;}}
.mtss-bench-grid{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.mtss-bench-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:8px;}
.mtss-bench-l{font-size:12px;font-weight:700;color:var(--navy,#1B3A5F);}
.mtss-bench-track{position:relative;height:16px;background:var(--rule-soft,#EFE7D2);border-radius:999px;}
.mtss-bench-fill{height:100%;border-radius:999px;}
.mtss-bench-mark{position:absolute;top:-3px;width:2px;height:22px;background:var(--navy,#1B3A5F);}
.mtss-bench-mark::after{content:"▾";position:absolute;top:-12px;left:-4px;font-size:10px;color:var(--navy,#1B3A5F);}
.mtss-bench-v{font-size:12.5px;font-weight:800;color:var(--ink,#2C3A47);white-space:nowrap;}
.mtss-bench-t{font-weight:600;color:var(--ink-faint,#8a96a3);font-size:11px;}
.mtss-bench-note{font-size:12px;color:var(--ink-soft,#5A6B7B);line-height:1.5;margin-top:10px;}

/* tier movement */
.mtss-move{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;}
.mtss-move-item{flex:1;min-width:120px;border-radius:10px;padding:12px;text-align:center;border:1.5px solid;}
.mtss-move-item.up{border-color:#2E6B3A;background:#E8F2EA;}
.mtss-move-item.hold{border-color:#B8860B;background:#FBF1DD;}
.mtss-move-item.down{border-color:#B23A3A;background:#F7E7E7;}
.mtss-move-n{font-size:26px;font-weight:800;line-height:1;}
.mtss-move-item.up .mtss-move-n{color:#2E6B3A;}
.mtss-move-item.hold .mtss-move-n{color:#B8860B;}
.mtss-move-item.down .mtss-move-n{color:#B23A3A;}
.mtss-move-l{font-size:12px;font-weight:700;color:var(--ink-soft,#5A6B7B);margin-top:5px;}
.mtss-move-foot{flex-basis:100%;font-size:11.5px;color:var(--ink-faint,#8a96a3);font-style:italic;text-align:center;margin-top:2px;}
.mtss-move-empty{background:var(--cream-deep,#F4ECDA);border:1px dashed var(--gold,#B8893A);border-radius:10px;padding:14px;font-size:13px;color:var(--ink-soft,#5A6B7B);line-height:1.5;text-align:center;}

.mtss-tiles{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px;}
.mtss-tile{flex:1;min-width:150px;border:1.5px solid;border-radius:10px;padding:14px;text-align:center;}
.mtss-tile-n{font-size:30px;font-weight:800;line-height:1;}
.mtss-tile-l{font-size:12px;font-weight:700;color:var(--ink-soft,#5A6B7B);margin-top:6px;}
.mtss-roster{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px;}
.mtss-roster th{background:var(--navy,#1B3A5F);color:#fff;font-size:11.5px;font-weight:700;padding:8px 9px;text-align:left;}
.mtss-roster td{padding:8px 9px;border-bottom:1px solid var(--rule-soft,#EFE7D2);font-weight:600;}
.mtss-roster td:first-child{font-weight:700;color:var(--navy,#1B3A5F);}
.mtss-roster .mtss-pill{font-size:11px;padding:3px 9px;}
.mtss-empty{text-align:center;color:var(--ink-soft,#5A6B7B);font-size:14px;line-height:1.6;padding:50px 20px;}

/* print-only cover page */
.mtss-cover{display:none;}

@media (max-width:560px){
  .mtss-bar{grid-template-columns:1fr 1.6fr auto;}
  .mtss-head-actions .mtss-print{padding:8px 10px;font-size:12px;}
}

/* Print: cover page, then just the report card */
@media print{
  /* The host app prints with `body * {visibility:hidden}` (only #printReport shows).
     Force our overlay + everything inside it back to visible, or the report prints blank. */
  #mtssOverlay, #mtssOverlay *{visibility:visible !important;}
  /* PRINT ISOLATION: only the single #printReport (or an open MTSS overlay) prints — never the rest of the app (was producing ~80 blank pages). */
  body:not(.aog-talk-open):not(.aog-charts-open):not(.aog-cards-open):not(.hd-printing):not(.hd-shared) > *:not(#mtssOverlay):not(#printReport){display:none !important;}
  /* ⚠ KEEP IN STEP WITH #aog-print-isolation IN index.html — this rule is
     duplicated there verbatim, and patching only one loses the specificity
     fight silently. `body > *:not(#id):not(#id)` is (2,0,1); an override
     written as `body.aog-talk-open .stage` is (0,2,1) and never wins.
     Why the exception exists: a full-bleed board prints from inside its own
     srcdoc iframe, and a subframe is laid out from its element box in the
     parent — so hiding `.stage`, the frame's only body-child ancestor,
     collapses the box to 0x0 and the board prints blank sheets with the right
     page count. Reported 2026-08-29 on Talk It Out's Print five. */
  body.aog-talk-open   > *:not(.stage),
  body.aog-charts-open > *:not(.stage){display:none !important;}
  body.aog-talk-open   .stage,
  body.aog-charts-open .stage{display:block !important;}
  body.aog-talk-open   .stage > *:not(#aog-main),
  body.aog-charts-open .stage > *:not(#aog-main){display:none !important;}
  body.aog-talk-open   #aog-main > *:not(#screen-talk),
  body.aog-charts-open #aog-main > *:not(#screen-charts){display:none !important;}
  .mtss-overlay.open{position:static !important;display:block !important;padding:0;background:#fff;backdrop-filter:none;overflow:visible;}
  .mtss-modal{box-shadow:none;max-width:none;border-radius:0;}
  .mtss-head,.mtss-tabs,.mtss-pick,.mtss-close,.mtss-print,.mtss-exportbar{display:none !important;}
  .mtss-body{padding:0;}
  .mtss-report{border:none;padding:0;}
  .mtss-foot{color:#666;}
  .mtss-meta input{border:none;border-bottom:1px solid #bbb;border-radius:0;}
  .mtss-cover{display:block !important;text-align:center;padding:96px 40px 40px;min-height:0;page-break-after:always;break-after:page;}
  .mtss-cover-mark{width:70px;height:70px;background:#1B3A5F;color:#E7C77B;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:40px;font-weight:700;border-radius:12px;margin:0 auto 24px;}
  .mtss-cover-brand{font-family:Georgia,serif;font-size:26px;color:#1B3A5F;font-weight:700;}
  .mtss-cover-title{font-size:34px;font-weight:800;color:#1B3A5F;margin:14px 0 4px;letter-spacing:-.5px;}
  .mtss-cover-view{font-size:16px;color:#B8893A;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
  .mtss-cover-meta{display:block;margin:40px auto;border-top:2px solid #B8893A;border-bottom:2px solid #B8893A;padding:22px 0;min-width:0;max-width:420px;}
  .mtss-cover-meta > div{display:flex;justify-content:space-between;gap:30px;font-size:15px;margin-bottom:8px;}
  .mtss-cover-meta span{color:#5A6B7B;}
  .mtss-cover-meta b{color:#1B3A5F;}
  .mtss-cover-foot{position:static;margin-top:52px;font-size:11px;color:#8a96a3;font-style:italic;}
  .mtss-grid2{grid-template-columns:1fr 1fr;}
}

/* ===== aog-bling-styles ===== */
/* ===== AoG bling — credible for a 6th–8th grade room, universal for everyone =====
   Principle: earned, owned, real. No childish sparkle. Everything degrades to calm.
   Reduced-motion respected throughout. Sound is opt-in (handled in JS). */

/* =====================================================================
   0) ACCENT THEMES — "pick your color" ownership (universal, opt-in)
   Overrides the four gold tokens. No attribute = original gold (unchanged).
   Recolors the whole app accent, light + dark, instantly.
   ===================================================================== */
:root[data-accent="teal"]{   --gold:#2BA199; --gold-soft:#6FD3C8; --gold-pale:#C9EDE8; --gold-deep:#15716B; }
:root[data-accent="violet"]{ --gold:#7C5CD6; --gold-soft:#A98BF0; --gold-pale:#DDD2F7; --gold-deep:#523C9E; }
:root[data-accent="rose"]{   --gold:#D65C7E; --gold-soft:#F08BA6; --gold-pale:#F7D2DD; --gold-deep:#9E3C5A; }
:root[data-accent="sky"]{    --gold:#2E7CD6; --gold-soft:#6FB0F0; --gold-pale:#CFE3F7; --gold-deep:#1C5499; }
:root[data-accent="green"]{  --gold:#4F9E3A; --gold-soft:#86D36F; --gold-pale:#D2EDC9; --gold-deep:#356B25; }

/* =====================================================================
   1) Calming ambient hero on the Tools page (kept from before)
   ===================================================================== */
#screen-teacher-tools{
  background-image:
    radial-gradient(42% 38% at 20% 10%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    radial-gradient(40% 38% at 84% 6%, rgba(27,58,95,.08), rgba(27,58,95,0) 70%),
    radial-gradient(48% 44% at 62% 100%, color-mix(in srgb, var(--gold-deep) 10%, transparent), transparent 72%);
  background-repeat:no-repeat;
  /* aog-still 2026-08-23: background-attachment:fixed + an animated
     background-position made the page judder on every scroll frame. */
  background-attachment:scroll;
}
@keyframes aogAurora{
  0%{ background-position:0% 0%, 100% 0%, 50% 100%; }
  100%{ background-position:9% 7%, 88% 11%, 56% 90%; }
}
:root[data-theme="dark"] #screen-teacher-tools{
  background-image:
    radial-gradient(42% 38% at 20% 10%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 70%),
    radial-gradient(40% 38% at 84% 6%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 70%),
    radial-gradient(48% 44% at 62% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 72%);
}
#screen-teacher-tools h1.display-lg{ position:relative; }
#screen-teacher-tools h1.display-lg::before{
  content:""; position:absolute; left:50%; top:54%; transform:translate(-50%,-50%) scale(1);
  width:300px; height:168px; border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 24%, transparent), transparent 70%);
  z-index:-1; pointer-events:none;
  animation:aogBreatheGlow 7.5s ease-in-out infinite;
}
@keyframes aogBreatheGlow{
  0%,100%{ transform:translate(-50%,-50%) scale(.9); opacity:.45; }
  50%{ transform:translate(-50%,-50%) scale(1.1); opacity:.85; }
}

/* =====================================================================
   2) Reactive hero on the landing — "this is a real product" first impression
   A soft accent light follows the cursor / tap. JS sets --aog-mx / --aog-my.
   NOTE: base.html already uses .hyb-hero::before for its decorative gold glow,
   so this layer rides on ::after to avoid clobbering it.
   ===================================================================== */
.hyb-hero{ position:relative; isolation:isolate; }
.hyb-hero::after{
  content:""; position:absolute; inset:-10% -6%; z-index:0; pointer-events:none;
  border-radius:32px;
  background:radial-gradient(280px 220px at var(--aog-mx,50%) var(--aog-my,30%),
    color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.hyb-hero > *{ position:relative; z-index:1; }
.hyb-hero.aog-live::after{ opacity:1; }
.hyb-hero.aog-tap::after{ animation:aogHeroTap .6s ease; }
@keyframes aogHeroTap{ 0%{ opacity:.35; } 30%{ opacity:1; } 100%{ opacity:1; } }

/* =====================================================================
   3) Answer reactions — the option you pick physically responds (no praise)
   ===================================================================== */
.response-option{ transition:transform .14s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s ease, border-color .15s ease, background .15s ease; }
.response-option.selected{ animation:aogPick .32s cubic-bezier(.2,.9,.3,1.3); box-shadow:0 8px 22px -10px color-mix(in srgb, var(--gold) 60%, transparent); }
.choice-chip{ transition:transform .14s cubic-bezier(.2,.9,.3,1.2), background .15s ease, border-color .15s ease, color .15s ease; }
.choice-chip.on{ animation:aogPick .3s cubic-bezier(.2,.9,.3,1.3); }
@keyframes aogPick{ 0%{ transform:scale(1); } 45%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

/* =====================================================================
   4) Daily word of grace (now tone-aware; tiny cog opens Personalize)
   ===================================================================== */
.aog-grace-word{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  max-width:600px; margin:4px auto 26px; padding:16px 22px 14px; text-align:center;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--gold-pale) 60%, var(--paper)) , color-mix(in srgb, var(--gold-pale) 35%, var(--paper)));
  border:1px solid var(--rule,#D9CBA8); border-radius:14px;
  box-shadow:0 10px 26px -18px rgba(27,58,95,.4);
  position:relative;
}
:root[data-theme="dark"] .aog-grace-word{ background:linear-gradient(180deg, rgba(20,34,48,.7), rgba(14,24,34,.6)); }
.aog-grace-word .agw-dot{
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--gold,#B8893A));
  box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent);
  animation:aogDotBreathe 6s ease-in-out infinite;
}
@keyframes aogDotBreathe{ 0%,100%{ transform:scale(.86);} 50%{ transform:scale(1.12);} }
.aog-grace-word .agw-eyebrow{ font-family:var(--font-sans,system-ui); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); }
.aog-grace-word .agw-text{ font-family:var(--font-serif,Georgia,serif); font-size:19px; line-height:1.4; color:var(--navy,#1B3A5F); font-style:italic; }
:root[data-theme="dark"] .aog-grace-word .agw-text{ color:var(--cream,#F4ECDA); }
.agw-cog{
  position:absolute; top:7px; right:8px; width:30px; height:30px; border:none; border-radius:9px;
  background:transparent; color:var(--ink-faint,#8A92A6); cursor:pointer; display:grid; place-items:center;
  opacity:.45; transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.aog-grace-word:hover .agw-cog{ opacity:.9; }
.agw-cog:hover, .agw-cog:focus-visible{ opacity:1; background:color-mix(in srgb, var(--gold) 14%, transparent); color:var(--gold-deep,#9a6f24); }

/* Hero variant — the daily word greeting on the landing (dark navy hero).
   No card; a gentle gold-on-navy line under the CTAs. Control lives in the header. */
.aog-grace-word--hero{
  position:relative; max-width:640px; margin:28px auto 2px; padding:18px 20px 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  border-top:1px solid color-mix(in srgb, var(--gold-soft, #F2C964) 30%, transparent);
}
.aog-grace-word--hero .agwh-dot{
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--gold-soft,#F2C964));
  box-shadow:0 0 0 5px color-mix(in srgb, var(--gold-soft, #F2C964) 16%, transparent);
  animation:aogDotBreathe 6s ease-in-out infinite;
}
.aog-grace-word--hero .agwh-eyebrow{
  font-family:var(--font-sans,system-ui); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-soft,#F2C964);
}
.aog-grace-word--hero .agwh-text{
  font-family:var(--font-serif,Georgia,serif); font-style:italic; line-height:1.4;
  font-size:clamp(18px,2.1vw,23px); color:var(--cream,#F4EEE2); max-width:600px;
}
@media (max-width:600px){ .aog-grace-word--hero{ margin-top:20px; padding-top:16px; } }
@media (prefers-reduced-motion: reduce){ .aog-grace-word--hero .agwh-dot{ animation:none; } }
/* Personalize now lives by the word of grace — hide the old toolbar button */
#aogPzBtn, #aogPzWrap > #aogPzBtn{ display:none !important; }
/* Pronounced Personalize pill inside the hero word-of-grace box */
.aog-grace-word--hero .agwh-cog{
  position:absolute; top:8px; right:4px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid color-mix(in srgb, var(--gold-soft,#F2C964) 55%, transparent);
  background:rgba(242,201,100,.14); color:var(--gold-soft,#F2C964); cursor:pointer;
  border-radius:999px; padding:6px 12px;
  font-family:var(--font-sans,system-ui); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  transition:background .15s ease, transform .15s ease;
}
.aog-grace-word--hero .agwh-cog svg{ width:16px; height:16px; }
.aog-grace-word--hero .agwh-cog:hover, .aog-grace-word--hero .agwh-cog:focus-visible{ background:rgba(242,201,100,.26); transform:translateY(-1px); }
@media (max-width:600px){ .aog-grace-word--hero .agwh-cog-lbl{ display:none; } .aog-grace-word--hero .agwh-cog{ padding:7px; } }
/* When the daily word shows all three groups, each gets a small label */
.aog-grace-word--hero .agwh-row{ display:flex; flex-direction:column; gap:3px; }
.aog-grace-word--hero .agwh-grouplbl{ font-family:var(--font-sans,system-ui); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--gold-soft,#F2C964) 80%, #fff); opacity:.8; }
.aog-grace-word--hero .agwh-row .agwh-text{ font-size:clamp(15px,1.7vw,18px); }

/* =====================================================================
   5) Earned completion on calm tools — replaces the sticker bloom.
   Clean ring + an EARNED stat (time back / streak). No "good job!".
   ===================================================================== */
.aog-bloom{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.aog-bloom-ring{
  position:absolute; width:64px; height:64px; border-radius:50%;
  border:2px solid var(--gold,#B8893A);
  background:radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%);
  opacity:0; animation:aogBloomRing 2.4s ease-out forwards;
}
.aog-bloom-ring.d2{ animation-delay:.26s; border-color:var(--gold-soft,#E7C77B); }
.aog-bloom-ring.d3{ animation-delay:.52s; }
@keyframes aogBloomRing{ 0%{ transform:scale(.3); opacity:.9; } 70%{ opacity:.32; } 100%{ transform:scale(4.4); opacity:0; } }
.aog-bloom-card{
  position:relative; z-index:2; min-width:210px; max-width:300px; text-align:center;
  background:color-mix(in srgb, var(--paper,#fff) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 35%, var(--rule));
  border-radius:14px; padding:16px 18px;
  box-shadow:0 18px 40px -18px rgba(10,30,51,.55);
  opacity:0; animation:aogBloomCard 3.2s ease forwards;
}
:root[data-theme="dark"] .aog-bloom-card{ background:rgba(14,24,34,.94); }
.aog-bloom-check{
  width:40px; height:40px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(160deg, var(--gold-soft), var(--gold));
  box-shadow:0 6px 16px -6px color-mix(in srgb, var(--gold) 70%, transparent);
  animation:aogCheckPop .5s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes aogCheckPop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
.aog-bloom-stat{ font-family:var(--font-sans,system-ui); font-size:17px; font-weight:800; color:var(--navy,#1B3A5F); letter-spacing:-.01em; }
:root[data-theme="dark"] .aog-bloom-stat{ color:var(--cream,#F4ECDA); }
.aog-bloom-streak{ margin-top:6px; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans,system-ui); font-size:12.5px; font-weight:700; color:var(--gold-deep,#9a6f24); }
.aog-bloom-streak .agw-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
@keyframes aogBloomCard{ 0%{ opacity:0; transform:translateY(10px) scale(.95);} 14%{ opacity:1; transform:none;} 84%{ opacity:1;} 100%{ opacity:0; } }

/* =====================================================================
   6) Personalize popover (header) — tone, accent, sound. Mirrors a11y menu.
   ===================================================================== */
.aog-pz-wrap{ position:relative; display:inline-flex; }
.aog-pz-btn.active{ border-color:var(--gold); color:var(--gold); }
.aog-pz-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:130;
  width:280px; max-width:84vw; padding:10px;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow-lg, 0 12px 30px rgba(0,0,0,.5));
  max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.aog-pz-menu[hidden]{ display:none; }
/* tighter on small screens so the menu never feels too tall */
@media (max-width:560px){
  .aog-pz-menu{ padding:8px; max-height:80vh; }
  .aog-pz-sec{ padding:5px 6px 9px; }
  .aog-swatches{ gap:8px; }
  .aog-sw{ width:28px; height:28px; }
}
/* On phones these toolbar popovers are anchored to a left-side button, so
   right:0 + fixed width ran them off the LEFT edge. Span the viewport with
   small side margins instead (top is set in JS, mirroring the Explore menu).
   Placed after both base rules so it wins the cascade. */
@media (max-width:600px){
  .a11y-menu, .aog-pz-menu{
    position:fixed; left:12px; right:12px; width:auto; min-width:0; max-width:none;
  }
}
.aog-pz-h{ font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:8px 8px 6px; }
.aog-pz-sub{ font-family:var(--font-sans); font-size:11.5px; color:var(--ink-soft); padding:0 8px 8px; }
.aog-pz-sec{ padding:6px 8px 12px; border-top:1px solid var(--rule-soft); }
.aog-pz-sec:first-of-type{ border-top:none; }

/* segmented tone control */
.aog-seg{ display:flex; gap:6px; background:color-mix(in srgb, var(--rule) 45%, transparent); padding:4px; border-radius:11px; }
.aog-seg button{
  flex:1 1 0; font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--ink-soft);
  border:none; background:transparent; border-radius:8px; padding:8px 6px; cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.aog-seg button[aria-pressed="true"]{ background:var(--paper); color:var(--navy); box-shadow:0 2px 8px -3px rgba(10,30,51,.4); }
:root[data-theme="dark"] .aog-seg button[aria-pressed="true"]{ color:var(--cream); }

/* accent swatches */
.aog-swatches{ display:flex; gap:10px; flex-wrap:wrap; padding-top:2px; }
.aog-sw{
  width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid transparent; box-shadow:0 0 0 1.5px var(--rule) inset;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .15s ease;
}
.aog-sw:hover{ transform:scale(1.12); }
.aog-sw[aria-pressed="true"]{ border-color:var(--paper); box-shadow:0 0 0 2px var(--ink); transform:scale(1.06); }
.aog-sw-gold{   background:#D9A33B; }
.aog-sw-teal{   background:#2BA199; }
.aog-sw-violet{ background:#7C5CD6; }
.aog-sw-rose{   background:#D65C7E; }
.aog-sw-sky{    background:#2E7CD6; }
.aog-sw-green{  background:#4F9E3A; }

/* sound toggle row (reuse a11y switch look) */
.aog-pz-row{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 4px 0; border:none; background:transparent; cursor:pointer; text-align:left;
  font-family:var(--font-sans); color:var(--ink);
}
.aog-pz-row-tx{ flex:1 1 auto; display:flex; flex-direction:column; gap:1px; }
.aog-pz-row-t{ font-size:14px; font-weight:700; }
.aog-pz-row-s{ font-size:11.5px; color:var(--ink-soft); }
.aog-pz-switch{ flex:0 0 auto; position:relative; width:38px; height:22px; border-radius:999px; background:var(--rule); transition:background .15s ease; }
.aog-pz-switch::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s ease; }
.aog-pz-row[aria-checked="true"] .aog-pz-switch{ background:var(--gold); }
.aog-pz-row[aria-checked="true"] .aog-pz-switch::after{ transform:translateX(16px); }

/* =====================================================================
   7) Demo-data reveal flash (kept)
   ===================================================================== */
.aog-demo-flash{ animation:aogDemoFlash 1.6s ease; border-radius:12px; }
@keyframes aogDemoFlash{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent);} 25%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 55%, transparent);} 100%{ box-shadow:0 0 0 0 transparent;} }

/* =====================================================================
   Respect reduced motion — keep the calm, drop the movement
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  #screen-teacher-tools{ animation:none; }
  #screen-teacher-tools h1.display-lg::before{ animation:none; opacity:.6; }
  .aog-grace-word .agw-dot{ animation:none; }
  .hyb-hero.aog-tap::before{ animation:none; }
  .response-option.selected, .choice-chip.on{ animation:none; }
  .aog-bloom-ring{ animation-duration:.01s; }
  .aog-bloom-check{ animation:none; }
  .aog-bloom-card{ animation:aogBloomCardRM 3.2s ease forwards; }
  .aog-sw:hover{ transform:none; }
}
@keyframes aogBloomCardRM{ 0%{opacity:0;} 12%{opacity:1;} 86%{opacity:1;} 100%{opacity:0;} }

/* ===== aog-polish-styles ===== */
/* =====================================================================
   ARCHITECTURE OF GRACE · polish.css
   Real-screen fixes from pilot feedback. Additive, reduced-motion-safe.
     1) Self-reflection: reserve space for the intensity block (no mobile jump)
     2) Hero: tighter mobile rhythm + subtle scroll fade
     3) Ecosystem diagram: label breathing room on small viewports
     4) Dashboard "Your data on this device" panel
     5) First-run nudge + save-to-homescreen banner
     6) Keyboard-nav focus rings for card pickers
   ===================================================================== */

/* =====================================================================
   1) INTENSITY SPACE-RESERVE — depth mode shows a 6-point scale + an
   intensity follow-up. polish.js adds .aog-reserve when 6 options render,
   so the nav row never jumps when the intensity block appears.
   ===================================================================== */
#intensityArea{ transition:min-height .2s var(--ease-out, ease); }
#intensityArea.aog-reserve{ min-height:184px; }
@media (max-width:560px){ #intensityArea.aog-reserve{ min-height:238px; } }
@media (prefers-reduced-motion: reduce){ #intensityArea{ transition:none; } }

/* =====================================================================
   2) HERO — tighten vertical rhythm on phones. (Scroll-fade was removed.)
   ===================================================================== */
/* mid-sized viewports (tablet / large phone): a touch more breathing room */
@media (max-width:860px){
  .hero-showcase{ gap:18px; margin:8px 0 30px; }
  .door-flank{ padding:19px 21px; }
}
@media (max-width:600px){
  /* phones: keep it roomy, not snug */
  .hero-showcase{ gap:16px; margin:8px 0 28px; }
  .door-flank{ padding:17px 19px; gap:12px; }
  .door-flank .door-icon{ width:42px; height:42px; font-size:19px; }
  .hyb-hero{ padding-top:40px; }
  #screen-welcome .hyb-hero{ padding-bottom:36px; }
  .hyb-title{ margin-top:12px; }
  .hyb-bar{ margin-top:22px; padding:10px 0; }
  .hyb-aud{ margin-top:18px; }
  .hyb-cta{ margin-top:22px; }
  .hyb-onesent{ margin-top:18px; }
  .hyb-forall{ margin-top:14px; }
  .hyb-leaders{ margin-top:18px; padding-top:16px; }
}
/* (Scroll-fade removed: the hero is a dark navy block, so fading its opacity
   revealed the bright page behind it and read as a harsh white-out.) */

/* =====================================================================
   3) ECOSYSTEM DIAGRAM — give node + edge labels a little more room on
   small viewports so they don't read as cramped.
   ===================================================================== */
@media (max-width:600px){
  .eco-name{ font-size:14px; }
  .eco-role{ font-size:9px; }
  .eco-tag{ font-size:8.5px; letter-spacing:.08em; }
  .eco-elabel{ font-size:9.5px; stroke-width:4.5px; }
  .eco-c1{ font-size:16px; }
  .eco-c2{ font-size:8.5px; letter-spacing:.1em; }
  #ecoSvg{ min-height:300px; }
}

/* =====================================================================
   4) DASHBOARD · "Your data on this device" panel
   (markup lives in base.html; styling here)
   ===================================================================== */
.aog-data-card{ padding:22px 24px; }
.aog-data-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 18px; }
.aog-data-stat{
  background:var(--cream, #F4EEE2); border:1px solid var(--rule); border-radius:12px;
  padding:14px 10px; text-align:center;
}
:root[data-theme="dark"] .aog-data-stat{ background:rgba(255,255,255,.04); }
.aog-data-stat-n{ font-family:var(--font-serif, Georgia, serif); font-size:30px; font-weight:600; color:var(--gold); line-height:1; }
.aog-data-stat-l{ font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px; }
.aog-data-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.aog-data-actions .btn{ flex:1 1 auto; }
.aog-data-actions .btn.aog-data-delete{ flex-basis:100%; }
.aog-data-note{ font-size:12px; color:var(--ink-soft); margin-top:12px; line-height:1.5; }
.aog-data-done{
  display:none; margin-top:12px; padding:10px 14px; border-radius:10px;
  background:var(--green-bg, #E8F0E7); color:var(--green, #2E6B3A);
  font-size:13px; font-weight:600; text-align:center;
}
.aog-data-done.show{ display:block; }

/* =====================================================================
   5) FIRST-RUN NUDGE + SAVE-TO-HOMESCREEN BANNER
   ===================================================================== */
.aog-nudge{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:22px; z-index:200; max-width:440px; width:calc(100% - 32px);
  display:flex; align-items:center; gap:12px;
  background:var(--navy, #0A1E33); color:var(--cream, #F4EEE2);
  border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius:14px; padding:13px 14px 13px 16px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
  animation:aogNudgeIn .4s cubic-bezier(.16,1,.3,1);
}
.aog-nudge-tx{ flex:1 1 auto; font-family:var(--font-sans); font-size:13.5px; line-height:1.4; }
.aog-nudge-tx b{ color:var(--gold-soft, #F2C964); font-weight:800; }
.aog-nudge-link{ color:var(--gold-soft, #F2C964); font-weight:700; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.aog-nudge-go{
  flex:0 0 auto; font-family:var(--font-sans); font-weight:800; font-size:13px;
  background:var(--gold-soft, #F2C964); color:var(--navy, #0A1E33);
  border:none; border-radius:9px; padding:9px 14px; cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.aog-nudge-go:hover{ background:#fff; }
.aog-nudge-x{
  flex:0 0 auto; width:28px; height:28px; border:none; border-radius:8px;
  background:transparent; color:color-mix(in srgb, var(--cream) 70%, transparent);
  cursor:pointer; font-size:18px; line-height:1; display:grid; place-items:center;
}
.aog-nudge-x:hover{ background:rgba(255,255,255,.1); color:#fff; }
@keyframes aogNudgeIn{ from{ opacity:0; transform:translate(-50%,14px); } to{ opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce){ .aog-nudge{ animation:none; } }

/* =====================================================================
   6) KEYBOARD NAV — visible focus rings for the card pickers
   ===================================================================== */
.mode-card:focus-visible,
.choose-card:focus-visible,
.pecs-card:focus-visible,
.pecs-strip-card:focus-visible{
  outline:3px solid var(--gold, #D9A33B);
  outline-offset:2px;
  border-radius:var(--radius, 12px);
}
.pecs-card[tabindex]{ outline-offset:2px; }

/* ===== Individual responses roster (Class trends tab) ===== */
#rosterCard .table-card-head{ align-items:flex-start; }
.rost-table{ width:100%; border-collapse:collapse; font-family:var(--font-sans,system-ui); font-size:13.5px; }
.rost-table th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint,#8A92A6); padding:8px 12px; border-bottom:1px solid var(--rule,#E4DAC5); white-space:nowrap; }
.rost-row{ cursor:pointer; transition:background .12s ease; }
.rost-row > td{ padding:11px 12px; border-bottom:1px solid var(--rule-soft,#F0E9DA); color:var(--ink,#0A1E33); vertical-align:middle; }
.rost-row:hover{ background:color-mix(in srgb, var(--gold,#D9A33B) 8%, transparent); }
.rost-row.open{ background:color-mix(in srgb, var(--gold,#D9A33B) 12%, transparent); }
.rost-code{ font-weight:800; color:var(--navy,#0A1E33); }
:root[data-theme="dark"] .rost-code{ color:var(--cream,#F4ECDA); }
.rost-date{ color:var(--ink-soft,#46506E); white-space:nowrap; }
.rost-score{ font-family:var(--font-serif,Georgia,serif); font-size:18px; font-weight:800; }
.rost-band{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap; }
.rost-flag{ color:var(--red,#B23A2E); font-weight:800; font-size:12px; white-space:nowrap; }
.rost-ok{ color:var(--ink-faint,#8A92A6); }
.rost-act{ text-align:right; }
.rost-read{ appearance:none; border:1px solid var(--rule,#E4DAC5); background:var(--paper,#fff); color:var(--ink-soft,#46506E); font-family:var(--font-sans,system-ui); font-size:12px; font-weight:800; padding:5px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:border-color .12s ease,color .12s ease; }
.rost-read:hover{ border-color:var(--gold,#D9A33B); color:var(--navy,#0A1E33); }
.rost-detrow > td{ padding:0 12px 16px; background:color-mix(in srgb, var(--gold,#D9A33B) 5%, transparent); border-bottom:1px solid var(--rule,#E4DAC5); }
.rost-det{ display:grid; grid-template-columns:1fr 1.2fr; gap:18px; padding:14px 6px 4px; }
@media (max-width:640px){ .rost-det{ grid-template-columns:1fr; } }
.rost-dbar{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.rost-dlbl{ flex:0 0 auto; width:128px; font-size:12px; font-weight:700; color:var(--ink-soft,#46506E); }
.rost-dtrack{ flex:1 1 auto; height:9px; border-radius:999px; background:var(--rule,#E4DAC5); overflow:hidden; }
.rost-dfill{ display:block; height:100%; border-radius:999px; }
.rost-dval{ flex:0 0 auto; width:26px; text-align:right; font-size:12.5px; font-weight:800; color:var(--ink,#0A1E33); }
.rost-det-h{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint,#8A92A6); margin-bottom:6px; }
.rost-refl{ font-family:var(--font-serif,Georgia,serif); font-size:14px; line-height:1.5; color:var(--navy,#0A1E33); margin:0 0 8px; }
:root[data-theme="dark"] .rost-refl{ color:var(--cream,#F4ECDA); }
.rost-muted{ font-size:13px; color:var(--ink-faint,#8A92A6); font-style:italic; align-self:center; }
.rost-det-flag{ grid-column:1 / -1; font-size:12.5px; font-weight:700; color:var(--red,#B23A2E); background:var(--red-bg,#FBEAE7); border-radius:10px; padding:9px 12px; }

/* roster source explainer */
.rost-note{ display:flex; align-items:flex-start; gap:8px; margin:0 0 4px; padding:10px 13px; border-radius:10px;
  background:color-mix(in srgb, var(--navy,#0A1E33) 5%, transparent); border:1px solid var(--rule-soft,#F0E9DA);
  font-family:var(--font-sans,system-ui); font-size:12.5px; line-height:1.5; color:var(--ink-soft,#46506E); }
.rost-note svg{ flex:0 0 auto; margin-top:2px; color:var(--navy,#0A1E33); opacity:.7; }
:root[data-theme="dark"] .rost-note{ background:rgba(255,255,255,.05); color:var(--cream,#F4ECDA); }
:root[data-theme="dark"] .rost-note svg{ color:var(--cream,#F4ECDA); }

/* ===== Device mockups (hero showcase + framework tablet) — pure CSS, themeable ===== */
.aog-showcase{ display:flex; align-items:flex-end; justify-content:center; margin:40px auto 4px; max-width:880px; padding:0 8px; animation:aogMockIn .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes aogMockIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.dvc{ position:relative; filter:drop-shadow(0 22px 34px rgba(10,30,51,.20)); transition:transform .32s cubic-bezier(.16,1,.3,1), filter .32s ease; }
:root[data-theme="dark"] .dvc{ filter:drop-shadow(0 22px 34px rgba(0,0,0,.5)); }
/* hover lift — each device restates its own tilt so the rotation is preserved */
.dvc:hover{ filter:drop-shadow(0 32px 44px rgba(10,30,51,.27)); }
.dvc-laptop:hover{ transform:translateY(-7px); }
.dvc-phone:hover{ transform:rotate(-6deg) translateY(0); }
.dvc-tablet:hover{ transform:rotate(5deg) translateY(-2px); }
.aog-fwmock .dvc-tablet:hover{ transform:rotate(-3deg) translateY(-7px); }
.dvc-scr{ background:var(--paper,#fff); overflow:hidden; position:relative; }
.dvc .mk{ padding:9px 10px; box-sizing:border-box; height:100%; text-align:left; background:var(--paper,#fff); }
:root[data-theme="dark"] .dvc .mk{ background:var(--navy-soft,#0E1822); }
/* frames */
.dvc-laptop{ width:402px; z-index:2; }
.dvc-laptop .dvc-scr{ border:9px solid #1b2029; border-bottom-width:0; border-radius:13px 13px 0 0; aspect-ratio:16/10; }
.dvc-laptop .dvc-base{ height:13px; margin:0 -20px; background:linear-gradient(#cfd3da,#a9afba); border-radius:0 0 9px 9px; position:relative; }
.dvc-laptop .dvc-base::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:82px; height:6px; background:#878d99; border-radius:0 0 6px 6px; }
.dvc-phone{ width:118px; z-index:3; margin-right:-30px; transform:rotate(-6deg) translateY(8px); }
.dvc-phone .dvc-scr{ border:6px solid #1b2029; border-radius:20px; aspect-ratio:9/18.5; }
.dvc-phone .dvc-scr::before{ content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:34px; height:7px; background:#1b2029; border-radius:5px; z-index:6; }
.dvc-tablet{ width:188px; z-index:1; margin-left:-26px; transform:rotate(5deg) translateY(6px); }
.dvc-tablet .dvc-scr{ border:8px solid #1b2029; border-radius:16px; aspect-ratio:3/4; }
/* mini-UI bits */
.mk-top{ display:flex; align-items:center; gap:5px; margin-bottom:7px; }
.mk-dot{ width:13px; height:13px; border-radius:4px; background:var(--navy,#0A1E33); }
:root[data-theme="dark"] .mk-dot{ background:var(--gold,#D9A33B); }
.mk-brand{ font-family:var(--font-serif,Georgia,serif); font-size:8px; font-weight:700; color:var(--navy,#0A1E33); }
:root[data-theme="dark"] .mk-brand{ color:var(--cream,#F4ECDA); }
.mk-eyebrow{ font-size:6px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); font-weight:800; margin-bottom:5px; }
.mk-q{ font-family:var(--font-serif,Georgia,serif); font-size:10.5px; line-height:1.25; color:var(--navy,#0A1E33); margin-bottom:8px; }
:root[data-theme="dark"] .mk-q{ color:var(--cream,#F4ECDA); }
.mk-kpis{ display:flex; gap:5px; margin-bottom:7px; }
.mk-kpis div{ flex:1; background:var(--cream-deep,#EDE6D6); border-radius:5px; padding:4px 2px; text-align:center; }
:root[data-theme="dark"] .mk-kpis div{ background:rgba(255,255,255,.06); }
.mk-kpis b{ display:block; font-family:var(--font-serif,Georgia,serif); font-size:13px; color:var(--navy,#0A1E33); }
:root[data-theme="dark"] .mk-kpis b{ color:var(--cream,#F4ECDA); }
.mk-kpis span{ font-size:5px; color:var(--ink-soft,#46506E); text-transform:uppercase; letter-spacing:.04em; }
.mk-dist{ display:flex; height:10px; border-radius:5px; overflow:hidden; margin-bottom:7px; }
.mk-dist i{ display:block; } .mk-dist .g{ background:var(--green,#3E7C4F); width:var(--w); } .mk-dist .a{ background:var(--amber,#C98A12); width:var(--w); } .mk-dist .r{ background:var(--red,#B23A2E); width:var(--w); }
.mk-cards{ display:flex; gap:5px; } .mk-card{ flex:1; height:22px; border-radius:6px; background:var(--cream-deep,#EDE6D6); border:1px solid var(--rule,#E4DAC5); }
:root[data-theme="dark"] .mk-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.mk-optcol{ display:flex; flex-direction:column; gap:5px; }
.mk-optcol span{ height:13px; border-radius:6px; background:var(--cream-deep,#EDE6D6); border:1px solid var(--rule,#E4DAC5); }
.mk-optcol .on{ background:color-mix(in srgb, var(--gold,#D9A33B) 32%, var(--paper,#fff)); border-color:var(--gold,#D9A33B); }
.mk-score{ font-family:var(--font-serif,Georgia,serif); font-size:28px; font-weight:800; color:var(--amber,#C98A12); text-align:center; margin-top:4px; line-height:1; }
.mk-band{ text-align:center; font-size:6.5px; font-weight:800; color:var(--amber,#C98A12); background:var(--amber-bg,#FBF1DD); border-radius:999px; padding:2px 7px; width:max-content; margin:3px auto 8px; }
.mk-flow{ display:flex; flex-direction:column; gap:5px; }
.mk-flow span{ font-size:7px; font-weight:700; padding:4px 6px; border-radius:6px; background:var(--cream-deep,#EDE6D6); border-left:3px solid var(--gold,#D9A33B); color:var(--ink,#0A1E33); }
:root[data-theme="dark"] .mk-flow span{ background:rgba(255,255,255,.06); color:var(--cream,#F4ECDA); }
.mk-flow .loop{ text-align:center; border-left:0; background:transparent; color:var(--gold-deep,#9a6f24); font-weight:800; }
/* framework floating tablet */
.aog-fwmock{ display:flex; justify-content:center; margin:6px auto 26px; }
.aog-fwmock .dvc-tablet{ width:208px; margin:0; transform:rotate(-3deg); }
@media (max-width:680px){
  .aog-showcase .dvc-laptop, .aog-showcase .dvc-tablet{ display:none; }
  .aog-showcase .dvc-phone{ width:150px; margin:0; transform:rotate(0); }
}
@media (prefers-reduced-motion: reduce){
  .aog-showcase{ animation:none; }
  .dvc{ filter:drop-shadow(0 14px 22px rgba(10,30,51,.18)); transition:none; }
  .dvc-laptop:hover, .dvc-phone:hover, .dvc-tablet:hover, .aog-fwmock .dvc-tablet:hover{ transform:none; }
  .dvc-phone:hover{ transform:rotate(-6deg) translateY(8px); }
  .dvc-tablet:hover{ transform:rotate(5deg) translateY(6px); }
  .aog-fwmock .dvc-tablet:hover{ transform:rotate(-3deg); }
}

/* ===== Pillar subline — de-ornament into a plain, scannable takeaway ===== */
.pillar-line{ font-family:var(--font-sans,system-ui) !important; font-style:normal !important; font-weight:500 !important; font-size:16px !important; line-height:1.55 !important; color:var(--cream,#F4ECDA) !important; margin:14px auto 0 !important; }
.pillar-line em{ font-style:normal !important; font-weight:700 !important; color:var(--gold-soft,#E8C982) !important; border-bottom:0 !important; padding:0 !important; }

/* ===== Four-pillars explicit lead sentence ===== */
.hp-lead{ font-family:var(--font-sans,system-ui); font-size:15.5px; font-weight:600; line-height:1.5; color:var(--cream,#F4ECDA); max-width:560px; margin:2px auto 7px; }

/* ===== aog-tools-styles ===== */
/* =====================================================================
   ARCHITECTURE OF GRACE · tools.css
   Rich, animated versions of four calm tools: Body Scan, Feelings Wheel,
   Bilateral Tapping, Animal Yoga. Reduced-motion respected. No libraries.
   ===================================================================== */

/* shared */
.aogt-wrap{ max-width:460px; margin:8px auto 0; text-align:center; }
.aogt-cue{ font-family:var(--font-serif,Georgia,serif); font-size:18px; line-height:1.45; color:var(--navy,#0A1E33); min-height:54px; padding:0 6px;
  transition:opacity .35s ease; }
:root[data-theme="dark"] .aogt-cue{ color:var(--cream,#F4ECDA); }
.aogt-controls{ display:flex; gap:10px; justify-content:center; margin-top:11px; flex-wrap:wrap; }
.aogt-controls .btn{ min-width:120px; justify-content:center; }
.aogt-progress{ font-family:var(--font-sans,system-ui); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-top:10px; }

/* ---------- BODY SCAN ---------- */
.bs-stage{ position:relative; width:104px; margin:6px auto 2px; }
.bs-body path, .bs-body circle, .bs-body rect{ transition:fill .5s ease, opacity .5s ease; }
.bs-region{ fill:var(--rule,#E4DAC5); opacity:.55; }
.bs-region.on{ fill:var(--gold,#D9A33B); opacity:1; animation:bsPulse 2.2s ease-in-out infinite; }
@keyframes bsPulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(217,163,59,0)); } 50%{ filter:drop-shadow(0 0 7px rgba(217,163,59,.85)); } }
.bs-beam{ pointer-events:none; }
.bs-beam rect{ transition:transform 1.6s cubic-bezier(.45,.05,.55,.95); }

/* ---------- FEELINGS WHEEL ---------- */
.fw2-stage{ position:relative; width:186px; height:186px; margin:4px auto 0; }
.fw2-wheel{ transform-origin:50% 50%; transition:transform 4.2s cubic-bezier(.15,.85,.25,1); }
.fw2-pointer{ position:absolute; top:-2px; left:50%; transform:translateX(-50%); z-index:3;
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:17px solid var(--navy,#0A1E33);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.fw2-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:46px;height:46px;border-radius:50%; background:var(--paper,#fff); border:3px solid var(--navy,#0A1E33);
  display:grid; place-items:center; font-size:20px; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.fw2-readout{ max-width:420px; margin:12px auto 0; min-height:72px; padding:12px 16px; border-radius:14px;
  background:var(--cream-deep,#EDE6D6); border:1px solid var(--rule,#E4DAC5); transition:background .4s ease; }
:root[data-theme="dark"] .fw2-readout{ background:rgba(255,255,255,.05); }
.fw2-feel{ font-family:var(--font-serif,Georgia,serif); font-size:22px; font-weight:700; }
.fw2-desc{ font-family:var(--font-sans,system-ui); font-size:14px; line-height:1.5; color:var(--ink,#0A1E33); margin-top:5px; }
:root[data-theme="dark"] .fw2-desc{ color:var(--cream,#F4ECDA); }
.fw2-tip{ font-family:var(--font-sans,system-ui); font-size:13px; font-style:italic; color:var(--ink-soft,#46506E); margin-top:7px; }

/* ---------- BILATERAL TAPPING (butterfly hug) ---------- */
.bh-stage{ width:230px; margin:12px auto 4px; }
.bh-hand{ transform-origin:center; transition:transform .14s ease; }
.bh-hand.tap{ animation:bhTap .42s ease; }
@keyframes bhTap{ 0%{ transform:scale(1);} 35%{ transform:scale(1.35); } 100%{ transform:scale(1);} }
.bh-glow{ opacity:0; transition:opacity .15s ease; }
.bh-glow.on{ opacity:1; }
.bh-beat{ display:inline-flex; gap:8px; margin-top:8px; }
.bh-beat span{ width:11px;height:11px;border-radius:50%; background:var(--rule,#E4DAC5); transition:background .15s ease, transform .15s ease; }
.bh-beat span.on{ background:var(--gold,#D9A33B); transform:scale(1.25); }

/* ---------- ANIMAL YOGA ---------- */
.ay-stage{ position:relative; width:200px; height:200px; margin:8px auto 0; display:grid; place-items:center; }
.ay-ring{ position:absolute; inset:0; }
.ay-ring circle{ transition:stroke-dashoffset 1s linear; }
.ay-animal{ font-size:88px; line-height:1; user-select:none; }
.ay-animal.go-butterfly{ animation:ayFlap 1.1s ease-in-out infinite; }
.ay-animal.go-cat{ animation:ayArch 2.4s ease-in-out infinite; }
.ay-animal.go-lion{ animation:ayRoar 1.8s ease-in-out infinite; }
.ay-animal.go-dog{ animation:ayBob 1.6s ease-in-out infinite; }
.ay-animal.go-frog{ animation:ayHop 1.3s ease-in-out infinite; }
.ay-animal.go-bear{ animation:aySway 2.6s ease-in-out infinite; }
@keyframes ayFlap{ 0%,100%{ transform:scaleX(1) rotate(-4deg);} 50%{ transform:scaleX(.62) rotate(4deg);} }
@keyframes ayArch{ 0%,100%{ transform:rotate(-8deg) translateY(0);} 50%{ transform:rotate(8deg) translateY(-6px);} }
@keyframes ayRoar{ 0%,100%{ transform:scale(1);} 45%{ transform:scale(1.22);} 60%{ transform:scale(1.12);} }
@keyframes ayBob{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-10px) rotate(-5deg);} }
@keyframes ayHop{ 0%,100%{ transform:translateY(0) scale(1,1);} 30%{ transform:translateY(0) scale(1.15,.82);} 60%{ transform:translateY(-26px) scale(.9,1.12);} }
@keyframes aySway{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }
.ay-name{ font-family:var(--font-serif,Georgia,serif); font-size:21px; font-weight:700; color:var(--navy,#0A1E33); margin-top:6px; }
:root[data-theme="dark"] .ay-name{ color:var(--cream,#F4ECDA); }
.ay-do{ font-family:var(--font-sans,system-ui); font-size:14px; line-height:1.5; color:var(--ink-soft,#46506E); max-width:380px; margin:4px auto 0; }
.ay-thumbs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.ay-thumb{ width:48px;height:48px;border-radius:12px; border:2px solid var(--rule,#E4DAC5); background:var(--paper,#fff); font-size:26px; cursor:pointer; line-height:1;
  display:grid; place-items:center; transition:transform .14s ease, border-color .14s ease; }
.ay-thumb:hover{ transform:translateY(-2px); }
.ay-thumb.on{ border-color:var(--gold,#D9A33B); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent); }
.ay-hold{ font-family:var(--font-sans,system-ui); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep,#9a6f24); margin-top:8px; }

/* ---------- EMOTION WHEEL (drill-down) ---------- */
.emo-stage{ position:relative; width:230px; margin:6px auto 0; }
.emo-wedge{ cursor:pointer; transition:filter .15s ease, opacity .15s ease; }
.emo-wedge:hover{ filter:brightness(1.08); }
.emo-lbl{ font-family:var(--font-sans,system-ui); font-weight:800; fill:#fff; pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.18); stroke-width:.6px; }
.emo-read{ max-width:420px; margin:14px auto 0; min-height:78px; padding:14px 16px; border-radius:14px; background:var(--cream-deep,#EDE6D6); border:1px solid var(--rule,#E4DAC5); text-align:center; }
:root[data-theme="dark"] .emo-read{ background:rgba(255,255,255,.05); }
.emo-named{ font-family:var(--font-serif,Georgia,serif); font-size:21px; font-weight:700; color:var(--navy,#0A1E33); }
:root[data-theme="dark"] .emo-named{ color:var(--cream,#F4ECDA); }
.emo-kind{ font-family:var(--font-sans,system-ui); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint,#8A92A6); margin-top:3px; }
.emo-say{ font-family:var(--font-sans,system-ui); font-size:13.5px; line-height:1.5; color:var(--ink,#0A1E33); margin-top:8px; }
:root[data-theme="dark"] .emo-say{ color:var(--cream,#F4ECDA); }

/* ---------- 5-4-3-2-1 GROUNDING ---------- */
.gnd-prog{ display:flex; gap:8px; justify-content:center; margin:4px auto 2px; }
.gnd-dot{ width:9px; height:9px; border-radius:50%; background:var(--rule,#E4DAC5); transition:background .2s ease, transform .2s ease; }
.gnd-dot.on{ background:var(--gold,#D9A33B); transform:scale(1.18); }
.gnd-stage{ display:grid; place-items:center; margin:8px auto 2px; }
.gnd-stage #gndHalo{ transition:stroke .35s ease, fill .35s ease; }
#gndIcon.gnd-pop{ animation:gndPop .5s cubic-bezier(.34,1.56,.64,1); transform-box:fill-box; transform-origin:center; }
@keyframes gndPop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }
.gnd-sense{ display:flex; align-items:baseline; gap:10px; justify-content:center; margin-top:2px; }
.gnd-num{ font-family:var(--font-serif,Georgia,serif); font-size:34px; font-weight:800; line-height:1; }
.gnd-lbl{ font-family:var(--font-sans,system-ui); font-size:14px; font-weight:800; letter-spacing:.14em; color:var(--ink-soft,#46506E); }
.gnd-q{ font-family:var(--font-serif,Georgia,serif); font-size:17px; line-height:1.35; color:var(--navy,#0A1E33); max-width:420px; margin:6px auto 0; }
:root[data-theme="dark"] .gnd-q{ color:var(--cream,#F4ECDA); }
.gnd-chips{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px auto 0; }
.gnd-chip{ min-width:38px; height:38px; border-radius:11px; border:2px solid var(--rule,#E4DAC5); background:var(--paper,#fff); color:var(--ink-soft,#46506E); font-family:var(--font-sans,system-ui); font-size:15px; font-weight:800; cursor:pointer; line-height:1; transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.gnd-chip:hover{ transform:translateY(-2px); }
.gnd-chip.on{ color:#fff; transform:translateY(0) scale(1.04); }
.gnd-ex{ font-family:var(--font-sans,system-ui); font-size:13px; font-style:italic; color:var(--ink-faint,#8A92A6); max-width:400px; margin:12px auto 0; }

/* ---------- TAKE 5 (elite hand trace) ---------- */
.t5-wrap{ max-width:460px; margin:6px auto 0; text-align:center; }
.t5-svg2{ display:block; margin:0 auto; }
.t5-palm2{ fill:color-mix(in srgb, var(--gold,#D9A33B) 24%, #fff); stroke:color-mix(in srgb, var(--gold,#D9A33B) 55%, #fff); stroke-width:2; }
:root[data-theme="dark"] .t5-palm2{ fill:color-mix(in srgb, var(--gold,#D9A33B) 30%, #0E1822); stroke:color-mix(in srgb, var(--gold,#D9A33B) 60%, #0E1822); }
.t5-fin{ stroke:color-mix(in srgb, var(--gold,#D9A33B) 24%, #fff); stroke-width:20; transition:stroke .3s ease; }
:root[data-theme="dark"] .t5-fin{ stroke:color-mix(in srgb, var(--gold,#D9A33B) 30%, #0E1822); }
.t5-fin.on{ stroke:color-mix(in srgb, var(--gold,#D9A33B) 60%, #fff); }
.t5-ring2{ fill:none; stroke:var(--gold-deep,#9a6f24); stroke-width:2.5; opacity:0; }
.t5-tracer2{ fill:var(--gold-deep,#9a6f24); stroke:#fff; stroke-width:2; }
.t5-read{ margin-top:10px; min-height:74px; }
.t5-phase{ font-family:var(--font-serif,Georgia,serif); font-size:22px; font-weight:700; color:var(--navy,#0A1E33); }
:root[data-theme="dark"] .t5-phase{ color:var(--cream,#F4ECDA); }
.t5-secs{ font-family:var(--font-sans,system-ui); font-size:30px; font-weight:800; color:var(--gold-deep,#9a6f24); line-height:1.1; min-height:34px; }
.t5-finc{ font-family:var(--font-sans,system-ui); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint,#8A92A6); }

/* ---------- COLD WATER RESET ---------- */
.cw-stage{ position:relative; width:148px; margin:8px auto 2px; }
.cw-drop{ opacity:0; transform-box:fill-box; }
.cw-stage.flowing .cw-drop{ animation:cwFall 0.85s linear infinite; }
.cw-stage.flowing .cw-drop:nth-of-type(2){ animation-delay:.17s; }
.cw-stage.flowing .cw-drop:nth-of-type(3){ animation-delay:.34s; }
.cw-stage.flowing .cw-drop:nth-of-type(4){ animation-delay:.51s; }
.cw-stage.flowing .cw-drop:nth-of-type(5){ animation-delay:.68s; }
@keyframes cwFall{ 0%{ transform:translateY(0); opacity:0;} 15%{ opacity:1;} 80%{ opacity:1;} 100%{ transform:translateY(66px); opacity:0;} }
.cw-ripple{ opacity:0; transform-box:fill-box; transform-origin:center; }
.cw-stage.flowing .cw-ripple{ animation:cwRipple 1.15s ease-out infinite; }
@keyframes cwRipple{ 0%{ transform:scale(.5); opacity:.75;} 100%{ transform:scale(1.7); opacity:0;} }
.cw-opts{ font-family:var(--font-sans,system-ui); font-size:12.5px; line-height:1.55; color:var(--ink-soft,#46506E); max-width:380px; margin:16px auto 0; text-align:left; }
.cw-opts b{ color:var(--navy,#0A1E33); }
:root[data-theme="dark"] .cw-opts b{ color:var(--cream,#F4ECDA); }

@media (prefers-reduced-motion: reduce){
  .bs-region.on, .ay-animal, .bh-hand.tap, .cw-drop, .cw-ripple, #gndIcon.gnd-pop { animation:none !important; }
  .fw2-wheel{ transition:transform .4s ease; }
  .bs-beam rect{ transition:none; }
}

/* ===== skip link (added 2026-07-01) ===== */
.aog-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--gold,#D9A33B);color:var(--navy,#0A1E33);font-weight:700;font-family:var(--font-sans,sans-serif);font-size:14px;padding:10px 18px;border-radius:0 0 10px 0;text-decoration:none;}
.aog-skip:focus{left:0;outline:3px solid var(--navy,#0A1E33);}
#aog-main:focus{outline:none;}
/* ⚠ THE RING GOES BACK FOR KEYBOARD USERS. :focus-visible fires for the skip
   link and never for the programmatic focus() that follows a mouse click, so
   this restores the affordance without drawing a box round the page body. */
#aog-main:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px;}

/* ===== stable scrollbar gutter (added 2026-07-02): prevents the sideways page 'shake' when panels hide/show and the scrollbar toggles ===== */
html{scrollbar-gutter:stable;}

/* =====================================================================
   aog-still  ·  2026-08-23  ·  MOTION CALMED SITE-WIDE
   ---------------------------------------------------------------------
   Why this exists: decorative motion that ran on a loop, drifted with the
   scroll, or followed the pointer made the page appear to shake while
   scrolling. That is a real vestibular trigger, and it was only ever
   switched off for people who had found the OS-level "Reduce Motion"
   setting. It is now off for everyone, by default, with no toggle to find.

   WHAT IS OFF: ambient glows, breathing dots, pulsing buttons, spinning and
   flowing diagram art, the pointer-reactive hero light, one-shot entrance
   slides, the scroll reveal, and smooth-scroll anchor glides.

   WHAT IS DELIBERATELY LEFT ALONE: motion INSIDE a tool a person opens on
   purpose, where the movement IS the instruction — the breathing orb
   (.gg-orb), the somatic tap pad guide (.gtap-guide), the calm-water stage
   (.cw-*), the animal-yoga poses (.ay-animal), the body-scan highlight
   (.bs-region), the breathing circle (.aogqp-circle), and loading spinners.
   Those already honor the OS Reduce Motion setting on their own.

   TO BRING ONE EFFECT BACK: delete its selector from this block. Nothing
   else in the file was rewritten, so removing a line restores the original.
   ===================================================================== */

/* 1 — The scroll judder itself.
   A fixed-attachment background repaints the whole viewport on every scroll
   frame, and this one was ALSO animating its background-position. Together
   that is the classic "the page is shaking" effect. */
#screen-teacher-tools{
  background-attachment: scroll !important;
  animation: none !important;
}

/* 2 — Anchor jumps land; they do not glide. */
html{ scroll-behavior: auto !important; }

/* 3 — Ambient loops: glows, breathing dots, pulsing buttons, blinking dots. */
#screen-teacher-tools h1.display-lg::before,
.aog-grace-word .agw-dot,
.aog-grace-word--hero .agwh-dot,
.aog-pop,
.aog-demo-flash,
.eco-ring, .eco-flow, .eco-live{
  animation: none !important;
}
#screen-teacher-tools h1.display-lg::before{
  opacity:.5 !important;
  transform: translate(-50%,-50%) scale(1) !important;
}
.aog-pop{ box-shadow:0 6px 18px -8px rgba(242,201,100,.55) !important; }
.eco-ring{ opacity:.7 !important; }
.eco-live{ opacity:.85 !important; }

/* 4 — Spinning and flowing diagram art (landing hero, framework panels,
       ecosystem map). These ran forever in the corner of the eye. */
.aog-of-spin, .aog-of-flow,
.fwl-flow, .fwl-orbit, .fwl-center-ic,
.fw-cell-arrow, .fw-cell-arrow svg,
#fw-panel-ecosystem .fweco-flow, #fw-panel-ecosystem .fweco-spin,
#fw-panel-educators .loop-flow,
.fw-panel .crown-flow,
#screen-ecosystem .ex-flow, #screen-ecosystem .ex-spin{
  animation: none !important;
}

/* 5 — The pointer-reactive light on the landing hero. It tracked the cursor
       and repainted a 280px gradient behind the headline. The static gold
       glow on .hyb-hero::before is untouched. */
.hyb-hero::after{ display: none !important; }
.hyb-hero.aog-tap::after{ animation: none !important; }

/* 6 — Scroll reveal. Content is simply visible. This also permanently
       removes the fail-closed risk: nothing depends on JavaScript running
       for the page to be readable. */
html.js-reveal .reveal,
.js-reveal .reveal,
.reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 7 — One-shot entrances that fired as you scrolled past them. */
.aog-showcase,
.aog-nudge,
.aog-bloom-ring,
.aog-bloom-check{
  animation: none !important;
}
.aog-bloom-ring{ display: none !important; }
.aog-bloom-card{ animation: aogBloomCardRM 3.2s ease forwards !important; }
/* ===== end aog-still ===== */

/* ═══ AOG-NOZOOM-V1 · 2026-09-18 ═══════════════════════════════════════════
   THE PAGE MOVES UNDER YOUR THUMB, AND THIS IS WHY.

   iOS Safari zooms the ENTIRE page when a text field whose computed font-size
   is under 16px takes focus. It does not zoom back out. From that moment the
   layout is wider than the window, so the whole page pans freely left and
   right on any touch — which is not a scroll the page asked for and is what
   makes it feel sickening to use. Jimmy, on an iPhone: "how the screen moves
   easily left or right. It makes me nausea."

   Measured at 390px before this rule: 69 of 121 text-entry controls in
   index.html were under 16px — at 12, 12.5, 13, 13.5, 14 and 15px. #lgUrl,
   the SHAREABLE LINK box, was 13px, so copying a link zoomed the page every
   single time. daily-drops.html was already clean (0 of 20): it has carried
   AOG-DD-STILL-V1 — "every input is at least 16px so iOS never zooms on
   focus" — for months. This is that same guard, finally applied to the nine
   pages that share this stylesheet.

   ⚠ NOT `maximum-scale=1` / `user-scalable=no`. That is the other way people
     stop this, and it is the wrong one: it takes pinch-zoom away from anyone
     who needs to magnify text, and iOS has ignored it since iOS 10 anyway.
     16px is the fix. Zoom stays available to whoever wants it.
   ⚠ SCOPED TO TOUCH. `hover:none and pointer:coarse` is phones and tablets.
     The dashboard's dense filter rows keep their 13px on a mouse, where no
     zoom behaviour exists and the density is wanted.
   ⚠ !important IS LOAD-BEARING. Ten of the sixty-nine set their size in a
     style="" attribute (#lgUrl, #ciLgUrl, #xsLgUrl, #suLgUrl and the rest);
     an author !important is what outranks those. Do not remove it and assume
     the rule still works — re-measure.
   ⚠ Checkboxes, radios, ranges, colour and file pickers are excluded: they
     hold no text, never trigger the zoom, and 16px would resize the controls.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}
/* ═══ end aog-nozoom ═══ */

/* ══ AOG-QUIET-SOFT-GOLD-V1 (2026-09-26) ══════════════════════════════════
   Jimmy: the dark yellow "Right now" panel was harsh next to everything else.
   For a learner who is already fast or jumpy, one spot of colour only: the
   button to press. The panel is pale cream with a thin gold edge (like the
   grace note), the badge and headline are deep muted gold ink, and the gold
   button stays the one solid colour. Light theme only; dark is already quiet. */
html:not([data-theme="dark"]) .wp-tank-result.low,
html:not([data-theme="dark"]) .wp-tank-result.empty{ background:#FFFCF5 !important; border:1.5px solid rgba(184,137,58,.40) !important; }
html:not([data-theme="dark"]) .wp-tank-result.low .band{ color:#7a5a12 !important; }
html:not([data-theme="dark"]) .wp-tank-result .tk-instant-badge{ background:transparent !important; color:#7a5a12 !important; border:0 !important; box-shadow:none !important; padding-left:0 !important; }
