/* Mecer Inter-Ed: the concourse. One dark object (the board) in a quiet, light hall.
   Tokens: ink, mist, paper, MIE blue (their logo's own #0665A6), board black, one warm lamp. */
@view-transition { navigation: auto; }
:root {
  --ink: #0B1B2B; --ink-2: #33465A; --slate: #5B6B7D;
  --mist: #EDF1F5; --paper: #FFFFFF; --concrete: #D5DAE0; --sky: #DCE8F3;
  --blue: #0665A6; --blue-deep: #04497A; --board: #101317; --glyph: #F0EBE0; --lamp: #F2A33A;
  --ease-travel: cubic-bezier(0.65, 0, 0.35, 1); --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --d1: 150ms; --d2: 300ms; --d3: 600ms; --d4: 1200ms;
  --font-display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 56px); --maxw: 1320px; --head-h: 76px;
  --sa-accent: #0665A6; --sa-accent-ink: #FFFFFF;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body { margin: 0; background: var(--mist); color: var(--ink); font: 400 18px/1.62 var(--font-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--board); color: var(--glyph); padding: 10px 16px; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; }
h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; }
h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -0.012em; }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
ul, ol { padding-left: 1.1em; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-2); }
.note { font-size: 15.5px; color: var(--ink-2); max-width: 70ch; }

/* ------------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 40; height: var(--head-h); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--mist) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--concrete); }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 52px; width: auto; display: block; }
.nav { flex: 1; min-width: 0; }
.nav ul { display: flex; gap: clamp(4px, 1vw, 12px); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-block; padding: 8px 12px; border-radius: 3px; font: 500 16px/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -0.005em; transition: background var(--d2) var(--ease-arrive), color var(--d2) var(--ease-arrive); }
.nav a:hover { background: var(--sky); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--board); color: var(--glyph); }
.top__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.top__tel { font: 600 16px/1 var(--font-body); color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.top__tel:hover { color: var(--blue); }
.menu-btn { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--blue); color: #fff; font: 600 16.5px/1 var(--font-body); cursor: pointer; text-decoration: none; transition: background var(--d2) var(--ease-arrive), transform var(--d1) var(--ease-arrive); }
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--concrete); color: var(--slate); cursor: not-allowed; }
.btn--ask { min-height: 42px; padding: 0 18px; }
.btn--dark { background: var(--board); color: var(--glyph); }
.btn--dark:hover { background: #1d232a; color: #fff; }
.btn--quiet { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn--quiet:hover { background: var(--sky); color: var(--blue-deep); }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--mist); padding: calc(var(--head-h) + 24px) var(--gutter) 40px; overflow: auto; }
.menu[hidden] { display: none; }
.menu__close { position: absolute; top: 18px; right: var(--gutter); }
.menu__close, .menu-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--board); color: var(--glyph); font: 600 16px/1 var(--font-body); cursor: pointer; }
.menu__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.menu h2 { font-size: 15px; letter-spacing: 0; color: var(--slate); margin-bottom: 12px; font-family: var(--font-body); font-weight: 600; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.menu a { display: block; padding: 7px 0; font: 600 clamp(24px, 2.6vw, 36px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.menu a:hover { color: var(--blue); }
body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------ the flap title (every page title is posted on the board) */
.flaptitle { display: flex; flex-wrap: wrap; align-items: center; font: 600 clamp(40px, 6.4vw, 92px)/1 var(--font-display); margin: 0; font-size: min(clamp(40px, 6.4vw, 92px), calc((100vw - 2 * var(--gutter)) / var(--w, 99) * .97)); }
.flaptitle__tiles { display: inline-flex; flex-wrap: wrap; gap: .05em; }
.fl { position: relative; display: inline-flex; align-items: center; justify-content: center; width: .7em; height: .98em; border-radius: .06em; color: var(--glyph);
  background: linear-gradient(180deg, #1c2127 0 49.4%, #05070a 49.4% 50.6%, #171b20 50.6%); box-shadow: inset 0 .018em 0 rgba(255,255,255,.05), 0 .03em .07em rgba(11,27,43,.28); perspective: 600px; }
.fl i { display: block; font-style: normal; font-size: .8em; line-height: 1; letter-spacing: -.02em; transform-origin: 50% 50%; margin-top: .02em; }
.fl--wide i { transform: scaleX(.84); }
.fl--gap { width: .34em; background: none; box-shadow: none; }
.fl--p { width: .4em; }
.flapnum { display: inline-flex; vertical-align: top; max-width: 100%; }
.flapnum__t { display: inline-flex; flex-wrap: wrap; gap: .05em; }
.pagehead { max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(20px, 3vw, 36px); }
/* every page title is posted on the same wall as the board: panel joints, soft light from the left, fading into the page below */
.pagehead { position: relative; isolation: isolate; }
.pagehead::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(237,241,245,0) 50%, var(--mist) 100%),
    linear-gradient(100deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg, transparent 0 142px, rgba(11,27,43,.07) 142px 143px, rgba(255,255,255,.75) 143px 144px),
    #E2E7EC; }
html { overflow-x: clip; }
.pagehead + section { padding-top: clamp(20px, 3vw, 44px); }
.pagehead__lede { font: 400 clamp(19px, 1.7vw, 23px)/1.5 var(--font-body); color: var(--ink-2); margin: 22px 0 0; max-width: 62ch; }
.crumb { display: flex; gap: 10px; font-size: 15px; color: var(--slate); margin-bottom: 22px; }
.crumb a { color: var(--slate); }
.crumb a:hover { color: var(--blue); }

/* ------------------------------------------------------------------ sections */
.sec { padding: clamp(56px, 8vw, 112px) 0; position: relative; z-index: 2; background: var(--mist); } /* solid and above the fixed board canvas on the home page */
.sec--paper { background: var(--paper); }
.sec--sky { background: var(--sky); }
.sec--ink { background: var(--board); color: var(--glyph); }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__head p { margin-top: 16px; font-size: 20px; color: var(--ink-2); }
.cols { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: repeat(12, 1fr); }
.c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-4 { grid-column: span 4; } .c-8 { grid-column: span 8; } .c-3 { grid-column: span 3; }
.rule { border: 0; border-top: 1px solid var(--concrete); margin: 0; }

/* ------------------------------------------------------------------ the finder (home) */
.finder { display: grid; gap: 12px; margin-top: 20px; }
@media (max-height: 820px) { .beat--1 .lede { display: none; } .finder { margin-top: 16px; } }
.finder fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.finder legend { padding: 0; font: 600 15px/1.2 var(--font-body); color: var(--ink-2); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--concrete); background: var(--paper); border-radius: 4px; font: 600 16px/1.1 var(--font-body); color: var(--ink);
  transition: background var(--d2) var(--ease-arrive), color var(--d2) var(--ease-arrive), border-color var(--d2) var(--ease-arrive); }
.chip:hover span { border-color: var(--blue); }
.chip input:checked + span { background: var(--board); color: var(--glyph); border-color: var(--board); }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.finder__done { display: none; align-items: center; gap: 12px; flex-wrap: wrap; font: 600 16px/1.3 var(--font-body); }
.finder__done button { background: none; border: 0; color: var(--blue); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0; min-height: 44px; }

/* ------------------------------------------------------------------ the stage: the board, behind everything on the home page */
/* the canvas lives inside the pin, so the browser's own sticky positioning carries it: no script moves it while you scroll */
#world { display: none; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; pointer-events: none; transition: opacity var(--d3) var(--ease-arrive); }
html.has-3d #world { display: block; }
html.board-live #world { opacity: 1; }
.stage { position: relative; display: flow-root; }
.stage__still { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: transparent; }
.stage__still img { position: absolute; right: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: opacity var(--d3) var(--ease-arrive); }
html.board-live .stage__still img { opacity: 0; }
html.has-3d .stage { background: transparent; }
.stage__pin { position: relative; min-height: 100vh; z-index: 1; }
.beat { position: relative; z-index: 2; }
.beat--1 { padding: calc(var(--head-h) + clamp(20px, 4.5vh, 56px)) var(--gutter) 32px; }
.beat--1 h1 { font-size: clamp(40px, min(5.4vw, 8.6vh), 80px); line-height: .98; letter-spacing: -0.028em; }
.beat--1 .lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); margin: 20px 0 0; max-width: 40ch; }
/* the page arrives in an order: the line rises behind its mask, then the words under it, then the chips */
.beat--1 h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.beat--1 h1 .ln > span { display: block; transform: translateY(108%); animation: ln-up 800ms var(--ease-arrive) forwards; }
.beat--1 h1 .ln:nth-child(2) > span { animation-delay: 90ms; }
.beat--1 h1 .ln:nth-child(3) > span { animation-delay: 180ms; }
.beat--1 .lede, .beat--1 .finder { opacity: 0; transform: translateY(10px); animation: fade-up 700ms var(--ease-arrive) 420ms forwards; }
.beat--1 .finder { animation-delay: 560ms; }
@keyframes ln-up { to { transform: none; } }
@keyframes fade-up { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .beat--1 h1 .ln > span, .beat--1 .lede, .beat--1 .finder { animation: none; transform: none; opacity: 1; } }
.beat__copy { display: none; }
.stage__summary { display: none; }
/* 400vh in all: the stage runs under the header, so the pin is stuck from the first pixel of scroll (nothing slides against the board), holds for
   300vh of scroll, and lets go. The still and the canvas fill the same pin, so the crossfade moves nothing. */
html.has-3d .stage { height: 400vh; margin-top: calc(-1 * var(--head-h)); }
html.has-3d .stage__pin { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; }
html.has-3d .beat { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
html.has-3d .beat--1 { opacity: 1; padding-top: calc(2 * var(--head-h) + clamp(20px, 4.5vh, 56px)); will-change: opacity; }
html.has-3d .beat > * { pointer-events: auto; }
html.has-3d .beat__copy { opacity: 0; pointer-events: none; will-change: opacity; display: block; position: absolute; left: var(--gutter); bottom: clamp(22px, 4vh, 44px); width: min(32vw, 460px); padding: 20px 24px 8px; border-radius: 6px; background: color-mix(in srgb, var(--mist) 96%, transparent); box-shadow: 0 0 0 1px rgba(11,27,43,.08), 0 24px 60px -30px rgba(11,27,43,.45); }
html.has-3d .beat__copy h2 { font-size: clamp(28px, 2.7vw, 44px); line-height: 1.02; }
html.has-3d .beat__copy p { font-size: 18px; color: var(--ink-2); margin-top: 14px; }
html.has-3d .stage__summary { display: flex; position: absolute; left: var(--gutter); top: calc(var(--head-h) + 18px); z-index: 3; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--mist) 94%, transparent); box-shadow: 0 0 0 1px rgba(11,27,43,.08), 0 14px 34px -20px rgba(11,27,43,.5); font: 600 16px/1.2 var(--font-body); opacity: 0; pointer-events: none; will-change: opacity; }
html.has-3d .stage__summary:not([inert]) { pointer-events: auto; }
html.has-3d .stage__summary button { background: none; border: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; min-height: 44px; }
/* over the 3D, the header lets the scene continue underneath it */
html.has-3d.board-live body.home .top { background: color-mix(in srgb, var(--mist) 76%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
/* as wide as the longer of the two fixed labels (Next intakes, Example path), so the page swapping them never moves the button beside it */
html.has-3d .stage__tag { min-width: 112px; justify-content: center; }
.stage__tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 4px; background: var(--board); color: var(--glyph); font: 600 15px/1 var(--font-body); }
.leaders { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.leaders svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaders .mk { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--board); color: var(--glyph); font: 600 14px/26px var(--font-display); text-align: center; box-shadow: 0 0 0 3px rgba(239,233,220,.9); }
.leaders .lb { position: absolute; transform: translate(0, -50%); font: 600 14.5px/1.2 var(--font-body); color: var(--ink); background: rgba(255,255,255,.92); padding: 6px 9px; border-radius: 3px; white-space: nowrap; }

/* ------------------------------------------------------------------ the result: your path (the same answer, in words) */
.path { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); background: var(--mist); position: relative; z-index: 2; }
.path__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.path__head p { margin: 10px 0 0; color: var(--ink-2); }
ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; border-top: 1px solid var(--concrete); }
ol.steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--concrete); }
.stepn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 56px; border-radius: 4px; background: linear-gradient(180deg, #1c2127 0 49%, #05070a 49% 51%, #171b20 51%); color: var(--glyph); font: 600 26px/1 var(--font-display); }
.stepn--code { width: auto; min-width: 104px; padding: 0 12px; font-size: 19px; letter-spacing: .03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
ol.steps > li.has-code { grid-template-columns: 112px minmax(0, 1fr) auto; }
.step__name { font: 600 clamp(20px, 1.9vw, 26px)/1.2 var(--font-display); letter-spacing: -.015em; }
.step__meta { margin: 6px 0 0; color: var(--ink-2); font-size: 16.5px; }
.step__meta .lv { color: var(--ink); font-weight: 600; }
.step__when { text-align: right; min-width: 190px; }
.step__when b { display: block; font: 600 22px/1.2 var(--font-display); letter-spacing: -.01em; }
.step__when span { display: block; color: var(--ink-2); font-size: 16px; }
.step__more { margin-top: 8px; }
.linkbtn { background: none; border: 0; padding: 6px 0; min-height: 44px; color: var(--blue); font: 600 16px/1.2 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--blue-deep); }
.totals { display: flex; flex-wrap: wrap; gap: 8px 36px; padding: 22px 0 6px; font-size: 17.5px; }
.totals b { font: 600 24px/1.2 var(--font-display); letter-spacing: -.01em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.empty { padding: 28px; border: 1px dashed #9AA7B5; border-radius: 6px; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 60%, transparent); }
details.how { margin-top: 24px; border-top: 1px solid var(--concrete); padding-top: 14px; }
details.how summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.how p, details.how li { font-size: 16.5px; color: var(--ink-2); }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--board); color: #c9d3dd; padding: clamp(40px, 5vw, 72px) var(--gutter) 28px; position: relative; z-index: 2; }
.foot__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
.foot h2 { font: 600 15px/1 var(--font-body); color: #8fa0b2; letter-spacing: 0; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 0 0 8px; }
.foot a { color: #e8edf2; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot address { font-style: normal; line-height: 1.7; }
.foot__brand img { filter: brightness(0) invert(1); opacity: .94; height: 56px; width: auto; }
.foot__brand p { max-width: 38ch; margin-top: 14px; }
.foot__rating { color: var(--glyph); font-weight: 600; }
.foot__links { margin-top: 14px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.foot__legal { max-width: var(--maxw); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid #263340; font-size: 14.5px; color: #8fa0b2; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .top__tel { display: none; }
}
@media (max-width: 900px) {
  .menu__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .cols > * { grid-column: 1 / -1; }
  ol.steps > li { grid-template-columns: 44px minmax(0, 1fr); }
  ol.steps > li.has-code { grid-template-columns: 100px minmax(0, 1fr); }
  .step__when { grid-column: 2; text-align: left; min-width: 0; }
}
@media (max-width: 560px) {
  :root { --head-h: 64px; }
  .brand img { height: 42px; }
  .foot__grid { grid-template-columns: 1fr; }
  .btn--ask { display: none; }
  body { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ home sections */
.beat--1 { max-width: min(720px, calc(35vw - 24px + var(--gutter))); } /* the board's left edge sits at 35% of the width, so the words stop before it */
.finder__done a { white-space: nowrap; }
.print-only { display: none; }
.tools { gap: clamp(20px, 3vw, 40px); }
.tools + .note { margin-top: 24px; }
.tool-link { display: flex; flex-direction: column; gap: 4px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--concrete); border-radius: 6px; background: var(--mist); color: var(--ink); text-decoration: none; transition: border-color var(--d2) var(--ease-arrive), background var(--d2) var(--ease-arrive); }
.tool-link:hover { border-color: var(--blue); background: var(--sky); color: var(--ink); }
.tool-link__n { font: 600 15px/1.2 var(--font-body); color: var(--slate); }
.tool-link__v { display: block; font: 600 clamp(28px, 2.6vw, 38px)/1 var(--font-display); margin: 6px 0 16px; }
.tool-link h3 { margin-bottom: 6px; }
.tool-link p { margin: 0; color: var(--ink-2); font-size: 17px; }
.proof { align-items: start; }
.proof__fig { margin: 0; }
.proof__fig img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 0 var(--concrete), 0 18px 40px -22px rgba(11,27,43,.45); }
.proof__fig--cert img { box-shadow: 0 0 0 1px var(--concrete); }
figcaption { font-size: 15.5px; color: var(--ink-2); margin-top: 12px; max-width: 52ch; }
.proof__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; align-content: start; }
.proof__list li { padding-top: 14px; border-top: 1px solid var(--concrete); color: var(--ink-2); font-size: 17px; }
.proof__list b { display: block; color: var(--ink); font-weight: 600; }
.logos { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 24px; align-items: center; }
.logos li { display: flex; align-items: center; justify-content: center; }
.logos img { width: 100%; max-width: 170px; height: 90px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .78; transition: opacity var(--d2), filter var(--d2); }
.logos li:hover img { filter: none; opacity: 1; }
.deliver { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 5vw, 72px); margin: 0; }
.deliver > div { padding: 22px 0; border-top: 1px solid var(--concrete); }
.deliver dt { font: 600 clamp(22px, 2vw, 28px)/1.15 var(--font-display); letter-spacing: -.015em; margin-bottom: 8px; }
.deliver dd { margin: 0; color: var(--ink-2); max-width: 52ch; }
.quotes { display: grid; gap: 28px; }
.quotes figure { margin: 0; padding-top: 18px; border-top: 1px solid var(--concrete); }
.quotes blockquote { margin: 0; font: 500 clamp(21px, 2vw, 27px)/1.3 var(--font-display); letter-spacing: -.012em; max-width: 34ch; }
.quotes figcaption { margin-top: 10px; }

/* ------------------------------------------------------------------ prose, news, articles, policies */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(24px, 2.2vw, 32px); margin: 1.6em 0 .5em; }
.prose p, .prose li { font-size: 18.5px; line-height: 1.65; }
.prose ul { margin: 0 0 1em; }
.prose--legal p { font-size: 17px; max-width: none; }
.article { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }
.article__title { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.025em; max-width: 22ch; margin: 8px 0 28px; }
.article__date { color: var(--slate); font-size: 15.5px; display: block; }
.newslist { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--concrete); }
.newsrow { display: grid; grid-template-columns: 160px 1fr; gap: 4px 28px; padding: 18px 0; border-bottom: 1px solid var(--concrete); color: var(--ink); text-decoration: none; }
.newsrow:hover { background: var(--sky); }
.newsrow time { color: var(--slate); font-size: 16px; grid-row: span 2; }
.newsrow__t { font: 600 clamp(19px, 1.7vw, 24px)/1.25 var(--font-display); letter-spacing: -.012em; }
.newsrow__s { color: var(--ink-2); font-size: 16.5px; max-width: 70ch; }

/* ------------------------------------------------------------------ the outline panel */
dialog.panel { margin: 0 0 0 auto; padding: 0; border: 0; height: 100vh; max-height: none; width: min(600px, 100vw); background: var(--paper); color: var(--ink); box-shadow: -30px 0 80px -40px rgba(11,27,43,.5); }
dialog.panel::backdrop { background: rgba(11,27,43,.42); }
.panel__in { height: 100%; overflow: auto; padding: 28px clamp(20px, 3vw, 36px) 48px; overscroll-behavior: contain; }
.panel__x { position: sticky; top: 0; float: right; z-index: 2; min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--board); color: var(--glyph); font: 600 15px/1 var(--font-body); cursor: pointer; }
.panel h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 8px 56px 16px 0; }
.panel h3 { font-size: 19px; margin: 28px 0 8px; letter-spacing: -.01em; }
.panel p, .panel li { font-size: 16.5px; line-height: 1.55; margin-bottom: .6em; }
.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--concrete); }
.facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--concrete); }
.facts dt { color: var(--slate); font-size: 15.5px; }
.facts dd { margin: 0; font-weight: 600; font-size: 16.5px; }
.panel__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; }
.mods { columns: 1; padding-left: 1.2em; }
body.panel-open { overflow: hidden; }

/* ------------------------------------------------------------------ phone and portrait: the board is a window pinned under the header, the page reads beneath it.
   A portrait screen has no room beside the board for the words, so a portrait tablet gets the same layout as a phone. */
@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  /* the board is a window pinned under the header by position: sticky: the browser holds it for the whole stage and lets it go with the stage's end */
  html.has-3d #world { position: sticky; inset: auto; top: var(--head-h); width: 100%; height: 42svh; margin: 0 0 calc(var(--head-h) - 20px); z-index: 30; border-bottom: 1px solid var(--concrete); }
  html.has-3d .stage { height: auto; margin-top: 0; }
  html.has-3d .stage__pin { position: relative; height: auto; overflow: visible; z-index: 1; }
  html.has-3d .stage__still { position: absolute; inset: 0 0 auto 0; height: 42svh; margin: 0; aspect-ratio: auto; }
  html.has-3d .stage__still img { right: 0; width: 100%; }
  html.has-3d .beat { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; pointer-events: auto; }
  html.has-3d .beat--1 { padding: 24px var(--gutter) 40px; max-width: none; }
  html.has-3d .beat__copy { position: relative; left: auto; bottom: auto; width: auto; max-width: 560px; margin: 0 var(--gutter) 18svh; opacity: 1 !important; visibility: visible !important; will-change: auto; pointer-events: auto; }
  html.has-3d .beat--1 { will-change: auto; }
  html.has-3d .beat__copy[data-beat="4"] { display: none; }
  html.has-3d .stage__summary { display: none; }
  .beat--1 { max-width: none; padding: calc(var(--head-h) + 24px) var(--gutter) 32px; }
  .beat--1 h1 { font-size: clamp(40px, 11vw, 56px); }
  .stage__still { position: relative; height: auto; aspect-ratio: 585 / 529; }
  .stage__still img { position: static; width: 100%; height: 100%; object-position: 50% 50%; }
}
@media (max-width: 759px) {
  .deliver { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .newsrow { grid-template-columns: 1fr; }
  .newsrow time { grid-row: auto; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
}
/* a wide window (a portrait tablet) holds the board by its height, like the canvas does, on a wall-coloured ground */
@media (min-width: 560px) and ((max-width: 759px) or (max-aspect-ratio: 1/1)) {
  html.has-3d .stage__still { background: #dcdfe3; }
  html.has-3d .stage__still img { object-fit: contain; }
}
/* ------------------------------------------------------------------ print: only the result, with their logo, the date and their details */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 12pt; }
  body.print-result * { visibility: hidden !important; }
  body.print-result .printable, body.print-result .printable * { visibility: visible !important; }
  body.print-result .printable { position: absolute; left: 0; top: 0; width: 100%; background: #fff; padding: 0 !important; }
  body.print-result .noprint, body.print-result .actions, body.print-result details.how > p ~ * { display: none !important; }
  body.print-result .print-only { display: block !important; }
  .print-head { display: flex !important; gap: 20px; align-items: center; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #999; }
  .print-head p { font-size: 9.5pt; margin: 0; max-width: none; }
  .print-head img { height: 46px; width: auto; }
  ol.steps > li { break-inside: avoid; }
  #world, .top, .menu, .foot, .stage { display: none !important; }
}

/* ------------------------------------------------------------------ the tools */
.toolwrap { padding: 0 0 clamp(56px, 8vw, 112px); }
.tool { background: var(--paper); border: 1px solid var(--concrete); border-radius: 8px; padding: clamp(20px, 3vw, 36px); }
.tool + .tool { margin-top: 28px; }
.fields { display: grid; gap: 20px 24px; grid-template-columns: repeat(12, 1fr); align-items: start; }
.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.field--8 { grid-column: span 8; } .field--4 { grid-column: span 4; } .field--6 { grid-column: span 6; } .field--12 { grid-column: 1 / -1; } .field--3 { grid-column: span 3; }
.field > label, .field > .lbl, fieldset.field > legend { font: 600 15.5px/1.2 var(--font-body); color: var(--ink); padding: 0; }
.field .hint { font-size: 14.5px; color: var(--slate); margin: 0; }
.field input[type="text"], .field input[type="number"], .field input[type="search"], .field select { width: 100%; height: 50px; border: 1px solid #8c99a8; border-radius: 4px; background: #fff; padding: 0 14px; font: 400 18px/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field input[aria-invalid="true"] { border-color: #b3261e; }
.err { color: #9b1c14; font-size: 15px; font-weight: 600; margin: 0; }
.err:empty { display: none; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend { margin-bottom: 7px; }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid #8c99a8; border-radius: 4px; background: #fff; font: 600 16px/1.1 var(--font-body); transition: background var(--d2) var(--ease-arrive), color var(--d2) var(--ease-arrive); }
.seg input:checked + span { background: var(--board); color: var(--glyph); border-color: var(--board); }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.seg input:disabled + span { opacity: .45; cursor: not-allowed; }
.combo { position: relative; }
.combo ul[role="listbox"] { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 340px; overflow: auto; background: #fff; border: 1px solid #8c99a8; border-radius: 6px; box-shadow: 0 24px 50px -24px rgba(11,27,43,.5); }
.combo li[role="option"] { padding: 10px 12px; border-radius: 4px; cursor: pointer; display: grid; gap: 2px; }
.combo li[role="option"]:hover, .combo li[aria-selected="true"] { background: var(--sky); }
.combo li small { color: var(--ink-2); font-size: 14.5px; }
.combo li b { font: 600 16.5px/1.25 var(--font-body); }
.formactions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.result { margin-top: 28px; padding: clamp(18px, 2.6vw, 30px); border-radius: 8px; background: var(--sky); }
.result h2, .result h3 { margin-bottom: 8px; }
.result .big { font: 600 clamp(32px, 4vw, 52px)/1.05 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.result .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 10px 0; border-bottom: 1px solid rgba(11,27,43,.14); align-items: baseline; }
.result .row:last-of-type { border-bottom: 0; }
.result .row b { font: 600 20px/1.2 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.result .row small { display: block; color: var(--ink-2); font-size: 14.5px; font-weight: 400; }
.chipdate { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 9px; border-radius: 3px; background: var(--board); color: var(--glyph); font: 600 14.5px/1.3 var(--font-body); font-variant-numeric: tabular-nums; }
.chipdate--dim { background: var(--concrete); color: var(--ink); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
/* the header row only sticks once the table is in the top 40% of the screen (js/site.js adds .is-pinned):
   the assistant's widget lifts its button above any sticky bar near the bottom, so a header sticky from the start pushed it out of its corner */
.tbl.is-pinned th { position: sticky; top: var(--head-h); }
.tbl th { background: var(--paper); text-align: left; font: 600 14.5px/1.2 var(--font-body); color: var(--ink-2); padding: 12px 10px; border-bottom: 2px solid var(--ink); white-space: nowrap; z-index: 2; }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--concrete); vertical-align: top; }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl .code { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; font-size: 15px; }
.tbl .cname { font-weight: 600; }
.tbl tr.band td { background: var(--mist); font: 600 15px/1.2 var(--font-body); color: var(--ink-2); padding: 10px; border-bottom: 1px solid var(--concrete); }
.tbl .acts { white-space: nowrap; }
.tbl .linkbtn { min-height: 0; padding: 0; text-align: left; font-weight: 600; }
.tbl a.cname { color: var(--blue); font-weight: 600; text-decoration-thickness: 1px; }
.tbl .starts { min-width: 200px; }
.tbl .muted { font-size: 14.5px; }
.stats { margin: 16px 0 12px; color: var(--ink-2); font-size: 16.5px; }
.stats b { color: var(--ink); }
.plan-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--concrete); }
.plan-lines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--concrete); }
.pl__name { font: 600 21px/1.25 var(--font-display); letter-spacing: -.012em; }
.pl__meta { color: var(--ink-2); font-size: 16px; margin: 4px 0 0; }
.pl__sum { text-align: right; }
.pl__sum b { font: 600 22px/1.2 var(--font-display); display: block; white-space: nowrap; }
.pl__sum span { color: var(--ink-2); font-size: 14.5px; }
.pl__acts { display: flex; gap: 14px; margin-top: 4px; }
.terms { margin-top: 22px; padding: 18px 20px; border-left: 4px solid var(--blue); background: var(--mist); border-radius: 0 6px 6px 0; }
.terms h3 { font-size: 18px; margin-bottom: 8px; }
.terms li, .terms p { font-size: 15.5px; color: var(--ink-2); max-width: none; }
.sources { font-size: 15px; color: var(--ink-2); }
.sources li { margin-bottom: 6px; max-width: 80ch; }
.vendor { padding: clamp(32px, 4vw, 56px) 0; border-top: 1px solid var(--concrete); scroll-margin-top: calc(var(--head-h) + 16px); }
.vendor__head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.vendor__head img { height: 84px; width: auto; max-width: 180px; object-fit: contain; }
.vendor h2 { font-size: clamp(26px, 2.6vw, 38px); }
.vnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.vnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--concrete); border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; font: 600 15.5px/1 var(--font-body); }
.vnav a:hover { border-color: var(--blue); color: var(--blue); }
details.faq { border-top: 1px solid var(--concrete); }
details.faq summary { cursor: pointer; font: 600 18px/1.35 var(--font-body); padding: 14px 0; min-height: 48px; }
details.faq p { color: var(--ink-2); }
.revs { display: grid; gap: 18px; }
.rev { padding: 20px 0; border-bottom: 1px solid var(--concrete); }
.rev blockquote { margin: 0 0 10px; font-size: 19px; line-height: 1.55; max-width: 72ch; }
.rev__by { display: flex; gap: 14px; align-items: center; color: var(--ink-2); font-size: 15.5px; }
.stars { color: #8a5200; letter-spacing: 2px; font-size: 16px; }
.mono { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sky); color: var(--blue-deep); font: 600 15px/1 var(--font-display); }
.wall { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 900px) {
  .fields { grid-template-columns: 1fr; }
  .field--8, .field--4, .field--6, .field--3 { grid-column: 1 / -1; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 14px 0; border-bottom: 1px solid var(--concrete); }
  .tbl td { border: 0; padding: 3px 0; text-align: left !important; }
  .tbl td[data-l]::before { content: attr(data-l) ": "; color: var(--ink-2); font-size: 15px; }
  .tbl td.starts::before, .tbl td[data-l="Next starts"]::before { display: block; margin-bottom: 4px; }
  .tbl td:empty { display: none; }
  .tbl td.num { display: inline-block; width: auto; margin-right: 20px; }
  .tbl tr.band { padding: 0; }
  .plan-lines > li { grid-template-columns: 1fr; }
  .pl__sum { text-align: left; }
}
@media print {
  .tool, .result { border: 0; background: #fff; padding: 0; }
  .terms { background: #fff; border-left: 2px solid #555; }
  .result .row b { font-size: 12pt; }
}

/* ------------------------------------------------------------------ learnerships, reviews */
.learn { border-top: 1px solid var(--concrete); }
.learn:last-of-type { border-bottom: 1px solid var(--concrete); }
.learn summary { cursor: pointer; padding: 20px 0; min-height: 56px; display: grid; gap: 4px; list-style: none; }
.learn summary::-webkit-details-marker { display: none; }
.learn summary::after { content: "Show details"; color: var(--blue); font-weight: 600; font-size: 15px; margin-top: 4px; }
.learn[open] summary::after { content: "Hide details"; }
.learn__t { font: 600 clamp(21px, 2vw, 28px)/1.2 var(--font-display); letter-spacing: -.015em; }
.learn__m { color: var(--ink-2); font-size: 16px; }
.learn__b { padding: 4px 0 30px; max-width: 80ch; }
.learn__b h4 { font: 600 17px/1.3 var(--font-body); margin: 22px 0 6px; letter-spacing: 0; }
.learn__b li, .learn__b p { font-size: 17px; }
.learn .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
p.big { font: 600 clamp(64px, 9vw, 128px)/.95 var(--font-display); letter-spacing: -.035em; margin: 0 0 6px; color: var(--ink); }
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rev .more { margin: -4px 0 8px; }
.cols h2 { font-size: clamp(22px, 2vw, 30px); margin: 36px 0 12px; }
.prose h3 { margin: 1.4em 0 .3em; }
.prose h2 + h3 { margin-top: .6em; }
.tbl--pkg + p { margin-top: 22px; }

/* ------------------------------------------------------------------ inner page pieces */
.factlist { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--concrete); align-content: start; }
.factlist > div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--concrete); }
.factlist dt { color: var(--slate); font-size: 15.5px; }
.factlist dd { margin: 0; font-weight: 600; }
.addr { font-style: normal; font-size: 19px; line-height: 1.7; margin: 0 0 14px; }
.map iframe { width: 100%; height: 380px; border: 0; border-radius: 8px; background: var(--concrete); }
.callout { padding: clamp(20px, 2.6vw, 32px); background: var(--sky); border-radius: 8px; }
.callout h3 { margin-bottom: 10px; }
.callout p { font-size: 17px; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--concrete); }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid var(--concrete); }
.timeline li > span { color: var(--slate); font-size: 16px; font-weight: 600; }
.timeline b { font-weight: 600; }
.deliver--wide { grid-template-columns: repeat(2, 1fr); }
.tbl--pkg th[scope="row"] { font: 600 20px/1.2 var(--font-display); text-align: left; position: static; border-bottom: 1px solid var(--concrete); padding: 14px 10px; color: var(--ink); }
.tbl--pkg td { font-size: 16.5px; }
.form textarea { width: 100%; border: 1px solid #8c99a8; border-radius: 4px; background: #fff; padding: 12px 14px; font: 400 18px/1.5 var(--font-body); color: var(--ink); resize: vertical; }
.form textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.form .field > label { font: 600 15.5px/1.2 var(--font-body); }
.form__status.is-err { color: #9b1c14; font-weight: 600; }
@media (max-width: 900px) { .deliver--wide { grid-template-columns: 1fr; } .timeline li, .factlist > div { grid-template-columns: 1fr; } .tbl--pkg tbody th { display: block; } }