/* zhol site: the visual language of the TEF Ignition decks.
   Paper canvas, ink type, brick-red accent, sage and espresso slides, engraved halftone illustrations. */
:root {
  --paper: #f6f3ea;
  --card: #fbf9f3;
  --card-line: #e2dbcc;
  --rule: #d8d0c1;
  --ink: #352b28;
  --ink-2: #554b45;
  --muted: #675e57;     /* 4.5:1 or better on paper, cards and sage */
  --red: #a2311e;
  --red-btn: #b8392a;
  --red-track: #ecd2c8;
  --sage: #d2decc;
  --sage-card: #e3ebdd;
  --sage-ink: #2f5f45;
  --espresso: #382920;
  --espresso-2: #4a372d;
  --on-dark: #f3ede4;
  --on-dark-2: #cbbfb2;
  --red-on-dark: #f09580;   /* 4.9:1 on espresso-2, 6.1:1 on espresso (design audit, Nov 2026) */
  --msg-box: #efe7da;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font-sans);   /* one typeface for the whole product (VISION.md 3.3); the name stays for old rules */
  --wrap: 1160px;
  --r-s: 3px;      /* bars, tags, clippings */
  --r: 6px;        /* cards, buttons, inputs, prints */
  --r-l: 14px;     /* the phone-like message card */
  --dur: 160ms;        /* hover */
  --dur-card: 320ms;   /* cards, icons */
  --dur-in: 520ms;     /* entrances */
  --ease: cubic-bezier(.22, 1, .36, 1);        /* everything that moves or appears */
  --ease-color: cubic-bezier(.4, 0, .2, 1);    /* colour changes */
  --r-card: 24px;      /* cards and image frames */
  --r-field: 14px;     /* inputs, chat bubbles */
  --r-pill: 999px;     /* buttons and labels */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink-2); font-family: var(--font-sans); font-size: 17px; line-height: 1.5; letter-spacing: -0.006em;
  background-color: var(--paper);
  /* paper grain: two layers of noise, no visible tiling */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .38 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur) var(--ease-color), text-decoration-color var(--dur) var(--ease-color); }
a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--r-s); }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-sans); margin: 0; text-wrap: balance; }
p { margin: 0; }
b, strong { color: var(--ink); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.slide { padding-block: 84px 40px; position: relative; }
.slide.sage { background: var(--sage); }
.slide.dark { background: var(--espresso); color: var(--on-dark-2); }
.slide.dark h1, .slide.dark h2, .slide.dark h3, .slide.dark b { color: var(--on-dark); }
.slide.dark .kicker { color: var(--red-on-dark); }
.slide.dark a { color: var(--red-on-dark); }
.stack { display: flex; flex-direction: column; gap: 28px; }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.split.center { align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.grid > *, .split > * { min-width: 0; }

/* ------------------------------------------------------------------ header (deck tab bar) */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--paper); }
.top .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; min-height: 64px; border-bottom: 1px solid var(--rule); }
.top .logo { align-self: center; padding: 10px 0; }
.top .logo img { height: 30px; width: auto; }
.tabs { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { color: var(--muted); font-size: 15px; padding: 20px 0 16px; border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--dur) var(--ease-color), border-color var(--dur) var(--ease-color); }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--red); border-bottom-color: var(--red); font-weight: 500; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.tabs .sep { width: 1px; background: var(--rule); margin: 18px 0 14px; }
.tabs a.lang { position: sticky; right: 0; background: var(--paper); box-shadow: -16px 0 10px -4px var(--paper); align-self: center; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.tabs a.lang:hover { border-color: var(--ink); }
@media (min-width: 921px) { html[lang="it"] .tabs { gap: 20px; } }

/* ------------------------------------------------------------------ type */
.kicker { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--red); }
.kicker.green { color: var(--sage-ink); }
h1.title { font-size: clamp(42px, 6.6vw, 82px); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; }
h2.title { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; font-weight: 650; letter-spacing: -0.03em; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 640px; }
.small { font-size: 14px; line-height: 1.45; }
.muted { color: var(--muted); }
.serif { font-family: var(--font-serif); }
.big { font-size: clamp(40px, 5vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--red); font-variant-numeric: tabular-nums; }
.big.ink { color: var(--ink); }
.mid { font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; color: var(--red); font-variant-numeric: tabular-nums; }
.slide.dark .big, .slide.dark .mid { color: var(--red-on-dark); }

/* source line + slide number, as on every slide */
.foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.foot .pg { font-variant-numeric: tabular-nums; }
.slide.dark .foot { color: #a89a8c; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.slide.sage .card { background: var(--sage-card); border-color: #c4d2bd; }
.card .foot-note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--card-line); font-size: 13px; color: var(--muted); }
.slide.sage .card .foot-note { border-color: #c4d2bd; }
.panel { background: var(--espresso); color: var(--on-dark-2); border-radius: var(--r-card); padding: 24px 26px; }
.panel .kicker { color: var(--red-on-dark); }
.panel b, .panel h3 { color: var(--on-dark); }
.panel .mid, .panel .big { color: var(--red-on-dark); }
.panel.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.slide.dark .card { background: var(--espresso-2); border-color: #5b463a; color: var(--on-dark-2); }
.slide.dark .card b { color: var(--on-dark); }

/* buttons: deck style, small radius, brick red */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red-btn); color: #fff; font-weight: 600; font-size: 15px;
  min-height: 44px; padding: 11px 20px; border-radius: var(--r-pill); border: 0; cursor: pointer; font-family: var(--font-sans); transition: background-color var(--dur) var(--ease-color), color var(--dur) var(--ease-color), transform var(--dur) var(--ease); }
.btn:hover { background: var(--red); color: #fff; text-decoration: none; }
.btn { transition: background-color var(--dur) var(--ease-color), color var(--dur) var(--ease-color), transform var(--dur) var(--ease); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: rgba(53, 43, 40, 0.05); }
.slide.dark .btn { color: #fff; }
.slide.dark .btn.ghost { color: var(--on-dark); border-color: var(--on-dark); }
.slide.dark .btn.ghost:hover { background: rgba(243, 237, 228, 0.08); }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* numbered steps (Watch / Match / Alert) */
.steps { display: flex; flex-direction: column; gap: 24px; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; }
.step .n { font-size: 48px; line-height: 0.9; font-weight: 600; color: var(--red); letter-spacing: -0.03em; }
.step h3 { margin-bottom: 4px; }

/* WhatsApp alert card (slide 08) */
.wa { background: #fbfaf6; border: 1.5px solid var(--ink); border-radius: var(--r-l); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.wa .head { display: flex; align-items: center; gap: 12px; }
.wa .head img { width: 40px; height: auto; }
.wa .head b { font-size: 18px; }
.wa .head .when { margin-left: auto; color: var(--muted); font-size: 15px; }
.wa .box { background: var(--msg-box); border-radius: var(--r-field); padding: 16px 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.wa .box b { color: var(--ink); }
.wa .box .hl { color: var(--red); font-weight: 600; }
.wa .reply { align-self: flex-start; background: var(--red-btn); color: #fff; font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: var(--r-field); border: 0; }

/* press clipping cards (slide 04 / 06) */
.clip { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-s); padding: 16px 18px; box-shadow: 0 1px 0 rgba(53, 43, 40, 0.06); }
.clip .src { font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 6px; }
.clip p { font-family: var(--font-serif); font-size: 18px; line-height: 1.3; color: var(--ink); font-weight: 600; }
.clip.tilt-l { transform: rotate(-1.2deg); }
.clip.tilt-r { transform: rotate(1deg); }
.slide.dark .clip { background: #f4efe5; border-color: #e4dbcc; }
blockquote.q { margin: 0; padding: 0; }   /* no side stripes (VISION.md 3.4) */
blockquote.q p { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: var(--ink); font-weight: 500; }
blockquote.q cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--muted); }

/* bars drawn to scale (slide 05) */
.bar { display: flex; flex-direction: column; gap: 6px; }
.bar .lbl { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.bar .lbl b { font-weight: 600; }
.bar .lbl span:last-child { color: var(--red); font-weight: 600; white-space: nowrap; }
.bar .track { height: 10px; background: var(--red-track); border-radius: var(--r-s); overflow: hidden; position: relative; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--red); }
.bar .fill.soft { background: #d98d7c; }
.bar .note { font-size: 13px; color: var(--muted); }

/* tables (TEF deck slides 05, 08, 09) */
.tablewrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; min-width: 600px; }
table.t th { text-align: left; font-weight: 600; color: var(--sage-ink); padding: 10px 12px 8px 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
table.t td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tr.total td { font-weight: 650; color: var(--ink); border-bottom: 0; }
table.t td b { font-weight: 600; }

/* illustration placements */
.illus { position: relative; }
.illus img { width: 100%; height: auto; }
.illus.dark-edge img { border-radius: var(--r-card); -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15.5px; color: var(--ink); background: #fffdf8; border: 1px solid #cfc6b6; border-radius: var(--r-field); padding: 10px 12px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.out .line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.out .line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.out .line.best span { color: var(--red); font-weight: 600; }

/* nested market squares, drawn to area scale */
.nest { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border: 1.5px solid var(--ink); border-radius: var(--r-s); background: var(--card); }
.nest .sam { position: absolute; left: -1.5px; bottom: -1.5px; width: 28.4%; height: 28.4%; background: var(--red-track); border: 1.5px solid var(--red); border-radius: var(--r-s); }
.nest .som { position: absolute; left: -1.5px; bottom: -1.5px; width: 5.8%; height: 5.8%; background: var(--red); }
.nest .lbl { position: absolute; font-size: 14px; line-height: 1.3; color: var(--ink); }

/* positioning map */
.pmap { position: relative; aspect-ratio: 4 / 3; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); }
.pmap .ax { position: absolute; background: var(--rule); }
.pmap .ax.h { left: 5%; right: 5%; top: 50%; height: 1px; }
.pmap .ax.v { top: 7%; bottom: 7%; left: 50%; width: 1px; }
.pmap .t { position: absolute; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.pmap .dot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 13px; line-height: 1.25; text-align: center; max-width: 34%; color: var(--ink-2); }
.pmap .dot i { width: 10px; height: 10px; border-radius: 50%; background: #a99e93; display: block; }
.pmap .dot.us { color: var(--red); font-weight: 650; }
.pmap .dot.us i { width: 15px; height: 15px; background: var(--red); }

/* beta: lane grid */
.lanebar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lanebar .field { min-width: 240px; flex: 1 1 260px; }
.gridwrap { overflow-x: auto; }
.lanegrid { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; min-width: 640px; }
.lanegrid th { font-weight: 600; color: var(--muted); padding: 2px 4px; text-align: center; white-space: nowrap; }
.lanegrid th.day { text-align: left; color: var(--ink); padding-right: 10px; }
.lanegrid td { width: 44px; height: 30px; border-radius: var(--r-s); cursor: pointer; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(53, 43, 40, 0.08); }
.lanegrid td { transition: outline-color var(--dur) var(--ease-color); outline: 2px solid transparent; outline-offset: 0; }
.lanegrid td:hover, .lanegrid td.sel { outline-color: var(--ink); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 18px; height: 12px; border-radius: var(--r-s); vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(53, 43, 40, 0.1); }

/* load cards on beta */
.load .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.load .id { font-weight: 650; color: var(--ink); font-size: 14px; }
.status { font-size: 13px; font-weight: 600; white-space: nowrap; }
.status.h, .status.b { color: var(--red); }
.status.c { color: var(--sage-ink); }
.status.e { color: var(--ink); }
.opt { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--card-line); font-size: 14.5px; }
.opt.best { color: var(--ink); font-weight: 600; }
.opt span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 400; }
details summary { cursor: pointer; color: var(--red); font-size: 14px; margin-top: 4px; }
ul.tl { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; }
ul.tl li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-top: 1px solid var(--card-line); }
ul.tl .t { color: var(--muted); font-variant-numeric: tabular-nums; }
ul.tl .w { color: var(--red); font-weight: 600; }

/* bulletin list */
.bull { display: grid; grid-template-columns: 150px 44px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 15px; align-items: baseline; }
.bull .d { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bull .cc { font-weight: 700; color: var(--red); font-size: 13px; letter-spacing: 0.06em; }

/* tabs inside a section */
.seg { display: inline-flex; gap: 22px; border-bottom: 1px solid var(--rule); }
.seg button { background: none; border: 0; font: inherit; font-size: 15px; color: var(--muted); padding: 8px 0 10px; border-bottom: 3px solid transparent; cursor: pointer; }
.seg button[aria-selected="true"] { color: var(--red); border-bottom-color: var(--red); font-weight: 500; }

.hidden-field { position: absolute; left: -9999px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 4px; accent-color: var(--red); }

footer.site { padding-block: 40px 56px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
footer.site .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer.site img { height: 22px; width: auto; }


/* ------------------------------------------------------------------ dark-slide variants */
.slide.dark table.t th { color: var(--on-dark); border-bottom-color: var(--on-dark-2); }
.slide.dark table.t td { border-bottom-color: rgba(243, 237, 228, 0.14); }
.slide.dark table.t tr.total td { color: var(--on-dark); }
.slide.dark .bar .lbl span:last-child { color: var(--red-on-dark); }
.slide.dark .bar .track { background: rgba(243, 237, 228, 0.14); }
.slide.dark .bar .fill { background: var(--red-on-dark); }
.slide.dark .muted, .slide.dark .foot-note { color: #b3a597; }

/* ------------------------------------------------------------------ illustrations */
/* blended: the picture sits on the page paper (edges feathered in the file or by the mask) */
.art { display: block; width: 100%; height: auto; }
.art.mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
/* print: the picture as a card, for sage and espresso slides */
.print { margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--card-line); background: var(--card); box-shadow: 0 1px 0 rgba(53, 43, 40, 0.05), 0 12px 28px -18px rgba(53, 43, 40, 0.35); }
.slide.sage .print { border-color: #c4d2bd; }
.slide.dark .print { border-color: #5b463a; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.6); }
.print img, .print video { display: block; width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.slide.dark figcaption { color: #b3a597; }

/* ------------------------------------------------------------------ TEF: hero and question board */
.hero { padding-block: 40px 0; }
.hero .split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px; }
.hero h1.title { font-size: clamp(36px, 4.4vw, 58px); }
.hero .media { position: relative; }
.hero video, .hero .media img { display: block; width: 100%; height: auto; }
.qboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.qcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-card); color: var(--ink-2); text-decoration: none; transition: border-color var(--dur) var(--ease-color), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease-color); }
.qcard:hover { text-decoration: none; border-color: var(--red); box-shadow: 0 10px 22px -16px rgba(53, 43, 40, 0.45); }
@media (hover: hover) and (pointer: fine) { .qcard:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .qcard, .qcard:hover { transform: none; transition: none; } }
.qcard .n { font-size: 13px; font-weight: 600; color: var(--muted); }
.qcard .ask { font-family: var(--font-serif); font-size: 17px; line-height: 1.25; color: var(--ink); font-weight: 600; min-height: 2.5em; }
.qcard .fig { font-size: 30px; line-height: 1; font-weight: 650; letter-spacing: -0.03em; color: var(--red); font-variant-numeric: tabular-nums; margin-top: 6px; }
.qcard .ans { font-size: 13.5px; line-height: 1.4; }
.qcard .go { margin-top: auto; padding-top: 10px; font-size: 13.5px; color: var(--red); font-weight: 500; }

/* each answer opens with the jury's words */
.qhead { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.asked { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.asked .kicker { white-space: nowrap; }
.asked q { font-family: var(--font-serif); font-size: 19px; color: var(--ink-2); font-style: normal; quotes: "\201C" "\201D"; }
.slide.dark .asked q { color: var(--on-dark-2); }

/* TAM / SAM / SOM rows with squares drawn to area scale */
.tri { display: flex; flex-direction: column; }
.tri .row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); }
.slide.sage .tri .row { border-top-color: #b9c9b2; }
.tri .sq { display: flex; align-items: flex-end; justify-content: flex-start; height: 64px; }
.tri .sq i { display: block; background: var(--red); border-radius: 1px; }
.tri .sq i.tam { width: 64px; height: 64px; background: rgba(162, 49, 30, 0.14); border: 1.5px solid var(--red); }
.tri .sq i.sam { width: 18px; height: 18px; background: rgba(162, 49, 30, 0.45); }
.tri .sq i.som { width: 4px; height: 4px; }
.tri .lab { display: flex; flex-direction: column; gap: 2px; }
.tri .lab b { font-size: 15px; letter-spacing: 0.04em; }
.tri .v { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }

.persona { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); margin-bottom: 4px; }

/* plan cards */
.plan .name { font-weight: 650; color: var(--ink); font-size: 16px; }
.plan .price { font-size: 22px; font-weight: 650; color: var(--red); letter-spacing: -0.02em; line-height: 1.15; }
.plan.main { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

/* year cards with ARR bars to scale */
.year .bar .track { height: 8px; }

/* compact definition rows */
.rows { display: flex; flex-direction: column; }
.rows > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.rows > div > b { font-size: 15px; }
.slide.sage .rows > div { border-top-color: #b9c9b2; }
.slide.dark .rows > div { border-top-color: rgba(243, 237, 228, 0.14); }

/* four step captions aligned under the four cards of the strip illustration */
.strip-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.strip-steps h3 { font-size: 19px; margin-bottom: 4px; }
.strip-steps h3 span { color: var(--red); margin-right: 8px; }

/* the story teaser on the TEF page */
.teaser .card .big { font-size: clamp(34px, 3.6vw, 48px); }


/* ------------------------------------------------------------------ radar */
.rd-route { max-width: 460px; }
.more-rows { align-self: flex-start; background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: 14.5px;
  color: var(--red); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease-color); }
.more-rows:hover { text-decoration-color: currentColor; }
.slide.sage .more-rows { color: var(--sage-ink); }
.slide.dark .more-rows { color: var(--red-on-dark); }
.rd-route select { font-weight: 500; }
.rd-tools { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
.rd-week { font-size: 16px; font-weight: 600; color: var(--sage-ink); margin: 26px 0 10px; }
.rd-group { display: flex; flex-direction: column; gap: 10px; }
.rd-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 128px; gap: 20px; align-items: start; background: var(--sage-card);
  border: 1px solid #c4d2bd; border-radius: var(--r-card); padding: 16px 18px; }
.rd-when { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.rd-when b { font-variant-numeric: tabular-nums; }
.rd-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rd-body h3 { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.rd-head { color: var(--ink-2); overflow-wrap: anywhere; }
.rd-factors { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12.5px; line-height: 1.3; padding: 3px 8px; border-radius: 999px; background: rgba(53, 43, 40, 0.06); color: var(--ink-2); }
.rd-src a { color: var(--sage-ink); }
.rd-chance { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.rd-p { font-size: 30px; line-height: 1; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rd-row.vl .rd-p { color: var(--red); } .rd-row.un .rd-p { color: var(--muted); }
.rd-bar { width: 100%; height: 6px; background: rgba(53, 43, 40, 0.1); border-radius: var(--r-s); overflow: hidden; }
.rd-bar i { display: block; height: 100%; background: var(--ink-2); }
.rd-row.vl .rd-bar i { background: var(--red); } .rd-row.l .rd-bar i { background: #d98d7c; }
.formula { padding: 0; display: flex; flex-direction: column; gap: 6px; }
.formula p { font-family: var(--font-serif); font-size: 19px; color: var(--ink); }

.rd-plan { grid-column: 1 / -1; border-top: 1px dashed #b9c9b2; padding-top: 10px; }
.rd-plan > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; color: var(--ink-2); min-height: 32px; }
.rd-plan > summary::-webkit-details-marker { display: none; }
.rd-plan > summary::before { content: "+"; color: var(--sage-ink); font-weight: 600; display: inline-block; width: 1.1em; }
.rd-plan[open] > summary::before { content: "\2212"; }
.rd-plan > summary .more { color: var(--sage-ink); margin-left: auto; }
.rd-plan .inner { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.rd-costs { display: grid; gap: 6px; max-width: 620px; }
.rd-cost { display: grid; grid-template-columns: 210px minmax(0, 1fr) 80px; gap: 10px; align-items: center; font-size: 13.5px; }
.rd-cost b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-cbar { height: 8px; background: rgba(53, 43, 40, 0.08); border-radius: var(--r-s); overflow: hidden; }
.rd-cbar i { display: block; height: 100%; background: #a99e93; }
.rd-cost.keep .rd-cbar i { background: var(--red); }
.rd-cost.alert .rd-cbar i { background: var(--sage-ink); }
.rd-plan .save { color: var(--sage-ink); }
.rd-contacts summary { color: var(--sage-ink); }
.rd-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid #c4d2bd; }
.rd-contact > b, .rd-contact > span { grid-column: 1; }
.rd-contact p { grid-column: 1; color: var(--ink); }
.rd-copy { grid-column: 2; grid-row: 1 / span 3; padding: 8px 14px; font-size: 13px; min-height: 38px; }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.vs-col { border: 1px solid #5b463a; border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.vs-col h3 { font-size: 17px; }
.vs-col.us { background: var(--on-dark); color: var(--ink-2); border-color: var(--on-dark); }
.vs-col.us h3, .vs-col.us b { color: var(--ink); }
.vs-col.us .kicker { color: var(--red); }
.money { display: flex; flex-direction: column; gap: 8px; }
.money-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.money-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.money-stats .lbl { font-size: 13px; color: var(--on-dark-2); }
.money-stats .mid { font-size: clamp(24px, 2.6vw, 32px); color: var(--on-dark); overflow-wrap: anywhere; }
.money-stats .mid.save { color: #9fd0a9; }
.save-big { font-size: 22px; font-weight: 650; color: var(--sage-ink); letter-spacing: -0.02em; }
.slide.dark .field input { background: #fbf9f3; }

@media (max-width: 920px) {
  .split, .split.wide-left, .calc, .g2 { grid-template-columns: minmax(0, 1fr); }
  .g3, .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel.row { grid-template-columns: minmax(0, 1fr); }
  .slide { padding-block: 64px 32px; }
  .hero .split { grid-template-columns: minmax(0, 1fr); }
  .qboard, .strip-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .g3, .g4, .g5, .fields { grid-template-columns: minmax(0, 1fr); }
  .top .wrap { flex-direction: row; align-items: center; gap: 14px; min-height: 52px; }
  .top .logo { padding: 0; flex: none; }
  .top .logo img { height: 22px; }
  .tabs { gap: 14px; flex: 1; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 18px; }
  .tabs a[href^="#"], .tabs .sep, .m-hide { display: none; }
  .tabs a { padding: 15px 0 13px; font-size: 14px; }
  .tabs a.lang { order: -1; position: static; box-shadow: none; padding: 2px 8px; font-size: 11.5px; }
  .seg button { padding: 12px 0 14px; }
  .rd-copy { min-height: 44px; padding: 10px 14px; }
  .bull { grid-template-columns: 1fr; gap: 2px; }
  .foot { flex-direction: column; gap: 6px; }
  .qboard, .strip-steps { grid-template-columns: minmax(0, 1fr); }
  .qcard .ask { min-height: 0; }
  .rd-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .rd-when { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: baseline; }
  .rd-p { font-size: 24px; }
  .rd-cost { grid-template-columns: minmax(0, 1fr) 70px; }
  .rd-cost .rd-cbar { grid-column: 1 / -1; grid-row: 2; }
  .vs { grid-template-columns: minmax(0, 1fr); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tri .row { grid-template-columns: 64px minmax(0, 1fr); }
  .tri .v { grid-column: 2; }
  .hero { padding-top: 32px; }
}

/* survey: one question per screen, the mascot beside it */
[hidden] { display: none !important; }   /* .card and other flex boxes must still hide */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slide.sv { padding-block: 48px 40px; }
.sv-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.sv-title { font-size: clamp(36px, 5.4vw, 64px); }
.sv-stage { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 34px; max-width: 980px; }
.sv-mascot { position: sticky; top: 96px; }
/* owner motion system (brand/PRINCIPLES.md §6): one curve, 320 ms for things that move in, opacity and transform only */
.sv-mascot img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; display: block; transition: opacity 320ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1); }
.sv-mascot img.swap { opacity: 0; transform: translateY(10px); }
.sv-label { font-size: 14px; font-weight: 600; color: var(--red); }
.sv-label.ok { color: var(--sage-ink); }
.sv-link { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: inherit; font-size: 15px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sv-link:hover { color: var(--ink); }
.sv-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.sv-panel { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sv-road { display: none; height: 4px; background: repeating-linear-gradient(90deg, var(--rule) 0 14px, transparent 14px 22px); border-radius: 2px; position: relative; }
.sv-road i { display: block; height: 100%; width: 100%; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 520ms cubic-bezier(.22,1,.36,1); }
.survey fieldset.q { border: 0; margin: 0; padding: 0 0 26px; min-width: 0; }
.survey:not(.stepping) fieldset.q + fieldset.q { border-top: 1px solid var(--rule); padding-top: 22px; }
.survey .q legend, .sv-q-title { float: left; width: 100%; padding: 0; margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.survey .q legend + * { clear: both; }
.sv-q-title { float: none; }
.survey .q .n { display: block; font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 8px; }
.sv-why { margin: -8px 0 16px; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 520px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opts span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 16px; border: 1px solid var(--card-line); border-radius: 999px;
  background: var(--card); color: var(--ink-2); font-size: 15px; line-height: 1.3; transition: background var(--dur) var(--ease-color), border-color var(--dur) var(--ease-color), color var(--dur) var(--ease-color); }
.opts label:hover span { border-color: var(--ink-2); }
.opts input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.opts input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.opts.tall { display: grid; gap: 10px; max-width: 520px; }
.opts.tall span { width: 100%; min-height: 56px; padding: 12px 22px; border-radius: var(--r-pill); font-size: 18px; color: var(--ink); }
.opts.tall.multi span { font-size: 16px; min-height: 50px; }
.sv-nav { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.survey.stepping .sv-nav { min-height: 48px; }
.sv-error { margin: 0; padding: 12px 16px; border-radius: var(--r-field); background: var(--card); color: var(--red); font-size: 15px; max-width: 520px; }
.sv-follow { display: flex; flex-direction: column; gap: 16px; }
.sv-contact { max-width: 520px; }
.sv-done { display: flex; flex-direction: column; gap: 14px; outline: none; max-width: 560px; }
.sv-done p { margin: 0; font-size: 17px; color: var(--ink-2); }
.sv-privacy { margin-top: 40px; max-width: 720px; }
@media (max-width: 760px) {
  .slide.sv { padding-top: 32px; }
  .sv-stage { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 18px; }
  .sv-mascot { position: static; width: 170px; justify-self: start; margin-bottom: 2px; }
  .survey .q legend, .sv-q-title { font-size: 22px; margin-bottom: 14px; }
  .opts.tall span { font-size: 17px; min-height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .sv-mascot img, .sv-road i { transition: none; } }

/* disclosure: a soft plus/minus instead of the small triangle (VISION.md §5: no small arrows) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-block; width: 1.1em; font-weight: 600; text-align: left; }
details[open] > summary::before { content: "\2212"; }

/* Zholdas, the mascot, on empty and closing pages (404, thank you) */
.mascot-scene { justify-self: center; width: 100%; max-width: 420px; }
.mascot-scene img { width: 100%; height: auto; aspect-ratio: 5 / 4; display: block; }
@media (max-width: 920px) { .mascot-scene { max-width: 240px; justify-self: start; } }

/* standalone survey (/q): logo and language only, a welcome scene, then one question card (VISION.md 2.3) */
.q-top .wrap { align-items: center; min-height: 60px; }
.lang-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border: 1px solid var(--rule); border-radius: var(--r-pill); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color var(--dur) var(--ease-color); }
.lang-pill:hover { border-color: var(--ink); text-decoration: none; }
.slide.sv-intro { padding-block: 48px 64px; }
.sv-intro-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.sv-intro-text { display: flex; flex-direction: column; gap: 18px; }
.sv-intro-text .actions { margin-top: 6px; }
.sv-scene { margin: 0; border-radius: 28px; overflow: hidden; background: #e9e2d4; aspect-ratio: 4 / 3; }
.sv-scene video { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide.sv#sv-steps { padding-top: 40px; }
#sv-steps .sv-stage { margin-top: 0; max-width: 1040px; background: var(--card); border: 1px solid var(--card-line); border-radius: 28px; padding: 40px; }
@media (max-width: 920px) {
  .sv-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sv-intro-grid .sv-scene { order: -1; }
  .slide.sv-intro { padding-block: 20px 40px; }
  #sv-steps .sv-stage { padding: 24px 20px; border-radius: 24px; }
}

/* living scene in the home hero: Zholdas planning a route, framed like a photo */
.hero .scene-frame { border-radius: 28px; overflow: hidden; background: #2b2a33; aspect-ratio: 4 / 3; }
.hero .scene-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-intro .sv-title { font-size: clamp(36px, 4.2vw, 56px); }

/* numbers first, as bullets; the dense backup folds behind one line (owner, 8 Nov) */
.brief { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.brief li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.brief li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.brief b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.slide.dark .brief li { color: var(--on-dark-2); } .slide.dark .brief b { color: var(--on-dark); } .slide.dark .brief li::before { background: var(--red-on-dark); }
#rd-brief { margin-top: 6px; }
details.backup { border-top: 1px solid var(--rule); padding-top: 10px; }
details.backup > summary { font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
details.backup[open] > summary { margin-bottom: 14px; }
.slide.sage details.backup { border-top-color: #b9c9b2; } .slide.dark details.backup { border-top-color: rgba(243, 237, 228, 0.14); } .slide.dark details.backup > summary { color: var(--on-dark-2); }

/* home: eight answer blocks, each a tile with three bullets; the full answer is its own page (VISION.md 2.2) */
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.block { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 24px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); color: var(--ink-2); text-decoration: none; min-width: 0;
  transition: border-color var(--dur) var(--ease-color), transform var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease); }
.block h2 { font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.block .brief li { font-size: 15.5px; }
.block .open { margin-top: auto; padding-top: 6px; color: var(--red); font-weight: 600; font-size: 15px; }
.block:hover { text-decoration: none; border-color: var(--red); }
@media (hover: hover) and (pointer: fine) { .block:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(53, 43, 40, 0.45); } }
.block:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.slide.answer { padding-top: 56px; }
.answer-nav { padding-block: 8px 48px; }
.step-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 20px; }
/* story: a strip of what is coming, with its chance */
.news-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.news-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); min-width: 0; }
.slide.sage .news-card { background: var(--sage-card); border-color: #c4d2bd; }
.news-card .d { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-card h3 { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.news-card .p { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; }
.news-card .p b { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; color: var(--red); font-variant-numeric: tabular-nums; }
.news-card .p span { font-size: 13.5px; color: var(--muted); }
.news-card .bar { height: 6px; background: var(--red-track); border-radius: 3px; overflow: hidden; }
.news-card .bar i { display: block; height: 100%; background: var(--red); border-radius: 3px; }
@media (max-width: 760px) { .blocks { grid-template-columns: minmax(0, 1fr); } .block { padding: 22px 20px 20px; } }

/* radar map (assets/map.js): Europe with the events on it */
.map-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.map-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.map-frame { position: relative; aspect-ratio: 1000 / 900; background: var(--sage-card); border: 1px solid var(--card-line); border-radius: var(--r-card); overflow: hidden; }
.map-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-frame .land { fill: var(--card); stroke: #cbc1b0; stroke-width: 0.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill var(--dur-card) var(--ease-color), opacity 700ms var(--ease-color); }
.map-frame .land.t-vl { fill: #f4e2da; }
.map-frame .land.t-l { fill: #f6ebe5; }
.map-frame .land.t-po, .map-frame .land.t-un { fill: #efebe3; }
.map-frame .watch { fill: #a99e93; opacity: .7; }
.map-pins { position: absolute; inset: 0; }
.map-pin { font: inherit; position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; transition: opacity var(--dur-card) var(--ease-color), transform var(--dur-card) var(--ease); padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.map-pin i { display: block; border-radius: 50%; background: #a99e93; box-shadow: 0 0 0 2px var(--card), 0 1px 4px rgba(53, 43, 40, .25); transition: transform var(--dur) var(--ease); }
.map-pin.vl i { background: var(--red); } .map-pin.l i { background: #d98d7c; }
.map-pin.wide i { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px currentColor; color: rgba(53, 43, 40, .18); }
.map-pin .n { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.map-pin.po .n, .map-pin.un .n { color: var(--ink); }
.map-pin .lbl { display: none; position: absolute; left: calc(50% + 16px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--ink); background: rgba(251, 249, 243, .92); padding: 2px 8px; border-radius: 999px; pointer-events: none; }
.map[data-view="alps"] .map-pin .lbl, .map[data-view="close"] .map-pin .lbl { display: block; }
.map-wlbl { display: none; position: absolute; white-space: nowrap; font-size: 11px; color: var(--muted); pointer-events: none; text-shadow: 0 0 3px var(--card), 0 0 3px var(--card); }
@media (min-width: 921px) { .map[data-view="alps"] .map-wlbl, .map[data-view="close"] .map-wlbl { display: block; } }
@media (hover: hover) and (pointer: fine) { .map-pin:hover i { transform: scale(1.25); } }
.map-pin[aria-pressed="true"] i { transform: scale(1.25); }
.map-pin[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--card), 0 0 0 4.5px var(--ink); }
.map-pin:focus-visible { outline: none; } .map-pin:focus-visible i { outline: 2px solid var(--ink); outline-offset: 3px; }
.map-pin.soon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: map-ping 2.4s var(--ease) infinite; pointer-events: none; }
@keyframes map-ping { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pin.soon::before { animation: none; } .map-pin i, .map-frame .land { transition: none; } }
.map-legend { gap: 8px 16px; }
.map-legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 0; background: #a99e93; }
.map-legend .dot.vl { background: var(--red); } .map-legend .dot.l { background: #d98d7c; }
.map-legend .dot.watch { width: 7px; height: 7px; opacity: .7; vertical-align: 1px; }
.map-legend .area { background: #f4e2da; border-color: #cbc1b0; }
.map-panel { gap: 14px; padding: 22px; }
.map-head h3 { font-size: 20px; letter-spacing: -0.015em; }
.map-head p { margin: 4px 0 0; }
.map-places, .map-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.map-places li + li, .map-evs li + li { border-top: 1px solid var(--card-line); }
.map-place { width: 100%; min-height: 52px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 14px; transition: background-color var(--dur) var(--ease-color); }
.map-place:hover { background: rgba(53, 43, 40, .04); }
.map-place > i { width: 12px; height: 12px; border-radius: 50%; background: #a99e93; }
.map-place.vl > i { background: var(--red); } .map-place.l > i { background: #d98d7c; }
.map-place > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.map-place b { font-weight: 600; font-size: 15.5px; }
.map-p { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vl > .map-p, .map-place.vl .map-p { color: var(--red); }
.map-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; }
.map-ev > div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--ink-2); }
.map-ev b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.map-ev a { margin-top: 4px; align-self: flex-start; }
.map-back { align-self: flex-start; }
.rd-row.flash { box-shadow: 0 0 0 2px var(--red); transition: box-shadow var(--dur-card) var(--ease-color); }
@media (max-width: 920px) { .map-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .map-frame { margin: 0 -8px; border-radius: 18px; } .map-panel { padding: 18px; } }

/* answer blocks open in place (assets/reveal.js): the question and one number first, the bullets on a tap */
.blocks { align-items: start; }
.block-hint { margin: 0 0 4px; font-size: 15px; color: var(--muted); }
.block-q { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.block-q .pm { display: none; }
.js .block { cursor: pointer; }
.js .block-q .pm { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--card-line); color: var(--red); font-size: 20px; font-weight: 500; line-height: 1; transition: background-color var(--dur) var(--ease-color), color var(--dur) var(--ease-color), transform var(--dur-card) var(--ease); }
.js .block-q .pm::before { content: "+"; }
.js .block.open .block-q .pm { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(180deg); }
.js .block.open .block-q .pm::before { content: "\2212"; }
.block-line { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.block-line b { color: var(--red); font-size: 19px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.block-more { display: grid; grid-template-rows: 1fr; }
.block-more > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.js .block-more { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-card) var(--ease), opacity var(--dur-card) var(--ease-color); }
.js .block.open .block-more { grid-template-rows: 1fr; opacity: 1; }
.js .block.open { border-color: var(--red); }
.block .open { margin-top: 2px; }

/* sections and cards rise in as they scroll into view (assets/reveal.js) */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-in) var(--ease-color), transform var(--dur-in) var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none; } .js .block-more, .js .block-q .pm { transition: none; } }
.js .block:not(.open) .block-more { margin-top: -14px; }

/* the map comes in behind a soft sweep, west to east, once (assets/map.js) */
.map-frame .watch { transition: opacity 600ms var(--ease-color); }
.map:not(.in) .map-frame .land, .map:not(.in) .map-frame .watch { opacity: 0; }
.map:not(.in) .map-pin, .map:not(.in) .map-wlbl { opacity: 0; }
.map:not(.in) .map-pin i { transform: scale(.4); }
.map.entering .map-frame .land, .map.entering .map-frame .watch, .map.entering .map-pin, .map.entering .map-pin i { transition-delay: var(--d, 0ms); }
.map.entering .map-pin, .map.entering .map-pin i { transition-duration: 640ms; }
.map-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none; opacity: 0; transform: translateX(-110%);
  background: linear-gradient(90deg, rgba(47, 95, 69, 0), rgba(47, 95, 69, .16) 72%, rgba(47, 95, 69, .28) 74%, rgba(47, 95, 69, 0) 76%); }
.map.entering .map-sweep { animation: map-sweep 1.6s var(--ease-color) forwards; }
@keyframes map-sweep { 0% { transform: translateX(-110%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(300%); opacity: 0; } }
/* week by week: what is outside the chosen week steps back */
.map-pin.off { opacity: .22; pointer-events: none; }
.map-pin.off i { transform: scale(.7); }
.map-pin.off .lbl { display: none !important; }
.map-time { display: flex; flex-direction: column; gap: 6px; }
.map-time-row { display: flex; align-items: center; gap: 16px; }
.map-play { flex: none; min-width: 168px; }
.map-range { flex: 1; min-width: 0; height: 44px; accent-color: var(--red); cursor: pointer; }
.map-week { color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.map-panel .map-places li, .map-panel .map-evs li { animation: map-li var(--dur-card) var(--ease) both; }
@keyframes map-li { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .map-sweep { display: none; } .map-pin, .map-frame .watch { transition: none; } .map-panel li { animation: none !important; } }
/* the small map on the survey's last screen */
.sv-map { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.sv-map .map-frame { border-radius: 18px; }
.sv-map .map-pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.sv-map .map-pin.wide i { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3.5px rgba(53, 43, 40, .18); }
.sv-map .map-pin.soon::before { width: 12px; height: 12px; margin: -6px 0 0 -6px; }

/* three steps, numbered (home: why not just have someone check) */
.steps .card { position: relative; }
.step-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 1px solid #c4d2bd; color: var(--sage-ink); font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }
.steps .card:last-child { border: 1.5px dashed #9fb596; background: transparent; }
.steps .card:last-child .step-n { background: var(--sage-ink); border-color: var(--sage-ink); color: #fff; }
.tag { align-self: flex-start; margin-top: auto; font-size: 13px; font-weight: 500; color: var(--sage-ink); background: var(--sage-card); border: 1px solid #c4d2bd; border-radius: 999px; padding: 4px 12px; }

/* design audit, November 2026 (docs/16-design-audit.md) */
/* the answer is the page's h1; it keeps the size the section titles had */
.answer h1.title { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; font-weight: 650; letter-spacing: -0.03em; }
/* a light card inside a dark slide keeps the light-page link colour */
.slide.dark .clip a { color: var(--red); }
.slide.dark .cc { color: var(--red-on-dark); }
/* touch targets of at least 44 px where a link stands on its own */
.top .logo { display: inline-flex; align-items: center; min-height: 44px; }
.tabs a.lang { position: relative; }
.tabs a.lang::after { content: ""; position: absolute; inset: -11px -6px; }
footer.site a { display: inline-block; padding-block: 13px; }
.block .open, .actions > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
details > summary { min-height: 44px; display: flex; align-items: center; }
/* the menu scrolls sideways on a phone: let its edge say so */
@media (max-width: 560px) { .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
/* the next-event ping says it three times, then rests */
.map-pin.soon::before { animation-iteration-count: 3; }
/* while the weeks play, the list changes every 1.5 s: no entrance animation for it */
.map.playing .map-panel li { animation: none; }
/* map points follow the view with transform (assets/map.js), not left/top */
.map-pin, .map-wlbl { left: 0; top: 0; will-change: transform; }
.map-pin { transition: opacity var(--dur-card) var(--ease-color); }
.field select, .field input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }

/* survey intro: what is on the roads right now (assets/survey.js), a reason to start */
.sv-now { margin-top: 10px; padding: 16px; border: 1px solid var(--card-line); border-radius: var(--r-card); background: var(--card); display: flex; flex-direction: column; gap: 12px; }
.sv-now-head { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.sv-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(162, 49, 30, .45); animation: sv-live 2.4s var(--ease) 3; }
@keyframes sv-live { 0% { box-shadow: 0 0 0 0 rgba(162, 49, 30, .45); } 100% { box-shadow: 0 0 0 8px rgba(162, 49, 30, 0); } }
.sv-now-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; }
.sv-now .map-frame { border-radius: 14px; }
.sv-now .map-pin { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.sv-now .map-pin i { width: 7px !important; height: 7px !important; }
.sv-now .map-pin.wide i { box-shadow: 0 0 0 1px var(--card), 0 0 0 2.5px rgba(53, 43, 40, .18); }
.sv-now .map-pin.soon::before { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.sv-now-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sv-now-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.sv-now-list li + li { border-top: 1px solid var(--card-line); }
.sv-now-list b { color: var(--ink); font-weight: 600; }
.sv-now-p { font-weight: 650; color: var(--red); font-variant-numeric: tabular-nums; }
.sv-now > .small { margin: 0; }
@media (prefers-reduced-motion: reduce) { .sv-live-dot { animation: none; } }
@media (max-width: 560px) { .sv-now-grid { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .sv-now { padding: 14px; } }

/* one question at a time (assets/steps.js): beta sign-up and feedback */
form.stepped .fields { grid-template-columns: minmax(0, 1fr); }
form.stepped .field { gap: 12px; }
form.stepped .st-on { animation: st-in var(--dur-card) var(--ease) both; }
@keyframes st-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
form.stepped .field > label, form.stepped > label.check { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
form.stepped > label.check { gap: 12px; }
form.stepped > label.check input { width: 22px; height: 22px; margin-top: 3px; flex: none; }
form.stepped .field input, form.stepped .field textarea { font-size: 17px; }
.st-head { display: flex; flex-direction: column; gap: 8px; }
.st-count { font-size: 13px; font-weight: 600; color: var(--sage-ink); font-variant-numeric: tabular-nums; }
.st-bar { height: 4px; border-radius: 999px; background: rgba(53, 43, 40, .1); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--red); transform-origin: left; transition: transform var(--dur-card) var(--ease); }
.st-choices { display: flex; flex-direction: column; gap: 10px; }
.st-choice { min-height: 52px; padding: 12px 18px; border: 1.5px solid var(--card-line); border-radius: 16px; background: var(--paper); font: inherit; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease-color), background-color var(--dur) var(--ease-color), transform var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .st-choice:hover { border-color: var(--red); } }
.st-choice:active { transform: scale(.98); }
.st-choice[aria-checked="true"] { border-color: var(--red); background: #f7e4dd; }
.st-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.st-nav .st-back { order: -1; margin-right: auto; }
.st-nav .sv-link { min-height: 44px; }
.st-error { margin: 0; font-size: 14px; color: var(--red); }
.slide.sage form.stepped .st-choice { background: var(--card); }
@media (prefers-reduced-motion: reduce) { form.stepped .st-on { animation: none; } .st-bar i { transition: none; } }