/* Gamification Lab — sabe.lat
   Colour and display type from the "sabe.lat / VersionFinal" Figma frame,
   structure and components from IBM Carbon (Plex, 2x grid, square corners). */

:root {
  /* Figma */
  --sabe-blue: #0064d6;
  --sabe-blue-deep: #00479a;
  --sabe-grid: #eaf2ff;

  /* Carbon */
  --blue-60: #0f62fe;
  --blue-70: #0043ce;
  --blue-20: #d0e2ff;
  --gray-100: #161616;
  --gray-90: #262626;
  --gray-80: #393939;
  --gray-70: #525252;
  --gray-50: #8d8d8d;
  --gray-30: #c6c6c6;
  --gray-20: #e0e0e0;
  --gray-10: #f4f4f4;
  --white: #ffffff;
  --green-50: #24a148;
  --green-10: #defbe6;
  --green-70: #0e6027;

  --font-display: "Lexend", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: 16px;
  --shell-h: 48px;
  /* Same max as the 2x grid (1520px of content + 2 × 32px edge), so section edges sit on grid lines 0 and 16 */
  --wrap: 1584px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--shell-h); }
body {
  margin: 0;
  background: var(--white);
  color: var(--gray-100);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-60); }
p { margin: 0 0 16px; }

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  padding: 12px 16px; background: var(--blue-60); color: var(--white);
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; }

/* ── Icons: Carbon SVGs used as masks so they take currentColor ── */
.icon {
  display: inline-block; width: 16px; height: 16px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.icon--lg { width: 32px; height: 32px; }
.icon--arrow        { --i: url("/assets/icons/arrow--right.svg"); }
.icon--launch       { --i: url("/assets/icons/launch.svg"); }
.icon--email        { --i: url("/assets/icons/email.svg"); }
.icon--download     { --i: url("/assets/icons/download.svg"); }
.icon--trophy       { --i: url("/assets/icons/trophy.svg"); }

/* ── Award badge (hero) ── */
.award {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin: 0 0 48px; padding: 12px 16px;
  background: rgba(0, 35, 90, .35); border: 1px solid rgba(255,255,255,.35);
  color: var(--white); font-size: 14px; line-height: 1.4; text-decoration: none; text-align: center;
}
.award .icon { width: 20px; height: 20px; color: #f9d571; }
.award strong { font-weight: 600; margin-right: 6px; }
.award__see { font: 400 12px/1.33 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-20); text-decoration: underline; text-underline-offset: 3px; }
.award:hover { background: rgba(0, 35, 90, .55); }
.facts a { color: var(--blue-60); }
.icon--report       { --i: url("/assets/icons/report.svg"); }
.icon--gamification { --i: url("/assets/icons/gamification.svg"); }
.icon--education    { --i: url("/assets/icons/education.svg"); }
.icon--video        { --i: url("/assets/icons/video.svg"); }

/* ── UI shell (Carbon header) ── */
.shell {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: var(--shell-h); padding: 0 0 0 var(--gutter);
  background: var(--gray-100); color: var(--white);
  border-bottom: 1px solid var(--gray-80);
}
.shell__brand { display: flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.shell__name { font-weight: 600; font-size: 14px; }
.shell__product { font-size: 14px; color: var(--gray-30); }
.shell__nav { display: none; height: 100%; }
.shell__nav a {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  color: var(--gray-30); font-size: 14px; text-decoration: none;
}
.shell__nav a:hover { background: var(--gray-80); color: var(--white); }
.shell__cta {
  margin-left: auto; display: flex; align-items: center; height: 100%;
  padding: 0 16px; background: var(--blue-60); color: var(--white);
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
.shell__cta:hover { background: var(--blue-70); }
/* Menu button + panel below 1312px (Carbon UI shell: hamburger opens a left panel) */
.shell__toggle {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 100%; margin: 0 -8px 0 calc(-1 * var(--gutter)); padding: 0;
  border: 0; background: transparent; color: var(--white); cursor: pointer;
}
.shell__toggle[hidden] { display: none; }
.shell__toggle:hover { background: var(--gray-80); }
.shell__toggle-bars, .shell__toggle-bars::before, .shell__toggle-bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; transition: transform .11s;
}
.shell__toggle-bars { position: relative; }
.shell__toggle-bars::before, .shell__toggle-bars::after { content: ""; position: absolute; left: 0; }
.shell__toggle-bars::before { top: -6px; }
.shell__toggle-bars::after { top: 6px; }
.shell.is-open .shell__toggle-bars { background: transparent; }
.shell.is-open .shell__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.shell.is-open .shell__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1311px) {
  .shell.is-open .shell__nav {
    display: flex; flex-direction: column; position: fixed; top: var(--shell-h); left: 0; bottom: 0;
    width: min(320px, 100%); height: auto; padding: 8px 0; overflow-y: auto;
    background: var(--gray-100); border-right: 1px solid var(--gray-80);
  }
  .shell.is-open .shell__nav a { flex: none; height: 48px; padding: 0 var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .shell__toggle-bars, .shell__toggle-bars::before, .shell__toggle-bars::after { transition: none; } }

/* ── Buttons (Carbon: square, 48px, label left / icon right) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 48px; padding: 12px 16px; min-width: 220px;
  font: 400 14px/1.3 var(--font-sans); text-decoration: none;
  border: 1px solid transparent; transition: background-color .11s, color .11s;
}
.btn--primary { background: var(--blue-60); color: var(--white); }
.btn--primary:hover { background: var(--blue-70); }
.btn--light { background: var(--white); color: var(--sabe-blue-deep); font-weight: 600; }
.btn--light:hover { background: var(--blue-20); }
.btn--outline-light { border-color: var(--white); color: var(--white); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }

/* ── Type ── */
.kicker {
  margin: 0 0 16px; font: 400 12px/1.33 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray-70);
}
/* white on blue: 12px text needs 4.5:1 (5.5:1 on #0064d6, 4.7:1 on the lightest hero zone) */
.kicker--light { color: var(--white); }
.kicker--dark { color: var(--gray-30); }
.h2 {
  margin: 0 0 24px; font: 600 clamp(32px, 4vw + 12px, 56px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
.h3 { margin: 0 0 8px; font: 600 18px/1.35 var(--font-sans); }
/* subsection title (role): Lexend 600 28px — never the 12px label style */
.h3--dark { color: var(--white); margin-bottom: 16px; font: 600 28px/1.25 var(--font-display); }
.lead { font-size: clamp(18px, .4vw + 14px, 20px); font-weight: 300; line-height: 1.45; max-width: 60ch; }

/* ── Layout ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: 80px 0; }
.band--g10 { background: var(--gray-10); }
.band--g100 { background: var(--gray-100); color: var(--gray-20); }
.split { display: grid; gap: 48px; }
.mga-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.mga-demo-note { margin: 16px 0 0; color: var(--gray-70); font-size: 14px; max-width: 60ch; }
@media (min-width: 1056px) {
  .split { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}

/* ── Blueprint = layout grid ──
   Carbon 2x Grid: 4 columns (sm), 8 (md, 672px+), 16 (lg, 1056px+), fixed outer edge
   (16px sm, 32px md+ = margin + column padding). The drawn lines ARE the column lines,
   with one on the exact centre axis, so anything that snaps to them reads as centred. */
:root { --cols: 4; --edge: 16px; --grid-max: 1520px; }
@media (min-width: 672px)  { :root { --cols: 8; --edge: 32px; } }
@media (min-width: 1056px) { :root { --cols: 16; } }

.blueprint-host { position: relative; container-type: inline-size; overflow: hidden; }
.blueprint-host > :not(.blueprint) { position: relative; z-index: 1; }
.blueprint, .hero__inner {
  --gw: min(100cqw - 2 * var(--edge), var(--grid-max));
  --col: calc(var(--gw) / var(--cols));
}
.blueprint {
  --line: rgba(234, 242, 255, .2);
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--col) var(--col);
  /* a vertical line on the centre axis; the grid edges are whole columns away from it */
  background-position: calc(50% + var(--col) / 2) 0;
}

/* ── Hero (Figma VersionFinal) on the grid ── */
.hero {
  background: radial-gradient(ellipse 90% 70% at 50% 38%, #0b70e2 0%, var(--sabe-blue) 55%, #0058bd 100%);
  color: var(--white); text-align: center;
}
.hero__inner {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  width: var(--gw); margin: 0 auto; padding-top: var(--col);
}
.hero__inner > * { grid-column: 1 / -1; }
/* padding-left offsets the trailing .16em tracking so the kicker sits on the axis */
.hero__kicker { margin-bottom: 24px; padding-left: .16em; }

/* Title: the INK of "GAMIFICATION" spans exactly its columns.
   Lexend Bold, tracking -0.01em: ink width 7.9674em, ink starts 0.0434em into the box. */
.hero__title {
  container-type: inline-size; margin: 0 0 40px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  text-shadow: 0 6px 30px rgba(0, 35, 90, .25);
}
.hero__word {
  display: block; text-align: left; white-space: nowrap;
  font-size: calc(100cqw / 7.9674); line-height: .8; letter-spacing: -0.01em;
  margin-left: -0.0434em;
}
/* LAB: a symmetric lockup on the centre axis, rules running to the same ink edges */
.hero__lab {
  display: flex; align-items: center; gap: .55em; margin-top: .5em;
  font-size: calc(100cqw / 7.9674 * .35); line-height: 1; letter-spacing: .3em;
}
.hero__lab::before, .hero__lab::after { content: ""; flex: 1; height: max(2px, .07em); background: currentColor; opacity: .9; }
/* padding-left offsets the trailing tracking; left nudges for L/B side bearings */
.hero__lab > span { padding-left: .3em; position: relative; left: -.022em; }

.hero__lead { margin: 0 0 32px; font-size: clamp(18px, .8vw + 13px, 22px); font-weight: 300; line-height: 1.45; color: var(--white); }
.hero__lead strong { font-weight: 600; color: var(--white); }

/* Button set: two buttons that meet on the centre axis (Carbon button set, no gap) */
.hero__actions { display: grid; grid-template-columns: subgrid; row-gap: 8px; margin-bottom: 24px; }
.hero__actions .btn { grid-column: 1 / -1; min-width: 0; }

.award { grid-column: 1 / -1; }
.hero__cast { position: relative; }
.hero__cast img { width: 100%; }
/* YouTube logo where the Figma frame puts it: x 736, y 100, 208px wide inside the 1648×945 cast */
.hero__cast .hero__yt { position: absolute; left: 44.66%; top: 10.58%; width: 12.62%; height: auto; }

@media (min-width: 672px) {
  .hero__lead { grid-column: 2 / 8; }
  .hero__actions .btn:first-child { grid-column: 2 / 5; }
  .hero__actions .btn:last-child  { grid-column: 5 / 8; }
}
@media (min-width: 1056px) {
  .hero__title, .hero__cast { grid-column: 2 / 16; }
  .hero__lead { grid-column: 5 / 13; }
  .hero__actions .btn:first-child { grid-column: 6 / 9; }
  .hero__actions .btn:last-child  { grid-column: 9 / 12; }
  .award { grid-column: 4 / 14; }
}
@media (min-width: 1056px) and (max-width: 1199px) {
  .hero__actions .btn:first-child { grid-column: 5 / 9; }
  .hero__actions .btn:last-child  { grid-column: 9 / 13; }
}
@media (max-width: 671px) {
  .hero__lead { text-align: left; }
  .award { justify-content: flex-start; text-align: left; }
}

/* ── Tiles ── */
.tiles, .cards, .checks, .roadmap, .tags { list-style: none; margin: 0; padding: 0; }
.tiles { display: grid; gap: 1px; margin-top: 48px; background: var(--gray-20); border: 1px solid var(--gray-20); }
.tile { background: var(--white); padding: 24px 16px 32px; min-height: 260px; }
.tile .icon { color: var(--sabe-blue); margin-bottom: 48px; }
.tile p { color: var(--gray-70); font-size: 14px; line-height: 1.5; margin: 0; }
@media (min-width: 672px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1056px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

/* ── Tags ── */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px;
  border-radius: 24px; background: var(--gray-20); color: var(--gray-100);
  font-size: 12px; line-height: 1.33; letter-spacing: .02em;
}
.tag--green { background: var(--green-10); color: var(--green-70); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-50); }

/* ── Steps (structured list) ── */
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-20); }
.steps__item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--gray-20); }
.steps__item p { margin: 0; color: var(--gray-70); }
.steps__n { font: 500 14px/1.6 var(--font-mono); color: var(--sabe-blue); }
.steps__item--ai { background: linear-gradient(90deg, rgba(0,100,214,.07), transparent 70%); padding-left: 12px; margin-left: -12px; border-left: 3px solid var(--sabe-blue); }

/* ── Metrics + lists on dark ── */
.metrics { display: grid; gap: 1px; margin: 48px 0 16px; background: var(--gray-80); border: 1px solid var(--gray-80); }
.metric { background: var(--gray-90); padding: 24px 16px; }
.metric dt { font: 400 12px/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-30); }
/* figures stay below the H2: 28px on phones, 48px max (H2 is 56px) */
.metric dd { margin: 8px 0 0; font: 700 clamp(28px, 2.5vw + 12px, 48px)/1 var(--font-display); color: var(--white); }
.metric__note { margin: 8px 0 0; font-size: 14px; color: var(--gray-50); }
@media (min-width: 672px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.band--g100 .h2 { color: var(--white); }
.checks li { position: relative; padding: 0 0 20px 32px; color: var(--gray-30); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  background: #4589ff; -webkit-mask: url("/assets/icons/checkmark--filled.svg") center / contain no-repeat;
  mask: url("/assets/icons/checkmark--filled.svg") center / contain no-repeat;
}
.checks strong, .roadmap li::marker { color: var(--white); }
.roadmap { counter-reset: r; }
.roadmap li { counter-increment: r; display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--gray-80); color: var(--gray-30); }
.roadmap li::before { content: "0" counter(r); font: 500 14px/1.6 var(--font-mono); color: #78a9ff; }

/* ── Cards ── */
.cards { display: grid; gap: 32px; margin-top: 48px; }
.card { background: var(--white); padding: 16px 16px 24px; border-top: 4px solid var(--sabe-blue); }
.card .tag { margin-bottom: 16px; }
.card p { margin: 0; color: var(--gray-70); font-size: 14px; }
@media (min-width: 672px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1056px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ── Featured games ── */
.games { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 32px; }
.game { display: flex; flex-direction: column; background: var(--white); }
.game__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-100); }
.game__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .24s cubic-bezier(.2, 0, .38, .9); }
.game__media:hover img { transform: scale(1.03); }
.game__body { display: flex; flex-direction: column; flex: 1; padding: 24px 16px 32px; border-top: 4px solid var(--sabe-blue); }
.game__body .tags { margin-bottom: 16px; }
.game__title { font: 600 24px/1.25 var(--font-display); margin-bottom: 12px; }
.game__body p { color: var(--gray-70); }
.game__body .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 1056px) {
  .games { grid-template-columns: 1fr 1fr; }
  /* same 32px gutter as the cards above, so the image ends where the left card ends */
  .game--puzzle, .game--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) { .game__media img { transition: none; } }

/* ── Made with AI: video cards (g10 band, after the dark "Built with Claude") ── */
.icon--play { --i: url("/assets/icons/play--filled--alt.svg"); }
.metrics--light { margin-bottom: 0; background: var(--gray-20); border-color: var(--gray-20); }
.metrics--light .metric { background: var(--white); }
.metrics--light .metric dt { color: var(--gray-70); }
.metrics--light .metric dd { color: var(--gray-100); }
.metrics--light .metric__note { color: var(--gray-70); }
/* subsection title (role): it outranks the card titles below it */
.reels__heading {
  margin: 64px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-30);
  font: 600 28px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--gray-100);
}
.reels { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 16px; }
.reel { display: flex; flex-direction: column; background: var(--white); }
.reel__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.reel__media img, .reel__media video { display: block; width: 100%; height: 100%; object-fit: contain; }
a.reel__media img { transition: transform .24s cubic-bezier(.2, 0, .38, .9); }
a.reel__media:hover img { transform: scale(1.03); }
.reel__play {
  position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px; background: var(--blue-60); color: var(--white);
  font: 500 14px/1 var(--font-mono); letter-spacing: .04em;
}
a.reel__media:hover .reel__play { background: var(--blue-70); }
.reel__body { flex: 1; padding: 24px 16px 32px; border-top: 4px solid var(--sabe-blue); }
.reel__body .tags { margin-bottom: 16px; }
.reel .tag--agent { background: var(--blue-20); color: var(--blue-70); font-weight: 600; }
.reel__title { margin: 0; font: 600 20px/1.3 var(--font-sans); color: var(--gray-100); }
.reel__en { margin: 4px 0 12px; font: 400 12px/1.33 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sabe-blue); }
.reel__body p:last-child { margin: 0; color: var(--gray-70); font-size: 14px; line-height: 1.5; }
.reels__note { margin: 32px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray-70); }
@media (min-width: 672px) {
  .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel--feature { grid-column: 1 / -1; }
}
@media (min-width: 1056px) {
  .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reel--feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .reel--feature .reel__body { border-top: 0; border-left: 4px solid var(--sabe-blue); padding: 32px 24px; }
  .reel--feature .reel__title { font: 600 24px/1.25 var(--font-display); }
}
/* Phones: the shorts become a swipeable row instead of nine stacked cards */
@media (max-width: 671px) {
  .reels--short { grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 8px; }
  .reels--short > .reel { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { a.reel__media img { transition: none; } }
/* Phones: three long-form videos, then a button for the rest (the class comes from JS) */
.reels__more { margin-top: 24px; }
@media (max-width: 671px) {
  .reels--long.is-collapsible:not(.is-expanded) > .reel:nth-child(n+4) { display: none; }
}
@media (min-width: 672px) { .reels__more { display: none; } }

/* ── Open lab (Figma blue band) ── */
.band--blue { background: var(--sabe-blue); color: var(--white); }
.band--blue .lead { color: #eaf2ff; }
.metrics--blue { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.28); margin-bottom: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 672px) { .metrics--blue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metrics--blue .metric { background: var(--sabe-blue-deep); }
.metrics--blue .metric dt { color: var(--blue-20); }
.metrics--blue .metric__note { color: #b8d4ff; }
@media (min-width: 1056px) { .metrics--blue { grid-template-columns: repeat(4, 1fr); } }
.source { max-width: 75ch; font-size: 12px; line-height: 1.5; color: var(--white); margin-bottom: 48px; }
.band--blue .source { margin-bottom: 32px; }
.source--dark { color: var(--gray-30); }
.open-award { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 32px; padding: 24px 16px; border: 1px solid rgba(255,255,255,.28); background: var(--sabe-blue-deep); color: var(--white); }
.open-award .icon { width: 24px; height: 24px; margin-top: 2px; color: #f9d571; }
.open-award a { color: var(--white); }
.open-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; align-items: stretch; }
.open-card { display: flex; flex-direction: column; background: var(--white); color: var(--gray-100); padding: 24px 16px 32px; }
.open-card p { color: var(--gray-70); }
.open-card .btn { align-self: flex-start; margin-top: auto; }
.open-card__label { align-self: flex-start; display: flex; align-items: center; height: 32px; margin-bottom: 24px; padding: 0 12px; background: var(--gray-100); color: var(--white); font: 500 15px/1 var(--font-display); letter-spacing: .02em; }
.open-card__label--logo img { width: 92px; height: auto; }
.genially-usage { margin: 0 0 16px; border-top: 1px solid var(--gray-20); border-bottom: 1px solid var(--gray-20); }
.genially-usage summary { cursor: pointer; padding: 16px 0; font-weight: 600; }
.genially-usage table { width: 100%; border-collapse: collapse; font-size: 12px; }
.genially-usage caption { text-align: left; padding-bottom: 12px; color: var(--gray-70); }
.genially-usage th, .genially-usage td { padding: 10px 6px; border-top: 1px solid var(--gray-20); text-align: right; }
.genially-usage th:first-child { text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.genially-usage thead th { font-weight: 600; background: var(--gray-10); }
.open-card .open-card__community { font-size: 14px; margin-bottom: 24px; }
@media (min-width: 672px) { .open-links { grid-template-columns: 1fr 1fr; } }

/* ── Free guide ── */
.book { display: grid; gap: 48px; align-items: start; }
.book__cover { display: block; max-width: 360px; box-shadow: 12px 12px 0 var(--blue-20); transition: transform .24s cubic-bezier(.2, 0, .38, .9); }
.book__cover:hover { transform: translate(-4px, -4px); }
.book__parts { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--gray-20); }
.book__parts li { display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid var(--gray-20); color: var(--gray-70); }
.book__parts span { font: 600 16px/1.5 var(--font-display); color: var(--sabe-blue); }
.book__note { margin: 16px 0 0; font-size: 12px; color: var(--gray-70); max-width: 60ch; }
.link-dark { color: #78a9ff; }
@media (min-width: 1056px) {
  .book { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 0; }
  .book__cover { grid-column: 1 / 5; }
  .book > div { grid-column: 6 / -1; }
}
@media (prefers-reduced-motion: reduce) { .book__cover { transition: none; } }

/* ── Facts ── */
.facts { margin: 0; border-top: 1px solid var(--gray-20); }
.facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gray-20); }
.facts dt { font: 400 12px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-70); }
.facts dd { margin: 0; font-weight: 600; }

/* ── Footer ── */
.footer { background: var(--gray-100); color: var(--gray-50); font-size: 14px; padding: 32px 0; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.footer p { margin: 0; }
.footer a { color: var(--gray-30); }

/* ── Plain document pages (privacy) ── */
.doc { max-width: 72ch; padding: 64px var(--gutter) 96px; margin: 0 auto; }
.doc h1 { margin: 0 0 8px; font: 600 clamp(32px, 4vw + 12px, 48px)/1.1 var(--font-display); }
.doc h2 { margin: 40px 0 8px; font: 600 20px/1.3 var(--font-sans); }
.doc p, .doc li { color: var(--gray-80); }
.doc .updated { font: 400 12px/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-70); margin-bottom: 32px; }

/* ── Breakpoints ── */
@media (min-width: 672px) {
  :root { --gutter: 32px; }
  .band { padding: 96px 0; }
}
@media (min-width: 1312px) {
  .shell__nav { display: flex; }
  .shell__toggle, .shell__nav-extra { display: none !important; }
}
.shell__nav a[aria-current="true"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--blue-60); }
.shell.is-open .shell__nav a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--blue-60); }
@media (max-width: 479px) {
  .shell__product { display: none; }
  .btn { width: 100%; min-width: 0; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ── MGA walkthrough video (autoplay muted, no controls) ── */
.mga-video { margin: 32px 0 0; }
#long-form { scroll-margin-top: 80px; }
.btn--outline { border-color: var(--blue-60); color: var(--blue-60); }
.btn--outline:hover { background: var(--blue-20); }
.mga-video__frame { position: relative; aspect-ratio: 16 / 9; background: #1a1c2c; border: 1px solid var(--gray-20); overflow: hidden; }
.mga-video__player { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; cursor: pointer; }
.mga-video__lang { position: absolute; top: 12px; right: 12px; display: flex; background: rgba(22,22,22,.8); }
.mga-video__lang button { min-width: 44px; min-height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--gray-30);
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; cursor: pointer; }
.mga-video__lang button[aria-pressed="true"] { background: var(--blue-60); color: var(--white); }
.mga-video__lang button:hover:not([aria-pressed="true"]) { color: var(--white); }
.mga-video__toggle { position: absolute; left: 12px; bottom: 12px; min-width: 64px; min-height: 32px; padding: 0 12px; border: 0;
  background: rgba(22,22,22,.8); color: var(--white); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mga-video__toggle:hover { background: var(--gray-100); }
.mga-video__cap { margin-top: 12px; font: 400 14px/1.4 var(--font-sans); color: var(--gray-70); }

/* ── Guide page (/guia): reading layout on top of .doc ── */
.guide { max-width: 80ch; }
.guide .kicker { margin-bottom: 8px; }
.guide h3 { margin: 24px 0 8px; font: 600 16px/1.4 var(--font-sans); color: var(--gray-100); }
.guide__intro { display: grid; gap: 24px; align-items: start; margin: 0 0 16px; }
.guide__cover { display: block; max-width: 200px; box-shadow: 8px 8px 0 var(--blue-20); }
.guide__cover img { display: block; width: 100%; height: auto; }
.guide__lead { margin-top: 0; font-size: 18px; line-height: 1.5; color: var(--gray-100); }
.guide__toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gray-20); }
.guide__toc > li { display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid var(--gray-20); }
.guide__toc > li > span { font: 600 16px/1.5 var(--font-display); color: var(--sabe-blue); }
.guide__toc ol { list-style: none; margin: 4px 0 0; padding: 0; }
.guide__toc em { font-style: normal; font-size: 12px; color: var(--gray-70); }
.guide__part { margin-top: 64px; }
.guide__part + h2 { margin-top: 0; }
.guide__table { overflow-x: auto; margin: 24px 0; }
.guide__table:focus-visible { outline: 2px solid var(--blue-60); outline-offset: 2px; }
.guide table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.guide caption { text-align: left; padding-bottom: 8px; font: 400 12px/1.33 var(--font-mono); letter-spacing: .08em; color: var(--gray-70); }
.guide th, .guide td { padding: 8px; border-top: 1px solid var(--gray-20); text-align: left; vertical-align: top; color: var(--gray-80); }
.guide thead th { border-top: 0; background: var(--gray-10); font-weight: 600; color: var(--gray-100); }
.guide tbody th { font-weight: 600; color: var(--gray-100); }
.guide__summary { margin: 32px 0; padding: 16px 24px; background: var(--gray-10); border-left: 3px solid var(--blue-60); }
.guide__summary ul { margin: 0; padding-left: 20px; }
.guide__practice { padding-top: 16px; border-top: 1px solid var(--gray-20); }
.guide__steps { padding-left: 32px; }
.guide__steps > li::marker { font: 600 16px/1.4 var(--font-display); color: var(--sabe-blue); }
.guide__prompt { margin: 8px 0 16px; padding: 12px 16px; background: var(--gray-10); border-left: 3px solid var(--blue-60);
  font: 400 14px/1.55 var(--font-mono); color: var(--gray-100); }
.guide__prompt span { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-70); }
.guide .btn { margin: 8px 0; }
@media (min-width: 672px) {
  .guide__intro { grid-template-columns: 200px 1fr; gap: 32px; }
}

/* ── Founder story (section 10): portrait + key figure on one half, timeline on the other ── */
.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; }
.founder { margin-top: 48px; }
.founder__side { display: grid; gap: 32px; align-content: start; }
.founder__portrait { margin: 0; }
.founder__portrait img { width: 100%; background: var(--gray-20); }
.founder__portrait figcaption { margin-top: 12px; font: 400 12px/1.33 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-70); }
.founder__figure { margin: 0; grid-template-columns: 1fr; }
/* the note is a second dd, so the dl stays valid */
.founder__figure dd.metric__note { margin: 8px 0 0; font: 400 14px/1.5 var(--font-sans); color: var(--gray-70); }
.founder__projects { margin: 1px 0 0; padding: 0 16px; background: var(--white); border: 0; }
.founder__projects table { margin-bottom: 16px; }
.founder__projects th[scope="row"] { color: var(--gray-100); }
.founder__projects tfoot th, .founder__projects tfoot td { font-weight: 600; border-top-color: var(--gray-50); }
.founder__story { min-width: 0; }
.founder__source { margin: 24px 0 0; color: var(--gray-70); }
.founder__source p:last-child { margin-bottom: 0; }
@media (min-width: 672px) and (max-width: 1055px) {
  .founder__side { grid-template-columns: 1fr 1fr; }
}

/* Timeline: an ordered list that scrolls sideways; JS only adds the controls above it */
.timeline__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; margin-bottom: 16px; }
.timeline__range { margin: 0; font: 400 12px/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-70); }
.timeline__controls { display: flex; align-items: center; gap: 1px; margin-left: auto; }
.timeline__controls[hidden] { display: none; }
.timeline__status { margin: 0 16px 0 0; font: 500 14px/1 var(--font-mono); letter-spacing: .08em; color: var(--gray-100); }
.timeline__btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0;
  background: var(--blue-60); color: var(--white); cursor: pointer; transition: background-color .11s; }
.timeline__btn:hover { background: var(--blue-70); }
.timeline__btn .icon { width: 20px; height: 20px; }
.timeline__btn--prev .icon { transform: scaleX(-1); }
.timeline__btn[aria-disabled="true"] { background: var(--gray-20); color: var(--gray-50); cursor: default; }
.timeline {
  position: relative; list-style: none; margin: 0; padding: 0 0 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--gray-50) transparent;
}
.stage { display: flex; flex-direction: column; min-width: 0; background: var(--white); scroll-snap-align: start; }
.stage__media { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gray-20); }
/* the one stage without a photo: a figure on the Figma blue with the blueprint lines */
.stage__media--type {
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 16px;
  background-color: var(--sabe-blue);
  background-image: linear-gradient(to right, rgba(234, 242, 255, .2) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(234, 242, 255, .2) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--white);
}
.stage__figure { font: 700 clamp(28px, 2.5vw + 12px, 48px)/1 var(--font-display); letter-spacing: -0.01em; }
.stage__figure-note { margin-top: 12px; font: 400 12px/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.stage__body { flex: 1; padding: 24px 16px 32px; border-top: 4px solid var(--sabe-blue); }
.stage__when { margin: 0 0 8px; font: 500 14px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--sabe-blue); }
/* card title (role): Lexend 600 24px, below the H2 */
.stage__title { margin: 0 0 16px; font: 600 24px/1.25 var(--font-display); }
.stage__body .tags { margin-bottom: 16px; }
.stage__body p { color: var(--gray-70); font-size: 14px; line-height: 1.5; }
.stage__body p:last-child { margin-bottom: 0; }
.stage__body .stage__photo { font-size: 12px; }
/* "Founder-reported": an outline tag, as a card label or right after the sentence it qualifies */
.tag--reported { background: transparent; border: 1px solid var(--gray-70); color: var(--gray-100); }
p .tag--reported { display: inline-flex; min-height: 20px; padding: 0 8px; vertical-align: 1px; white-space: nowrap; }
@media (min-width: 672px) {
  .timeline { grid-auto-columns: 60%; gap: 32px; }
  .stage__body p { font-size: 16px; }
  .stage__body .stage__photo { font-size: 12px; }
}
@media (min-width: 1056px) {
  /* inside the right half: one card and a glimpse of the next */
  .timeline { grid-auto-columns: calc(87.5% - 16px); }
}
@media (prefers-reduced-motion: reduce) { .timeline__btn { transition: none; } }