/* ============================================================
   PLAN4ME CONTENT PAGES
   A shared design system for the itinerary, hub, guide and blog
   templates. Extracted from the Claude Design mockups.

   HOW TO USE THIS FILE
   1. Load this file alone. Do not load styles.css with it.
      Both files define a reset, so together they conflict.
   2. Every value in the mockups is a token or a class here.
      A template must not use an inline style.
   3. Class prefix: c- (content).

   RULES THIS FILE KEEPS
   1. One hairline: 1px solid var(--c-line).
   2. Panels use radius 24px. Cards use radius 20px.
   3. A dark button carries the inset bottom shadow.
   4. Every multi column grid becomes one column on a phone.
   5. A wide block scrolls inside itself. The page never
      scrolls sideways.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --c-page: #fafafa;        /* the page */
  --c-white: #ffffff;       /* a card */
  --c-panel: #ededed;       /* a tint panel, an image placeholder */
  --c-panel-soft: #f6f6f6;  /* a table head, a row hover */
  --c-track: #f0f0f0;       /* a switch track */
  --c-dark: #242424;        /* the dark panel */

  /* ---- ink ---- */
  --c-ink: #171717;         /* primary text */
  --c-prose: #363636;       /* long text in an article */
  --c-body: #5c5c5c;        /* body text in a card */
  --c-muted: #a3a3a3;       /* decorative labels only: fails contrast for copy and links */
  --c-faint: #c4c4c4;       /* counts and dates */

  /* ---- lines ---- */
  --c-line: #ededed;        /* the hairline */
  --c-line-soft: #f0f0f0;   /* a hairline inside a card */
  --c-line-input: #e6e6e6;  /* an input border, a map grid line */
  --c-line-strong: #c9c9c9; /* a hover border */
  --c-dot: #d4d4d4;         /* the separator dot */
  --c-dot-soft: #e0e0e0;    /* a separator dot inside a card */

  /* ---- accent: forest green, the only colour ---- */
  --c-accent: #1b5e20;
  --c-accent-tint: #eef3f0;
  --c-accent-soft: #8fbf95; /* the accent on the dark panel */

  /* ---- on the dark panel ---- */
  --c-on-dark: #ffffff;
  --c-on-dark-body: rgba(255, 255, 255, 0.72);
  --c-on-dark-muted: rgba(255, 255, 255, 0.66);
  --c-on-dark-faint: rgba(255, 255, 255, 0.5);
  --c-on-dark-line: rgba(255, 255, 255, 0.12);
  --c-on-dark-fill: rgba(255, 255, 255, 0.1);
  --c-on-dark-fill-hi: rgba(255, 255, 255, 0.16);

  /* ---- weather chart grades ---- */
  --c-grade-good: #1b5e20;
  --c-grade-ok: #8f9a91;
  --c-grade-hard: #d9d9d9;

  /* ---- route map ---- */
  --c-map-grid: #e6e6e6;
  --c-map-water: #dde5df;
  --c-map-route: #171717;

  /* ---- fonts ---- */
  --c-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --c-serif: 'Instrument Serif', Georgia, serif;   /* display numerals only */
  --c-mono: 'Fragment Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- type scale, fluid ---- */
  --fs-display: clamp(44px, 7vw, 76px);   /* a page title on a hub */
  --fs-hero: clamp(38px, 6vw, 68px);      /* an h1 */
  --fs-h2: clamp(30px, 4vw, 48px);        /* a section title */
  --fs-h2-sm: clamp(26px, 3.2vw, 36px);   /* a small section title */
  --fs-h3: clamp(22px, 2.4vw, 26px);
  --fs-h4: 22px;
  --fs-h5: 20px;
  --fs-lead: clamp(19px, 2.2vw, 22px);
  --fs-body: 18px;
  --fs-17: 17px;
  --fs-16: 16px;
  --fs-15: 15px;
  --fs-14: 14px;
  --fs-13: 13px;
  --fs-12: 12px;
  --fs-numeral: clamp(48px, 6vw, 76px);
  --fs-numeral-sm: clamp(36px, 4.4vw, 56px);
  --fs-numeral-xs: clamp(32px, 3.4vw, 44px);

  /* ---- tracking ---- */
  --ls-tight: -0.05em;   /* headings */
  --ls-snug: -0.045em;   /* card titles */
  --ls-body: -0.025em;   /* body text */
  --ls-mono: 0;          /* mono never tracks in */

  /* ---- radius ---- */
  --r-panel: 24px;   /* the signature radius */
  --r-card: 20px;
  --r-sheet: 18px;
  --r-inner: 16px;
  --r-btn: 14px;
  --r-sm: 12px;
  --r-xs: 9px;
  --r-pill: 100px;

  /* ---- space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 56px;
  --s-11: 72px;
  --s-12: 88px;

  /* ---- shadow ---- */
  --sh-inset: inset 0 -4px 4px -2px rgba(0, 0, 0, 0.25);
  --sh-inset-sm: inset 0 -3px 3px -2px rgba(0, 0, 0, 0.25);
  --sh-pill: 0 1px 2px rgba(0, 0, 0, 0.08);
  --sh-lift: 0 12px 32px -4px rgba(0, 0, 0, 0.08);

  /* ---- layout ---- */
  --w-page: 1180px;    /* the main column */
  --w-foot: 1132px;    /* the footer, inside the same gutter */
  --w-read: 860px;     /* a question list */
  --w-prose: 760px;    /* an article column */
  --gutter: 24px;
  --h-header: 69px;    /* the sticky header */
  --h-daynav: 58px;    /* the sticky day bar */
  --scroll-offset: 100px;
}

/* An itinerary page carries two sticky bars, so anchors need
   a deeper offset. Put this class on the body. */
.c-page--itinerary {
  --scroll-offset: calc(var(--h-header) + var(--h-daynav) + 20px);
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--c-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

/* styles.css hovers with ink text and a green underline, and keeps the
   accent for small marks. Match it: a link darkens on hover, and the
   navigation classes below add the underline. */
a:hover {
  color: var(--c-ink);
}

ul,
ol {
  list-style: none;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

[id] {
  scroll-margin-top: var(--scroll-offset);
}

[hidden] {
  display: none !important;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */

.c-main {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) 0;
}

.c-section {
  margin: 0 0 var(--s-12);
}

.c-section--tight {
  margin-bottom: var(--s-11);
}

.c-section--last {
  margin-bottom: var(--s-8);
}

/* A section that starts with a rule above it. */
.c-section--ruled {
  padding-top: var(--s-10);
  border-top: 1px solid var(--c-line);
}

.c-section__head {
  max-width: 640px;
  margin: 0 0 var(--s-8);
}

.c-section__head--center {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* A head with a link on the right. */
.c-section__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin: 0 0 var(--s-7);
}

.c-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.c-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   4. TYPE
   ============================================================ */

.c-eyebrow {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}

.c-h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.c-h1--display {
  font-size: var(--fs-display);
}

.c-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.c-h2--sm {
  font-size: var(--fs-h2-sm);
  line-height: 1.05;
}

.c-h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
}

.c-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: var(--ls-snug);
}

.c-h5 {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.c-lead {
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--c-body);
  max-width: 52ch;
}

/* The universal reset zeroes every margin, and nothing else separates a
   heading from the lead paragraph under it, so the two rendered flush.
   The hero pair is exempt: c-hero__title carries its own margin. */
.c-h1 + .c-lead,
.c-h2 + .c-lead,
.c-h3 + .c-lead {
  margin-top: var(--s-4);
}

.c-text {
  font-size: var(--fs-17);
  color: var(--c-body);
}

.c-note {
  font-size: var(--fs-14);
  color: var(--c-body);
}

.c-mono {
  font-family: var(--c-mono);
  font-size: var(--fs-13);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
}
.c-accent { color: var(--c-accent); }
.c-strong { font-weight: 600; }

/* An underlined link inside running text. */
.c-link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A quiet link at the end of a section bar. */
.c-link--quiet {
  color: var(--c-body);
  font-size: var(--fs-17);
  text-decoration: none;
}

.c-link--quiet:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* A row of facts, separated by a dot. Put the dot in the markup:
   <span class="c-dot" aria-hidden="true">·</span> */
.c-metaline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--fs-17);
  color: var(--c-body);
}

.c-metaline--sm {
  font-size: var(--fs-15);
  gap: 10px;
}

.c-metaline--ruled {
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.c-dot { color: var(--c-dot); }
.c-dot--soft { color: var(--c-dot-soft); }

/* State we do not know. Never replace this with a guess. */
.c-unknown {
  color: var(--c-muted);
  font-style: normal;
}

/* Text the planner wrote, printed word for word. It does not
   follow the site writing style, and it is not Plan4Me copy, so
   it reads a shade quieter than the sentences around it. */
.c-quoted {
  color: var(--c-body);
}

/* ============================================================
   5. HEADER AND NAVIGATION
   ============================================================ */

.c-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: 14px var(--gutter);
  background: rgba(250, 250, 250, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

.c-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.c-brand:hover {
  color: var(--c-ink);
}

.c-glyph {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  background: var(--c-dark);
  color: var(--c-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: -0.02em;
  flex: none;
}

.c-header__nav {
  display: flex;
  gap: 26px;
  font-size: var(--fs-16);
  color: var(--c-body);
}

.c-header__nav a {
  color: var(--c-body);
}

.c-header__nav a:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.c-header__nav a[aria-current='page'] {
  color: var(--c-ink);
  font-weight: 600;
}

.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* The phone menu is a <details>, so it opens and closes with
   no JavaScript. It appears only on a phone. */
.c-menu {
  display: none;
}

.c-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  cursor: pointer;
  list-style: none;
}

.c-burger::-webkit-details-marker {
  display: none;
}

.c-burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: transform 0.3s;
}

.c-menu[open] .c-burger span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.c-menu[open] .c-burger span:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.c-menu__panel {
  position: fixed;
  inset: var(--h-header) 0 0 0;
  z-index: 55;
  background: rgba(250, 250, 250, 0.98);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
}

.c-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.c-menu__links a {
  font-size: clamp(28px, 9vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.c-menu__foot {
  position: absolute;
  bottom: var(--s-7);
  left: var(--gutter);
  font-size: var(--fs-14);
  color: var(--c-muted);
}

/* ---- breadcrumbs ---- */
.c-crumbs {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-14);
  color: var(--c-body);
}

.c-crumbs a:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.c-crumbs__here {
  color: var(--c-ink);
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-inner);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.c-btn--sm {
  height: 40px;
  padding: 0 18px;
  font-size: var(--fs-16);
  border-radius: var(--r-btn);
}

.c-btn--md {
  height: 44px;
  padding: 0 18px;
  font-size: var(--fs-17);
  border-radius: var(--r-btn);
}

.c-btn--lg {
  height: 56px;
  padding: 0 24px;
  border-radius: var(--r-card);
  font-weight: 600;
}

.c-btn--block {
  width: 100%;
}

/* The dark button. It always carries the inset bottom shadow. */
.c-btn--primary {
  background: var(--c-dark);
  color: var(--c-on-dark);
  box-shadow: var(--sh-inset);
}

.c-btn--primary:hover {
  background: #363636;
  color: var(--c-on-dark);
}

/* A plain text button beside the dark one. */
.c-btn--ghost {
  background: transparent;
  color: var(--c-body);
}

.c-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--c-ink);
}

/* On a tint panel. */
.c-btn--soft {
  background: rgba(0, 0, 0, 0.06);
  color: var(--c-ink);
}

.c-btn--soft:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--c-ink);
}

/* On the dark panel. */
.c-btn--light {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 600;
}

.c-btn--light:hover {
  background: #f0f0f0;
  color: var(--c-ink);
}

.c-btn--onDark {
  background: var(--c-on-dark-fill);
  color: var(--c-on-dark);
}

.c-btn--onDark:hover {
  background: var(--c-on-dark-fill-hi);
  color: var(--c-on-dark);
}

.c-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-actions--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--s-3);
}

/* ---- segmented control: cost tier, pace, sort ---- */
.c-seg {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--c-track);
  border-radius: var(--r-sm);
}

.c-seg--lg {
  border-radius: var(--r-btn);
}

.c-seg__btn {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-xs);
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--c-body);
  background: transparent;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.c-seg__btn:hover {
  color: var(--c-ink);
}

.c-seg__btn[aria-selected='true'],
.c-seg__btn[aria-pressed='true'] {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 600;
  box-shadow: var(--sh-pill);
}

/* The same control built from radio buttons. It works inside a
   form with no JavaScript, so use this one in the wizard. */
.c-seg__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

label.c-seg__btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.c-seg__radio:checked + .c-seg__btn {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 600;
  box-shadow: var(--sh-pill);
}

.c-seg__radio:focus-visible + .c-seg__btn {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}


/* ============================================================
   7. SURFACES AND GRIDS
   ============================================================ */

/* A white card with a hairline. The signature panel. */
.c-panel {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: var(--s-7);
}

.c-panel--card {
  border-radius: var(--r-card);
  padding: 26px;
}

.c-panel--flush {
  padding: 0;
  overflow: hidden;
}

/* The grey panel. */
.c-tint {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: var(--s-7);
}

/* The dark panel. Text on it uses the on-dark tokens. */
.c-dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
  border-radius: var(--r-panel);
  padding: var(--s-8);
}

.c-dark .c-eyebrow,
.c-dark .c-note,
.c-cta--dark .c-note {
  color: var(--c-on-dark-faint);
}

.c-dark .c-lead,
.c-dark .c-text {
  color: var(--c-on-dark-muted);
}

.c-dark .c-mono {
  color: var(--c-on-dark-faint);
}

.c-dark a:hover {
  color: var(--c-accent-soft);
}

/* The hairline grid. Cells sit on a 1px line colour, which
   draws every divider with no border on the cell. */
.c-hairgrid {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.c-hairgrid--auto {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.c-hairgrid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.c-hairgrid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-hairgrid--rows {
  grid-template-columns: minmax(0, 1fr);
}

.c-hairgrid--card {
  border-radius: var(--r-inner);
}

.c-hairgrid__cell {
  background: var(--c-white);
  padding: 26px 24px;
}

.c-hairgrid__cell--page {
  background: var(--c-page);
}

.c-hairgrid__cell--sm {
  padding: 18px;
}

/* Inside the dark panel the cells draw the hairlines. A painted
   container showed through the tracks a partial last row leaves
   empty, and read as a missing extra cell. Each cell paints the
   1px gap to its right and below instead, so an empty track shows
   only the panel. */
.c-dark .c-hairgrid {
  background: transparent;
  border: 0;
  border-radius: var(--r-inner);
}

.c-dark .c-hairgrid__cell {
  background: var(--c-dark);
  padding: 22px 20px;
  box-shadow: 1px 1px 0 0 var(--c-on-dark-line);
}

/* Five day tiles. The default 210px minimum fits only four columns
   in the summary band, so the fifth tile wrapped alone. */
.c-summary .c-hairgrid--auto {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* A plain card grid. */
.c-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
}

.c-cards--fill {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s-5);
}

.c-cards--wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-5);
}

/* A two column split. */
.c-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
}

.c-split--wideLeft {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-9);
}

.c-split--wideRight {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-9);
}

.c-split--end {
  align-items: end;
}

.c-split--center {
  align-items: center;
}

.c-split--start {
  align-items: start;
}

/* A figure inside a hairline grid cell. */
.c-figure__value {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-1);
}

.c-figure__label {
  font-size: var(--fs-15);
  color: var(--c-muted);
}

/* ============================================================
   8. MEDIA
   ============================================================ */

.c-media {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--c-panel);
  position: relative;
}

.c-media--card {
  border-radius: var(--r-card);
}

.c-media img,
.c-media video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Cap the height, because the photographs are not one shape.
   Six of the nine are portrait. */
.c-media--hero img { height: clamp(300px, 34vw, 470px); }
.c-media--h340 img { height: 340px; }
.c-media--h420 img { height: 420px; }

/* The mono chip on a photo. */
.c-media__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(23, 23, 23, 0.72);
  color: var(--c-on-dark);
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
}

.c-media__tag--top {
  top: 10px;
  left: 10px;
  bottom: auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
}

.c-figcaption {
  font-size: var(--fs-14);
  color: var(--c-muted);
  margin-top: 10px;
}

/* Where no photograph exists yet. Say so, do not fake one. */
.c-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-3);
  background: var(--c-panel);
  color: var(--c-body);
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
}

/* ============================================================
   9. ITINERARY: HERO, SUMMARY, COSTS
   ============================================================ */

.c-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s-9);
  align-items: end;
  margin: 0 0 var(--s-11);
}

/* An itinerary hero has no figure: the planner below is the picture.
   One column, capped at a comfortable measure. */
.c-hero--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin-bottom: var(--s-9);
}

.c-hero__title {
  margin: 0 0 var(--s-6);
}

.c-hero__lead {
  margin: 0 0 var(--s-7);
}

.c-hero__meta {
  margin: 0 0 30px;
}

/* The dark day summary at the top of an itinerary. */
.c-summary {
  margin: 0 0 var(--s-6);
}

.c-summary__day {
  display: block;
}

.c-summary__n {
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
  color: var(--c-on-dark-faint);
  margin: 0 0 10px;
}

.c-summary__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-2);
}

.c-summary__line {
  font-size: var(--fs-15);
  color: var(--c-on-dark-muted);
}

/* The cost panel and its tier switch. */
.c-costs__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: 0 0 var(--s-6);
}

.c-costs__total {
  font-family: var(--c-serif);
  font-size: var(--fs-numeral);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-body);
  margin: 0 0 var(--s-2);
}

.c-costs__sub {
  font-size: var(--fs-17);
  color: var(--c-muted);
  margin: 0 0 var(--s-6);
}

.c-costs__foot {
  font-size: var(--fs-14);
  color: var(--c-muted);
  margin: var(--s-5) 0 0;
}

/* The method list beside the cost panel. */
.c-method {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.c-method__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.c-method__key {
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: var(--c-white);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  font-weight: 700;
}

.c-method__text {
  font-size: var(--fs-17);
  color: var(--c-prose);
}

/* A small white card inside the tint panel. */
.c-inset {
  background: var(--c-white);
  border-radius: var(--r-inner);
  padding: var(--s-5);
}

/* ============================================================
   10. ITINERARY: DAY NAVIGATION AND DAYS
   ============================================================ */

/* The sticky jump bar. These are plain anchors, so they work
   with no JavaScript. The script only marks the current day. */
.c-daynav {
  position: sticky;
  top: var(--h-header);
  z-index: 50;
  background: rgba(250, 250, 250, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin: 0 calc(var(--gutter) * -1) var(--s-9);
  padding: var(--s-3) var(--gutter);
}

.c-daynav__inner {
  max-width: var(--w-foot);
  margin: 0 auto;
  display: flex;
  gap: 26px;
  align-items: baseline;
  overflow-x: auto;
  scrollbar-width: none;
}

.c-daynav__inner::-webkit-scrollbar {
  display: none;
}

.c-daynav__label {
  font-size: var(--fs-14);
  color: var(--c-muted);
  white-space: nowrap;
}

.c-daynav__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-16);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.c-daynav__link:hover {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}

.c-daynav__link.is-current {
  border-bottom-color: var(--c-accent);
}

.c-daynav__n {
  font-weight: 600;
}

.c-daynav__area {
  color: var(--c-muted);
}

.c-daynav__end {
  margin-left: auto;
  font-size: var(--fs-16);
  color: var(--c-body);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.c-day {
  margin: 0 0 80px;
}

/* The metaline always stacks below the heading. A side by side
   layout wrapped only under a long day title, so the same line
   landed in two places on one page. */
.c-day__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  margin: 0 0 var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.c-day__label {
  font-family: var(--c-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}

.c-day__title {
  margin: 0 0 var(--s-3);
}

.c-day__summary {
  font-size: 19px;
  color: var(--c-body);
  max-width: 62ch;
}

.c-day__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-7);
  align-items: start;
}

/* ---- the stop list ---- */
.c-stops {
  display: flex;
  flex-direction: column;
}

/* A stop is a <details>. The detail text is in the HTML at all
   times, so a reader with no JavaScript loses nothing. */
.c-stop {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.c-stop__row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: var(--s-5);
  cursor: pointer;
  list-style: none;
}

.c-stop__row::-webkit-details-marker {
  display: none;
}

.c-stop__row:hover {
  background: var(--c-panel-soft);
}

.c-stop__when {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c-stop__time {
  font-family: var(--c-mono);
  font-size: var(--fs-15);
  letter-spacing: var(--ls-mono);
  font-weight: 400;
}

.c-stop__dur {
  font-size: var(--fs-13);
  color: var(--c-muted);
}

.c-stop__main {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.c-stop__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.c-stop__kind {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--c-muted);
}

.c-stop__blurb {
  font-size: var(--fs-16);
  color: var(--c-body);
}

.c-stop__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  text-align: right;
}

.c-stop__cost {
  font-size: var(--fs-16);
  font-weight: 600;
  white-space: nowrap;
}

.c-stop__hint {
  font-size: var(--fs-13);
  color: var(--c-body);
}

.c-stop__hint-close {
  display: none;
}

.c-stop[open] .c-stop__hint-open {
  display: none;
}

.c-stop[open] .c-stop__hint-close {
  display: inline;
}

/* No stop carries a photograph, so the note fills the width. */
.c-stop__detail {
  padding: 0 var(--s-5) var(--s-6);
}

.c-stop__why {
  font-size: var(--fs-17);
  color: var(--c-prose);
}

.c-stop__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--fs-15);
  color: var(--c-body);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
}

/* ---- the travel leg between two stops ---- */
.c-leg {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
  padding: 10px var(--s-5);
}

.c-leg__rail {
  display: flex;
  justify-content: center;
}

.c-leg__rail::before {
  content: '';
  width: 1px;
  min-height: 26px;
  height: 100%;
  background: var(--c-line-input);
}

.c-leg__text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-15);
  color: var(--c-body);
}

.c-leg__mode {
  font-family: var(--c-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-mono);
}

/* ---- the day route map ---- */
.c-routemap {
  position: sticky;
  top: calc(var(--h-header) + var(--h-daynav) + var(--s-1));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.c-routemap__figure {
  background: var(--c-panel);
  border-radius: var(--r-card);
  padding: 18px;
}

.c-routemap__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--s-3);
  font-size: var(--fs-15);
  font-weight: 600;
}

.c-routemap__area {
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
  color: var(--c-body);
  font-weight: 400;
}

.c-routemap__svg {
  width: 100%;
  height: auto;
  background: var(--c-page);
  border-radius: var(--r-btn);
  display: block;
}

.c-routemap__grid { stroke: var(--c-map-grid); }
.c-routemap__water { stroke: var(--c-map-water); }
.c-routemap__route { stroke: var(--c-map-route); }
.c-routemap__pin { fill: var(--c-map-route); }
.c-routemap__pinText { fill: #ffffff; }

.c-routemap__key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-3);
}

.c-routemap__keyRow {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: var(--fs-14);
  color: var(--c-prose);
}

.c-routemap__keyN {
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
}

/* ============================================================
   11. WAITLIST WIZARD
   ============================================================ */

.c-wizard {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: var(--s-9) var(--s-8);
  margin: 0 0 80px;
}

.c-wizard__head {
  max-width: 760px;
  margin: 0 0 var(--s-7);
}

.c-wizard__lead {
  font-size: var(--fs-h5);
  color: var(--c-body);
}

.c-wizard__panel {
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: var(--s-7);
}

.c-wizard__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-6);
  align-items: end;
}

.c-wizard__panel + .c-wizard__panel {
  margin-top: var(--s-4);
}

.c-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* The Pace control is a <fieldset> for accessibility (one legend naming a
   radio group). Browsers give fieldsets a default groove border, padding and
   margin that the universal reset does not touch, so without this the Pace
   box renders inside a stray grey frame that no other field has. */
fieldset.c-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.c-field__label {
  font-size: var(--fs-15);
  font-weight: 600;
}

/* One text field, two class names. js/waitlist.js looks for
   .wl-input by name, so that name cannot change, and the wizard
   field beside it is the same control. Both names share one rule
   rather than carry two identical copies of it. */
.c-input,
.wl-input {
  height: 52px;
  width: 100%;
  padding: 0 var(--s-4);
  border-radius: var(--r-btn);
  border: 1px solid var(--c-line-input);
  background: var(--c-page);
  font-size: var(--fs-17);
  color: var(--c-ink);
}

.c-input::placeholder,
.wl-input::placeholder {
  color: var(--c-muted);
}

/* The waitlist form itself. The wl- class names are the ones
   js/waitlist.js looks for, so do not rename them. */
.c-wizard__form {
  display: block;
}

.wl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
}

.wl-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.wl-submit {
  height: 52px;
  padding: 0 24px;
  border-radius: var(--r-inner);
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--sh-inset);
  transition: background 0.2s;
}

.wl-submit:hover {
  background: #363636;
}

/* The optional "where did you hear about us" answer. It sits under
   the email row rather than beside it, so the email field and the
   Join button keep the whole width and the question never competes
   with the conversion. Nothing here is required to submit. */
.wl-heard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-3);
  min-width: 0;
}

.wl-heard__label {
  font-size: var(--fs-14);
  color: var(--c-body);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-heard__opt {
  font-size: var(--fs-12, 12px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-line-input);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Height is deliberately below the 52px of .wl-input. The select is
   secondary to the email field and should not read as a second
   required control. */
.wl-heard__select {
  height: 44px;
  width: 100%;
  padding: 0 var(--s-3);
  border-radius: var(--r-btn);
  border: 1px solid var(--c-line-input);
  background: var(--c-page);
  font-size: var(--fs-15);
  color: var(--c-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  padding-right: 34px;
}

.wl-msg {
  font-size: var(--fs-14);
  color: var(--c-body);
  min-height: 1em;
}

.wl-msg.is-error {
  color: #b42318;
}

.wl-done {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--c-ink);
}

.wl-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  flex: none;
}

/* The same form on a dark surface: the dark panel and the dark
   CTA band both need the light button, or Join renders dark on
   dark and disappears. */
.c-dark .wl-input,
.c-cta--dark .wl-input {
  background: var(--c-on-dark-fill);
  border-color: transparent;
  color: var(--c-on-dark);
}

.c-dark .wl-input::placeholder,
.c-cta--dark .wl-input::placeholder {
  color: var(--c-on-dark-faint);
}

.c-dark .wl-heard__select,
.c-cta--dark .wl-heard__select {
  background-color: var(--c-on-dark-fill);
  border-color: transparent;
  color: var(--c-on-dark);
}

.c-dark .wl-heard__label,
.c-cta--dark .wl-heard__label {
  color: var(--c-on-dark-faint);
}

.c-dark .wl-heard__opt,
.c-cta--dark .wl-heard__opt {
  color: var(--c-on-dark-faint);
  border-color: var(--c-on-dark-fill);
}

.c-dark .wl-submit,
.c-cta--dark .wl-submit {
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 600;
  box-shadow: none;
}

.c-dark .wl-submit:hover,
.c-cta--dark .wl-submit:hover {
  background: #f0f0f0;
}

.c-dark .wl-msg,
.c-cta--dark .wl-msg {
  color: var(--c-on-dark-faint);
}

.c-dark .wl-done,
.c-cta--dark .wl-done {
  color: var(--c-on-dark);
}

/* ============================================================
   12. QUESTIONS
   ============================================================ */

.c-faq {
  max-width: var(--w-read);
  margin: 0 auto;
}

.c-faq__item {
  border-bottom: 1px solid var(--c-line);
  padding: var(--s-6) 0;
}

.c-faq__q {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}

.c-faq__a {
  font-size: var(--fs-body);
  color: var(--c-body);
  max-width: 66ch;
}

.c-faq__a + .c-faq__a {
  margin-top: 10px;
}

/* ============================================================
   13. CARD PATTERNS
   ============================================================ */

/* A plan card or a post card: image on top, text below. */
.c-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color 0.2s;
}

.c-card:hover {
  border-color: var(--c-line-strong);
  color: inherit;
}

.c-card__media {
  display: block;
  position: relative;
  background: var(--c-panel);
  height: 168px;
}

.c-card__media img {
  width: 100%;
  height: 168px;
  object-fit: cover;
}

.c-card__media .c-placeholder {
  height: 168px;
}

.c-card__media--tall,
.c-card__media--tall img,
.c-card__media--tall .c-placeholder {
  height: 170px;
}

.c-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1;
}

.c-card__kicker {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: var(--fs-13);
  color: var(--c-muted);
}

.c-card__cat {
  color: var(--c-accent);
  font-weight: 600;
}

.c-card__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: var(--ls-snug);
}

.c-card__meta {
  font-size: var(--fs-15);
  color: var(--c-body);
}

.c-card__foot {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--fs-15);
  color: var(--c-body);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-soft);
}

/* The featured post: text beside a tall image. */
.c-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  transition: border-color 0.2s;
}

.c-featured:hover {
  border-color: var(--c-line-strong);
  color: inherit;
}

.c-featured__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px var(--s-8);
}

.c-featured__title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}

.c-featured__excerpt {
  font-size: 19px;
  color: var(--c-body);
  max-width: 52ch;
}

.c-featured__cta {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--c-accent);
}

.c-featured__media {
  display: block;
  background: var(--c-panel);
  height: 100%;
  min-height: 300px;
}

.c-featured__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

/* ---- stacked hairline rows ---- */
.c-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.c-row {
  background: var(--c-white);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 150px;
  gap: var(--s-7);
  align-items: center;
  transition: background 0.2s;
}

.c-row:hover {
  background: var(--c-panel-soft);
  color: inherit;
}

.c-row--cost {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  padding: 26px;
}

.c-row__title {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

.c-row__sub {
  display: block;
  font-size: var(--fs-15);
  color: var(--c-muted);
  margin-top: 6px;
}

.c-row__body {
  font-size: var(--fs-17);
  color: var(--c-body);
}

.c-row__end {
  text-align: right;
}

.c-row__value {
  display: block;
  font-size: var(--fs-h5);
  font-weight: 600;
}

.c-row__note {
  display: block;
  font-size: var(--fs-14);
  color: var(--c-muted);
  margin-top: var(--s-1);
}

/* ---- a plain link list, two or more columns ---- */
.c-linklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 var(--s-7);
  border-top: 1px solid var(--c-line);
}

.c-linklist__item {
  border-bottom: 1px solid var(--c-line);
}

.c-linklist__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  font-size: var(--fs-body);
}

.c-linklist__count {
  font-size: var(--fs-14);
  color: var(--c-muted);
}

.c-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin: 0 0 var(--s-6);
}

.c-toolbar__count {
  font-size: var(--fs-17);
  color: var(--c-body);
}

.c-empty {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s-8);
  text-align: center;
}

.c-empty__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.c-empty__body {
  font-size: var(--fs-17);
  color: var(--c-body);
  margin: 0 0 18px;
}

/* ============================================================
   15. GUIDE: ANSWERS, CHART, AREAS
   ============================================================ */

.c-answer {
  display: block;
  background: var(--c-white);
  padding: 28px 26px;
}

.c-answer:hover {
  background: var(--c-panel-soft);
  color: inherit;
}

.c-answer__q {
  font-size: var(--fs-15);
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}

.c-answer__short {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin: 0 0 10px;
}

.c-answer__detail {
  font-size: var(--fs-16);
  color: var(--c-body);
}

/* ============================================================
   16. ARTICLE
   ============================================================ */

.c-post__head {
  max-width: var(--w-prose);
  margin: 0 0 44px;
}

.c-post__kicker {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  flex-wrap: wrap;
  font-size: var(--fs-14);
  color: var(--c-muted);
  margin: 0 0 var(--s-6);
}

.c-post__title {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  margin: 0 0 var(--s-6);
}

.c-post__standfirst {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.3;
  color: var(--c-body);
  margin: 0 0 var(--s-7);
}

.c-byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

.c-byline__mark {
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  background: var(--c-dark);
  color: var(--c-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-15);
  font-weight: 700;
  flex: none;
}

.c-byline__name {
  display: block;
  font-size: var(--fs-17);
  font-weight: 600;
}

.c-byline__note {
  display: block;
  font-size: var(--fs-15);
  color: var(--c-muted);
}

.c-postgrid {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: start;
}

.c-prose > * + * {
  margin-top: 22px;
}

.c-prose p {
  font-size: var(--fs-h5);
  line-height: 1.55;
  color: var(--c-prose);
  max-width: 66ch;
}

.c-prose h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  margin-top: var(--s-9);
}

/* Beats the flat 22px sibling gap above, which read as cramped under a
   34px heading. */
.c-prose h2 + * {
  margin-top: var(--s-6);
}

.c-prose h3 {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--c-ink);
  margin-top: var(--s-7);
}

.c-prose ul,
.c-prose ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 66ch;
  padding-left: 22px;
}

.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }

.c-prose li {
  font-size: var(--fs-h5);
  line-height: 1.55;
  color: var(--c-prose);
}

.c-prose a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-prose__section {
  margin: 0 0 var(--s-8);
}

/* The takeaway box at the top of an article. */
.c-callout {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s-7);
  margin: 0 0 44px;
}

.c-callout__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.c-callout__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-body);
  color: var(--c-prose);
}

.c-callout__mark {
  color: var(--c-accent);
  font-size: var(--fs-14);
  line-height: 1.5;
}

.c-dark .c-callout__mark {
  color: var(--c-accent-soft);
}

.c-quote {
  border-left: 2px solid var(--c-accent);
  padding: var(--s-1) 0 var(--s-1) 28px;
  margin: 0 0 44px;
}

.c-quote p {
  font-family: var(--c-serif);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
  max-width: none;
}

/* A simple table drawn with hairlines. */
.c-table {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
}

.c-table__head,
.c-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-5);
}

.c-table__head {
  padding: var(--s-3) 22px;
  background: var(--c-panel-soft);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--c-body);
}

.c-table__row {
  padding: 18px 22px;
  border-bottom: 1px solid var(--c-line-soft);
  align-items: baseline;
}

.c-table__row:last-child {
  border-bottom: 0;
}

.c-table__key {
  font-size: var(--fs-17);
  font-weight: 600;
}

.c-table__val {
  font-size: var(--fs-17);
  color: var(--c-body);
}

.c-table--4 .c-table__head,
.c-table--4 .c-table__row {
  grid-template-columns: 1.1fr 1.5fr 1.3fr 0.5fr;
}

/* The article sidebar. */
.c-aside {
  position: sticky;
  top: calc(var(--h-header) + var(--s-6));
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.c-aside__title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
}

.c-aside__block + .c-aside__block .c-aside__title {
  border-bottom: 0;
  padding-bottom: 0;
}

.c-aside__block + .c-aside__block {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}

.c-toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-toc a {
  font-size: var(--fs-16);
  color: var(--c-body);
}

.c-toc a:hover,
.c-toc a.is-current {
  color: var(--c-accent);
}

.c-asidelist {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-17);
  font-weight: 500;
}

/* ============================================================
   17. CLOSING BLOCKS
   ============================================================ */

.c-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
  border-radius: var(--r-panel);
  padding: var(--s-10) var(--s-9);
  margin: 0 0 var(--s-8);
}

.c-cta--dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.c-cta--tint {
  background: var(--c-panel);
}

.c-cta__lead {
  font-size: var(--fs-h5);
  max-width: 46ch;
  color: var(--c-body);
}

.c-cta--dark .c-cta__lead {
  color: var(--c-on-dark-muted);
}

.c-cta__title {
  margin: 0 0 var(--s-4);
}

/* A small dark strip inside an article. */
.c-strip {
  background: var(--c-dark);
  color: var(--c-on-dark);
  border-radius: var(--r-panel);
  padding: var(--s-7);
  margin: 0 0 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}

.c-strip__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-2);
}

/* ============================================================
   18. FOOTER
   ============================================================ */

.c-footer {
  border-top: 1px solid var(--c-line);
  padding: 64px var(--gutter) var(--s-8);
  margin-top: var(--s-8);
}

.c-footer__top {
  max-width: var(--w-foot);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}

.c-footer__brand {
  max-width: 300px;
}

.c-footer__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-3);
}

.c-footer__line {
  font-size: var(--fs-16);
  color: var(--c-muted);
}

.c-footer__cols {
  display: flex;
  gap: var(--s-10);
  flex-wrap: wrap;
}

.c-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.c-footer__h {
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0 0 6px;
}

.c-footer__col a {
  font-size: var(--fs-17);
  color: var(--c-body);
}

.c-footer__col a:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.c-footer__base {
  max-width: var(--w-foot);
  margin: 44px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--fs-14);
  color: var(--c-muted);
}

/* ============================================================
   19. RESPONSIVE
   Rule: every multi column grid becomes one column.
   ============================================================ */

@media (max-width: 1080px) {

  .c-postgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .c-aside {
    position: static;
    order: -1;
  }

  .c-day__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .c-routemap {
    position: static;
  }

  .c-routemap__figure {
    max-width: 520px;
  }
}

@media (max-width: 900px) {
  .c-hero,
  .c-split,
  .c-split--wideLeft,
  .c-split--wideRight,
  .c-cta,
  .c-featured,
  .c-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .c-hero {
    gap: var(--s-7);
    margin-bottom: var(--s-9);
  }

  .c-featured__body {
    padding: var(--s-7) var(--s-6);
  }

  .c-featured__media,
  .c-featured__media img {
    min-height: 220px;
    height: 220px;
  }

  .c-cta {
    padding: var(--s-8) var(--s-6);
  }

  .c-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-6);
  }

  .c-row__end {
    text-align: left;
  }

  .c-table__head,
  .c-table__row,
  .c-table--4 .c-table__head,
  .c-table--4 .c-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }

  .c-table__head {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --s-11: 56px;
    --s-12: 64px;
  }

  body {
    font-size: var(--fs-16);
  }

  .c-header {
    padding: 12px var(--gutter);
  }

  .c-header__nav,
  .c-header__actions .c-btn--ghost {
    display: none;
  }

  .c-menu {
    display: block;
  }

  .c-main {
    padding-top: var(--s-6);
  }

  .c-panel,
  .c-tint,
  .c-dark {
    padding: var(--s-6);
  }

  .c-wizard {
    padding: var(--s-7) var(--s-6);
  }

  .c-wizard__panel {
    padding: var(--s-6);
  }

  .c-wizard__fields {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  .wl-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .wl-submit {
    width: 100%;
  }

  /* Three fixed width segments overflowed the Pace track on a
     narrow phone, so the segments share the track instead. */
  .c-seg--lg .c-seg__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    justify-content: center;
  }

  .c-hairgrid--2,
  .c-hairgrid--auto,
  .c-hairgrid--auto-lg,
  .c-cards,
  .c-cards--fill,
  .c-cards--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-stop__row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-4);
  }

  /* The cost moves under the name, so the row still fits. */
  .c-stop__side {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    text-align: left;
  }

  .c-stop__detail {
    padding: 0 var(--s-4) var(--s-5);
  }

  .c-leg {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--s-3);
    padding: var(--s-2) var(--s-4);
  }

  .c-day {
    margin-bottom: var(--s-9);
  }

  .c-daynav {
    margin-bottom: var(--s-7);
  }

  .c-daynav__end {
    margin-left: var(--s-4);
  }

  .c-answer {
    padding: var(--s-5);
  }

  .c-answer__short {
    font-size: 26px;
  }

  .c-footer {
    padding: var(--s-9) var(--gutter) var(--s-7);
  }

  .c-footer__cols {
    gap: var(--s-7);
  }

  .c-actions .c-btn {
    width: 100%;
  }

  .c-btn--lg {
    height: 52px;
  }
}

/* ============================================================
   20. CONSENT BANNER
   ============================================================ */

/* js/analytics.js builds this banner on every page of the site, but
   the class names come from styles.css, which a content page does not
   load. Without this block the banner rendered as unstyled text at the
   bottom of the document on every itinerary, guide and blog page.

   Decline and Accept share one class on purpose. A refusal that is
   smaller, greyer or slower to reach than the acceptance does not count
   as a refusal under CNIL's 2025 guidance. Keep the two identical, and
   keep this block in step with the copy in styles.css. */

.consent {
  position: fixed;
  left: var(--s-6);
  bottom: var(--s-6);
  z-index: 200;
  width: min(420px, calc(100vw - var(--s-6) * 2));
  padding: var(--s-6);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-inner);
  box-shadow: var(--sh-lift);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.consent.is-open {
  opacity: 1;
  transform: translateY(0);
}

.consent__text {
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  color: var(--c-body);
}

.consent__text a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-top: var(--s-4);
}

.consent__btn {
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--c-sans);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--c-on-dark);
  background: var(--c-dark);
  box-shadow: var(--sh-inset);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.consent__btn:hover {
  background: #363636;
  box-shadow: var(--sh-inset-sm);
}

.consent__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  /* Compact on phones, in step with styles.css: the card must end below
     the hero's store badges at 390x844. Same copy, same two identical
     buttons; only padding, type size and spacing shrink. */
  .consent {
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    width: auto;
    padding: var(--s-4);
  }

  .consent__text {
    font-size: var(--fs-14);
    line-height: 1.43;
  }

  .consent__actions {
    margin-top: var(--s-3);
  }

  .consent__actions .consent__btn {
    flex: 1;
  }
}

/* ============================================================
   20b. THE DAY PLANNER (#planner on an itinerary page)

   Default layout is the no-script one: chips and map hidden,
   every day stacked in the rail. trip-map.js adds .tm--live and
   the panel becomes the app-like split: rail beside map, one
   day at a time. Never style the live state without checking
   the plain state still reads.
   ============================================================ */

.tm-hint {
  font-family: var(--c-mono);
  font-size: var(--fs-13);
  color: var(--c-body);
}

/* ---- day chips ---- */
.tm-chips {
  display: flex;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.tm-chips::-webkit-scrollbar {
  display: none;
}

.tm-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.tm-chip__sub {
  font-family: var(--c-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--c-body);
}

.tm-chip:hover {
  border-color: var(--c-ink);
}

.tm-chip[aria-pressed="true"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

.tm-chip[aria-pressed="true"] .tm-chip__sub {
  color: rgba(255, 255, 255, 0.72);
}

/* ---- the frame: rail + map ---- */
.tm--live .tm-frame {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  height: 640px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.tm--live .tm-rail {
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--c-line);
}

/* ---- one day in the rail ---- */
.tm-day {
  padding: var(--s-5);
}

.tm-day + .tm-day {
  border-top: 1px solid var(--c-line);
}

.tm-day__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 var(--s-4);
}

.tm-day__label {
  font-family: var(--c-mono);
  font-size: var(--fs-13);
  color: var(--c-body);
}

.tm-day__title {
  font-size: var(--fs-h4);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-wrap: balance;
}

.tm-day__meta {
  font-size: var(--fs-13);
  color: var(--c-body);
}

/* ---- stop cards ---- */
.tm-stops {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.tm-stop {
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  transition: border-color 0.15s;
}

.tm-stop.is-active {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 1px var(--c-ink);
}

.tm-stop__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.tm-stop__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--c-mono);
  font-size: 12px;
}

.tm-stop.is-active .tm-stop__n {
  background: var(--c-accent);
}

.tm-stop__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tm-stop__name {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.25;
}

.tm-stop__kind {
  font-size: var(--fs-13);
  color: var(--c-body);
}

.tm-stop__when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.tm-stop__time {
  font-family: var(--c-mono);
  font-size: var(--fs-13);
  color: var(--c-ink);
}

.tm-stop__dur {
  font-family: var(--c-mono);
  font-size: 11px;
  color: var(--c-body);
}

.tm-stop__more {
  border-top: 1px solid var(--c-line);
  padding: 10px 14px;
}

.tm-stop__more summary {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-body);
  cursor: pointer;
  list-style: none;
}

.tm-stop__more summary::-webkit-details-marker {
  display: none;
}

.tm-stop__more summary::after {
  content: " +";
}

.tm-stop__more[open] summary::after {
  content: " \2212";
}

.tm-stop__more p {
  margin-top: var(--s-2);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--c-body);
  max-width: 60ch;
}

/* ---- the map ---- */
.tm-map {
  position: relative;
  background: var(--c-track);
}

/* mapbox-gl.css loads after this sheet and its .mapboxgl-map rule sets
   position: relative at equal specificity, which collapsed this box to zero
   height. The doubled selector outranks it, and the explicit size survives
   either positioning. */
.tm-map__canvas,
.tm-map .tm-map__canvas.mapboxgl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tm-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-7);
  font-size: var(--fs-14);
  color: var(--c-body);
}

.tm-map--ready .tm-map__fallback {
  display: none;
}

.tm-map--failed .tm-map__canvas {
  display: none;
}

.tm-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-ink);
  border: 2px solid var(--c-page);
  color: var(--c-white);
  font-family: var(--c-mono);
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.tm-pin:hover {
  transform: scale(1.12);
}

.tm-pin.is-active {
  background: var(--c-accent);
  transform: scale(1.15);
}

.tm-foot {
  margin-top: var(--s-3);
  max-width: 66ch;
}

/* ---- narrow: map above, day below ---- */
@media (max-width: 900px) {
  .tm--live .tm-frame {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .tm--live .tm-map {
    order: -1;
    height: 46vh;
    min-height: 320px;
  }

  .tm--live .tm-rail {
    border-right: 0;
    border-top: 1px solid var(--c-line);
    max-height: none;
    overflow: visible;
  }
}

/* ============================================================
   20c. BLOG FLOW
   Components added for the blog post redesign: the pipeline
   diagram, the stat band, the source grid, the model versus
   code card, the cost estimate panel and the output card.
   Additions only. Nothing above the 20c banner changed except
   the named .c-prose spacing rules in section 16.
   ============================================================ */

/* ---- who acts: a small honest indicator. The accent dot marks
   a model step. The ink dot marks a code step. ---- */
.c-who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
  color: var(--c-body);
  white-space: nowrap;
}

.c-who::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ink);
  flex: none;
}

.c-who--model::before {
  background: var(--c-accent);
}

/* ---- the stat band: mono numerals on a hairline grid ---- */
.c-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.c-stats__cell {
  background: var(--c-white);
  padding: 22px 20px 20px;
}

/* Grouped with a .c-prose scope, because .c-prose p outweighs a
   bare class on font-size and colour. */
.c-stats__n,
.c-prose .c-stats__n {
  font-family: var(--c-mono);
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1;
  letter-spacing: var(--ls-mono);
  color: var(--c-ink);
  max-width: none;
}

.c-stats__t,
.c-prose .c-stats__t {
  margin-top: 10px;
  font-size: var(--fs-14);
  line-height: 1.4;
  color: var(--c-body);
}

/* ---- the pipeline diagram: numbered cards on a vertical rail ---- */
.c-flow,
.c-prose .c-flow {
  display: block;
  list-style: none;
  padding-left: 0;
  max-width: 640px;
}

.c-flow__step,
.c-prose .c-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  font-size: var(--fs-16);
}

.c-flow__step + .c-flow__step {
  margin-top: var(--s-4);
}

/* The rail: each step except the last draws the segment down to
   the next node, so the rail stops at the last node. */
.c-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 40px;
  bottom: calc(-1 * var(--s-4));
  width: 1px;
  background: var(--c-line-strong);
}

.c-flow__n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--c-mono);
  font-size: var(--fs-14);
  color: var(--c-ink);
}

.c-flow__card {
  display: block;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 18px 22px 20px;
}

.c-flow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.c-flow__name {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}

.c-flow__text {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-body);
  max-width: 52ch;
}

/* ---- the source grid: three cells, no order implied ---- */
.c-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.c-sources__cell {
  background: var(--c-white);
  padding: 20px;
}

.c-sources__k,
.c-prose .c-sources__k {
  font-family: var(--c-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
}

.c-sources__name,
.c-prose .c-sources__name {
  margin-top: 12px;
  font-size: var(--fs-17);
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}

.c-sources__text,
.c-prose .c-sources__text {
  margin-top: 6px;
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--c-body);
}

/* ---- the model versus code card ---- */
.c-vs {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  overflow: hidden;
}

.c-vs__head,
.c-prose .c-vs__head {
  padding: 20px 26px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  max-width: none;
}

.c-vs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
}

.c-vs__panel {
  background: var(--c-white);
  padding: 22px 26px 24px;
}

.c-vs__label,
.c-prose .c-vs__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-17);
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}

.c-vs__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ink);
  flex: none;
}

.c-vs__label--model::before {
  background: var(--c-accent);
}

.c-vs__list,
.c-prose .c-vs__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-left: 17px;
  list-style: none;
}

.c-vs__list li,
.c-prose .c-vs__list li {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-prose);
}

.c-vs__foot,
.c-prose .c-vs__foot {
  padding: 16px 26px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-15);
  color: var(--c-body);
  max-width: none;
}

/* ---- the cost estimate panel ---- */
.c-est {
  background: var(--c-panel);
  border-radius: var(--r-panel);
  padding: var(--s-6);
}

.c-est__rows {
  background: var(--c-white);
  border-radius: var(--r-inner);
  overflow: hidden;
}

.c-est__row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: 14px 18px;
}

.c-est__row + .c-est__row {
  border-top: 1px solid var(--c-line-soft);
}

.c-est__key {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--c-ink);
}

.c-est__val {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--c-prose);
}

.c-est__note,
.c-prose .c-est__note {
  margin-top: var(--s-5);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--c-body);
  max-width: 56ch;
}

/* ---- the output card at the end of the article ---- */
.c-outcard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  margin-top: 44px;
}

.c-outcard__body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c-outcard__title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  max-width: 18ch;
}

.c-outcard__note {
  margin-top: 12px;
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--c-body);
  max-width: 42ch;
}

.c-outcard__body .c-btn {
  margin-top: var(--s-6);
}

.c-outcard__media {
  align-self: stretch;
  min-height: 300px;
  background: var(--c-panel);
}

.c-outcard__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

/* ---- air between the callout eyebrow and its list ---- */
.c-callout .c-eyebrow {
  margin-bottom: var(--s-5);
}

/* ---- narrow screens ---- */
@media (max-width: 900px) {
  .c-outcard {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-outcard__body {
    padding: var(--s-7) var(--s-6);
  }

  .c-outcard__media,
  .c-outcard__media img {
    min-height: 220px;
    height: 220px;
  }

  .c-vs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .c-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-sources {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-est__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 12px 16px;
  }

  .c-flow__step,
  .c-prose .c-flow__step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--s-3);
  }

  .c-flow__n {
    width: 32px;
    height: 32px;
    font-size: var(--fs-13);
  }

  .c-flow__step:not(:last-child)::before {
    left: 15.5px;
    top: 32px;
  }

  .c-flow__card {
    padding: 16px 18px 18px;
  }
}

@media print {
  .c-outcard {
    display: none !important;
  }
}

/* ============================================================
   21. MOTION AND PRINT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .c-header,
  .c-menu,
  .c-daynav,
  .c-footer,
  .c-wizard,
  .c-cta,
  .c-strip,
  .c-toolbar,
  .consent {
    display: none !important;
  }

  /* Print the detail of every stop, not only the open ones. */
  .c-stop__detail {
    display: block !important;
  }

  .c-stop,
  .c-panel,
  .c-card,
  .c-day {
    break-inside: avoid;
  }

  body {
    background: #ffffff;
  }
}

/* ============================================================
   18. STORE LINKS (App Store + Google Play)
   The two official store badges and their one-line caption, in
   the right column of the dark closing band. They replaced the
   waitlist form on 6 September 2026 and the plain text buttons
   on 7 September 2026. Each link carries data-store, which
   js/analytics.js reads for the app_store_click event; the block
   carries data-store-cta for store_cta_view.

   Geometry. Apple's SVG (119.66 x 40) fills its box, so its
   visible badge is exactly --badge-h tall. Google's PNG
   (646 x 250) carries 41px of transparent padding on every side
   of a 564 x 168 badge, so its box is scaled by 250/168 and the
   padding is pulled back in with negative margins. The two
   visible badges then share one height, the row gap runs between
   the visible edges, and the focus ring hugs the artwork. Never
   recolour, filter or dim the artwork: the store guidelines
   forbid it. The same block is mirrored in styles.css.
   ============================================================ */
.store-cta {
  --badge-h: 50px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.store-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--s-3);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
}

.store-badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
  max-width: none;
}

.store-badge--android img {
  height: calc(var(--badge-h) * 250 / 168);
  margin: calc(var(--badge-h) * -41 / 168);
}

.store-badge:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.c-dark .store-badge:focus-visible,
.c-cta--dark .store-badge:focus-visible {
  outline-color: var(--c-on-dark);
}

.store-cta__note {
  font-size: var(--fs-15);
  color: var(--c-body);
  margin: 0;
}

.c-dark .store-cta__note,
.c-cta--dark .store-cta__note {
  color: var(--c-on-dark-muted);
}

@media (max-width: 480px) {
  .store-cta {
    --badge-h: 44px;
  }
}

/* ============================================================
   19. LAUNCH BANNER
   The launch strip above the sticky header. It sits in the
   flow, so the header starts below it and sticks once the strip
   has scrolled away; no other bar moves. js/launch.js runs the
   dismiss button. The inline guard in <head> adds
   .launch-banner-off when the visitor dismissed the strip
   earlier, so it never flashes. Mirrored in styles.css, where
   the strip is fixed above the fixed nav instead.
   ============================================================ */
html.launch-banner-off .launch-banner {
  display: none;
}

.launch-banner {
  position: relative;
  z-index: 61;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 56px;
  background: var(--c-dark);
  color: var(--c-on-dark);
  font-size: var(--fs-14);
  line-height: 1.43;
  letter-spacing: -0.01em;
  text-align: center;
}

.launch-banner__text {
  margin: 0;
}

.launch-banner__link {
  color: var(--c-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-on-dark-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.launch-banner__link:hover {
  color: var(--c-on-dark);
  text-decoration-color: var(--c-on-dark);
}

.launch-banner__close {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--c-on-dark);
}

.launch-banner__close:hover {
  background: var(--c-on-dark-fill);
}

.launch-banner__link:focus-visible,
.launch-banner__close:focus-visible {
  outline: 2px solid var(--c-on-dark);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .launch-banner {
    padding: 10px 48px;
  }
}

@media print {
  .launch-banner {
    display: none;
  }
}