/* ==========================================================================
   Not A Classroom — brochure site stylesheet
   Aesthetic: sticker-book / playful-chunky. Navy + gold on warm cream,
   bold borders, hard offset shadows, slight tilts.
   ========================================================================== */

:root {
  --navy: #1b2d6b;
  --navy-deep: #101d4c;
  --navy-soft: #2b3f85;
  --sky: #54afe0;
  --gold: #ffd700;
  --gold-deep: #e8bf00;
  --cream: #fff6e6;
  --cream-2: #ffeed6;
  --paper: #fffcf4;
  --ink: #16204a;
  --muted: #4c5680;
  --muted-on-navy: #c9d2f2;
  --trend-green: #17613a;
  --trend-red: #a51f2d;

  --border: 3px;
  --radius: 22px;
  --radius-lg: 30px;
  --shadow: 7px 7px 0 var(--navy);
  --shadow-sm: 4px 4px 0 var(--navy);
  --shadow-gold: 7px 7px 0 var(--gold-deep);

  --step: clamp(1rem, 0.6rem + 1.4vw, 1.35rem);
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.75rem);
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", Helvetica, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* keep anchor targets clear of the sticky nav */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

/* DESIGN RULE — flat fields only. No graph-paper, grid-line, checkered or
   dotted background anywhere on this site. Three of them existed and were
   removed on 17 August 2026: this cream field (a 22px radial-gradient dot
   grid), `.navy-band::after` (26px white dots) and `.sky-band::after` (26px
   navy dots). Every band is now a solid fill. Do not reintroduce a texture,
   and do not delete this comment. */
body {
  margin: 0;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.wordmark,
.btn,
.flag,
.tab {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1,
h2,
h3 {
  line-height: 1.08;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--navy);
  text-underline-offset: 3px;
}

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

.wrap {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tilt {
  display: inline-block;
  transform: rotate(-1.6deg);
}

.tilt-r {
  display: inline-block;
  transform: rotate(1.2deg);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 14px 0;
  font-weight: 700;
  z-index: 999;
}

.skip:focus {
  left: 0;
}

:focus-visible {
  outline: 4px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}

.navy-band :focus-visible {
  outline-color: var(--gold);
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: var(--border) solid var(--navy);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  flex-wrap: wrap;
  padding-block: 0.6rem;
}

.wordmark {
  font-size: clamp(1.1rem, 0.85rem + 1vw, 1.5rem);
  text-decoration: none;
  color: var(--navy);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.1;
}

.wordmark .gold {
  color: var(--navy);
  background: var(--gold);
  padding: 0 0.34em;
  border-radius: 9px;
  box-shadow: 2px 2px 0 var(--navy);
  display: inline-block;
  transform: rotate(-1.4deg);
}

.nav__links {
  display: flex;
  align-items: center;
  /* five links no longer fit on one row on the narrowest phones, so the row
     wraps rather than pushing the header past the viewport */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(0.6rem, 2vw, 1.8rem);
  /* declared after `gap`, which would otherwise reset it */
  row-gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--navy);
  padding: 0.35rem 0.15rem;
  border-bottom: 3px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------- bands ---- */

.navy-band {
  position: relative;
  background: var(--navy);
  color: var(--paper);
  border-block: var(--border) solid var(--navy-deep);
  overflow: hidden;
}

.navy-band::before {
  /* soft gold atmosphere, off-centre so the band never reads as a flat slab */
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 70ch;
  height: 70ch;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.16), transparent 62%);
  pointer-events: none;
}

.navy-band > * {
  position: relative;
  z-index: 1;
}

.navy-band h2,
.navy-band h3 {
  color: var(--paper);
}

/* Sky relief field. Identical band geometry to .navy-band — the same 3px
   navy-deep edges and the same off-centre glow — but on the light surface the
   type flips to deep navy so the page gets a breath between the dark
   stretches. Deep navy on sky is 6.59:1; navy on sky is 5.25:1. */
.sky-band {
  position: relative;
  background: var(--sky);
  color: var(--navy-deep);
  border-block: var(--border) solid var(--navy-deep);
  overflow: hidden;
}

.sky-band::before {
  /* the navy band's gold haze goes muddy on sky — same shape, light instead */
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 70ch;
  height: 70ch;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.38), transparent 62%);
  pointer-events: none;
}

.sky-band > * {
  position: relative;
  z-index: 1;
}

/* Muted body ink is 2.91:1 on sky — the lede moves to navy (5.25:1). */
.sky-band .lede {
  color: var(--navy);
}

/* Card faces stay paper, so their interiors keep the shipped ink they were
   tuned against rather than inheriting the band's deep navy. */
.sky-band .card {
  color: var(--ink);
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  padding-block: clamp(2.6rem, 1rem + 7vw, 5.6rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.pill {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  padding: 0.5rem 1.05rem;
  border: var(--border) solid var(--navy-deep);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--navy-deep);
  transform: rotate(-1.8deg);
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-size: clamp(2.3rem, 1.1rem + 4.6vw, 4rem);
  margin-bottom: 0.6rem;
  max-width: 17ch;
  text-wrap: balance;
}

.hero h1 .gold {
  color: var(--gold);
  display: block;
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.25rem);
  color: var(--muted-on-navy);
  max-width: 54ch;
  margin-bottom: 0;
}

.hero__sub strong {
  color: var(--paper);
  font-weight: 700;
}

/* Decorative stack of "worlds" — pure CSS, no images to load. */
.hero__stack {
  display: grid;
  gap: 0.9rem;
  justify-items: stretch;
}

.chip-card {
  background: var(--paper);
  color: var(--navy);
  border: var(--border) solid var(--navy-deep);
  border-radius: 18px;
  padding: 0.75rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  box-shadow: 5px 5px 0 rgba(16, 29, 76, 0.85);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.chip-card:nth-child(odd) {
  transform: rotate(-1.6deg);
}

.chip-card:nth-child(even) {
  transform: rotate(1.4deg);
  background: var(--gold);
}

.chip-card span {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.chip-card:nth-child(even) span {
  color: var(--navy);
}

/* -------------------------------------------------------------- section --- */

.section {
  padding-block: clamp(2.6rem, 1.2rem + 6vw, 5rem);
}

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.section__head h2 {
  font-size: clamp(1.8rem, 1.1rem + 3vw, 3rem);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--navy);
  background: var(--gold);
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
  border: 2px solid var(--navy);
  margin-bottom: 0.9rem;
}

.navy-band .eyebrow {
  border-color: var(--navy-deep);
}

.lede {
  font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.2rem);
  color: var(--muted);
}

.navy-band .lede {
  color: var(--muted-on-navy);
}

/* ---------------------------------------------------------------- tabs ---- */

.tabbar {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.4rem 0.4rem 1rem;
  margin: 0 -0.4rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tab {
  flex: 0 0 auto;
  cursor: pointer;
  background: var(--paper);
  color: var(--navy);
  border: var(--border) solid var(--navy);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font-size: 0.98rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tab:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--navy);
}

.tab[aria-selected="true"] {
  background: var(--gold);
  transform: translate(1px, 1px) rotate(-1deg);
  box-shadow: 3px 3px 0 var(--navy);
}

.panel[hidden] {
  display: none;
}

.panel {
  animation: panel-in 0.32s ease both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --------------------------------------------------------------- cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  align-items: stretch;
}

.card {
  background: var(--paper);
  border: var(--border) solid var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: card-in 0.4s ease both;
}

.card:nth-child(2) {
  animation-delay: 0.07s;
}

.card:nth-child(3) {
  animation-delay: 0.14s;
}

.card:nth-child(4) {
  animation-delay: 0.21s;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--navy);
}

.card h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  margin-bottom: 0.35rem;
}

.card p {
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Two-action stack on not-yet-launched cards: gold primary, fine-print
   caption, quiet navy text-link secondary. */
.card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.card__actions .btn {
  margin-top: 0;
}

.card .card__caption {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* status flags
   Each modifier is scoped to `.card` so it outranks `.card p` (0,1,1), which
   otherwise repaints these chips in muted body-copy ink and wrecks their
   contrast — the flags are <p> elements inside the card. */
.flag {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--navy);
  margin-bottom: 0.8rem;
  transform: rotate(-1.4deg);
}

.card .flag--live {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
}

/* Navy chip, white type, gold border and shadow — 12.53:1. */
.card .flag--engine {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--gold);
  box-shadow: 3px 3px 0 var(--gold-deep);
}

.card .flag--coming {
  background: transparent;
  color: var(--navy);
  border-style: dashed;
}

.card--coming {
  background: var(--cream-2);
  border-style: dashed;
  box-shadow: 5px 5px 0 rgba(27, 45, 107, 0.35);
}

/* chip lists inside cards */
.chiplist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0 0 1.2rem;
}

/* Exam chips inside cards. Gold fill with navy type — the same high-contrast
   pairing the primary buttons and status flags use (9.2:1). */
.chiplist li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--gold);
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 0.18rem 0.55rem;
  color: var(--navy);
  box-shadow: 2px 2px 0 var(--navy);
}

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  padding: 0.72rem 1.3rem;
  border-radius: 14px;
  border: var(--border) solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--navy);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--navy);
}

.btn--gold {
  background: var(--gold);
}

/* Quiet secondary action: reads as a navy text link, keeps the display face. */
.btn--link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--navy);
  padding: 0.2rem 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold-deep);
}

.btn--link:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  color: var(--navy-soft);
}

.btn--link:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.btn--big {
  font-size: 1.05rem;
  padding: 0.95rem 1.9rem;
  box-shadow: var(--shadow);
}

.navy-band .btn--gold {
  border-color: var(--navy-deep);
  box-shadow: 5px 5px 0 var(--navy-deep);
}

.navy-band .btn--gold:hover {
  box-shadow: 8px 8px 0 var(--navy-deep);
}

/* --------------------------------------------------------------- trust --- */

/* Trust cards are claim + one line, so they sit tighter than program cards,
   hug their own copy instead of stretching to the tallest in the row, and pick
   up the same alternating tilt the licensing steps use. */
.cards--trust {
  align-items: start;
}

.cards--trust .card {
  gap: 0;
}

.cards--trust .card h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.cards--trust .card p {
  margin-bottom: 0;
}

.cards--trust .card:nth-child(even) {
  transform: rotate(0.7deg);
}

.cards--trust .card:nth-child(odd) {
  transform: rotate(-0.7deg);
}

.cards--trust .card:hover {
  transform: rotate(0deg) translate(-3px, -3px);
}

/* ----------------------------------------------------------- licensing --- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

@media (min-width: 760px) {
  /* four steps read best as a 2x2 block — narrow columns shred the copy */
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.step {
  background: var(--paper);
  color: var(--ink);
  border: var(--border) solid var(--navy-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  box-shadow: 7px 7px 0 var(--navy-deep);
  position: relative;
  transition: transform 0.18s ease;
}

.step:nth-child(even) {
  transform: rotate(0.7deg);
}

.step:nth-child(odd) {
  transform: rotate(-0.7deg);
}

.step:hover {
  transform: rotate(0deg) translateY(-4px);
}

.step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold);
  border: var(--border) solid var(--navy-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy-deep);
  margin-bottom: 0.85rem;
}

.step h3 {
  color: var(--navy);
  font-size: 1.32rem;
}

.step ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.step li {
  margin-bottom: 0.4rem;
}

.step li::marker {
  color: var(--gold-deep);
  font-size: 1.1em;
}

/* Licensee dashboard perk: the field is the sky relief inside the navy
   licensing band, keeping the gold shadow so it still reads as the one
   highlighted promise in the terms. Every card and chip inside it stays paper
   or ivory with navy type, exactly as shipped. */
.perk {
  background: var(--sky);
  color: var(--navy-deep);
  border: var(--border) solid var(--navy-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  box-shadow: 7px 7px 0 var(--gold-deep);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  max-width: 78ch;
  transform: rotate(-0.5deg);
}

/* Beats `.navy-band h3`, which would otherwise paint this cream-on-cream. */
.navy-band .perk h3 {
  color: var(--navy);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.7rem;
}

/* :not(.eyebrow) so the gold tag keeps its navy type (9.16:1) instead of
   inheriting body ink. Navy rather than muted, because these two paragraphs
   now sit on the sky field — muted would be 2.91:1, navy is 5.25:1. Chips and
   captions inside the dashboard mock override this with their own colours. */
.perk p:not(.eyebrow) {
  color: var(--navy);
}

.perk strong {
  color: var(--navy);
}

.perk__note {
  font-size: 0.85rem;
  color: var(--navy);
  margin: 0;
}

.dashboard-mock {
  margin: 1.35rem 0 1.2rem;
  padding: clamp(0.85rem, 0.7rem + 0.7vw, 1.2rem);
  background: var(--cream-2);
  color: var(--ink);
  border: var(--border) solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--navy);
  transform: rotate(0.35deg);
}

.dashboard-mock__topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.dashboard-mock__heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.navy-band .dashboard-mock h4 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.15;
}

.live-chip,
.month-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.55rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.live-chip {
  background: #dff2e6;
  color: var(--trend-green);
}

.month-chip {
  background: var(--navy);
  color: var(--paper);
}

.dashboard-mock__stats {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.perk .dashboard-mock__stats p {
  margin: 0;
  padding: 0.34rem 0.58rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.trend-panel {
  margin: 0 0 0.9rem;
  padding: clamp(0.7rem, 0.55rem + 0.7vw, 1rem);
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 16px;
  box-shadow: 3px 3px 0 rgba(27, 45, 107, 0.22);
}

.trend-panel__header,
.student-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.navy-band .dashboard-mock h5 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 0.84rem + 0.35vw, 1.1rem);
  font-weight: 800;
  line-height: 1.15;
}

.trend-panel__legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.trend-panel__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-dot {
  width: 0.58rem;
  height: 0.58rem;
  flex: 0 0 auto;
  border: 1px solid var(--navy);
  border-radius: 50%;
}

.legend-dot--green {
  background: var(--trend-green);
}

.legend-dot--red {
  background: var(--trend-red);
}

.trend-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.25rem;
  overflow: visible;
}

.chart-grid line {
  stroke: rgba(27, 45, 107, 0.24);
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
}

.chart-axis text {
  fill: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  text-anchor: end;
}

.trend-area {
  fill: url(#mastery-area);
}

.trend-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line--green {
  stroke: var(--trend-green);
}

.trend-line--red {
  stroke: var(--trend-red);
}

.trend-dots circle {
  stroke: var(--paper);
  stroke-width: 3;
}

.trend-dots--green circle {
  fill: var(--trend-green);
}

.trend-dots--red circle {
  fill: var(--trend-red);
}

.trend-end {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-anchor: end;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.trend-end--green {
  fill: var(--trend-green);
}

.trend-end--red {
  fill: var(--trend-red);
}

.perk .trend-panel figcaption {
  margin-top: -0.05rem;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.cohort-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 14px;
  color: var(--ink);
  font-size: clamp(0.72rem, 0.64rem + 0.35vw, 0.86rem);
  line-height: 1.25;
}

.cohort-table th,
.cohort-table td {
  padding: 0.6rem 0.65rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(27, 45, 107, 0.22);
}

.cohort-table thead th {
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
}

.cohort-table tbody th {
  color: var(--navy);
  font-weight: 800;
  white-space: nowrap;
}

.student-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.student-trend svg {
  width: 56px;
  height: 18px;
  overflow: visible;
}

.student-trend polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.student-trend--up,
.subject-trend--up {
  color: var(--trend-green);
}

.student-trend--down,
.subject-trend--down {
  color: var(--trend-red);
}

.cohort-table tr:last-child th,
.cohort-table tr:last-child td {
  border-bottom: 0;
}

.progress {
  display: block;
  width: min(150px, 100%);
  min-width: 88px;
  height: 12px;
  overflow: hidden;
  background: var(--cream-2);
  border: 2px solid var(--navy);
  border-radius: 999px;
}

.progress__fill {
  display: block;
  width: var(--progress);
  height: 100%;
  background: var(--gold-deep);
  border-right: 2px solid var(--navy);
}

.perk .student-detail__intro {
  margin: 0.8rem 0 0.35rem;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.3;
}

.student-detail {
  padding: clamp(0.75rem, 0.6rem + 0.7vw, 1.05rem);
  background: rgba(255, 215, 0, 0.16);
  border: 2px solid var(--navy);
  border-radius: 16px;
  box-shadow: 3px 3px 0 rgba(27, 45, 107, 0.22);
}

.student-detail__summary {
  display: flex;
  gap: 0.42rem;
  flex-wrap: wrap;
  margin: 0.7rem 0;
}

.perk .student-detail__summary p {
  margin: 0;
  padding: 0.3rem 0.5rem;
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.subject-list {
  display: grid;
  gap: 0.48rem;
}

.subject-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.85fr) auto minmax(10rem, 1.35fr);
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.62rem 0.72rem;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 13px;
  color: var(--navy);
  font-size: 0.75rem;
  line-height: 1.2;
}

.subject-row__name {
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.subject-row__score,
.subject-row__mastery {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.accuracy-chip {
  padding: 0.24rem 0.42rem;
  background: var(--cream-2);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  white-space: nowrap;
}

.subject-trend {
  white-space: nowrap;
}

.mastery-bar {
  display: block;
  width: 100%;
  min-width: 90px;
  height: 12px;
  overflow: hidden;
  background: var(--cream-2);
  border: 2px solid var(--navy);
  border-radius: 999px;
}

.mastery-bar > span {
  display: block;
  width: var(--mastery);
  height: 100%;
  background: linear-gradient(90deg, var(--trend-green), var(--gold-deep));
  border-right: 2px solid var(--navy);
}

.perk .reserving-chip {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  padding: 0.24rem 0.48rem;
  background: rgba(255, 215, 0, 0.14);
  color: var(--navy);
  border: 2px dashed var(--gold-deep);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
}

.perk .student-detail__caption {
  margin: 0.7rem 0 0;
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.35;
}

.perk .dashboard-mock__caption {
  margin: 0.7rem 0 0;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.license-perks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.license-perk {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: var(--border) solid var(--navy-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  box-shadow: 7px 7px 0 var(--navy-deep);
}

.license-perk:nth-child(odd) {
  transform: rotate(-0.55deg);
}

.license-perk:nth-child(even) {
  transform: rotate(0.55deg);
}

.navy-band .license-perk h3 {
  color: var(--navy);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
}

.license-perk p {
  color: var(--muted);
}

.license-perk .license-perk__close {
  margin: auto 0 0;
  padding-top: 0.85rem;
  color: var(--navy);
  border-top: 2px dashed var(--gold-deep);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.35;
}

.urgency {
  border: var(--border) solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  background: rgba(255, 215, 0, 0.08);
  box-shadow: 6px 6px 0 rgba(255, 215, 0, 0.35);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

.urgency p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
  color: var(--paper);
}

.urgency strong {
  color: var(--gold);
}

/* ---------------------------------------------------------- form panels --- */

.panelbox {
  background: var(--paper);
  border: var(--border) solid var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  box-shadow: var(--shadow);
  max-width: 720px;
  transition: box-shadow 0.3s ease;
}

.panelbox--wide {
  max-width: none;
}

@keyframes flash {
  0%,
  100% {
    box-shadow: var(--shadow);
  }
  30%,
  70% {
    box-shadow: 0 0 0 7px var(--gold), var(--shadow);
  }
}

.panelbox.is-flashing {
  animation: flash 1.05s ease;
}

/* ---------------------------------------------------------------- form ---- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 1.2rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field--full {
  grid-column: 1 / -1;
}

/* Exclusivity block: its own fields plus a shared fine-print note. */
.field-group {
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border: 2px dashed var(--navy);
  border-radius: var(--radius);
}

.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.field .hint {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
}

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}

input:hover,
select:hover,
textarea:hover {
  background: var(--cream-2);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--gold-deep);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.success {
  border: var(--border) solid var(--navy);
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--navy);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.2rem;
  animation: card-in 0.35s ease both;
}

.success h3 {
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
}

.success p {
  margin: 0;
  color: var(--navy);
}

.error-msg {
  color: #8c1d1d;
  font-size: 0.9rem;
  margin: 0.8rem 0 0;
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------- contact --- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}

.aside-card {
  background: var(--navy);
  color: var(--paper);
  border: var(--border) solid var(--navy-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  box-shadow: 7px 7px 0 var(--gold-deep);
}

.aside-card h3 {
  color: var(--gold);
  font-size: 1.35rem;
}

.aside-card ul {
  padding-left: 1.1rem;
  margin: 0 0 1rem;
  color: var(--muted-on-navy);
}

.aside-card li {
  margin-bottom: 0.45rem;
}

.aside-card a {
  color: var(--gold);
}

/* --------------------------------------------------- closing statement ---- */

/* Rides on .sky-band for the texture and atmosphere: the launchpad line is the
   relief beat between the navy licensing band and the navy footer. The gold top
   rule is what separates it from the band above. Sizing and spacing are
   untouched — only the field and the wordmark colour flipped. */
.closer {
  background: var(--sky);
  border-top-color: var(--gold);
  padding-block: clamp(3rem, 1.4rem + 6vw, 6rem);
}

.closer__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  /* --navy-deep on sky: 6.59:1 */
  color: var(--navy-deep);
  font-size: clamp(1.75rem, 0.85rem + 4.6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

.closer__tm {
  font-size: 0.4em;
  vertical-align: 0.95em;
  letter-spacing: 0;
}

/* -------------------------------------------------------------- footer ---- */

.footer {
  background: var(--navy-deep);
  color: var(--muted-on-navy);
  border-top: var(--border) solid var(--navy-deep);
  padding-block: clamp(2rem, 1rem + 3vw, 3rem);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.footer p {
  margin: 0;
  font-size: 0.95rem;
}

.footer a {
  color: var(--gold);
  font-weight: 700;
}

.footer .wordmark {
  color: var(--paper);
  margin-bottom: 0.6rem;
  display: inline-block;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .hero__grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__stack {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

@media (max-width: 620px) {
  html {
    scroll-padding-top: 130px;
  }

  .nav__inner {
    justify-content: center;
    text-align: center;
  }

  .nav__links {
    width: 100%;
    justify-content: center;
    gap: 1.1rem;
    row-gap: 0.35rem;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .card .btn,
  .urgency .btn {
    align-self: stretch;
    width: 100%;
  }

  .card__actions {
    align-items: stretch;
  }

  .card__actions .btn--link {
    align-self: flex-start;
    width: auto;
  }

  .step:nth-child(even),
  .step:nth-child(odd),
  .cards--trust .card:nth-child(even),
  .cards--trust .card:nth-child(odd),
  .license-perk:nth-child(even),
  .license-perk:nth-child(odd),
  .dashboard-mock,
  .perk {
    transform: none;
  }

  .license-perks {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-mock__topline {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-mock__stats {
    justify-content: flex-start;
  }

  .perk .dashboard-mock__stats p {
    white-space: normal;
  }

  .trend-panel__header,
  .student-detail__header {
    align-items: flex-start;
  }

  .trend-panel__legend {
    width: 100%;
  }

  .trend-chart {
    min-width: 0;
  }

  .cohort-table,
  .cohort-table tbody,
  .cohort-table tr,
  .cohort-table th,
  .cohort-table td {
    display: block;
    width: 100%;
  }

  .cohort-table {
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .cohort-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .cohort-table tr {
    margin-bottom: 0.65rem;
    padding: 0.65rem;
    background: var(--paper);
    border: 2px solid var(--navy);
    border-radius: 14px;
  }

  .cohort-table tr:last-child {
    margin-bottom: 0;
  }

  .cohort-table tbody th,
  .cohort-table td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(27, 45, 107, 0.18);
  }

  .cohort-table tbody th::before {
    content: "Student";
    color: var(--muted);
    font-weight: 600;
  }

  .cohort-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 600;
  }

  .cohort-table tr td:last-child {
    border-bottom: 0;
  }

  .progress {
    width: 100%;
    min-width: 0;
  }

  .student-trend {
    justify-content: flex-start;
  }

  .student-detail__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .perk .student-detail__summary p {
    border-radius: 12px;
  }

  .subject-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .subject-row__score,
  .subject-row__mastery {
    justify-content: space-between;
  }

  .mastery-bar {
    min-width: 0;
  }

  .perk .reserving-chip {
    grid-column: auto;
    justify-self: stretch;
    border-radius: 12px;
  }

  .tilt,
  .tilt-r {
    transform: rotate(-0.8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}