:root {
  color-scheme: light;
  /* Primary navy sampled from the LearningMatters dashboard header. */
  --ink: #001b3e;
  --body-ink: #465265;
  --muted: #647184;
  --line: #dce2e9;
  --blue: #086dcc;
  --paper: #fff;
  --header-height: 108px;
  --hero-lift: clamp(24px, 4svh, 40px);
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.shell { width: min(1440px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 3; top: 12px; left: 20px; padding: 12px 16px; background: var(--ink); color: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; min-height: var(--header-height); padding-block: 24px; }
.wordmark { font-size: 1.7rem; font-weight: 650; letter-spacing: -.045em; text-decoration: none; }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button { min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 18px; font-size: .9375rem; font-weight: 550; line-height: 1.35; }
.button-primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.button-secondary { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.button:disabled { opacity: 1; cursor: not-allowed; }

.hero {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-height));
  /* Balance the header, then lift the headline slightly above centre. */
  padding-block: calc(40px - var(--hero-lift)) calc(40px + var(--header-height) + var(--hero-lift));
  text-align: center;
}
.hero h1 { margin: 0; font-size: clamp(3rem, 5.8vw, 5.25rem); font-weight: 550; letter-spacing: -.055em; line-height: 1.07; }
.hero-title-line { display: block; }
.handwriting-line { display: block; width: 4.4em; max-width: 100%; margin: .06em auto 0; line-height: 1; }
.hero-handwriting { display: block; width: 100%; height: auto; overflow: visible; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.journey { max-width: 1120px; padding-bottom: 0; }
.journey-figure { margin: 0; }
.journey-stage { position: relative; }
.journey-image { display: block; width: 100%; height: auto; max-width: 100%; }
.workflow-motion { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.workflow-marker { filter: drop-shadow(0 2px 3px rgb(16 28 50 / .18)); }
.marker-disc { fill: var(--ink); stroke: var(--paper); stroke-width: 3.5; }
.marker-document, .marker-status { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marker-status { display: none; stroke-width: 3.5; }
.workflow-marker[data-kind="status"] .marker-document { display: none; }
.workflow-marker[data-kind="status"] .marker-status { display: inline; }
.workflow-hitarea { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.workflow-hitarea:focus-visible { outline-offset: -3px; border-radius: 6px; }

.dashboard-previews { display: grid; gap: 44px; padding-top: 44px; padding-bottom: 64px; }
.dashboard-figure { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; }
.dashboard-scroll { overflow-x: auto; scrollbar-color: #9eacbe #f1f4f7; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.dashboard-full-image { display: block; min-width: 960px; }
.dashboard-full-image:focus-visible { outline-offset: -4px; }
.dashboard-image { display: block; width: 100%; height: auto; }

@media (max-width: 1175px) {
  .shell { width: calc(100% - 56px); }
}
@media (max-width: 640px) {
  :root { --header-height: 94px; }
  .shell { width: calc(100% - 36px); }
  .site-header { padding-block: 22px; gap: 16px; }
  .wordmark { font-size: 1.5rem; }
  .button { padding-inline: 12px; font-size: .875rem; }
  .hero h1 { font-size: clamp(2.35rem, 10.4vw, 3.75rem); }
  .dashboard-previews { gap: 28px; padding-top: 32px; padding-bottom: 40px; }
}
@media (max-width: 480px) {
  :root { --header-height: 136px; }
  .site-header { flex-direction: column; align-items: flex-start; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .handwriting-stroke { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
@media print {
  .shell { width: 100%; }
  .site-actions, .skip-link, .workflow-hitarea, .workflow-motion { display: none !important; }
  .hero { min-height: 0; padding-block: 16px; }
  .hero h1 { font-size: 32pt; }
  .handwriting-stroke { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .journey-image { min-width: 0; width: 100%; }
  .dashboard-scroll { overflow: visible; }
  .dashboard-full-image { min-width: 0; }
  .dashboard-figure { break-inside: avoid; }
}