/* =============================================================================
   Solar Operations Maturity Institute (SOM Institute) — "Ascent"
   One stylesheet, mobile-first. Design tokens first; everything below reads
   from them. No framework, no build step.
   ============================================================================= */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Dawn palette: night → plum → rose → coral → gold */
  --night: #1E1236;
  --plum-900: #2A1748;   /* headings, dark surfaces, text on gold */
  --plum-700: #3E1F5F;
  --rose: #B23A64;
  --coral: #EF7B54;      /* decoration only: 2.6:1 on cream, never text */
  --gold: #F7B840;       /* the survey button; always carries plum text */
  --sun: #FFD27A;        /* highlights and focus rings on dark */

  /* The six levels, 0 → 5: night to full sun. Every level badge, step and
     pedestal on the site takes its colour from here. 0–3 carry white text,
     4–5 carry plum text (all ≥ 5.7:1). */
  --lvl-0: #2D1B4E;
  --lvl-1: #4A2266;
  --lvl-2: #7A2B74;
  --lvl-3: #B23A64;
  --lvl-4: #EF7B54;
  --lvl-5: #F7B840;

  /* Light surfaces and ink */
  --cream: #FFF8F0;      /* page */
  --sand: #F8EBDD;       /* alternate band */
  --peach: #FDEBDD;      /* hover and soft fills */
  --card: #FFFFFF;
  --line: #EBDDCF;
  --ink: #22163A;        /* body text, 16:1 on cream */
  --ink-2: #4A3D5E;      /* secondary text, 9.4:1 on cream */
  --muted: #675A79;      /* small print, 6.0:1 on cream, 5.4:1 on sand */
  --accent: #B23A64;     /* links and eyebrows, 5.4:1 on cream, 4.9:1 on sand */
  --on-dark: #FFFFFF;
  --on-dark-2: #DCD0E8;  /* secondary text on the dawn panels, ≥ 8.8:1 */

  --focus-light: #2A1748;
  --focus-dark: #FFD27A;

  /* Type: Outfit for display, Plus Jakarta Sans for reading (the survey's own
     face, so the hand-over to the survey feels seamless). Both fall back to
     the system's best sans when offline. */
  --font-display: "Outfit", "Avenir Next", "Avenir", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape and depth: rounded everywhere, pills for actions */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgb(42 23 72 / .05), 0 12px 32px -14px rgb(42 23 72 / .18);
  --shadow-float: 0 2px 6px rgb(30 18 54 / .18), 0 26px 50px -14px rgb(30 18 54 / .55);

  /* Layout */
  --wrap: 1180px;
  --wrap-text: 46rem;
  --gutter: clamp(16px, 4.5vw, 40px);
  --inset: clamp(8px, 2vw, 24px);   /* gap between a dawn panel and the viewport edge */
  --section: clamp(64px, 9vw, 120px);

  /* The floating survey dock. --dock-space is what the page reserves at its
     foot so the dock never sits over the last of the content. */
  --dock-h: 64px;
  --dock-gap: 10px;
  --dock-space: calc(var(--dock-h) + 2 * var(--dock-gap) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 720px) {
  :root { --dock-h: 72px; --dock-gap: 18px; }
}

/* Level classes: put .l0 … .l5 on anything that represents a level. */
.l0 { --lvl: 0; --c: var(--lvl-0); --c-ink: #FFFFFF; }
.l1 { --lvl: 1; --c: var(--lvl-1); --c-ink: #FFFFFF; }
.l2 { --lvl: 2; --c: var(--lvl-2); --c-ink: #FFFFFF; }
.l3 { --lvl: 3; --c: var(--lvl-3); --c-ink: #FFFFFF; }
.l4 { --lvl: 4; --c: var(--lvl-4); --c-ink: var(--plum-900); }
.l5 { --lvl: 5; --c: var(--lvl-5); --c-ink: var(--plum-900); }

/* 2. Base -------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
  /* anchors and keyboard focus land clear of the floating dock */
  scroll-padding-bottom: calc(var(--dock-space) + 16px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--plum-900);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
strong, b { font-weight: 700; }

a {
  color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--plum-900); }

/* Links inside sentences keep their text layout but get a 44px-tall hit area. */
p a:not(.btn):not(.text-link),
li a:not(.btn):not(.text-link):not([class]) { padding-block: 13px; }
.site-nav a,
.footer__nav a { padding-block: 0; }

:focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 3px;
}
.on-dark :focus-visible { outline-color: var(--focus-dark); }

::selection { background: var(--sun); color: var(--plum-900); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: -200px;
  left: 12px;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--plum-900);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* 3. Layout ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--text { max-width: calc(var(--wrap-text) + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section--sand { position: relative; background: var(--sand); }

/* Sand bands rise out of the cream page in six low steps, the horizon's silhouette. */
.band-steps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: flex;
  align-items: flex-end;
  height: 30px;
  pointer-events: none;
}
.band-steps i {
  flex: 1 1 0;
  height: calc(5px + var(--i) * 5px);
  margin-left: -1px;
  border-top-left-radius: 10px;
  background: var(--sand);
}
.band-steps i:first-child { margin-left: 0; }
.band-steps i:nth-child(1) { --i: 0; }
.band-steps i:nth-child(2) { --i: 1; }
.band-steps i:nth-child(3) { --i: 2; }
.band-steps i:nth-child(4) { --i: 3; }
.band-steps i:nth-child(5) { --i: 4; }
.band-steps i:nth-child(6) { --i: 5; }
@media (min-width: 720px) {
  .band-steps { height: 44px; }
  .band-steps i { height: calc(4px + var(--i) * 8px); border-top-left-radius: 14px; }
}
.section--tight { padding-block: calc(var(--section) * .7); }
.section:not(.section--sand) + .section:not(.section--sand) { padding-top: 0; }

.section-head { max-width: 48rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2,
.h2 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem); }
.h3 { font-size: 1.25rem; }
.h2 + .lede { margin-top: 16px; }
.section-head .lede { margin-top: 16px; }

.lede {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Eyebrow: a small staircase before the label, the same six steps as the mark */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 13px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Crect x='0' y='10.5' width='3.4' height='2.5' rx='1' fill='%232D1B4E'/%3E%3Crect x='4.1' y='8.5' width='3.4' height='4.5' rx='1' fill='%234A2266'/%3E%3Crect x='8.2' y='6.5' width='3.4' height='6.5' rx='1' fill='%237A2B74'/%3E%3Crect x='12.3' y='4.5' width='3.4' height='8.5' rx='1' fill='%23B23A64'/%3E%3Crect x='16.4' y='2.5' width='3.4' height='10.5' rx='1' fill='%23EF7B54'/%3E%3Crect x='20.5' y='.5' width='3.4' height='12.5' rx='1' fill='%23F7B840'/%3E%3C/svg%3E");
}
.on-dark .eyebrow { color: var(--sun); }
.on-dark .eyebrow::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cg fill='%23FFD27A'%3E%3Crect x='0' y='10.5' width='3.4' height='2.5' rx='1' opacity='.35'/%3E%3Crect x='4.1' y='8.5' width='3.4' height='4.5' rx='1' opacity='.48'/%3E%3Crect x='8.2' y='6.5' width='3.4' height='6.5' rx='1' opacity='.61'/%3E%3Crect x='12.3' y='4.5' width='3.4' height='8.5' rx='1' opacity='.74'/%3E%3Crect x='16.4' y='2.5' width='3.4' height='10.5' rx='1' opacity='.87'/%3E%3Crect x='20.5' y='.5' width='3.4' height='12.5' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* 4. Buttons ----------------------------------------------------------------- */
.btn {
  --btn-bg: var(--plum-900);
  --btn-fg: #FFFFFF;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.4em;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1.2 var(--font-text);
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { color: var(--btn-fg); }
.btn .ico { flex: none; width: 1.15em; height: 1.15em; transition: transform .2s ease; }
.btn:hover .ico { transform: translateX(3px); }

.btn--sun {
  --btn-bg: var(--gold);
  --btn-fg: var(--plum-900);
  box-shadow: 0 8px 22px -10px rgb(247 184 64 / .95);
}
.btn--sun:hover { --btn-bg: #FFC95E; }

.btn--plum:hover { --btn-bg: var(--plum-700); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #FFFFFF;
  --btn-bd: rgb(255 255 255 / .6);
}
.btn--ghost-light:hover { --btn-bg: rgb(255 255 255 / .1); --btn-bd: #FFFFFF; }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--plum-900);
  --btn-bd: var(--plum-900);
}
.btn--quiet:hover { --btn-bg: var(--peach); }

.btn--lg { min-height: 56px; padding-inline: 1.7em; font-size: 1.0625rem; }

/* A survey link only gets its href from site.js; until then it is not a link. */
a[data-survey-link]:not([href]) { cursor: default; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  font-weight: 700;
  color: var(--accent);
}
.text-link .ico { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.text-link:hover .ico { transform: translateX(3px); }

/* 5. Header and navigation --------------------------------------------------- */
.site-header { position: relative; z-index: 30; }

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 72px;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  color: var(--ink);
  text-decoration: none;
}
/* The lockup is one SVG: the staircase mark and the SOMInstitute wordmark,
   210 x 40 units. 184 px wide is 35 px tall, the height the logo has always
   had; below 350 px it is 150 px wide, so the menu button still fits beside it. */
.brand__logo { width: 150px; height: auto; }
/* The full name in small type, on two lines, beside the wordmark. Its four
   initials are set in rose: they are where the wordmark's S, O, M and I
   come from. Decorative (aria-hidden); the link's label carries the name. */
.brand__full {
  display: none;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--muted);
}
.brand__full b { color: var(--accent); font-weight: 800; }

.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--plum-900);
  font: 700 .9375rem/1 var(--font-text);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

.site-nav { flex-basis: 100%; }
.site-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 14px;
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { background: var(--peach); color: var(--plum-900); }
.site-nav a[aria-current="page"] {
  background: var(--sand);
  color: var(--plum-900);
  box-shadow: inset 3px 0 0 var(--accent);
}
.site-nav a[aria-current="page"]:hover { background: var(--peach); }
.site-nav .site-nav__cta { margin-top: 8px; }
.site-nav .site-nav__cta a {
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--plum-900);
  font-weight: 700;
}
.site-nav .site-nav__cta a:hover { background: #FFC95E; }

.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

@media (min-width: 350px) {
  .brand__logo { width: 184px; }
}

@media (min-width: 560px) {
  .brand__full { display: block; }
}

@media (min-width: 940px) {
  .site-header__bar { flex-wrap: nowrap; min-height: 84px; }
  .js .nav-toggle { display: none; }
  .site-nav,
  .js .site-nav { display: block; flex-basis: auto; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 4px; padding: 0; }
  .site-nav a { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); }
  .site-nav a[aria-current="page"] { box-shadow: none; }
  .site-nav .site-nav__cta { margin: 0 0 0 10px; }
  .site-nav .site-nav__cta a { padding: 0 20px; }
}

/* Five nav items since Model history joined (2026-10-07). Below about 1080 px
   the inline nav and the full name no longer fit side by side, so the full name
   steps aside there. It is decorative (aria-hidden); the logo link carries the
   name for screen readers. With the SOMInstitute lockup the header needs about
   935 px of content width with the full name and about 795 px without it
   (measured with Plus Jakarta Sans); 1080 px leaves about 50 px to spare. */
@media (min-width: 940px) and (max-width: 1079.98px) {
  .brand__full { display: none; }
}

/* 6. Dawn panels: the hero and the closing band ------------------------------- */
.dawn { padding-inline: var(--inset); }

.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1320px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  color: var(--on-dark);
  background:
    radial-gradient(70% 62% at 84% 100%, rgb(122 43 116 / .55) 0%, rgb(122 43 116 / 0) 72%),
    linear-gradient(180deg, #1E1236 0%, #261443 48%, #33184E 100%);
}
@media (min-width: 720px) {
  .panel { border-radius: var(--r-xl); }
}

.panel__inner { position: relative; z-index: 2; padding: 36px 24px 0; }
.panel h1,
.panel h2 { color: #FFFFFF; }
.panel .lede,
.panel p { color: var(--on-dark-2); }
.panel a:not(.btn) { color: #FFFFFF; }
.panel a:not(.btn):hover { color: var(--sun); }

/* The last stars of the night, high in the empty part of the sky. Decorative.
   Shown only on wide screens, where the copy sits left and the right half of the
   panel is open sky; never behind text (the closing band's copy is centred). */
.stars {
  display: none;
  position: absolute;
  z-index: 0;
  top: 18px;
  right: 3%;
  width: min(540px, 44%);
  pointer-events: none;
  user-select: none;
}
@media (min-width: 1200px) {
  .stars { display: block; }
  .page-hero .stars { width: min(420px, 36%); }
  .closing .stars { display: none; }
}

/* The sun rises behind the steps. Decorative. */
.sunrise {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* The horizon: the page itself rising into the dawn in six steps, 0 → 5.
   Each step is cream (the page colour), so the panel's lower edge becomes a
   staircase. On the home page the steps carry the spine's six names. */
.horizon {
  --h0: 22px;
  --rise: 11px;
  --r-step: 12px;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.horizon > li {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--h0) + var(--lvl) * var(--rise));
  margin-left: -1px;               /* no hairline seams between steps */
  padding: 5px 6px 0 10px;
  border-top-left-radius: var(--r-step);
  background: var(--cream);
  color: var(--ink);
}
.horizon > li:first-child { margin-left: 0; }
.horizon > li:last-child { border-top-right-radius: 0; }
.horizon__n {
  display: block;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--plum-900);
}
.horizon__label {
  /* named on wide screens, read by screen readers everywhere */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 720px) {
  .horizon { --h0: 30px; --rise: 15px; --r-step: 16px; }
  .horizon > li { padding: 8px 10px 0 14px; }
  .horizon__n { font-size: .9375rem; }
}

@media (min-width: 1100px) {
  .horizon--named { --h0: 50px; --rise: 20px; --r-step: 22px; }
  .horizon--named > li { padding: 12px 12px 0 18px; }
  .horizon--named .horizon__n { display: inline; margin-right: 6px; }
  .horizon--named .horizon__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-family: var(--font-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink-2);
  }
}

/* Home hero */
.hero { padding-top: 4px; }
.hero__copy { max-width: 40rem; padding-bottom: 236px; }
.hero h1 {
  font-size: clamp(2.375rem, 1.45rem + 4.1vw, 4.125rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.hero h1 .sunlit { display: block; color: var(--sun); }
.hero .lede { margin-top: 22px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .sunrise { width: 300px; right: -78px; bottom: -76px; }

@media (min-width: 720px) {
  .panel__inner { padding: 64px 48px 0; }
  .hero__copy { padding-bottom: 270px; }
  .hero .sunrise { width: 400px; right: -40px; bottom: -110px; }
}
@media (min-width: 1024px) {
  .panel__inner { padding: 72px 64px 0; }
}
@media (min-width: 1200px) {
  /* wide enough for the sun to rise beside the copy rather than below it */
  .hero__copy { padding-bottom: 230px; }
  .hero .sunrise { width: 600px; right: 2%; bottom: -170px; }
}

/* Inner-page dawn panel: shorter, the steps unnamed */
.page-hero .panel__inner { padding-bottom: 0; }
.page-hero__copy { max-width: 42rem; padding-bottom: 150px; }
.page-hero h1 {
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.page-hero .lede { margin-top: 18px; }
.page-hero .sunrise { width: 230px; right: -60px; bottom: -64px; }
.page-hero .horizon { --h0: 14px; --rise: 8px; --r-step: 10px; }
@media (min-width: 720px) {
  .page-hero__copy { padding-bottom: 200px; }
  .page-hero .sunrise { width: 300px; right: -20px; bottom: -90px; }
  .page-hero .horizon { --h0: 20px; --rise: 12px; --r-step: 16px; }
}
@media (min-width: 1200px) {
  /* the copy sits left and the sun right, so the copy needs no clearance */
  .page-hero__copy { padding-bottom: 150px; }
  .page-hero .sunrise { width: 340px; right: 3%; bottom: -104px; }
}

/* Closing band: the steps climb from both sides to a summit under the sun */
.closing { padding-block: clamp(8px, 3vw, 32px) 0; }
.closing .panel__inner { padding-top: 56px; text-align: center; }
.closing__copy { max-width: 34rem; margin-inline: auto; padding-bottom: 236px; }
.closing h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); font-weight: 700; letter-spacing: -0.025em; }
.closing p { margin-top: 14px; }
.closing .btn { margin-top: 26px; }
.closing .sunrise { width: 340px; left: 50%; bottom: -96px; transform: translateX(-50%); }
.horizon--peak { --h0: 14px; --rise: 10px; --r-step: 6px; }
.horizon--peak > li { padding: 0; }
.horizon--peak > li.down { border-top-left-radius: 0; border-top-right-radius: var(--r-step); }
.horizon--peak > li.summit { border-top-right-radius: var(--r-step); }
@media (min-width: 720px) {
  .closing .panel__inner { padding-top: 80px; }
  .closing__copy { padding-bottom: 270px; }
  .closing .sunrise { width: 460px; bottom: -112px; }
  .horizon--peak { --h0: 26px; --rise: 18px; --r-step: 16px; }
}

/* 7. Cards ------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

/* Who it's for: the four survey paths, addressed to "you" */
.roles { display: grid; gap: 16px; list-style: none; }
.role { display: flex; flex-direction: column; gap: 14px; }
.role__top { display: flex; align-items: center; gap: 16px; }
.role__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 25%, #FFE9C2 0%, #FDE3D2 55%, #F9D9D6 100%);
}
.role__icon img { width: 40px; height: 40px; }
.role h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem); line-height: 1.2; }
.role__path {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--sand);
  color: var(--ink-2);
  font-size: .875rem;
  line-height: 1.45;
}
.role__path span {
  display: block;
  margin-bottom: 2px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.role__who { font-size: .875rem; font-weight: 600; color: var(--muted); }
.role p { color: var(--ink-2); }

.also {
  margin-top: 20px;
  padding: 18px 22px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--ink-2);
}
.also strong { color: var(--plum-900); }

@media (min-width: 760px) {
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* What you get: three cards that rise like steps */
.gets { display: grid; gap: 16px; list-style: none; counter-reset: get; }
.get { display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding-bottom: calc(clamp(22px, 3vw, 32px) + 6px); }
.get__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c);
  color: var(--c-ink);
  font: 700 1.25rem/1 var(--font-display);
}
.get h3 { font-size: 1.375rem; }
.get p { color: var(--ink-2); }
.get::after {
  /* the step this card stands on */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: var(--c);
}
.note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  color: var(--ink-2);
}
.note svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }

@media (min-width: 860px) {
  .gets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .gets .get { margin-top: calc((5 - var(--lvl)) * 14px); }
}

/* 8. The spine: six levels, one staircase ----------------------------------- */
.spine {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.spine > li {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(34% + var(--lvl) * 13.2%);
  min-height: 50px;
  margin-top: -1px;
  padding: 8px 14px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c);
  color: var(--c-ink);
  line-height: 1.25;
}
.spine > li:first-child { margin-top: 0; border-top-left-radius: var(--r-sm); }
.spine > li:last-child { border-bottom-left-radius: var(--r-sm); }
.spine__n { font: 700 1.25rem/1 var(--font-display); }
.spine__label { font-weight: 700; font-size: .9375rem; }

@media (min-width: 860px) {
  .spine { flex-direction: row; align-items: flex-end; }
  .spine > li {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    height: calc(92px + var(--lvl) * 26px);
    margin: 0 0 0 -1px;
    padding: 16px 16px 18px;
    border-radius: var(--r-md) 0 0 0;
  }
  .spine > li:first-child { margin-left: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
  .spine > li:last-child { border-radius: var(--r-md) var(--r-md) var(--r-md) 0; }
  .spine__n { font-size: 2rem; }
  .spine__label { font-size: 1rem; }
}

.spine-caption { margin-top: 16px; font-size: .9375rem; color: var(--muted); }

/* Mini step meter: six bars, filled up to the level */
.meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.meter i { display: block; width: 5px; border-radius: 2px; background: var(--line); }
.meter i:nth-child(1) { height: 5px; background: var(--lvl-0); }
.meter i:nth-child(2) { height: 7px; background: var(--lvl-1); }
.meter i:nth-child(3) { height: 9px; background: var(--lvl-2); }
.meter i:nth-child(4) { height: 11px; background: var(--lvl-3); }
.meter i:nth-child(5) { height: 13px; background: var(--lvl-4); }
.meter i:nth-child(6) { height: 16px; background: var(--lvl-5); }

/* 9. The seven areas at a glance -------------------------------------------- */
.areas { display: grid; gap: 14px; list-style: none; margin-top: clamp(40px, 6vw, 64px); }
.area-tile { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; }
.area-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.area-tile__num { font: 700 .875rem/1 var(--font-display); letter-spacing: .08em; color: var(--accent); }
.area-tile h3 { font-size: 1.25rem; }
.area-tile p { font-size: .9375rem; color: var(--ink-2); }
.area-tile__range { margin-top: auto; padding-top: 8px; }
.strip {
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    var(--lvl-0) 0 16.66%, var(--lvl-1) 0 33.33%, var(--lvl-2) 0 50%,
    var(--lvl-3) 0 66.66%, var(--lvl-4) 0 83.33%, var(--lvl-5) 0 100%);
}
.strip-ends {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  font-size: .875rem;
  line-height: 1.3;
  color: var(--ink-2);
}
.strip-ends span { display: flex; align-items: center; gap: 10px; }
.strip-ends b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--c);
  color: var(--c-ink);
  font: 700 .75rem/1 var(--font-display);
}

.area-tile--more {
  justify-content: center;
  border: 0;
  background: var(--plum-900);
  color: var(--on-dark-2);
  box-shadow: var(--shadow-card);
}
.area-tile--more h3 { color: #FFFFFF; }
.area-tile--more p { color: var(--on-dark-2); }
.area-tile--more .text-link { color: var(--sun); }
.area-tile--more .text-link:hover { color: #FFFFFF; }

@media (min-width: 640px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .areas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* 10. How the survey works --------------------------------------------------- */
.how { display: grid; gap: 16px; list-style: none; counter-reset: how; }
.how__step { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; align-content: start; }
.how__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--c);
  color: var(--c-ink);
  font: 700 1.375rem/1 var(--font-display);
}
.how__step h3 { font-size: 1.25rem; padding-top: 4px; }
.how__step p { color: var(--ink-2); }
.how__step p + p { margin-top: 10px; }
.how__aside {
  display: block;
  margin-top: 10px;
  font-size: .9375rem;
  color: var(--muted);
}
.how-extra {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.how-extra .card { box-shadow: none; }
.how-extra h3 { font-size: 1.125rem; margin-bottom: 8px; }
.how-extra p { color: var(--ink-2); }
@media (min-width: 900px) {
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .how__step { grid-template-columns: 1fr; }
  .how__num { grid-row: auto; margin-bottom: 8px; }
  .how-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* 11. Partners ----------------------------------------------------------------
   The four partners as equal text wordmarks: the same tile, type size, weight
   and spacing for each, always in the same order. Four in one row from 900 px,
   two by two from 480 px, one under another on small phones. */
.partners { list-style: none; display: grid; gap: 12px; }
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  text-align: center;
}
.partner__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--plum-900);
  text-wrap: balance;
}
.partners-intro { max-width: 44rem; }
.partners-intro p + p { margin-top: 14px; }
.partners-block { display: grid; gap: clamp(28px, 4vw, 40px); }
.partners-note { margin-top: 18px; font-size: .9375rem; color: var(--ink-2); }
/* Home: one centred block, the heading, the row and one small line under it */
.partners-block--center { text-align: center; }
.partners-block--center .partners-intro { margin-inline: auto; }
.partners-block--center h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
@media (min-width: 480px) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .partner { min-height: 104px; padding: 18px 22px; }
}

/* 12. Model page ------------------------------------------------------------- */
.area-nav { margin-top: clamp(40px, 6vw, 64px); }
.area-nav h2 {
  margin-bottom: 14px;
  font-family: var(--font-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.area-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.area-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.area-nav a:hover { border-color: var(--accent); color: var(--plum-900); }
.area-nav a span { font: 700 .8125rem/1 var(--font-display); color: var(--accent); }

.area { scroll-margin-top: 0; }
.area__head {
  display: grid;
  gap: 6px 20px;
  margin-bottom: 26px;
}
.area__num {
  font: 700 clamp(2.5rem, 2rem + 2vw, 3.75rem)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--accent);
}
.area__head h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.area__head p { max-width: 40rem; color: var(--ink-2); font-size: 1.0625rem; }
@media (min-width: 720px) {
  .area__head { grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; }
  .area__num { grid-row: span 2; }
}

/* The ladder. On a phone or tablet: a climb you read downward, the colour
   warming from night to sun and each step's bar growing as you go. On a wide
   screen (≥ 1180px, where every word fits): six cards on pedestals that rise
   left to right, the mark drawn large. */
.ladder { position: relative; list-style: none; display: grid; gap: 10px; }
.ladder::before {
  /* phone: one path joining the six badges, night at the top, sun at the foot */
  content: "";
  position: absolute;
  z-index: 1;
  left: 39px;
  top: 30px;
  bottom: 40px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--lvl-0), var(--lvl-1) 20%, var(--lvl-2) 40%, var(--lvl-3) 60%, var(--lvl-4) 80%, var(--lvl-5));
  opacity: .45;
}
.rung {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 0 16px;
  align-items: start;
  padding: 16px 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.rung__base {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c);
  color: var(--c-ink);
}
.rung__num { font: 700 1.375rem/1 var(--font-display); }
.rung__body { display: contents; }
.rung__title {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--plum-900);
}
.rung__title::after {
  /* grows with the level: the climb, felt as you scroll */
  content: "";
  display: block;
  width: calc(20% + var(--lvl) * 16%);
  height: 4px;
  margin: 8px 0 10px;
  border-radius: 4px;
  background: var(--c);
}
.rung__text { grid-column: 2; color: var(--ink-2); font-size: .9688rem; line-height: 1.55; }
.rung__title,
.rung__text { overflow-wrap: break-word; }

@media (min-width: 720px) and (max-width: 1179.98px) {
  /* tablets and small laptops: the stacked climb, kept to a readable measure */
  .ladder { max-width: 52rem; }
}

@media (min-width: 1180px) {
  .ladder {
    --rise: 16px;
    --base: 56px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }
  .ladder::before { display: none; }
  .rung {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: calc((5 - var(--lvl)) * var(--rise));
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    overflow: hidden;
  }
  .rung__body {
    display: block;
    flex: 1 1 auto;
    padding: 18px 16px 20px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: var(--card);
  }
  .rung__title { font-size: 1.0625rem; }
  .rung__title::after { width: 32px; margin: 10px 0 10px; }
  .rung__text { font-size: .9375rem; }
  .rung__base {
    flex: none;
    place-items: end start;
    width: auto;
    height: calc(var(--base) + var(--lvl) * var(--rise));
    padding: 0 14px 10px;
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
  .rung__num { font-size: 1.75rem; }
}

.ladder-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-size: .875rem;
  color: var(--muted);
}

.scoring { display: grid; gap: 16px; list-style: none; }
.scoring li { display: flex; gap: 14px; align-items: flex-start; }
.scoring li > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 10px;
  background: var(--sand);
  color: var(--plum-900);
  font: 700 .9375rem/1 var(--font-display);
}
.scoring b { color: var(--plum-900); }
@media (min-width: 860px) {
  .scoring { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
}

/* 13. Prose pages ------------------------------------------------------------ */
.prose > * + * { margin-top: 16px; }
.prose h2 {
  margin-top: clamp(40px, 5vw, 56px);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}
.prose h2 + * { margin-top: 14px; }
.prose h3 { margin-top: 28px; font-size: 1.25rem; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--accent); }
.prose p,
.prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }

.summary {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
}
.summary li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--ink);
}
.summary li::before {
  /* a small sun for each point */
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin: 7px 2px 0 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgb(247 184 64 / .28);
}
.callout + .prose { margin-top: clamp(16px, 3vw, 24px); }
.callout .h3 { margin-bottom: 16px; }

.callout {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: var(--sand);
}
.callout h2 { margin-top: 0; }

.split { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .split > :first-child { position: sticky; top: 32px; }
}

.reasons { display: grid; gap: 16px; list-style: none; }
.reason { display: flex; flex-direction: column; gap: 10px; }
.reason h3 { font-size: 1.25rem; }
.reason p { color: var(--ink-2); }
@media (min-width: 860px) {
  .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .reasons .reason { margin-top: calc((5 - var(--lvl)) * 12px); }
}

.paths { list-style: none; display: grid; gap: 12px; }
.paths li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.paths .role__icon { grid-row: span 2; width: 52px; height: 52px; }
.paths .role__icon img { width: 34px; height: 34px; }
.paths b { color: var(--plum-900); font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.paths b small { font-family: var(--font-text); font-size: .8125rem; font-weight: 600; color: var(--muted); }
.paths span { color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }

/* 14. Footer ----------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: calc(var(--section) + 44px);
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: calc(var(--dock-space) + 28px);
  background: var(--sand);
  color: var(--ink-2);
}
main:has(> .closing:last-child) + .site-footer { margin-top: clamp(40px, 5vw, 64px); }
.footer__grid { display: grid; gap: 36px; }
.footer__brand img { width: 210px; }
.footer__brand p { margin-top: 16px; max-width: 26rem; font-size: .9375rem; }
.footer__label {
  margin-bottom: 14px;
  font-family: var(--font-text);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__nav ul { list-style: none; display: grid; gap: 2px; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.footer__nav a:hover { color: var(--accent); text-decoration: underline; }
.footer__credit { max-width: 26rem; font-size: .9375rem; line-height: 1.7; }
.footer__credit b { color: var(--ink); }
.footer__legal {
  display: grid;
  gap: 8px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
}
.footer__legal a { color: var(--accent); font-weight: 600; }

@media (min-width: 860px) {
  .footer__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 5fr); gap: 48px; }
}

/* 15. The survey dock: always on screen, floating over the page ------------- */
.dock {
  position: fixed;
  z-index: 50;
  left: var(--dock-gap);
  right: var(--dock-gap);
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dock__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 820px;
  min-height: var(--dock-h);
  padding: 8px 8px 8px 12px;
  border-radius: 22px;
  background: var(--plum-900);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), inset 0 1px 0 rgb(255 255 255 / .12), var(--shadow-float);
}
.dock__badge {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 6px;
  border-radius: 50%;
  background: var(--cream);
}
.dock__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--on-dark-2);
}
.dock__title {
  display: block;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.dock__a { display: block; color: #FFFFFF; font-weight: 700; font-size: .875rem; }
.dock__b { display: block; }
.dock__wide { display: none; }
.dock .btn { flex: none; min-height: 48px; padding-inline: 1.15em; }
.dock .btn .ico { display: none; }
@media (min-width: 400px) { .dock .btn .ico { display: block; } }

/* very narrow phones: the survey's name is read out, not shown */
.dock__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 420px) {
  .dock__badge { display: block; width: 42px; height: 42px; padding: 5px; }
}
@media (min-width: 720px) {
  .dock__inner { gap: 16px; padding: 10px 10px 10px 14px; border-radius: 26px; }
  .dock__badge { width: 52px; height: 52px; padding: 7px; }
  .dock__title { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .dock__a,
  .dock__b,
  .dock__wide { display: inline; color: var(--on-dark-2); font-weight: 500; font-size: .875rem; }
  .dock__b::before,
  .dock__wide::before { content: " · "; }
  .dock .btn { min-height: 52px; padding-inline: 1.5em; font-size: 1.0313rem; }
}

/* 16. Motion: gentle, optional, never carrying meaning. The dock is never
   animated: it is on screen from the first frame. ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero .sunrise,
  .page-hero .sunrise { animation: somi-rise 1.8s cubic-bezier(.2, .7, .15, 1) both; }
  .hero .horizon > li { animation: somi-step .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.15s + var(--lvl) * .07s); transform-origin: bottom; }

  @keyframes somi-rise {
    from { translate: 0 70px; opacity: .35; }
    to { translate: 0 0; opacity: 1; }
  }
  @keyframes somi-step {
    from { transform: scaleY(.55); }
    to { transform: scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 17. Print: no dock, no panels' dark fills ---------------------------------- */
@media print {
  .dock,
  .nav-toggle,
  .sunrise,
  .horizon { display: none !important; }
  .panel { background: none; color: var(--ink); }
  .panel h1,
  .panel h2,
  .panel p,
  .panel .lede { color: var(--ink); }
  .site-footer { padding-bottom: 24px; }
}

/* 18. Model history page (added 2026-10-07) ----------------------------------
   history.html is built from the parts above: the inner-page dawn hero, .split,
   .callout and .summary, the model page's .scoring list, .note, .card, the
   spine and the closing summit band. Only what those don't already do is here. */

/* The Capability Maturity Model's dates, on the night-to-gold rail the model
   ladder uses on phones, with a small sun for each date. */
.timeline {
  position: relative;
  list-style: none;
  display: grid;
  gap: 22px;
  padding-left: 34px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--lvl-0), var(--lvl-2) 35%, var(--lvl-4) 70%, var(--lvl-5));
  opacity: .45;
}
.timeline > li { position: relative; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px rgb(247 184 64 / .3);
}
.timeline__when { font: 700 1.0625rem/1.3 var(--font-display); color: var(--accent); }
.timeline__when + p { margin-top: 4px; color: var(--ink-2); }
.timeline + .callout { margin-top: clamp(28px, 4vw, 40px); }

/* Why it fits: the model page's numbered list, its tiles white on a sand band,
   then its conclusion set large. */
.section--sand .scoring li > span:first-child { background: var(--card); }
.pull {
  max-width: 48rem;
  margin-top: clamp(32px, 5vw, 48px);
  padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 32px);
  border-left: 6px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font: 600 clamp(1.1875rem, 1.05rem + .6vw, 1.5rem)/1.4 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--plum-900);
}

/* Kept and changed: two staircases drawn to one scale, reusing the spine. The
   Capability Maturity Model's five levels in outline, the SOM Institute model's
   six in the level colours; the dashed slot is the level 0 it adds. Phones get
   the spine's bar form, wide screens its staircase, as on the home and model
   pages. */
.climbs { display: grid; gap: clamp(28px, 4vw, 44px); }
.climb { margin: 0; }
.climb__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin-bottom: 14px;
}
.climb__cap b { font: 600 1.25rem/1.25 var(--font-display); color: var(--plum-900); }
.climb__cap span { font-size: .9375rem; color: var(--muted); }

.spine--cmm::before {
  content: "";
  width: 34%;
  min-height: 50px;
  border: 2px dashed var(--muted);
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.spine--cmm > li {
  margin-top: -2px;
  border: 2px solid var(--ink-2);
  background: var(--card);
  color: var(--plum-900);
}
.spine--cmm > li:nth-child(1) { --lvl: 1; border-top-left-radius: 0; }
.spine--cmm > li:nth-child(2) { --lvl: 2; }
.spine--cmm > li:nth-child(3) { --lvl: 3; }
.spine--cmm > li:nth-child(4) { --lvl: 4; }
.spine--cmm > li:nth-child(5) { --lvl: 5; }

.spine__added { position: relative; }
.spine__tag {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--plum-900);
  font: 700 .75rem/1.2 var(--font-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 860px) {
  .spine--cmm::before {
    flex: 1 1 0;
    width: auto;
    min-height: 0;
    height: 92px;
    border-bottom: 2px dashed var(--muted);
    border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
  }
  .spine--cmm > li { margin: 0 0 0 -2px; }
  .spine--cmm > li:first-child { margin-left: 0; border-radius: var(--r-md) 0 0 0; }
  .spine__tag { top: auto; bottom: calc(100% + 10px); left: 14px; transform: none; }
}

/* Outline for what was kept from the CMM, colour for what the SOM Institute
   model changed: the eyebrow glyph and the list bullets follow the two
   staircases above. */
.kept-changed {
  display: grid;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 48px);
}
.kept-changed h3 {
  margin-bottom: 18px;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4375rem);
}
.eyebrow--outline::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cg fill='none' stroke='%234A3D5E' stroke-width='1'%3E%3Crect x='4.6' y='9' width='2.4' height='3.5' rx='.7'/%3E%3Crect x='8.7' y='7' width='2.4' height='5.5' rx='.7'/%3E%3Crect x='12.8' y='5' width='2.4' height='7.5' rx='.7'/%3E%3Crect x='16.9' y='3' width='2.4' height='9.5' rx='.7'/%3E%3Crect x='21' y='1' width='2.4' height='11.5' rx='.7'/%3E%3C/g%3E%3C/svg%3E");
}
.summary--outline li::before {
  background: none;
  box-shadow: inset 0 0 0 2px var(--ink-2);
}
@media (min-width: 860px) {
  .kept-changed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* The closing band carries "From model to benchmark" and two actions. */
.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.closing__actions .btn { margin-top: 0; }