/* MapSnap landing page. Same identity as the game (see DESIGN.md): white
   ground and soft sky, frosted glass, lime-and-olive notched tickets,
   painted-style landscapes; light by default, dark on request or by the
   system's setting. The tokens below mirror the game's styles.css. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-latin-wght-normal.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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-latin-ext-wght-normal.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: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Expose";
  src: url("assets/fonts/expose-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #f2f5e8;
  --sea: #dfe8cf;
  --sea-line: #c2d0ab;
  --land: #fbfcf4;
  --land-line: #66794a;

  --ink: #141d0e;
  --ink-soft: #3b4430;
  --ink-muted: #596451;
  --on-ink: #ffffff;
  --line: #d3ddc0;
  --line-strong: #b4c0a6;

  --lime: #b5c64b;
  --lime-deep: #98ab33;
  --lime-tint: #e7efcb;
  --lime-ink: #2f3d06;
  --olive: #4b5f0f;
  --good-ink: #4b5f0f;
  --btn: #4b5f0f;
  --btn-hover: #384908;
  --btn-ink: #ffffff;
  --slip-fill: #e3ecbd;

  --ember: #d8553d;
  --ember-deep: #b23c27;
  --ember-tint: #fbddd5;

  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --shadow-glass: 0 1px 2px rgba(25, 35, 10, 0.06), 0 12px 28px -14px rgba(25, 40, 10, 0.3);
  --shadow-sheet: 0 2px 4px rgba(25, 35, 10, 0.06), 0 36px 72px -28px rgba(25, 40, 10, 0.42);
  --ticket-bg: color-mix(in srgb, var(--ink) 7%, transparent);

  --sky-top: #ffffff;
  --sky-bottom: #f1f6fb;
  --blob-a: rgba(181, 198, 75, 0.34);
  --blob-b: rgba(150, 196, 236, 0.38);
  --blob-c: rgba(255, 214, 178, 0.32);
  --hl: rgba(181, 198, 75, 0.45);
  --dot: rgba(18, 23, 12, 0.1);
  --section-sky: #e8eedb;
  --footer-bg: #1c2a13;
  --footer-ink: #dbe6cc;


  --display: "Expose", "Arial Narrow", system-ui, sans-serif;
  --accent: #4a6712;
  --chip: rgba(18, 23, 12, 0.06);
  --stage-a: #fcfdf6;
  --stage-b: #d9e3c2;
  --stage-shadow: none;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.3, 1.45, 0.55, 1);
  --wrap: 1120px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ground: #172419;
  --sea: #111c13;
  --sea-line: #263b29;
  --land: #223523;
  --land-line: rgba(190, 210, 100, 0.6);

  --ink: #f0f4ea;
  --ink-soft: #c8d5c1;
  --ink-muted: #93a58d;
  --on-ink: #10180a;
  --line: #2d4331;
  --line-strong: #45614a;

  --good-ink: #a8c53a;
  --btn: #6f8f1f;
  --btn-hover: #7da024;
  --btn-ink: #ffffff;
  --slip-fill: #dfe8b4;

  --ember: #ee7a63;
  --ember-deep: #ff9a85;
  --ember-tint: rgba(238, 122, 99, 0.22);

  --glass: rgba(22, 34, 24, 0.62);
  --glass-strong: rgba(22, 34, 24, 0.84);
  --glass-edge: rgba(214, 240, 160, 0.1);
  --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-sheet: 0 2px 4px rgba(0, 0, 0, 0.3), 0 36px 72px -28px rgba(0, 0, 0, 0.75);

  --section-sky: #1b2b1d;
  --footer-bg: #0f190f;
  --footer-ink: #c8d5c1;
  --hl: rgba(134, 165, 36, 0.35);

  --accent: #86a523;
  --chip: rgba(214, 240, 170, 0.07);
  --stage-a: #2b422c;
  --stage-b: #142016;
  --stage-shadow: inset 0 0 140px rgba(0, 0, 0, 0.42);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  accent-color: var(--accent);
  caret-color: var(--accent);
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

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

::selection { background: var(--lime); color: var(--lime-ink); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--olive); outline-offset: 3px; border-radius: 6px; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--lime); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 650;
  transition: top 0.2s;
}
.skip:focus { top: 12px; }

/* the logo takes its colours from the theme */
.logo-ticket { fill: var(--logo-ticket, var(--lime)); }
.logo-tick { stroke: var(--logo-tick, var(--lime-ink)); }

/* the world map, drawn once and reused */
#world-body .sea { fill: var(--sea); }
#world-body .graticule { fill: none; stroke: var(--sea-line); stroke-opacity: 0.5; stroke-width: 0.5; }
#world-body .land { fill: var(--land); stroke: var(--land-line); stroke-width: 0.4; stroke-linejoin: round; }

/* ---------- Buttons ---------- */

.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s var(--ease-snap), box-shadow 0.18s;
}

.btn-primary {
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: 0 10px 20px -12px rgba(40, 55, 8, 0.75);
}
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary:active { transform: translateY(1px) scale(0.97); transition-duration: 0.09s; }


.btn-small { min-height: 44px; padding: 8px 20px; font-size: 0.98rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-strong);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-glass);
  transition: transform 0.18s var(--ease-snap), background 0.18s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--ground); }
.icon-btn:active { transform: scale(0.94); transition-duration: 0.09s; }

/* ---------- Header: a floating glass pill ---------- */

.nav {
  position: fixed;
  inset: 22px 36px auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav::before {
  content: "";
  position: absolute;
  inset: -22px -36px -28px;
  z-index: -1;
  background: linear-gradient(180deg, var(--ground) 35%, transparent);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.nav.scrolled::before { opacity: 0.94; }

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.brand svg { flex: none; width: 34px; height: 34px; }

.nav-links { justify-self: center; display: flex; gap: 6px; }
.nav-links a {
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, transform 0.25s var(--ease-snap);
}
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 15%, transparent); transform: translateY(-2px); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 10px; }

/* ---------- Hero ---------- */

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }

h1 {
  font-size: clamp(2.4rem, 6.6vw, 4.3rem);
  line-height: 1.02;
}

h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--good-ink);
  padding-inline: 0.05em;
  background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 90% / 0% 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js .hero h1 em { animation: hl 0.9s var(--ease-out) 1.1s forwards; }
.js h2.in em, .js .split-copy.in h2 em { animation: hl 0.9s var(--ease-out) 0.35s forwards; }
.js h2[data-reveal]:not(.in) em { background-size: 0% 0.3em; }
@keyframes hl { to { background-size: 100% 0.3em; } }
html:not(.js) h1 em, html:not(.js) h2 em { background-size: 100% 0.3em; }

.lead {
  max-width: 34em;
  margin: 14px auto 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}


.fine {
  max-width: 36em;
  margin: 12px auto 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* the demo: a real round, played by itself */
.demo {
  position: relative;
  max-width: 860px;
  margin: 26px auto 0;
  padding: 0;
  z-index: 2;
}

.demo-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: var(--sea);
  box-shadow: var(--shadow-sheet);
  aspect-ratio: 1000 / 501;
}

.demo-map { position: absolute; inset: 0; width: 100%; height: 100%; }

.demo-lane {
  position: absolute;
  inset: 0 0 auto 0;
  height: 25%;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-edge);
}

.demo-slips { position: absolute; inset: 0; pointer-events: none; }

.slip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  will-change: transform;
}
.slip svg { overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(25, 40, 10, 0.38)) drop-shadow(0 6px 8px rgba(25, 40, 10, 0.2)); }
.slip path { fill: var(--slip-fill); stroke: var(--olive); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.slip span {
  font-size: clamp(0.62rem, 1.3vw, 0.84rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 0 2px var(--ground), 0 0 4px var(--ground), 0 0 8px var(--ground);
}
.slip.held svg { filter: drop-shadow(0 2px 3px rgba(25, 40, 10, 0.25)) drop-shadow(0 16px 16px rgba(25, 40, 10, 0.3)); }
.slip.held path { fill: var(--lime); }

.demo-hud {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
.demo-hud span {
  display: flex;
  flex-direction: column;
  min-width: 92px;
  padding: 2px 16px;
  line-height: 1.15;
}
.demo-hud span + span { border-left: 1px solid var(--line); }
.demo-hud small { font-size: 0.72rem; font-weight: 600; color: var(--ink-muted); }
.demo-hud b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.demo-pause { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 40px; height: 40px; }

.demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  z-index: 3;
  border-radius: 50%;
  border: 2px solid var(--glass-edge);
  background: color-mix(in srgb, var(--olive) 38%, transparent);
  box-shadow: 0 6px 14px -4px rgba(25, 40, 10, 0.5);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.demo-plus {
  position: absolute;
  z-index: 2;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  color: var(--lime-ink);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: var(--shadow-glass);
  pointer-events: none;
  animation: plus 1.1s var(--ease-out) forwards;
}
@keyframes plus {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
.demo-hud b { display: inline-block; }
.demo-hud b.bump { animation: bump 0.45s var(--ease-snap); }
@keyframes bump { 40% { transform: scale(1.28); color: var(--good-ink); } }
.overlay .ring {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: ring 700ms var(--ease-out) forwards;
}
.overlay .ripple {
  fill: color-mix(in srgb, var(--ember) 25%, transparent);
  stroke: var(--ember);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: ring 650ms var(--ease-out) forwards;
}
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.15); } 100% { opacity: 0; transform: scale(1); } }
.demo-small .overlay .ring, .demo-small .overlay .ripple { stroke-width: 0.7; }
.js .hero .demo-frame { transition: transform 0.25s ease-out; will-change: transform; }

/* the demo's map marks (overlay) */
.overlay .placed {
  fill: var(--lime);
  stroke: var(--olive);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.overlay .ink {
  fill: var(--lime);
  stroke: var(--olive);
  stroke-width: 1;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: ink-take 560ms var(--ease-out) both;
}
@keyframes ink-take {
  0%   { opacity: 0.95; transform: scale(var(--from, 1.15)); }
  30%  { opacity: 0.9;  transform: scale(0.985); }
  55%  { opacity: 0.7;  transform: none; }
  100% { opacity: 0;    transform: none; }
}
.overlay .tick {
  fill: none;
  stroke: var(--lime-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 300ms var(--ease-out) forwards, fade 300ms ease-in 1100ms forwards;
}
.overlay .cross {
  fill: none;
  stroke: var(--ember);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 280ms var(--ease-out) forwards;
}
.overlay .outline {
  fill: none;
  stroke: var(--ember);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 700ms ease-in-out forwards;
}
.overlay .arrow {
  fill: none;
  stroke: var(--ember);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 420ms var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 0; } }

/* ---------- Sections ---------- */

.section {
  position: relative;
  background: radial-gradient(ellipse 50% 40% at 85% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  padding: clamp(72px, 10vw, 128px) 20px;
}
.section-sky {
  margin: 12px;
  border-radius: 46px;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, var(--stage-a), var(--section-sky) 70%);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}

.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap.narrow { max-width: 780px; }

h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.06; text-align: center; }
.section-lead {
  max-width: 36em;
  margin: 14px auto 0;
  text-align: center;
  color: var(--ink-soft);
}

/* the steps: lime tickets */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.ticket {
  --notch: 13px;
  position: relative;
  border-radius: 28px;
  background: var(--lime);
  color: var(--lime-ink);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 var(--notch-y, 50%), #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--notch-y, 50%), #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 var(--notch-y, 50%), #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--notch-y, 50%), #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) right / 51% 100% no-repeat;
}

.step {
  --notch-y: 38%;
  padding: 26px 28px 30px;
}
.step h3 { margin-top: 12px; font-size: 1.6rem; }
.step p { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; }

.step-art { width: 120px; height: 70px; overflow: visible; }
.step-art path { fill: none; stroke: var(--lime-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.step-art .drift { fill: #fff; fill-opacity: 0.85; animation: float 5s ease-in-out infinite alternate; }
.step-art .trail { opacity: 0.5; animation: trail 5s ease-in-out infinite alternate; }
.step-art .route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.step-art .head { stroke-dasharray: 1; stroke-dashoffset: 1; }
.step-art .tick { stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.step-art .rider { fill: #fff; stroke: var(--lime-ink); stroke-width: 2; offset-path: path("M14 52C34 14 66 12 96 38"); offset-distance: 0%; opacity: 0; }
.step-art .pop { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.step.in .route { animation: route-loop 3.8s var(--ease-out) 250ms infinite; }
.step.in .head { animation: head-loop 3.8s var(--ease-out) 250ms infinite; }
.step.in .rider { animation: rider-loop 3.8s cubic-bezier(0.5, 0, 0.3, 1) 250ms infinite; }
.step.in .tick { animation: tick-loop 3.4s var(--ease-out) 300ms infinite; }
.step.in .pop { animation: pop-loop 3.4s var(--ease-out) 300ms infinite; }
@keyframes float {
  from { translate: -10px 3px; rotate: -5deg; }
  to   { translate: 18px -5px; rotate: 5deg; }
}
@keyframes trail { from { translate: 6px 0; opacity: 0.2; } to { translate: -6px 0; opacity: 0.7; } }
@keyframes route-loop {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  35%, 82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.35; }
}
@keyframes head-loop {
  0%, 32% { stroke-dashoffset: 1; }
  42%, 100% { stroke-dashoffset: 0; }
}
@keyframes rider-loop {
  0%   { offset-distance: 0%; opacity: 0; scale: 0.6; }
  6%   { opacity: 1; scale: 1; }
  35%  { offset-distance: 100%; opacity: 1; scale: 1; }
  44%, 100% { offset-distance: 100%; opacity: 0; scale: 1.8; }
}
@keyframes tick-loop {
  0%   { stroke-dashoffset: 1; }
  28%, 100% { stroke-dashoffset: 0; }
}
@keyframes pop-loop {
  0%, 24% { opacity: 0; scale: 0.4; }
  30%  { opacity: 0.9; scale: 0.7; }
  60%, 100% { opacity: 0; scale: 1.25; }
}

/* modes */

.glass {
  border: 1px solid var(--glass-edge);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-glass);
}


.step[data-reveal] {
  transition: transform 0.4s var(--ease-snap), box-shadow 0.35s, opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
}
.step:hover { transform: translateY(-6px) rotate(-0.6deg); }
.step:nth-child(2):hover { transform: translateY(-6px) rotate(0.6deg); }

@keyframes march { to { stroke-dashoffset: -18; } }

/* mistakes teach */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split h2 { text-align: left; }
.split-copy p { margin: 18px 0 0; color: var(--ink-soft); max-width: 30em; }

.demo-small { margin: 0; max-width: none; }

/* the zoomed-in Europe view draws its marks thinner (stroke widths are map units) */
.demo-small .overlay .cross { stroke-width: 1.3; }
.demo-small .overlay .outline { stroke-width: 0.9; }
.demo-small .overlay .arrow { stroke-width: 1.1; }
.demo-small .overlay .tick { stroke-width: 1.5; }
.demo-small .overlay .placed { stroke-width: 0.4; }
.demo-small .overlay .ink { stroke-width: 0.5; }
.demo-small .demo-frame { aspect-ratio: 190 / 120; border-radius: 24px; }

.teach-slip {
  position: absolute;
  left: 4%;
  top: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
}
.teach-slip svg { width: 44px; height: 56px; overflow: visible; filter: drop-shadow(0 4px 6px rgba(25, 40, 10, 0.3)); }
.teach-slip path { fill: var(--slip-fill); stroke: var(--olive); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.teach-slip span { font-size: 0.8rem; font-weight: 700; text-shadow: 0 0 3px var(--ground), 0 0 6px var(--ground); }

.teach-chip {
  position: absolute;
  padding: 8px 14px 9px;
  border: 2px solid var(--ember);
  border-radius: 14px;
  background: var(--ground);
  box-shadow: var(--shadow-glass);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.25s, translate 0.25s;
}
.teach-chip b { font-weight: 700; }
.teach-chip.show { opacity: 1; translate: 0 0; animation: chip-in 0.5s var(--ease-snap); }
@keyframes chip-in { from { scale: 0.7; } }

/* tickets: the facts */
.section-tickets { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(24px, 4vw, 56px); }
.facts-note { max-width: 38em; margin: 28px auto 0; text-align: center; color: var(--ink-soft); }

/* the free version */
.card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 32px;
  text-align: center;
}
.card h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.card p { max-width: 30em; margin: 14px auto 0; color: var(--ink-soft); }
.card .btn { margin-top: 24px; }

.checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.checks li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.checks svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--btn);
  color: var(--btn-ink);
}

/* questions */
.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 1.12rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 22px; height: 22px; transition: rotate 0.25s var(--ease-out); }
.faq details[open] summary svg { rotate: 180deg; }
.faq p { margin: 0 0 20px; padding: 0 4px; max-width: 38em; color: var(--ink-soft); animation: open 0.3s var(--ease-out); }
.faq p a { color: var(--good-ink); }
@keyframes open { from { opacity: 0; translate: 0 -6px; } }

/* footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 0 12px 12px;
  padding: 32px clamp(20px, 5vw, 56px) 36px;
  border-radius: 36px;
  background: var(--footer-bg);
  color: var(--footer-ink);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.footer nav a { padding: 6px 0; font-weight: 600; text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }
.footer p { flex-basis: 100%; margin: 0; text-align: center; font-size: 0.9rem; opacity: 0.8; }
.footer .brand svg { width: 34px; height: 34px; }
.footer { --logo-ticket: var(--footer-ink); --logo-tick: var(--footer-bg); }

/* privacy page */
.doc { max-width: 720px; margin: 0 auto; padding: 130px 20px 80px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); }
.doc h2 { margin: 36px 0 8px; text-align: left; font-size: 1.35rem; letter-spacing: -0.02em; }
.doc p, .doc li { color: var(--ink-soft); }
.doc a { color: var(--good-ink); }
.doc .updated { color: var(--ink-muted); }

/* ---------- Reveal on scroll ---------- */

.js [data-reveal]:not(.in) { opacity: 0; translate: 0 24px; }
[data-reveal] { transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); }
.js [data-reveal]:nth-child(2):not(.in) { transition-delay: 0.08s; }
.js [data-reveal]:nth-child(3):not(.in) { transition-delay: 0.16s; }
.js [data-reveal]:nth-child(4):not(.in) { transition-delay: 0.24s; }
.js .in[data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.js .in[data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.js .in[data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* a little parallax where the browser can do it for free */
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { from { scale: 0 1; } to { scale: 1 1; } }
}

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .split { grid-template-columns: 1fr; }
  .split h2 { text-align: center; }
  .split-copy p { margin-inline: auto; text-align: center; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav { gap: 10px; }
  .hero { padding-top: 100px; }
  .demo-hud { display: none; }
  .demo-pause { width: 36px; height: 36px; right: 8px; bottom: 8px; }
}

@media (max-width: 460px) {
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js [data-reveal]:not(.in) { opacity: 1; translate: none; }
  .step .route, .step .head, .step .tick { stroke-dashoffset: 0; }
  .bokeh i, .cta::after { animation: none !important; }
  h1 em, h2 em { background-size: 100% 0.3em !important; }
}

/* ---------- Entrance, shine, progress ---------- */

.js .nav { animation: nav-in 0.8s var(--ease-out) backwards; }
@keyframes nav-in { from { opacity: 0; translate: 0 -24px; } }

.w { display: inline-block; animation: word-in 0.9s var(--ease-out) calc(var(--i, 0) * 75ms + 120ms) backwards; }
@keyframes word-in { from { opacity: 0; transform: translateY(0.55em) rotate(2.5deg); filter: blur(6px); } }

.js .hero .lead, .js .hero .cta, .js .hero .fine { animation: rise 0.9s var(--ease-out) backwards; }
.js .hero .lead { animation-delay: 0.62s; }
.js .hero .cta { animation-delay: 0.78s; }
.js .hero .fine { animation-delay: 0.9s; }
.js .hero .demo { animation: demo-in 1.1s var(--ease-out) 0.95s backwards; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes demo-in { from { opacity: 0; translate: 0 56px; scale: 0.94; } }

.cta { position: relative; overflow: hidden; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  translate: -120% 0;
  animation: shine 5.5s ease-in-out 2.2s infinite;
}
@keyframes shine { 0%, 62% { translate: -120% 0; } 100% { translate: 120% 0; } }
.btn-primary:hover { transform: translateY(-2px); }

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: var(--lime);
  transform-origin: left;
  scale: 0 1;
  pointer-events: none;
}
@supports not (animation-timeline: scroll()) { .progress { display: none; } }


/* ---------- The lookalike: dark charcoal green, big condensed type ---------- */

h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 1;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
}
h2 em { font-style: normal; font-weight: 800; background: none; color: var(--accent); padding: 0; }
.card h2, .closing-card h2 { font-size: clamp(2.1rem, 4.6vw, 3.45rem); }

:root[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, #76961f, #4d6813);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(134, 165, 36, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
:root[data-theme="dark"] .btn-primary:hover { filter: brightness(1.1); }
:root[data-theme="dark"] .ticket { background: linear-gradient(160deg, #5b7919, #435d11); color: #fff; }
:root[data-theme="dark"] .step-art path { stroke: #fff; }
:root[data-theme="dark"] .step-art .drift { fill: #ffffff; }
:root[data-theme="dark"] .step-art .rider { stroke: #1a2305; }
.stage .overlay .placed { filter: drop-shadow(0 0 5px rgba(190, 208, 84, 0.5)); stroke: var(--lime-deep); }
.stage .overlay .ink { stroke: var(--lime-deep); }
.stage .demo-map { filter: drop-shadow(0 0 2px rgba(177, 199, 70, 0.22)); }
:root[data-theme="dark"] .demo-small .demo-map { filter: drop-shadow(0 0 2px rgba(177, 199, 70, 0.35)); }
:root[data-theme="dark"] .checks svg { background: var(--accent); }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-width: min(100%, 300px);
  padding: 7px 7px 7px 26px;
  border-radius: 16px;
  background: linear-gradient(180deg, #76961f, #4d6813);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 16px 30px -14px rgba(134, 165, 36, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.28s var(--ease-snap), filter 0.2s;
}
.cta i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: #fff;
  color: #1a2305;
  transition: transform 0.35s var(--ease-snap);
}
.cta i svg { width: 20px; height: 20px; }
.cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cta:hover i { transform: translateX(3px); }
.cta:active { transform: translateY(1px) scale(0.98); }

/* the stage: one big rounded frame, lit from the middle */
.hero { position: relative; padding: 12px; background: var(--ground); }
.stage {
  position: relative;
  height: clamp(780px, 62vw, 1040px);
  border-radius: 46px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 58% 62% at 50% 46%, var(--stage-a), transparent 78%),
    var(--stage-b);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: var(--stage-shadow);
}

.bokeh { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bokeh i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, 150px);
  height: var(--h, 80px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 182, 38, 0.4), transparent 72%);
  rotate: var(--r, -30deg);
  animation: bokeh var(--t, 18s) ease-in-out var(--d, 0s) infinite alternate;
}
.bokeh i:nth-child(1) { --x: 80%; --y: 4%; --r: -35deg; }
.bokeh i:nth-child(2) { --x: 90%; --y: 50%; --w: 200px; --h: 90px; --r: -25deg; --t: 22s; --d: -6s; }
.bokeh i:nth-child(3) { --x: -3%; --y: 58%; --w: 190px; --r: -20deg; --t: 24s; --d: -3s; }
.bokeh i:nth-child(4) { --x: 18%; --y: 86%; --w: 130px; --h: 70px; --t: 16s; --d: -9s; }
.bokeh i:nth-child(5) { --x: 42%; --y: 2%; --w: 130px; --h: 60px; --r: -40deg; --t: 20s; --d: -12s; }
.bokeh i:nth-child(6) { --x: 70%; --y: 82%; --w: 170px; --t: 26s; --d: -4s; }
@keyframes bokeh { from { translate: 0 0; opacity: 0.45; } to { translate: 26px -34px; opacity: 0.95; } }
:root:not([data-theme="dark"]) .bokeh i { background: radial-gradient(closest-side, rgba(181, 198, 75, 0.45), transparent 72%); }

/* the headline: two halves, green over white, fading under the widget */
.display {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.3vw, 5.2rem);
  letter-spacing: 0.004em;
  line-height: 0.92;
  text-transform: uppercase;
  pointer-events: none;
}
.display .line { display: block; white-space: nowrap; color: var(--ink); }
.display .line.g { color: var(--accent); }
.h-a {
  position: absolute;
  left: 3.5%;
  top: 15%;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.1));
  mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.1));
}
.h-b {
  position: absolute;
  right: 3.5%;
  bottom: 6%;
  text-align: right;
  -webkit-mask-image: linear-gradient(270deg, #000 60%, rgba(0, 0, 0, 0.1));
  mask-image: linear-gradient(270deg, #000 60%, rgba(0, 0, 0, 0.1));
}



.hero-left { position: absolute; left: 3.5%; bottom: 3.5%; z-index: 3; width: min(360px, 31%); }
.hero-left .lead { max-width: none; margin: 0 0 24px; font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.25; color: var(--ink); text-align: left; }
.my-best {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.my-best[hidden] { display: none; }
/* the chip stands in for the small print under the button, so the block keeps its height */
.my-best:not([hidden]) ~ .fine { display: none; }
.my-best b { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--accent); letter-spacing: 0.004em; }
.hero-left .fine { margin: 14px 0 0; font-size: 0.8rem; line-height: 1.4; text-align: left; color: var(--ink-muted); }

/* the widget: a glossy black shell with the map in its window */
.stage .demo {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  width: min(66%, 1100px);
  max-width: none;
  margin: 0;
  z-index: 4;
  /* the widget is a dark object in both themes: it carries its own map colours */
  --sea: #0f1a10;
  --sea-line: #263b29;
  --land: #1f3220;
  --land-line: rgba(190, 210, 100, 0.6);
  --ink: #f0f4ea;
  --ink-muted: #93a58d;
  --ground: #131f14;
  --slip-fill: #dfe8b4;
}
.stage .demo::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50px;
  background: linear-gradient(145deg, #3a4844, #0a0f0e 36%, #151d1b 68%, #2d3834);
  box-shadow: 0 50px 90px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.stage .demo::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -76px;
  z-index: -2;
  height: 64px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  filter: blur(8px);
}
.stage .demo-frame {
  border: 0;
  border-radius: 36px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 46px rgba(0, 0, 0, 0.45);
}
.stage .demo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), transparent 28%);
  pointer-events: none;
}
.stage .demo-lane { background: color-mix(in srgb, #0a0f0e 34%, transparent); border-bottom-color: rgba(255, 255, 255, 0.08); }
.stage .slip span { color: var(--ink); text-shadow: 0 0 4px #000, 0 0 8px #000; }
.stage .demo-hud { background: rgba(14, 20, 19, 0.82); border-color: rgba(255, 255, 255, 0.1); }
.stage .demo-hud small { color: #9fb0a8; }
.stage .demo-hud b { color: #f1f4ee; }
.stage .demo-hud span + span { border-left-color: rgba(255, 255, 255, 0.12); }
.stage .demo-pause { background: rgba(14, 20, 19, 0.82); color: #f1f4ee; border-color: rgba(255, 255, 255, 0.1); }

@keyframes spin { to { rotate: 360deg; } }

/* the closing call */
.closing {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 600px;
  margin: 12px;
  padding: 110px 20px 120px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 46px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: radial-gradient(ellipse 60% 70% at 50% 58%, var(--stage-a), var(--stage-b));
}
.closing .bokeh i:nth-child(1) { --x: 8%; --y: 10%; }
.closing .bokeh i:nth-child(2) { --x: 84%; --y: 62%; }
.closing-card { max-width: 680px; width: 100%; padding: clamp(28px, 5vw, 60px); border-radius: 36px; text-align: center; }
.closing-card p { margin: 14px 0 0; color: var(--ink-soft); }
.closing-card .cta { margin-top: 28px; }

:root[data-theme="dark"] .footer .brand svg { width: 34px; height: 34px; }

/* ---------- Lookalike: small screens ---------- */

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; inset: 14px 16px auto; }
  .nav::before { inset: -14px -16px -22px; }
  .hero { padding: 8px; }
  .stage {
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: auto;
    padding: 96px 20px 36px;
    border-radius: 34px;
  }
  .display, .h-a, .h-b, .hero-left { position: static; translate: none; width: auto; }
  .stage .demo { position: relative; left: auto; top: auto; translate: none; }
  .display { font-size: clamp(2.6rem, 12.4vw, 6rem); pointer-events: auto; }
  .display .line { display: inline; white-space: normal; }
  .h-a, .h-b { -webkit-mask-image: none; mask-image: none; display: block; }
  .h-b { text-align: left; }
  .hero-left { width: auto; max-width: 440px; }
  .stage .demo { width: 100%; max-width: none; order: 0; margin: 12px 0 4px; }
  .stage .demo::before { inset: -8px; border-radius: 40px; }
  .stage .demo { width: 100%; }
  .section-sky, .closing { border-radius: 34px; }
  .stage .demo::after { display: none; }
  .stage .demo-frame { border-radius: 30px; }
}

@media (max-width: 640px) {
  .nav-right .btn { padding-inline: 16px; }
  .stage .demo-hud { display: none; }
}

.facts-line {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.5vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.facts-line b { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }


/* the moss hero, wide screens: the headline halves stay clear of the widget's corners */
@media (min-width: 1001px) and (max-width: 1200px) {
  .display { font-size: 4.3vw; }
  .stage .demo { left: 56%; width: 56%; }
}

/* a section that is scrolled out of view stops all its ambient motion (set by site.js) */
[data-offscreen],
[data-offscreen] *,
[data-offscreen] *::before,
[data-offscreen] *::after { animation-play-state: paused !important; }

/* ---------- Mode cards: a notch bitten out of the cover's corner ----------
   The cover is cut with a mask (not painted over), so the notch is truly
   transparent on any background. The arrow disc sits in the cut, concentric
   with it, and the cover curves into the cut through two fillets. */

.ncards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 22px;
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
}

.ncard {
  --disc: 58px;
  --block: 74px;
  --r: calc(var(--block) - var(--disc) / 2);
  --fillet: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 30px;
  color: inherit;
  text-decoration: none;
}
.ncard:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 6px; }

.nc-cover-wrap { position: relative; }

.nc-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 28px;
  /* the cover is a dark object in both themes, like the hero widget */
  --sea: #111c13;
  --slip-fill: #dfe8b4;
  --land: #223523;
  --land-line: rgba(190, 210, 100, 0.65);
  background: radial-gradient(ellipse 80% 90% at 50% 20%, #2b422c, #111c13);
  -webkit-mask:
    /* left of the cut, full height */
    linear-gradient(#000 0 0) left 0 top 0 / calc(100% - var(--block) - var(--fillet) + 1px) 100% no-repeat,
    /* between that and the cut, above the lower fillet */
    linear-gradient(#000 0 0) right var(--block) top 0 / var(--fillet) calc(100% - var(--fillet) + 1px) no-repeat,
    /* above the cut */
    linear-gradient(#000 0 0) right var(--fillet) top 0 / calc(var(--block) - var(--fillet) + 1px) calc(100% - var(--block) + 1px) no-repeat,
    linear-gradient(#000 0 0) right 0 top 0 / var(--fillet) calc(100% - var(--block) - var(--fillet) + 1px) no-repeat,
    /* the cover's corner that curves round the disc */
    radial-gradient(circle var(--r) at 100% 100%, #0000 calc(var(--r) - 0.5px), #000 var(--r)) right calc(var(--block) - var(--r)) bottom calc(var(--block) - var(--r)) / var(--r) var(--r) no-repeat,
    /* the two fillets where the cut meets the cover's edges */
    radial-gradient(circle var(--fillet) at 0 0, #000 calc(var(--fillet) - 0.5px), #0000 var(--fillet)) right 0 bottom var(--block) / var(--fillet) var(--fillet) no-repeat,
    radial-gradient(circle var(--fillet) at 0 0, #000 calc(var(--fillet) - 0.5px), #0000 var(--fillet)) right var(--block) bottom 0 / var(--fillet) var(--fillet) no-repeat;
  mask:
    /* left of the cut, full height */
    linear-gradient(#000 0 0) left 0 top 0 / calc(100% - var(--block) - var(--fillet) + 1px) 100% no-repeat,
    /* between that and the cut, above the lower fillet */
    linear-gradient(#000 0 0) right var(--block) top 0 / var(--fillet) calc(100% - var(--fillet) + 1px) no-repeat,
    /* above the cut */
    linear-gradient(#000 0 0) right var(--fillet) top 0 / calc(var(--block) - var(--fillet) + 1px) calc(100% - var(--block) + 1px) no-repeat,
    linear-gradient(#000 0 0) right 0 top 0 / var(--fillet) calc(100% - var(--block) - var(--fillet) + 1px) no-repeat,
    /* the cover's corner that curves round the disc */
    radial-gradient(circle var(--r) at 100% 100%, #0000 calc(var(--r) - 0.5px), #000 var(--r)) right calc(var(--block) - var(--r)) bottom calc(var(--block) - var(--r)) / var(--r) var(--r) no-repeat,
    /* the two fillets where the cut meets the cover's edges */
    radial-gradient(circle var(--fillet) at 0 0, #000 calc(var(--fillet) - 0.5px), #0000 var(--fillet)) right 0 bottom var(--block) / var(--fillet) var(--fillet) no-repeat,
    radial-gradient(circle var(--fillet) at 0 0, #000 calc(var(--fillet) - 0.5px), #0000 var(--fillet)) right var(--block) bottom 0 / var(--fillet) var(--fillet) no-repeat;
}

/* the drawing: quiet at rest, lit when the card is looked at */
.nc-art {
  position: absolute;
  inset: 10% 8% 8%;
  width: 84%;
  height: 82%;
  filter: saturate(0.4) brightness(0.88);
  transition: filter 0.5s var(--ease-out), scale 0.7s var(--ease-out);
}
.ncard:hover .nc-art,
.ncard:focus-visible .nc-art { filter: none; scale: 1.06; }
@media (hover: none) { .nc-art { filter: none; } }

.nc-art .glyph { fill: var(--slip-fill); stroke: var(--lime); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nc-art .cap { fill: #fff; stroke: var(--lime); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.nc-art .focus { stroke: var(--lime); }
.nc-art .cap-ring { fill: none; stroke: var(--lime); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nc-art .focus { animation: march 1.4s linear infinite; }
.ncard:hover .nc-art .cap-ring { animation: ping 2s var(--ease-out) infinite; }
.nc-art:not(.nc-flag) { filter: saturate(0.4) brightness(0.88) drop-shadow(0 0 10px color-mix(in srgb, var(--lime) 26%, transparent)); }
.ncard:hover .nc-art:not(.nc-flag), .ncard:focus-visible .nc-art:not(.nc-flag) { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--lime) 40%, transparent)); }

.nc-flag { display: grid; grid-template-columns: repeat(3, 1fr); inset: 0; width: 100%; height: 100%; }
.nc-flag i { display: block; margin: 40% 0 26%; transform-origin: left center; }
.nc-flag i:nth-child(1) { background: #3c8d5a; border-radius: 10px 0 0 10px; margin-left: 20%; }
.nc-flag i:nth-child(2) { background: #fff; }
.nc-flag i:nth-child(3) { background: #cd3b32; border-radius: 0 10px 10px 0; margin-right: 20%; }
.ncard:hover .nc-flag i { animation: wave 0.9s ease-in-out infinite alternate; }
.ncard:hover .nc-flag i:nth-child(2) { animation-delay: 0.12s; }
.ncard:hover .nc-flag i:nth-child(3) { animation-delay: 0.24s; }
@keyframes wave { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes ping { 0% { opacity: 0.9; scale: 1; } 80%, 100% { opacity: 0; scale: 4.5; } }

.nc-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 11px;
  border: 1px solid rgba(240, 244, 234, 0.35);
  border-radius: 999px;
  background: rgba(10, 17, 11, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f0f4ea;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

/* the arrow, nested in the cut */
.nc-disc {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  background: var(--chip);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  transition: background 0.3s, color 0.3s, scale 0.35s var(--ease-snap), border-color 0.3s;
}
.nc-disc svg { width: 20px; height: 20px; transition: translate 0.3s var(--ease-out); }
.ncard:hover .nc-disc, .ncard:focus-visible .nc-disc {
  background: linear-gradient(180deg, #76961f, #4d6813);
  border-color: transparent;
  color: #fff;
  scale: 1.06;
}
.ncard:hover .nc-disc svg, .ncard:focus-visible .nc-disc svg { translate: 2px -2px; }

.ncard h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.ncard:hover h3, .ncard:focus-visible h3 { color: var(--accent); }
.ncard p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; text-wrap: pretty; }

.nc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 16px 0 0; list-style: none; }
.nc-tags li {
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1100px) { .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; } }
@media (max-width: 560px) { .ncards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .nc-art, .nc-disc, .nc-disc svg, .ncard h3 { transition: none !important; }
  .ncard:hover .nc-art { scale: 1; }
}

/* ---------- Languages (LOC) ---------- */

/* The language menu in the nav: a globe that opens a short list of links
   (no script: <details>), each language named in itself. */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.25));
  border-radius: 16px;
  background: var(--ground, #fff);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.lang-list a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.lang-list a:hover, .lang-list a:focus-visible { background: var(--chip); }
.lang-list a[aria-current="page"] { color: var(--accent); }

/* A headline word a language doesn't need (word order differs) takes no room. */
.display .w:empty { display: none; }
.display .line:not(:has(.w:not(:empty))) { display: none; }

/* Only translations say they are one (the privacy page). */
.translation-note:empty { display: none; }

/* Korean and Chinese: the bundled fonts have no Hangul or Han characters, so
   the system's own take over after them; capitals and tight tracking mean
   nothing in these scripts. */
:root:lang(ko) {
  --font: "Hanken Grotesk", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui, sans-serif;
  --display: "Expose", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}
:root:lang(zh-HK) {
  --font: "Hanken Grotesk", "PingFang HK", "Noto Sans HK", "Noto Sans CJK HK", "Microsoft JhengHei", system-ui, sans-serif;
  --display: "Expose", "PingFang HK", "Noto Sans HK", "Noto Sans CJK HK", "Microsoft JhengHei", sans-serif;
}
:root:lang(ko) body *,
:root:lang(zh-HK) body * {
  letter-spacing: 0 !important; /* every tracked heading at once */
  text-transform: none !important;
}
:root:lang(ko) .display, :root:lang(zh-HK) .display { line-height: 1.12; font-weight: 900; }
:root:lang(ko) h2, :root:lang(zh-HK) h2 { line-height: 1.2; }
/* Hangul and Han are full-width: on wide screens the headline a size smaller,
   so it tucks under the widget no further than the condensed Latin does. */
@media (min-width: 1001px) {
  :root:lang(ko) .display, :root:lang(zh-HK) .display { font-size: clamp(2.2rem, 3.4vw, 4.2rem); }
}