/* =========================================================================
   educa.city v2 — the stylesheet of THE SITE THAT LISTENS FIRST.

   Three worlds, all of them built from the brand colours and nothing else
   (FBNT 2026-09-08):

       clean   white and airy — the default. The Apple lesson applied: one
               idea per screen, hairlines instead of boxes, air instead of
               borders.
       dark    the mark's own deep petrol.
       brand   the green-blue world: petrol-to-teal ground, glass panels.

   The colour rules of the mark hold everywhere: coloured only on white or
   very light grounds; full white on dark ones; on dark themes a floating
   mark sits on its own white chip.

   No component names a colour. Logical properties only. Nothing is hidden
   until something can show it.
   ========================================================================= */

/* ------------------------------------------------------------------ fonts */
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/lexend-latin.woff2') format('woff2');
	font-weight: 300 700; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lexend';
	src: url('../fonts/lexend-latin-ext.woff2') format('woff2');
	font-weight: 300 700; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin.woff2') format('woff2');
	font-weight: 100 900; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	font-weight: 100 900; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
	font-weight: 100 800; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root {
	--font-display: 'Lexend', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

	--maxw: 1180px;
	--maxw-text: 66ch;
	--gutter: clamp(20px, 5vw, 56px);
	--gap: clamp(16px, 2.2vw, 28px);

	--radius: 16px;
	--radius-sm: 10px;
	--radius-lg: 26px;
	--pill: 999px;

	--brand: #009185;
	--brand-deep: #00766b;
	--brand-soft: #2cb3a6;
	--petrol: #00232e;
	--amber: #f19c1c;
	--amber-soft: #ffb54d;
	--amber-ink: #2a1a00;
	--ok: #047857;
	--no: #be123c;

	/* the diagnosis tones, bands on the 0..10 average (user 2026-09-10):
	   red under 6, orange to 7.9, green to 9.4, blue from 9.5 — each dark
	   enough that white text on it passes AA */
	--tone-red: #c0392b;
	--tone-orange: #b45309;
	--tone-green: #15803d;
	--tone-blue: #1d4ed8;

	--speed: 240ms;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ themes */
[data-theme='clean'] {
	--ground: #fbfbfa;
	--ground-2: #f4f4f1;
	--panel: #ffffff;
	--panel-2: #f7f7f4;
	--line: #e7e5df;
	--line-soft: #efedE8;
	--ink: #00232e;
	--ink-2: #46606a;
	--ink-3: #5c6f78;
	--mark-main: #00232e;
	--mark-roof: #f19c1c;
	--mark-facet: #009185;
	--accent: #9a5b00;        /* amber darkened as TEXT on light, per audit */
	--glow: 0, 145, 133;
	--shadow: 0 24px 60px -34px rgba(0, 35, 46, .25);
	--chip-needed: 0;         /* the mark may float in colour on this ground */
	color-scheme: light;
}
[data-theme='dark'] {
	--ground: #021d26;
	--ground-2: #04242f;
	--panel: #073040;
	--panel-2: #0a3a4c;
	--line: #10475c;
	--line-soft: #0b3a4b;
	--ink: #eef7f9;
	--ink-2: #a7c4cd;
	--ink-3: #7fa6b4;
	--mark-main: #ffffff;
	--mark-roof: #ffffff;
	--mark-facet: #ffffff;
	--accent: #f19c1c;
	--glow: 0, 145, 133;
	--shadow: 0 24px 60px -30px rgba(0, 10, 14, .95);
	--chip-needed: 1;
	color-scheme: dark;
}
[data-theme='brand'] {
	--ground: #00404d;
	--ground-2: #00453f;
	/* DARK glass, not white: cards read as depth in the gradient, and every
	   ink passes 4.5:1 even over the gradient's lightest stop — audited */
	--panel: rgba(0, 20, 25, .30);
	--panel-2: rgba(0, 20, 25, .42);
	--line: rgba(255, 255, 255, .20);
	--line-soft: rgba(255, 255, 255, .13);
	--ink: #f2fbfa;
	--ink-2: #cde9e5;
	--ink-3: #b2d8d3;
	--mark-main: #ffffff;
	--mark-roof: #ffffff;
	--mark-facet: #ffffff;
	--accent: #ffc47d;
	--brand-soft: #8ce6da;
	--glow: 241, 156, 28;
	--shadow: 0 24px 60px -30px rgba(0, 18, 22, .8);
	--chip-needed: 1;
	color-scheme: dark;
}
[data-theme='brand'] body {
	background-image: linear-gradient(165deg, #00404d 0%, #00514b 55%, #00635a 100%);
	background-attachment: fixed;
}
/* AMBER (FBNT 2026-10-01, brief line 1196): the night world with the
   brand's own orange as its light. Warm charcoal grounds (never pure
   black), the roof's amber as THE colour — buttons, links, rails, the
   numbers, every highlight — and warm off-white ink. The isotype stays
   white, as on every dark ground (the colour rule). Every ink passes AA
   on --ground and --panel; text ON amber is the near-black --amber-ink. */
[data-theme='amber'] {
	--ground: #0f0d0a;
	--ground-2: #15120d;
	--panel: #1c1812;
	--panel-2: #251f16;
	--line: #3d3324;
	--line-soft: #2b2419;
	--ink: #fdf7ec;
	--ink-2: #e3d4b9;
	--ink-3: #c2b090;
	--mark-main: #ffffff;
	--mark-roof: #ffffff;
	--mark-facet: #ffffff;
	--brand: #f19c1c;
	--brand-deep: #f19c1c;
	--brand-soft: #ffc266;
	--accent: #ffc266;
	--glow: 241, 156, 28;
	--shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
	--chip-needed: 1;
	color-scheme: dark;
}
/* two warm glows held still behind the page, the room's lamps */
[data-theme='amber'] body {
	background-image:
		radial-gradient(1100px 620px at 88% -8%, rgba(241, 156, 28, .13), transparent 62%),
		radial-gradient(900px 520px at -8% 108%, rgba(241, 156, 28, .07), transparent 60%);
	background-attachment: fixed;
}
/* amber carries dark text, never white */
[data-theme='amber'] .btn-primary { color: var(--amber-ink); }
[data-theme='amber'] .btn-primary:hover { background: var(--amber-soft); border-color: var(--amber-soft); }
[data-theme='amber'] .site-header.is-stuck { background: color-mix(in srgb, #0f0d0a 82%, transparent); }
[data-theme='amber'] ::selection { background: rgba(241, 156, 28, .35); }
/* the inverted (cream) tooltip needs a DEEP amber for its title */
[data-theme='amber'] .xtl3-tip-h { color: #8a4f00; }

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip-link {
	position: absolute; inset-inline-start: -9999px; inset-block-start: 8px; z-index: 200;
	background: var(--brand-deep); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 12px; }

/* ------------------------------------------------------------- typography */
h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.08rem, 1.6vw, 1.25rem); font-weight: 550; }
p { margin: 0 0 1em; }
p:last-child { margin-block-end: 0; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: var(--maxw-text); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: .92em; }

.eyebrow {
	font-family: var(--font-mono);
	font-size: .72rem; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1rem;
}

/* ----------------------------------------------------------------- layout */
.wrap { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-inline-size: 860px; }
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.is-center { justify-content: center; }

/* ---------------------------------------------------------------- buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	font-family: var(--font-display); font-weight: 550;
	font-size: .96rem; letter-spacing: -.01em; line-height: 1;
	padding: .95em 1.5em;
	border-radius: var(--pill);
	border: 1px solid var(--line);
	background: transparent; color: var(--ink);
	cursor: pointer; white-space: nowrap;
	transition: transform var(--speed) var(--ease), background var(--speed) var(--ease),
		border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
	background: var(--brand-deep); border-color: var(--brand-deep); color: #fff;
	box-shadow: 0 12px 30px -14px rgba(var(--glow), .8);
}
.btn-primary:hover { background: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { border-color: var(--ink-3); }
/* A DOOR SAYS SO (FBNT 2026-10-01, brief line 1146): every ghost button
   that leads somewhere — "Ver las funciones de este rol", the cards'
   recorrido, the demo — fills with the brand's tint when hovered, so the
   visitor sees there is something behind it */
.btn-ghost:hover, .btn-ghost:focus-visible {
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
	color: var(--ink);
}
[data-theme='dark'] .btn-ghost:hover, [data-theme='amber'] .btn-ghost:hover, [data-theme='brand'] .btn-ghost:hover,
[data-theme='dark'] .btn-ghost:focus-visible, [data-theme='amber'] .btn-ghost:focus-visible, [data-theme='brand'] .btn-ghost:focus-visible {
	background: color-mix(in srgb, var(--brand) 32%, transparent);
	border-color: var(--brand-soft);
}
.xrole-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* the feature cards' own door turns too when the whole card is hovered */
.sol-card[data-tour]:hover .sol-tour {
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
}
.btn-sm { font-size: .875rem; padding: .7em 1.1em; }
.btn-lg { font-size: 1.02rem; padding: 1.05em 1.75em; }
.btn .ico { inline-size: 1.05em; block-size: 1.05em; }
.ico { inline-size: 18px; block-size: 18px; }
[dir='rtl'] .ico-dir { transform: scaleX(-1); }

/* ----------------------------------------------------------------- chrome */
.site-header {
	position: sticky; inset-block-start: 0; z-index: 60;
	background: color-mix(in srgb, var(--ground) 80%, transparent);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-block-end: 1px solid transparent;
	transition: border-color var(--speed) var(--ease);
}
.site-header.is-stuck { border-block-end-color: var(--line-soft); }
[data-theme='brand'] .site-header { background: color-mix(in srgb, #00404d 70%, transparent); }
.header-in { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); block-size: 64px; }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { block-size: 28px; inline-size: auto; display: block; }
.brand .logo-light { display: none; }
[data-theme='clean'] .brand .logo-dark { display: none; }
[data-theme='clean'] .brand .logo-light { display: block; }

.mark-cap, .mark-body { fill: var(--mark-main); }
.mark-roof { fill: var(--mark-roof); }
.mark-facet { fill: var(--mark-facet); }

.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav a {
	font-size: .93rem; color: var(--ink-2);
	padding: .55em .8em; border-radius: var(--radius-sm);
	transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 38px; block-size: 38px;
	border-radius: var(--radius-sm); border: 1px solid transparent;
	background: transparent; color: var(--ink-2); cursor: pointer;
	transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.icon-btn:hover, .icon-btn[aria-expanded='true'] {
	color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent);
	border-color: var(--line-soft);
}

.menu {
	position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 70;
	min-inline-size: 220px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 8px;
}
[data-theme='brand'] .menu { background: #003a44; }
.menu[hidden] { display: none; }
.menu-anchor { position: relative; }
.menu-group + .menu-group { margin-block-start: 10px; border-block-start: 1px solid var(--line-soft); padding-block-start: 10px; }
.menu-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px 6px; }
.menu-opt {
	display: flex; align-items: center; gap: .6em; inline-size: 100%;
	padding: .5em .6em; border-radius: var(--radius-sm);
	border: 0; background: transparent; text-align: start;
	font-size: .9rem; color: var(--ink-2); cursor: pointer;
}
.menu-opt:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.menu-opt.is-on { color: var(--ink); }
.menu-opt.is-on .tick { opacity: 1; }
.menu-opt .tick { margin-inline-start: auto; inline-size: 15px; block-size: 15px; opacity: 0; color: var(--brand-soft); flex: none; }
.menu-opt .code { margin-inline-start: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); }
.menu-opt .code + .tick { margin-inline-start: .5em; }
/* the language button (brief 2026-09-24): the globe and the code, wider than an icon alone */
.icon-btn.is-wide { inline-size: auto; padding-inline: .55em .7em; gap: 6px; }
.icon-btn.is-wide .code { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; }
.swatch { inline-size: 15px; block-size: 15px; border-radius: 5px; flex: none; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.swatch-clean { background: linear-gradient(135deg, #fbfbfa 50%, #f19c1c 50%); }
.swatch-dark { background: linear-gradient(135deg, #021d26 50%, #009185 50%); }
.swatch-brand { background: linear-gradient(135deg, #00404d 50%, #00766b 50%); }
.swatch-amber { background: linear-gradient(135deg, #0f0d0a 50%, #f19c1c 50%); }
.swatch-motion, .swatch-still { display: none; }

/* ----------------------------------------------------------------- scenes */
.scene {
	min-block-size: calc(100svh - 64px);
	display: grid; align-content: center;
	padding-block: clamp(40px, 6vw, 90px);
}
.scene-static { padding-block: clamp(48px, 7vw, 100px); }

/* the entrance: each scene rises as one breath; its children stagger */
[data-anim='motion'] .scene-enter { animation: scene-in .55s var(--ease) both; }
[data-anim='motion'] .scene-enter > .wrap > * { animation: scene-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes scene-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
/* the scenes that carry FIXED children (the report's role menu, the
   diagnostic's phone rail) must not animate the section's transform: a
   transform animation makes the section their containing block and would
   pin them to the page instead of the viewport. They fade in whole; their
   children still stagger. */
[data-anim='motion'] :is(.scene-report, .scene-diag).scene-enter { animation-name: scene-in-fade; }
@keyframes scene-in-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* -------------------------------------------------------- the threshold */
.scene-threshold { position: relative; overflow: hidden; }
.th-in { max-inline-size: 880px; text-align: center; margin-inline: auto; display: grid; justify-items: center; position: relative; z-index: 1; }

/* THE MARK AS THE ROOM (FBNT 2026-09-08). The isotype is not a second logo:
   it fills the bottom-right quarter, faint, bleeding off the corner, behind
   everything. Its fills are the theme's own tokens, so it is coloured on the
   light ground and white on the dark ones — the colour rule, unbroken. */
.th-bg {
	position: absolute; z-index: 0;
	inline-size: min(52vw, 620px);
	inset-inline-end: clamp(-120px, -5vw, -34px);
	inset-block-end: clamp(-140px, -6vw, -40px);
	opacity: .07;
}
[data-theme='dark'] .th-bg, [data-theme='amber'] .th-bg, [data-theme='brand'] .th-bg { opacity: .10; }
/* ON THE DARK GROUNDS THE PIECES SEPARATE (FBNT 2026-10-01, brief line
   1082): all four are the same faint white there, so their shared edges
   fused into one silhouette. A ground-coloured stroke carves the channels
   between them — the gaps the single-colour isotype shows — and along the
   outer edge it only trims a hair, since there it matches what is behind. */
[data-theme='dark'] .th-bg .mark path, [data-theme='amber'] .th-bg .mark path, [data-theme='brand'] .th-bg .mark path {
	stroke: var(--ground); stroke-width: 16; stroke-linejoin: round;
}

/* the centre: the official lockup, the same two files the bar swaps */
.th-logo { margin-block-end: clamp(22px, 3vw, 36px); line-height: 0; position: relative; }
.th-logo img { inline-size: clamp(196px, 23vw, 316px); block-size: auto; display: block; }
.th-logo .logo-light { display: none; }
[data-theme='clean'] .th-logo .logo-dark { display: none; }
[data-theme='clean'] .th-logo .logo-light { display: block; }
[data-theme='dark'] .th-logo img, [data-theme='amber'] .th-logo img, [data-theme='brand'] .th-logo img {
	filter: drop-shadow(0 0 30px rgba(var(--glow), .32));
}

/* THE LIGHT THAT CROSSES THE LOGOTYPE (FBNT 2026-09-08): a diagonal band
   masked by the lockup's own shape, so it only ever touches the ink —
   white over the dark lettering, teal over the white one. */
.th-logo-sheen {
	position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(100deg, transparent 45%, rgba(255, 255, 255, .5) 50%, transparent 55%);
	background-repeat: no-repeat; background-size: 240% 100%; background-position: 0 0;
	-webkit-mask-image: url(../brand/logo.svg); mask-image: url(../brand/logo.svg);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}
[data-theme='dark'] .th-logo-sheen, [data-theme='amber'] .th-logo-sheen, [data-theme='brand'] .th-logo-sheen {
	background-image: linear-gradient(100deg, transparent 44%, rgba(0, 145, 133, .85) 50%, transparent 56%);
	-webkit-mask-image: url(../brand/white_logo.svg); mask-image: url(../brand/white_logo.svg);
}
[data-anim='motion'] .th-logo-sheen { animation: th-sheen 7s var(--ease) 1.4s infinite; }
@keyframes th-sheen { 0% { background-position: 100% 0; } 18%, 100% { background-position: 0 0; } }

/* it arrives growing into place, instead of merely rising */
[data-anim='motion'] .scene-enter > .wrap > .th-logo { animation: th-logo-in .85s var(--ease) both; }
@keyframes th-logo-in {
	from { opacity: 0; transform: translateY(16px) scale(.90); }
	to { opacity: 1; transform: none; }
}

/* while the lockup is on screen at full size, the bar's copy of it and the
   footer stand down — saying it three times says nothing */
.at-threshold .brand { visibility: hidden; }
.at-threshold #nw-footer { display: none; }
.th-sub { color: var(--ink-2); max-inline-size: 58ch; margin-inline: auto; font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* THE THIRTY (FBNT 2026-09-08): one winner process at a time, under the
   logotype. A button, because a click brings the next one; a reserved
   two-line height, because a rotating strip must never push the doors. */
.th-claims {
	min-block-size: 3.1em;
	display: grid; place-items: start center;
	margin-block-start: clamp(4px, .8vw, 10px);
}
.th-claim {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--font-display); font-weight: 500;
	font-size: clamp(1.02rem, 1.7vw, 1.3rem);
	letter-spacing: -.015em; line-height: 1.4;
	color: var(--ink-2);
	max-inline-size: 46ch; text-align: center;
	text-wrap: balance;
	transition: opacity .24s var(--ease), transform .24s var(--ease), color var(--speed) var(--ease);
}
.th-claim:hover { color: var(--ink); }

/* the cursor that never finishes: it blinks where the typing stopped, and
   holds still — present, not blinking — on the still axis */
.th-claim::after {
	content: ''; display: inline-block;
	inline-size: .58ch; block-size: 1.02em;
	margin-inline-start: .3ch; vertical-align: -.16em;
	background: currentColor; opacity: .5;
}
[data-anim='motion'] .th-claim::after { animation: th-caret 1.05s steps(1, end) infinite; }
@keyframes th-caret { 0%, 48% { opacity: .5; } 52%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.th-claim::after { animation: none !important; opacity: .5 !important; }
}

.th-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-block-start: clamp(26px, 3.4vw, 44px); inline-size: 100%; max-inline-size: 760px; }
.path-card {
	display: grid; gap: 6px; justify-items: start; text-align: start;
	padding: clamp(20px, 2.6vw, 30px);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
	position: relative;
}
.path-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.path-card.is-primary { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.path-t { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -.02em; }
.path-d { color: var(--ink-2); font-size: .93rem; }
.path-card .ico { position: absolute; inset-inline-end: 20px; inset-block-start: 22px; color: var(--brand-soft); }
[data-theme='clean'] .path-card .ico { color: var(--brand-deep); }

.th-quiet {
	margin-block-start: clamp(20px, 2.6vw, 30px);
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--ink-3); font-size: .9rem;
	text-decoration: underline; text-underline-offset: 3px;
	font-family: var(--font-body);
}
.th-quiet:hover { color: var(--ink); }

/* ----------------------------------------------------------- the wizard */
.wiz-in { max-inline-size: 760px; margin-inline: auto; display: grid; justify-items: start; }
.wiz-back {
	display: inline-flex; align-items: center; gap: .5em;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--ink-3); font-size: .9rem; font-family: var(--font-body);
	margin-block-end: clamp(20px, 3vw, 34px);
}
.wiz-back:hover { color: var(--ink); }
.wiz-back .ico { inline-size: 15px; block-size: 15px; }
.wiz-q { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-inline-size: 22ch; }
.wiz-options { display: grid; gap: 12px; inline-size: 100%; margin-block-start: clamp(18px, 2.6vw, 30px); }

.who-card {
	display: grid; gap: 4px; justify-items: start; text-align: start;
	inline-size: 100%;
	padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	font-family: var(--font-body);
	transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease),
		background var(--speed) var(--ease);
}
.who-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
	background: color-mix(in srgb, var(--brand) 5%, var(--panel));
}
.who-card b { font-family: var(--font-display); font-weight: 560; font-size: 1.06rem; letter-spacing: -.015em; }
.who-card span { color: var(--ink-2); font-size: .92rem; }
.who-card.is-answer { padding-block: clamp(14px, 1.8vw, 18px); }

/* --------------------------------------------- the mark as progress meter */
.diag-progress { display: flex; align-items: center; gap: 14px; margin-block-end: clamp(16px, 2.4vw, 26px); }
.diag-mark { display: block; inline-size: 44px; }
[data-theme='dark'] .diag-mark, [data-theme='amber'] .diag-mark, [data-theme='brand'] .diag-mark {
	--mark-main: #00232e; --mark-roof: #f19c1c; --mark-facet: #009185;
	background: #fff; padding: 6px; border-radius: 10px;
}
.diag-count { font-size: .78rem; color: var(--ink-3); letter-spacing: .06em; }
/* pieces arrive with the answers: data-diag-built 1..4 on the scene */
.scene-question .diag-mark .mark-roof,
.scene-question .diag-mark .mark-facet,
.scene-question .diag-mark .mark-body { opacity: .13; transition: opacity .45s var(--ease); }
.scene-question:is([data-diag-built='2'], [data-diag-built='3'], [data-diag-built='4']) .diag-mark .mark-roof { opacity: 1; }
.scene-question:is([data-diag-built='3'], [data-diag-built='4']) .diag-mark .mark-facet { opacity: 1; }
.scene-question[data-diag-built='4'] .diag-mark .mark-body { opacity: 1; }

/* ------------------------------------------------ the slider diagnostic --
   The teacher's diagnosis (brief 2026-09-03): every question a slider
   between two extremes in the left column; the live 2x2 aspect grid at its
   side, blue to red. The tones paint edges and bars only — every word
   stays in --ink, so the contrast audit holds in all three worlds. */
.diag-wrap { max-inline-size: 1080px; }
.diag-hint { font-size: .95rem; max-inline-size: 60ch; }
.diag-cols {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(20px, 3vw, 40px);
	inline-size: 100%;
	margin-block-start: clamp(18px, 2.6vw, 30px);
	align-items: start;
}
.diag-qs { display: grid; gap: clamp(12px, 1.8vw, 20px); }
.diag-row {
	padding: clamp(14px, 1.8vw, 20px);
	background: var(--panel);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease),
		transform var(--speed) var(--ease);
}
/* the hovered question steps forward from its siblings */
.diag-row:hover, .diag-row:focus-within {
	border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
	background: color-mix(in srgb, var(--brand) 4%, var(--panel));
	transform: translateY(-1px);
}
.diag-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.diag-row-t { font-family: var(--font-display); font-weight: 560; font-size: .98rem; letter-spacing: -.015em; cursor: pointer; }
.diag-row-score { font-size: .8rem; color: var(--accent); flex: none; }
.diag-row.is-untouched .diag-row-score { color: var(--ink-3); }
.diag-range {
	appearance: none; -webkit-appearance: none;
	inline-size: 100%; block-size: 22px;
	background: transparent; cursor: pointer;
	margin-block: 8px 2px;
}
.diag-range::-webkit-slider-runnable-track {
	block-size: 4px; border-radius: 2px;
	background: linear-gradient(to right,
		color-mix(in srgb, var(--tone-red) 55%, var(--line)),
		color-mix(in srgb, var(--tone-orange) 50%, var(--line)),
		color-mix(in srgb, var(--tone-green) 50%, var(--line)),
		color-mix(in srgb, var(--tone-blue) 55%, var(--line)));
}
.diag-range::-moz-range-track {
	block-size: 4px; border-radius: 2px;
	background: linear-gradient(to right,
		color-mix(in srgb, var(--tone-red) 55%, var(--line)),
		color-mix(in srgb, var(--tone-orange) 50%, var(--line)),
		color-mix(in srgb, var(--tone-green) 50%, var(--line)),
		color-mix(in srgb, var(--tone-blue) 55%, var(--line)));
}
.diag-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	inline-size: 18px; block-size: 18px; border-radius: 50%;
	background: var(--brand-deep);
	border: 3px solid var(--panel);
	box-shadow: 0 0 0 1px var(--brand-deep);
	margin-block-start: -7px;
}
.diag-range::-moz-range-thumb {
	inline-size: 18px; block-size: 18px; border-radius: 50%;
	background: var(--brand-deep);
	border: 3px solid var(--panel);
	box-shadow: 0 0 0 1px var(--brand-deep);
}
/* an untouched slider holds ALL its colour back (user 2026-09-10): light
   grey thumb on a grey track, score at '—' — nothing pretends the resting
   position is an answer */
.diag-row.is-untouched .diag-range::-webkit-slider-runnable-track { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.diag-row.is-untouched .diag-range::-moz-range-track { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.diag-row.is-untouched .diag-range::-webkit-slider-thumb {
	background: color-mix(in srgb, var(--ink-3) 55%, var(--panel));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent);
}
.diag-row.is-untouched .diag-range::-moz-range-thumb {
	background: color-mix(in srgb, var(--ink-3) 55%, var(--panel));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent);
}
/* the circle asks to be moved: a soft heartbeat halo until the first
   touch (brief line 657) */
@keyframes thumb-beat {
	0%, 100% {
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent),
			0 0 0 0 rgba(var(--glow), .45);
	}
	55% {
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent),
			0 0 0 8px rgba(var(--glow), 0);
	}
}
[data-anim='motion'] .diag-row.is-untouched .diag-range::-webkit-slider-thumb { animation: thumb-beat 1.7s ease-out infinite; }
[data-anim='motion'] .diag-row.is-untouched .diag-range::-moz-range-thumb { animation: thumb-beat 1.7s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.diag-range::-webkit-slider-thumb { animation: none !important; }
	.diag-range::-moz-range-thumb { animation: none !important; }
}

/* once touched, the thumb wears the band of its value */
.diag-row[data-tone='red'] .diag-range::-webkit-slider-thumb { background: var(--tone-red); box-shadow: 0 0 0 1px var(--tone-red); }
.diag-row[data-tone='red'] .diag-range::-moz-range-thumb { background: var(--tone-red); box-shadow: 0 0 0 1px var(--tone-red); }
.diag-row[data-tone='orange'] .diag-range::-webkit-slider-thumb { background: var(--tone-orange); box-shadow: 0 0 0 1px var(--tone-orange); }
.diag-row[data-tone='orange'] .diag-range::-moz-range-thumb { background: var(--tone-orange); box-shadow: 0 0 0 1px var(--tone-orange); }
.diag-row[data-tone='green'] .diag-range::-webkit-slider-thumb { background: var(--tone-green); box-shadow: 0 0 0 1px var(--tone-green); }
.diag-row[data-tone='green'] .diag-range::-moz-range-thumb { background: var(--tone-green); box-shadow: 0 0 0 1px var(--tone-green); }
.diag-row[data-tone='blue'] .diag-range::-webkit-slider-thumb { background: var(--tone-blue); box-shadow: 0 0 0 1px var(--tone-blue); }
.diag-row[data-tone='blue'] .diag-range::-moz-range-thumb { background: var(--tone-blue); box-shadow: 0 0 0 1px var(--tone-blue); }
.diag-row-ends { display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.diag-row-level { margin: 8px 0 0; font-size: .9rem; color: var(--ink-2); min-block-size: 2.9em; }
.diag-row.is-untouched .diag-row-level { color: var(--ink-3); }

/* the live grid: 2x2, sticky so it answers while the questions scroll */
.diag-live {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
	position: sticky; inset-block-start: 84px;
}
.aspect-card {
	display: grid; gap: 8px; align-content: start;
	padding: clamp(14px, 1.8vw, 20px);
	background: var(--panel);
	border: 1px solid var(--line-soft);
	border-block-start: 3px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.aspect-head { display: flex; align-items: center; gap: .55em; }
.aspect-ico { inline-size: 17px; block-size: 17px; flex: none; color: var(--brand-soft); }
[data-theme='clean'] .aspect-ico { color: var(--brand-deep); }
.aspect-card:not([data-tone='none']) .aspect-ico { color: #fff; }
.aspect-t { font-family: var(--font-display); font-weight: 560; font-size: .9rem; letter-spacing: -.01em; }
.aspect-score { font-size: 1.15rem; color: var(--ink-2); }
.aspect-bar { block-size: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.aspect-fill { display: block; block-size: 100%; inline-size: 0%; border-radius: 3px; background: var(--line); transition: inline-size .25s var(--ease), background .25s var(--ease); }
/* a toned card FILLS with its colour and speaks in white (user 2026-09-10) */
.aspect-card:not([data-tone='none']) { color: #fff; }
.aspect-card:not([data-tone='none']) .aspect-score { color: #fff; }
.aspect-card:not([data-tone='none']) .aspect-bar { background: rgba(255, 255, 255, .28); }
.aspect-card:not([data-tone='none']) .aspect-fill { background: #fff; }
/* until three questions are answered the grid only promises: every card
   says it is calculating, toneless — two answers are not a diagnosis
   (user 2026-09-10) */
.diag-live.is-calculating .aspect-score { font-size: .82rem; color: var(--ink-3); }
[data-anim='motion'] .diag-live.is-calculating .aspect-score { animation: diag-calc 1.6s ease-in-out infinite; }
@keyframes diag-calc { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.diag-live.is-calculating .aspect-score { animation: none !important; }
}
.aspect-card[data-tone='red'] { background: var(--tone-red); border-color: var(--tone-red); }
.aspect-card[data-tone='orange'] { background: var(--tone-orange); border-color: var(--tone-orange); }
.aspect-card[data-tone='green'] { background: var(--tone-green); border-color: var(--tone-green); }
.aspect-card[data-tone='blue'] { background: var(--tone-blue); border-color: var(--tone-blue); }

/* the mark below the cards (brief line 655): twice its old size, still
   completing piece by piece with the answers, no sentence explaining it */
.diag-live .diag-mark {
	inline-size: 88px;
	grid-column: 1 / -1; justify-self: center;
	margin-block-start: 8px;
}

.diag-actions { margin-block-start: clamp(20px, 3vw, 32px); gap: 18px; }
.diag-more { margin: 0; }
.diag-more[hidden] { display: none; }

/* the phone's aspect rail (brief line 623): four icons, number below each,
   coloured by their band; hidden on wide screens where the grid is sticky */
.diag-rail { display: none; }
.rail-item { display: grid; justify-items: center; gap: 2px; color: var(--ink-3); }
.rail-ico { inline-size: 15px; block-size: 15px; }
.rail-n { font-size: .6rem; color: inherit; }
.rail-item[data-tone='red'] { color: var(--tone-red); }
.rail-item[data-tone='orange'] { color: var(--tone-orange); }
.rail-item[data-tone='green'] { color: var(--tone-green); }
.rail-item[data-tone='blue'] { color: var(--tone-blue); }

/* ------------------------------------------------------------ the dossier */
.report-head { max-inline-size: 780px; margin-block-end: clamp(30px, 4vw, 48px); }
.chips-said { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 18px; }
.chip-said {
	display: grid; gap: 2px;
	font-size: .84rem; color: var(--ink-2);
	border: 1px solid var(--line);
	background: var(--panel);
	padding: .55em .95em; border-radius: var(--radius-sm);
}
.chip-q {
	font-family: var(--font-mono); font-weight: 500;
	font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--ink-3);
}

/* the promise over the cards (brief line 629) */
.report-what { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-block-end: clamp(16px, 2.4vw, 26px); }
.report-what b { color: var(--brand-deep); }
[data-theme='dark'] .report-what b, [data-theme='amber'] .report-what b, [data-theme='brand'] .report-what b { color: var(--brand-soft); }

/* ------------------------------------------------- the role explorer --
   Brief line 630: a fixed left rail of role icons; hovering or focusing
   it reveals the names and the small start-its-diagnosis button, the menu
   stays crisp on its glass, and the page behind blurs slightly. */
.role-menu {
	position: fixed; inset-inline-start: 12px; inset-block-start: 50%;
	transform: translateY(-50%); z-index: 55;
	display: grid; gap: 4px;
	padding: 10px 8px;
	background: color-mix(in srgb, var(--panel) 78%, transparent);
	backdrop-filter: blur(12px) saturate(1.2);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	max-inline-size: 55px; overflow: hidden;
	transition: max-inline-size .32s var(--ease);
}
.role-menu:hover, .role-menu:focus-within {
	max-inline-size: min(92vw, 460px);
	/* the open menu owns the moment (brief line 652) */
	box-shadow: 0 30px 80px -24px rgba(0, 18, 22, .55);
}
/* the copy keeps a lane clear of the collapsed menu (brief line 648) */
@media (min-width: 901px) {
	.scene-report .wrap { padding-inline-start: calc(var(--gutter) + 72px); }
}
.role-item { display: flex; align-items: center; gap: 2px; }
.role-view {
	display: flex; align-items: center; gap: .65em;
	flex: 1; inline-size: 100%;
	background: none; border: 0; cursor: pointer;
	padding: .5em .6em; border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: .88rem; text-align: start;
	color: var(--ink-2); white-space: nowrap;
}
.role-view:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); }
.role-item.is-on .role-view { color: var(--brand-deep); }
[data-theme='dark'] .role-item.is-on .role-view, [data-theme='amber'] .role-item.is-on .role-view,
[data-theme='brand'] .role-item.is-on .role-view { color: var(--brand-soft); }
.role-ico { inline-size: 17px; block-size: 17px; flex: none; }
.role-name { opacity: 0; transition: opacity .22s var(--ease) .06s; }
.role-menu:hover .role-name, .role-menu:focus-within .role-name { opacity: 1; }
/* THE CURRENT ROLE WEARS ITS NAME (brief line 1045): a pill beside the
   icon, there before any hover, so the menu says where the visitor is */
.role-item.is-on .role-name {
	opacity: 1;
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	border-radius: 999px; padding: .2em .7em;
	font-weight: 560;
}
/* the way out to the whole platform, above the roles — a link dressed
   like its sibling buttons */
.role-full {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 9px; border-radius: 10px;
	color: var(--ink-2); text-decoration: none;
	font-size: .88rem; white-space: nowrap;
	border-block-end: 1px solid var(--line-soft);
	margin-block-end: 2px; padding-block-end: 9px;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.role-full:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); }
.role-diag {
	display: none; align-items: center; justify-content: center;
	inline-size: 30px; block-size: 30px; flex: none;
	background: none; border: 0; border-radius: var(--radius-sm);
	color: var(--ink-3); cursor: pointer;
}
.role-diag[hidden] { display: none !important; }
.role-menu:hover .role-diag, .role-menu:focus-within .role-diag { display: inline-flex; }
.role-diag:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); }
.role-diag .ico { inline-size: 14px; block-size: 14px; }
.scene-report .wrap { transition: filter .3s var(--ease); }
/* blurred AND slightly darker, so the open menu gets the attention */
.role-menu:hover ~ .wrap, .role-menu:focus-within ~ .wrap { filter: blur(3px) brightness(.85); }
.report-cards { display: grid; gap: var(--gap); }
.sol-card {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(20px, 3vw, 40px); align-items: center;
	background: var(--panel);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 2.8vw, 34px);
	box-shadow: var(--shadow);
}
.sol-card:nth-child(even) { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.sol-card:nth-child(even) .sol-media { order: 2; }
/* hovering a feature highlights it (brief line 643) and tilts its image in
   3-D (the transform is written by wireSolCard, capped at tilt_deg) */
.sol-card { transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.sol-card:hover {
	border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
	box-shadow: 0 30px 70px -32px rgba(var(--glow), .5);
}
.sol-media {
	border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
	overflow: hidden; background: var(--ground-2);
	position: relative;
	display: grid;
	transition: transform .18s ease-out;
	transform-style: preserve-3d; will-change: transform;
}
.sol-media img { inline-size: 100%; block-size: auto; display: block; }
/* the carousel: slides stack and crossfade; dots float over the corner */
.sol-slide { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .55s var(--ease); }
.sol-slide.is-on { opacity: 1; }
.sol-media > :only-child { opacity: 1; }
.sol-dots {
	position: absolute; inset-block-end: 8px; inset-inline: 0;
	display: flex; gap: 6px; justify-content: center;
}
.sol-dot {
	inline-size: 8px; block-size: 8px; padding: 0;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8);
	background: rgba(0, 0, 0, .35); cursor: pointer;
}
.sol-dot.is-on { background: #fff; }
.sol-body h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.sol-body p { color: var(--ink-2); font-size: .97rem; }

/* A CARD THE DECK EXPLAINS IS A DOOR (brief line 917): the whole card opens
   the recorrido, so it says so — the pointer, a warmer hover, and the button
   under the copy that the keyboard reaches. */
.sol-card[data-tour] { cursor: pointer; }
.sol-card[data-tour]:hover { border-color: color-mix(in srgb, var(--brand) 75%, var(--line)); }
.sol-tour { margin-block-start: 16px; }

.needed-shot {
	display: grid; place-items: center; gap: 10px; align-content: center;
	aspect-ratio: 2266 / 1210;
	border: 1px dashed var(--line);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--ink) 4%, var(--ground-2));
	padding: 18px; text-align: center;
}
.pending-mark {
	display: block; inline-size: 44px;
	background: #fff; padding: 8px; border-radius: 11px;
	--mark-main: #00232e; --mark-roof: #f19c1c; --mark-facet: #009185;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.ph-flag {
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--amber-ink); background: var(--amber-soft);
	padding: .4em .8em; border-radius: var(--pill);
}
.ph-need { font-size: .85rem; color: var(--ink-3); max-inline-size: 40ch; margin: 0; }

.report-timeline { margin-block-start: clamp(36px, 5vw, 60px); }
.report-timeline .xtl-wrap { margin-block-start: 0; }
.timeline { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: tl; }
.timeline li {
	counter-increment: tl;
	background: var(--panel); border: 1px solid var(--line-soft);
	border-radius: var(--radius); padding: clamp(18px, 2.4vw, 26px);
}
.timeline li::before {
	content: '0' counter(tl);
	display: block;
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
	color: var(--accent); margin-block-end: 12px;
}
.timeline b { display: block; font-family: var(--font-display); font-weight: 560; margin-block-end: .4em; letter-spacing: -.015em; }
.timeline span { color: var(--ink-2); font-size: .92rem; }

.report-links { display: flex; gap: 26px; justify-content: center; margin-block-start: 26px; }

/* --------------------------------------------------------------- explore */
.explore-head { max-inline-size: 800px; margin-block-end: clamp(28px, 4vw, 44px); }
.explore-shot { max-inline-size: 980px; margin-inline: auto; }

/* ------------------------------------------------------ /explorar, v2 ---
   The showcase (FBNT 2026-10-01, brief line 1045): the role rail, the
   thirty-screen carousel, the counting stats, the marquee, the role
   sections with parallax, the flip cards and the onboarding Gantt. All of
   it over the site's own tokens, so the three themes come for free. */

/* the rail (brief line 1091): idle it is the quiet icon column of the
   vista page — NO border around the whole menu, only the current page's
   name floating beside its icon as a bordered pill. Hovered or focused it
   grows into the panel with every name. The names are ALWAYS in the flow
   (transparent when idle) and only the container's width animates, so
   nothing jumps. */
.xrail {
	position: fixed; inset-inline-start: 12px; inset-block-start: 50%;
	transform: translateY(-50%); z-index: 55;
	display: grid; gap: 4px; padding: 8px;
	inline-size: 54px;
	background: transparent;
	border: 1px solid transparent; border-radius: 16px;
	transition: inline-size .32s var(--ease), background .32s var(--ease),
		border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.xrail:hover, .xrail:focus-within {
	inline-size: 258px;
	background: color-mix(in srgb, var(--panel) 85%, transparent);
	backdrop-filter: blur(12px) saturate(1.2);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	border-color: var(--line);
	box-shadow: var(--shadow);
}
.xrail-it {
	display: flex; align-items: center; gap: 10px;
	padding: 8px; border-radius: 10px;
	color: var(--ink-2); text-decoration: none;
	font-size: .86rem; white-space: nowrap;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.xrail-it:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--ink); }
.xrail-ico { inline-size: 17px; block-size: 17px; flex: none; }
.xrail-name { opacity: 0; pointer-events: none; transition: opacity .24s var(--ease) .05s; }
.xrail:hover .xrail-name, .xrail:focus-within .xrail-name { opacity: 1; pointer-events: auto; }
.xrail-it.is-on { color: var(--brand-deep); }
[data-theme='dark'] .xrail-it.is-on, [data-theme='amber'] .xrail-it.is-on, [data-theme='brand'] .xrail-it.is-on { color: var(--brand-soft); }
/* the pill: a slight border of its own, visible with or without the panel */
.xrail-it.is-on .xrail-name {
	opacity: 1; pointer-events: auto;
	background: var(--panel);
	border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
	border-radius: 999px; padding: .22em .75em;
	font-weight: 560;
	box-shadow: 0 6px 20px -12px rgba(0, 18, 22, .35);
}

/* the blobs behind the carousel overflow it on purpose; the page must
   not grow sideways for them (phones showed a 90px horizontal scroll) */
.xplore { overflow-x: clip; }

/* the carousel: one 16:9 stage, the slides stacked and crossfading; the
   caption a chip over the frame's lower edge; a progress hair under it */
.xcar { position: relative; outline: none; }
.xcar:focus-visible .xcar-frame { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.xcar-frame { position: relative; z-index: 1; }
.xcar-stage { position: relative; display: grid; aspect-ratio: 16 / 9; background: var(--ground-2); }
.xc-slide {
	grid-area: 1 / 1; margin: 0; position: relative;
	opacity: 0; visibility: hidden;
	transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.xc-slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
/* a slide a presengen deck explains is a door (brief line 1085) */
.xc-slide[data-tour-pain] { cursor: pointer; }
.xc-media, .xc-media picture { display: block; block-size: 100%; }
.xc-media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.xc-cap {
	position: absolute; inset-inline-start: 14px; inset-block-end: 14px;
	max-inline-size: min(70%, 48ch);
	padding: .45em .9em; border-radius: 999px;
	background: color-mix(in srgb, var(--ground) 82%, transparent);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--line);
	font-size: .86rem; font-weight: 560; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xcar-bar { block-size: 3px; background: var(--line-soft); }
.xcar-bar i { display: block; block-size: 100%; inline-size: 0; background: var(--brand); }
[data-anim='motion'] .xcar-bar i.is-run { animation: xcar-run var(--xcar-ms, 4600ms) linear forwards; }
@keyframes xcar-run { from { inline-size: 0; } to { inline-size: 100%; } }
.xcar-ui {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-block-start: 14px;
}
.xcar-n { min-inline-size: 5.5ch; text-align: center; font-size: .85rem; color: var(--ink-2); }
.xcar-back { transform: scaleX(-1); }
.xcar-pp { position: relative; inline-size: .85em; block-size: .9em; }
.xcar-pp::before, .xcar-pp::after {
	content: ''; position: absolute; inset-block: 0; inline-size: .28em;
	background: currentColor; border-radius: 1px;
	transition: clip-path var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.xcar-pp::before { inset-inline-start: 0; }
.xcar-pp::after { inset-inline-end: 0; }
[aria-pressed='true'] .xcar-pp::before {
	inset-inline: 0; inline-size: 100%;
	clip-path: polygon(12% 0, 100% 50%, 12% 100%);
}
[aria-pressed='true'] .xcar-pp::after { transform: scaleY(0); }

/* the gradient blobs breathing behind the carousel */
.xblob {
	position: absolute; z-index: 0; border-radius: 50%;
	inline-size: 340px; block-size: 340px; filter: blur(70px); opacity: .5;
	pointer-events: none;
}
.xb1 { background: color-mix(in srgb, var(--brand) 55%, transparent); inset-block-start: -90px; inset-inline-start: -120px; }
.xb2 { background: color-mix(in srgb, var(--accent) 40%, transparent); inset-block-end: -110px; inset-inline-end: -110px; }

/* the stats, counting themselves up */
.xstats { margin-block-start: clamp(48px, 8vw, 84px); text-align: center; }
.xstats-grid {
	/* one row of four (brief line 1154) */
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap); margin-block-start: 26px;
}
.xstat {
	padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--panel);
}
.xstat-n {
	display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 650;
	color: var(--brand-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
[data-theme='dark'] .xstat-n, [data-theme='amber'] .xstat-n, [data-theme='brand'] .xstat-n { color: var(--brand-soft); }
.xstat span { font-size: .88rem; color: var(--ink-2); }

/* the marquee of feature names — full-bleed, slow, decorative */
.xband { overflow: hidden; margin-block-start: clamp(48px, 8vw, 84px); padding-block: 6px; }
.xband-track { display: flex; gap: 10px; inline-size: max-content; }
[data-anim='motion'] .xband-track { animation: xband-walk 60s linear infinite; }
.xband:hover .xband-track { animation-play-state: paused; }
@keyframes xband-walk { to { transform: translateX(-50%); } }
.xchip {
	display: inline-block; padding: .4em .95em; border-radius: 999px;
	border: 1px solid var(--line); background: var(--panel);
	font-size: .85rem; color: var(--ink-2); white-space: nowrap;
}

/* the role sections: copy one side, the screenshot drifting on the other */
.xroles { margin-block-start: clamp(56px, 9vw, 96px); }
.xroles > h2, .xstats > h2, .xlms > h2, .xtl-wrap > h2, .xfacts > h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em;
}
.xroles > .lead, .xlms > .lead, .xtl-wrap > .lead { max-inline-size: 60ch; }
.xrole {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(22px, 4vw, 48px); align-items: center;
	margin-block-start: clamp(28px, 4vw, 44px);
	/* a card like the vista's feature cards (brief line 1091): panel,
	   border, a highlight when hovered — and the screenshot tilting
	   under the pointer (xTilts in app.js) */
	padding: clamp(18px, 3vw, 32px);
	background: var(--panel);
	border: 1px solid var(--line); border-radius: var(--radius-lg);
	transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.xrole:hover {
	border-color: color-mix(in srgb, var(--brand) 75%, var(--line));
	background: color-mix(in srgb, var(--brand) 4%, var(--panel));
	box-shadow: var(--shadow);
}
.xrole .shot-frame { transition: transform .18s linear; will-change: transform; }
.xrole.is-door { cursor: pointer; }
/* the chips arrive one after another and each catches the light (brief
   line 1161); --i is the chip's place, set by app.js */
.xrole .xchip { position: relative; overflow: hidden; }
[data-anim='motion'] .xrole.is-play .xchip {
	animation: xchip-in .42s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 90ms);
}
[data-anim='motion'] .xrole.is-play .xchip::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 30%,
		color-mix(in srgb, var(--brand-soft) 45%, transparent) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: xchip-shine .9s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 90ms + .25s);
	pointer-events: none;
}
@keyframes xchip-in { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes xchip-shine { to { transform: translateX(120%); } }

/* the separators (brief line 1161): a hovered card leans ~20 degrees, a
   clicked one turns over to its proof */
.xpillars { perspective: 1200px; }
.pillar.xpillar { padding: 0; background: none; border: 0; cursor: pointer; outline: none; }
.xpillar-in {
	position: relative; block-size: 100%;
	transform-style: preserve-3d;
	transition: transform .55s var(--ease);
}
.xpillar:hover .xpillar-in { transform: rotateY(-20deg) rotateX(4deg); }
.xpillar.is-flip .xpillar-in { transform: rotateY(180deg); }
.xpillar.is-flip:hover .xpillar-in { transform: rotateY(172deg); }
.xpillar:focus-visible .xpillar-front { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
[data-anim='still'] .xpillar-in { transition: none; }
[data-anim='still'] .xpillar:hover .xpillar-in { transform: none; }
[data-anim='still'] .xpillar.is-flip .xpillar-in, [data-anim='still'] .xpillar.is-flip:hover .xpillar-in { transform: rotateY(180deg); }
.xpillar-front, .xpillar-back {
	background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.xpillar-front { block-size: 100%; padding: clamp(20px, 2.4vw, 28px); }
.xpillar-front p { color: var(--ink-2); font-size: .95rem; }
.xpillar-back {
	position: absolute; inset: 0; overflow: hidden;
	transform: rotateY(180deg);
	display: grid; place-items: center; padding: 8px;
}
.xpillar-back picture, .xpillar-back img { display: block; inline-size: 100%; block-size: 100%; }
.xpillar-back img { object-fit: cover; object-position: left top; border-radius: calc(var(--radius) - 6px); }
.xrole:nth-child(odd) .xrole-copy { order: 2; }
.xrole h3 {
	display: flex; align-items: center; gap: .5em;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.015em;
}
.xrole-ico { inline-size: 1.15em; block-size: 1.15em; flex: none; color: var(--brand); }
.xrole-copy p { color: var(--ink-2); }
.xchips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px 18px; }
.xrole-shot { will-change: transform; }

/* the LMS photo cards (brief lines 1091 + 1118): five in a row, the
   scene small, the longer story on the card's back — hover, tap or
   focus turns it around */
.xlms { margin-block-start: clamp(56px, 9vw, 96px); }
.xphotos {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px; margin-block-start: 26px;
	perspective: 1400px;
}
.xphoto { position: relative; min-block-size: 228px; cursor: pointer; outline: none; }
.xphoto:focus-visible { border-radius: var(--radius); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.xphoto-in {
	position: relative; block-size: 100%;
	transform-style: preserve-3d;
	transition: transform .6s var(--ease);
}
.xphoto:hover .xphoto-in, .xphoto:focus-visible .xphoto-in, .xphoto.is-flip .xphoto-in { transform: rotateY(180deg); }
[data-anim='still'] .xphoto-in { transition: none; }
.xphoto-face {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	background: var(--panel);
	border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.xphoto-media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; flex: none; }
.xphoto-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.xphoto-face h3 {
	display: flex; align-items: center; gap: .5em;
	font-size: .92rem; letter-spacing: -.01em;
	padding: 12px 14px; margin: 0;
}
.xphoto-face h3 .ico { inline-size: 16px; block-size: 16px; flex: none; color: var(--brand); }
.xphoto-back {
	transform: rotateY(180deg);
	background: color-mix(in srgb, var(--brand) 8%, var(--panel));
	justify-content: flex-start;
}
.xphoto-back h3 { padding-block-end: 0; }
.xphoto-back p { margin: 0; padding: 8px 14px 14px; font-size: .8rem; line-height: 1.5; color: var(--ink-2); overflow-y: auto; }

/* the onboarding matrix (brief line 1118): stages across the top with a
   small summary under each name, roles down the left with room of their
   own, an icon on every intersection riding its lane's line, and a
   one-cell tooltip. Smaller text throughout. */
.xtl-wrap { margin-block-start: clamp(56px, 9vw, 96px); }
.xtl3 {
	display: grid;
	grid-template-columns: minmax(130px, auto) repeat(5, minmax(0, 1fr));
	gap: 2px 10px; align-items: center;
	margin-block-start: 30px; max-inline-size: 1020px;
}
.xtl3-x { padding-block-end: 8px; align-self: end; }
.xtl3-x b {
	display: block;
	font-family: var(--font-display); font-weight: 560; font-size: .88rem;
	letter-spacing: -.01em; color: var(--ink);
}
.xtl3-x span { display: block; margin-block-start: 2px; font-size: .74rem; line-height: 1.35; color: var(--ink-3); }
.xtl3-y {
	display: flex; align-items: center; gap: 8px;
	padding-inline-end: 14px;
	font-size: .8rem; font-weight: 560; color: var(--ink-2);
}
.xtl3-y .ico { flex: none; inline-size: 15px; block-size: 15px; color: var(--brand); }
/* each intersection sits on its lane's line */
.xtl3-node {
	position: relative; display: grid; place-items: center;
	padding-block: 9px;
	background: linear-gradient(var(--line-soft), var(--line-soft)) center / 100% 2px no-repeat;
}
.xtl3-ico {
	position: relative; z-index: 1;
	display: grid; place-items: center;
	inline-size: 38px; block-size: 38px; border-radius: 50%;
	background: var(--panel); color: var(--brand);
	border: 2px solid color-mix(in srgb, var(--brand) 45%, var(--line));
	cursor: default; padding: 0;
	transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.xtl3-ico .ico { inline-size: 16px; block-size: 16px; }
.xtl3-node:hover .xtl3-ico, .xtl3-node:has(.xtl3-ico:focus-visible) .xtl3-ico {
	transform: scale(1.14); border-color: var(--brand);
}
/* one role, one moment */
.xtl3-tip {
	position: absolute; z-index: 6;
	inset-block-end: calc(100% + 4px); inset-inline-start: 50%;
	transform: translateX(-50%) translateY(4px);
	inline-size: min(300px, 80vw);
	padding: 12px 15px;
	/* INVERTED for contrast (brief line 1137): the theme's ink as the
	   ground, the theme's ground as the text — dark on the light theme,
	   light on the dark ones, legible over anything behind it */
	background: var(--ink); color: var(--ground);
	border: 0; border-radius: var(--radius-sm);
	box-shadow: 0 18px 40px -16px rgba(0, 18, 22, .55);
	font-size: .92rem; line-height: 1.5; font-weight: 500; text-align: start;
	opacity: 0; visibility: hidden;
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
/* ONE TOOLTIP AT A TIME (brief line 1141): hover opens it, and so does
   KEYBOARD focus — not the focus a click leaves behind, which kept a
   second tip open beside the hovered one. While the pointer is anywhere
   on the matrix, only the hovered cell may speak. */
.xtl3-node:hover .xtl3-tip, .xtl3-node:has(.xtl3-ico:focus-visible) .xtl3-tip {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
	transition-delay: 0s;
}
.xtl3:hover .xtl3-node:not(:hover) .xtl3-tip {
	opacity: 0; visibility: hidden; transition-delay: 0s;
}
/* THE FOCUS GOES TO THE CARD (brief line 1141): while a cell speaks, the
   rest of the matrix blurs and dims behind a veil; the speaking cell rises
   above it, sharp. The veil ignores the pointer, so moving to the next
   cell just moves the focus. */
.xtl3 { position: relative; }
.xtl3::after {
	content: ''; position: absolute; inset: -14px -10px; z-index: 4;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--ground) 45%, transparent);
	backdrop-filter: blur(3px) brightness(.88);
	-webkit-backdrop-filter: blur(3px) brightness(.88);
	opacity: 0; pointer-events: none;
	transition: opacity .22s var(--ease);
}
.xtl3:has(.xtl3-node:hover)::after,
.xtl3:has(.xtl3-ico:focus-visible)::after { opacity: 1; }
.xtl3-node:hover, .xtl3-node:has(.xtl3-ico:focus-visible) { z-index: 5; }
[data-anim='still'] .xtl3::after { transition: none; }
.xtl3-tip p { margin: 0; }
/* the cell's own address as the tooltip's title (brief line 1176): the
   role and the stage it sits at */
.xtl3-tip-h {
	display: block; margin-block-end: 4px;
	font-family: var(--font-display); font-size: .8rem; font-weight: 650;
	letter-spacing: .01em; color: var(--brand-soft);
}
[data-theme='dark'] .xtl3-tip-h, [data-theme='amber'] .xtl3-tip-h, [data-theme='brand'] .xtl3-tip-h { color: var(--brand-deep); }
/* the little beak pointing at the icon it speaks for */
.xtl3-tip::after {
	content: ''; position: absolute; inset-block-start: 100%; inset-inline-start: 50%;
	margin-inline-start: -7px; border: 7px solid transparent; border-block-start-color: var(--ink);
}
[data-theme='brand'] .xtl3-ico { background: #003a44; }

/* and for everyone */
.xfacts { margin-block-start: clamp(56px, 9vw, 96px); }
.xfacts-grid {
	list-style: none; margin: 22px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.xfacts-grid li {
	display: flex; gap: .7em; align-items: flex-start;
	padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--panel); font-size: .92rem; color: var(--ink-2);
}
.xfacts-grid .ico { flex: none; inline-size: 18px; block-size: 18px; color: var(--brand); margin-block-start: .1em; }

/* the rail is wider than the report's icon menu (the pill), so the page
   steps aside for it: content keeps its centre on wide screens and keeps
   its distance on narrow-wide ones */
@media (min-width: 1251px) {
	.xplore > .wrap { margin-inline-start: max(252px, calc((100% - 1180px) / 2)); }
}
@media (max-width: 1250px) {
	.xrail {
		position: static; transform: none;
		display: flex; overflow-x: auto; gap: 2px;
		margin: 0 auto clamp(18px, 4vw, 28px);
		inline-size: fit-content; max-inline-size: calc(100% - 32px);
		background: color-mix(in srgb, var(--panel) 85%, transparent);
		border-color: var(--line);
	}
	.xrail-name { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1000px) {
	.xphotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xphoto:last-child { grid-column: 1 / -1; }
	.xrole, .xrole:nth-child(odd) { grid-template-columns: 1fr; }
	.xrole:nth-child(odd) .xrole-copy { order: 0; }
}
@media (max-width: 760px) {
	.xstats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xfacts-grid { grid-template-columns: 1fr; }
	.xc-cap { font-size: .78rem; }
	.xphotos { grid-template-columns: 1fr; }
	.xphoto:last-child { grid-column: auto; }
	.xtl3 { grid-template-columns: minmax(92px, auto) repeat(5, minmax(0, 1fr)); gap: 2px 4px; }
	.xtl3-x b { font-size: .72rem; }
	.xtl3-x span { display: none; }
	.xtl3-y { font-size: .68rem; padding-inline-end: 6px; }
	.xtl3-ico { inline-size: 30px; block-size: 30px; }
	.xtl3-ico .ico { inline-size: 13px; block-size: 13px; }
}
.shot-frame { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.shot-frame img { inline-size: 100%; block-size: auto; display: block; }
.shot-bar { display: flex; gap: 6px; padding: 12px 14px; border-block-end: 1px solid var(--line-soft); background: color-mix(in srgb, var(--ink) 4%, var(--panel)); }
.shot-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--line); display: block; }
.explore-pillars, .explore-walk { margin-block-start: clamp(40px, 5vw, 64px); }
.pillar { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); }
.pillar p { color: var(--ink-2); font-size: .95rem; }
.explore-walk { max-inline-size: 780px; }

.cta {
	margin-block-start: clamp(40px, 5vw, 64px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: radial-gradient(120% 140% at 0% 0%, rgba(var(--glow), .14), transparent 55%), var(--panel);
	padding: clamp(30px, 4.6vw, 60px);
	text-align: center;
}
.cta .lead { margin-inline: auto; margin-block-end: 26px; }
.cta .row { justify-content: center; }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field > label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field .req { color: var(--accent); }
.input {
	inline-size: 100%;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: .85em 1em;
	color: var(--ink); font-size: .96rem;
	transition: border-color var(--speed) var(--ease);
}
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
select.input { appearance: none; cursor: pointer; }
textarea.input { min-block-size: 100px; resize: vertical; line-height: 1.55; }
.field-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.phone-box { position: relative; display: flex; gap: 8px; }
.phone-box > .input[type='tel'] { flex: 1; min-inline-size: 0; }
/* the country code: flag, +code and a drawn chevron, one input-height button */
.phone-cc {
	inline-size: auto; flex: none;
	display: inline-flex; align-items: center; gap: .45em;
	padding-inline: .8em; cursor: pointer; white-space: nowrap;
}
.phone-cc[hidden] { display: none; }
.cc-flag { inline-size: 20px; block-size: 15px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.cc-code { font-variant-numeric: tabular-nums; }
.cc-chev {
	inline-size: .45em; block-size: .45em; margin-inline-start: .1em;
	border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg); opacity: .6;
}
.cc-pop {
	position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline-start: 0;
	inline-size: min(340px, 100%); padding: 8px;
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
}
.cc-pop[hidden] { display: none; }
.cc-q { padding: .6em .8em; margin-block-end: 6px; }
.cc-list { list-style: none; margin: 0; padding: 0; max-block-size: 260px; overflow-y: auto; }
.cc-list li {
	display: flex; align-items: center; gap: .6em;
	padding: .5em .6em; border-radius: 6px; cursor: pointer; font-size: .92rem;
}
.cc-list li:hover, .cc-list li:focus { outline: none; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.cc-list li[aria-selected='true'] { font-weight: 600; }
.cc-n { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-c { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cc-none { margin: .4em .6em; font-size: .9rem; color: var(--ink-3); }
.cc-none[hidden] { display: none; }
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--ink-3); }
.notice { display: flex; gap: .8em; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .92rem; }
.notice .ico { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: .2em; }
.notice.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.notice.is-bad { color: var(--no); border-color: color-mix(in srgb, var(--no) 35%, transparent); background: color-mix(in srgb, var(--no) 8%, transparent); }
.notice[hidden] { display: none; }
[data-theme='dark'] .notice.is-ok, [data-theme='amber'] .notice.is-ok, [data-theme='brand'] .notice.is-ok { color: #34d399; }
[data-theme='dark'] .notice.is-bad, [data-theme='amber'] .notice.is-bad, [data-theme='brand'] .notice.is-bad { color: #fb7185; }

/* ------------------------------------------------------------ the login --*/
.login-wrap { max-inline-size: 560px; }
.school-box { position: relative; }
.school-list {
	position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 40;
	margin-block-start: 6px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	max-block-size: 320px; overflow-y: auto;
	padding: 6px;
	font-size: .9rem; color: var(--ink-3);
}
[data-theme='brand'] .school-list { background: #003a44; }
.school-list[hidden] { display: none; }
.school-option {
	display: grid; gap: 2px; justify-items: start; text-align: start;
	inline-size: 100%;
	padding: .65em .8em;
	border: 0; border-radius: 8px;
	background: transparent; cursor: pointer;
	font-family: var(--font-body);
}
.school-option:hover, .school-option:focus-visible {
	background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.school-option b { font-weight: 560; color: var(--ink); font-size: .95rem; }
.school-option span { color: var(--ink-3); font-size: .8rem; }
.school-picked[hidden] { display: none; }
.school-picked {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: .85em 1em;
	border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line));
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--brand) 8%, var(--panel));
	font-size: .96rem;
}
.school-picked .th-quiet { margin: 0; }

/* -------------------------------------------------- the login pop-up --
   Brief line 709: the login is a pop-up wherever the visitor is, not a
   separate page. The card carries the lockup, three fields, one button. */
.login-modal-back {
	position: fixed; inset: 0; z-index: 90;
	display: grid; place-items: center;
	padding: 20px;
	background: rgba(0, 15, 20, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.login-modal-back[hidden] { display: none; }
.login-modal {
	position: relative;
	inline-size: min(92vw, 430px);
	max-block-size: 92vh; overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 40px 90px -30px rgba(0, 10, 14, .6);
	padding: clamp(22px, 4vw, 34px);
}
[data-theme='brand'] .login-modal { background: #003a44; }
.login-modal-x { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; }
.login-modal-brand { display: block; margin: 4px auto 24px; inline-size: min(60%, 190px); }
.login-modal-brand img { inline-size: 100%; block-size: auto; display: block; }
.login-modal-brand .logo-light { display: none; }
[data-theme='clean'] .login-modal-brand .logo-dark { display: none; }
[data-theme='clean'] .login-modal-brand .logo-light { display: block; }
[data-anim='motion'] .login-modal-back:not([hidden]) .login-modal { animation: scene-in .3s var(--ease) both; }

/* THE LOGIN AT WORK (FBNT 2026-10-01): a spinner in the button while the
   platform answers, and the line that replaces the fields once it says yes.
   The ring turns even under data-anim='still' — slowed, not stopped —
   because a still spinner reads as a frozen page, which is the bug. */
.spin {
	display: inline-block; flex: none;
	inline-size: 1em; block-size: 1em;
	border: 2px solid currentColor; border-inline-end-color: transparent;
	border-radius: 50%;
	animation: spin .8s linear infinite;
	vertical-align: -.15em;
}
.spin[hidden] { display: none; }
[data-anim='still'] .spin { animation-duration: 2.4s; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-form button[type='submit'] { display: inline-flex; align-items: center; gap: .55em; }
.login-entered {
	display: flex; align-items: center; gap: .7em;
	margin: 0; padding: 18px 0;
	font-size: 1.1rem; font-weight: 550; color: var(--ink);
}
.login-entered[hidden] { display: none; }
.login-entered .spin { color: var(--brand); inline-size: 1.3em; block-size: 1.3em; }

/* ------------------------------------------------------- the recorrido ---
   The feature pop-up (brief line 917): WIDE, because what it holds is a
   16:9 slide from the presengen deck. The frames stack in one grid cell and
   crossfade, the way the cards' own carousel does. */
.tour-back {
	position: fixed; inset: 0; z-index: 95;
	display: grid; place-items: center;
	padding: clamp(12px, 3vw, 32px);
	overflow-y: auto;
	background: rgba(0, 15, 20, .62);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.tour-back[hidden] { display: none; }
/* while the deck is up the page under it does not scroll by hand — only
   app.js moves it, following the deck to the matching card (FBNT 2026-09-28) */
html.tour-lock { overflow: hidden; scrollbar-gutter: stable; }
/* the card the deck is on, seen through the backdrop and found on closing */
.sol-card.is-touring { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
.tour-modal {
	/* THE SLIDE SETS THE WIDTH (brief line 929). A 16:9 stage as large as
	   the window allows: capped at the deck's own 1600, and never so wide
	   that the box it implies outgrows the room left once the bar and the
	   padding have taken theirs (~135px, measured — it was 250 while our
	   own words still sat over the slide). On a phone the window's width
	   binds first, exactly as before. */
	--tour-pad: clamp(16px, 1.8vw, 24px);
	/* BIGGER STAGE (FBNT 2026-10-01, brief line 1193): the bar (? and the
	   link out) used to take a row of its own UNDER the frame; it now
	   shares the title's row, so the only chrome left is that one row
	   and the padding (~105px, measured). The frame grows taller — and,
	   being 16:9, wider with it. */
	--tour-chrome: 108px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title bar" "stage stage";
	column-gap: 18px;
	inline-size: min(97vw, 1600px,
		calc((96vh - var(--tour-chrome)) * 16 / 9 + 2 * var(--tour-pad)));
	max-block-size: 97vh; overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: var(--tour-pad);
}
[data-theme='brand'] .tour-modal { background: #003a44; }
/* WITH THE WORDS GONE the slide starts at the top, so the ✕ floats over its
   corner on a chip of its own — legible over any slide, in any world. */
.tour-x {
	position: absolute; z-index: 2;
	/* OUT OF THE SLIDE'S CORNER (brief line 2815): it sat 8px inside the
	   stage, on top of the deck's own map button. Half a button further out
	   and up, it overlaps nothing the deck puts there. */
	inset-inline-end: max(4px, calc(var(--tour-pad) - 20px));
	inset-block-start: max(4px, calc(var(--tour-pad) - 20px));
	background: rgba(0, 15, 20, .55); border-color: transparent; color: #fff;
	backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.tour-x:hover, .tour-x:focus-visible {
	background: rgba(0, 15, 20, .78); border-color: transparent; color: #fff;
}
/* WHERE THE DECK IS, over the frame: the chapter small, the slide's own
   name under it. It follows the deck as the visitor walks it, so the line
   is never ours and never stale. */
.tour-title { grid-area: title; margin-block-end: 10px; min-block-size: 40px; min-inline-size: 0; }
.tour-stage { grid-area: stage; }
.tour-title-ch {
	display: block; font-size: .74rem; font-weight: 550; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ink-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tour-title-ch[hidden] { display: none; }
.tour-title-s {
	display: block; font-family: var(--font-display); font-weight: 550;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.25; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme='brand'] .tour-title-s { color: #fff; }
[data-theme='brand'] .tour-title-ch { color: rgba(255, 255, 255, .62); }
.tour-stage {
	display: grid;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
	overflow: hidden; background: var(--ground-2);
}
.tour-frame {
	grid-area: 1 / 1; display: grid;
	opacity: 0; visibility: hidden;
	transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.tour-frame.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.tour-frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.tour-bar {
	grid-area: bar; align-self: start;
	position: relative;
	display: flex; align-items: center;
	gap: 14px; flex-wrap: wrap;
	/* beside the title, clear of the ✕ in the corner */
	margin-inline-end: 34px; padding-block-start: 4px;
}
.tour-out { margin-inline-start: auto; }
/* THE SHORTCUTS (brief line 932): a quiet ? in the bar, and the two lists
   it opens over it — ours and the deck's. */
.tour-keys {
	position: absolute; z-index: 3;
	/* the bar sits at the TOP now, so the list opens downward, over the slide */
	inset-block-start: calc(100% + 10px); inset-inline-end: 0;
	inline-size: min(92vw, 420px);
	max-block-size: calc(94vh - 120px); overflow-y: auto;
	padding: 18px 20px;
	background: var(--panel); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
}
[data-theme='brand'] .tour-keys { background: #003a44; }
.tour-keys[hidden] { display: none; }
.tour-keys-h {
	margin: 0 0 8px; font-family: var(--font-display); font-weight: 550;
	font-size: .82rem; letter-spacing: .01em; color: var(--ink-3);
}
.tour-keys dl {
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 14px; margin: 0 0 16px; align-items: baseline;
}
.tour-keys dl:last-child { margin-block-end: 0; }
.tour-keys dt { display: flex; gap: 4px; }
.tour-keys dd { margin: 0; font-size: .89rem; color: var(--ink-2); }
.tour-keys kbd {
	font-family: var(--font-mono); font-size: .76rem; line-height: 1;
	padding: .42em .55em; min-inline-size: 2em; text-align: center;
	color: var(--ink);
	background: var(--panel-2);
	border: 1px solid var(--line); border-radius: 6px;
}
/* (our own arrows and dots are gone: one frame, driven by messages, and the
   deck brings its own pad and rails — see the pop-up's own comment) */
.tour-out { font-size: .9rem; margin-inline-start: auto; }
[data-anim='motion'] .tour-back:not([hidden]) .tour-modal { animation: scene-in .3s var(--ease) both; }

/* ----------------------------------------------------------------- footer */
.site-footer { border-block-start: 1px solid var(--line-soft); background: var(--ground-2); padding-block: clamp(40px, 5vw, 64px) 26px; margin-block-start: clamp(40px, 6vw, 80px); }
[data-theme='brand'] .site-footer { background: rgba(0, 0, 0, .14); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.footer-col.footer-contact a { display: flex; align-items: center; gap: .55em; }
.footer-contact .ico { inline-size: 15px; block-size: 15px; flex: none; color: var(--brand); }
.footer-brand { max-inline-size: 340px; }
.footer-blurb { color: var(--ink-2); font-size: .93rem; margin-block-start: 14px; }
.footer-col h4 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1.1em; font-weight: 500; }
.footer-col a { display: block; color: var(--ink-2); font-size: .93rem; padding: .3em 0; }
.footer-col a:hover { color: var(--brand-soft); }
[data-theme='clean'] .footer-col a:hover { color: var(--brand-deep); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-block-start: clamp(30px, 4vw, 48px); padding-block-start: 20px; border-block-start: 1px solid var(--line-soft); font-size: .85rem; color: var(--ink-3); }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

.legal-body { max-inline-size: var(--maxw-text); }
.legal-body h2 { font-size: 1.35rem; margin-block-start: 2em; }

/* ------------------------------------------------------- the mark, alive
   The motion lives in assets/js/ec_mark.js — four behaviours that know
   this isotype's four pieces, which is exactly why they are not in
   nw_mini. All the stylesheet owes them is the coordinate system (every
   transform is written on the mark's own 1067 grid) and the light. */
[data-ec-mark] .mark path { transform-box: view-box; }
[data-ec-mark] .mark { will-change: transform; }
/* the behaviours that MOVE PIECES let them leave the box: an svg clips at
   its viewport, and a piece cut in half mid-turn is worse than a piece
   that briefly overhangs */
[data-ec-mark='spread'] .mark,
[data-ec-mark='revolve'] .mark,
[data-ec-mark='magnet'] .mark { overflow: visible; }

.mark-sheen { transform-box: view-box; opacity: 0; }
.mark-sheen rect { transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-18deg); }
[data-anim='motion'] .mark-sheen.is-sweeping { animation: mark-sheen .95s var(--ease); }
@keyframes mark-sheen {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 1; transform: translateX(2500px); }
}

/* the answer lands: a brief affirmation before the scene moves on */
.who-card.is-picked {
	border-color: var(--brand);
	background: color-mix(in srgb, var(--brand) 10%, var(--panel));
	transform: scale(.985);
}

/* the diagnosis completes: the whole mark, one proud beat */
[data-anim='motion'] .mark-complete { animation: mark-done .6s var(--ease) both; }
@keyframes mark-done {
	0% { transform: scale(1); }
	45% { transform: scale(1.14); }
	100% { transform: scale(1); }
}

/* ---------------------------------------------------- text animation ----
   The visual half of nw_anim, trimmed to the effects this site uses.
   The timing half is assets/js/nw_anim.js. */
.nw-anim { display: inline; }
.nw-anim-tilt, .nw-anim-shine { display: inline-block; }
.nw-anim-w { white-space: nowrap; }
.nw-anim-c { display: inline-block; font-style: inherit; will-change: transform, opacity, color; }
/* THE TYPEWRITER. The letters start absent only WHILE THE EFFECT RUNS: the
   type class is put on by the scan and stays, but .is-anim is taken off by
   nw_anim.stop() — which every clear() calls — so hiding on the type class
   alone would leave a phrase blank the moment the appearance menu is
   touched. Scoped to .is-anim it fails visible, and `forwards` holds the
   last frame once the pass is done. */
.nw-anim-typewritter.is-anim .nw-anim-c {
	opacity: 0;
	animation: nwType .001s linear var(--d, 0s) forwards;
}
@keyframes nwType { to { opacity: 1; } }

.nw-anim-rise.is-anim .nw-anim-c {
	animation: nwRise var(--anim-dur, .6s) var(--ease) var(--d, 0s) both;
}
@keyframes nwRise {
	from { transform: translateY(.7em); opacity: 0; }
	to { transform: none; opacity: 1; }
}
.nw-anim-shine.is-anim {
	background: linear-gradient(100deg,
		currentColor 0%, currentColor 38%,
		color-mix(in srgb, var(--amber-soft) 55%, #fff) 50%,
		currentColor 62%, currentColor 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: nwShine var(--anim-dur, 1.8s) linear both;
}
@keyframes nwShine {
	from { background-position: 120% 0; }
	to { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.nw-anim, .nw-anim-c { animation: none !important; opacity: 1 !important; }
	.nw-anim-shine.is-anim { background: none; -webkit-text-fill-color: currentColor; }
}

/* the reveal that never hides without a shower (house rule) */
[data-rise='on'] .rise { opacity: 0; transform: translateY(14px); }
[data-rise='on'] .rise.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
	[data-rise='on'] .rise, [data-rise='on'] .rise.is-in { opacity: 1; transform: none; transition: none; }
	.scene-enter, .scene-enter > .wrap > *, .th-logo-sheen, .mark-sheen,
	.scene-enter > .wrap > .th-logo { animation: none !important; }
}
[data-anim='still'] .rise, [data-anim='still'] .rise.is-in { opacity: 1; transform: none; transition: none; }

/* ------------------------------------------------- the mark lab (?s=marks)
   A review surface, not a page of the site: the coloured mark on the light
   tiles and the white mark on the dark ones, as the feedback pairs them. */
.lab-lead { margin-block-end: 0; margin-inline: 0; }
.lab-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap); margin-block-start: clamp(22px, 3vw, 36px);
}
.lab-tile {
	margin: 0; display: grid; gap: 18px; justify-items: center; align-content: start;
	padding: clamp(24px, 3vw, 40px);
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.lab-tile.is-dark {
	background: #021d26; border-color: #0e4256; color: #cfe6ea;
	--mark-main: #ffffff; --mark-roof: #ffffff; --mark-facet: #ffffff;
}
.lab-mark { display: block; inline-size: clamp(120px, 15vw, 180px); }
.lab-tile figcaption { display: grid; gap: 6px; text-align: center; font-size: .92rem; color: var(--ink-2); }
.lab-tile.is-dark figcaption { color: #a7c4cd; }
.lab-tile b {
	font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--accent);
}
.lab-tile.is-dark b { color: #f19c1c; }

/* ------------------------------------------------------------- responsive */

/* THE DECK ON A PHONE SCREEN (FBNT 2026-10-01, brief line 1085). A
   portrait window gets no letterboxed landscape stage: the pop-up takes
   the whole viewport and the frame every pixel between the title and the
   bar — a phone-screen canvas the deck lays itself out for. */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1000px) {
	.tour-back { padding: 0; }
	.tour-modal {
		display: flex; flex-direction: column;
		inline-size: 100%; max-inline-size: none;
		block-size: 100vh; block-size: 100dvh; max-block-size: none;
		border: 0; border-radius: 0;
		--tour-pad: 10px; padding: 10px;
		overflow-y: hidden;
	}
	.tour-stage { aspect-ratio: auto; flex: 1; min-block-size: 0; }
	.tour-bar { margin-inline-end: 0; padding-block-start: 0; margin-block-start: 8px; }
	.tour-keys { inset-block-start: auto; inset-block-end: calc(100% + 10px); inset-inline-end: auto; inset-inline-start: 0; }
	.tour-title { min-block-size: auto; margin-block-end: 8px; padding-inline-end: 44px; }
	.tour-x {
		inset-inline-end: 8px; inset-block-start: 8px;
	}
}

@media (max-width: 900px) {
	/* the shortcuts are a keyboard's, and this layout is a phone's: the ?
	   would open a list of keys nobody here can press (brief line 932) */
	.tour-help { display: none; }
	.grid-3, .th-paths, .timeline, .field-2, .lab-grid { grid-template-columns: 1fr; }
	/* the diagnostic stacks: the grid falls to the END, after the questions
	   (brief line 623), and the fixed rail keeps the four aspects in sight;
	   the questions leave it a lane so no text sits under it */
	.diag-cols { grid-template-columns: 1fr; }
	.diag-qs { padding-inline-end: 38px; }
	.diag-live { position: static; }
	.diag-rail {
		display: grid; gap: 12px; justify-items: center;
		position: fixed; inset-inline-end: 8px; inset-block-start: 50%;
		transform: translateY(-50%); z-index: 45;
		padding: 12px 7px;
		background: color-mix(in srgb, var(--panel) 82%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid var(--line);
		border-radius: var(--pill);
		box-shadow: var(--shadow);
		transition: opacity var(--speed) var(--ease);
	}
	.diag-rail.is-off { opacity: 0; pointer-events: none; }
	/* the phone's bottom-right quarter is narrow and tall: the mark grows to
	   keep filling it instead of shrinking with the viewport */
	.th-bg { inline-size: min(72vw, 420px); inset-inline-end: -18vw; inset-block-end: -14vw; }
	.sol-card, .sol-card:nth-child(even) { grid-template-columns: 1fr; }
	.sol-card:nth-child(even) .sol-media { order: 0; }
	/* the phone has no room for a fixed left rail over the copy */
	.role-menu { display: none; }
	.footer-top { grid-template-columns: 1fr; }
	.nav { display: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
	.site-header, .site-footer, .btn, .th-quiet, .wiz-back, .th-bg { display: none !important; }
	body { background: #fff; color: #000; }
}