/* ==========================================================================
   SimpleGroup SmartAssign — marketing site
   --------------------------------------------------------------------------
   Hand-written CSS, no build step. The palette is the app's (DESIGN_TOKENS.md):
   indigo primary, amber accent, green/red for the keep-together and keep-apart
   constraints. The site uses them more boldly than the app does — a product
   page can carry colour that a tool a teacher stares at for an hour should not.
   Nothing is loaded from a third party: no webfonts, no CDN, no analytics.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Indigo — primary */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  /* Amber — accent, used sparingly */
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-700: #b45309;

  /* Green — keep-together, and the passing score tier */
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* Slate — text and chrome */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Roles */
  --primary: var(--indigo-600);
  --primary-hover: var(--indigo-700);
  --text-strong: var(--slate-900);
  --text: var(--slate-700);
  --text-muted: var(--slate-600);
  --text-supporting: var(--slate-500);
  --text-faint: var(--slate-400);
  --line: var(--slate-200);
  --line-strong: var(--slate-300);
  --ground: #ffffff;
  --ground-alt: var(--slate-50);
  --hover: var(--slate-100);

  /* Shape & rhythm */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --measure: 68rem;
  --gutter: 1.25rem;

  /* Layered shadows — one soft ambient, one tight contact. */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.04);
  --shadow: 0 4px 6px -2px rgb(15 23 42 / 0.05), 0 12px 24px -8px rgb(15 23 42 / 0.1);
  --shadow-lg: 0 8px 12px -4px rgb(15 23 42 / 0.06), 0 32px 56px -16px rgb(15 23 42 / 0.18);
  --shadow-indigo: 0 12px 32px -12px rgb(79 70 229 / 0.45);
}

@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

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

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

body {
  margin: 0;
  /* System UI only. The app can't use webfonts (school hardware, offline use)
     and a site in a different typeface would not look like the product. */
  font: 16px/1.6 system-ui, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-strong);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
figcaption {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Focus rings are never stripped — WCAG 2.1 AA, and districts ask for a VPAT. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon--16 {
  width: 16px;
  height: 16px;
}
.icon--18 {
  width: 18px;
  height: 18px;
}
.icon--20 {
  width: 20px;
  height: 20px;
}
.icon--24 {
  width: 24px;
  height: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--lg {
  padding: 0.8125rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-indigo);
}

.btn--primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.btn--secondary {
  background: var(--ground);
  border-color: var(--line-strong);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
  background: var(--hover);
  border-color: var(--slate-400);
  transform: translateY(-1px);
}

/* On the indigo CTA band the polarity inverts. */
.btn--on-indigo {
  background: #fff;
  color: var(--indigo-800);
}

.btn--on-indigo:hover {
  background: var(--indigo-50);
  transform: translateY(-1px);
}

.btn--on-indigo-ghost {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}

.btn--on-indigo-ghost:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.5);
}

.btn--on-indigo:focus-visible,
.btn--on-indigo-ghost:focus-visible {
  outline-color: #fff;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25rem;
  white-space: nowrap;
}

.badge--indigo {
  background: var(--indigo-50);
  border-color: var(--indigo-200);
  color: var(--indigo-700);
}

.badge--amber {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-700);
}

/* Score tiers: green ≥ 0.70, amber ≥ 0.40, red below — the engine's thresholds.
   The badge always carries the number, so colour is never the only signal. */
.badge--green {
  background: var(--green-100);
  border-color: var(--green-200);
  color: var(--green-700);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  box-shadow: var(--shadow-sm);
}

.card--pad {
  padding: 1.5rem;
}

/* Cards that sit in a grid and reward a cursor. Not links — just alive. */
.card--lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card--lift:hover {
  transform: translateY(-3px);
  border-color: var(--indigo-200);
  box-shadow: var(--shadow);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.chip {
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  background: var(--ground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--text);
}

/* Icon chips carry most of the site's colour. Three tints, rotated through
   the grids so a row of cards isn't a row of identical indigo squares. */
.icon-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--indigo-100);
  color: var(--indigo-700);
}

.icon-chip--lg {
  width: 3rem;
  height: 3rem;
}

.icon-chip--amber {
  background: var(--amber-100);
  color: var(--amber-700);
}

.icon-chip--green {
  background: var(--green-100);
  color: var(--green-700);
}

.icon-chip--solid {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-indigo);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 0.85);
  backdrop-filter: saturate(180%) blur(12px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.wordmark__glyph {
  color: var(--primary);
}

.wordmark__suffix {
  color: var(--text-faint);
  font-weight: 500;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 0.125rem;
}

.nav-link {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: var(--hover);
  color: var(--text-strong);
}

/* Current page. Weight and colour do the work, not just colour. */
.nav-link[aria-current='page'],
.nav-mobile__link[aria-current='page'] {
  background: var(--indigo-50);
  color: var(--indigo-700);
  font-weight: 600;
}

.nav-cta {
  margin-left: 0.5rem;
}

/* Mobile nav — a <details> disclosure, so it works without JavaScript. */
.nav-mobile__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-supporting);
  cursor: pointer;
  list-style: none;
}

.nav-mobile__toggle::-webkit-details-marker {
  display: none;
}

.nav-mobile__toggle:hover {
  background: var(--hover);
}

.nav-mobile[open] .nav-mobile__toggle {
  background: var(--indigo-50);
  color: var(--indigo-700);
}

/* Anchored to the bottom of the sticky header (its nearest positioned ancestor)
   so the panel drops below the bar rather than over it. */
.nav-mobile__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.75rem var(--gutter) 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  box-shadow: var(--shadow);
}

.nav-mobile__list {
  display: grid;
  gap: 0.25rem;
}

.nav-mobile__link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--text);
}

.nav-mobile__link:hover {
  background: var(--hover);
}

.nav-mobile__cta {
  margin-top: 0.75rem;
}

/* Raised to 1100px when "How We Group" made it six links plus the CTA: below
   this the row wraps into the wordmark. A tablet is better served by the
   disclosure menu than by a cramped row anyway. */
@media (min-width: 1100px) {
  .nav-desktop {
    display: flex;
  }

  .nav-mobile {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding: 4.5rem var(--gutter);
}

.section--alt {
  background: var(--ground-alt);
  border-block: 1px solid var(--line);
}

/* A tinted band. Used where a section needs to read as a statement rather than
   as more page — the privacy block, mainly. */
.section--tint {
  background: linear-gradient(180deg, var(--indigo-50), #fff 70%);
  border-block: 1px solid var(--indigo-100);
}

/* The workflow band, carrying more colour than the plain slate alternate: an
   indigo wash deepening through the middle, with the same dot grid as the hero
   so the two read as part of one system. The step cards are white, which keeps
   the contrast inside them untouched. */
.section--workflow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--indigo-50) 0%, var(--indigo-100) 55%,
    var(--indigo-50) 100%);
  border-block: 1px solid var(--indigo-200);
}

.section--workflow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(79 70 229 / 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, rgb(0 0 0 / 0.8), transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 40%, rgb(0 0 0 / 0.8), transparent 75%);
  pointer-events: none;
}

.section--workflow > .section__inner {
  position: relative;
  z-index: 1;
}

/* The step cards stay plain white. Tinting them to match their icon chips was
   tried and dropped: with the band already indigo, coloured cards turned the
   section into competing washes and the icon chips lost their job as the one
   spot of colour per card. The band carries the colour here; the cards don't. */

.section__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.section__head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Uppercase kicker above a section heading — the single cheapest thing that
   stops a stack of headings and paragraphs reading like a blog post. */
.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow--amber {
  color: var(--amber-700);
}

.section__title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-strong);
}

.section__description {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .section {
    padding: 6rem var(--gutter);
  }

  .section__title {
    font-size: 2.125rem;
  }

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

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 4rem var(--gutter) 4.5rem;
  background: linear-gradient(180deg, var(--indigo-50) 0%, #fff 55%);
}

/* Two decorative layers: a soft indigo glow behind the headline, and a dot
   grid that fades out before it reaches the copy. Both are pure CSS. */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(50% 60% at 30% 50%, rgb(99 102 241 / 0.22), transparent 70%),
    radial-gradient(40% 50% at 80% 20%, rgb(245 158 11 / 0.14), transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(79 70 229 / 0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.5), transparent 60%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.5), transparent 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 3rem;
  max-width: var(--measure);
  margin: 0 auto;
}

.hero__title {
  margin-top: 1.25rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text-strong);
}

/* One clause in indigo. Enough colour to make the headline a graphic. */
.hero__title em {
  font-style: normal;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   Rotating tagline
   --------------------------------------------------------------------------
   A stack of words slid upward one step at a time inside a single-line window.
   No JavaScript: the whole thing is one keyframe animation on a transform, which
   the compositor handles without laying the page out again. The words hold still
   for most of each step and move quickly between them, so it reads as a series
   of statements rather than a constant crawl.
   -------------------------------------------------------------------------- */

/* The hero's right-hand column: the product tour window with the rotating
   tagline beneath it. Wrapped so the two stay one grid item. */
.hero__media {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  width: 100%;
}

/* The label above the tour window and the rotating tagline below it are the same
   component: lead word in slate, payload in indigo, same size and weight. Only
   one of them moves. */

.tagline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  margin-top: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-supporting);
}

.tagline__lead {
  color: var(--text-supporting);
}

/* Runs after the indigo word, in the same slate as the lead, so "every" is the
   only accented word in the line. */
.tagline__tail {
  color: var(--text-supporting);
}

.tagline__window {
  display: block;
  /* Matches the line box exactly, so only one word is ever visible. */
  height: 1.3em;
  overflow: hidden;
}

.tagline__words {
  display: block;
  animation: tagline-rotate 9s cubic-bezier(0.7, 0, 0.25, 1) infinite;
}

.tagline__word {
  display: block;
  height: 1.3em;
  color: var(--primary);
}

/* Four steps for three words: the fourth is the first again, so the loop from
   100% back to 0% lands on identical content and never visibly snaps. */
@keyframes tagline-rotate {
  0%,
  28% {
    transform: translateY(0);
  }
  33.3%,
  61.3% {
    transform: translateY(-25%);
  }
  66.6%,
  94.6% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-75%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tagline__words {
    animation: none;
    transform: none;
  }
}

@media (min-width: 640px) {
  .tagline {
    font-size: 1.625rem;
  }
}

/* Visually hidden, still read aloud. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.hero__lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* A quiet aside under a block of content. Lived in the hero originally; it reads
   better as a footnote to the workflow than as a claim competing with the
   headline. */
.note {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--text-supporting);
}

.note__glyph {
  color: var(--primary);
}

@media (min-width: 640px) {
  .hero {
    padding: 6rem var(--gutter) 6.5rem;
  }

  .hero__title {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Video placeholder
   --------------------------------------------------------------------------
   A framed 16:9 well standing in for the product tour. Swap the .video__well
   contents for a <video controls poster="…"> — the frame and caption stay.
   -------------------------------------------------------------------------- */

.video {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--ground);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Window chrome
   --------------------------------------------------------------------------
   Shared by the product-tour placeholder and the group-results screenshot. The
   title bar is what tells a reader "this is the application", without which the
   results card just looks like more of the page — it is built from the same
   cards and badges as everything around it, so nothing else distinguishes it.
   -------------------------------------------------------------------------- */

.window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--slate-100));
}

.window__dots {
  display: flex;
  flex: none;
  gap: 0.375rem;
}

.window__dots span {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 9999px;
  background: var(--slate-300);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.06);
}

.window__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-supporting);
}

.window__meta {
  flex: none;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.video__well {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--indigo-900), var(--indigo-600) 55%, var(--indigo-500));
  color: #fff;
  text-align: center;
  padding: 1.5rem;
}

.video__well::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.7;
}

.video__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.video__play {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.35);
  color: #fff;
  backdrop-filter: blur(4px);
}

.video__play .icon {
  fill: currentColor;
  margin-left: 3px;
}

.video__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.video__note {
  font-size: 0.875rem;
  color: var(--indigo-200);
}

/* --------------------------------------------------------------------------
   Photography
   --------------------------------------------------------------------------
   Stock photographs of classrooms. They are illustrative and must never be
   captioned or framed as SimpleGroup customers — no invented school names, no
   quotes attributed to the people in them.
   -------------------------------------------------------------------------- */

.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A wide photograph with an indigo wash and a line of copy over it. */
.media-band {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.media-band__frame {
  aspect-ratio: 21 / 9;
  min-height: 18rem;
}

/* A photograph carrying no copy — most of them. No wash, nothing over it. */
.media-band--plain::after {
  content: none;
}

.media-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(30 27 75 / 0.92) 0%, rgb(49 46 129 / 0.72) 45%,
    rgb(49 46 129 / 0.15) 100%);
  pointer-events: none;
}

.media-band__copy {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  max-width: 34rem;
  padding: 2rem;
  color: #fff;
}

.media-band__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.media-band__body {
  margin-top: 0.75rem;
  color: var(--indigo-100);
}

@media (min-width: 640px) {
  .media-band__copy {
    padding: 3rem;
  }

  .media-band__title {
    font-size: 2rem;
  }
}

/* A photograph beside a column of text. */
.media-split {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

/* 3:2 matches the source files, so nothing gets cropped out of frame — a
   portrait ratio here cut the subject in half. */
.media-split__frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
  .media-split {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   Group-results showcase
   -------------------------------------------------------------------------- */

.showcase {
  display: grid;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .showcase {
    grid-template-columns: 1fr 1.1fr;
  }
}

.showcase__stage {
  position: relative;
}

/* The photograph fills the right of the section, full bleed to its edges, with
   the results card sitting on top of it. Blurred and washed so it stays a
   background: at full sharpness it fights the card for attention and the chips
   inside the card stop being readable where the two overlap. */
.section--output {
  position: relative;
  overflow: hidden;
}

.section--output > .section__inner {
  position: relative;
  z-index: 1;
}

.showcase__backdrop {
  display: none;
}

@media (min-width: 1024px) {
  /* Anchored to the centre line, not to a share of the viewport. The showcase
     grid is 1fr / 1.1fr with a 3rem gap, which puts the start of the right-hand
     column within a hair of 50% — so the backdrop begins where the results card
     begins and never reaches back under the text. A percentage width crept left
     over the copy as the window got wider. */
  .showcase__backdrop {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0 0 0 58%;
    /* Required: the image below is scaled past its box, and without this it
       spills out beyond the wash that is supposed to cover it. */
    overflow: hidden;
  }

  .showcase__backdrop .photo {
    filter: blur(7px) saturate(0.9);
    /* Scaled up so the blur's soft edge never reaches the visible boundary. */
    transform: scale(1.1);
  }

  /* An even indigo wash, no white fade — the photograph reads as a backdrop
     without being washed out at one end. */
  .showcase__backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(30 27 75 / 0.3);
  }

  .showcase__stage .preview {
    position: relative;
    z-index: 1;
  }
}

/* Reads as an application window rather than another card on the page: title
   bar, a hairline ring inside the border for a screen-like edge, and enough
   elevation to sit clearly above the section. Deliberately not skewed or tilted
   in 3D — this is the interface a district is evaluating, and a perspective
   transform makes the balance scores and student names harder to read for the
   sake of looking like a product shot. */
.preview {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--ground);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9) inset, var(--shadow-lg);
  overflow: hidden;
}

.preview__caption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--slate-50);
  font-size: 0.75rem;
  color: var(--text-faint);
}

.preview__body {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--ground-alt);
}

.preview__group {
  padding: 1rem;
}

.preview__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.preview__group-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   Page header (every page except home)
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  overflow: hidden;
  padding: 3.5rem var(--gutter) 3rem;
  background: linear-gradient(180deg, var(--indigo-50), #fff);
  border-bottom: 1px solid var(--line);
}

.page-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(79 70 229 / 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.6), transparent 75%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.6), transparent 75%);
  pointer-events: none;
}

.page-head__inner {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
}

.page-head__title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.page-head__lede {
  max-width: 42rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .page-head {
    padding: 5rem var(--gutter) 4rem;
  }

  .page-head__title {
    font-size: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Small shared pieces
   -------------------------------------------------------------------------- */

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2rem;
  font-weight: 600;
  color: var(--primary);
}

.link-more:hover {
  color: var(--primary-hover);
}

.link-more .icon {
  transition: transform 0.15s ease;
}

.link-more:hover .icon {
  transform: translateX(3px);
}

.text-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-link:hover {
  color: var(--primary-hover);
}

.prose {
  max-width: 42rem;
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose p {
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.prose strong {
  color: var(--text-strong);
  font-weight: 600;
}

/* A pulled-aside point — amber rule on the left, no box. */
.callout {
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-left: 3px solid var(--amber-500);
  background: linear-gradient(90deg, var(--amber-50), transparent 60%);
  color: var(--text-muted);
}

.marker-list {
  display: grid;
  gap: 0.75rem;
}

.marker-list > li {
  position: relative;
  padding-left: 1.375rem;
  color: var(--text-muted);
}

.marker-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6875rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--indigo-400);
}

.stack-1 {
  margin-top: 1rem;
}

.stack-2 {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Steps and features
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------------
   A connected sequence rather than a grid of cards. Four bordered boxes read as
   index cards and carry no sense of order; a numbered node with a rule running
   to the next one says "first this, then that" without a word of copy. The text
   sits directly on the section — no second surface, no second border.
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 2.25rem;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}

.step__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--step-bg);
  color: var(--step-fg);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.04);
}

/* Colour rotates indigo, amber, green — the same tinted chips used on the
   feature cards: a 100-level fill under a 700-level glyph. Each step also
   declares the two ends of the rule leaving it, so a connector fades from this
   step's colour into the next one's. */
.step:nth-child(3n + 1) {
  --step-bg: var(--indigo-100);
  --step-fg: var(--indigo-700);
  --step-from: var(--indigo-200);
  --step-to: var(--amber-200);
}

.step:nth-child(3n + 2) {
  --step-bg: var(--amber-100);
  --step-fg: var(--amber-700);
  --step-from: var(--amber-200);
  --step-to: var(--green-200);
}

.step:nth-child(3n) {
  --step-bg: var(--green-100);
  --step-fg: var(--green-700);
  --step-from: var(--green-200);
  --step-to: var(--indigo-200);
}

/* The rule to the next step. Stacked layout: vertical, from below this marker
   down into the next one. Removed on the last step, which leads nowhere. */
.step::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: -2.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--step-from), var(--step-to));
}

.step:last-child::before {
  content: none;
}

/* min-width:0 so a long word wraps instead of forcing the grid column wider. */
.step__text {
  min-width: 0;
}

.step__number {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.step__title {
  margin-top: 0.375rem;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.step__body {
  margin-top: 0.5rem;
  color: var(--text-muted);
}

/* Two up, marker above its text. No connectors here: with the sequence wrapping
   onto a second row, a rule from step 2 to step 3 would point the wrong way. */
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }

  .step {
    display: block;
  }

  .step::before {
    content: none;
  }

  .step__marker {
    margin-bottom: 1.25rem;
  }
}

/* All four in a row, connected left to right. */
@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.75rem;
  }

  .step::before {
    content: '';
    top: 1.5rem;
    bottom: auto;
    left: 3.5rem;
    right: -1.75rem;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--step-from), var(--step-to));
  }
}

.feature__glyph {
  color: var(--primary);
}

.feature__title {
  margin-top: 1.125rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.feature__body {
  margin-top: 0.5rem;
  color: var(--text-muted);
}

/* A card heading with no icon chip above it. Kept as a class rather than an
   inline style: the CSP in _headers is style-src 'self', which blocks style
   attributes as well as <style> blocks. */
.feature__title--flush {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Privacy block
   -------------------------------------------------------------------------- */

.privacy {
  padding: 2rem;
  border-color: var(--indigo-200);
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .privacy {
    padding: 2.5rem;
  }
}

.privacy__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.privacy__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.privacy__lede {
  max-width: 44rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  color: var(--text-muted);
}

.checklist {
  display: grid;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

.checklist > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text);
}

.checklist__glyph {
  margin-top: 0.3125rem;
  color: var(--green-600);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
}

.faq__item {
  transition: border-color 0.15s ease;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--primary);
}

.faq__marker {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--indigo-50);
  color: var(--primary);
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.faq__item[open] .faq__marker {
  transform: rotate(45deg);
  background: var(--indigo-100);
}

.faq__answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: 4.5rem var(--gutter);
  background: linear-gradient(135deg, var(--indigo-800), var(--indigo-600) 60%, var(--indigo-500));
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 70% at 85% 15%, rgb(245 158 11 / 0.28), transparent 65%),
    radial-gradient(40% 60% at 10% 90%, rgb(255 255 255 / 0.14), transparent 70%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.cta__title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
}

.cta__lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--indigo-100);
}

/* The address is shown, not linked — there is no mailto: anywhere on the site. */
.cta__address {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.1);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.cta__address + .cta__actions {
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .cta {
    padding: 6rem var(--gutter);
  }

  .cta__title {
    font-size: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 3rem var(--gutter);
  background: var(--slate-900);
  color: var(--slate-400);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: var(--measure);
  margin: 0 auto;
}

.site-footer__brand {
  display: grid;
  gap: 0.625rem;
  justify-items: start;
}

.site-footer__wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}

.site-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--slate-400);
  overflow-wrap: anywhere;
}

.site-footer .wordmark__glyph {
  color: var(--indigo-400);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--slate-400);
}

.site-footer__nav a:hover {
  color: #fff;
}

.site-footer__nav a:focus-visible {
  outline-color: #fff;
}

.site-footer__copy {
  font-size: 0.875rem;
  color: var(--slate-500);
}