/* ==========================================================================
   EnrollUp Design System
   Palette is the OFFICIAL brand palette from
   ENROLL-UP-BRANDING-PROJECT/LOGO/REPORT/ENROLLUP-LOGO-CORE Report.txt
   (not the eyeballed variants used in the print design-briefs).
   ========================================================================== */

:root {
  /* Brand, official */
  --cerulean:      #005274;  /* Dark Cerulean  */
  --brown:         #A6521F;  /* Metallic Brown */
  --teal:          #2F758A;  /* Teal Blue      */
  --gray-pastel:   #D7CEBD;  /* Pastel Gray    */
  --cream:         #EDE3D7;  /* White Chocolate*/

  /* Derived */
  --cerulean-900:  #00374e;
  --cerulean-050:  #e6eff3;
  --brown-600:     #8c4419;
  --brown-050:     #f7ede6;

  /* Neutrals */
  --ink:           #14232b;
  --ink-70:        #4a5c65;
  --ink-45:        #7b8a92;
  --rule:          #e2ded6;
  --paper:         #ffffff;
  --paper-warm:    #faf7f2;

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Inter", -apple-system, sans-serif;

  /* Scale */
  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.075rem);
  --step-1:  clamp(1.2rem, 1.13rem + .35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + .7vw, 1.95rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.75rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.6vw, 4rem);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20,35,43,.06), 0 2px 8px rgba(20,35,43,.05);
  --shadow-md: 0 2px 4px rgba(20,35,43,.05), 0 12px 32px rgba(20,35,43,.09);
  --shadow-lg: 0 4px 8px rgba(20,35,43,.05), 0 24px 60px rgba(20,35,43,.13);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cerulean); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brown); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--cerulean-900);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -.03em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--warm { background: var(--paper-warm); }
.section--cream { background: var(--cream); }
.section--deep { background: var(--cerulean-900); color: #dfeaef; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a { color: var(--cream); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--cerulean); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  display: block; padding: .5rem .8rem; border-radius: 8px;
  font-size: var(--step--1); font-weight: 550; color: var(--ink-70);
  text-decoration: none; transition: background .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: var(--cerulean-050); color: var(--cerulean); }
.nav a[aria-current="page"] { color: var(--cerulean); background: var(--cerulean-050); }

/* `.nav a` above is more specific than `.btn--primary`, which would otherwise
   leave the header CTA with grey text on brown. Restate the button colours here. */
.nav a.btn--primary { color: #fff; background: var(--brown); }
.nav a.btn--primary:hover { color: #fff; background: var(--brown-600); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 9px; padding: .5rem .65rem; cursor: pointer; color: var(--cerulean);
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .75rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: .8rem .5rem; font-size: var(--step-0); border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav .btn { margin-top: 1rem; border-bottom: 0; text-align: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 650; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brown); color: #fff; box-shadow: 0 2px 12px rgba(166,82,31,.28); }
.btn--primary:hover { background: var(--brown-600); color: #fff; box-shadow: 0 6px 20px rgba(166,82,31,.34); }
.btn--ghost { border-color: var(--rule); color: var(--cerulean); background: var(--paper); }
.btn--ghost:hover { border-color: var(--cerulean); background: var(--cerulean-050); color: var(--cerulean); }
.btn--onDeep { background: var(--cream); color: var(--cerulean-900); }
.btn--onDeep:hover { background: #fff; color: var(--cerulean-900); }
.btn--lg { padding: 1rem 2rem; font-size: var(--step-0); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.center .btn-row { justify-content: center; }

/* ---------- Text helpers ---------- */
.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brown);
  margin-bottom: .9rem;
}
.section--deep .eyebrow { color: var(--gray-pastel); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-70); max-width: 62ch; }
.section--deep .lede { color: #c3d6de; }
.small { font-size: var(--step--1); color: var(--ink-45); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--paper-warm); padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero::after {
  /* the brand swoosh motif */
  content: ""; position: absolute; right: -18%; top: -30%;
  width: 62vw; aspect-ratio: 1; border-radius: 50%;
  border: clamp(30px, 6vw, 74px) solid var(--brown);
  opacity: .07; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 46rem; }
.hero h1 span { color: var(--brown); }

.trust-row { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 2rem; padding: 0; list-style: none; }
.trust-row li {
  margin: 0; font-size: var(--step--1); font-weight: 550; color: var(--cerulean);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 999px; padding: .4rem 1rem;
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gray-pastel); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-70); font-size: var(--step--1); }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--brown-050); color: var(--brown);
}
.card__icon svg { width: 24px; height: 24px; }
.card--flag { border-left: 3px solid var(--brown); }
.section--deep .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.section--deep .card p { color: #bed2db; }

.card__more { font-size: var(--step--1); font-weight: 650; text-decoration: none; }
.card__more::after { content: " →"; }

/* ---------- Feature list ---------- */
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.05rem; height: .55rem;
  border-left: 2.5px solid var(--brown); border-bottom: 2.5px solid var(--brown);
  transform: rotate(-45deg);
}

/* ---------- Status pills (built vs roadmap) ---------- */
.pill {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 5px; vertical-align: middle;
  margin-left: .5rem; white-space: nowrap;
}
.pill--live    { background: #e3f2e8; color: #1f6b3c; }
.pill--roadmap { background: var(--gray-pastel); color: #5c5344; }
.section--deep .pill--live { background: rgba(120,220,160,.16); color: #96e5b6; }
.section--deep .pill--roadmap { background: rgba(255,255,255,.12); color: var(--gray-pastel); }

/* ---------- Split (text + visual) ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wideLeft { grid-template-columns: 1.1fr .9fr; }
  .split--flip > :first-child { order: 2; }
}

/* When a .shot is hidden, collapse its .split back to a single readable column
   instead of leaving a dead half. Remove the `hidden` attribute to restore. */
.split:has(> [hidden]) { grid-template-columns: minmax(0, 72ch); }
@supports not (selector(:has(*))) {
  /* Older browsers: the empty column is cosmetic only, text still reads fine. */
  .split > [hidden] { display: none; }
}

/* ---------- Screenshot placeholder ----------
   Marked slots sized for real product captures (16:10).
   Replace .shot__ph with <img> once screens are captured. */
.shot {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.shot__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem; background: var(--paper-warm); border-bottom: 1px solid var(--rule);
}
.shot__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-pastel); }
.shot__url {
  margin-left: .6rem; font-size: .7rem; color: var(--ink-45);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.shot__ph {
  aspect-ratio: 16 / 10; display: grid; place-content: center; gap: .4rem;
  text-align: center; padding: 1.5rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,82,116,.035) 12px 24px),
    var(--cerulean-050);
  color: var(--ink-45); font-size: var(--step--1);
}
.shot__ph strong { display: block; color: var(--cerulean); font-size: var(--step-0); }
.shot img { width: 100%; display: block; }

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: s; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 3.5rem; margin-bottom: 1.75rem; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: -.1em;
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--brown); opacity: .85;
}
.steps h3 { margin-bottom: .25rem; font-size: var(--step-0); }
.steps p { margin: 0; color: var(--ink-70); font-size: var(--step--1); }

/* ---------- Table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: var(--step--1); }
th, td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--display); font-weight: 700; color: var(--cerulean-900); background: var(--paper-warm); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--display); font-weight: 650; font-size: var(--step-0); color: var(--cerulean-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brown); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 1.25rem; color: var(--ink-70); max-width: 68ch; }
.faq details > div > :last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--cerulean-900); color: #dfeaef; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; left: -10%; bottom: -60%;
  width: 46vw; aspect-ratio: 1; border-radius: 50%;
  border: clamp(24px, 5vw, 60px) solid var(--brown); opacity: .16;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
/* Without this the default dark-grey .lede lands on dark navy at ~1.9:1. */
.cta-band .lede { color: #c3d6de; }
.cta-band .small { color: #a9c2cd; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--cerulean-900); }
.field .req { color: var(--brown); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  padding: .75rem .9rem; border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--paper); width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cerulean); box-shadow: 0 0 0 3px var(--cerulean-050);
}
.field__err { font-size: var(--step--1); color: #b3261e; min-height: 1.2em; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #b3261e;
}
.form__note { font-size: var(--step--1); color: var(--ink-45); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contact info blocks ---------- */
.info-list { list-style: none; padding: 0; }
.info-list li { margin-bottom: 1.4rem; }
.info-list dt, .info-list b {
  display: block; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-45); margin-bottom: .25rem;
}
.info-list a { font-weight: 600; text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--cerulean-900); color: #a9c2cd; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: var(--step--1); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); font-weight: 700; margin-bottom: 1rem; }
.site-footer a { color: #cfe0e8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer__brand img { height: 54px; width: auto; margin-bottom: 1.1rem; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer__grid > :first-child { grid-column: 1 / -1; max-width: 30ch; }
@media (min-width: 800px) { .footer__grid > :first-child { grid-column: auto; } }
.footer__bar {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center;
  color: #8fa9b5;
}
.footer__accent { height: 3px; width: 40%; background: var(--brown); border-radius: 2px; margin-top: 1.25rem; }

/* ---------- Legal / prose pages ---------- */
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose > :first-child { margin-top: 0; }

/* ---------- Reveal on scroll ----------
   Scoped to `html.js`, which main.js sets. Content is therefore VISIBLE by
   default and the animation is purely additive. If JS fails, is blocked, or the
   page is crawled/screenshotted without scrolling, nothing disappears. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Brand Kit tool (/brand-kit)
   ========================================================================== */
.tool-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: 1fr 1fr; } }

.panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.panel + .panel { margin-top: 1.5rem; }
.panel > :last-child { margin-bottom: 0; }
.panel h3 { font-size: var(--step-0); margin-bottom: .35rem; }
.panel__hint { font-size: var(--step--1); color: var(--ink-45); margin-bottom: 1.1rem; }

/* Dropzone */
.dropzone {
  display: grid; place-items: center; gap: .5rem; text-align: center;
  min-height: 190px; padding: 1.5rem; cursor: pointer;
  border: 2px dashed var(--gray-pastel); border-radius: var(--radius);
  background: var(--paper-warm); color: var(--ink-70);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brown); background: var(--brown-050); }
.dropzone svg { width: 30px; height: 30px; color: var(--brown); }
.dropzone strong { color: var(--cerulean-900); font-family: var(--display); }
.dropzone img { max-height: 130px; width: auto; }

/* Swatches */
.swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.swatch {
  flex: 1 1 110px; min-height: 82px; border-radius: 12px; padding: .7rem;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; border: 1px solid rgba(0,0,0,.08);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.swatch__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; opacity: .85; }
.swatch__hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-weight: 600; }

/* Ready-made schemes */
.schemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.scheme {
  display: flex; flex-direction: column; gap: .45rem; align-items: flex-start;
  padding: .6rem; background: var(--paper); cursor: pointer;
  border: 1.5px solid var(--rule); border-radius: 10px; font: inherit;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.scheme:hover { border-color: var(--cerulean); transform: translateY(-2px); }
.scheme__bars { display: flex; width: 100%; height: 26px; border-radius: 6px; overflow: hidden; }
.scheme__bars i { flex: 1; }
.scheme__name { font-size: var(--step--1); font-weight: 600; color: var(--ink-70); }

/* Colour row */
.colour-row { display: flex; gap: .6rem; align-items: center; }
.colour-row input[type="color"] {
  width: 52px; height: 44px; padding: 2px; border: 1.5px solid var(--rule);
  border-radius: 10px; background: var(--paper); cursor: pointer; flex: none;
}
.colour-row input[type="text"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

/* Wordmark canvas */
#wordmark {
  width: 100%; height: auto; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
}

/* Live preview of branded outputs */
.preview { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.pv__card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm);
}
.pv__bar {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem;
  background: var(--p); color: var(--on); font-size: .78rem;
}
.pv__logo { height: 22px; width: auto; background: #fff; border-radius: 3px; padding: 2px; }
.pv__mark {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: var(--a); color: #fff; font-size: .62rem; font-weight: 700; flex: none;
}
.pv__body { padding: .9rem; background: var(--tint); }
.pv__eyebrow { font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--a); margin: 0 0 .3rem; }
.pv__body h4 { font-size: var(--step-0); margin: 0 0 .15rem; color: var(--ink); }
.pv__sub { font-size: .74rem; color: var(--ink-70); margin: 0 0 .8rem; }
.pv__btn {
  display: inline-block; font-size: .7rem; font-weight: 650; padding: .35rem .8rem;
  border-radius: 999px; background: var(--a); color: #fff;
}

.tool-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

/* ---------- Founder cards ---------- */
.person {
  display: grid; gap: 1.5rem; align-items: start;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 460px) { .person { grid-template-columns: 132px 1fr; } }
.person__photo {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--cream); box-shadow: var(--shadow-sm);
}
.person__body > :last-child { margin-bottom: 0; }
.person h3 { margin-bottom: .15rem; }
.person__role {
  font-size: var(--step--1); font-weight: 650; color: var(--brown);
  margin-bottom: 1rem;
}
.person p { font-size: var(--step--1); color: var(--ink-70); }

/* ---------- Consent banner ---------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--cerulean-900); color: #dfeaef;
  border-top: 3px solid var(--brown);
  box-shadow: 0 -8px 32px rgba(20,35,43,.22);
  animation: consent-in .3s var(--ease) both;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

.consent__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 1.15rem var(--gutter);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.consent__copy { flex: 1 1 420px; }
.consent__title { font-size: var(--step-0); color: #fff; margin: 0 0 .3rem; }
.consent p { margin: 0; font-size: var(--step--1); color: #bed2db; max-width: 72ch; }
.consent a { color: var(--cream); text-underline-offset: 2px; }
.consent a:hover { color: #fff; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; flex: 0 0 auto; }
/* Reject must be as easy as accept, so it gets equal weight, not a faint link. */
.consent__actions .btn--ghost {
  background: transparent; border-color: rgba(255,255,255,.45); color: #fff;
}
.consent__actions .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
@media (max-width: 560px) { .consent__actions .btn { flex: 1 1 auto; } }

/* ---------- Poster Studio + shared tool UI ---------- */
.scheme.is-on { border-color: var(--brown); box-shadow: 0 0 0 2px var(--brown-050); }
.scheme { text-align: left; }

.srow {
  display: grid; grid-template-columns: 56px 1fr 34px; gap: .75rem; align-items: start;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.srow__pic {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; background: var(--cerulean-050);
  color: var(--cerulean); font-weight: 700; font-size: .85rem;
  border: 2px dashed var(--gray-pastel);
}
.srow__pic:hover { border-color: var(--brown); }
.srow__pic img { width: 100%; height: 100%; object-fit: cover; }
.srow__fields { display: grid; gap: .4rem; }
.srow__fields input {
  font: inherit; font-size: var(--step--1); padding: .5rem .65rem;
  border: 1.5px solid var(--rule); border-radius: 8px; width: 100%; background: var(--paper);
}
.srow__fields input:focus { outline: none; border-color: var(--cerulean); box-shadow: 0 0 0 3px var(--cerulean-050); }
.srow__del {
  background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-45);
  cursor: pointer; padding: .2rem .4rem; border-radius: 6px;
}
.srow__del:hover { color: #b3261e; background: #fbeae9; }

.poster-preview {
  width: 100%; max-width: 340px; height: auto; border-radius: var(--radius);
  border: 1px solid var(--rule); box-shadow: var(--shadow-md); background: #fff;
}
#preview-wrap { display: flex; flex-wrap: wrap; gap: 1rem; }

.radio-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.radio-row label { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--step--1); cursor: pointer; }
.radio-row input { width: 18px; height: 18px; accent-color: var(--brown); }

/* ==========================================================================
   Marks to WhatsApp (/whatsapp-marks) and Certificate Generator (/certificates)
   Appended for two tools that need a message list and a wide canvas preview.
   ========================================================================== */
.msg-preview { border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem; background: var(--paper-warm); margin-bottom: .9rem; }
.msg-body { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: var(--step--1); color: var(--ink-70); }
.msg-bad { color: #b3261e; font-weight: 600; }
.msg-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.msg-row:last-child { border-bottom: 0; }
.msg-row__act { display: flex; flex-wrap: wrap; gap: .4rem; }
.cert-preview { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }

/* ---------- Calculator tools (/fee-planner, /batch-calculator) ---------- */
/* Appended for the batch break-even bar and the repeatable cost list. These
   are the only shapes the calculators needed that the existing kit lacked. */
.crow {
  display: grid; grid-template-columns: 1fr 130px 34px; gap: .6rem; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.crow input {
  font: inherit; font-size: var(--step--1); padding: .5rem .65rem;
  border: 1.5px solid var(--rule); border-radius: 8px; width: 100%; background: var(--paper);
}
.crow input:focus { outline: none; border-color: var(--cerulean); box-shadow: 0 0 0 3px var(--cerulean-050); }
.crow__del {
  background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-45);
  cursor: pointer; padding: .2rem .4rem; border-radius: 6px;
}
.crow__del:hover { color: #b3261e; background: #fbeae9; }

.bbar { position: relative; height: 46px; border-radius: 10px; overflow: hidden; background: var(--cerulean-050); }
.bbar__fill { position: absolute; inset-block: 0; left: 0; display: flex; align-items: center; }
.bbar__label {
  position: absolute; inset-block: 0; display: flex; align-items: center;
  padding-inline: .7rem; font-size: var(--step--1); font-weight: 700; white-space: nowrap;
}
.bbar__mark { position: absolute; inset-block: 0; width: 3px; background: var(--brown); }
.bbar-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .6rem; }
.bbar-legend span { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--ink-70); }
.bbar-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.bignum { font-family: var(--display); font-weight: 700; font-size: var(--step-3); line-height: 1.1; color: var(--cerulean-900); }
.bignum--good { color: #1c7a4a; }
.bignum--bad { color: #b3261e; }

/* ---------- Tool result rows and weekly grid ----------
   Added for /attendance-check/ and /timetable-check/. The colours are set
   inline from the user's Brand Kit, so only layout lives here. */
.risk-row { border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: .85rem; }
.risk-row__name { font-family: var(--display); font-weight: 700; font-size: var(--step-0); }
.risk-row__why { font-size: var(--step--1); margin-top: .2rem; }
.risk-row__meta { font-size: var(--step--1); opacity: .85; margin-top: .3rem; }

.week-grid { display: grid; gap: .6rem; min-width: 540px; }
.week-grid__col { display: flex; flex-direction: column; gap: .5rem; }
.week-grid__day {
  font-family: var(--display); font-weight: 700; font-size: var(--step--1);
  padding: .5rem .7rem; border-radius: 8px; text-align: center;
}
.week-grid__ses {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .7rem; border-radius: 8px;
  font-size: var(--step--1); color: var(--cerulean-900);
  border: 2px solid transparent;
}
.week-grid__ses.is-clash { border-color: #A6521F; }

/* The [hidden] attribute only sets display:none at very low priority, so any
   element given display by a class (.field, .form are grids) ignores it. This
   bit the calculators' conditional fields; fixed for the whole site. */
[hidden] { display: none !important; }

/* Grid items default to min-width:auto, so a wide child (a table, a long
   unbroken string, a canvas) can force its column past the container and give
   the whole page a horizontal scrollbar. Seen first on /batch-calculator/ at
   390px, where .tool-grid computed to 582px inside a 390px viewport.
   Fixed for every tool page at once rather than per-page. */
.tool-grid { grid-template-columns: minmax(0, 1fr); }
.tool-grid > * { min-width: 0; }
@media (min-width: 900px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Long unbroken values (hex codes, URLs, wa.me links) must wrap, not push. */
.panel, .card, .srow__fields { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Print path for the fee receipt tool.
   PNG is the primary output, because the market is mobile first and a printer
   is not a given. This is the fallback for anyone who does want paper: it hides
   the whole site chrome and prints just the generated receipt image, A5
   landscape, edge to edge.
   Appended for /fee-receipt/; nothing else on the site uses .print-only.
   --------------------------------------------------------------------------- */
.print-only { display: none; }

@media print {
  .site-header,
  .site-footer,
  .hero,
  .section--warm,
  .skip,
  .consent,
  .tool-grid,
  #brand-notice,
  #fr-status { display: none !important; }

  .print-only { display: block; }
  .print-only img { width: 100%; height: auto; display: block; }

  body { background: #FFFFFF; }
  .section { padding: 0; }
  .wrap { max-width: none; padding: 0; margin: 0; }

  @page { size: A5 landscape; margin: 8mm; }
}

/* ---------------------------------------------------------------------------
   Teaching tools (/syllabus-planner/, /paper-blueprint/, /question-paper/,
   /duplicate-questions/). Appended because the existing kit had no repeatable
   definition row, no side-by-side compare column and no A4 portrait print page.
   Colours still come from the Brand Kit and are set inline.
   --------------------------------------------------------------------------- */
.defrow {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .85rem; margin-bottom: .75rem; background: var(--paper-warm);
}
.defrow__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.defrow__title { font-family: var(--display); font-weight: 700; font-size: var(--step--1); }
.defgrid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: .6rem; }
.defgrid input, .defgrid select {
  font: inherit; font-size: var(--step--1); padding: .5rem .6rem;
  border: 1.5px solid var(--rule); border-radius: 8px; width: 100%; background: var(--paper);
}
.defgrid input:focus, .defgrid select:focus { outline: none; border-color: var(--cerulean); box-shadow: 0 0 0 3px var(--cerulean-050); }
.defgrid label { display: block; font-size: var(--step--2); color: var(--ink-70); margin-bottom: .2rem; }

.dupset { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: .6rem; }
.dupcard { border: 1px solid var(--rule); border-radius: 10px; padding: .7rem .8rem; background: var(--paper); font-size: var(--step--1); }
.dupcard mark { background: #ffe9c9; color: inherit; padding: 0 .1em; border-radius: 3px; }
.dupcard__meta { font-size: var(--step--2); color: var(--ink-70); margin-top: .35rem; }

.chaplist { display: grid; gap: .35rem; }
.chaplist label { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--step--1); }

/* Named page so the question paper prints A4 portrait without disturbing the
   A5 landscape @page the fee receipt already relies on. */
@page a4portrait { size: A4 portrait; margin: 10mm; }
.print-a4 { page: a4portrait; }

@media print {
  #sp-status, #pb-status, #qp-status, #dq-status { display: none !important; }
  .print-a4 img { width: 100%; height: auto; display: block; page-break-after: always; }
  .print-a4 img:last-child { page-break-after: auto; }
}

/* Report card generator: the secondary print path. PNG is the primary output
   for /report-cards/, because these are sent to a parent's phone far more often
   than they are printed. Printing reuses the existing .print-only reveal and
   the existing a4portrait named page rather than declaring a bare @page, which
   would have silently re-sized the A5 fee receipt as well. Appended for
   /report-cards/. */
@media print {
  #rc-status { display: none !important; }
}

/* Per-teacher pay basis rows for /teacher-payout/. The existing .crow is a
   fixed three-column grid (label, one value, delete) and cannot hold a name
   plus three controls, so this is a separate row that wraps to a single column
   on a phone. Input styling matches .crow so the two look identical.
   Appended for /teacher-payout/. */
.trow {
  display: grid; grid-template-columns: 1fr; gap: .6rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.trow:last-child { border-bottom: 0; }
@media (min-width: 560px) {
  .trow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}
.trow__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.trow__f { display: block; min-width: 0; }
.trow__f span { display: block; margin-bottom: .2rem; }
.trow input, .trow select {
  font: inherit; font-size: var(--step--1); padding: .5rem .65rem;
  border: 1.5px solid var(--rule); border-radius: 8px; width: 100%; background: var(--paper);
}
.trow input:focus, .trow select:focus {
  outline: none; border-color: var(--cerulean); box-shadow: 0 0 0 3px var(--cerulean-050);
}


/* ---- Findability check, GBP checklist, WhatsApp form, response time ----
   Appended for the four tools added in this batch. Everything else on those
   pages reuses the existing panel, card, field and radio-row classes. */

/* Shared progress/score bar */
.fc-bar { height: 12px; border-radius: 999px; overflow: hidden; }
.fc-bar i { display: block; height: 100%; border-radius: 999px; transition: width .35s var(--ease); }

/* Findability: one question block */
.fc-item { padding: 1rem 0; border-top: 1px solid var(--rule); }
.fc-item:first-child { border-top: 0; padding-top: 0; }
.fc-item .radio-row label { align-items: flex-start; }
.fc-gap { padding: .9rem 0; border-top: 1px solid var(--rule); }
.fc-gap:first-child { border-top: 0; padding-top: 0; }
.fc-gap p { font-size: var(--step--1); }

/* GBP checklist item */
.gb-item { padding: .85rem 0; border-top: 1px solid var(--rule); }
.gb-item:first-of-type { border-top: 0; padding-top: 0; }
.gb-item__head { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-weight: 600; }
.gb-item__head input { margin-top: .25rem; flex: 0 0 auto; }
.gb-item__g { margin: .4rem 0 0 1.75rem; }
.gb-item.is-done .gb-item__head span { color: var(--ink-45); text-decoration: line-through; }
.gb-item.is-done .gb-item__g { opacity: .6; }

/* WhatsApp form: the field editor rows */
.wa-field {
  display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap;
  padding: .75rem 0; border-top: 1px solid var(--rule);
}
.wa-field:first-child { border-top: 0; padding-top: 0; }
.wa-field__main { flex: 1 1 200px; min-width: 0; }
.wa-field__label {
  font: inherit; font-size: var(--step--1); font-weight: 600; width: 100%;
  padding: .45rem .6rem; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--paper);
}
.wa-field__label:focus { outline: none; border-color: var(--cerulean); box-shadow: 0 0 0 3px var(--cerulean-050); }
.wa-field__req { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--step--1); white-space: nowrap; }
.wa-field__btns { display: flex; gap: .25rem; }
.wa-field__btns button {
  border: 1.5px solid var(--rule); background: var(--paper); border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; color: var(--ink-70); line-height: 1;
}
.wa-field__btns button:hover:not(:disabled) { border-color: var(--cerulean); color: var(--cerulean); }
.wa-field__btns button:disabled { opacity: .35; cursor: default; }

/* WhatsApp form: the live preview of the generated form */
.waf { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: #fff; }
.waf__head { background: var(--waf-primary); color: var(--waf-on); padding: 1.25rem 1.1rem; }
.waf__logo { max-height: 40px; width: auto; background: #fff; border-radius: 6px; padding: 3px; margin-bottom: .6rem; display: block; }
.waf__inst { margin: 0 0 .3rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.waf__title { margin: 0; font-family: var(--display); font-size: var(--step-1); line-height: 1.2; color: inherit; }
.waf__sub { margin: .45rem 0 0; font-size: var(--step--1); opacity: .9; }
.waf__body { padding: 1.1rem; }
.waf__row { margin-bottom: .85rem; }
.waf__row label { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: .3rem; color: var(--cerulean-900); }
.waf__req { color: var(--waf-accent); }
.waf__row input, .waf__row select, .waf__row textarea {
  width: 100%; font: inherit; font-size: var(--step--1); padding: .6rem .7rem;
  border: 1.5px solid var(--rule); border-radius: 9px; background: var(--paper); color: var(--ink);
}
.waf__row textarea { min-height: 72px; resize: vertical; }
.waf__row input:focus, .waf__row select:focus, .waf__row textarea:focus {
  outline: none; border-color: var(--waf-primary); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.waf__row [aria-invalid="true"] { border-color: #b3261e; }
.waf__err { margin: .25rem 0 0; font-size: var(--step--1); color: #b3261e; min-height: 1em; }
.waf__btn {
  width: 100%; font: inherit; font-weight: 700; padding: .85rem 1rem; border: 0; border-radius: 10px;
  background: var(--waf-accent); color: var(--waf-on-accent); cursor: pointer;
}
.waf__btn:hover { filter: brightness(1.07); }
.waf__note { margin: .8rem 0 0; font-size: var(--step--1); color: var(--ink-45); text-align: center; }

/* Response time: bars, stats and table */
.rt-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.rt-bar__track { flex: 1 1 auto; height: 26px; border-radius: 7px; overflow: hidden; }
.rt-bar__fill { height: 100%; display: flex; align-items: center; border-radius: 7px; transition: width .35s var(--ease); }
.rt-bar__fill span { font-size: var(--step--1); font-weight: 600; padding-inline: .55rem; white-space: nowrap; }
.rt-bar__out { font-size: var(--step--1); font-weight: 600; color: var(--ink-70); white-space: nowrap; }
.rt-bar__label { margin: 0 0 .3rem; font-size: var(--step--1); }
.rt-stats { display: grid; gap: .7rem; margin: 0; }
.rt-stats div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .55rem; }
.rt-stats div:last-child { border-bottom: 0; padding-bottom: 0; }
.rt-stats dt { font-size: var(--step--1); color: var(--ink-70); }
.rt-stats dd { margin: 0; font-weight: 700; text-align: right; color: var(--cerulean-900); }
.rt-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.rt-table th, .rt-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rt-table th { font-weight: 700; color: var(--cerulean-900); }
.rt-table tr.is-never td { background: #fbeae9; }

/* Email signature preview (Brand Asset Pack).
   The signature is a fixed-width HTML table, so it must scroll inside its own
   box rather than pushing the page sideways on a phone. */
.sig-box {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); padding: 1rem; overflow-x: auto;
}

/* Tools that inject third-party-ish HTML (the email signature preview, the
   generated-website preview) can bring their own widths in. Contain them so a
   preview never gives the whole page a horizontal scrollbar on a phone. */
.sig-box, #bp-sig-preview, #bp-previews { max-width: 100%; overflow-x: auto; }
/* An email signature is built as a fixed-width table, which is correct for
   email but overflows a 360px phone. Constrain it inside the preview only;
   the copied HTML the user pastes into Gmail is untouched. */
.sig-box table, #bp-sig-preview table { max-width: 100%; }
.sig-box td, .sig-box div, #bp-sig-preview td, #bp-sig-preview div { max-width: 100%; }
@media (max-width: 520px) {
  .sig-box table, #bp-sig-preview table { width: 100%; table-layout: fixed; }
}

/* .btn sets white-space:nowrap, which is right on desktop but means a long
   label ("Download the whole pack as a zip") cannot shrink and pushes the page
   sideways on a narrow phone. Found on /brand-pack/ at 360px: a 335px button
   inside a 278px column. Let labels wrap on small screens instead. */
@media (max-width: 560px) {
  .btn { white-space: normal; }
  .tool-actions .btn { width: 100%; }
}

/* Contact form: how the enquiry gets sent. There is no server behind this
   site, so the form composes the message and hands it to the visitor's own
   WhatsApp or email, the same approach the Toolkit uses. */
.send-via { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0; }
.send-via legend { font-size: var(--step--1); font-weight: 650; color: var(--cerulean-900); padding: 0 .4rem; }

/* Founder profile link */
.person__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; font-size: var(--step--1); text-decoration: none; }
.person__link::before { content: "in"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #0a66c2; color: #fff; font-size: .62rem; font-weight: 700; font-family: var(--sans); }