/* ==========================================================================
   Veyra website v3 · one stylesheet for every page
   Built to "Veyra brand guidelines 2.0" (13 October 2026 edition):
   - Showcase (the people who decide): white first screens, ink sections, purple for the one action, one cream block
     for what matters most; Jost says what's true, Nunito answers for you (one married headline), Playfair once at most
   - The name is the logo; its V is the Rise. The path: a fine staircase rising left to right (marker, progress, divider)
   - Corners: 8px for evidence, 16px for cards, 22px for the world, pills for buttons; 1px hairlines, ink at 16%
   - For young people (body.play): cream and purple grounds, paper, tape and stickers, ochre from play
   ========================================================================== */

:root {
  --ink: #1B2139;
  --ink-2: #222943;          /* raised surface on ink */
  --ink-soft: #4B5268;       /* secondary text on white */
  --white: #FFFFFF;
  --purple: #8452B5;         /* the science's light; data and actions */
  --purple-deep: #6E3F9C;    /* links on white */
  --purple-tint: #EFE6F7;    /* lines and type on ink */
  --cream: #F7EABF;          /* young people's ground; one cream block per showcase page */
  --cream-soft: #FBF5E1;
  --paper: #F7F2FB;          /* soft fill: purple tint, lightened */
  --ochre: #D29B2E;          /* from play only: the answer they pick, rewards, tape. Never a ground */
  --teal: #2A6565; --indigo: #2E2E7F; --terracotta: #A8453D; --olive: #41540D;   /* houses and data bands only */

  /* data only: the three cognitive areas (as in the Student Reports) and the four support bands (house tones) */
  --focus: #FFB62D;  --focus-ink: #8A5A00;     /* domain colours: in the Student Report only */
  --think: #4E8CF7;  --think-ink: #1F55B8;
  --memory: #FF69D0; --memory-ink: #A8236C;
  --band-needs: #A8453D; --band-dev: #D29B2E; --band-ok: #2A6565; --band-strong: #8452B5;

  --hair: rgba(27, 33, 57, .16);
  --hair-ink: rgba(255, 255, 255, .15);
  --on-ink-2: rgba(255, 255, 255, .74);   /* secondary text on ink, 9.8:1 */
  --on-ink-3: rgba(255, 255, 255, .6);    /* small print on ink, 7.3:1 */

  --f-sci: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-art: "Nunito", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --f-meet: "Playfair Display", Georgia, "Times New Roman", serif;

  --r: 8px;                  /* evidence, data, fields */
  --r-card: 16px;            /* cards */
  --r-world: 22px;           /* the pupils' world: game images, pupil cards */
  --r-btn: 999px;            /* pills for buttons */
  --wrap: 1200px;
  --gutter: 24px;
  --side: clamp(16px, 4vw, 40px);
  --sec: clamp(64px, 9vw, 112px);
  --header-h: 72px;
  --path-h: clamp(40px, 5vw, 64px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--f-sci); font-weight: 400; font-size: 1rem; line-height: 1.5625;
  font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--purple-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
.ink :focus-visible, .on-ink :focus-visible, .site-foot :focus-visible, body.play .play-purple :focus-visible { outline-color: var(--cream); }
.fig .frame:has(> img.zoom:focus-visible) { outline: 2px solid var(--purple); outline-offset: 3px; }
.ink .fig .frame:has(> img.zoom:focus-visible), body.play .play-purple .fig .frame:has(> img.zoom:focus-visible) { outline-color: var(--cream); }
.fig .frame > img.zoom:focus-visible { outline: none; }
.anchor-nav a:focus-visible { outline-offset: -3px; }
[hidden] { display: none !important; }
.no-js .dd:hover .dd-panel, .no-js .dd:focus-within .dd-panel { display: block; }
@media (max-width: 1080px) { .no-js .site-head .wrap { height: auto; flex-wrap: wrap; padding-block: 12px; } .no-js .nav { display: flex; position: static; width: 100%; padding: 0 0 1rem; } .no-js .nav-toggle { display: none; } }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: var(--ink); padding: .6rem 1rem; border-radius: var(--r-btn); font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--side)); margin-inline: auto; padding-inline: var(--side); }
.wrap--narrow { max-width: calc(760px + 2 * var(--side)); }
.wrap--read { max-width: calc(680px + 2 * var(--side)); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(48px, 6vw, 72px); }
.sec + .sec:not(.ink):not(.world):not(.world-purple) { border-top: 1px solid var(--hair); }
.sec.ink + .sec.ink { border-top: 1px solid var(--hair-ink); }
.paper { background: #fff; }   /* showcase grounds are white or ink; soft fills stay on cards */
.ink { background: var(--ink); color: #fff; }
.ink :where(a:not(.btn)) { color: var(--purple-tint); }
.grid { display: grid; gap: var(--gutter); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--top { align-items: start; }
@media (min-width: 981px) { .split--flip > :last-child { order: -1; } }
.sticky { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 980px) { .sticky { position: static; } }
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .g4.keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stack > * + * { margin-top: 1rem; }
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: clamp(40px, 5vw, 64px); }
.center { text-align: center; } .center .actions { justify-content: center; } .center .lede, .center .label { margin-inline: auto; } .center .label { justify-content: center; }

/* ---------- type ---------- */
.display, h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem); line-height: 1.07; letter-spacing: -.018em; }
h2, .h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.25rem); line-height: 1.17; }
h3, .h3 { font-size: 1.375rem; line-height: 1.27; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; max-width: 60ch; color: var(--ink-soft); }
.ink .lede, .on-ink .lede { color: var(--on-ink-2); }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; }
h1 + .lede, h2 + .lede, h2 + p, h3 + .lede { margin-top: 1rem; }
.label + h1, .label + h2 { margin-top: 0; }
.small { font-size: .875rem; line-height: 1.5; }
.muted { color: var(--ink-soft); }
.ink .muted { color: var(--on-ink-2); }
.cream { color: var(--cream); }
.accent { color: var(--purple); }
.ink .accent { color: var(--cream); }
.married { font-family: var(--f-art); font-weight: 800; color: var(--purple); letter-spacing: -.005em; }
.ink .married { color: var(--cream); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* Label: Jost Medium capitals tracked 14%, with the path as a marker */
.label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .75rem; line-height: 1.33; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-deep); margin-bottom: 1rem; flex-wrap: wrap; row-gap: .5rem;
}
.label .badge { white-space: nowrap; letter-spacing: .12em; }
.label::before {
  content: ""; flex: none; width: 22px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 9.5h6V6.5h5.5V3.5H17V.5h5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 9.5h6V6.5h5.5V3.5H17V.5h5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.label--plain::before { display: none; }
.ink .label, .on-ink .label { color: var(--purple-tint); }

/* The human line: Nunito, one per adult page */
.human { font-family: var(--f-art); font-weight: 800; letter-spacing: 0; }
.ink .human { color: var(--cream); }
.human--lg { font-size: 1.375rem; line-height: 1.35; }
/* The meeting point: Playfair, one moment per page at most */
.meet { font-family: var(--f-meet); font-weight: 500; font-style: italic; letter-spacing: 0; }
.amp { font-family: var(--f-meet); font-style: italic; font-weight: 500; color: var(--cream); }

.mark { width: clamp(44px, 5vw, 60px); height: auto; margin-bottom: 1.5rem; }
.center .mark { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--purple); --b-fg: #fff; --b-bd: var(--purple);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.45rem; border-radius: var(--r-btn);
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  font-family: var(--f-sci); font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { --b-bg: var(--purple-deep); --b-bd: var(--purple-deep); text-decoration: none; }
.btn:active { --b-bg: var(--ink); --b-bd: var(--ink); --b-fg: #fff; }
.btn--ghost { --b-bg: transparent; --b-fg: var(--purple-deep); --b-bd: var(--purple); }
.btn--ghost:hover { --b-bg: var(--purple-tint); --b-fg: var(--purple-deep); --b-bd: var(--purple-deep); }
.ink .btn--ghost, .on-ink .btn--ghost { --b-fg: #fff; --b-bd: rgba(255,255,255,.55); }
.ink .btn--ghost:hover, .on-ink .btn--ghost:hover { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.ink .btn:active { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.btn--sm { min-height: 44px; padding: .5rem 1.15rem; font-size: .9375rem; }
.btn .arr { transition: transform .15s ease; }
.btn:hover .arr { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; }
.actions .note { font-size: .875rem; color: var(--ink-soft); }
.links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.ink .actions .note { color: var(--on-ink-3); }
@media (max-width: 480px) { .actions .btn { flex: 1 1 100%; } }

/* Text link with arrow */
.more { display: inline; position: relative; font-weight: 500; color: var(--purple-deep); text-decoration: none; }
.more::after { content: "→"; display: inline-block; margin-left: .35rem; transition: transform .15s ease; }
.more::before { content: ""; position: absolute; inset: -10px -4px; }
.more:hover { text-decoration: underline; }
.more:hover::after { transform: translateX(3px); }
.ink .more { color: var(--purple-tint); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); color: var(--ink); border-bottom: 1px solid var(--hair); backdrop-filter: saturate(1.4) blur(8px); }
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); }
.lockup { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; flex: none; }
.lockup .logo { height: 30px; width: auto; display: block; overflow: visible; }
.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav > a:not(.btn), .nav .dd > button {
  display: inline-flex; align-items: center; gap: .3rem; height: 40px; padding: 0 .65rem; border-radius: var(--r);
  color: var(--ink-soft); text-decoration: none; font-size: .9375rem; font-weight: 400; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.nav > a:not(.btn):hover, .nav .dd > button:hover, .nav .dd.open > button { color: var(--ink); background: var(--paper); }
.nav > a[aria-current="page"], .nav .dd.current > button { color: var(--ink); box-shadow: inset 0 -2px 0 var(--purple); border-radius: 0; }
.nav .dd > button svg { width: 10px; height: 10px; transition: transform .15s ease; }
.nav .dd.open > button svg { transform: rotate(180deg); }
.nav .btn { margin-left: .6rem; }
.dd { position: relative; }
.dd-panel {
  position: absolute; top: calc(100% + 10px); left: -12px; min-width: 330px; padding: .5rem;
  background: #fff; color: var(--ink); border-radius: var(--r-card); box-shadow: 0 18px 40px rgba(12,15,30,.16), 0 0 0 1px var(--hair);
  display: none;
}
.dd.open .dd-panel { display: block; }
.dd-panel a { display: grid; grid-template-columns: 40px 1fr; gap: .15rem .8rem; align-items: center; padding: .65rem .7rem; border-radius: var(--r); text-decoration: none; color: var(--ink); }
.dd-panel a:hover, .dd-panel a:focus-visible { background: var(--paper); }
.dd-panel a[aria-current="page"] { background: var(--purple-tint); }
.dd-panel .ic { grid-row: span 2; width: 40px; height: 40px; border-radius: var(--r); background: var(--purple-tint); color: var(--purple-deep); display: grid; place-items: center; }
.dd-panel .ic svg { width: 20px; height: 20px; }
.dd-panel strong { font-weight: 500; font-size: .9375rem; line-height: 1.25; }
.dd-panel span.d { font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); }
.dd-panel .soon { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); margin-left: .35rem; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--hair); border-radius: var(--r-btn); background: #fff; color: var(--ink); cursor: pointer; place-items: center; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .x { display: none; }
.nav-open .nav-toggle .x { display: block; } .nav-open .nav-toggle .bars { display: none; }
.head-cta { display: none; }

@media (max-width: 1080px) {
  .nav-toggle { display: grid; margin-left: 0; }
  .head-cta { display: inline-flex; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0; padding: .75rem var(--side) 2rem;
    background: #fff; overflow-y: auto; display: none;
  }
  .nav-open .nav { display: flex; }
  .nav-open { overflow: hidden; }
  .nav > a:not(.btn) { height: auto; min-height: 52px; padding: .75rem 0; font-size: 1.125rem; color: var(--ink); border-bottom: 1px solid var(--hair); border-radius: 0; width: 100%; }
  .nav > a[aria-current="page"] { box-shadow: none; color: var(--purple-deep); }
  .nav > a:not(.btn):hover { background: none; }
  .nav .dd > button { display: none; }
  .dd-panel { position: static; display: block; min-width: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; }
  .dd-panel span.d, .dd-panel .ic { display: none; }
  .dd-panel a { grid-template-columns: 1fr; min-height: 44px; padding: .5rem 0 .5rem 1rem; border-left: 1px solid var(--hair); border-radius: 0; color: var(--ink-soft); }
  .dd-panel a:first-child { min-height: 52px; padding: .75rem 0; border-left: 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
  .dd-panel a:first-child strong { font-size: 1.125rem; font-weight: 400; }
  .dd-panel a:not(:first-child) strong { font-weight: 400; font-size: 1rem; }
  .dd-panel a:last-child { margin-bottom: .5rem; }
  .dd-panel a:hover { background: none; color: var(--ink); }
  .dd-panel a[aria-current="page"] { background: none; color: var(--purple-deep); }
  .nav .btn { margin: 1.25rem 0 0; width: 100%; min-height: 48px; }
}
@media (max-width: 420px) { .head-cta { padding-inline: .8rem; font-size: .875rem; } .lockup .logo { height: 26px; } }

/* ---------- ink sections: a single soft purple glow (no cream light, never a gradient page) ---------- */
.lit { position: relative; isolation: isolate; overflow: hidden; }
.lit::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: min(820px, 120vw); aspect-ratio: 1; left: var(--lx, max(-14%, calc(50% - 900px))); top: var(--ly, -45%);
  background: radial-gradient(closest-side, rgba(132,82,181,.38), rgba(132,82,181,.1) 55%, rgba(132,82,181,0) 100%); }
.lit::after { content: none; }
.lit--center { --lx: calc(50% - min(410px, 60vw)); --ly: -35%; }
/* the blueprint grid, for ink sections that explain how something works */
.grid-ink { background-image: linear-gradient(rgba(247,234,191,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(247,234,191,.06) 1px, transparent 1px); background-size: 32px 32px; }

/* ---------- the path: a fine staircase, always rising left to right ---------- */
.path {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--path-h); pointer-events: none;
  color: var(--purple); opacity: .55;
}
.path svg { width: 100%; height: 100%; overflow: visible; }
.path .line { stroke: currentColor; stroke-width: 1.25; }
.ink .path { color: var(--purple-tint); opacity: .6; }

/* ---------- hero: the first screen is for the school, on white ---------- */
.hero { position: relative; padding-block: clamp(48px, 7vw, 96px) calc(var(--path-h) + clamp(28px, 4vw, 48px)); background: #fff; }
.hero .eyebrow { margin-bottom: 1.25rem; }
.hero h1 { max-width: 18ch; }
.hero h1 .cream, .hero h2 .cream { color: var(--purple); }
.hero.ink h1 .cream, .hero.ink h2 .cream { color: var(--cream); }
.hero .lede { margin-top: 1.25rem; }
.hero--page { padding-block: clamp(40px, 6vw, 80px) calc(var(--path-h) + clamp(24px, 3vw, 40px)); }
.hero--flat { padding-bottom: clamp(48px, 6vw, 72px); }
.hero--page h1 { max-width: 22ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8125rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; padding-block: 12px; margin-block: -12px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .6; }
.ink .crumbs, .ink .crumbs a { color: var(--on-ink-2); }

/* Evidence strip: the proof, worded exactly (labels in capitals, values in plain words) */
.backing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: clamp(36px, 5vw, 52px); list-style: none; padding: 0; }
.backing li { padding: 1rem 1.1rem 1rem 0; display: flex; flex-direction: column; gap: .3rem; }
.backing li + li { padding-left: 1.1rem; border-left: 1px solid var(--hair); }
.backing .k { font-size: .6875rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); }
.backing .v { font-size: .875rem; line-height: 1.4; color: var(--ink); }
.ink .backing { border-color: var(--hair-ink); }
.ink .backing li + li { border-color: var(--hair-ink); }
.ink .backing .k { color: var(--purple-tint); }
.ink .backing .v { color: #fff; }
@media (max-width: 980px) {
  .backing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .backing li:nth-child(4) { border-left: 0; padding-left: 0; }
  .backing li:nth-child(n+4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 980px) {
  .hero > .wrap:has(> .hero-grid + .backing) { display: flex; flex-direction: column; }
  .hero > .wrap:has(> .hero-grid + .backing) > .hero-grid { display: contents; }
  .hero > .wrap:has(> .hero-grid + .backing) > .hero-grid > :first-child { order: 1; }
  .hero > .wrap:has(> .hero-grid + .backing) > .backing { order: 2; margin-top: 28px; }
  .hero > .wrap:has(> .hero-grid + .backing) > .hero-grid > :last-child { order: 3; margin-top: 32px; }
}
@media (max-width: 560px) {
  .backing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backing li { padding: .7rem .6rem .7rem 0; border-top: 1px solid var(--hair); }
  .backing li:nth-child(-n+2) { border-top: 0; }
  .backing li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .backing li:nth-child(even) { padding-left: .75rem; border-left: 1px solid var(--hair); }
  .backing li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .backing .v { font-size: .8125rem; }
}
.hero-note { margin-top: 1.1rem; font-size: .9375rem; color: var(--ink-soft); }
.ink .hero-note { color: var(--on-ink-2); }

/* Facts and sources: square tags; DEMO DATA marks illustrative data */
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .6rem; border: 1px solid var(--hair); border-radius: 3px; font-size: .8125rem; color: var(--ink); background: #fff; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.demo { display: inline-flex; align-items: center; padding: .15rem .45rem; border-radius: 3px; background: var(--purple-tint); color: var(--purple-deep); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
/* One cream block marks what matters most (one per page) */
.cream-block { background: var(--cream); color: var(--ink); border-radius: var(--r-card); padding: clamp(22px, 3vw, 34px); }
.cream-block .label { color: var(--purple-deep); }
.cream-block .muted, .cream-block .lede { color: var(--ink-soft); }
/* Stat card and evidence card: the fact on white, what it means on cream */
.stat { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 1rem 1.15rem; }
.stat .k { display: flex; justify-content: space-between; gap: .5rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); }
.stat .v { font-size: 2.5rem; line-height: 1.05; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .5rem; color: var(--ink); }
.stat .v small { font-size: .45em; font-weight: 500; color: var(--ink-soft); }
.stat .track { height: 6px; border-radius: 3px; background: var(--purple-tint); margin-top: .6rem; overflow: hidden; }
.stat .track i { display: block; height: 100%; background: var(--purple); }
.stat .n { margin-top: .5rem; font-size: .8125rem; color: var(--ink-soft); }
.ev-card { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; background: #fff; }
.ev-card .fact { padding: 1rem 1.15rem; }
.ev-card .means { padding: .9rem 1.15rem; background: var(--cream); font-size: .9375rem; }
/* The blueprint: cream lines on ink, a grid, numbered callouts and a figure caption (one per page) */
.blueprint { background-color: var(--ink); background-image: linear-gradient(rgba(247,234,191,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(247,234,191,.07) 1px, transparent 1px); background-size: 28px 28px; border-radius: var(--r-card); padding: clamp(20px, 3vw, 36px); color: #fff; }
.blueprint ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; align-items: end; }
.blueprint li { position: relative; border: 1.5px solid var(--cream); border-radius: var(--r); padding: .8rem .9rem; margin-top: calc((var(--n, 4) - var(--i, 1)) * 26px); }
.blueprint li b { display: block; font-weight: 500; }
.blueprint li span { display: block; font-size: .8125rem; color: var(--on-ink-2); margin-top: .15rem; }
.blueprint li em { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); color: var(--ink); font-style: normal; font-size: .75rem; font-weight: 600; display: grid; place-items: center; }
@media (max-width: 760px) { .blueprint ol { grid-template-columns: 1fr 1fr; } .blueprint li { margin-top: 0; } }
.blueprint + figcaption, .fig .blueprint ~ figcaption { margin-top: .7rem; }

/* The fall and the rise: the V unrolled. Slope keeps the V's lean; three equal steps; only the treads stretch */
.fallrise { display: block; width: 100%; height: auto; overflow: visible; }
.fallrise .fr-slope { fill: var(--ink); }
.fallrise .fr-steps { stroke: var(--purple); }
.fallrise .fr-label { fill: var(--ink-soft); font-family: var(--f-sci); font-size: 22px; font-weight: 500; }
.ink .fallrise .fr-slope { fill: #fff; }
.ink .fallrise .fr-label { fill: var(--cream); }

/* ---------- cards ---------- *//* ---------- cards ---------- */
.card { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(20px, 2.4vw, 28px); }
.card h3 { font-size: 1.25rem; }
.card h3 + p, .card h4 + p { margin-top: .5rem; color: var(--ink-soft); }
.card .label { margin-bottom: .75rem; }
.ink .card { background: rgba(255,255,255,.04); border-color: var(--hair-ink); color: #fff; }
.ink .card h3 + p, .ink .card h4 + p { color: var(--on-ink-2); }
a.card { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.card:hover { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.ink a.card:hover { border-color: var(--purple-tint); box-shadow: 0 0 0 1px var(--purple-tint); }
a.card .more { margin-top: 1rem; }
.card--paper { background: var(--paper); border-color: transparent; }
.card--cream { background: var(--cream); border-color: transparent; }
.ic-sq { width: 44px; height: 44px; border-radius: 12px; background: var(--purple-tint); color: var(--purple-deep); display: grid; place-items: center; margin-bottom: 1rem; }
.ic-sq svg { width: 22px; height: 22px; }
.ink .ic-sq { background: rgba(239,230,247,.1); color: var(--purple-tint); }

@media (max-width: 640px) {
  .grid--compact > .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; }
  .grid--compact > .card > .ic-sq { grid-row: span 3; margin: 0; }
  .grid--compact > .card > * { grid-column: 2; }
  .grid--compact > .card > .ic-sq { grid-column: 1; }
  .grid--compact > .card h3 { font-size: 1.0625rem; }
}

@media (max-width: 640px) {
  .grid > .card:has(> .ic-sq) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; }
  .grid > .card:has(> .ic-sq) > * { grid-column: 2; }
  .grid > .card:has(> .ic-sq) > .ic-sq { grid-column: 1; grid-row: span 3; margin: 0; }
  .grid > .card:has(> .ic-sq) h3 { font-size: 1.0625rem; }
}

/* Product card (image + text), used for the four products */
a.card.prod, .prod { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.prod .shot { position: relative; background: var(--paper); aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--hair); }
.prod .shot img { width: 100%; height: 100%; object-fit: contain; padding: 6% 8% 0; object-position: center bottom; }
.prod .shot img.cover { object-fit: cover; padding: 0; object-position: center; }
.prod .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.prod .step { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); }
.prod h3 { margin-top: .4rem; font-size: 1.25rem; }
.prod p { margin-top: .4rem; color: var(--ink-soft); font-size: .9375rem; }
a.card.prod .more, .prod .more { margin-top: auto; padding-top: 1rem; }
@media (max-width: 640px) {
  .products-row { gap: 12px; }
  .products-row a.card.prod, .products-row .prod { flex-direction: row; }
  .products-row .prod .shot { min-height: 96px; }
  .products-row .prod .shot { flex: none; width: 36%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--hair); }
  .products-row .prod .body { padding: 14px 16px; }
  .products-row .prod h3 { font-size: 1.0625rem; margin-top: .2rem; }
  .products-row .prod p { display: none; }
  .products-row .prod .more { padding-top: .5rem; font-size: .9375rem; }
  .products-row .tag-soon { top: 6px; right: auto; left: 6px; font-size: .6875rem; padding: .2rem .4rem; }
}
.shot--ink { background: var(--ink) !important; color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.shot--ink::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(closest-side, rgba(132,82,181,.6), rgba(132,82,181,0)); }
.shot--ink .rise { width: 30%; max-width: 72px; }
.shot--ink svg.pathmini { width: 82%; height: auto; overflow: visible; }
.tag-soon { position: absolute; top: 12px; right: 12px; background: var(--ink); color: #fff; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .55rem; border-radius: var(--r); }
.ink .prod { background: #fff; color: var(--ink); border-color: transparent; }
.ink .prod p { color: var(--ink-soft); }
.ink .prod .more { color: var(--purple-deep); }
.ink a.prod:hover { box-shadow: 0 0 0 2px var(--cream); }

/* What we provide: compact product cards in the home hero */
.svc-lbl { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-tint); margin-bottom: .9rem; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
a.svc { position: relative; display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
a.svc .im { aspect-ratio: 16 / 10; background: var(--paper); overflow: hidden; }
a.svc .im img { width: 100%; height: 100%; object-fit: contain; padding: 7% 9% 0; object-position: center bottom; }
a.svc .im img.cover { object-fit: cover; padding: 0; object-position: left top; }
a.svc .tx { padding: .75rem .9rem .85rem; }
a.svc strong { display: block; font-weight: 500; font-size: .9375rem; line-height: 1.25; }
a.svc .ln { display: block; font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); margin-top: .15rem; }
a.svc .tag-soon { top: 10px; right: 10px; }
a.svc:hover { box-shadow: 0 0 0 2px var(--cream); transform: translateY(-2px); }
@media (max-width: 520px) { a.svc .ln { display: none; } a.svc .tx { padding: .6rem .7rem .7rem; } a.svc strong { font-size: .875rem; } }

/* ---------- figures: play shown as a figure ---------- */
.fig { margin: 0; }
.fig .frame { border-radius: var(--r-card); overflow: hidden; background: var(--paper); border: 1px solid var(--hair); }
.fig .frame img, .fig .frame video { width: 100%; height: auto; }
.fig .frame--contain { padding: clamp(12px, 3vw, 28px); }
.fig .frame--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.fig .frame:has(> img.cover), .fig--world .frame { border-radius: var(--r-world); }
.fig figcaption b { font-weight: 500; }
.fig--founder .frame { overflow: hidden; }
.fig--founder .frame img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 85%; transform: scale(1.35); transform-origin: 95% 45%; }
.fig figcaption { margin-top: .7rem; font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }
.fig figcaption b { font-weight: 500; color: var(--ink); }
.ink .fig .frame { border-color: var(--hair-ink); background: var(--ink-2); }
.ink .fig figcaption { color: var(--on-ink-3); }
.ink .fig figcaption b { color: #fff; }
.zoom { cursor: zoom-in; }

/* ---------- numbers before adjectives ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.facts > div { padding: 1.5rem 1.5rem 0 0; }
.facts > div + div { padding-left: 1.5rem; border-left: 1px solid var(--hair); }
.facts .fig-n { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3rem); line-height: 1.08; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.facts .fig-n small { font-size: .45em; font-weight: 500; letter-spacing: 0; margin-left: .15em; }
.facts .fig-l { margin-top: .5rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.facts .fig-ref { margin-top: .4rem; font-size: .75rem; line-height: 1.4; color: var(--ink-soft); opacity: .85; }
.ink .facts { border-color: var(--hair-ink); }
.ink .facts > div + div { border-color: var(--hair-ink); }
.ink .facts .fig-n { color: #fff; }
.ink .facts .fig-l, .ink .facts .fig-ref { color: var(--on-ink-2); }
@media (max-width: 980px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div { padding-bottom: 1.25rem; }
}
@media (max-width: 359px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .ink .facts > div + div { border-top-color: var(--hair-ink); }
}

/* ---------- steps (the path as progress) ---------- */
.steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gutter); counter-reset: s; position: relative; }
.steps > li { position: relative; padding-top: calc(var(--rise, 0) * 1px); }
.steps .n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); background: var(--purple); color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.steps h3 { font-size: 1.25rem; }
.steps p { margin-top: .5rem; color: var(--ink-soft); }
.ink .steps p { color: var(--on-ink-2); }
.steps .when { display: block; margin-top: .6rem; font-size: .9375rem; color: var(--ink); }
.steps .when b, .steps .when strong { font-weight: 600; }
.ink .steps .when { color: var(--on-ink-2); }
@media (min-width: 981px) {
  .steps--rise > li { margin-top: calc((var(--n, 3) - var(--i, 1)) * 32px); }
  /* the path: each step's tread joins the next step's riser, rising left to right */
  .steps--rise > li::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--gutter)); top: 17px; border-top: 1.5px solid rgba(132,82,181,.5); z-index: -1; }
  .steps--rise > li:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--gutter)); top: -15px; height: 32px; border-left: 1.5px solid rgba(132,82,181,.5); z-index: -1; }
  .steps--rise > li:last-child::before { right: 0; }
  .ink .steps--rise > li::before, .ink .steps--rise > li::after { border-color: rgba(239,230,247,.55); }
}
@media (max-width: 980px) {
  .steps--rise { gap: 32px; }
  .steps--rise > li { padding-left: 54px; }
  .steps--rise .n { position: absolute; left: 0; top: 0; margin: 0; }
  .steps--rise > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: -28px; border-left: 1.5px solid rgba(132,82,181,.45); }
  .ink .steps--rise > li:not(:last-child)::after { border-color: rgba(239,230,247,.45); }
}
.steps .k { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); margin-bottom: .35rem; }
.ink .steps .k { color: var(--purple-tint); }
.steps .more { margin-top: .9rem; }
.steps { isolation: isolate; }
@media (max-width: 980px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Ordered checklist / ticks */
.ticks { list-style: none; padding: 0; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.9rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.15rem; height: 1.15rem; border-radius: 3px; background: var(--purple-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 2.9 6-6.3' fill='none' stroke='%236E3F9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.ink .ticks li::before { background-color: rgba(239,230,247,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 2.9 6-6.3' fill='none' stroke='%23EFE6F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ticks.dim li { color: var(--ink-soft); }
.ticks li.soon { color: var(--ink-soft); }
.ticks li.soon::before { background-image: none; border: 1px dashed rgba(110,63,156,.5); background-color: transparent; }

/* Definition rows (spec sheet) */
.spec { border-top: 1px solid var(--hair); }
.spec > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
.spec dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); padding-top: .2rem; }
.spec dd { margin: 0; }
.spec--compact > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.spec dt.a-focus, .spec dt.a-think, .spec dt.a-memory { display: flex; align-items: center; gap: .5rem; color: var(--a-ink); }
.spec dt.a-focus::before, .spec dt.a-think::before, .spec dt.a-memory::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--a); flex: none; }
.ink .spec, .ink .spec > div { border-color: var(--hair-ink); }
.ink .spec dt { color: var(--on-ink-3); }
@media (max-width: 560px) { .spec > div { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------- product tabs within a page (in-page only, never cross-page) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .8rem; border-radius: var(--r-btn); border: 1px solid var(--hair); background: #fff; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.chip:hover { border-color: var(--purple); }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The product path: where this page sits in the four products */
.ppath { background: var(--ink-2); border-top: 1px solid var(--hair-ink); }
.ppath ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ppath a { display: flex; gap: .6rem; align-items: baseline; padding: .95rem 1rem .95rem 0; color: var(--on-ink-2); text-decoration: none; font-size: .9375rem; border-top: 2px solid transparent; margin-top: -1px; }
.ppath a .i { font-variant-numeric: tabular-nums; font-size: .75rem; letter-spacing: .1em; color: var(--on-ink-3); }
.ppath a:hover { color: #fff; }
.ppath a[aria-current="page"] { color: #fff; border-top-color: var(--cream); }
.ppath a[aria-current="page"] .i { color: var(--cream); }
.ppath .soon { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); margin-left: .25rem; }
@media (max-width: 760px) {
  .ppath ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppath a { padding-block: .7rem; font-size: .875rem; }
}

/* ---------- carousel (scroll-snap, no hidden content) ---------- */
.rail { position: relative; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: max(260px, calc((100% - 2 * var(--gutter)) / 3)); gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: rgba(27,33,57,.25) transparent; overscroll-behavior-x: contain; }
.rail-track > * { scroll-snap-align: start; }
.rail-track--2 { grid-auto-columns: max(280px, calc((100% - var(--gutter)) / 2)); }
@media (min-width: 981px) {
  .rail--all .rail-track { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .rail--all .rail-nav { display: none; }
}
.rail-nav .note { margin-right: auto; align-self: center; font-size: .8125rem; color: var(--ink-soft); }
.rail-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.rail-nav button { flex: none; width: 44px; height: 44px; border-radius: var(--r-btn); border: 1px solid var(--hair); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.rail-nav button:hover { border-color: var(--purple); color: var(--purple-deep); }
.rail-nav button[aria-disabled="true"] { opacity: .35; cursor: default; border-color: var(--hair); color: var(--ink); }
.rail-nav svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .rail-track { grid-auto-columns: 82%; } .rail-track--2 { grid-auto-columns: 86%; } }

/* ---------- accordion (native details) ---------- */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.15rem 0; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: var(--r); border: 1px solid var(--hair); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%231B2139' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: background-color .15s ease; }
.faq details[open] summary::after { background-color: var(--purple-tint); border-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='%231B2139' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq summary:hover { color: var(--purple-deep); }
.faq .a { padding: 0 3.5rem 1.4rem 0; color: var(--ink-soft); }
.faq .a > * + * { margin-top: .8rem; }
.faq .a ul { padding-left: 1.2rem; }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 56px); }
.faq-group > h2 { font-size: 1.375rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .faq .a { padding-right: 0; } }

/* ---------- quote / the meeting point ---------- */
.pull { font-family: var(--f-meet); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.3; max-width: 30ch; }
.pull cite { display: block; margin-top: 1rem; font-family: var(--f-sci); font-style: normal; font-size: .875rem; color: var(--ink-soft); }
.ink .pull cite { color: var(--on-ink-3); }

/* Belief block: science & art */
.belief { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.belief .half { border: 1px solid var(--hair-ink); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); background: rgba(255,255,255,.03); }
.belief .half .label { margin-bottom: .75rem; }
.belief .half h3 { font-size: 1.375rem; }
.belief .half p { margin-top: .6rem; color: var(--on-ink-2); }
.belief .half--art h3 { font-family: var(--f-art); font-weight: 800; color: var(--cream); letter-spacing: 0; }
.belief .join { align-self: center; font-family: var(--f-meet); font-style: italic; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; color: var(--cream); }
@media (max-width: 760px) { .belief { grid-template-columns: 1fr; } .belief .join { justify-self: center; font-size: 3rem; } }

/* ---------- media: video facade ---------- */
.vfacade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; border-radius: var(--r); overflow: hidden; background: #0d1020; cursor: pointer; }
.vfacade img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .2s ease; }
.vfacade:hover img { transform: scale(1.015); opacity: .92; }
.vfacade .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: var(--r-btn); background: var(--purple); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: background-color .15s ease; }
.vfacade .play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.vfacade:hover .play, .vfacade:focus-visible .play { background: var(--purple-deep); }
.vfacade--corner .play { left: 24px; top: auto; bottom: 24px; transform: none; width: 64px; height: 64px; }
.vfacade .dur { position: absolute; right: 12px; bottom: 12px; background: rgba(27,33,57,.88); color: #fff; font-size: .8125rem; font-weight: 500; padding: .25rem .55rem; border-radius: var(--r); font-variant-numeric: tabular-nums; }
.vframe { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; }
.vframe iframe, .vframe video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* YouTube, one tap: the player sits underneath and our cover lies on top without catching taps, so the tap lands on
   YouTube's own player (on iPhones a tap on our page cannot start YouTube). The cover fades when YouTube says it is
   playing, or after a few seconds if YouTube never answers. */
.yt-cover { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.yt-cover img { width: 100%; height: 100%; object-fit: cover; }
.yt-cover .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: var(--r-btn); background: var(--purple); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.yt-cover .play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.yt-cover .dur { position: absolute; right: 12px; bottom: 12px; background: rgba(27,33,57,.88); color: #fff; font-size: .8125rem; font-weight: 500; padding: .25rem .55rem; border-radius: var(--r); font-variant-numeric: tabular-nums; }
.vframe.is-playing .yt-cover, .vframe.no-cover .yt-cover { opacity: 0; visibility: hidden; }
body.play .yt-cover .play { width: 76px; height: 76px; background: var(--purple); border: 3px solid #fff; box-shadow: none; }
.vnative { width: 100%; border-radius: var(--r); background: #000; }

/* ---------- pricing ---------- */
.price-card { border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.price-card .pc-side { background: var(--ink); color: #fff; padding: clamp(24px, 3.5vw, 40px); position: relative; isolation: isolate; overflow: hidden; }
.price-card .pc-main { padding: clamp(24px, 3.5vw, 40px); }
.price-card .amount { font-size: clamp(2.75rem, 2rem + 2.5vw, 3.5rem); line-height: 1; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 1rem; }
.price-card .per { margin-top: .5rem; color: var(--on-ink-2); }
.bands { margin-top: 1.5rem; border-top: 1px solid var(--hair-ink); }
.bands > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--hair-ink); font-variant-numeric: tabular-nums; }
.bands dt { color: var(--on-ink-2); } .bands dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) { .price-card { grid-template-columns: 1fr; } }
.calc { border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); background: var(--paper); }
.calc label { display: block; font-weight: 500; margin-bottom: .5rem; }
.calc .row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.calc input[type="number"] { width: 11rem; }
.calc .out { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.calc .out .v { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc .out .k { font-size: .8125rem; color: var(--ink-soft); margin-top: .25rem; }
.calc .out .main .v { color: var(--purple-deep); }
.calc .how { margin-top: 1rem; font-size: .875rem; color: var(--ink-soft); }
@media (max-width: 560px) { .calc .out { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: .4rem; }
.field .opt { font-weight: 400; color: var(--ink-soft); font-size: .8125rem; margin-left: .3rem; }
.field .hint { font-size: .8125rem; color: var(--ink-soft); margin: -.2rem 0 .45rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid rgba(27,33,57,.55); border-radius: var(--r);
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; border-color: var(--purple); }
input:focus, select:focus, textarea:focus { border-color: var(--purple); }
.field.err input, .field.err select, .field.err textarea { border-color: #B3261E; }
.field .msg { display: none; color: #B3261E; font-size: .8125rem; margin-top: .35rem; }
.field.err .msg { display: block; }
fieldset { border: 0; padding: 0; margin: 0; }
.checks { display: grid; gap: .5rem; }
.checks label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .9375rem; margin: 0; cursor: pointer; }
.checks input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--purple); flex: none; }
@media (pointer: coarse) { .checks { gap: 0; } .checks label { min-height: 44px; align-items: center; } .checks input { margin-top: 0; } }
.form .fine { font-size: .8125rem; color: var(--ink-soft); }
.form-done { display: none; border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); background: var(--paper); }
.form-done.show { display: block; }
.form-done h3 { font-size: 1.375rem; }
.form-done p { margin-top: .5rem; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.person .ph { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--paper); }
.person .ph img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 1.0625rem; margin-top: .8rem; font-weight: 500; }
.person .role { font-size: .875rem; color: var(--purple-deep); margin-top: .1rem; }
.person p { font-size: .875rem; color: var(--ink-soft); margin-top: .5rem; line-height: 1.5; }
.people--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 980px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } .people--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .people, .people--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Team: compact horizontal cards, photo cropped onto the face */
.crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); border-top: 1px solid var(--hair); }
.crew > * { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.crew h3 { font-size: 1.0625rem; font-weight: 500; }
.crew .role { font-size: .875rem; color: var(--purple-deep); margin-top: .1rem; }
.crew p:not(.role) { font-size: .875rem; color: var(--ink-soft); margin-top: .35rem; line-height: 1.5; }
@media (max-width: 980px) { .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .crew { grid-template-columns: minmax(0, 1fr); } }
.mug { width: 88px; height: 88px; border-radius: var(--r); overflow: hidden; background: var(--paper); flex: none; }
.mug img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--y, 30%); transform: scale(var(--z, 1)); transform-origin: var(--x, 50%) var(--y, 30%); }
.ink .crew, .ink .crew > * { border-color: var(--hair-ink); }

/* ---------- blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 980px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.post-card:hover { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.post-card .th { aspect-ratio: 16 / 9; background: var(--ink); position: relative; overflow: hidden; isolation: isolate; }
.post-card .th img { width: 100%; height: 100%; object-fit: cover; }
.post-card .bd { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card .cat { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); }
.post-card h3 { font-size: 1.1875rem; line-height: 1.3; }
.post-card p { font-size: .9375rem; color: var(--ink-soft); }
.post-card .meta { margin-top: auto; padding-top: .5rem; font-size: .8125rem; color: var(--ink-soft); }
.post-card[hidden] { display: none; }
@media (min-width: 981px) { .posts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ink .post-card { color: var(--ink); border-color: transparent; }
.ink .post-card .cat { color: var(--purple-deep); }
.post-card .th img.fit { object-fit: contain; background: var(--paper); padding: 6% 10% 0; object-position: center bottom; }
.post-card .th img.left { object-position: left top; }
@media (max-width: 560px) {
  .posts--compact { gap: 12px; }
  .posts--compact .post-card { flex-direction: row; }
  .posts--compact .post-card .th { flex: none; width: 34%; aspect-ratio: auto; }
  .posts--compact .post-card .bd { padding: 14px 16px 16px; gap: .35rem; }
  .posts--compact .post-card h3 { font-size: 1.0625rem; }
  .posts--compact .post-card p { display: none; }
  .posts--compact .post-card .th img.fit { padding: 10% 8%; object-position: center; }
}
/* typographic thumbnail when there is no image: the path on ink */
.th-type { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px 20px; color: #fff; font-weight: 500; font-size: 1.05rem; line-height: 1.25; }
.th-type::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(132,82,181,.55), rgba(132,82,181,0) 60%), radial-gradient(70% 70% at 100% 0%, rgba(247,234,191,.14), rgba(247,234,191,0) 70%); }

/* Article (blog post, legal) */
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin-top: 2.2em; line-height: 1.25; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .45em; }
.prose blockquote { border-left: 2px solid var(--purple); padding: .2rem 0 .2rem 1.25rem; font-family: var(--f-meet); font-size: 1.25rem; line-height: 1.5; }
.prose .callout { background: var(--paper); border-radius: var(--r); padding: 1.25rem 1.4rem; font-size: 1rem; }
.prose .callout > * + * { margin-top: .6em; }
.prose figure img { border-radius: var(--r); }
.prose figcaption { font-size: .875rem; color: var(--ink-soft); margin-top: .6rem; }
.prose .refs { font-size: .875rem; color: var(--ink-soft); }
.prose > :first-child { margin-top: 0; }
.prose .pull { max-width: none; border-left: 2px solid var(--purple); padding-left: 1.25rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.prose .fig.narrow { max-width: 500px; margin-inline: auto; }
.prose .callout ul { padding-left: 1.1rem; }
.prose .area h3 { margin-top: .6rem; }
.prose .areas { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 561px) {
  .prose .spec > div { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); }
  .prose .area dl > div { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 1rem; align-items: baseline; }
  .prose .area dd { margin: 0; }
}
.legal-grid .prose { max-width: 68ch; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { font-weight: 600; }
.article-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .875rem; color: var(--on-ink-2); margin-top: 1.25rem; }
.article-meta > span { display: inline-flex; align-items: center; gap: .45rem; }
.article-meta svg { width: 16px; height: 16px; flex: none; color: var(--purple-tint); }
.pg-post.hero { padding-top: clamp(40px, 6vw, 72px); }
.pg-post h1 { max-width: 24ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.pg-post ~ .sec { padding-top: clamp(40px, 5vw, 64px); }
.toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: .9375rem; }
.toc a { display: block; padding: .35rem 0 .35rem .9rem; border-left: 1px solid var(--hair); color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--ink); border-left-color: var(--purple); }
.legal-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } .toc { position: static; } }

/* ---------- closing band: one next step, then the fall and the rise ---------- */
.close { text-align: center; padding-block: clamp(72px, 9vw, 112px) 0; overflow: hidden; }
.close .rise { width: 56px; height: auto; margin: 0 auto 1.5rem; }
.close h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem); max-width: 20ch; margin-inline: auto; }
.close .lede { margin: 1rem auto 0; }
.close .actions { justify-content: center; }
.close-device { max-width: 1040px; margin: clamp(40px, 6vw, 64px) auto 0; padding-inline: 4%; text-align: left; }
.close-device .fallrise { max-height: 190px; }
.tagline { font-size: 1rem; line-height: 1.4; color: var(--on-ink-2); }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--on-ink-2); border-top: 1px solid var(--hair-ink); padding-block: clamp(48px, 6vw, 72px) 32px; font-size: .9375rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-grid .lockup .logo { height: 30px; width: auto; }
.foot-grid .tagline { margin-top: 1.1rem; font-size: 1rem; color: #fff; }
.foot-grid .fund { margin-top: 1.25rem; font-size: .8125rem; color: var(--on-ink-3); max-width: 34ch; }
.site-foot .foot-col h2 { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: #fff; margin-bottom: .9rem; }
.site-foot a:not(.btn) { color: var(--on-ink-2); }
.site-foot a:not(.btn):hover { color: #fff; }
@media (pointer: coarse) { .foot-col a { padding: .6rem 0 !important; } }
.foot-col a { display: block; color: var(--on-ink-2); text-decoration: none; padding: .3rem 0; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-legal { margin-top: clamp(40px, 5vw, 56px); padding-top: 1.5rem; border-top: 1px solid var(--hair-ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--on-ink-3); }
.foot-legal a { color: var(--on-ink-2); }
@media (max-width: 980px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(13,16,32,.92); display: none; place-items: center; padding: 4vmin; }
.lb.open { display: grid; }
.lb img { max-width: 100%; max-height: 88vh; border-radius: var(--r); background: #fff; }
.lb .cap { color: var(--on-ink-2); text-align: center; margin-top: .8rem; font-size: .9375rem; }
.lb button { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: var(--r-btn); border: 1px solid var(--hair-ink); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lb button svg { width: 20px; height: 20px; }
.lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .lb { place-items: start; overflow: auto; padding: 72px 0 24px; }
  .lb img { width: 230vw; max-width: none; max-height: none; border-radius: 0; }
  .lb .cap { position: sticky; left: 0; width: 100vw; padding: 0 16px; text-align: left; }
  .lb button { position: fixed; }
}

/* ---------- misc ---------- */
.notice--ic { display: flex; gap: .8rem; align-items: flex-start; }
.notice { border: 1px solid var(--hair); border-left: 3px solid var(--purple); border-radius: var(--r); padding: 1rem 1.15rem; background: #fff; font-size: .9375rem; }
.ink .notice { background: rgba(255,255,255,.04); border-color: var(--hair-ink); border-left-color: var(--cream); }
.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 3px; background: var(--purple-tint); color: var(--purple-deep); }
.ink .badge { background: rgba(247,234,191,.14); color: var(--cream); }
.divider { border: 0; border-top: 1px solid var(--hair); margin: 0; }
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 860px) { .aud { grid-template-columns: 1fr; } }
.kicker-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; color: var(--on-ink-2); margin-top: 1.5rem; }
.kicker-row span { display: inline-flex; align-items: center; gap: .45rem; }
.kicker-row span::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--cream); }
.anchor-nav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--hair); }
.anchor-nav .wrap { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.anchor-nav a { flex: none; padding: .9rem .75rem; font-size: .9375rem; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.anchor-nav a:hover { color: var(--ink); }
.anchor-nav a.on { color: var(--ink); border-bottom-color: var(--purple); }
@media (max-width: 480px) { .anchor-nav a { padding-inline: .55rem; } }

/* ---------- the three areas (Focus, Thinking, Memory) ---------- */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 900px) { .areas { grid-template-columns: 1fr; } }
.area { display: flex; flex-direction: column; border: 1px solid var(--hair); border-top: 3px solid var(--a, var(--purple)); border-radius: var(--r-card); padding: clamp(20px, 2.4vw, 28px); background: #fff; }
.area .k { display: flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--a-ink, var(--purple-deep)); }
.area .k::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--a, var(--purple)); }
.area h3 { margin-top: .6rem; font-size: 1.25rem; }
.area > p { margin-top: .5rem; color: var(--ink-soft); }
.area dl { margin-top: 1rem; border-top: 1px solid var(--hair); }
.area dl > div { padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.area dt { font-weight: 500; }
.area dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.5; }
.area dl { margin-bottom: 1rem; }
.area .helps { margin-top: auto; font-size: .9375rem; background: var(--paper); border-radius: var(--r); padding: .85rem 1rem; }
.area .helps b { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); margin-bottom: .25rem; }
.a-focus, .a-think, .a-memory { --a: var(--purple); --a-ink: var(--purple-deep); }
.ink .area { background: rgba(255,255,255,.03); border-color: var(--hair-ink); border-top-color: var(--a); }
.ink .area .k { color: #fff; }

/* ---------- illustrative dashboard panel (HTML, brand-native; label it "Illustrative") ---------- */
.mock { background: #fff; color: var(--ink); border-radius: var(--r-card); border: 1px solid var(--hair); box-shadow: 0 16px 40px rgba(12,15,30,.08); overflow: hidden; font-size: .875rem; }
.mock-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--hair); }
.mock-top .t { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); }
.mock-top .dots { display: flex; gap: 5px; } .mock-top .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--hair); }
.mock-body { padding: 1.1rem; display: grid; gap: 1rem; }
.mock-head { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.mock-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; align-items: center; }
.mock-row .y { font-size: .8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar { display: flex; height: 14px; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; }
.bar .b1 { background: var(--band-needs); } .bar .b2 { background: var(--band-dev); } .bar .b3 { background: var(--band-ok); } .bar .b4 { background: var(--band-strong); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .75rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mock-note { border-left: 3px solid var(--purple); background: var(--paper); padding: .7rem .85rem; border-radius: 0 var(--r) var(--r) 0; font-size: .8125rem; line-height: 1.45; }
.mock-note b { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-deep); font-weight: 500; margin-bottom: .2rem; }
.mock-chat { display: grid; gap: .5rem; }
.mock-chat .q { justify-self: end; background: var(--ink); color: #fff; border-radius: var(--r) var(--r) 2px var(--r); padding: .55rem .75rem; max-width: 85%; }
.mock-chat .a { justify-self: start; background: var(--purple-tint); border-radius: var(--r) var(--r) var(--r) 2px; padding: .55rem .75rem; max-width: 92%; }

/* ---------- choice cards (book a demo) ---------- */
.choice { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
@media (max-width: 900px) { .choice { grid-template-columns: 1fr; } }
.choice .card h2 { font-size: 1.5rem; }
.choice .card > p { margin-top: .5rem; color: var(--ink-soft); }

/* ---------- article end block ---------- */
.post-end { border-top: 1px solid var(--hair); margin-top: 3rem; padding-top: 2rem; }
.post-end .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .post-end .posts { grid-template-columns: minmax(0, 1fr); } }
.post-end .bridge .label { color: var(--purple-tint); flex-wrap: nowrap; }
.post-end .bridge .more { color: var(--purple-tint); }
.post-end .bridge { background: var(--ink); color: #fff; border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); position: relative; overflow: hidden; isolation: isolate; }
.post-end .bridge p { color: var(--on-ink-2); margin-top: .4rem; }
.post-end .bridge h2 { font-size: 1.375rem; }
.byline { display: flex; align-items: center; gap: .75rem; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* >>> PLAY REGISTER START (pupil pages, body.play; owned by the pupil-page builder) >>> */
/* ==========================================================================
   For young people (body.play): brand guidelines 2.0, part four (pp.17 to 20) and the Pebble Academy look (p.31).
   Real measures, in a world they want to be in. Credibility still leads: who made it, and how the task works.
   - Grounds: cream and purple (rough mix Cream 45 · Purple 30 · White 15 · Ochre 10). The page ground is cream;
     .play-white and .play-purple change it between sections, never within one. Ink only as the game's stage
     (one cream block on it). No glows, no lights.
   - Paper: anything to read sits on a white sheet with a thin outline and 22px corners (main .card). The offset
     shadow (ink outline, purple offset) marks the one thing that matters most on a page (.card--lift).
   - Tape (ink on ochre, a slight tilt, torn ends) labels sections (.label) and figures (.fig--tape, .fig--taped).
   - Stickers (.stk): the assessment's own shapes and colours with a paper border. Bursts (.burst): new strategy only.
   - Nunito for what they read (headlines, buttons, the guide); Jost for body copy, captions, evidence and real scores.
   - Buttons: Nunito Bold pills; hover ochre with ink text; pressed indigo (terracotta for the secondary).
   - The guide (.guide): one cream block in a purple frame; the picked answer turns ochre.
   - Game-world images: 22px, a white paper border and tape (.fig--world). Product screens: 16px paper frames.
   ========================================================================== */
body.play { background: var(--cream); }
body.play .head-cta { display: none; }
@media (max-width: 1080px) { body.play .nav-toggle { margin-left: auto; } }

/* grounds: cream is the page; white and purple change it between sections; ink is the game's stage */
body.play .sec + .sec:not(.ink):not(.world):not(.world-purple) { border-top: 0; }
body.play .hero { background: transparent; }
body.play .play-cream { background: var(--cream); }
body.play .play-white { background: #fff; }
body.play .play-purple, body.play .hero.play-purple { background: var(--purple); color: #fff; }
body.play .ink { background: var(--ink); color: #fff; }
body.play .lit::before, body.play .lit::after { content: none; }
body.play .path { color: var(--purple); opacity: .5; }
body.play .play-purple .path { color: var(--cream); opacity: .6; }

/* type: Nunito for what they read; the one married headline starts in Jost and answers in Nunito */
body.play h1, body.play h2, body.play h3, body.play h4, body.play .h2, body.play .h3 { font-family: var(--f-art); font-weight: 800; letter-spacing: -.008em; }
body.play h1 { font-size: clamp(2.375rem, 1.45rem + 3.3vw, 3.75rem); line-height: 1.05; }
body.play h1:has(> .married) { font-family: var(--f-sci); font-weight: 500; letter-spacing: -.02em; }
body.play h1 > .married { display: block; font-family: var(--f-art); font-weight: 800; color: var(--purple); letter-spacing: -.012em; }
body.play .play-purple h1 > .married, body.play .ink h1 > .married { color: var(--cream); }
body.play .hero h1 { max-width: 15ch; }
body.play .lede { color: var(--ink-soft); }
body.play .play-purple .lede { color: rgba(255,255,255,.92); }
body.play .ink .lede { color: var(--on-ink-2); }
body.play .play-purple .muted { color: rgba(255,255,255,.88); }
body.play .play-purple a:not(.btn), body.play .play-purple .more { color: #fff; }
body.play .play-purple .crumbs, body.play .play-purple .crumbs a { color: rgba(255,255,255,.86); }
body.play .human { font-family: var(--f-art); font-weight: 800; }

/* tape: section labels, ink on ochre, a slight tilt and torn ends */
body.play .label {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .5rem;
  margin-bottom: 1.15rem; padding: .4rem .95rem .44rem;
  background: var(--ochre); color: var(--ink);
  font-family: var(--f-art); font-weight: 800; font-size: .875rem; line-height: 1.2; letter-spacing: 0; text-transform: none;
  transform: rotate(-1.6deg); transform-origin: 0 50%;
  clip-path: polygon(0 3px, 6px 0, calc(100% - 7px) 2px, 100% 0, calc(100% - 3px) 28%, 100% 52%, calc(100% - 4px) 76%, 100% 100%, 7px calc(100% - 2px), 0 100%, 4px 70%, 0 46%, 3px 22%);
}
body.play .label::before { content: none; }
body.play .center .label { margin-inline: auto; transform-origin: 50% 50%; }
body.play .ink .label, body.play .play-purple .label { color: var(--ink); }
body.play .tape-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.15rem; }
body.play .tape-row .label { margin-bottom: 0; }
body.play .badge { background: transparent; color: var(--ink); border: 1.5px solid currentColor; border-radius: var(--r-btn); padding: .26rem .7rem; font-family: var(--f-sci); font-weight: 500; font-size: .6875rem; letter-spacing: .12em; }
body.play .play-purple .badge, body.play .ink .badge { color: var(--cream); background: transparent; }

/* the partner line: credibility first, worded exactly */
body.play .partner { margin-top: 1.5rem; padding-top: .9rem; border-top: 1px solid var(--hair); max-width: 34rem; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
body.play .play-purple .partner { color: #fff; border-top-color: rgba(255,255,255,.32); }

/* buttons: Nunito Bold pills (the header keeps the showcase button) */
body.play main .btn { --b-bg: var(--purple); --b-fg: #fff; --b-bd: var(--purple); font-family: var(--f-art); font-weight: 700; font-size: 1rem; border-width: 1.5px; }
body.play main .btn:hover { --b-bg: var(--ochre); --b-fg: var(--ink); --b-bd: var(--ochre); }
body.play main .btn:active { --b-bg: var(--indigo); --b-fg: #fff; --b-bd: var(--indigo); }
body.play main .btn--ghost { --b-bg: #fff; --b-fg: var(--purple-deep); --b-bd: var(--purple); }
body.play main .btn--ghost:hover { --b-bg: var(--ochre); --b-fg: var(--ink); --b-bd: var(--ochre); }
body.play main .btn--ghost:active { --b-bg: var(--terracotta); --b-fg: #fff; --b-bd: var(--terracotta); }
body.play main .play-purple .btn, body.play main .ink .btn { --b-bg: var(--cream); --b-fg: var(--ink); --b-bd: var(--cream); }
body.play main .play-purple .btn:hover, body.play main .ink .btn:hover { --b-bg: var(--ochre); --b-fg: var(--ink); --b-bd: var(--ochre); }
body.play main .play-purple .btn:active, body.play main .ink .btn:active { --b-bg: var(--indigo); --b-fg: #fff; --b-bd: var(--indigo); }

/* pill links (on-page jumps and the student sub-nav): white pills with an ink outline, ochre on hover */
body.play .subnav-play { display: flex; flex-wrap: wrap; gap: .5rem; }
body.play .subnav-play a { display: inline-flex; min-height: 44px; align-items: center; gap: .5rem; padding: .4rem .95rem .4rem .45rem; border-radius: var(--r-btn); background: #fff; color: var(--ink); border: 1.5px solid var(--ink); text-decoration: none; font-family: var(--f-art); font-weight: 700; font-size: .9375rem; transition: background-color .15s ease; }
body.play .subnav-play a .i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; font-family: var(--f-sci); font-weight: 600; font-size: .8125rem; font-variant-numeric: tabular-nums; }
body.play .subnav-play a:hover, body.play .subnav-play a[aria-current="page"] { background: var(--ochre); }
body.play .subnav-play a:hover .i, body.play .subnav-play a[aria-current="page"] .i { background: var(--ink); }
body.play .subnav-play a:active { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* paper: a white sheet with a thin outline; the offset shadow for the one thing that matters most */
body.play main .card, body.play main .card--cream, body.play main .card--paper { background: #fff; color: var(--ink); border: 1px solid rgba(27,33,57,.22); border-radius: var(--r-world); }
body.play main .card h3 { font-size: 1.25rem; line-height: 1.25; }
body.play main .card h3 + p, body.play main .card p { color: var(--ink-soft); }
body.play main .card .human { color: var(--ink); }
body.play main .card--lift { border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--purple); }
body.play main .ic-sq { width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--ink); }
body.play main .ic-sq svg { width: 22px; height: 22px; }
body.play main .card > .backing { margin-top: 0; border-top: 0; border-bottom: 0; }
body.play .ticks li::before { border-radius: 50%; background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.8 2.7 5.6-5.9' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 76% no-repeat; }

/* figures: product screens on 16px paper; the game world at 22px with a paper border; tape; Fig. n captions */
body.play .fig { position: relative; }
body.play .fig .frame { position: relative; background: #fff; border: 1px solid rgba(27,33,57,.16); border-radius: var(--r-card); padding: 8px; }
body.play .fig .frame img { border-radius: 9px; }
body.play .fig .frame > .demo { position: absolute; top: 18px; right: 18px; z-index: 1; }
body.play .fig--world .frame, body.play .fig--world .vfacade, body.play .fig--world .vframe { padding: 0; background: #fff; border: 6px solid #fff; border-radius: var(--r-world); box-shadow: 0 0 0 1px rgba(27,33,57,.14); }
body.play .fig--world .frame img { border-radius: 16px; }
body.play .ink .fig--world .frame, body.play .ink .fig--world .vfacade, body.play .ink .fig--world .vframe { box-shadow: none; }
body.play .fig--tape::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 96px; height: 23px; margin-left: -48px; background: rgba(210,155,46,.92); transform: rotate(-2.2deg); pointer-events: none;
  clip-path: polygon(0 2px, 5px 0, calc(100% - 4px) 3px, 100% 0, calc(100% - 3px) 50%, 100% 100%, 6px calc(100% - 2px), 0 100%, 3px 50%); }
body.play .fig figcaption { margin-top: .85rem; font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }
body.play .fig figcaption b { font-weight: 500; color: var(--ink); }
body.play .play-purple .fig figcaption { color: rgba(255,255,255,.9); }
body.play .play-purple .fig figcaption b, body.play .ink .fig figcaption b { color: #fff; }
body.play .ink .fig figcaption { color: var(--on-ink-2); }

/* the trailer: a pill play button with a paper border; the duration as tape */
body.play .vfacade .play { width: 76px; height: 76px; background: var(--purple); border: 3px solid #fff; box-shadow: none; }
body.play .vfacade:hover .play, body.play .vfacade:focus-visible .play { background: var(--ochre); }
body.play .vfacade:hover .play svg, body.play .vfacade:focus-visible .play svg { fill: var(--ink); }
body.play .vfacade .dur { left: 14px; right: auto; bottom: 14px; padding: .3rem .8rem; border-radius: 0; background: var(--ochre); color: var(--ink); font-family: var(--f-art); font-weight: 800; transform: rotate(-2deg);
  clip-path: polygon(0 2px, 5px 0, calc(100% - 4px) 3px, 100% 0, calc(100% - 3px) 50%, 100% 100%, 6px calc(100% - 2px), 0 100%, 3px 50%); }

/* rails: room for the tape; pill controls */
body.play .rail-track { padding-top: 14px; }
body.play .rail-nav button { border: 1.5px solid var(--ink); background: #fff; color: var(--ink); }
body.play .rail-nav button:hover { background: var(--ochre); border-color: var(--ink); color: var(--ink); }
body.play .rail-nav .note { color: var(--ink-soft); }

/* stickers: the assessment's own shapes and colours, with a paper border; no words needed */
body.play .stk { position: absolute; z-index: 3; width: 46px; height: 46px; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(27,33,57,.3)); pointer-events: none; }
body.play .stk * { stroke: #fff; stroke-width: 5; stroke-linejoin: round; paint-order: stroke; }
body.play .stk--tl { top: -20px; left: -18px; transform: rotate(-8deg); }
body.play .stk--tr { top: -20px; right: -18px; transform: rotate(10deg); }
@media (max-width: 640px) {
  body.play .stk { width: 36px; height: 36px; }
  body.play .stk--tl { top: -16px; left: -8px; }
  body.play .stk--tr { top: -16px; right: -8px; }
}
/* bursts: for a new strategy only */
body.play .burst { position: absolute; z-index: 3; width: 112px; height: 112px; overflow: visible; transform: rotate(-9deg); pointer-events: none; }
body.play .burst path { fill: var(--ochre); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
body.play .burst text { font-family: var(--f-art); font-weight: 800; font-size: 16px; fill: var(--ink); text-anchor: middle; }
body.play .burst--tr { top: -34px; right: -16px; }
@media (max-width: 640px) { body.play .burst { width: 92px; height: 92px; } body.play .burst--tr { top: -28px; right: -6px; } }

/* the guide: one cream block in a purple frame; the picked answer turns ochre (and is ticked) */
body.play .guide { display: grid; gap: .5rem; max-width: 30rem; }
body.play .guide-box { background: var(--cream); color: var(--ink); border: 4px solid var(--purple); border-radius: 14px; padding: .75rem 1.1rem .85rem; }
body.play .guide-box b { display: block; font-family: var(--f-art); font-weight: 800; font-size: .8125rem; color: var(--purple-deep); }
body.play .guide-box p { margin-top: .1rem; font-family: var(--f-art); font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--ink); }
body.play .guide-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
body.play .guide-picks li { display: flex; align-items: center; gap: .55rem; padding: .6rem 1rem; border-radius: 10px; background: #fff; color: var(--ink); border: 1px solid var(--hair); font-family: var(--f-art); font-weight: 700; font-size: .9375rem; line-height: 1.3; }
body.play .guide-picks li.on { background: var(--ochre); border-color: var(--ochre); }
body.play .guide-picks li.on::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4l2.8 2.7 5.6-5.9' fill='none' stroke='%23F7EABF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat; }
body.play .ink .guide-picks li { background: var(--ink-2); color: #fff; border-color: var(--hair-ink); }
body.play .ink .guide-picks li.on { background: var(--ochre); color: var(--ink); border-color: var(--ochre); }

/* people: photos with rounded corners */
body.play .person .ph { border-radius: var(--r-card); background: #fff; }
body.play .person .role { color: var(--purple-deep); }

/* other shared pieces, dressed for the room (not used on the pupil pages today) */
body.play main .prod, body.play main .post-card { border-radius: var(--r-world); }
body.play .chip { border-radius: var(--r-btn); font-family: var(--f-art); font-weight: 700; }
body.play .chip[aria-pressed="true"], body.play .chip[aria-current="page"] { background: var(--ochre); color: var(--ink); border-color: var(--ochre); }
body.play .steps .n { border-radius: 50%; }
body.play .faq summary { font-family: var(--f-art); font-weight: 700; }

/* the close: one next step on purple, then the fall and the rise (white slope, cream steps) */
body.play .close { padding-block: clamp(64px, 8vw, 104px) 0; }
body.play .play-purple .fallrise .fr-slope { fill: #fff; }
body.play .play-purple .fallrise .fr-steps { stroke: var(--cream); }
body.play .play-purple .fallrise .fr-label { fill: #fff; font-family: var(--f-art); font-weight: 800; }
@media (max-width: 640px) { body.play .fallrise .fr-label { display: none; } }   /* too small to read on a phone: the steps carry it */

/* <<< PLAY REGISTER END <<< */

/* ==========================================================================
   Shared components (showcase and the pupils' world) — moved out of the play region
   ========================================================================== */
/* ---------- the pupils' world, further down an adult page: cream and purple, ochre only where play happens ---------- */
.world { background: var(--cream); color: var(--ink); }
.world .label { color: var(--purple-deep); }
.world h2 .married, .world .married { color: var(--purple); }
.world .lede, .world .muted { color: var(--ink-soft); }
.world-purple { background: var(--purple); color: #fff; }
.world-purple .label { color: var(--cream); }
.world-purple .lede { color: rgba(255,255,255,.9); }
.paper-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-world); padding: clamp(18px, 2.4vw, 26px); }
.paper-card--lift { border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--purple); }
.tape { display: inline-block; background: var(--ochre); color: var(--ink); font-family: var(--f-art); font-weight: 800; font-size: .8125rem; padding: .3rem .75rem; transform: rotate(-2.5deg); clip-path: polygon(2% 0, 98% 6%, 100% 92%, 1% 100%, 0 48%); }
.fig--taped { position: relative; }
.fig--taped .frame { border-radius: var(--r-world); border: 0; background: #fff; padding: 7px; }
.fig--taped .frame img { border-radius: 16px; }
.fig--taped::before, .fig--taped::after { content: ""; position: absolute; top: -10px; width: 72px; height: 22px; background: rgba(210,155,46,.85); z-index: 2; }
.fig--taped::before { left: 8%; transform: rotate(-6deg); }
.fig--taped::after { right: 8%; transform: rotate(5deg); }
.world .fig figcaption, .world-purple .fig figcaption { color: var(--ink-soft); }
.world-purple .fig figcaption { color: rgba(255,255,255,.9); }
.strat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.strat > div { background: var(--ink); color: #fff; border-radius: 14px; padding: 1rem; border: 3px solid var(--ochre); }
.strat b { display: block; font-family: var(--f-art); font-weight: 800; color: var(--cream); }
.strat span { display: block; margin-top: .25rem; font-size: .875rem; color: var(--on-ink-2); }
@media (max-width: 640px) { .strat { grid-template-columns: 1fr; } }

/* ---------- schools using Veyra (hidden until permission) ---------- */
.logos { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; list-style: none; padding: 0; margin: 0; }
.logos img { height: 40px; width: auto; filter: grayscale(1); opacity: .8; }

/* ---------- time saved: where the time goes now, and with Veyra ---------- */
.swap { border-top: 1px solid var(--hair); }
.swap > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); padding: 1.1rem 0; border-bottom: 1px solid var(--hair); align-items: start; }
.swap .now { color: var(--ink-soft); }
.swap .now::before, .swap .with::before { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-bottom: .3rem; }
.swap > div:first-child .now::before { content: "Now"; }
.swap > div:first-child .with::before { content: "With Veyra"; color: var(--purple-deep); }
.swap .with { font-weight: 500; }
.ink .swap, .ink .swap > div { border-color: var(--hair-ink); }
.ink .swap .now { color: var(--on-ink-2); }
.ink .swap > div:first-child .with::before { color: var(--purple-tint); }
@media (max-width: 640px) {
  .swap > div { grid-template-columns: 1fr; gap: .3rem; padding: .85rem 0; }
  .swap .now { font-size: .9375rem; }
  .swap .now::before, .swap > div:first-child .now::before { content: "Now: " !important; display: inline; font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 500; margin: 0; color: inherit; }
  .swap .with { padding-left: .75rem; border-left: 2px solid var(--purple); }
  .swap .with::before, .swap > div:first-child .with::before { content: none !important; }
  .ink .swap .with { border-left-color: var(--purple-tint); }
}

/* ---------- price tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier { border: 1px solid var(--hair); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); background: #fff; display: flex; flex-direction: column; }
.tier .amount { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.25rem); line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: .75rem; }
.tier .per { margin-top: .4rem; color: var(--ink-soft); }
.tier .ticks { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.tier--more { border-color: var(--hair); }
.ink .tier { background: rgba(255,255,255,.04); border-color: var(--hair-ink); }
.ink .tier .per { color: var(--on-ink-2); }

@media (max-width: 400px) { .head-cta { padding-inline: .75rem; font-size: .875rem; } }


/* ==========================================================================
   Brand 2.0 (13 Oct edition) consolidation, from the page builders' notes
   ========================================================================== */
:where(.fig) { margin: 0; }
/* two-tone headlines: the purple answer starts its own line */
.hero h1 .cream { display: block; }
.hero h1 { max-width: 20ch; }
/* product screens are evidence: white paper, hairline; DEMO DATA pinned to the frame */
.fig .frame { background: #fff; position: relative; }
.fig--screen .frame { border-radius: var(--r); padding: clamp(8px, 1.5vw, 14px); }
.fig .frame > .demo, .prod .shot > .demo { position: absolute; top: 10px; right: 10px; z-index: 1; border: 1px solid rgba(110,63,156,.28); }
.prod .shot { background: #fff; }
.mock { box-shadow: none; }
.mock-top .demo { flex: none; white-space: nowrap; }
.mock-top .dots { display: none; }
.vfacade .play { box-shadow: none; }
.vfacade--world { border-radius: var(--r-world); }
/* soft fills retire: showcase cards are white paper with a hairline */
.card--paper { background: #fff; border-color: var(--hair); }
.shot--ink::before, .th-type::before { content: none; }
/* data cards */
.calc { background: #fff; border-radius: var(--r); }
.calc .out .main .v { color: var(--ink); }
.bands { border-top: 1px solid var(--hair); }
.bands > div { border-bottom: 1px solid var(--hair); }
.bands dt { color: var(--ink-soft); }
.ink .bands, .ink .bands > div, .pc-side .bands, .pc-side .bands > div { border-color: var(--hair-ink); }
.ink .bands dt, .pc-side .bands dt { color: var(--on-ink-2); }
.ev-card .fact .k { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); }
.ev-card .fact .v { font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); line-height: 1.05; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .4rem; }
.ev-card .fact .v small { font-size: .45em; font-weight: 500; color: var(--ink-soft); }
.ev-card .fact .n { margin-top: .4rem; font-size: .875rem; color: var(--ink-soft); }
.spec dt { color: var(--purple-deep); }
/* hairlines are 1px */
.notice { border-left-width: 2px; }
.area { border-top-width: 1px; border-top-color: var(--hair); }
.area .k::before { background: var(--purple); }
/* the cream block keeps on-white colours even inside an ink section */
.ink .cream-block { color: var(--ink); }
.ink .cream-block .muted, .ink .cream-block .lede, .ink .cream-block p { color: var(--ink-soft); }
.ink .cream-block .spec, .ink .cream-block .spec > div { border-color: var(--hair); }
.ink .cream-block .spec dt { color: var(--purple-deep); }
.ink .cream-block a:not(.btn) { color: var(--purple-deep); }
/* product cards on ink keep their white-card text */
.ink .prod h3 + p, .ink a.card.prod p { color: var(--ink-soft); }
.ink .prod .ticks li::before { background-color: var(--purple-tint); }
/* blog bylines and kicker rows on white heroes */
.article-meta { color: var(--ink-soft); }
.article-meta svg { color: var(--purple-deep); }
.kicker-row { color: var(--ink-soft); }
.kicker-row span::before { background: var(--purple); }
.prose .callout { background: var(--cream); border-radius: var(--r-card); }
.ink .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.ink .chip[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
/* the pupils' world inside adult pages */
.world-purple .married { color: var(--cream); }
.world-purple .fig figcaption b { color: #fff; }
.world-purple :focus-visible { outline-color: var(--cream); }
.world + .sec, .world-purple + .sec, .sec + .world, .sec + .world-purple { border-top: 0; }
/* the blueprint rises: equal boxes stepped up, on a fine cream staircase */
@media (min-width: 761px) {
  .blueprint ol { align-items: stretch; padding-bottom: calc((var(--n, 4) - 1) * 26px + 14px); }
  .blueprint li { margin-top: 0; transform: translateY(calc((var(--n, 4) - var(--i, 1)) * 26px)); }
  .blueprint li::before { content: ""; position: absolute; left: -9px; right: -9px; bottom: -10px; border-bottom: 1.5px solid rgba(247,234,191,.6); }
  .blueprint li:not(:last-child)::after { content: ""; position: absolute; right: -9px; bottom: -10px; height: 26px; border-right: 1.5px solid rgba(247,234,191,.6); }
}
@media (max-width: 760px) { .blueprint ol { grid-template-columns: 1fr; } }
/* the evidence strip in four */
.backing--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .backing--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .backing--4 li:nth-child(3) { border-left: 0; padding-left: 0; } .backing--4 li:nth-child(n+3) { border-top: 1px solid var(--hair); } .backing--4 li:nth-child(4) { border-left: 1px solid var(--hair); padding-left: 1.1rem; } }
/* the logotype never inherits label styling */
svg.logo, .logo text { text-transform: none; letter-spacing: 0; }
/* the fall and the rise: tread labels are too small to read on phones */
@media (max-width: 640px) { .fallrise .fr-label { display: none; } }
/* phones: the header already carries the one action, so the menu fits a short screen */
@media (max-width: 1080px) { :where(body:not(.play)) .nav > .btn { display: none; } }

/* ---------- print ---------- */
@media print {
  .site-head, .site-foot, .close, .anchor-nav, .vfacade, .rail-nav { display: none !important; }
  .ink { background: #fff; color: var(--ink); }
  .lit::before, .lit::after, .path { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   v3.3 direction (Sam, 13 Oct): fewer words, more colour. White header over an ink first screen (the stage),
   purple for big moments, cream for the pupils' world, white only for reading. Big type, real product.
   ========================================================================== */
/* header stays white (Sam, 13 Oct: the header should differ from the ink hero) */
/* solid, no backdrop-filter: a filter makes the header the containing block of the fixed phone menu and clips it */
.site-head { background: #fff; backdrop-filter: none; }
.hero.ink { background: var(--ink); color: #fff; }
.hero.ink .lede { color: var(--on-ink-2); }
.hero.ink .label { color: var(--purple-tint); }
.hero.ink .backing { border-color: var(--hair-ink); }
.hero.ink .backing li + li { border-color: var(--hair-ink); }
.hero.ink .backing .k { color: var(--purple-tint); }
.hero.ink .backing .v { color: #fff; }
.hero.ink .fig figcaption { color: var(--on-ink-3); }
.big { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 500; max-width: 18ch; text-wrap: balance; }
.say { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.45; max-width: 46ch; color: var(--ink-soft); margin-top: 1rem; }
.ink .say, .band-purple .say { color: var(--on-ink-2); }
/* purple: the big moment */
.band-purple { background: var(--purple); color: #fff; }
.band-purple .label { color: var(--cream); }
.band-purple .label::before { background: var(--cream); }
.band-purple a { color: #fff; }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(32px, 4vw, 48px); }
.numbers > div { border-top: 1px solid rgba(255,255,255,.35); padding-top: 1rem; }
.numbers .n { font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.numbers .n small { font-size: .38em; font-weight: 500; letter-spacing: 0; margin-left: .15em; }
.numbers p { margin-top: .6rem; font-size: 1.0625rem; line-height: 1.4; }
.numbers .src { display: block; margin-top: .4rem; font-size: .8125rem; color: rgba(255,255,255,.85); }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr; } }
/* the journey: the fall and the rise across the top, three steps beneath */
.journey .fallrise { max-height: 150px; }
.journey .fallrise .fr-label { font-size: 26px; fill: var(--ink); font-weight: 600; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(24px, 3vw, 36px); }
.steps3 .shot { aspect-ratio: 4 / 3; background: var(--paper); border-radius: var(--r-card); overflow: hidden; display: grid; place-items: center; }
.steps3 .shot img { width: 100%; height: 100%; object-fit: contain; padding: 6% 8% 0; object-position: center bottom; }
.steps3 .shot img.cover { object-fit: cover; padding: 0; object-position: left top; }
.steps3 .k { display: block; margin-top: 1rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); }
.steps3 h3 { margin-top: .3rem; font-size: 1.375rem; }
.steps3 p { margin-top: .35rem; color: var(--ink-soft); }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; } .journey .fallrise { display: none; } }
/* short, strong lists */
.lines { list-style: none; padding: 0; margin: clamp(28px, 4vw, 40px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.lines li { padding: 1.1rem 0; border-top: 1px solid var(--hair-ink); font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.35; display: flex; gap: .8rem; align-items: baseline; }
.lines li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--cream); transform: translateY(1px); clip-path: polygon(0 100%, 0 66%, 33% 66%, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%); }
@media (max-width: 760px) { .lines { grid-template-columns: 1fr; } }
/* price, said once */
.price-line { display: flex; flex-wrap: wrap; gap: var(--gutter); margin-top: clamp(24px, 3vw, 36px); }
.price-line > div { flex: 1 1 260px; background: var(--cream); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); }
.price-line .amount { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.price-line p { margin-top: .5rem; color: var(--ink-soft); }
a.step3 { display: block; text-decoration: none; color: inherit; }
a.step3:hover h3 { color: var(--purple-deep); text-decoration: underline; text-underline-offset: .15em; }
a.step3:hover .shot { box-shadow: 0 0 0 2px var(--purple); }
.band-purple :focus-visible { outline-color: var(--cream); }
.price-line .amount { color: var(--ink); }
.close:not(:has(.close-device)) { padding-bottom: clamp(72px, 9vw, 112px); }
/* everything in one place: six short tiles */
.one { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(28px, 4vw, 44px); }
.one > div { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.one h3 { font-size: 1.3125rem; margin-top: .2rem; }
.one p { margin-top: .35rem; color: var(--ink-soft); }
.one .ic-sq { margin-bottom: .8rem; }
@media (max-width: 860px) { .one { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .one { grid-template-columns: 1fr; } }
.lines--light li { border-top-color: rgba(255,255,255,.35); }
.hero.ink .svc-lbl { color: var(--purple-tint); }
/* home hero: the product leads */
@media (min-width: 981px) { .hero-grid--product { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.svc-grid--big { gap: 16px; }
.svc-grid--big a.svc .im { aspect-ratio: 4 / 3; }
.svc-grid--big a.svc .tx { padding: .9rem 1rem 1rem; }
.svc-grid--big a.svc strong { font-size: 1.0625rem; }
@media (max-width: 980px) {
  .hero > .wrap:has(> .hero-grid--product + .backing) > .hero-grid--product > :last-child { order: 2; margin-top: 32px; }
  .hero > .wrap:has(> .hero-grid--product + .backing) > .backing { order: 3; margin-top: 32px; }
}
/* understand more: the video in a compact box */
.more-box { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; background: var(--ink); color: #fff; border-radius: var(--r-card); padding: clamp(16px, 2vw, 24px); }
.more-box .label { color: var(--purple-tint); }
.more-box h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.more-box p:not(.label) { margin-top: .5rem; color: var(--on-ink-2); }
.more-box a:not(.btn) { color: var(--purple-tint); }
.more-box :focus-visible { outline-color: var(--cream); }
@media (max-width: 760px) { .more-box { grid-template-columns: 1fr; } }
/* home hero: less air above, so the backing shows on a laptop's first screen */
@media (min-width: 981px) { .hero:has(.hero-grid--product) { padding-top: clamp(36px, 4vw, 56px); } }
/* backed by: the official marks on white tiles (UKRI/Innovate UK, BAC) */
.backed { margin-top: clamp(28px, 3.5vw, 40px); }
.backed .svc-lbl { margin-bottom: .75rem; }
.backed-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 28px; }
.backed-row li { display: flex; align-items: center; gap: 12px; }
@media (max-width: 420px) { .backed-row { grid-template-columns: 1fr; } }
.backed-logo { flex: none; display: grid; place-items: center; height: 60px; padding: 7px 9px; background: #fff; border: 1px solid var(--hair); border-radius: 8px; }
.ink .backed-logo { border-color: #fff; }
.backed-logo img { height: 44px; width: auto; }
.backed-tx { font-size: .8125rem; line-height: 1.4; color: var(--ink-soft); }
.backed-tx strong { display: block; font-weight: 500; color: var(--ink); }
.ink .backed-tx { color: var(--on-ink-2); }
.ink .backed-tx strong { color: #fff; }
.foot-backed { display: flex; gap: 10px; margin-top: 1.1rem; }
.foot-backed span { display: grid; place-items: center; height: 52px; padding: 6px 8px; background: #fff; border-radius: 8px; }
.foot-backed img { height: 38px; width: auto; }

/* ==========================================================================
   v3.4 (Sam, 13 Oct): the homepage treatment on every page. White header, ink hero with the product,
   few words, colour-led grounds (ink, purple, cream; white for reading).
   ========================================================================== */
/* one big product picture on an ink hero */
.hero-pic { margin: 0; }
.hero-pic .frame { position: relative; aspect-ratio: 4 / 3; background: var(--paper); border-radius: var(--r-card); overflow: hidden; }
.hero-pic .frame img { width: 100%; height: 100%; object-fit: contain; padding: 6% 8% 0; object-position: center bottom; }
.hero-pic .frame img.cover { object-fit: cover; padding: 0; object-position: center; }
.hero-pic .frame img.wide { padding: 5%; object-position: center; }
.hero-pic .frame .demo { position: absolute; top: 12px; right: 12px; }
.hero-pic .frame .tag-soon { top: 12px; right: 12px; }
.hero-pic figcaption { margin-top: .7rem; font-size: .8125rem; color: var(--on-ink-3); }
/* three tiles in a row */
.svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-grid--3 a.svc .im { aspect-ratio: 4 / 3; }
a.svc .k { display: block; font-size: .6875rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--purple-deep); margin-bottom: .2rem; }
@media (max-width: 520px) { .svc-grid--3 { gap: 8px; } .svc-grid--3 a.svc .im img { padding: 6% 6% 0; } }
/* tiles on ink */
.ink .one > div { border-top-color: rgba(255,255,255,.55); }
.ink .one p { color: var(--on-ink-2); }
/* one line under a section */
.foot-note { margin-top: clamp(24px, 3vw, 36px); max-width: 64ch; color: var(--ink-soft); }
.ink .foot-note, .band-purple .foot-note { color: var(--on-ink-2); }
.foot-note a { white-space: nowrap; }
/* hero, stacked: the headline beside the lede and buttons, then the product full width */
.hero-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.hero-head h1 { max-width: 16ch; }
.hero-head .lede { margin-top: 0; }
.hero-head .label { grid-column: 1 / -1; margin-bottom: -.25rem; }
.hero-wide { margin-top: clamp(32px, 4vw, 52px); }
.hero-wide.svc-grid--3 a.svc .im { aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .hero-head { grid-template-columns: 1fr; } }
@media (min-width: 981px) { .hero.ink { padding-top: clamp(36px, 4vw, 56px); } }
/* lede on purple: full white (74% white fails AA on purple) */
.band-purple .say { color: #fff; }
/* phones: hero tiles become rows, so each keeps its one line */
@media (max-width: 520px) {
  .hero-wide.svc-grid--3 { grid-template-columns: 1fr; gap: 10px; }
  .hero-wide a.svc { flex-direction: row; align-items: center; }
  .hero-wide a.svc .im { flex: 0 0 40%; aspect-ratio: 4 / 3; }
  .hero-wide a.svc .tx { padding: .6rem .8rem; }
  .hero-wide a.svc .ln { display: block; }
}
/* bylines and kicker rows on ink heroes */
.ink .article-meta, .ink .kicker-row { color: var(--on-ink-2); }
.ink .article-meta svg { color: var(--purple-tint); }
/* a wide frame for the wide dashboard shot */
.hero-pic .frame.frame--wide { aspect-ratio: 16 / 10; }
/* header in purple (Sam, 13 Oct): white and cream on purple, on every page (the adult heroes are ink, the pupils' cream) */
.site-head { background: var(--purple); color: #fff; border-bottom-color: transparent; }
.site-head :focus-visible { outline-color: var(--cream); }
.head-cta { background: #fff; color: var(--purple-deep); border-color: #fff; }
.head-cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.nav-toggle { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
@media (min-width: 1081px) {
  .nav > a:not(.btn), .nav .dd > button { color: #fff; }
  .nav > a:not(.btn):hover, .nav .dd > button:hover, .nav .dd.open > button { color: #fff; background: rgba(255,255,255,.14); }
  .nav > a[aria-current="page"], .nav .dd.current > button { color: #fff; box-shadow: inset 0 -2px 0 var(--cream); }
  .nav > .btn { background: #fff; color: var(--purple-deep); border-color: #fff; }
  .nav > .btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .site-head .dd-panel :focus-visible { outline-color: var(--purple); }
}
/* the journey on the homepage: Assess, Support, Track, one section each */
.jbar { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jbar li { font-size: .75rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink-soft); }
.jbar li[aria-current] { background: var(--purple); border-color: var(--purple); color: #fff; }
.ink .jbar li { border-color: var(--hair-ink); color: var(--on-ink-2); }
.ink .jbar li[aria-current] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.jlist { list-style: none; margin: clamp(20px, 3vw, 28px) 0 0; padding: 0; max-width: 34rem; }
.jlist li { display: flex; gap: .8rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--hair); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.4; }
.jlist li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--purple); transform: translateY(1px); clip-path: polygon(0 100%, 0 66%, 33% 66%, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%); }
.ink .jlist li { border-top-color: var(--hair-ink); }
.ink .jlist li::before { background: var(--cream); }
.jstep .split { align-items: center; }
.jstep .hero-pic .frame.frame--fit { aspect-ratio: auto; background: var(--cream); }
.jstep .hero-pic .frame.frame--fit img { height: auto; padding: 0; }
@media (min-width: 981px) { .jstep--flip .split > figure { order: -1; } }
/* How it works on the homepage: a three-step stepper (all three steps readable at a glance), one panel at a time.
   Each step is a tab; "Next" walks the story. Without the script, all three panels show, stacked. */
.steps-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: clamp(24px, 3vw, 36px) 0 clamp(28px, 4vw, 44px); }
.steps-bar [role="tab"] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center; text-align: left; padding: 1rem 0 .25rem; border: 0; border-top: 3px solid var(--hair); border-radius: 0; background: none; color: var(--ink-soft); font: inherit; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.steps-bar .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; font-size: .8125rem; font-weight: 600; }
.steps-bar .k { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.steps-bar .t { grid-column: 1 / -1; margin-top: .55rem; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.25; font-weight: 500; }
.steps-bar [role="tab"]:hover { color: var(--ink); border-top-color: var(--purple-tint); }
.steps-bar [role="tab"][aria-selected="true"] { color: var(--ink); border-top-color: var(--purple); }
.steps-bar [role="tab"][aria-selected="true"] .n { background: var(--purple); border-color: var(--purple); color: #fff; }
.steps-bar [role="tab"][aria-selected="true"] .k { color: var(--purple-deep); }
/* each step is a cream "world" panel with a taped figure (the look of the old Our approach section); panels share
   one grid cell, so the stage keeps the height of the tallest and nothing below jumps when you switch */
.steps-stage { display: grid; }
.steps-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; background: var(--cream); border-radius: var(--r-world, 22px); padding: clamp(24px, 4vw, 56px); }
.steps-panel[hidden] { display: grid; visibility: hidden; }
.steps-title { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.875rem); line-height: 1.08; letter-spacing: -.02em; max-width: 16ch; }
.steps-panel .say { margin-top: 1rem; }
.steps-panel .jlist { margin-top: clamp(16px, 2.4vw, 24px); border-color: rgba(27,33,57,.14); }
.steps-panel .jlist li { border-top-color: rgba(27,33,57,.14); }
.steps-panel .fig figcaption { color: var(--ink-soft); }
.steps-panel .fig--taped .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.steps-nav { display: flex; align-items: center; gap: .75rem; margin-top: clamp(24px, 3vw, 36px); }
.steps-prev { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); background: #fff; color: var(--ink); cursor: pointer; }
.steps-prev:hover { border-color: var(--purple); color: var(--purple-deep); }
.steps-next { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; border: 1px solid var(--purple); background: #fff; color: var(--purple-deep); font: inherit; font-weight: 500; cursor: pointer; }
.steps-next:hover { background: var(--purple); color: #fff; }
.steps-nav svg { width: 18px; height: 18px; }
.steps-nav [hidden] { display: none; }
[data-steps]:not(.is-ready) .steps-panel + .steps-panel { visibility: hidden; }
.no-js .steps-stage { display: block; }
.no-js [data-steps] .steps-panel + .steps-panel { visibility: visible; margin-top: 24px; }
.no-js .steps-bar, .no-js .steps-nav { display: none; }
@media (max-width: 860px) { .steps-panel { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .steps-bar { gap: 10px; } .steps-bar .t { display: none; } .steps-bar [role="tab"] { grid-template-columns: 1fr; row-gap: .45rem; justify-items: start; } }
/* a game screen shown whole on its own dark ground */
.hero-pic .frame.frame--game { background: #1d1f33; }
.hero-pic .frame.frame--game img { object-fit: contain; padding: 0; object-position: center; }
/* the Veyra cursor (Sam, 13 Oct): the first site's white arrow with a fine purple outline, at about 70% of its size;
   a hand on anything you can press, and while pressing. Mouse and trackpad only; text fields keep the text cursor. */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("/images/cursor-arrow.png") 1 1, auto;
    cursor: -webkit-image-set(url("/images/cursor-arrow.png") 1x, url("/images/cursor-arrow@2x.png") 2x) 1 1, auto;
    cursor: image-set(url("/images/cursor-arrow.png") 1x, url("/images/cursor-arrow@2x.png") 2x) 1 1, auto;
  }
  body:active,
  :is(a[href], button, select, summary, label, .btn, [role="tab"], img.zoom, .vfacade, input[type="radio"], input[type="checkbox"], input[type="submit"]):not(:disabled):not([aria-disabled="true"]) {
    cursor: url("/images/cursor-hand.png") 7 1, pointer !important;
    cursor: -webkit-image-set(url("/images/cursor-hand.png") 1x, url("/images/cursor-hand@2x.png") 2x) 7 1, pointer !important;
    cursor: image-set(url("/images/cursor-hand.png") 1x, url("/images/cursor-hand@2x.png") 2x) 7 1, pointer !important;
  }
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), textarea { cursor: text; }
}
@media (max-width: 860px) { .steps-panel[hidden] { display: none; } }
/* no tape on the adult site (Sam, 13 Oct: "everything should be professional"); figures keep a clean white frame.
   Pupil pages (body.play) keep their tape as part of the young people's register. */
body:not(.play) .fig--taped::before, body:not(.play) .fig--taped::after { content: none; }
/* hero loop (homepage): the dark Assess, Support, Track animation sits straight on the ink hero (same #1B2139 ground) */
.hero-loop { position: relative; }
.hero-loop img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.loop-toggle { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(27,33,57,.7); color: #fff; opacity: .6; cursor: pointer; transition: opacity .15s ease; }
.loop-toggle:hover, .loop-toggle:focus-visible { opacity: 1; }
.loop-toggle svg { width: 16px; height: 16px; }
.loop-toggle .i-play, .hero-loop.is-paused .loop-toggle .i-pause { display: none; }
.hero-loop.is-paused .loop-toggle .i-play { display: block; }
.no-js .loop-toggle { display: none; }
/* the Teacher Dashboard tour: the video in a browser window, as on the original site */
.tour { margin: 0; }
.tour-win { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
.ink .tour-win { border-color: var(--hair-ink); }
.tour-bar { display: flex; align-items: center; gap: 6px; padding: .55rem .85rem; background: var(--paper); border-bottom: 1px solid var(--hair); }
.tour-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(27,33,57,.18); }
.tour-bar em { margin-left: .5rem; font-style: normal; font-size: .75rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.tour figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--ink-soft); }
.ink .tour figcaption { color: var(--on-ink-3); }
.ft-tour { max-width: 980px; }
/* the animated Assess, Support, Track loop at the foot of a page (in place of the static fall and rise) */
.close-device .loop img, .loop img { display: block; width: 100%; height: auto; }
.close-device:has(.loop) { max-width: 680px; padding-inline: 0; }
/* the Assess, Support, Track video (hero and page foot) */
.hero-loop video, .loop video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 16px; }
.loop { position: relative; }
.loop-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.loop-ctl .loop-toggle { position: static; }
.loop > .loop-toggle { right: 10px; bottom: 10px; }
.loop-sound { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(27,33,57,.7); color: #fff; opacity: .7; cursor: pointer; transition: opacity .15s ease; }
.loop-sound:hover, .loop-sound:focus-visible, .hero-loop.has-sound .loop-sound { opacity: 1; }
.loop-sound svg { width: 16px; height: 16px; }
.loop-sound .i-sound, .hero-loop.has-sound .loop-sound .i-mute { display: none; }
.hero-loop.has-sound .loop-sound .i-sound { display: block; }
.loop.is-paused .loop-toggle .i-pause { display: none; }
.loop.is-paused .loop-toggle .i-play { display: block; }
.no-js .loop-ctl, .no-js .loop > .loop-toggle { display: none; }
/* The phone refused to autoplay: the poster with a big play button; a tap on the video starts it */
[data-loop].is-blocked video { cursor: pointer; }
[data-loop].is-blocked .loop-toggle { opacity: 1; }
[data-loop].is-blocked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.2v9.6L13 8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 56% 50% / 24px; }

/* the menu in cream (Sam, 13 Oct): the phone menu panel and the desktop "How it works" panel */
@media (max-width: 1080px) { .nav { background: var(--cream); } .nav > a:not(.btn), .dd-panel a:first-child { border-bottom-color: rgba(27,33,57,.14); } .dd-panel a { border-left-color: rgba(27,33,57,.18); } }
@media (min-width: 1081px) {
  .dd-panel { background: var(--cream); box-shadow: 0 18px 40px rgba(12,15,30,.16), 0 0 0 1px rgba(27,33,57,.1); }
  .dd-panel a:hover, .dd-panel a:focus-visible { background: rgba(255,255,255,.6); }
  .dd-panel a[aria-current="page"] { background: rgba(255,255,255,.75); }
  .dd-panel .ic { background: #fff; }
}
/* the pupils' heroes in cream (Sam, 13 Oct: every hero ink, except the student-facing ones, which are cream) */
body.play .hero.play-cream { background: var(--cream); color: var(--ink); }

/* ---------- QA fixes (13 Oct 2026, tested on iPhone Safari and at 390px) ---------- */
/* heroes without the path drawing: no empty band reserved for it at the bottom */
.hero:not(:has(.path)) { padding-bottom: clamp(28px, 4vw, 48px); }
.hero--page:not(:has(.path)) { padding-bottom: clamp(24px, 3vw, 40px); }
/* backed by: every logo tile the same width, so the words beside them line up */
.backed-logo { width: 96px; }
.backed-logo img { width: auto; height: auto; max-width: 100%; max-height: 44px; }
/* the four-box evidence strip on phones: the fourth box lines up with the second */
@media (max-width: 560px) { .backing--4 li:nth-child(4) { padding-left: .75rem; } }