/* ============================================================
   Walden Tutors, waldentutors.com
   Design system "The Week Clock", v1 (design gate draft)
   School theme colors: the Walden teal/gold/cream family
   (extracted from waldenpreceptor.com tokens), executed as a
   DARK teal-ink theme with warm sand light sections. The
   preceptor sibling is cream and light; this site is its inverse.
   Independent tutoring service. Not affiliated with Walden University.
   ============================================================ */

:root {
  /* Walden school color family (source: waldenpreceptor.com :root tokens) */
  --teal: #0A6E7A;          /* preceptor --accent */
  --teal-deep: #08545E;     /* preceptor --accent-d */
  --teal-bright: #45B7C4;   /* family step lightened for dark surfaces */
  --teal-soft: #D7E9EB;     /* preceptor --accent-soft */
  --gold: #E0A12E;          /* preceptor --gold */
  --gold-deep: #C2861F;     /* preceptor --gold-d */

  /* dark teal-ink base (page background lives dark) */
  --ink: #0B1F23;
  --ink2: #0E262B;
  --card-ink: #12333A;
  --line-ink: #1E4048;
  --text-on-ink: #EDF3F1;
  --muted-on-ink: #A3B8B4;
  --faint-on-ink: #6F8985;

  /* warm sand sections (family of the preceptor cream surfaces) */
  --sand: #F6F1E4;
  --sand-deep: #EDE5D1;
  --card-sand: #FFFFFF;
  --ink-on-sand: #1B2A27;
  --muted-on-sand: #5C6B66;
  --line-on-sand: #E0D9C6;
  --line-strong: #CBC2A9;

  /* type stacks */
  --f-display: "Sora", "Segoe UI", Arial, sans-serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;

  --r-card: 18px;
  --shadow-1: 0 10px 30px rgba(3, 14, 16, 0.35);
  --shadow-2: 0 24px 60px rgba(3, 14, 16, 0.5);
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-on-ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* sleek themed scrollbars, sitewide */
html { scrollbar-width: thin; scrollbar-color: #2A5058 var(--ink); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2A5058; border-radius: 999px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #3A6873; }

::selection { background: var(--teal); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; border-radius: 4px; }
.sec-sand :focus-visible, .sec-sand-deep :focus-visible { outline-color: var(--teal); }

img, svg { max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--f-display); line-height: 1.14; margin: 0 0 14px; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.05rem, 4.5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.32; }
p { margin: 0 0 14px; }

.kicker {
  font-family: var(--f-display);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--teal-bright);
  display: inline-block;
  margin-bottom: 13px;
}
.sec-sand .kicker, .sec-sand-deep .kicker { color: var(--teal); }

.lead { font-size: 1.12rem; color: var(--muted-on-ink); max-width: 62ch; }
.sec-sand .lead, .sec-sand-deep .lead { color: var(--muted-on-sand); }

.hero h1 em { font-style: italic; color: var(--gold); }

/* mono course-code chip: the ONLY monospace surface on the site */
.code-chip {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-bright);
  background: rgba(69, 183, 196, 0.1);
  border: 1px solid rgba(69, 183, 196, 0.36);
  border-radius: 8px;
  padding: 3px 9px;
  display: inline-block;
  white-space: nowrap;
}
.sec-sand .code-chip, .sec-sand-deep .code-chip {
  color: var(--teal-deep);
  background: rgba(10, 110, 122, 0.08);
  border-color: rgba(10, 110, 122, 0.34);
}

.stars { color: var(--gold); letter-spacing: 2px; font-size: 0.85rem; }

/* ---------- buttons (pill, gold primary) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.97rem;
  border-radius: 999px; padding: 13px 26px; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  min-height: 46px;
}
.btn:active { transform: translateY(1px); }
.btn-brand { background: var(--gold); color: #17130A; }
.btn-brand:hover { background: var(--gold-deep); }
.btn-ghost { background: transparent; color: var(--text-on-ink); border-color: #33555C; }
.btn-ghost:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
.sec-sand .btn-ghost, .sec-sand-deep .btn-ghost { color: var(--ink-on-sand); border-color: var(--line-strong); }
.sec-sand .btn-ghost:hover, .sec-sand-deep .btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-ink { background: var(--ink); color: #FFFFFF; }
.btn-ink:hover { background: var(--ink2); }

/* ============================================================
   HEADER: utility top-bar + centered links, underline-grow hover
   ============================================================ */
.util-bar { background: #081619; color: var(--muted-on-ink); font-family: var(--f-display); font-size: 0.78rem; }
.util-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; }
.util-tag { font-weight: 500; }
.util-acts { display: flex; align-items: center; gap: 8px; }
.util-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid #24464D; border-radius: 999px;
  color: var(--text-on-ink); font-family: var(--f-display); font-weight: 600; font-size: 0.76rem;
  padding: 5px 13px; min-height: 30px; cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.util-btn:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
.util-btn svg { width: 14px; height: 14px; }
.util-btn.util-wa:hover { border-color: #4FCB7E; color: #4FCB7E; }
@media (max-width: 640px) { .util-tag { display: none; } .util-bar .wrap { justify-content: flex-end; } }

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 31, 35, 0.9);
  backdrop-filter: blur(12px);
}
.site-head .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: 72px;
  border-bottom: 1px solid var(--line-ink);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; justify-self: start; }
.brand > span { line-height: 1.12; }
.brand-tile {
  width: 38px; height: 38px; border-radius: 12px; background: var(--teal);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 700;
  font-size: 1.02rem; color: #FFFFFF; flex-shrink: 0;
}
.brand-name { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; color: var(--text-on-ink); line-height: 1.1; }
.brand-sub { font-family: var(--f-display); font-size: 0.7rem; font-weight: 500; color: var(--faint-on-ink); }

.nav-links { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav-links a {
  font-family: var(--f-display); font-size: 0.92rem; font-weight: 500;
  text-decoration: none; color: var(--muted-on-ink);
  padding: 9px 12px; position: relative;
}
.nav-links a::after {
  /* underline-grow: this nav's assigned hover indicator */
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.nav-links a:hover { color: var(--text-on-ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.head-side { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-burger {
  display: none; background: none; border: 1px solid #33555C; border-radius: 10px;
  width: 44px; height: 44px; cursor: pointer; color: var(--text-on-ink); font-size: 1.1rem;
}
@media (max-width: 940px) {
  .nav-links, .head-cta { display: none; }
  .nav-burger { display: grid; place-items: center; }
  .site-head .wrap { height: 62px; grid-template-columns: 1fr auto; }
  .site-head.menu-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 62px; left: 0; right: 0;
    background: var(--ink2); border-bottom: 1px solid var(--line-ink);
    padding: 12px 18px 18px; gap: 2px;
  }
  .site-head.menu-open .nav-links a { padding: 13px 10px; }
  .site-head.menu-open .nav-links a::after { display: none; }
}

/* ============================================================
   HERO (dark, with the Week Clock artifact)
   ============================================================ */
.hero { padding: 76px 0 66px; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(720px 440px at 88% 8%, rgba(10, 110, 122, 0.22), transparent 64%),
    radial-gradient(520px 380px at 2% 96%, rgba(224, 161, 46, 0.07), transparent 58%);
  pointer-events: none;
}
.hero .wrap { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 54px; align-items: center; position: relative; }
@media (max-width: 940px) { .hero .wrap { grid-template-columns: 1fr; gap: 42px; } .hero { padding: 50px 0 54px; } }

.hero-sub { font-size: 1.13rem; color: var(--muted-on-ink); max-width: 56ch; margin-bottom: 24px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-mode { font-family: var(--f-display); font-size: 0.9rem; font-weight: 500; color: var(--teal-bright); margin: 0 0 22px; }
.hero-points { display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; list-style: none; }
.hero-points li { display: flex; gap: 10px; align-items: baseline; color: var(--muted-on-ink); font-size: 0.95rem; }
.hero-points li::before { content: "+"; font-family: var(--f-display); color: var(--gold); font-weight: 700; }

/* ---------- the Week Clock card ---------- */
.wk-card {
  background: var(--ink2); border: 1px solid var(--line-ink); border-radius: var(--r-card);
  box-shadow: var(--shadow-2); overflow: hidden;
}
.wk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 18px; background: var(--card-ink);
}
.wk-title { font-family: var(--f-display); font-size: 0.88rem; font-weight: 600; color: var(--muted-on-ink); }
.wk-body { padding: 18px 18px 8px; }

.wk-toggle {
  display: inline-flex; background: var(--ink); border: 1px solid var(--line-ink);
  border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 8px;
}
.wk-toggle button {
  border: none; background: transparent; font-family: var(--f-display); font-weight: 600;
  font-size: 0.86rem; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  color: var(--muted-on-ink); transition: all .18s ease; min-height: 44px;
}
.wk-toggle button.is-on { background: var(--teal); color: #FFFFFF; }

.wk-dial { --size: min(320px, 76vw); position: relative; width: var(--size); height: var(--size); margin: 10px auto 4px; }
.wk-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-day {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  transform: rotate(var(--a)) translate(calc(var(--size) / 2 - 25px)) rotate(calc(-1 * var(--a)));
  border-radius: 999px; border: 1px solid var(--line-ink);
  background: var(--card-ink); color: var(--muted-on-ink);
  font-family: var(--f-display); font-weight: 600; font-size: 0.72rem;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  display: grid; place-items: center; padding: 0;
}
.wk-day:hover { border-color: var(--teal-bright); color: var(--text-on-ink); }
.wk-day.is-due { background: var(--gold); border-color: var(--gold); color: #17130A; }
.wk-day.is-due:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.wk-day.is-sel { box-shadow: 0 0 0 3px rgba(69, 183, 196, 0.55); }
.wk-dial.mode-tempo .wk-day { opacity: 0.22; cursor: default; }

.wk-center {
  position: absolute; inset: 24%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; padding: 6px;
}
.wk-center .wc-day { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--gold); }
.wk-center .wc-what { font-size: 0.88rem; color: var(--text-on-ink); line-height: 1.4; }
.wk-center .wc-when { font-family: var(--f-display); font-size: 0.72rem; font-weight: 500; color: var(--muted-on-ink); }
.wk-dial.mode-tempo .wk-center .wc-day { color: var(--teal-bright); }

.wk-note {
  margin: 12px 18px 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(10, 110, 122, 0.16); border: 1px solid rgba(69, 183, 196, 0.3);
  font-size: 0.88rem; color: #D6E4E1;
}
.wk-note strong { color: var(--teal-bright); font-weight: 600; }
.wk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 18px; background: var(--card-ink); }
.wk-score { font-family: var(--f-display); font-size: 0.84rem; color: var(--muted-on-ink); }
.wk-score b { color: var(--gold); font-weight: 700; }

/* ============================================================
   STAKES STRIP (weekly-deadline pressure, directly after hero)
   ============================================================ */
.stakes { background: var(--ink2); padding: 40px 0 44px; }
.stakes-in { font-family: var(--f-display); font-weight: 600; font-size: 0.94rem; color: var(--gold); margin-bottom: 22px; }
.stakes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 940px) { .stakes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stakes-grid { grid-template-columns: 1fr; gap: 18px; } }
.stake-num { font-family: var(--f-display); font-weight: 700; font-size: 1.65rem; color: var(--text-on-ink); line-height: 1.1; margin-bottom: 6px; }
.stake-body { font-size: 0.9rem; color: var(--muted-on-ink); }
.stakes-out { margin-top: 26px; font-size: 1rem; color: var(--text-on-ink); font-style: italic; }

/* ============================================================
   TRUST BAND (solid teal)
   ============================================================ */
.trust-band { background: var(--teal); color: #FFFFFF; padding: 26px 0; }
.trust-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.trust-cell { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.trust-num { font-family: var(--f-display); font-weight: 700; font-size: 1.66rem; line-height: 1; }
.trust-label { font-family: var(--f-display); font-size: 0.8rem; font-weight: 500; opacity: 0.85; }
.trust-band .stars { font-size: 0.92rem; }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { padding: 90px 0; }
.sec-sand { background: var(--sand); color: var(--ink-on-sand); }
.sec-sand-deep { background: var(--sand-deep); color: var(--ink-on-sand); }
.sec-sand h1, .sec-sand h2, .sec-sand h3,
.sec-sand-deep h1, .sec-sand-deep h2, .sec-sand-deep h3 { color: var(--ink-on-sand); }
.sec-head { max-width: 730px; margin-bottom: 42px; }
@media (max-width: 640px) { .sec { padding: 60px 0; } .sec-head { margin-bottom: 30px; } }

/* services grid (sand) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.svc {
  background: var(--card-sand); border: 1px solid var(--line-on-sand); border-radius: var(--r-card);
  padding: 24px 22px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 3px 14px rgba(27, 42, 39, 0.06);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.svc:hover { border-color: rgba(10, 110, 122, 0.5); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(10, 110, 122, 0.14); }
.svc-ico {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(10, 110, 122, 0.09);
  border: 1px solid rgba(10, 110, 122, 0.3); display: grid; place-items: center; color: var(--teal);
}
.svc h3 { margin: 0; color: var(--ink-on-sand); }
.svc p { color: var(--muted-on-sand); font-size: 0.94rem; margin: 0; }
.svc-go { font-family: var(--f-display); font-size: 0.88rem; font-weight: 600; color: var(--teal); margin-top: auto; }

/* ============================================================
   PATHWAY EXPLAINER (dark, two columns + chooser)
   ============================================================ */
.path-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.path-pick button {
  border: 1px solid #33555C; background: transparent; border-radius: 999px; padding: 11px 20px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; color: var(--muted-on-ink);
  cursor: pointer; transition: all .16s ease; min-height: 44px;
}
.path-pick button.is-on { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }

.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .path-grid { grid-template-columns: 1fr; } }
.pathcol {
  background: var(--ink2); border: 1px solid var(--line-ink); border-radius: var(--r-card);
  padding: 26px 24px 20px; transition: border-color .18s ease, opacity .18s ease;
}
.pathcol.is-lit { border-color: rgba(69, 183, 196, 0.6); }
.pathcol.is-dim { opacity: 0.55; }
.pathcol h3 { font-size: 1.2rem; margin-bottom: 2px; }
.path-tag { font-family: var(--f-display); font-size: 0.82rem; font-weight: 500; color: var(--gold); display: block; margin-bottom: 14px; }
.path-row { padding: 12px 0; border-bottom: 1px solid var(--line-ink); font-size: 0.94rem; color: var(--muted-on-ink); }
.path-row:last-child { border-bottom: none; }
.path-row b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 0.88rem; color: var(--text-on-ink); margin-bottom: 3px; }
.path-row strong { color: var(--teal-bright); font-weight: 600; }
.path-note { margin-top: 22px; font-size: 0.93rem; color: var(--muted-on-ink); max-width: 76ch; }
.path-note strong { color: var(--gold); font-weight: 600; }

/* ============================================================
   COURSE RAIL (sand deep)
   ============================================================ */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 4px 18px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); }
.course-card {
  min-width: 248px; max-width: 248px; scroll-snap-align: start;
  background: var(--card-sand); border: 1px solid var(--line-on-sand); border-radius: 14px;
  padding: 18px 17px 15px; text-decoration: none; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 3px 14px rgba(27, 42, 39, 0.06);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.course-card:hover { border-color: rgba(10, 110, 122, 0.5); box-shadow: 0 8px 24px rgba(10, 110, 122, 0.15); }
.course-card h3 { font-size: 0.96rem; margin: 0; color: var(--ink-on-sand); }
.course-card .cc-meta { font-family: var(--f-display); font-size: 0.78rem; font-weight: 500; color: #948B72; }
.rail-hint { font-family: var(--f-display); font-size: 0.84rem; font-weight: 500; color: #948B72; margin-top: 4px; }

/* ============================================================
   TEMPO METER (signature device, dark)
   ============================================================ */
.meter {
  background: var(--ink2); border: 1px solid var(--line-ink); border-radius: 20px;
  box-shadow: var(--shadow-2); overflow: hidden;
}
.meter-controls { padding: 30px 30px 8px; display: grid; grid-template-columns: auto auto 1fr; gap: 26px; align-items: start; }
@media (max-width: 940px) { .meter-controls { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 4px; } }
.ctl-label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; color: var(--text-on-ink); }
.ctl-label output { font-family: var(--f-display); font-weight: 700; color: var(--gold); font-size: 1.05rem; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  border: 1px solid #33555C; background: transparent; border-radius: 999px; padding: 10px 17px;
  font-family: var(--f-display); font-weight: 600; font-size: 0.86rem; color: var(--muted-on-ink);
  cursor: pointer; transition: all .15s ease; min-height: 44px;
}
.seg button.is-on { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.ctl.is-off { opacity: 0.4; }
.ctl.is-off .seg button, .ctl.is-off input { pointer-events: none; }

input[type="range"] { width: 100%; accent-color: var(--gold); height: 34px; }

.meter-result {
  margin: 22px 30px 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(140deg, var(--teal), var(--teal-deep)); color: #FFFFFF;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 940px) { .meter-result { grid-template-columns: repeat(2, 1fr); margin: 18px 20px 0; } }
@media (max-width: 560px) { .meter-result { grid-template-columns: 1fr; } }
.mr-cell { padding: 22px 20px 18px; }
.mr-k { font-family: var(--f-display); font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); margin-bottom: 7px; }
.mr-v { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.22; }
.mr-v.hl { color: var(--gold); }
.mr-v small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); margin-top: 3px; }
.meter-note { padding: 20px 30px 28px; font-size: 0.84rem; color: var(--muted-on-ink); line-height: 1.6; max-width: 90ch; }
@media (max-width: 940px) { .meter-note { padding: 18px 20px 24px; } }
.meter-note strong { color: var(--gold); font-weight: 600; }

/* ============================================================
   TUITION COMPARISON (sand, two-card pathway money math)
   ============================================================ */
.money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .money-grid { grid-template-columns: 1fr; } }
.money-col {
  background: var(--card-sand); border: 1px solid var(--line-on-sand); border-radius: var(--r-card);
  padding: 26px 24px; box-shadow: 0 3px 14px rgba(27, 42, 39, 0.06);
}
.money-col h3 { font-size: 1.12rem; margin-bottom: 4px; }
.money-sub { font-family: var(--f-display); color: var(--muted-on-sand); font-size: 0.85rem; font-weight: 500; margin-bottom: 12px; }
.money-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-on-sand); font-size: 0.94rem; }
.money-row:last-of-type { border-bottom: none; }
.money-row b { font-family: var(--f-display); font-weight: 700; font-size: 1rem; text-align: right; white-space: nowrap; }
.money-line { margin: 14px 0 0; font-size: 0.93rem; color: var(--muted-on-sand); }
.money-us { background: linear-gradient(150deg, var(--teal), var(--teal-deep)); border-color: transparent; color: #FFFFFF; }
.money-us h3 { color: #FFFFFF; }
.money-us .money-sub { color: rgba(255, 255, 255, 0.8); }
.money-us .money-row { border-color: rgba(255, 255, 255, 0.22); }
.money-us .money-line { color: rgba(255, 255, 255, 0.85); }
.money-keep {
  margin-top: 16px; background: rgba(255, 255, 255, 0.13); border-radius: 12px; padding: 13px 14px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.14rem; color: var(--gold); text-align: center;
}
.money-note { margin-top: 20px; font-size: 0.8rem; color: var(--muted-on-sand); max-width: 82ch; line-height: 1.55; }

/* ============================================================
   TEAM OF EIGHT (dark pipeline)
   ============================================================ */
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 940px) { .role-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .role-grid { grid-template-columns: 1fr; } }
.role { background: var(--ink2); border: 1px solid var(--line-ink); border-radius: var(--r-card); padding: 20px 18px; }
.role-n {
  width: 30px; height: 30px; border-radius: 999px; background: var(--gold); color: #17130A;
  font-family: var(--f-display); font-weight: 700; font-size: 0.9rem; display: grid; place-items: center;
  margin-bottom: 12px;
}
.role h3 { font-size: 0.99rem; margin-bottom: 6px; }
.role p { color: var(--muted-on-ink); font-size: 0.88rem; margin: 0; }
.pipe-note { margin-top: 24px; color: var(--muted-on-ink); font-size: 0.97rem; max-width: 70ch; }
.pipe-note b { color: var(--gold); }

/* ============================================================
   HOW IT WORKS (sand deep)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card-sand); border: 1px solid var(--line-on-sand); border-radius: var(--r-card);
  padding: 24px 21px; box-shadow: 0 3px 14px rgba(27, 42, 39, 0.06);
}
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--f-display); font-weight: 700; font-size: 0.92rem; color: #FFFFFF;
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  margin-bottom: 14px; background: var(--teal);
}
.step p { color: var(--muted-on-sand); font-size: 0.93rem; margin: 0; }

/* ============================================================
   VIRTUAL PRACTICUM + IRB (dark duo)
   ============================================================ */
.duo { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; gap: 30px; } }
.check-list {
  margin: 0; padding: 26px; list-style: none;
  background: var(--ink2); border: 1px solid var(--line-ink); border-radius: var(--r-card);
  box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 13px;
}
.check-list li { display: flex; gap: 12px; align-items: baseline; font-size: 0.96rem; color: var(--text-on-ink); }
.check-list li::before { content: "\2713"; color: var(--gold); font-weight: 700; font-family: var(--f-display); }

/* ============================================================
   SAMPLE BAND (gold)
   ============================================================ */
.sample-band { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #17130A; padding: 64px 0; }
.sample-band .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
@media (max-width: 880px) { .sample-band .wrap { grid-template-columns: 1fr; } }
.sample-band h2 { color: #17130A; }
.sample-band p { color: rgba(23, 19, 10, 0.82); max-width: 56ch; }
.band-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 881px) { .band-cta { align-items: flex-end; } }
.band-link { color: #17130A; font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; }
.band-link:hover { color: #3A2E10; }

/* ============================================================
   REVIEWS (sand)
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: var(--card-sand); border: 1px solid var(--line-on-sand);
  border-radius: 14px; padding: 24px 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 3px 14px rgba(27, 42, 39, 0.06);
}
.quote p { color: var(--ink-on-sand); font-size: 0.97rem; margin: 0; }
.quote footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.quote cite { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 0.83rem; color: var(--muted-on-sand); }
.more-link { color: var(--teal); font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.more-link:hover { color: var(--teal-deep); }

/* ============================================================
   FAQ (dark)
   ============================================================ */
.faq-list { max-width: 830px; }
.faq-item { border-bottom: 1px solid var(--line-ink); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px;
  align-items: baseline; padding: 21px 2px; font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  color: var(--text-on-ink); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--f-display); color: var(--gold); font-weight: 700; font-size: 1.1rem; }
.faq-item[open] summary::after { content: "-"; }
.faq-item .faq-a { padding: 0 2px 22px; color: var(--muted-on-ink); max-width: 72ch; }

/* ============================================================
   FINAL CTA (teal gradient) + FOOTER
   ============================================================ */
.final-cta { text-align: center; padding: 96px 0; background: linear-gradient(160deg, var(--teal-deep), var(--teal)); color: #FFFFFF; }
.final-cta h2 { color: #FFFFFF; }
.final-cta .kicker { color: var(--gold); }
.final-cta .lead { color: rgba(255, 255, 255, 0.85); margin: 0 auto 30px; }
.final-cta .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.44); }
.final-cta .btn-ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }

.site-foot { background: #071417; padding: 62px 0 34px; color: var(--text-on-ink); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 42px; border-bottom: 1px solid #16333A; }
@media (max-width: 940px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h4 { font-family: var(--f-display); font-size: 0.92rem; font-weight: 600; color: #C9D6D3; margin: 0 0 16px; }
.foot-col a { display: block; color: var(--muted-on-ink); text-decoration: none; font-size: 0.92rem; padding: 5px 0; }
.foot-col a:hover { color: var(--teal-bright); }
.foot-about { color: var(--muted-on-ink); font-size: 0.9rem; max-width: 34ch; }
.foot-note { color: var(--muted-on-ink); font-size: 0.9rem; margin-bottom: 4px; }

.news-form { display: flex; gap: 8px; margin-top: 14px; }
.news-form input {
  flex: 1; min-width: 0; background: var(--ink2); border: 1px solid var(--line-ink); border-radius: 999px;
  color: var(--text-on-ink); padding: 12px 16px; font-size: 16px; font-family: var(--f-body);
}
.news-form input::placeholder { color: var(--faint-on-ink); }
.news-form button { flex-shrink: 0; }
.news-done { color: var(--teal-bright); font-size: 0.88rem; margin-top: 10px; display: none; }

.foot-legal { padding-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.foot-disclaimer { color: var(--faint-on-ink); font-size: 0.8rem; max-width: 92ch; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint-on-ink); font-size: 0.8rem; }
.foot-base a { color: var(--muted-on-ink); text-decoration: none; }
.foot-base a:hover { color: var(--teal-bright); }

/* ============================================================
   WIDGETS: seasonal offer modal (week-strip masthead)
   ============================================================ */
.ob-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 12, 14, 0.7); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.ob-modal-backdrop.is-open { display: flex; }
.ob-modal {
  width: 100%; max-width: 470px; background: var(--sand); color: var(--ink-on-sand);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-2); position: relative;
}
.ob-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px;
  border: none; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font-size: 1rem; cursor: pointer;
}
/* modal masthead = the week-strip calendar row (this site's registered header treatment) */
.ob-mast { background: var(--ink); color: var(--text-on-ink); padding: 20px 22px 18px; }
.ob-mast-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ob-mast-brand .brand-tile { width: 30px; height: 30px; border-radius: 9px; font-size: 0.82rem; }
.ob-mast-brand span { font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; }
.ob-week-t { font-family: var(--f-display); font-size: 0.8rem; font-weight: 500; color: var(--muted-on-ink); margin-bottom: 9px; }
.week-strip { display: flex; gap: 6px; }
.wd {
  flex: 1; min-width: 0; text-align: center; padding: 9px 0; border-radius: 9px;
  background: var(--ink2); border: 1px solid var(--line-ink);
  font-family: var(--f-display); font-weight: 600; font-size: 0.7rem; color: var(--muted-on-ink);
}
.wd.is-due { background: var(--gold); border-color: var(--gold); color: #17130A; }
.ob-body { padding: 22px; }
.ob-season { font-family: var(--f-display); font-size: 0.86rem; font-weight: 600; color: var(--teal); margin-bottom: 8px; }
.ob-body h3 { font-size: 1.32rem; margin-bottom: 6px; }
.ob-body .ob-sub { color: var(--muted-on-sand); font-size: 0.93rem; margin-bottom: 16px; }
.ob-form { display: flex; flex-direction: column; gap: 10px; }
.ob-form input {
  background: #FFFFFF; border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 15px;
  font-size: 16px; font-family: var(--f-body); color: var(--ink-on-sand); width: 100%;
}
.ob-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.ob-fine { font-size: 0.72rem; color: #948B72; margin-top: 10px; }
.ob-thanks { display: none; padding: 8px 0 4px; color: var(--teal); font-weight: 600; }
@media (max-width: 560px) {
  .ob-modal { max-width: 100%; }
  .ob-mast { padding: 16px 16px 14px; }
  .ob-body { padding: 16px; }
}

/* ============================================================
   WIDGETS: direct-text dock (LEFT) + live chat (RIGHT)
   ============================================================ */
.dock-left { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.dock-btn {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  border: none; cursor: pointer; box-shadow: var(--shadow-1); color: #FFFFFF;
}
.dock-wa { background: #25D366; color: #fff; }
.dock-sms { background: var(--teal); }
.dock-btn svg { width: 25px; height: 25px; }

.chat-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 60px; height: 60px; border-radius: 999px; border: 2px solid var(--gold);
  padding: 0; cursor: pointer; overflow: hidden; background: var(--ink2); box-shadow: var(--shadow-1);
}
.chat-launch img, .chat-launch svg { width: 100%; height: 100%; }
.chat-badge {
  position: absolute; top: -2px; right: -2px; width: 15px; height: 15px; border-radius: 999px;
  background: #4CC97B; border: 2px solid var(--ink);
}
.chat-nudge {
  position: fixed; right: 88px; bottom: 30px; z-index: 70; max-width: 240px;
  background: var(--sand); color: var(--ink-on-sand); border-radius: 14px 14px 3px 14px;
  padding: 12px 14px; font-size: 0.86rem; box-shadow: var(--shadow-2); display: none; cursor: pointer;
  border: 1px solid var(--line-on-sand);
}
.chat-nudge.is-on { display: block; }

.chat-panel {
  position: fixed; right: 18px; bottom: 90px; z-index: 80;
  width: 372px; max-width: calc(100vw - 36px); height: clamp(460px, 72vh, 580px);
  background: var(--sand); color: var(--ink-on-sand);
  border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden;
  display: none; flex-direction: column;
}
.chat-panel.is-open { display: flex; }
.chat-head { background: var(--ink); color: var(--text-on-ink); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.chat-face { width: 42px; height: 42px; border-radius: 999px; overflow: hidden; border: 2px solid var(--gold); flex-shrink: 0; }
.chat-face svg { width: 100%; height: 100%; }
.chat-who { line-height: 1.25; min-width: 0; }
.chat-who b { font-family: var(--f-display); font-size: 0.92rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-who span { font-size: 0.74rem; color: var(--muted-on-ink); }
.chat-status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 0.68rem; color: var(--muted-on-ink); flex-shrink: 0; }
.chat-status i { width: 8px; height: 8px; border-radius: 999px; background: #4CC97B; display: inline-block; }
.chat-back { display: none; background: none; border: none; color: var(--text-on-ink); font-size: 1.2rem; cursor: pointer; padding: 4px 8px 4px 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.msg { max-width: 82%; padding: 10px 13px; border-radius: 13px; font-size: 0.92rem; line-height: 1.45; }
.msg-in { background: #FFFFFF; border: 1px solid var(--line-on-sand); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg-out { background: var(--teal); color: #FFFFFF; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-compose { display: flex; gap: 8px; padding: 12px; background: #FFFFFF; }
.chat-compose input {
  flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 999px; padding: 11px 16px;
  font-size: 16px; font-family: var(--f-body); background: #FFFFFF; color: var(--ink-on-sand);
}
.chat-compose button {
  width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--teal);
  color: #FFFFFF; cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
@media (max-width: 640px) {
  .chat-panel.is-open {
    inset: 0; width: 100%; max-width: 100%; height: 100dvh; border-radius: 0; bottom: 0;
  }
  .chat-back { display: inline-block; }
  body.chat-open .dock-left, body.chat-open .chat-launch, body.chat-open .chat-nudge { display: none; }
}

/* ============================================================
   ARTICLE / MANUAL PAGES (content layer, dark base)
   ============================================================ */
.crumbs { font-size: 0.84rem; color: var(--muted-on-ink); padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-family: var(--f-display); }
.crumbs a { color: var(--muted-on-ink); text-decoration: none; }
.crumbs a:hover { color: var(--teal-bright); }
.crumbs .sep { color: var(--faint-on-ink); }

.article-hero { padding: 26px 0 6px; }
.article-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
.article-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }
.badge-verify { background: var(--card-ink); border: 1px solid var(--line-ink); border-radius: 999px; padding: 4px 13px; font-size: 0.8rem; font-weight: 600; color: var(--muted-on-ink); font-family: var(--f-display); }

.article { max-width: 820px; padding-bottom: 46px; }
.article h2 { margin: 46px 0 14px; font-size: 1.5rem; scroll-margin-top: 90px; }
.article h3 { margin: 26px 0 10px; font-size: 1.08rem; }
.article ul { padding-left: 22px; }
.article li { margin-bottom: 7px; }

.answer-box { background: var(--sand); color: var(--ink-on-sand); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow-1); margin: 12px 0 6px; }
.answer-box .ab-label { font-family: var(--f-display); font-weight: 700; color: var(--teal-deep); font-size: 0.92rem; display: block; margin-bottom: 8px; }
.answer-box p { margin: 0; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.toc a { font-family: var(--f-display); font-size: 0.84rem; font-weight: 600; color: var(--muted-on-ink); background: var(--card-ink); border: 1px solid var(--line-ink); border-radius: 999px; padding: 7px 14px; text-decoration: none; }
.toc a:hover { color: var(--teal-bright); border-color: var(--teal-bright); }

.table-wrap { overflow-x: auto; }
.man-table { width: 100%; border-collapse: collapse; margin: 16px 0; background: var(--card-ink); border: 1px solid var(--line-ink); font-size: 0.94rem; }
.man-table th, .man-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-ink); vertical-align: top; }
.man-table th { font-family: var(--f-display); font-weight: 700; font-size: 0.88rem; background: var(--ink2); }
.man-table tr:last-child td { border-bottom: none; }

.steps-list { counter-reset: mstep; list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.steps-list > li { position: relative; padding-left: 46px; margin: 0; }
.steps-list > li::before { counter-increment: mstep; content: counter(mstep); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 999px; background: var(--gold); color: #2A1F06; font-family: var(--f-display); font-weight: 700; font-size: 0.92rem; display: grid; place-items: center; }
.steps-list h3 { margin: 0 0 6px; }
.steps-list p { margin: 0; color: var(--muted-on-ink); }

.checklist { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 9px; }
.checklist li { display: flex; gap: 11px; align-items: baseline; margin: 0; }
.checklist li::before { content: "\2713"; color: var(--gold); font-weight: 700; font-family: var(--f-display); }

/* annotated sample sheet (week manuals) */
.sample-sheet { background: var(--card-ink); border: 1px solid var(--line-ink); border-radius: var(--r-card); box-shadow: var(--shadow-1); margin: 20px 0; overflow: hidden; }
.ss-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 22px; background: var(--ink2); color: var(--text-on-ink); border-bottom: 1px solid var(--line-ink); font-family: var(--f-display); font-size: 0.86rem; font-weight: 600; }
.ss-head span:last-child { color: var(--faint-on-ink); font-weight: 400; }
.ss-body { padding: 24px 26px 20px; }
.ss-body p { font-size: 0.98rem; margin: 0 0 12px; }
.ss-body p:last-child { margin-bottom: 0; }
.ss-ref { display: inline-block; background: var(--gold); color: #2A1F06; border-radius: 999px; font-family: var(--f-display); font-weight: 700; font-size: 0.7rem; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.ss-notes { list-style: none; margin: 0; padding: 18px 26px 22px; border-top: 1px dashed var(--line-ink); display: flex; flex-direction: column; gap: 10px; }
.ss-notes li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--muted-on-ink); align-items: baseline; margin: 0; }
.ss-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; background: var(--gold); color: #2A1F06; font-family: var(--f-display); font-weight: 700; font-size: 0.72rem; display: grid; place-items: center; transform: translateY(3px); }

.svc-strip { background: var(--sand); color: var(--ink-on-sand); border-radius: var(--r-card); padding: 28px; margin: 38px 0; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 26px; align-items: center; box-shadow: var(--shadow-1); }
@media (max-width: 700px) { .svc-strip { grid-template-columns: 1fr; } }
.svc-strip h3 { color: var(--ink-on-sand); font-size: 1.3rem; margin: 0 0 8px; }
.svc-strip p { color: var(--muted-on-sand); margin: 0; font-size: 0.95rem; }
.svc-strip .btns { display: flex; flex-direction: column; gap: 10px; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
@media (max-width: 880px) { .related { grid-template-columns: 1fr; } }
.related a { background: var(--card-ink); border: 1px solid var(--line-ink); border-radius: 12px; padding: 16px; text-decoration: none; font-weight: 600; font-size: 0.93rem; color: var(--text-on-ink); font-family: var(--f-display); }
.related a:hover { border-color: var(--teal-bright); color: var(--teal-bright); }


/* brand-mark v2: standalone marks, no box */
svg.brand-tile { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; display: inline-block; }

/* course index: labels vary in length, so these chips must wrap on a phone
   (.code-chip is nowrap by design for real course codes) */
#course-index .code-chip { white-space: normal; max-width: 100%; }


/* image-program figures (apply_images.py) */
.ig-fig{margin:26px 0;max-width:100%}
.ig-fig img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 26px rgba(0,0,0,.07)}
.ig-fig figcaption{margin-top:10px;font-size:.86rem;opacity:.72;line-height:1.5}


/* hero lead form (post-audit P0) */
.hero-lead{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px;align-items:center;max-width:580px}
.hero-lead input{flex:1 1 200px;min-width:0;padding:12px 14px;font-size:16px;border:1px solid rgba(0,0,0,.22);border-radius:10px;background:#fff;color:#1a1a1a}
.hero-lead input:focus{outline:2px solid rgba(0,0,0,.35);outline-offset:1px}
.hero-lead input.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.hero-lead .btn{flex:0 0 auto}
.hero-lead-done,.hero-lead-err{margin:10px 0 0;font-size:.92rem}
.hero-lead-done{font-weight:600}
@media(max-width:560px){.hero-lead input{flex:1 1 100%}.hero-lead .btn{width:100%}}


/* sample-paper thumbnails */
.sample-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 6px;max-width:560px}
.sample-thumbs figure{margin:0}
.sample-thumbs img{width:100%;height:auto;border-radius:8px;border:1px solid rgba(0,0,0,.1);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.sample-thumbs figcaption{margin-top:6px;font-size:.8rem;opacity:.7;text-align:center}
@media(max-width:520px){.sample-thumbs{grid-template-columns:1fr;max-width:340px}}


/* honesty + a11y polish */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ob-modal,.ae-modal{max-height:calc(100dvh - 40px);overflow-y:auto}

/* ============ hero contact form card ============ */
.hero-form-card { background: #FFFFFF; color: #211D18; border: 1px solid rgba(0,0,0,0.10); border-radius: 16px; padding: 22px; box-shadow: 0 18px 44px rgba(0,0,0,0.12); }
.hero-form-card .hfc-head { font-weight: 800; font-size: 1.16rem; margin: 0 0 4px; }
.hero-form-card .hfc-sub { font-size: 0.9rem; opacity: 0.75; margin: 0 0 14px; }
#heroCard { display: flex; flex-direction: column; gap: 10px; }
#heroCard input, #heroCard textarea { font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid rgba(0,0,0,0.16); border-radius: 10px; background: #FFF; color: inherit; width: 100%; box-sizing: border-box; }
#heroCard textarea { resize: vertical; min-height: 64px; }
#heroCard .hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.hero-form-card .hfc-note { font-size: 0.78rem; opacity: 0.65; margin: 10px 0 0; }
.hero-card-done { font-weight: 600; }
.hero-card-err { color: #B3261E; font-size: 0.85rem; margin: 4px 0 0; }
.hero-viz-band { padding: 64px 0 30px; }
.hero-viz-band .hvb-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.hero-viz-band .hvb-eyebrow { display: block; font-size: 0.82rem; font-weight: 700; opacity: 0.62; margin-bottom: 10px; }
.hero-viz-band .hvb-copy h2 { font-size: clamp(1.55rem, 2.8vw, 2.05rem); margin: 0 0 12px; }
.hero-viz-band .hvb-copy p { max-width: 46ch; margin: 0 0 22px; opacity: 0.85; }
@media (max-width: 900px) { .hero-viz-band { padding: 44px 0 12px; } .hero-viz-band .hvb-grid { grid-template-columns: 1fr; gap: 28px; } }

/* contrast fix: light-text ghost button on the light strip */
.svc-strip .btn-ghost { color: var(--ink-on-sand); border-color: var(--line-strong); }
.svc-strip .btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

/* ============ Courses catalog ============ */
.crs-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.crs-crumbs { font-size: 0.84rem; opacity: 0.7; padding: 20px 0 0; }
.crs-crumbs a { color: inherit; text-decoration: none; }
.crs-crumbs a:hover { text-decoration: underline; }
.crs-crumbs .sep { margin: 0 7px; opacity: 0.6; }
.crs-hero { padding: 26px 0 6px; }
.crs-hero h1 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin: 0 0 12px; }
.crs-hero p { max-width: 64ch; font-size: 1.08rem; opacity: 0.8; margin: 0; }
.crs-bar { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; margin: 26px 0 8px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.crs-tab { font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: inherit; opacity: 0.6; background: none; border: none; cursor: pointer; padding: 8px 0; display: inline-flex; align-items: baseline; gap: 8px; position: relative; }
.crs-tab i { font-style: normal; font-size: 0.66rem; opacity: 0.7; }
.crs-tab:hover, .crs-tab.is-on { opacity: 1; }
.crs-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: #0A6E7A; }
.crs-search { margin-left: auto; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.24); border-radius: 10px; padding: 9px 14px; color: inherit; font: inherit; font-size: 0.9rem; width: 240px; max-width: 100%; }
.crs-search:focus { outline: 2px solid #0A6E7A; outline-offset: 1px; }
@media (max-width: 700px) { .crs-search { margin-left: 0; width: 100%; } .crs-tab.is-on::after { bottom: -4px; } }
.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.crs-card { display: flex; flex-direction: column; gap: 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px 20px 18px; text-decoration: none; color: inherit; transition: border-color 0.18s ease, transform 0.18s ease; position: relative; }
.crs-card::after { content: "\2197"; position: absolute; top: 15px; right: 17px; font-size: 0.95rem; font-weight: 600; color: #0A6E7A; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.crs-card:hover { border-color: rgba(10, 110, 122, 0.5); transform: translateY(-2px); }
.crs-card:hover::after { opacity: 1; transform: none; }
.crs-code { align-self: flex-start; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: #0A6E7A; background: rgba(10, 110, 122, 0.1); border: 1px solid rgba(10, 110, 122, 0.35); border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.crs-card h3 { margin: 0; font-size: 1.04rem; line-height: 1.35; flex: 1; padding-right: 22px; }
.crs-empty { display: none; margin: 26px 2px 8px; opacity: 0.75; font-size: 0.95rem; }

/* ============ Course right rail ============ */
.course-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 264px; gap: 44px; align-items: start; }
.course-rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 24px; padding: 4px 0 40px; }
.rail-group { display: flex; flex-direction: column; gap: 2px; }
.rail-h { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; margin-bottom: 8px; }
.rail-group a, .rail-group .rail-item { font-size: 0.82rem; line-height: 1.4; color: inherit; text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid rgba(255,255,255,0.12); }
.rail-group a { color: rgba(255,255,255,0.55); transition: color 0.15s ease, border-color 0.15s ease; }
.rail-group a:hover { color: inherit; border-left-color: rgba(255,255,255,0.3); }
.rail-group a.is-on { color: inherit; border-left-color: #0A6E7A; }
.rail-group .rail-item { color: rgba(255,255,255,0.55); }
.rail-group .rail-item b { color: inherit; font-weight: 600; }
.rail-group .rail-hint2 { font-size: 0.76rem; opacity: 0.8; }
.rail-group p { font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.55); margin: 0; padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.12); }
.rail-group p a { display: inline; padding: 0; border: none; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
@media (max-width: 1100px) { .course-layout { display: block; } .course-rail { display: none; } }

/* rail sleek v2 */
.rail-group a.rail-item { display: flex; gap: 9px; align-items: baseline; padding: 4px 0 4px 12px; border-left: 2px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); text-decoration: none; min-width: 0; transition: color 0.15s ease, border-color 0.15s ease; }
.rail-group a.rail-item i { font-style: normal; font-family: ui-monospace, Consolas, monospace; font-size: 0.64rem; opacity: 0.55; flex: none; }
.rail-group a.rail-item span { white-space: normal; font-size: 0.8rem; line-height: 1.35; }
.rail-group a.rail-item:hover { color: inherit; border-left-color: #0A6E7A; }
.rail-nums { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px 12px; border-left: 2px solid rgba(255,255,255,0.12); }
.rail-nums span { font-family: ui-monospace, Consolas, monospace; font-size: 0.68rem; padding: 3px 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: rgba(255,255,255,0.55); }

/* ============ nav: Courses as the standout destination ============ */
.nav-links a.is-key {
  color: #FFFFFF;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  padding: 8px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 10px rgba(0, 0, 0, 0.32);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.nav-links a.is-key::after { display: none; }
.nav-links a.is-key:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.nav-links a.is-key:active { transform: translateY(0); }
@media (max-width: 940px) {
  .site-head.menu-open .nav-links a.is-key { align-self: flex-start; padding: 10px 16px; margin: 4px 0; }
}

/* ============ footer brand alignment + service tenure block ============ */
.site-foot .brand { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.site-foot .brand > span { display: inline-flex; align-items: center; line-height: 1; }
.site-foot svg.brand-tile, .site-foot .brand-tile { width: 32px; height: 32px; flex: none; }
.foot-since { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.09); max-width: 34ch; }
.fs-num { font-size: 0.9rem; opacity: 0.8; }
.fs-num strong { font-weight: 800; font-size: 1.16rem; opacity: 1; margin-right: 5px; letter-spacing: -0.01em; }
.fs-yr { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.55; }


/* ============ header brand: stop the wordmark wrapping ============ */
/* The solid Courses chip widened the nav, which squeezed the brand's grid column
   and broke "Walden Tutors" onto two lines with the tagline colliding with the
   header rule. nowrap makes that column size to its content, so the brand holds
   one line at every width. */
.site-head .brand { flex: none; }
.site-head .brand > span { display: block; line-height: 1.18; }
.site-head .brand-name { white-space: nowrap; display: block; }
.site-head .brand-sub { white-space: nowrap; display: block; }
.nav-links a.is-key { padding: 7px 12px; }
@media (max-width: 1180px) { .site-head .brand-sub { display: none; } }

/* hero kicker now sits under the title, so it needs its own spacing */
.article-hero .hero-kicker { display: inline-block; margin: 10px 0 2px; }
.article-hero h1 { margin-bottom: 4px; }

/* the brand markup carries a <br> between the wordmark and the tagline; now that both
   are block-level to stop wrapping, that break adds an empty line. Kill it and set the
   stack's rhythm explicitly so the two lines sit tight against each other. */
.site-head .brand br { display: none; }
.site-head .brand > span { display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.15; }
.site-head .brand-name { line-height: 1.15; margin: 0; }
.site-head .brand-sub { line-height: 1.2; margin: 0; }

/* ============ header: give the CTA its content width ============ */
/* the grid was 1fr auto 1fr, which starved the CTA column and wrapped
   "Get help now" onto three lines. brand and CTA now size to content and the
   nav absorbs the remaining space. */
@media (min-width: 941px) {
  .site-head .wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-head .nav-links { justify-self: center; }
  .site-head .head-cta { justify-self: end; }
}
.head-cta { white-space: nowrap; flex: none; }
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }

/* mid widths: eight nav items plus a solid chip plus the CTA is a tight fit, so
   compress the nav rather than let it run under the button. */
@media (min-width: 941px) and (max-width: 1180px) {
  .site-head .wrap { gap: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 7px; font-size: 0.88rem; }
  .nav-links a.is-key { padding: 6px 10px; }
  .head-cta { padding: 11px 16px; font-size: 0.92rem; min-height: 42px; }
}