/* 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:   #646E86;
  --rule:        #E4DAC5;
  --rule-soft:   #EFEADB;

  --green:       #2E6B3A;
  --green-bg:    #E8F0E7;
  --amber:       #8A6D1F;
  --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);
}

* { 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: smooth; overflow-x: clip; scrollbar-gutter: stable; }
@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: white;
  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; } }
.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); }
.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);
  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: white;
  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: white;
  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(--cream, #FBF8F1); 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(--cream, #FBF8F1);
  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(--navy);
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  background: var(--cream); 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; }
tr:hover td { background: var(--paper); }

.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: white; }
.heat-5 { background: var(--heat-5); color: white; }

/* 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; }

/* 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(--cream); 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:#fff; 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)}
.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)}
.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); }
/* 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); }
.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; }
  #printReport{ display:block !important; position:absolute; left:0; top:0; 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:#0E1822; }
: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(--cream); 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(--cream); 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 {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; 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(--cream); 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(--cream,#FBF3DF);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-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(#mtssOverlay):not(#printReport){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:flex !important;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:92vh;page-break-after:always;padding:40px;}
  .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-bottom: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:flex;flex-direction:column;gap:8px;margin:40px 0;border-top:2px solid #B8893A;border-bottom:2px solid #B8893A;padding:22px 0;min-width:360px;}
  .mtss-cover-meta > div{display:flex;justify-content:space-between;gap:30px;font-size:15px;}
  .mtss-cover-meta span{color:#5A6B7B;}
  .mtss-cover-meta b{color:#1B3A5F;}
  .mtss-cover-foot{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom));left:0;right:0;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;
  background-attachment:fixed;
  animation:aogAurora 26s ease-in-out infinite alternate;
}
@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;}

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