/*
  Design tokens for smashed_sfs, per smashed_sfs_evaluation.html §02 and
  smashed_sfs_pages.html §02 (updated direction: institution blue, bold
  all-sans type, rounded corners throughout - closer to a Philippine
  banking app than the earlier ledger/serif look). Light/dark aware.
  Every template that uses either app shell should load this before its
  own <style> block (if any).
*/

:root {
  --bg: #FAFBFD;
  --bg-exhibit: #EEF3FB;
  --card: #FFFFFF;
  --ink: #101828;
  --ink-soft: #475467;
  --ink-faint: #6B7684;
  --line: #E3E8EF;
  --line-strong: #C4CDD9;

  --accent: #0B3D91;       /* institution blue - primary, nav, links */
  --accent-soft: #2554A8;
  --accent-wash: #E8EFFC;

  --gold: #C08A2E;         /* seal gold - phase/highlight only, spend sparingly */
  --gold-wash: #FBF0DD;

  --good: #1F8A5A;         /* cleared - passed, on time, complete */
  --good-wash: #E3F5EC;

  --risk: #C23B2E;         /* flagged - failed, overdue, at risk */
  --risk-wash: #FCEAE7;

  --radius: 8px;           /* default corner radius for cards */
  --radius-lg: 12px;       /* larger cards / panels */
  --radius-pill: 999px;    /* buttons - always a full pill regardless of height */

  /* One bold system sans stack for both headings and body - no serif, no
     webfont dependency. Weight is what differentiates: 800 for headings,
     400 for body. */
  --font-display: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", "SFMono-Regular", monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1628;
    --bg-exhibit: #0F1F38;
    --card: #142440;
    --ink: #EAF0FA;
    --ink-soft: #A9B8CE;
    --ink-faint: #7488A6;
    --line: #223452;
    --line-strong: #304868;
    --accent: #6FA0E8;
    --accent-soft: #8FB4EE;
    --accent-wash: #16273F;
    --gold: #E0B563;
    --gold-wash: #2E2515;
    --good: #6FD9A6;
    --good-wash: #15301F;
    --risk: #F0897A;
    --risk-wash: #341B16;
  }
}

:root[data-theme="dark"] {
  --bg: #0A1628;
  --bg-exhibit: #0F1F38;
  --card: #142440;
  --ink: #EAF0FA;
  --ink-soft: #A9B8CE;
  --ink-faint: #7488A6;
  --line: #223452;
  --line-strong: #304868;
  --accent: #6FA0E8;
  --accent-soft: #8FB4EE;
  --accent-wash: #16273F;
  --gold: #E0B563;
  --gold-wash: #2E2515;
  --good: #6FD9A6;
  --good-wash: #15301F;
  --risk: #F0897A;
  --risk-wash: #341B16;
}

:root[data-theme="light"] {
  --bg: #FAFBFD;
  --bg-exhibit: #EEF3FB;
  --card: #FFFFFF;
  --ink: #101828;
  --ink-soft: #475467;
  --ink-faint: #6B7684;
  --line: #E3E8EF;
  --line-strong: #C4CDD9;
  --accent: #0B3D91;
  --accent-soft: #2554A8;
  --accent-wash: #E8EFFC;
  --gold: #C08A2E;
  --gold-wash: #FBF0DD;
  --good: #1F8A5A;
  --good-wash: #E3F5EC;
  --risk: #C23B2E;
  --risk-wash: #FCEAE7;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

p {
  margin: 0 0 var(--space-3);
  color: var(--ink-soft);
  font-weight: 400;
}

a {
  color: var(--accent-soft);
}

strong {
  color: var(--ink);
  font-weight: 700;
}

/* Anything tabular - LRNs, grades, dates - lines up in a monospace face
   so digits align instead of drifting. */
.mono, code, .lrn, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-size: .88em;
  background: var(--accent-wash);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent-soft);
}

/* ---- Status pills: color + label together, never color alone ---- */
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pill.good { background: var(--good-wash); color: var(--good); }
.pill.risk { background: var(--risk-wash); color: var(--risk); }
.pill.warn { background: var(--gold-wash); color: var(--gold); }
.pill.neutral { background: var(--accent-wash); color: var(--accent-soft); }

/* ---- Buttons: real rounded pills ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn:hover { background: var(--accent-soft); }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.btn.ghost:hover { background: var(--bg-exhibit); }
.btn.good { background: var(--good); }
.btn.good:hover { background: var(--good); opacity: .9; }
.btn.risk { background: var(--risk); }
.btn.risk:hover { background: var(--risk); opacity: .9; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* ---- Forms (used by templates not yet migrated off this shared shell) ---- */
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; margin-bottom: var(--space-1); font-weight: 700; color: var(--ink); }
.form-group input, .form-group select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-sizing: border-box;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
}

small {
  display: block;
  color: var(--ink-faint);
  font-size: 12px;
  margin-top: var(--space-1);
}

/* Phones: 16px is the smallest text-box font iPhones don't auto-zoom on
   (Login, Register, and the other .form-group forms were 15px). */
@media (max-width: 720px) {
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
}

/* Phones: comfortable thumb targets. Buttons at least 40px tall (several
   were 20-24px), checkboxes/radios 20px (were 13px), and the small
   inputs inside tables (grade entry, DTR) at least 36px tall. Screen
   only, so printed forms keep their exact layout. */
@media screen and (max-width: 720px) {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    min-height: 40px;
  }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  table input:not([type=checkbox]):not([type=radio]):not([type=hidden]), table select { min-height: 36px; }
}

/* Editable CSV-preview tables (upload flows) - inputs sized to their cell
   rather than the full .form-group treatment. */
table input, table select {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-sizing: border-box;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
}

/* ---- Dashboard quick-action grid (used by templates not yet migrated) ---- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.dashboard-grid .card { border-left: 4px solid var(--accent); }

/* ---- Alerts / flash messages ---- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  border: 1px solid var(--line);
  font-weight: 600;
}
.alert-success { background: var(--good-wash); color: var(--good); border-color: var(--good); }
.alert-error { background: var(--risk-wash); color: var(--risk); border-color: var(--risk); }
.alert-info { background: var(--accent-wash); color: var(--accent-soft); border-color: var(--accent-soft); }
.alert-warning { background: var(--gold-wash); color: var(--gold); border-color: var(--gold); }

/* ---- Tables ---- */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--space-2) var(--space-3);
}
td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
tr:last-child td { border-bottom: none; }

/* =====================================================================
   Public shell components (marketing-style nav for pages nobody's
   logged into yet - login, register, and future landing/enroll pages).
   Same tokens, different chrome from the internal sidebar shell.
   ===================================================================== */

.marketnav .utility {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-5);
  background: var(--bg-exhibit);
  font-size: 12px;
  color: var(--ink-faint);
}
.marketnav .mainnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  position: relative;
}
/* Desktop: the panel wrapper doesn't take part in layout, so .links and
   .nav-cta-group stay the bar's middle and right grid columns. */
.marketnav .nav-panel { display: contents; }
.marketnav .nav-panel-close { display: none; }
/* Icons are only for the phone drawer; the desktop bar stays text-only. */
.marketnav .nav-icon { display: none; }
.marketnav .nav-backdrop[hidden] { display: none; }
.marketnav .mainnav .links {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  text-align: center;
}
.marketnav .mainnav .links a { color: rgba(255,255,255,.85); text-decoration: none; }
.marketnav .mainnav .links a:hover { color: #fff; }

.marketnav .mainnav .nav-dropdown { position: relative; }
.marketnav .mainnav .nav-dropdown-toggle { cursor: pointer; user-select: none; }
.marketnav .mainnav .nav-dropdown:hover .nav-dropdown-toggle,
.marketnav .mainnav .nav-dropdown-toggle:focus { color: #fff; }
.marketnav .mainnav .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(16,24,40,.18);
  padding: var(--space-2);
  min-width: 160px;
  z-index: 20;
}
.marketnav .mainnav .nav-dropdown:hover .nav-dropdown-menu,
.marketnav .mainnav .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.marketnav .mainnav .nav-dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
}
.marketnav .mainnav .nav-dropdown-menu a:hover { background: var(--bg-exhibit); color: var(--accent); }

/* Log In (plain .cta-outline pill) sitting beside the Register dropdown
   in the nav's right-hand CTA slot - both grouped in one flex wrapper so
   they sit side by side as a pair instead of each fighting the grid for
   its own "end" position. */
.marketnav .mainnav .nav-cta-group {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.marketnav .mainnav .nav-dropdown-toggle-cta {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}
.marketnav .mainnav .nav-dropdown-cta:hover .nav-dropdown-toggle-cta,
.marketnav .mainnav .nav-dropdown-toggle-cta:focus { color: var(--accent); background: #fff; }
.marketnav .mainnav .nav-dropdown-cta .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform: none;
}
.marketnav .nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: rgba(255,255,255,.12);
  cursor: pointer;
  justify-self: end;
}
.marketnav .nav-toggle:hover { background: rgba(255,255,255,.22); }
.marketnav .nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.marketnav .nav-toggle-bar + .nav-toggle-bar { margin-top: 4px; }

/* All 8 links plus the logo and Register button never fit one row on a
   phone - .links used to just flex-wrap in place, stacking each link on
   its own line while the grid's other two columns (brand, CTA) stayed
   vertically centered against that now-tall middle column, visually
   overlapping the logo and Register button instead of sitting below them.
   Below this breakpoint, .links and the Register dropdown collapse behind
   the hamburger toggle above (see base_public.html) instead. */
@media (max-width: 860px) {
  .marketnav .mainnav {
    grid-template-columns: 1fr auto;
    z-index: 55; /* the bar (logo, toggle) stays above the dimmed backdrop */
  }
  .marketnav .nav-toggle { display: flex; }
  /* The menu is a drawer that slides in from the left over the page (it
     used to grow the bar and push the whole page down): slightly
     see-through blue with a frosted-glass blur, over a dimmed, lightly
     blurred page. The burger on the right stays visible and tappable. */
  /* A compact floating card (as tall as its content, not the screen). */
  .marketnav .nav-panel {
    display: block;
    position: fixed;
    top: 12px;
    left: 12px;
    width: min(72vw, 270px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    z-index: 60;
    background: rgba(11, 61, 145, .9);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-radius: 18px;
    box-shadow: 8px 8px 32px rgba(0,0,0,.35);
    padding: var(--space-2) var(--space-3) var(--space-3);
    overflow-y: auto;
    transform: translateX(calc(-100% - 16px));
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .marketnav .mainnav.is-open .nav-panel {
    transform: none;
    visibility: visible;
    transition: transform .25s ease;
  }
  .marketnav .nav-panel-close {
    display: flex; margin-left: auto; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  }
  /* Icon + label rows, like the app's sidebar. */
  .marketnav .nav-panel .nav-icon { display: block; flex: none; width: 20px; height: 20px; }
  .marketnav .mainnav .links a,
  .marketnav .mainnav .nav-cta-group .cta,
  .marketnav .mainnav .nav-dropdown-toggle-cta { display: flex; align-items: center; gap: var(--space-3); }
  .marketnav .mainnav .nav-cta-group .cta,
  .marketnav .mainnav .nav-dropdown-toggle-cta { justify-content: center; }
  .marketnav .mainnav .links,
  .marketnav .mainnav .nav-cta-group { display: flex; }
  .marketnav .mainnav .links a { text-align: left; border-radius: 10px; }
  .marketnav .mainnav .links a:hover { background: rgba(255,255,255,.1); }
  .marketnav .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(8, 15, 35, .35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  @media (prefers-reduced-motion: reduce) {
    .marketnav .nav-panel, .marketnav .mainnav.is-open .nav-panel { transition: none; }
  }
  .marketnav .mainnav .links {
    flex-direction: column;
    align-items: flex-start;
    justify-self: stretch;
    gap: 2px;
    margin-top: var(--space-1);
  }
  .marketnav .mainnav .links a { width: 100%; padding: 9px var(--space-3); }
  .marketnav .mainnav .nav-cta-group {
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .marketnav .mainnav .nav-cta-group .cta { text-align: center; }
  .marketnav .mainnav .nav-dropdown-cta { width: 100%; }
  .marketnav .mainnav .nav-dropdown-toggle-cta { display: flex; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; }
  .marketnav .mainnav .nav-dropdown-cta .nav-dropdown-menu {
    display: none;
    position: static;
    transform: none;
    box-shadow: none;
    margin-top: var(--space-2);
    width: 100%;
  }
  .marketnav .mainnav .nav-dropdown-cta:focus-within .nav-dropdown-menu,
  .marketnav .mainnav .nav-dropdown-cta.is-open .nav-dropdown-menu {
    display: block;
  }
}

.marketnav .mainnav .cta {
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid transparent;
}
/* Log In - same pill shape/size as .cta, outline instead of solid so
   Register (the growth action) stays the visually primary one of the
   pair, but this still unmistakably reads as its own button, not a bare
   link, per direct request ("2 buttons"). */
.marketnav .mainnav .cta-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.7);
}
.marketnav .mainnav .cta-outline:hover,
.marketnav .mainnav .cta-outline:focus {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
}

.public-footer {
  margin-top: var(--space-7);
  background: var(--accent);
  padding: var(--space-5);
}
.public-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 960px;
  margin: 0 auto;
}
.public-footer-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.public-footer-share-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  margin-right: var(--space-1);
}
.public-footer-share .share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  color: #fff;
}
.public-footer-share .share-icon svg { width: 17px; height: 17px; }
.public-footer-share .share-icon:hover { background: rgba(255,255,255,.24); }
.public-footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.public-hero {
  max-width: 480px;
  margin: var(--space-7) auto;
  padding: 0 var(--space-4);
  text-align: center;
}
.public-hero .eyebrow-mini {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.public-hero h1 {
  font-size: 26px;
  max-width: 26ch;
  margin: 0 auto var(--space-4);
}
.public-hero .card {
  text-align: left;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}

/* ---- Public content pages (About, How It Works, Tutorials, Pricing,
   Privacy Policy, Contact Us) - wide, left-aligned override of the
   narrow centered .public-hero used by the login/register forms. */
.pubpage-hero { max-width: 760px; margin: var(--space-7) auto; padding: 0 var(--space-5); text-align: left; }
.pubpage-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.pubpage-hero h1 { font-size: 32px; max-width: 22ch; margin: 0 0 var(--space-4); color: var(--ink); }
.pubpage-lede { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 0 0 var(--space-6); }
.pubpage-section { margin-bottom: var(--space-7); }
.pubpage-section h2 { font-size: 20px; margin: 0 0 var(--space-4); color: var(--ink); }
.pubpage-section p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--space-4); }
.pubpage-section p:last-child { margin-bottom: 0; }

.pubpage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.pubpage-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.pubpage-card h3 { font-size: 15px; margin: 0 0 var(--space-2); color: var(--ink); }
.pubpage-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

.pubpage-steps { list-style: none; margin: 0; padding: 0; counter-reset: pubstep; }
.pubpage-steps li {
  counter-increment: pubstep;
  position: relative;
  padding: 0 0 var(--space-5) var(--space-7);
  margin-bottom: var(--space-4);
  border-left: 2px solid var(--line);
}
.pubpage-steps li:last-child { border-left-color: transparent; margin-bottom: 0; padding-bottom: 0; }
.pubpage-steps li::before {
  content: counter(pubstep);
  position: absolute;
  left: calc(-1 * var(--space-4) - 1px);
  top: 0;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pubpage-steps h3 { font-size: 15px; margin: 0 0 var(--space-1); color: var(--ink); }
.pubpage-steps p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

.pubpage-video-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.pubpage-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pubpage-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

.pubpage-price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}
.pubpage-price-card {
  background: var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.pubpage-price-card .price-role { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: var(--space-3); }
.pubpage-price-card .price { font-size: 36px; font-weight: 800; color: #fff; font-family: var(--font-mono); }
.pubpage-price-card .price-label { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: var(--space-4); }
.pubpage-price-card ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; text-align: left; }
.pubpage-price-card li { color: #fff; font-size: 14px; padding: var(--space-1) 0; }
.pubpage-price-card li::before { content: "\2713"; margin-right: var(--space-2); color: var(--gold); font-weight: 700; }

.pubpage-contact-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.pubpage-contact-card .icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pubpage-contact-card .icon svg { width: 15px; height: 15px; }
.pubpage-contact-card h3 { font-size: 14px; margin: 0 0 var(--space-1); color: var(--ink); }
.pubpage-contact-card p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.pubpage-contact-card a { color: var(--accent); text-decoration: none; font-weight: 600; }

@media (max-width: 720px) {
  .pubpage-grid { grid-template-columns: 1fr; }
  .pubpage-price-grid { grid-template-columns: 1fr; }
  .pubpage-hero h1 { font-size: 26px; }

  /* Plenty of pages render a plain, unstyled <table> straight from a
     Django template loop with no width handling of its own - fine on
     desktop, but wide enough (many columns, action buttons, long values)
     to force the whole page into a sideways scroll on a phone. Scoped to
     table:not([class]) so it can never touch the app's many *styled*
     data tables (.student-list-table, .attendance-grid, .sf7-table,
     .dtr-table, .bell-slot-table, etc.) - those already have their own
     deliberate scroll containers or layouts and are left alone. */
  table:not([class]) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Opt-in for list tables whose last column holds the row's main action
     (SF9/SF10 lists, Accounts): scrolling would leave those buttons half
     off-screen, so on a phone each row becomes a small card instead -
     header hidden, cells stacked, labeled from each td's data-label. */
  table.stack-on-phone, table.stack-on-phone tbody,
  table.stack-on-phone tr, table.stack-on-phone td { display: block; width: auto; }
  table.stack-on-phone thead { display: none; }
  table.stack-on-phone tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .3em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }
  table.stack-on-phone td { border: 0; padding: 3px 0; flex-basis: 100%; }
  table.stack-on-phone td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-faint);
  }
  /* Cells holding a form control get the label on its own line instead. */
  table.stack-on-phone td.stack-block-label::before { display: block; content: attr(data-label); }
  /* Title cells (e.g. surname + first name) sit side by side on the
     card's first line; .stack-comma adds the ", " between them. */
  table.stack-on-phone td.stack-title { order: -1; flex-basis: auto; font-weight: 700; color: var(--ink); font-size: 15px; }
  table.stack-on-phone td.stack-comma::after { content: ','; }
  table.stack-on-phone td.stack-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }

  /* .public-footer-inner's flex row (space-between) works fine wrapped on
     tablet widths, but on a phone the two halves end up left-aligned on
     their own lines instead of reading as one centered block. */
  .public-footer-inner {
    justify-content: center;
    text-align: center;
  }
}