/* Travel — LAN-only view of the Notion Bookings database.
   No external requests: system font stacks only, so it renders offline. */

:root {
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --public-display: "Playfair Display", Georgia, serif;
  --focus: #8F6220;
  --public-forest: #0f150e;
  --public-night-ink: #f4f1e6;
  --public-night-muted: #b9bfaf;
  --public-night-gold: #f1c66c;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Brand, straight off the logo. These are the colours as given; they are
     the source, not the usable set. Two of them cannot carry text: terracotta
     is 3.8:1 on cream and gold is 2.5:1, both under the 4.5:1 floor. So the
     tokens below derive text-safe versions and these stay for the places colour
     is decoration — rules, washes, the compass. Never set a text colour to
     --gold or --terracotta directly. */
  --sage-dark: #2C3E2E;
  --sage-soft: #7A9371;
  --terracotta: #B86842;
  --gold: #C89439;
  --cream: #FAF6EE;
  /* --gold, large-text-safe: raw --gold is 2.5:1 on cream, under the 3:1 floor
     even for large text (it was never meant to carry text, see the note
     above) — this is what a large numeral/heading uses instead when its
     "tone" happens to be gold. 3.6:1 on cream. Fixed (not scheme-aware) on
     purpose: only used on .hedge__day, which sits on plain --cream
     regardless of the visitor's OS color scheme — see that class's own note. */
  --gold-text: #A87A28;
  /* --gold/--sage-soft/--terracotta, NORMAL-text-safe and scheme-aware: for
     spots like .acct__n that sit on --surface (which DOES follow OS scheme)
     and need the full 4.5:1 normal-text floor, not just 3:1. Redefined under
     the dark query below — .acct__n--terra reuses --accent directly instead,
     since --accent (5.1:1 / 6.4:1) already clears 4.5 in both modes. */
  --gold-strong: #8F6220;           /*  4.9-5.2:1 vs --surface */
  --sage-strong: #4C6B45;           /*  5.9:1 vs --surface */
  /* --orange, NORMAL-text-safe: raw --orange (#b4622a) measures 4.34:1 on --surface,
     which clears nothing — it is a category hue, not a text colour, and axe caught it
     carrying the operations console's small-caps "warning" wording. Same derivation as
     the two above: darkened until it clears the 4.5:1 floor while still reading orange
     rather than terracotta (which --accent already owns). 5.4:1 vs --surface. */
  --orange-strong: #A3521F;
  /* --green, for text on a background this design tints with --ink. The operations
     console's band headers wash themselves with 6% --ink, which drops plain --green
     (#2e7d55) from 4.90:1 to 4.43:1 — under the floor, axe-confirmed. Same reasoning and
     same remedy as --accent-strong above. 5.6:1 on --surface, 5.1:1 on the tinted band. */
  --green-strong: #2A7350;

  --bg: var(--cream);
  --surface: #FFFCF5;
  --border: #E5DECF;
  --border-strong: #D3C9B4;
  --ink: var(--sage-dark);          /* 10.6:1 on cream */
  --ink-2: #3A423C;                 /*  9.6:1 — the logo's tagline colour */
  --ink-3: #69705F;                 /*  4.8:1 — darkened from the sage family
                                       so meta text clears AA, which the old
                                       grey (3.6:1) never did */
  /* Links: terracotta taken down until it clears 4.5:1 on cream. */
  --accent: #A2542F;                /*  5.1:1 */
  /* --accent, one step further: --accent's 5.1:1 is measured against pure
     cream, but a couple of components (the trial banner, .tag--new) tint
     their own background with --accent itself at low opacity, which shifts
     the effective background just enough that plain --accent drops under
     4.5:1 against it (axe-confirmed at 4.44 and 4.27 respectively). For text
     that sits on one of ITS OWN tinted backgrounds, not plain --bg. */
  --accent-strong: #96502D;         /*  4.7-4.9:1 on those tinted backgrounds */
  /* The call to action is the hedge itself, in both themes — a button that
     changes hue between light and dark reads as two different buttons. */
  --btn-bg: var(--sage-dark);
  --btn-ink: var(--cream);          /* 10.6:1 */

  --blue: #2f6fb3; --green: #2e7d55; --pink: #b0447a; --yellow: #9a7413;
  --purple: #6a4fa3; --brown: #7a5a3c; --orange: #b4622a; --red: #b23b3b; --gray: #7d7873;
  --teal: #1f7a6c;   /* Cruise — the one new hue; every other new category reuses one above */

  --radius: 10px;
  --shadow: 0 1px 2px rgba(44, 62, 46, .05), 0 8px 24px -12px rgba(44, 62, 46, .16);
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191F1A;                  /* the sage, taken most of the way down */
    --surface: #212823;
    --border: #313A32;
    --border-strong: #44503F;
    --ink: #ECEFE6;                 /* 14.4:1 */
    --ink-2: #B4BCAF;               /*  8.6:1 */
    --ink-3: #868F82;               /*  5.0:1 */
    --accent: #D98F63;              /*  6.4:1 — terracotta lifted instead of
                                       darkened, the mirror of the light rule */
    --accent-strong: #E09B70;       /*  5.0-6.1:1 on the same tinted backgrounds
                                       --accent-strong covers in light mode */
    --gold-strong: #E4B76A;         /*  8.1:1 vs dark --surface */
    --sage-strong: #8CB081;         /*  6.2:1 vs dark --surface */
    --orange-strong: #E8A06A;       /*  6.9:1 vs dark --surface — lifted rather than
                                       darkened, the mirror of the light rule */
    --green-strong: #7ECB9B;        /*  7.4:1 vs dark --surface, 6.6:1 on the tinted
                                       band — lifted, the mirror of the light rule */
    --btn-bg: var(--sage-soft);     /* same hedge green, lightened to carry
                                       dark text at 5.0:1 */
    --btn-ink: #191F1A;

    --blue: #6fa8dc; --green: #6cc08c; --pink: #dc8ab5; --yellow: #d4b256;
    --purple: #a98fd8; --brown: #bb9270; --orange: #e2915c; --red: #e07878; --gray: #9a948e;
    --teal: #4fb3a0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

/* Off-screen until focused, so a mouse user never sees it and a keyboard user
   tabbing in from the address bar always lands on it first — before the brand
   bar's own links, which is otherwise the first stop on every page. */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow);
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* The landing page's dusk closer breaks out to the full viewport width via
     the standard 100vw trick (site/public/style.css, .lp__closer). On a
     browser without overlay scrollbars, 100vw includes the scrollbar's own
     width, so that band would run a few pixels past the visible edge — this
     clips the resulting sliver instead of turning it into a stray horizontal
     scrollbar. Nothing on this site scrolls the page horizontally on
     purpose, so there is nothing legitimate for this to hide. */
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
img { max-width: 100%; display: block; }

main { max-width: 940px; margin: 0 auto; padding: 0 20px 64px; }
section + section { margin-top: 48px; }

/* --- Masthead --------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--border);
  /* The same faint laid-paper hatch the landing hero opens with (.lp__hero) —
     one hairline texture reused rather than a second one invented for the
     archive, so a page with real data still opens with the same signature a
     page with none did. Two very soft brand-colour washes ride under the
     hatch so the header isn't flat surface colour — kept faint enough that
     the hatch, not the colour, still reads first. */
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--sage-dark) 4%, transparent) 0 1px,
      transparent 1px 26px),
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%),
    radial-gradient(100% 100% at 0% 100%, color-mix(in srgb, var(--terracotta) 7%, transparent), transparent 55%),
    var(--surface);
  margin-bottom: 40px;
}
.masthead__bar {
  max-width: 940px; margin: 0 auto; padding: 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.masthead__bar + .masthead__bar { padding-top: 0; }
.masthead__bar--end { justify-content: flex-end; }
.masthead__bar > div { min-width: 0; flex: 1 1 320px; }

.masthead h1 {
  margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 600; line-height: .92; letter-spacing: -.025em; text-wrap: balance;
}
.masthead__purpose {
  margin: .55rem 0 0; max-width: 42ch; font-family: "Space Grotesk", var(--sans);
  font-size: 1rem; line-height: 1.55; color: var(--ink-2);
}
.travel-spark {
  margin: .2rem 0 0; align-self: flex-start; max-width: 18rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--foil-lo) 28%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--foil-hi) 92%, white) 0%,
      color-mix(in srgb, var(--foil-mid) 94%, white) 56%,
      color-mix(in srgb, var(--foil-lo) 86%, black) 100%);
  box-shadow: 0 1px 2px rgba(44, 62, 46, .06), 0 14px 28px -22px rgba(44, 62, 46, .28);
  color: var(--ink); font-family: "Space Grotesk", var(--sans); font-size: .95rem;
  font-weight: 700; line-height: 1.25; text-align: start; text-wrap: balance;
  transition: transform .18s ease, box-shadow .18s ease;
}
.travel-spark:hover { transform: translateY(-1px); }
.travel-spark:focus-visible {
  outline: 3px solid var(--accent-strong); outline-offset: 3px;
}
.masthead__passports .gate__body { margin: 0; }

.stats { display: flex; gap: 28px; margin: 0; }
.stats div { display: flex; flex-direction: column; }
.stats dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); font-weight: 600;
}
.stats dd { margin: 0; font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 600; }

.section__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); font-weight: 700; margin: 0 0 14px;
}

/* A sub-heading inside one .dash-section — the parser-efficiency section's
   "By provider" / "Top optimization opportunities" / etc. groupings. Smaller
   and less shouty than .section__label, which is the section's own title. */
.section__sublabel {
  font-size: 12px; color: var(--ink-3); font-weight: 700;
  margin: 18px 0 8px;
}

.trips-section[id] { scroll-margin-top: clamp(5.75rem, 12vh, 8.5rem); }
.trips-section .section__label {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 16px; padding: .42rem .8rem;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border-strong) 70%, var(--surface));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 92%, var(--gold) 8%),
    color-mix(in srgb, var(--surface) 100%, white));
  color: var(--ink); font-family: "Space Grotesk", var(--sans); font-size: .78rem;
  letter-spacing: .14em; line-height: 1.1;
  box-shadow: 0 1px 2px rgba(44, 62, 46, .04), 0 6px 18px -16px rgba(44, 62, 46, .28);
}

.trip-sections-nav {
  max-width: 940px; margin: 0 auto 26px; padding: 0 20px 10px;
  display: flex; align-items: center; justify-content: stretch; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent; scroll-padding-inline: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--gold) 4%), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border-strong) 72%, var(--surface));
  border-radius: 999px; box-shadow: var(--shadow);
}
.trip-sections-nav::-webkit-scrollbar { height: 8px; }
.trip-sections-nav::-webkit-scrollbar-track { background: transparent; }
.trip-sections-nav::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
}
.trip-sections-nav a {
  flex: 1 1 0; min-width: max-content; white-space: nowrap; text-align: center; text-decoration: none;
  font-family: "Space Grotesk", var(--sans); font-size: .92rem; font-weight: 600;
  line-height: 1.1; letter-spacing: .01em; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--border-strong) 55%, var(--surface));
  border-radius: 999px; padding: .72rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.trip-sections-nav a:hover {
  transform: translateY(-1px);
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, black);
}
.trip-sections-nav a[aria-current="location"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--accent), 0 1px 0 rgba(255, 255, 255, .5);
}
.trip-sections-nav a:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}

.trips-section--upcoming { position: relative; }
.trips-section--essentials {
  max-width: 940px;
  margin: 0 auto 28px;
  padding: 14px 16px 12px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 94%, var(--gold) 6%),
      color-mix(in srgb, var(--surface) 100%, white));
  border: 1px solid color-mix(in srgb, var(--border-strong) 68%, var(--surface));
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.masthead__essentials {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 14px 18px;
  align-items: start;
}
.masthead__essentialsPrimary,
.masthead__essentialsSide {
  display: grid; gap: 14px; align-content: start; min-width: 0;
}
.trips-section--essentials .masthead__bar {
  max-width: none; margin: 0; padding: 0;
  justify-content: flex-start; align-items: flex-start;
}
.trips-section--essentials .masthead__docs { gap: 14px 18px; }
.trips-section--essentials .masthead__forward {
  width: 100%; max-width: 680px; margin-top: 0; text-align: start;
  padding: 12px 14px;
}
.trips-section--essentials .masthead__forward .forward__address { justify-content: flex-start; gap: 8px; }
.trips-section--essentials .masthead__forward .section__label { margin-bottom: 8px; }
.trips-section--essentials .masthead__forward p {
  margin-bottom: 6px;
  font-size: .9rem;
  line-height: 1.35;
}
.trips-section--essentials .masthead__forward .forward__hint { color: var(--ink-3); font-size: .85rem; }
.trips-section--essentials .masthead__forward .forward__address code {
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 8px;
}
.trips-section--essentials .masthead__search {
  max-width: none; margin: 0; padding: 0;
}
.trips-section--essentials .masthead__search--end { padding: 0; }
.trips-section--essentials .search { max-width: none; width: 100%; }
.trips-section--essentials .search__input,
.trips-section--essentials .search__go { min-block-size: 44px; font-size: .95rem; }

.masthead:has(.masthead__purpose) { margin-bottom: 0; }
.trips-section > .section__label,
.trips-section__head > .section__label {
  margin-bottom: 1rem; color: var(--ink);
  font-family: "Playfair Display", var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em; text-transform: none;
  text-wrap: balance;
}
.trips-section--upcoming > .section__label,
.trips-section--upcoming > .trips-section__head > .section__label {
  font-size: clamp(1.9rem, 4vw, 2.55rem);
}
/* --- Forward-bookings callout ------------------------------------------ */

.forward {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.forward p { margin: 0 0 12px; color: var(--ink-2); max-width: var(--measure); }
.forward p:last-child { margin-bottom: 0; }
.forward__address {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.forward__address code {
  font-family: var(--mono);
  font-size: 15px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--ink);
  user-select: all;
  /* The address is one unbroken token (forward+<hex>@domain) — with no
     spaces to wrap on, it forced the whole page wider than the viewport
     on a phone until this let the browser break it mid-string instead. */
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Centered in the masthead, below the passports/stats/search row, rather
   than the full-width left-aligned card it is inside <main> on every other
   page that reuses .forward (there is no other caller today, but the split
   keeps this masthead-only centering from leaking onto one). */
.masthead__forward {
  max-width: 600px; width: calc(100% - 40px); margin: 24px auto 0;
  text-align: center;
}
.masthead__forward p { margin-left: auto; margin-right: auto; }
.masthead__forward .forward__address { justify-content: center; }

/* --- Upcoming trip cards ---------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--terracotta) 20%, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: visible;
  margin-bottom: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--featured {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow:
    0 1px 2px rgba(44, 62, 46, .05),
    0 18px 34px -20px color-mix(in srgb, var(--accent) 45%, rgba(0, 0, 0, .3));
}
.card--featured::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  border-top-left-radius: calc(var(--radius) - 1px);
  border-bottom-left-radius: calc(var(--radius) - 1px);
  background: linear-gradient(180deg, var(--foil-hi), var(--gold) 52%, var(--terracotta));
}
.card--featured .card__head {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 10%, transparent),
    transparent 62%);
}
.card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: calc(var(--radius) - 1px);
  border-top-right-radius: calc(var(--radius) - 1px);
}
.card__title {
  margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.45rem, 2.9vw, 2rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
}
.card__dates { margin: .2rem 0 0; color: var(--ink-2); font-family: "Space Grotesk", var(--sans); font-size: .9rem; }

.card__head-right {
  display: flex;
  align-items: flex-start;
  gap: 10px 12px;
  flex-wrap: wrap;
}
.card__pocket-btn {
  font-family: "Space Grotesk", var(--sans);
  font-size: .78rem;
  padding: .45rem .7rem;
  border-radius: 999px;
}
.card__view-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-family: "Space Grotesk", var(--sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.card__view-link:hover { color: var(--accent); text-decoration: underline; }
.card__view-link:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: -2px; }

.pills { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.pill {
  min-height: 30px;
  display: inline-flex; align-items: center;
  font-family: "Space Grotesk", var(--sans);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  padding: .42rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  color: var(--ink-2); white-space: nowrap;
}
/* Flights are always one hue (TYPE_HUE.flight = blue); "N stays" aggregates
   hotel/Airbnb/Vrbo, which don't share a single hue, so it stays on the
   generic warm pill above rather than claiming a colour that isn't true. */
.pill--flights {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: color-mix(in srgb, var(--blue) 78%, black);
  border-color: color-mix(in srgb, var(--blue) 22%, var(--border));
}
.pill--alert {
  background: color-mix(in srgb, var(--red) 15%, var(--surface));
  color: color-mix(in srgb, var(--red) 82%, black);
  border-color: color-mix(in srgb, var(--red) 22%, var(--border));
}

.chain {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
.chain__arrow { color: var(--ink-3); font-size: 12px; }

.iata {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em;
}

/* --- Destination panels (Premium country guidance) ----------------------
   One native <details> per country (site/destinationPanel.js), on the
   /trips upcoming card (collapsed, one open at a time via a shared `name`)
   and on the trip detail page (open briefing). Visual reference: Claude
   Design "Destination Flag Panel" — header bar with flag / name / status /
   passport line / chevron, a tier-tinted entry-requirements table, then a
   two-up grid of curated reference sections. Recreated with this app's own
   tokens: cream/sage/gold, Space Grotesk for interface text, fine rules
   rather than shadows. Every section is optional; none renders empty. */
.dest-panels { display: grid; gap: 12px; padding: 14px 20px 16px; }
.dest-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(44, 62, 46, .04);
}
.dest-panel__toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  min-height: 52px; padding: 12px 16px;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  color: var(--ink);
  cursor: pointer; list-style: none;
  font-family: "Space Grotesk", var(--sans);
}
.dest-panel__toggle::-webkit-details-marker { display: none; }
.dest-panel__toggle:hover { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.dest-panel__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.dest-panel[open] > .dest-panel__toggle { border-bottom: 1px solid var(--border); }
.dest-panel__flag { flex: none; font-size: 1.3rem; line-height: 1; }
.dest-panel__name { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
/* Status: glyph + words, never colour alone. The triangle marks both tiers
   that need something from the traveler; the words say which. */
.dest-panel__signal {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.dest-panel__signal[data-tone="no"] { color: var(--red); }
.dest-panel__signal[data-tone="warn"] { color: var(--orange-strong); }
.dest-panel__signal[data-tone="ok"] { color: var(--green-strong); }
.dest-panel__signal svg { flex: none; }
/* Wraps rather than truncates: a dual national's second passport is content,
   not decoration. */
.dest-panel__passport {
  margin-left: auto; min-width: 0; flex: 0 1 auto; text-align: right;
  color: var(--ink-3); font-size: .78rem; letter-spacing: .02em; line-height: 1.35;
}
.dest-panel__chevron {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink-2);
  transition: transform .18s ease;
}
.dest-panel[open] > .dest-panel__toggle .dest-panel__chevron { transform: rotate(180deg); }
.dest-panel__body {
  padding: 16px 18px 18px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  color: var(--ink);
  font-family: "Space Grotesk", var(--sans);
}
.dest-panel__body p { margin: 0; }
.dest-panel__body strong { font-weight: 600; color: var(--ink); }

/* Passport & entry requirements: the table that carries the tier. Tinted by
   the worst finding so the whole block reads as one verdict. */
.dest-entry {
  --dest-tone: var(--green-strong);
  --dest-tint: color-mix(in srgb, var(--dest-tone) 7%, var(--surface));
  --dest-line: color-mix(in srgb, var(--dest-tone) 22%, var(--border));
  border: 1px solid var(--dest-line); border-radius: 9px; background: var(--dest-tint); overflow: hidden;
}
.dest-entry[data-tier="action_needed"] { --dest-tone: var(--orange-strong); }
.dest-entry[data-tier="blocked"] { --dest-tone: var(--red); }
.dest-entry__head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--dest-line);
  background: color-mix(in srgb, var(--dest-tone) 11%, var(--surface));
  color: var(--dest-tone);
}
.dest-entry__title, .dest-ref__title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.dest-entry__zone {
  margin-left: auto; color: var(--ink-2);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.dest-row {
  display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); gap: 6px 14px; align-items: start;
  padding: 12px 14px;
}
.dest-row + .dest-row { border-top: 1px solid var(--dest-line); }
.dest-row--source { align-items: center; background: color-mix(in srgb, var(--dest-tone) 4%, var(--surface)); }
.dest-row__key { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.dest-row__label, .dest-ref__label {
  color: var(--ink-3); font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3;
}
.dest-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.dest-row__body p { font-size: .9rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.dest-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 5px;
  font-size: .76rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink-2);
}
.dest-badge[data-tone="ok"] { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green-strong); }
/* Tints are kept light enough that each tone's text still clears 4.5:1 on
   its own pill AND on the entry table's tier tint beneath it. */
.dest-badge[data-tone="warn"] { background: color-mix(in srgb, var(--orange) 11%, var(--surface)); color: var(--orange-strong); }
.dest-badge[data-tone="no"] { background: color-mix(in srgb, var(--red) 13%, var(--surface)); color: var(--red); }
.dest-badge svg { flex: none; }
.dest-link {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 24px;
  color: var(--accent-strong); font-size: .82rem; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px;
}
.dest-link:hover, .dest-link:focus-visible { border-bottom-color: var(--accent-strong); }
.dest-link svg { flex: none; }
.dest-cta {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 6px 12px; border-radius: 7px;
  background: var(--accent); color: var(--cream);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; text-decoration: none;
}
.dest-cta:hover { background: var(--accent-strong); color: var(--cream); }
.dest-cta svg { flex: none; }
.dest-link:focus-visible, .dest-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Schengen 90/180 meter — the one thing here with a scale worth drawing. */
.dest-meter { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.dest-meter__figures { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem; line-height: 1.4; }
.dest-meter__buffer { color: var(--green-strong); }
.dest-meter[data-status="caution"] .dest-meter__buffer { color: var(--orange-strong); }
.dest-meter[data-status="warning"] .dest-meter__buffer { color: var(--red); }
.dest-meter__track { position: relative; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--border-strong) 70%, var(--surface)); overflow: hidden; }
.dest-meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--green); transition: width .3s ease; }
.dest-meter[data-status="caution"] .dest-meter__fill { background: var(--orange); }
.dest-meter[data-status="warning"] .dest-meter__fill { background: var(--red); }
.dest-row__body .dest-meter__note { color: var(--ink-3); font-size: .78rem; letter-spacing: .02em; }

/* Reference sections: two-up where there is room, one column otherwise —
   never three, even on the full-width detail page, so a fourth section is
   not orphaned on its own row. Column and label widths are in rem so the
   grid follows text zoom instead of colliding with it. */
.dest-refs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18.75rem, calc(50% - 7px))), 1fr));
  gap: 14px; align-items: start; margin-top: 14px;
}
.dest-entry + .dest-refs { margin-top: 14px; }
.dest-ref { min-width: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); overflow: hidden; }
.dest-ref__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--ink-2); }
.dest-ref__title { color: var(--ink-2); }
.dest-ref__meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink); font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.dest-ref__dot { color: var(--border-strong); }
.dest-ref__tag {
  margin-left: auto; padding: 2px 7px; border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--ink-2);
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.dest-ref__rows { display: grid; }
.dest-ref__row { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 14px; }
.dest-ref__row + .dest-ref__row { border-top: 1px solid var(--border); }
.dest-ref__text { font-size: .84rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.dest-ref__text strong { font-size: .9rem; letter-spacing: -.01em; }
.dest-ref__note {
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  color: var(--ink-3); font-size: .8rem; line-height: 1.5; text-wrap: pretty;
}
.dest-plugs { display: flex; flex-wrap: wrap; gap: 9px; padding: 13px 14px 0; }
.dest-plugs:last-child { padding-bottom: 13px; }
.dest-plugs + .dest-ref__note { margin-top: 13px; }
.dest-plug {
  flex: 1 1 7.5rem; display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px;
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.dest-plug__type { font-size: .84rem; font-weight: 600; line-height: 1.2; }
.plug-svg { display: block; flex: none; }
.plug-svg__body { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.plug-svg__pin { fill: var(--ink); }
.plug-svg__pin--subtle { fill: var(--ink-3); }
.plug-svg__line { stroke: var(--ink); }
.dest-panel__disclaimer {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  color: var(--ink-3); font-size: .78rem; line-height: 1.5; text-wrap: pretty;
}
.dest-panel__disclaimer svg { flex: none; margin-top: 2px; }

/* The trip detail page's open briefing: full-width panels, more air. */
.dest-panels--briefing { padding: 0; gap: 18px; }

@media (max-width: 640px) {
  .dest-panels { padding: 12px 16px 14px; gap: 10px; }
  .dest-panel__toggle { padding: 10px 12px; gap: 6px 10px; }
  .dest-panel__passport { flex-basis: 100%; margin-left: 0; text-align: left; order: 5; }
  .dest-panel__chevron { margin-left: auto; }
  .dest-panel__body { padding: 12px 12px 14px; }
  .dest-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; }
  .dest-row__key { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .dest-ref__row { grid-template-columns: 1fr; gap: 3px; padding: 9px 12px; }
  .dest-ref__head, .dest-ref__note, .dest-plugs { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 400px) {
  .dest-panel__toggle { gap: 6px 8px; }
  .dest-entry__head { flex-wrap: wrap; }
  .dest-entry__zone { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dest-panel__chevron, .dest-meter__fill { transition: none; }
}

/* The single page-level upsell on /trips for a locked account, between the
   Upcoming and Everywhere sections — replaces what used to be a separate
   locked-note per gated feature (one per trip card was too many). Sized and
   centered to actually get noticed, with a real .btn--primary.btn--lg CTA
   rather than a text link, unlike the small inline notes it replaced. Gold,
   not red: this is an upsell, not an error. */
.upgrade-note {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  margin: 4px 0;
  padding: 26px 24px;
  background: color-mix(in srgb, var(--hd-gold, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hd-gold, var(--accent)) 35%, transparent);
  border-radius: var(--radius);
}
.upgrade-note__lede { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.upgrade-note__body { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 52ch; line-height: 1.5; }

/* --- Compact booking rows --------------------------------------------- */

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 104px auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 16px;
  border-left: 4px solid var(--hue, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--hue, transparent) 5%, transparent);
}
.row:last-child {
  border-bottom: 0;
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}
.card > :last-child {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

/* --- Car Rental Driving Guide Drawer --- */
.car-guide {
  grid-column: 2 / -1;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
}
.car-guide__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  width: fit-content;
}
.car-guide__toggle::-webkit-details-marker { display: none; }
.car-guide[open] > .car-guide__toggle {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.car-guide__hint { font-size: 10px; color: var(--ink-3); }
.car-guide__panel {
  margin-top: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius);
  color: var(--ink-2);
  line-height: 1.45;
}
.car-guide__section {
  margin-bottom: 8px;
}
.car-guide__heading {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.car-guide__text {
  margin: 0;
  font-size: 12px;
}
.car-guide__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-2);
  vertical-align: middle;
}
.car-guide__badge[data-tone="warn"] {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
}
.car-guide__badge[data-tone="info"] {
  background: color-mix(in srgb, var(--teal, var(--green)) 16%, transparent);
  color: var(--teal, var(--green));
}
.car-guide__badge[data-tone="ok"] {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.car-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.car-guide__label {
  font-weight: 600;
  color: var(--ink);
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}
.car-guide__grid p {
  margin: 0;
  font-size: 11.5px;
}
.car-guide__alerts {
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
.car-guide__alerts ul {
  margin: 4px 0 0 16px;
  padding: 0;
  font-size: 11.5px;
}
.car-guide__alerts li {
  margin-bottom: 2px;
}
/* --- Interstitial Flight Transit Seam (Option 1) ----------------------- */

.row--seam {
  display: flex;
  align-items: stretch;
  position: relative;
  grid-column: 1 / -1;
  padding: 0 20px 0 0;
  background: color-mix(in srgb, var(--ink) 2%, var(--surface));
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
  min-height: 28px;
}

.seam__connector {
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-shrink: 0;
}

.seam__stem {
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--border-strong), var(--border-strong) 4px, transparent 4px, transparent 8px);
}

.row--seam[data-stress="comfortable"] .seam__stem {
  background: repeating-linear-gradient(to bottom, var(--sage, #4A7A5C), var(--sage, #4A7A5C) 4px, transparent 4px, transparent 8px);
}

.row--seam[data-stress="tight"] .seam__stem {
  background: repeating-linear-gradient(to bottom, var(--gold, #C49746), var(--gold, #C49746) 4px, transparent 4px, transparent 8px);
}

.row--seam[data-stress="high_risk"] .seam__stem {
  background: repeating-linear-gradient(to bottom, var(--terracotta, #C45538), var(--terracotta, #C45538) 4px, transparent 4px, transparent 8px);
}

.seam__main {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
}

.seam__details {
  font-size: 11.5px;
}

.seam__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.12s ease;
}

.seam__summary::-webkit-details-marker { display: none; }

.seam__summary:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.seam__details[open] > .seam__summary {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.seam__summary-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.seam__glyph {
  font-size: 11px;
  color: var(--ink-3);
}

.seam__lead {
  font-size: 11.5px;
  color: var(--ink);
}

.seam__lead strong {
  font-family: var(--mono);
  letter-spacing: .03em;
}

.seam__dur {
  font-weight: 600;
  color: var(--ink-2);
  font-size: 11px;
}

.seam__sep {
  color: var(--ink-3);
  font-size: 10px;
}

.seam__hint {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-left: auto;
  text-decoration: underline dotted;
}

.tag--conn.tag--ok {
  background: #2E6B47;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.tag--conn.tag--warn {
  background: #966710;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.tag--conn.tag--alert {
  background: #A8321D;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.tag--baggage {
  background: #A8321D;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.seam__drawer {
  margin: 6px 0 6px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius);
  color: var(--ink-2);
}

.seam__flow-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.seam__flow-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.seam__flow-metrics {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
}

.seam__interline-note {
  font-size: 11px;
  font-weight: 600;
  color: #966710;
  margin-bottom: 6px;
}

.seam__steps {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.seam__step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.4;
}

.seam__stepMin {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-3);
  min-width: 26px;
  text-align: right;
}

.seam__stepTitle {
  color: var(--ink);
  font-weight: 600;
}

.seam__stepNote {
  color: var(--ink-2);
  margin-left: 4px;
}

.seam__baggage-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 11.5px;
  color: var(--ink);
}

/* Pocket Guide connection styles */
.pocket-conn {
  margin-top: 4px;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 8px;
  line-height: 1.2;
  border: 1px solid #111;
  background: #FFF;
}
.pocket-conn--high_risk {
  background: #000;
  color: #FFF;
}
.pocket-conn--tight {
  border: 1.5px dashed #000;
  font-weight: 700;
}
.pocket-conn__tag {
  display: block;
  font-weight: 700;
}
.pocket-conn__desc {
  display: block;
  font-size: 7.5px;
  opacity: 0.9;
}

/* --- Duration track ---------------------------------------------------- */
/* All bars in a card share one date scale, so a week-long stay reads as a
   wide bar and a dinner reservation as a single tick. */

.track {
  position: relative; height: 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.track__bar {
  position: absolute; top: 0; bottom: 0;
  min-width: 4px; border-radius: 4px;
  background: var(--bar, var(--gray));
}
/* Point-in-time events: a dot, not a bar — visually distinct from a span */
.track__bar--point {
  width: 7px; border-radius: 50%;
  margin-left: -3px;
  box-shadow: 0 0 0 2px var(--surface);
}

.track__bar[data-hue="blue"]   { --bar: var(--blue); }
.track__bar[data-hue="green"]  { --bar: var(--green); }
.track__bar[data-hue="pink"]   { --bar: var(--pink); }
.track__bar[data-hue="yellow"] { --bar: var(--yellow); }
.track__bar[data-hue="purple"] { --bar: var(--purple); }
.track__bar[data-hue="brown"]  { --bar: var(--brown); }
.track__bar[data-hue="orange"] { --bar: var(--orange); }
.track__bar[data-hue="red"]    { --bar: var(--red); }
.track__bar[data-hue="gray"]   { --bar: var(--gray); }
.track__bar[data-hue="teal"]   { --bar: var(--teal); }

.loc { font-weight: 600; }

.row[data-hue="blue"]   { --hue: var(--blue); }
.row[data-hue="green"]  { --hue: var(--green); }
.row[data-hue="pink"]   { --hue: var(--pink); }
.row[data-hue="yellow"] { --hue: var(--yellow); }
.row[data-hue="purple"] { --hue: var(--purple); }
.row[data-hue="brown"]  { --hue: var(--brown); }
.row[data-hue="orange"] { --hue: var(--orange); }
.row[data-hue="red"]    { --hue: var(--red); }
.row[data-hue="gray"]   { --hue: var(--gray); }
.row[data-hue="teal"]   { --hue: var(--teal); }

.row__icon {
  font-size: 13px; line-height: 1;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hue, var(--ink)) 18%, transparent);
}
.row__main { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: "Space Grotesk", var(--sans); font-size: .95rem; line-height: 1.35; }
.row__title { font-weight: 600; }
.row__meta {
  color: var(--ink-3); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  /* A flex item's default min-width is auto (its content's intrinsic size),
     which overrides max-width and defeats the ellipsis truncation above on
     narrow viewports — this is what let the row's overall width blow out. */
  min-width: 0;
}
.row__meta a { color: inherit; }
.row__meta a:hover { color: var(--accent); }

.route { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; }
.route .arrow { color: var(--ink-3); font-weight: 400; }
.row .iata { font-family: "Space Grotesk", var(--sans); letter-spacing: .02em; }
.row--flight .iata { font-size: 1em; letter-spacing: normal; }

.row__when {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: "Space Grotesk", var(--sans);
  font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.row__when time { font-weight: 600; }
.clock { color: var(--ink-3); font-size: 11.5px; }

.row__conf {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  min-width: 62px; text-align: right;
}

.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.tag--alert { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.tag--warn { background: color-mix(in srgb, var(--yellow) 20%, transparent); color: var(--yellow); }
/* color: --accent-strong not --accent — see its definition above; plain
   --accent on this tag's own tinted background measured 4.27:1, axe-confirmed. */
.tag--new { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-strong); }

/* Cabin class. Economy is the common case and stays quiet; the premium cabins
   are what you actually want to spot when scanning a trip. */
.tag--cabin {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink-2);
  letter-spacing: .06em;
}
.tag--cabin[data-cabin="business"] {
  border-color: color-mix(in srgb, var(--purple) 40%, transparent);
  background: color-mix(in srgb, var(--purple) 12%, transparent);
  color: var(--purple);
}
.tag--cabin[data-cabin="first"] {
  border-color: color-mix(in srgb, var(--yellow) 45%, transparent);
  background: color-mix(in srgb, var(--yellow) 15%, transparent);
  color: var(--yellow);
}
.tag--cabin[data-cabin="premium"] {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
}

.row--cancelled .route { text-decoration: line-through; opacity: .65; }

/* --- Stay Check-in / Check-out Links, Tags & Embracing Connectors --- */
.stay-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}
.stay-bracket {
  fill: none;
  stroke: var(--hue, var(--green));
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  filter: drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.15));
  transition: stroke-width 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.stay-bracket[data-hue="green"]  { --hue: var(--green); }
.stay-bracket[data-hue="pink"]   { --hue: var(--pink); }
.stay-bracket[data-hue="blue"]   { --hue: var(--blue); }
.stay-bracket[data-hue="yellow"] { --hue: var(--yellow); }
.stay-bracket[data-hue="purple"] { --hue: var(--purple); }
.stay-bracket[data-hue="brown"]  { --hue: var(--brown); }
.stay-bracket[data-hue="orange"] { --hue: var(--orange); }
.stay-bracket[data-hue="red"]    { --hue: var(--red); }
.stay-bracket[data-hue="gray"]   { --hue: var(--gray); }
.stay-bracket[data-hue="teal"]   { --hue: var(--teal); }

.stay-bracket.is-hovered {
  stroke-width: 4px;
  opacity: 1;
  filter: drop-shadow(-2px 0 6px color-mix(in srgb, var(--hue, var(--green)) 85%, transparent));
}

/* Car pick-up/drop-off bracket: same shape, mirrored onto the right margin
   — the shadow direction flips to match, so it still reads as "cast away
   from the card" instead of backwards. */
.stay-bracket--right {
  filter: drop-shadow(1px 0 2px rgba(0, 0, 0, 0.15));
}
.stay-bracket--right.is-hovered {
  filter: drop-shadow(2px 0 6px color-mix(in srgb, var(--hue, var(--brown)) 85%, transparent));
}

.row--stay {
  transition: background 0.15s ease, border-left-color 0.15s ease, box-shadow 0.15s ease;
}
.row--stay.is-hovered {
  background: color-mix(in srgb, var(--hue, var(--green)) 12%, transparent);
  border-left-color: var(--hue, var(--green));
}
.row--checkout {
  border-left-style: dashed;
}
.row--car {
  transition: background 0.15s ease, border-left-color 0.15s ease, box-shadow 0.15s ease;
}
.row--car.is-hovered {
  background: color-mix(in srgb, var(--hue, var(--yellow)) 12%, transparent);
  border-left-color: var(--hue, var(--yellow));
}
.row--dropoff {
  border-left-style: dashed;
}
.tag--stay {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
}
.tag--checkin {
  background: color-mix(in srgb, var(--hue, var(--green)) 18%, transparent);
  color: var(--hue, var(--green));
  border: 1px solid color-mix(in srgb, var(--hue, var(--green)) 35%, transparent);
}
.tag--checkout {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-2);
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.stay-link {
  color: var(--ink-3);
  text-decoration: none;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.15s ease;
}
.stay-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.empty { color: var(--ink-3); font-style: italic; }

/* --- Prior-trip archive ------------------------------------------------ */

.archive {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.archive__item {
  position: relative;
  display: block; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: visible;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.archive__item-link {
  display: block; color: inherit; text-decoration: none;
  border-radius: inherit; overflow: hidden;
}
.archive__item-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.archive__item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.archive__media {
  position: relative;
  height: 76px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.archive__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 26px;
  background: linear-gradient(to top, rgb(0 0 0 / 28%), transparent);
  pointer-events: none;
}
.archive__item img {
  width: 100%; height: 76px; object-fit: cover;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
/* Trips with no flight-map thumbnail got a flat grey tile; a warm diagonal
   wash off the site's own brand hues gives every archive card a bit of
   colour up top even without a real photo behind it. */
.archive__noimg {
  height: 76px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sage-soft) 38%, var(--surface)),
    color-mix(in srgb, var(--gold) 30%, var(--surface)) 55%,
    color-mix(in srgb, var(--terracotta) 32%, var(--surface)));
}
.archive__media > .archive__noimg {
  position: absolute;
  inset: 0;
  height: 76px;
}
.archive__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 76px;
  object-fit: cover;
}
.archive__credit {
  position: static;
  min-height: 0;
  padding: 1px 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  font: 12px/1.1 var(--sans);
  font-weight: 400;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 80%), 0 0 1px rgb(0 0 0 / 65%);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.archive__credit::-webkit-details-marker { display: none; }
.archive__credit:hover { text-decoration: underline; }
.archive__credit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* A Prior-trips row whose trip is still upcoming or active keeps its pocket guide. */
.archive__pocket { display: inline-flex; margin: 0 14px 12px; }
.archive__attribution {
  position: absolute;
  z-index: 3;
  right: 6px;
  top: 55px;
}
.archive__attribution-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(250px, calc(100vw - 40px));
  padding: 10px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  font: 12px/1.4 var(--sans);
}
.archive__attribution-panel a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.archive__attribution-panel [data-photo-author] {
  margin: 7px 0 0;
  color: var(--ink-2);
}
.archive__text { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.archive__name { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.archive__dates { font-size: 12px; color: var(--ink-3); }

.foot {
  max-width: 940px; margin: 0 auto; padding: 28px 20px 48px;
  color: var(--ink-3); font-size: 12px; border-top: 1px solid var(--border);
}
/* Trip pages run a narrower column than the archive (.mag, 760px) — the footer
   matches it and centres, the way the rest of the magazine layout does. */
.mag__foot { max-width: 760px; text-align: center; }

/* --- Magazine (completed trips) --------------------------------------- */

.mag { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }

.mag__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 8px;
}
.mag__nav .mag__back {
  margin: 0;
}

.mag__back {
  display: inline-block; margin: 24px 0 8px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; color: var(--ink-3);
}
.mag__back:hover { color: var(--accent); }

.mag__hero { margin: 8px 0 32px; }
.mag__map {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
@media (prefers-color-scheme: dark) {
  /* Maps are rendered on a light canvas — soften them so they sit in a dark page */
  .mag__map, .archive__item img { filter: invert(1) hue-rotate(180deg) saturate(.85) brightness(.95); }
}

.mag__titles { margin-top: 26px; text-align: center; }
.mag__emoji { font-size: 30px; display: block; margin-bottom: 10px; }
.mag__titles h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 6vw, 46px); line-height: 1.12;
  margin: 0; letter-spacing: -.01em; text-wrap: balance;
}
.mag__dates {
  margin: 12px 0 0; color: var(--ink-3);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}

.mag__lede {
  font-family: var(--serif); font-size: 19px; line-height: 1.62;
  color: var(--ink-2); margin: 0 auto 34px; max-width: var(--measure);
  text-wrap: pretty;
}
.mag__lede::first-letter {
  float: left; font-size: 3.1em; line-height: .84; padding: .06em .09em 0 0;
  font-weight: 600; color: var(--ink);
}

.mag__facts {
  display: flex; gap: 36px; justify-content: center; margin: 0 0 44px; padding: 18px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.mag__facts div { text-align: center; }
.mag__facts dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 700;
}
.mag__facts dd {
  margin: 4px 0 0; font-family: var(--serif); font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mag__itinerary { margin-top: 8px; }

/* Rail = one narrow column per concurrent span, then the icon column.
   --mark is the vertical centre of the icon, so lane dots line up with it. */
:root { --mark: 15px; --lane-w: 16px; --icon-w: 34px; }

.entry { display: grid; grid-template-columns: auto 1fr; gap: 16px; }

.entry__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--lanes, 0), var(--lane-w)) var(--icon-w);
}

/* Hairline running through the icon column, joining every entry in sequence */
.entry__rail::after {
  content: ""; position: absolute;
  top: calc(var(--mark) + 19px); bottom: 0;
  right: calc(var(--icon-w) / 2); width: 1px;
  background: var(--border);
}
.entry--last .entry__rail::after { display: none; }

.entry__icon {
  width: 30px; height: 30px; align-self: start; justify-self: center;
  display: grid; place-items: center; font-size: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hue, var(--gray)) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hue, var(--gray)) 30%, transparent);
}
.entry--start .entry__icon, .entry--end .entry__icon { border-width: 2px; }

/* --- Span lanes -------------------------------------------------------- */
/* The line begins at the opening entry, runs behind everything that happens
   in between, and terminates at the closing entry. */

.lane { position: relative; }
.lane::before {
  content: ""; position: absolute;
  left: 50%; margin-left: -1.5px; width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--lane, var(--gray)) 55%, transparent);
}
.lane--through::before { top: 0; bottom: 0; }
.lane--start::before   { top: var(--mark); bottom: 0; }
.lane--end::before     { top: 0; height: var(--mark); }

.lane--start::after, .lane--end::after {
  content: ""; position: absolute;
  left: 50%; top: var(--mark); transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lane, var(--gray));
  box-shadow: 0 0 0 2px var(--bg);
}

.lane[data-hue="blue"]   { --lane: var(--blue); }
.lane[data-hue="green"]  { --lane: var(--green); }
.lane[data-hue="pink"]   { --lane: var(--pink); }
.lane[data-hue="yellow"] { --lane: var(--yellow); }
.lane[data-hue="purple"] { --lane: var(--purple); }
.lane[data-hue="brown"]  { --lane: var(--brown); }
.lane[data-hue="orange"] { --lane: var(--orange); }
.lane[data-hue="red"]    { --lane: var(--red); }
.lane[data-hue="gray"]   { --lane: var(--gray); }
.lane[data-hue="teal"]   { --lane: var(--teal); }

.entry__topline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.entry__label {
  display: inline-block;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 700; color: var(--hue, var(--ink-3));
}
/* The closing half of a span stays quieter than the opening */
.entry--end .entry__title { font-size: 17px; color: var(--ink-2); }

.entry[data-hue="blue"]   { --hue: var(--blue); }
.entry[data-hue="green"]  { --hue: var(--green); }
.entry[data-hue="pink"]   { --hue: var(--pink); }
.entry[data-hue="yellow"] { --hue: var(--yellow); }
.entry[data-hue="purple"] { --hue: var(--purple); }
.entry[data-hue="brown"]  { --hue: var(--brown); }
.entry[data-hue="orange"] { --hue: var(--orange); }
.entry[data-hue="red"]    { --hue: var(--red); }
.entry[data-hue="gray"]   { --hue: var(--gray); }
.entry[data-hue="teal"]   { --hue: var(--teal); }

.entry__body { padding-bottom: 26px; min-width: 0; }
.entry__title {
  margin: 3px 0 0; font-family: var(--serif); font-size: 19px; font-weight: 600;
}
.entry__title .arrow { color: var(--ink-3); font-weight: 400; }
.entry__when { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.entry__details { margin: 5px 0 0; font-size: 13px; color: var(--ink-3); }
.entry__alert { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--red); }
.entry__alert--swap { color: var(--yellow); }
.entry--cancelled .entry__title { text-decoration: line-through; opacity: .7; }

.errorpage { max-width: 560px; margin: 0 auto; padding: 96px 20px; text-align: center; }
.errorpage h1 { font-family: var(--serif); font-size: 64px; margin: 0 0 8px; color: var(--ink-3); }

/* --- Narrow screens ---------------------------------------------------- */

@media (max-width: 720px) {
  .row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 10px 14px 10px 12px;
  }
  /* The duration track needs width to be readable — drop it on narrow screens
     and rely on the explicit date range and duration label instead. */
  .track { display: none; }
  .row__conf { display: none; }
  .masthead__bar { gap: 14px; }
  .stats { gap: 20px; }
  .mag__facts { gap: 24px; }
  .card__head { padding: 15px 16px 12px; }
  .chain { padding: 10px 16px; }
}

/* --- Editor (/admin) ---------------------------------------------------- */
/* A data grid, not a magazine: denser type, aligned columns, and every control
   reachable without JavaScript. Shares the page tokens so it still reads as
   the same site. */

body.wide main,
body.wide .adm__head { max-width: 1180px; }
.adm { max-width: 1180px; margin: 0 auto; padding: 0 20px 64px; }
.adm--narrow { max-width: 620px; }

.adm__head { max-width: 1180px; margin: 0 auto; padding: 28px 20px 12px; }
.adm__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.adm__bar h1 { font-family: var(--serif); font-size: 30px; margin: 0; }
.adm__right { display: flex; align-items: center; gap: 8px; }
.adm__right form { margin: 0; }

.adm__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.adm__filters input[type="search"] { flex: 1 1 280px; }
.adm__count { color: var(--ink-3); font-size: 13px; margin: 22px 0 8px; }

/* Controls */
.adm input, .adm select, .adm textarea,
.adm__filters input, .adm__filters select {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 7px 9px; width: 100%; min-width: 0;
}
.adm textarea { resize: vertical; font-size: 13px; line-height: 1.5; }
.adm__filters select, .adm__filters button { width: auto; }
.adm input:focus, .adm select:focus, .adm textarea:focus,
.adm__filters input:focus, .adm__filters select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}

.btn {
  display: inline-block; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--surface); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: var(--red); }
.btn--sm { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 6px; }
.btn--subtle { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn--subtle:hover {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
  color: var(--red);
}
/* .btn--primary reads too quiet for a call to action the user wants "obvious
   and important" (the archive-map link under every globe) — bigger type and
   padding, same accent fill. */
.btn--lg { padding: 11px 22px; font-size: 15px; font-weight: 600; }

/* --- Trip Card Actions & Share Widget ---------------------------------- */

.card__actions {
  display: flex;
  align-items: flex-start;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.card__share {
  min-width: 0;
}

.card__share--active {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.card__share-info {
  display: flex; flex-direction: column; gap: 8px;
}
.card__share-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card__share-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}
.card__share-revoke { margin: 0; }
.card__share-input-group {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card__share-link {
  flex: 1 1 240px; font-family: var(--mono); font-size: 12px;
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--ink);
}
.card__share-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.card__share-note {
  font-size: 11px; color: var(--ink-3);
}

.card__share-options {
  margin-top: 4px;
}
/* The "Share itinerary" toggle (no share yet) is this same class, but sits
   directly in .card__share — a flex row beside Pocket Guide, not a vertical
   stack — where the 4px top margin above just pushed it out of line with
   its neighbor instead of spacing it from something above. */
.card__share > .card__share-options {
  margin-top: 0;
}
.card__share-options-toggle {
  font-size: 11.5px; font-weight: 600; color: var(--ink-3); cursor: pointer;
  user-select: none;
}
.card__share-options-toggle:hover {
  color: var(--accent);
}
.card__share-cta-summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
}
.card__share-cta-summary::-webkit-details-marker { display: none; }
.card__share-options-form {
  margin-top: 10px; padding: 12px 14px;
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 10px;
}
.card__share-checkboxes {
  display: flex; flex-direction: column; gap: 6px;
}
.card__share-label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.card__share-label input[type="checkbox"] {
  cursor: pointer; accent-color: var(--accent);
}
.btn--copied {
  background: color-mix(in srgb, var(--green) 20%, var(--surface)) !important;
  color: var(--green) !important;
  border-color: var(--green) !important;
}

/* --- Shared Trip Page (/share/:token) --------------------------------- */

.shared-trip {
  max-width: 940px; margin: 0 auto; padding: 24px 20px 80px;
}
.shared-trip__head {
  text-align: center; margin-bottom: 28px;
}
.shared-trip__topline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.shared-trip__badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.shared-trip__countdown {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.shared-trip__title {
  font-family: var(--serif); font-size: clamp(28px, 5vw, 42px); font-weight: 600;
  margin: 0 0 8px; line-height: 1.15; color: var(--ink);
}
.shared-trip__dates {
  font-size: 14px; font-weight: 500; color: var(--ink-2); margin: 0 0 10px;
}
.shared-trip__notice {
  font-size: 12px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--border);
}
.shared-trip__card {
  box-shadow: var(--shadow);
}
.shared-trip__foot {
  max-width: 940px; margin: 0 auto; text-align: center;
}

.flash {
  max-width: 1180px; margin: 14px auto 0; padding: 10px 16px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-radius: var(--radius); font-size: 14px;
}
.warn {
  padding: 12px 16px; border-radius: var(--radius); font-size: 14px;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
}

/* Rows. The header and every summary share one column template, which is what
   makes a list of <details> read as a table. */
.rec__header, .rec__sum {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 128px 88px minmax(0, 1.5fr) minmax(0, 1fr) 118px 88px;
}
.rec__header {
  padding: 0 14px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3);
}
.rec {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 6px; position: relative;
}
.rec[open] { box-shadow: var(--shadow); border-color: var(--border-strong); }
.rec__sum { padding: 10px 34px 10px 14px; cursor: pointer; font-size: 13px; list-style: none; }
.rec__sum::-webkit-details-marker { display: none; }
.rec__sum:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: var(--radius); }
/* The native disclosure triangle is hidden above (::-webkit-details-marker),
   which left nothing on screen to say a row opens into an editor — only a
   cursor:pointer, which nobody sees before they click. This redraws it as a
   plain chevron, in the padding this rule's own right-edge space makes room
   for, so the affordance survives losing the native marker. */
.rec__sum::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s ease;
}
.rec[open] > .rec__sum::after { margin-top: -2px; transform: rotate(-135deg); }
.rec__date { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.rec__type { color: var(--ink-2); }
.rec__name, .rec__where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__where { color: var(--ink-2); }
.rec__conf { font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__status { font-size: 11px; color: var(--ink-3); text-align: right; }
.rec__status[data-status="Upcoming"] { color: var(--green); }
.tag--cancelled { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

.rec--new { border-style: dashed; margin-bottom: 20px; }
.rec__sum--new { display: block; font-weight: 500; color: var(--accent); }

/* The open editor */
.rec__form { padding: 4px 14px 16px; border-top: 1px solid var(--border); margin-top: 2px; }
.grid {
  display: grid; gap: 12px 14px; padding-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.fld--check { flex-direction: row; align-items: center; gap: 8px; }
.fld--check input { width: auto; }
.time-confirm label { min-height: 44px; display: flex; align-items: center; }
.time-confirm input { flex-shrink: 0; }
.time-confirm label, .time-confirm input { cursor: pointer; }
.fld--check label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-2); }

/* Boxes a group of fields that qualify one another (an amount and its
   currency, points and the program they're in) so the pairing reads at a
   glance instead of the two looking like unrelated fields that happen to
   sit near each other in the grid. */
.fld-group {
  grid-column: span 2; display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
.fld-group .fld { flex: 1; min-width: 140px; }

/* What the free text resolved to — the point of the whole normalisation layer,
   surfaced where a wrong pin can actually be noticed and corrected. */
.resolved {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12px;
}
.resolved--scope {
  margin-block: 14px 0; padding: 10px 12px; border: 1px solid var(--border);
  border-inline-start: 4px solid var(--gold); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); font-size: 13px; line-height: 1.5;
}
.resolved--scope .resolved__label { color: var(--gold-strong); font-weight: 700; }
.resolved__label { color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.pin {
  padding: 3px 8px; border-radius: 999px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.pin--approx { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent); }
.pin--none { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }

.rec__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.rec__actions form { margin: 0; }
.rec__meta { font-size: 12px; color: var(--ink-3); }

.confirm { margin: 22px 0; }
.confirm div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); }
.confirm dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.confirm dd { margin: 0; font-size: 14px; }

.login { padding-top: 80px; }
.login__form { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 20px 0; }
.login__form label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.login__form button { align-self: flex-start; margin-top: 4px; }
/* The "remember this device" checkbox: a plain sentence, not a field label —
   normal case/size/colour so it doesn't read as another uppercase field
   caption sitting above an input that isn't there. */
.login__check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink-2);
}
.login__check input { margin: 0; }

/* The honeypot (site/botcheck.js) — wraps a label and its input. Off-screen
   rather than display:none or hidden, because those are the first things a
   scraper skips; this stays "rendered" to that check while being nowhere a
   person can see it. position:absolute is also doing real work: .login__form
   is a flex column with an 8px gap, and an in-flow field would open a visible
   hole between the real inputs. Do not "tidy" this into display:none — that
   disables the trap. The label is deliberately still readable by screen
   readers; see the note in botcheck.js. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 860px) {
  /* The aligned columns are the first thing to go — below this width the
     summary is more useful stacked than truncated to nothing. */
  .rec__header { display: none; }
  .rec__sum { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .rec__date { grid-column: 1; }
  .rec__status { grid-column: 2; grid-row: 1; }
  .rec__name { grid-column: 1 / -1; }
  .rec__type, .rec__where, .rec__conf { grid-column: 1 / -1; }
}

/* --- Globe (/globe) ---------------------------------------------------------
   Server-rendered inline SVG, so everything here themes with the page: the
   spheres use the same custom properties as the booking rows, and the arcs
   reuse the booking-type hues (see TYPE_HUE in site/data.js). */

:root {
  /* An aged-chart palette, not a map-app one — sage water and ochre coastlines
     rather than the cool grey-blue this globe originally shipped with, which
     belonged to no other page on the site. --globe-land is the scratch card's
     own paper (--wmap-print, declared below): the interactive globe and the
     coverage card are the same base map drawn twice, so they share the one
     tone rather than carrying two that could drift apart. */
  --globe-sea: #DEE3D2;
  --globe-land: var(--wmap-print);
  --globe-coast: #A99B7C;
  --globe-grid: #C7B999;

  /* The scratch card. Three steps of one gold for the coating, the ink printed
     on it, the pale stock underneath, and the one hue that comes up when the
     coating comes off. Validated against the foil in both schemes — the numbers
     are in the note above worldMap(). */
  --foil-hi: #e6cd8c;
  --foil-mid: #c9a44c;
  --foil-lo: #a8842c;
  --foil-ink: #6b5015;
  --wmap-print: #efe7da;
  --scratch: #c0357a;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* --globe-land is not repeated here: it already follows --wmap-print's own
       dark value below, the same way --ink follows --sage-dark. */
    --globe-sea: #1B2419;
    --globe-coast: #8C7D5C;
    --globe-grid: #473F2C;

    /* Gold is still gold — a material does not invert — but it is lit dimmer,
       and the printed borders go pale because they are now the light thing on a
       dark coating. */
    --foil-hi: #c2a04a;
    --foil-mid: #a07c28;
    --foil-lo: #79591a;
    --foil-ink: #f0dcab;
    --wmap-print: #3b3630;
    --scratch: #cc4f97;
  }
}

.masthead__note { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }

/* The interactive stage. The canvas is hidden until site/public/globe.js has
   the atlas in hand and adds .is-live — until then the server-rendered SVG is
   what you see, so a failed script degrades to a picture rather than a gap. */
.globe3d { max-width: 620px; margin: 0 auto; }
.globe3d__canvas { display: none; margin: 0 auto; border-radius: 50%; cursor: grab;
  touch-action: none; }
.globe3d__canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.globe3d.is-live .globe3d__canvas { display: block; }
/* Where no static fallback ships (the index), hold the square open so the page
   doesn't shove downward the moment the canvas goes live. */
.globe3d--reserve:not(.is-live) { aspect-ratio: 1 / 1; }
.globe3d.is-live .globe3d__static { display: none; }
.globe3d.is-dragging .globe3d__canvas { cursor: grabbing; }

/* Reserves the readout's height so the page doesn't jump as the text changes
   between the idle hint and a one-line place or route. */
.globe3d__readout { min-height: 3em; margin: 16px auto 0; max-width: var(--measure);
  text-align: center; font-size: 13px; color: var(--ink-2); }

.globe3d__cta { margin: 4px 0 16px; text-align: center; }

/* Off-screen until a descendant link is focused, same pattern as .skip-link
   above — a keyboard path to every route on the globe, since the canvas
   itself only exposes whole-globe rotation to the keyboard, not individual
   pins/arcs (see globe.js's pointer-only click handling). Populated by
   site/public/globe.js once the globe's data has loaded. */
.globe3d__routelist { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.globe3d__routelist:focus-within {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  white-space: normal; margin: 12px auto 0; max-width: var(--measure);
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.globe3d__routelist h2 { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.globe3d__routelist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.globe3d__routelist a { font-size: 13px; }

.globe { margin: 0; }
.globe__svg { width: 100%; height: auto; display: block; }

/* --- Route Wall Art studio (/map, /sample/map) ---------------------------
   site/globe.js's renderArchiveMapPage() + vectorRoutePoster(). Everything is
   scoped under .rwa-* or .poster-svg so nothing leaks onto the trip pages.
   The poster's own colours live in the SVG's stylesheet (per theme); what is
   here is the page around it — the hero, the workbench grid, the settings
   panel — and the few in-page behaviours a downloaded copy must not carry
   (hover dimming, phone-size label tiers). */
.rwa-hero .masthead__bar { max-width: 1180px; align-items: flex-end; }
.rwa-back { display: inline-block; margin-bottom: 14px; font-size: 13px; }
.rwa-hero h1 em { font-style: italic; font-weight: 400; }
.rwa-stats { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
.rwa-stat {
  display: flex; flex-direction: column-reverse; min-width: 112px;
  padding: 12px 18px 13px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow);
}
.rwa-stat dd {
  margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 32px; line-height: 1.05;
  font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink);
}
.rwa-stat dt {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}

body.wide main.rwa {
  max-width: 1180px; display: grid; gap: 26px; align-items: start;
  grid-template-columns: 318px minmax(0, 1fr); grid-template-areas: "panel stage";
}
body.wide main.rwa--empty { display: block; }
.rwa-eyebrow { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

/* The settings panel */
.rwa-panel {
  grid-area: panel; position: sticky; top: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.rwa--empty .rwa-panel { position: static; max-width: 420px; margin-bottom: 24px; }
.rwa-group { padding: 16px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.rwa-group:last-child { border-bottom: 0; }
.rwa-group > .rwa-eyebrow { display: block; margin-bottom: 11px; }
.rwa-phead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.rwa-hint { font-size: 11.5px; color: var(--ink-3); }
.rwa-selwrap { position: relative; }
.rwa-select {
  appearance: none; width: 100%; padding: 10px 34px 10px 12px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.rwa-select:hover { border-color: var(--border-strong); }
.rwa-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rwa-selwrap::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg); pointer-events: none;
}
.rwa-covnote { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.rwa-covnote b { color: var(--ink-2); font-weight: 600; }

.rwa-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rwa-sw {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg);
  font: inherit; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.rwa-sw:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.rwa-sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rwa-sw[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink); }
.rwa-sw[aria-pressed="true"] .rwa-sw__name { color: var(--ink); font-weight: 600; }
.rwa-sw__chip {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 7px; overflow: hidden;
  background: var(--sw-paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.rwa-sw__chip i { position: absolute; display: block; border-radius: 50%; }
.rwa-sw__a { width: 8px; height: 8px; left: 4px; top: 5px; background: var(--sw-dot); }
.rwa-sw__b { width: 14px; height: 2px; border-radius: 2px; right: 3px; bottom: 7px; transform: rotate(-18deg); background: var(--sw-route); }
.rwa-sw__name { font-size: 12.2px; line-height: 1.2; }

.rwa-tog {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 8px 2px;
  background: none; border: 0; border-radius: 8px; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.rwa-tog + .rwa-tog { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: 0; }
.rwa-tog:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rwa-tog__switch {
  position: relative; flex: none; width: 36px; height: 21px; border-radius: 99px;
  background: var(--border-strong); transition: background .18s ease;
}
.rwa-tog__switch::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s ease;
}
.rwa-tog[aria-pressed="true"] .rwa-tog__switch { background: var(--ink); }
.rwa-tog[aria-pressed="true"] .rwa-tog__switch::after { transform: translateX(15px); }
.rwa-tog__text { font-size: 14px; }
.rwa-tog__detail { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }

.rwa-actions { display: grid; gap: 8px; }
.rwa-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.rwa-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.rwa-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rwa-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.rwa-btn svg { flex: none; }
.rwa-btn--primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 90%, transparent);
}
.rwa-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.rwa-spec { margin: 11px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--ink-3); }
.rwa-spec span { display: flex; align-items: center; gap: 5px; }
.rwa-spec span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

/* The stage */
.rwa-stage { grid-area: stage; min-width: 0; }
.rwa-stagebar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rwa-seg, .rwa-zoom {
  display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--border) 45%, var(--bg));
}
.rwa-seg button, .rwa-zoom button {
  border: 0; border-radius: 7px; background: none; font: inherit; color: var(--ink-2); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rwa-seg button { padding: 6px 14px; min-height: 36px; font-size: 13px; }
.rwa-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(44, 62, 46, .14); }
.rwa-seg button:focus-visible, .rwa-zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rwa-zoom { margin-left: auto; align-items: center; }
.rwa-zoom button { width: 36px; height: 30px; font-size: 16px; line-height: 1; }
.rwa-zoom button:hover:not(:disabled) { background: var(--surface); }
.rwa-zoom button:disabled { opacity: .4; cursor: default; }
.rwa-zoom__lvl { min-width: 44px; text-align: center; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rwa-livespec { margin: 0; font-size: 12px; color: var(--ink-3); }
.rwa-livespec b { color: var(--ink-2); font-weight: 600; }

.rwa-frameview {
  padding: 18px; border: 1px solid var(--border); border-radius: 18px; overflow: auto;
  background: var(--surface); box-shadow: var(--shadow);
  transition: background .4s ease, padding .3s ease;
}
.rwa-frameview.is-wall {
  padding: 54px 40px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .85), rgba(0, 0, 0, 0) 60%),
    radial-gradient(90% 80% at 50% 110%, rgba(47, 61, 42, .14), rgba(0, 0, 0, 0) 65%),
    #ede6d8;
}
.rwa-posterhold { margin: 0 auto; }
.rwa-matte { border-radius: 2px; transition: padding .35s ease, border-width .35s ease; }
.rwa-frameview.is-wall .rwa-matte {
  padding: 34px; background: #faf7ef; border: 14px solid #4a3626;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .35) inset, 0 34px 50px -26px rgba(37, 30, 20, .65), 0 3px 10px rgba(37, 30, 20, .25);
}
.poster-svg { width: 100%; height: auto; display: block; border-radius: 3px; user-select: none; }
.rwa-caption { margin: 14px 2px 0; max-width: 90ch; font-size: 13.5px; color: var(--ink-3); }

/* Route highlight (page only — the SVG's own stylesheet has none of this so
   a downloaded copy is a still). Hover or focus lights one route and lowers
   the rest; the emphasis is a shade wider, never a glow. */
.poster-svg .poster__route { outline: none; cursor: pointer; }
.poster-svg .poster__arc { transition: opacity .18s ease, stroke-width .18s ease; }
.poster-svg.is-hovering .poster__arc { opacity: .14; }
.poster-svg .poster__route.is-lit .poster__arc { opacity: 1; stroke-width: 2.3; }
.poster-svg .poster__route:focus-visible .poster__arc { opacity: 1; stroke-width: 2.3; }
.poster-svg .poster__route:focus-visible .poster__hit { stroke: var(--poster-text-label); opacity: .22; }
.rwa-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 300px;
  padding: 7px 11px; border-radius: 9px; background: #20291d; color: #f6f1e4;
  font-size: 12px; line-height: 1.4; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
  transform: translate(-50%, calc(-100% - 14px));
}
.rwa-tip b { font-family: var(--mono); color: var(--public-night-gold); font-weight: 600; letter-spacing: .04em; }

/* Phone-size lettering: the hub tier was placed with room to be drawn this
   large (site/globe.js placeLabels), the minor tier goes; the lines gain the
   hairline back that the viewBox scale took away. */
@media (max-width: 1024px) {
  .poster-svg .poster__arc { stroke-width: 2; }
  .poster-svg .poster__arc--long { stroke-width: 1.4; }
  .poster-svg .poster__arc--surface { stroke-width: 1.6; }
}
@media (max-width: 640px) {
  .poster-svg .poster__arc { stroke-width: 3; }
  .poster-svg .poster__arc--long { stroke-width: 2.1; }
  .poster-svg .poster__arc--surface { stroke-width: 2.5; stroke-dasharray: 0.1 5; }
  .poster-svg .poster__route.is-lit .poster__arc, .poster-svg .poster__route:focus-visible .poster__arc { stroke-width: 4; }
  .poster-svg .poster__pin, .poster-svg .poster__pin-ring { transform-box: fill-box; transform-origin: center; transform: scale(1.8); }
  .poster-svg .poster__label--minor { display: none; }
  .poster-svg .poster__label--hub { font-size: 27.5px; stroke-width: 5.5; }
  .poster-svg .poster__title { font-size: 46px; }
}

@media (max-width: 1040px) {
  body.wide main.rwa { grid-template-columns: 1fr; grid-template-areas: "stage" "panel"; }
  .rwa-panel { position: static; }
  .rwa-hero .masthead__bar { align-items: flex-start; }
}
/* A full-width panel on a tablet has room for a row of swatches and actions. */
@media (min-width: 641px) and (max-width: 1040px) {
  .rwa-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rwa-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rwa-frameview { padding: 10px; border-radius: 12px; }
  .rwa-frameview.is-wall { padding: 26px 16px; }
  .rwa-frameview.is-wall .rwa-matte { padding: 14px; border-width: 8px; }
  .rwa-themes { grid-template-columns: 1fr; }
  .rwa-stagebar { gap: 8px; }
  .rwa-livespec { order: 3; flex-basis: 100%; }
  .rwa-stat { min-width: 0; flex: 1 1 120px; padding: 10px 14px; }
  .rwa-stat dd { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .rwa-sw, .rwa-btn, .rwa-tog__switch, .rwa-tog__switch::after, .rwa-frameview, .rwa-matte,
  .rwa-seg button, .rwa-zoom button, .poster-svg .poster__arc { transition: none; }
  .rwa-sw:hover, .rwa-btn:hover { transform: none; }
}

/* Printing the studio prints the sheet alone. Scoped to the page that holds
   it, so the brand bar and footer still print everywhere else. */
@media print {
  body:has(main.rwa) { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body:has(main.rwa) .pb, body:has(main.rwa) .foot, body:has(main.rwa) nav,
  .rwa-hero, .rwa-panel, .rwa-stagebar, .rwa-caption, .rwa-tip { display: none !important; }
  body.wide main.rwa { display: block; margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100vw !important; }
  .rwa-frameview, .rwa-frameview.is-wall {
    padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: none !important; overflow: visible !important;
  }
  .rwa-frameview.is-wall .rwa-matte { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
  .rwa-posterhold { width: 100% !important; }
  .poster-svg { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; }
}

.globe__sea { fill: var(--globe-sea); }
.globe__land { fill: var(--globe-land); stroke: var(--globe-coast); stroke-width: .4; }
.globe__graticule { fill: none; stroke: var(--globe-grid); stroke-width: .4; opacity: .55; }
.globe__limb { fill: none; stroke: var(--border-strong); stroke-width: 1; }

.globe__arc { fill: none; stroke: var(--gray); stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.globe__arc[data-hue="blue"]   { stroke: var(--blue); }
.globe__arc[data-hue="green"]  { stroke: var(--green); }
.globe__arc[data-hue="pink"]   { stroke: var(--pink); }
.globe__arc[data-hue="yellow"] { stroke: var(--yellow); }
.globe__arc[data-hue="purple"] { stroke: var(--purple); }
.globe__arc[data-hue="brown"]  { stroke: var(--brown); }
.globe__arc[data-hue="orange"] { stroke: var(--orange); }
.globe__arc[data-hue="red"]    { stroke: var(--red); }
.globe__arc[data-hue="teal"]   { stroke: var(--teal); }
/* Travel that hasn't happened yet reads as provisional. */
.globe__arc--upcoming { stroke-dasharray: 4 3; opacity: 1; }
.globe__arcs a:hover .globe__arc,
.globe__arc:hover { stroke-width: 2.4; opacity: 1; }

.globe__pin { fill: var(--ink); fill-opacity: .72; stroke: var(--globe-sea); stroke-width: .5; }
.globe__pin--upcoming { fill: var(--accent); fill-opacity: 1; }
/* Hollow means the coordinate is city/region level, not an exact address. */
.globe__pin--approx { fill: none; stroke: var(--ink-2); stroke-width: 1.1; }
.globe__pin:hover { fill: var(--accent); fill-opacity: 1; }

/* Halo via paint-order so a label stays readable over coastline and arc alike. */
.globe__labels text {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  fill: var(--ink-2); paint-order: stroke; stroke: var(--globe-sea);
  stroke-width: 2.6px; stroke-linejoin: round;
}

/* Now a <fieldset> — most entries are checkboxes that filter the globe by
   category (site/public/globe.js's categoryShown()); "Upcoming" and
   "Approximate pin" stay static, since they're data-quality markers, not
   categories. Border reset because a bare <fieldset> ships its own. */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 16px 0 0; margin: 34px 0 0; border: none; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2); }
.legend__caption { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* Same visually-hidden pattern as .legend__caption above, as a reusable
   utility — read by a screen reader, invisible otherwise. Used where a
   glyph (a checkmark, a dash) carries meaning only a sighted reader gets
   for free, e.g. site/accountRender.js's plan comparison chart. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.legend__item { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.legend__item--static { cursor: default; }
.legend__toggle { margin: 0; accent-color: var(--accent); }
.legend__swatch { width: 16px; height: 0; border-top: 2.5px solid var(--gray); border-radius: 2px; }
.legend__swatch[data-hue="blue"]   { border-color: var(--blue); }
.legend__swatch[data-hue="brown"]  { border-color: var(--brown); }
.legend__swatch[data-hue="purple"] { border-color: var(--purple); }
.legend__swatch[data-hue="yellow"] { border-color: var(--yellow); }
.legend__swatch[data-hue="teal"]   { border-color: var(--teal); }
.legend__swatch--dash { border-top-style: dashed; border-color: var(--ink-2); }
.legend__swatch--approx { width: 9px; height: 9px; border: 1.5px solid var(--ink-2);
  border-radius: 50%; }
/* An unchecked category dims to match the arc it's hiding fading out. */
.legend__item:has(.legend__toggle:not(:checked)) { opacity: .45; }

.globes__foot { max-width: var(--measure); margin: 18px 0 0; font-size: 12px; color: var(--ink-3); }

/* --- Headline figures (index, "By the numbers") ------------------------------
   Stat tiles and one meter, not charts. The meter is the only element here that
   carries colour: it is a single value against a fixed limit, so the fill is the
   accent and the track is a lighter step of the SAME hue, which keeps the state
   readable across the whole bar. Every label and value stays on text tokens —
   a number never wears the data colour. */

.figures { display: grid; gap: 26px; }

.figures__hero {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow);
}
/* The one hero figure on the page. Same sans as everything else — a display or
   serif face here reads as decoration rather than data. */
.hero__value {
  margin: 0; font-size: 54px; line-height: 1; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: proportional-nums;
}
.hero__label { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

.meter { margin-top: 24px; }
.meter__track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}
.meter__fill { height: 100%; border-radius: 999px; background: var(--accent); }
.meter__cap {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
  margin: 10px 0 0; font-size: 13px;
}
.meter__cap strong { font-weight: 600; color: var(--ink); }
.meter__cap span { color: var(--ink-3); }

.tiles {
  margin: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}
/* Own border per tile rather than a hairline grid painted by the container:
   with auto-fit the last row is usually short, and a container background
   shows through the empty tracks as a stray block. */
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.tile__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.tile__value { margin: 7px 0 0; font-size: 23px; font-weight: 600; line-height: 1.15; }
.tile__detail { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }

.figures__foot { margin: 0; max-width: var(--measure); font-size: 12px; color: var(--ink-3); }

/* --- Site dashboard ------------------------------------------------------ */

.dash-section { margin: 0 0 32px; }
.dash-section:last-child { margin-bottom: 0; }
.dash__count {
  margin-left: 8px; font-weight: 400; text-transform: none;
  letter-spacing: normal; color: var(--ink-3);
}
.dash-list { display: grid; gap: 6px; }
.dash__row {
  display: grid; gap: 12px; align-items: center;
  /* 5 explicit tracks: email, joined, sessions, plan — the accounts row's
     shape since Phase 11 — with an auto-sized 5th for the plan-override form.
     Waitlist rows (2 children: email + one meta, see waitlistRow's own
     comment on reusing this class) just occupy the first two and leave the
     rest empty, which is fine at minmax(0, ...) width. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, .8fr) auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
}
.dash__row--usage { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) auto; }
.dash__email { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__meta { color: var(--ink-3); font-size: 12.5px; }
.dash__meta--warn { color: var(--red); font-weight: 600; }
.dash__planForm { display: flex; gap: 6px; align-items: center; }
.dash__planForm select {
  font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
}
@media (max-width: 640px) {
  .dash__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- Operations console (/admin/dashboard) --------------------------------------

   A different job from the rest of the site, and deliberately a different density.
   Everything else here is something to read; this is something to scan while deciding
   whether to act.

   THE STRUCTURE IS THE POINT. The first build of this console was one flat run of
   twenty-five equal-weight sections — nine screens of it. Everything was equally loud,
   so nothing was, and answering "is the rollout healthy" meant scrolling past the same
   nine screens every time. It now has three levels: a sticky header that keeps the
   headline state on screen at any scroll depth; seven numbered domain bands in triage
   order, the last three folded; and h3 blocks inside them, with the reference-sized
   tables folded too. A folded band always carries its own status summary, so folding
   can never hide a problem.

   It still uses the site's own tokens — --surface, --border, --ink, --accent and the
   category hues — rather than a second palette. The console reads as the same product
   in a working register, not as a generic dark DevOps theme.

   No status is expressed by colour alone: every badge carries an icon AND a word, and
   the tint only reinforces them. */

.ops { max-width: 1560px; margin: 0 auto; padding: 0 20px 72px; }
body.wide main.ops { max-width: 1560px; }

/* --- Sticky header ---
   Slim on purpose: it costs 46px of every screen, so it carries only what is worth that
   — the page identity, the four headline chips, the range, and Refresh. */
.ops__head {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg); border-bottom: 1px solid var(--border-strong);
  padding: 8px 20px; margin-bottom: 16px;
}
.ops__bar {
  max-width: 1560px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
}
.ops__bar h1 {
  font-family: var(--serif); font-size: 19px; margin: 0; white-space: nowrap;
  line-height: 1.2;
}
.ops__ident { display: flex; align-items: center; }
.ops__actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto;
}
.ops__refreshed { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* The four actions are one utility cluster, not four loose buttons sharing a line with
   the page title — a segmented control, hairline-divided, so it reads as "the things you
   can do here" rather than as part of the heading. Refresh leads it because it is the
   only one that is an operational action rather than navigation. */
.ops__utility {
  display: flex; align-items: stretch; border: 1px solid var(--border-strong);
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.ops__utility form { margin: 0; display: flex; }
.ops__util {
  display: inline-flex; align-items: center; font: inherit; font-size: 12px;
  font-weight: 500; line-height: 1; padding: 6px 11px; white-space: nowrap;
  color: var(--ink-2); text-decoration: none; background: none;
  border: 0; border-right: 1px solid var(--border); cursor: pointer;
}
.ops__utility > *:last-child .ops__util,
.ops__utility > .ops__util:last-child { border-right: 0; }
.ops__util:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.ops__util:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ops__util--primary {
  font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--sage-soft) 22%, var(--surface));
}
.ops__util--primary:hover { background: color-mix(in srgb, var(--sage-soft) 34%, var(--surface)); }

/* The headline state, riding along at any scroll depth. */
.ops__chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ops__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.ops__chipK {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700;
}

/* --- Severity badges ---
   Icon + word + tint, in that order of importance. The icon is aria-hidden because the
   word beside it already says the same thing. */
.ops__badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline;
  font-size: 11px; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.ops__badge--sm { font-size: 10.5px; }
.ops__icon { flex: 0 0 auto; display: block; }
.ops__badge--ok { color: var(--green-strong); }
.ops__badge--info { color: var(--blue); }
.ops__badge--warning { color: var(--orange-strong); }
.ops__badge--critical { color: var(--red); }
.ops__badge--active { color: var(--gold-strong); }
.ops__badge--neutral { color: var(--ink-3); font-weight: 500; }

/* --- Domain bands ---
   Seven numbered majors. The ordinal is what makes them scannable as a set; the status
   summary on the right is what makes folding safe. */
/* The sticky header would otherwise sit on top of whatever an in-page anchor lands on —
   the "Inspect" links in the alert list jump straight to a domain. */
.ops__domain, .ops__block, .ops__domainT, .ops__blockH h3 { scroll-margin-top: 58px; }
.ops__domain { margin: 0 0 22px; }
/* A band header is a tinted, ruled strip rather than a bare underline, and the band's
   contents sit inside a left rule. That is what separates "02 Economics" from the h3
   blocks under it at a glance. Both are cheap vertically — the extra header padding is
   paid back by the tightened band and block margins below. */
.ops__domainH {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 0;
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.ops__domainBody {
  border-left: 2px solid var(--border-strong);
  padding: 14px 0 2px 14px; margin-bottom: 0;
}
.ops__domain--fold > details > summary.ops__domainH { cursor: pointer; list-style: none; }
.ops__domain--fold > details > summary::-webkit-details-marker { display: none; }
.ops__domain--fold > details > summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.ops__domainNum {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--cream); background: var(--sage-dark);
  border-radius: 4px; padding: 2px 6px;
}
.ops__domainT {
  font-family: var(--serif); font-size: 18px; margin: 0; line-height: 1.2;
  letter-spacing: .005em;
}
.ops__domainS { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.ops__domainChip {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ops__domainChip + .ops__domainChip::before {
  content: "·"; margin-right: 10px; color: var(--border-strong);
}

/* Fold affordance: a chevron that turns. Shared by domains and blocks. */
.ops__chev {
  flex: 0 0 auto; width: 8px; height: 8px; border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3); transform: rotate(-45deg); margin-right: 2px;
  transition: transform .12s ease;
}
details[open] > summary .ops__chev { transform: rotate(45deg); }

/* --- Blocks (h3 inside a band) --- */
.ops__block { margin: 0 0 15px; }
.ops__block:last-child { margin-bottom: 0; }
.ops__blockH {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding-bottom: 5px; margin-bottom: 8px; border-bottom: 1px solid var(--border-strong);
}
.ops__blockH h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .085em;
  margin: 0; color: var(--ink-2); font-weight: 700;
}
.ops__blockS { align-self: center; }
.ops__count {
  font-size: 11.5px; color: var(--ink-3); margin-left: auto;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ops__foldBlock > summary.ops__blockH { cursor: pointer; list-style: none; align-items: center; }
.ops__foldBlock > summary::-webkit-details-marker { display: none; }
.ops__foldBlock > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ops__foldBody { padding-top: 2px; }
.ops__h4 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin: 14px 0 6px; font-weight: 700;
}

/* --- Captions and help ---
   A caption is one line and always visible. Anything longer is a definition, and
   definitions live behind the "?" — read once, then never again by the same operator. */
.ops__cap {
  margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
  max-width: 100ch;
}
.ops__cap strong, .ops__cap em { color: var(--ink-2); }
.ops__note { margin: 0 0 9px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); max-width: 100ch; }
.ops__note--warn { color: var(--ink-2); border-left: 2px solid var(--orange-strong); padding-left: 9px; }
.ops__note--empty { border-left: 2px solid var(--border-strong); padding-left: 9px; }
.ops__note strong, .ops__note em { color: var(--ink-2); }

.ops__help { display: inline-block; position: relative; }
.ops__helpBtn {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--ink-3);
  font-size: 10px; font-weight: 700; line-height: 1;
}
.ops__helpBtn::-webkit-details-marker { display: none; }
.ops__helpBtn:hover { color: var(--ink); border-color: var(--ink-3); }
.ops__helpBtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ops__helpBody {
  position: absolute; z-index: 25; top: 22px; left: 0; width: min(52ch, 78vw);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 11px 14px; font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
}
.ops__helpBody p { margin: 0 0 7px; }
.ops__helpBody p:last-child, .ops__helpBody ul:last-child { margin-bottom: 0; }
.ops__helpBody ul { margin: 0 0 7px; padding-left: 17px; }
.ops__helpBody li { margin-bottom: 3px; }
.ops__srOnly {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Status strip / inline metric groups ---
   One bordered strip with hairline dividers, not a row of floating cards: these belong
   together and are read left to right in one pass. Fixed four-column grid because the
   callers carry eight items; a flex wrap left the eighth stretched across a whole row,
   which reads as a mistake. */
.ops__status {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.ops__status--six { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ops__inline {
  display: flex; flex-wrap: wrap; margin: 0 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.ops__statusItem {
  flex: 1 1 auto; min-width: 150px; padding: 8px 13px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ops__k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700;
}
.ops__v {
  font-size: 13.5px; font-weight: 600; margin-top: 3px; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.ops__d { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.ops__n { font-weight: 400; color: var(--ink-3); font-size: .86em; }

/* --- KPI area ---
   Five primary, with cost-per-accepted-email at double width and a gold wash because it
   is THE economic question the rollout exists to answer; four secondary below at a
   visibly lower weight. Explicit column counts, never auto-fit: any count that does not
   divide the cell count leaves bordered-but-empty cells hanging off the last row. */
.ops__kpis {
  display: grid; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.ops__kpis--primary {
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.15fr;
  margin-bottom: 8px;
}
.ops__kpis--secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ops__kpi {
  padding: 10px 14px;
  border-right: 1px solid var(--border);
}
.ops__kpi:last-child { border-right: 0; }
.ops__kpi--hero {
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  border-right: 1px solid var(--border-strong);
}
.ops__kpiV {
  font-size: 20px; font-weight: 600; line-height: 1.15; margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: -.012em;
}
.ops__kpi--hero .ops__kpiV { font-size: 28px; }
.ops__kpis--secondary .ops__kpiV { font-size: 16.5px; font-weight: 600; }
.ops__kpis--secondary .ops__kpi { padding: 8px 14px; }
.ops__kpiN { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.ops__kpiDelta { font-variant-numeric: tabular-nums; }
.ops__kpiDelta--good { color: var(--green-strong); }
.ops__kpiDelta--bad { color: var(--orange-strong); }
.ops__kpiDelta--flat { color: var(--ink-3); }

/* --- Tables: the primary instrument --- */
.ops__tw {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.ops__tw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ops table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ops__cap--sr, .ops table caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.ops th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); font-weight: 700; padding: 7px 11px; white-space: nowrap;
  border-bottom: 2px solid var(--border-strong);
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}
/* NO position:sticky here. .ops__tw is an overflow-x container, so it is the nearest
   scrolling ancestor a sticky <th> resolves against — and it never scrolls vertically.
   The header therefore stuck at a fixed offset INSIDE the box and painted itself over the
   first data rows. Tables here are capped and folded rather than endless, so a sticky
   header buys nothing worth that. */
.ops td {
  padding: 6px 11px; border-bottom: 1px solid var(--border); vertical-align: top;
  line-height: 1.45;
}
.ops tbody tr:last-child td { border-bottom: 0; }
.ops tbody tr:hover td { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ops th.n, .ops td.n {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ops__row--bad td { background: color-mix(in srgb, var(--red) 9%, transparent); }
.ops__row--bad:hover td { background: color-mix(in srgb, var(--red) 14%, transparent); }
.ops__row--watch td { background: color-mix(in srgb, var(--orange) 9%, transparent); }
.ops__row--watch:hover td { background: color-mix(in srgb, var(--orange) 14%, transparent); }
.ops__sub { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.ops__strong { font-weight: 600; }
.ops__muted { color: var(--ink-3); }
.ops__bad { color: var(--red); font-weight: 600; }
.ops__alertNum { color: var(--red); }

/* "No data" is a distinct rendering from a zero, everywhere, on purpose: a rate with no
   observations behind it must never look like a measured 0%. */
.ops__nodata { color: var(--ink-3); font-style: italic; font-weight: 400; }
/* A rate over a handful of messages is arithmetic, not evidence. Quiet enough not to
   shout on a table with many thin rows, distinct enough to catch the eye beside a number
   that would otherwise read as a finding. */
.ops__lown {
  display: inline-block; font-size: 9.5px; font-weight: 600; font-style: normal;
  letter-spacing: .03em; color: var(--orange-strong); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--orange-strong) 42%, transparent);
  border-radius: 3px; padding: 0 3px; vertical-align: 1px; cursor: help;
}
/* .ops__icon is display:block because it normally sits in a flex badge. Inside a
   paragraph that makes it take its own line, so it goes back to inline here. */
.ops__note--warn .ops__icon,
.ops__cap .ops__icon { display: inline-block; color: var(--blue); vertical-align: -2px; }
.ops__empty {
  margin: 0; padding: 12px 15px; font-size: 12px; color: var(--ink-3);
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); line-height: 1.5;
}

.ops code {
  font-family: var(--mono); font-size: 11.5px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  padding: 1px 4px; border-radius: 4px; white-space: nowrap;
}
.ops__note code, .ops__cap code, .ops__d code, .ops__helpBody code,
.ops__chip code { background: none; padding: 0; }
.ops__chip code { font-size: 11.5px; font-weight: 600; color: var(--ink); }

/* A proportion drawn beside its number, never instead of it. Named __meter rather than
   __bar because __bar is already the header's flex row — one class, two jobs, and the
   later rule silently flattened the page header into a 46px block. */
.ops__meter {
  display: inline-block; vertical-align: middle; width: 44px; height: 4px;
  margin-left: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 2px; overflow: hidden;
}
.ops__meter i { display: block; height: 100%; background: var(--sage-soft); }

/* --- Alerts ---
   Loud when there is something, one quiet line when there is not. A healthy console
   should not look busy. */
.ops__alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ops__alert {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; font-size: 12.5px; line-height: 1.45;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius);
  background: var(--surface);
}
.ops__alert .ops__icon { align-self: center; }
.ops__alert--critical {
  border-left-color: var(--red); color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}
.ops__alert--warning { border-left-color: var(--orange-strong); color: var(--orange-strong); }
.ops__alert--info { border-left-color: var(--blue); color: var(--blue); }
.ops__alertTag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.ops__alert strong { color: var(--ink); }
.ops__alertD { color: var(--ink-3); flex: 1 1 320px; }
.ops__alertGo { font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.ops__clear {
  margin: 0; padding: 7px 12px; font-size: 12px; line-height: 1.4;
  color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: var(--radius); display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.ops__clear .ops__icon { color: var(--green-strong); flex: 0 0 auto; }
.ops__clear strong { color: var(--ink); font-size: 12.5px; }
/* Label/value pairs, not a sentence: the top of this page is scanned, not read. */
.ops__clearItems { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ops__clearItem {
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ops__clearItem b { color: var(--ink-2); font-weight: 700; margin-left: 3px; }

/* --- Filter bar ---
   Folded, because eight controls is a lot of permanent vertical space for something most
   passes never touch. The summary carries the filters actually in force, so a filtered
   view can never be mistaken for an unfiltered one. */
.ops__filterFold {
  margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.ops__filterSum {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 13px; cursor: pointer; list-style: none; font-size: 12px;
}
.ops__filterSum::-webkit-details-marker { display: none; }
.ops__filterSum:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ops__filterLabel {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700;
}
.ops__filterActive { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ops__filterFold[open] .ops__filterSum { border-bottom: 1px solid var(--border); }
.ops__filterFold .ops__filters { margin: 0; border: 0; border-radius: 0; background: none; }

.ops__filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 11px;
  margin: 0 0 18px; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.ops__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ops__field > span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); font-weight: 700;
}
.ops__field select, .ops__field input {
  font: inherit; font-size: 12px; padding: 4px 7px; max-width: 178px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--bg); color: var(--ink);
}
.ops__field select:focus, .ops__field input:focus,
.ops__radio input:focus-visible + span {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.ops__ranges {
  display: flex; gap: 0; border: 1px solid var(--border-strong);
  border-radius: 7px; overflow: hidden;
}
.ops__radio { position: relative; }
.ops__radio input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.ops__radio > span {
  display: block; font-size: 12px; padding: 5px 11px; white-space: nowrap;
  border-right: 1px solid var(--border-strong); color: var(--ink-2);
}
.ops__radio:last-child > span { border-right: 0; }
.ops__radio.is-on > span { background: var(--sage-dark); color: var(--cream); font-weight: 600; }
.ops__filterActions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.ops__rowForm { display: flex; gap: 5px; align-items: center; margin: 0; }
.ops__rowForm select {
  font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink); max-width: 185px;
}

/* --- Charts ---
   Hand-rolled inline SVG: two charts, a CSP that forbids inline <script>, and no
   interaction to build. A chart also has to earn its height — below five active days the
   renderer tabulates instead, so a mostly-empty rectangle never pushes the diagnostic
   tables off the screen. */
.ops__fig { margin: 0; }
.ops__chart {
  width: 100%; height: 112px; display: block;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 0;
}
.ops__chartDet { fill: var(--sage-soft); }
.ops__chartAi { fill: var(--accent); }
.ops__chartLine { fill: none; stroke: var(--gold-strong); stroke-width: 1.6; }
.ops__chartAxis { stroke: var(--border-strong); stroke-width: 1; }
.ops__figcap {
  display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 7px 0 0;
  font-size: 11px; color: var(--ink-3);
}
.ops__key { display: inline-flex; align-items: center; gap: 6px; }
.ops__sw { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.ops__sw--det { background: var(--sage-soft); }
.ops__sw--ai { background: var(--accent); }
.ops__sw--line { height: 3px; background: var(--gold-strong); border-radius: 2px; }
.ops__details, .ops__more { margin: 9px 0 0; font-size: 12px; }
.ops__details summary, .ops__more summary {
  cursor: pointer; color: var(--accent); font-size: 11.5px; padding: 3px 0;
}
.ops__details summary:focus-visible, .ops__more summary:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.ops__details .ops__tw, .ops__more .ops__tw { margin-top: 7px; }

/* --- Demonstration mode ---
   Loud on purpose. Fixture data that could be mistaken for a production measurement
   would be worse than no demonstration at all, so this is unmissable and repeated in the
   page title and the <h1>. */
.ops__demo {
  margin: 0 0 14px; padding: 11px 15px; font-size: 12.5px; line-height: 1.55;
  border: 2px solid var(--red); border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
  color: var(--ink);
}
.ops__demo strong { letter-spacing: .03em; }
.ops__demo a { margin-left: 6px; }
.ops--demo { border-top: 4px solid var(--red); padding-top: 14px; }
.ops__demoTag {
  font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--red); border: 1px solid var(--red);
  border-radius: 999px; padding: 2px 8px; vertical-align: middle; margin-left: 7px;
}

.ops__foot { max-width: 1560px; margin: 0 auto; }
.ops .flash, .ops .warn { font-size: 12.5px; }

/* Two-up where the content is genuinely paired. minmax(430px, 1fr) rather than a fixed
   two-column grid: below that width a table starts scrolling inside a half-width column,
   which is worse than simply stacking. */
.ops__cols {
  display: grid; gap: 16px 20px;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  align-items: start;
}
.ops__cols > div { min-width: 0; }

/* Below a laptop the two-up sections have already collapsed (auto-fit); this is the
   phone/tablet step, where the strips stop trying to be strips and the sticky header
   stops trying to be one line. Tables keep scrolling inside their own container — the
   page body never scrolls sideways. */
@media (max-width: 1100px) {
  .ops__kpis--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops__kpi { border-bottom: 1px solid var(--border); }
  .ops__kpi--hero { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body.wide main.ops, .ops, .ops__head, .ops__foot { max-width: 100%; }
  .ops__status, .ops__status--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops__statusItem { min-width: 0; }
  .ops__kpis--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops__kpiV { font-size: 18px; }
  .ops__kpi--hero .ops__kpiV { font-size: 24px; }
  .ops__filterActions { margin-left: 0; }
  .ops__domainBody { border-left: 0; padding-left: 0; padding-top: 12px; }
  .ops__utility { width: 100%; }
  .ops__util { flex: 1 1 auto; justify-content: center; }
  .ops__field select, .ops__field input { max-width: none; width: 100%; }
  .ops__field { flex: 1 1 148px; }
  /* The header stops being sticky once it would wrap to three rows: on a short tablet
     viewport a 120px sticky bar costs more than it returns. */
  .ops__head { position: static; }
  .ops__domain, .ops__block, .ops__domainT, .ops__blockH h3 { scroll-margin-top: 8px; }
  .ops__chips { order: 3; width: 100%; }
  .ops__actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .ops__status, .ops__status--six, .ops__kpis--primary, .ops__kpis--secondary {
    grid-template-columns: minmax(0, 1fr);
  }
  .ops__statusItem { border-right: 0; }
  .ops__bar h1 { font-size: 17px; }
  .ops__ranges { flex-wrap: wrap; }
  .ops__helpBody { width: min(52ch, 88vw); left: auto; right: 0; }
}

/* --- Search ------------------------------------------------------------------ */

.masthead__search { max-width: 940px; margin: 0 auto; padding: 0 20px 16px; }
.search { display: flex; flex-wrap: wrap; gap: .5rem .6rem; max-width: 28rem; width: 100%; }
.masthead .search::before {
  content: "Search the archive";
  flex: 0 0 100%;
  font-family: "Space Grotesk", var(--sans);
  font-size: .92rem; font-weight: 600; line-height: 1.2; color: var(--ink-2);
}
.search__input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 1rem;
  min-height: 44px; padding: .78rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--ink);
}
.search__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search__go {
  min-height: 44px; font: inherit; font-size: .95rem; font-weight: 600; padding: .78rem 1rem;
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.search__go:hover { border-color: var(--accent); color: var(--accent); }
.search__count { margin: 0 0 24px; color: var(--ink-2); font-size: 14px; }

mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; }

.sresults { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sr__link {
  display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
a.sr__link:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.sr__icon { font-size: 16px; line-height: 1.3; flex: none; }
.sr__body { display: grid; gap: 2px; min-width: 0; }
.sr__title { font-weight: 600; }
.sr__route { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sr__meta { font-size: 12px; color: var(--ink-3); }
.sr__snip { font-size: 13px; color: var(--ink-2); max-width: var(--measure); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: flex; align-items: baseline; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 13px; font-size: 13px;
}
.chip__name { font-weight: 600; }
.chip__n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip__full { font-size: 12px; color: var(--ink-3); }

/* --- Passport & Driver's License covers (masthead) --------------------- */

.masthead__passports { align-items: flex-start; }
.masthead__passports .section__label { margin-bottom: 8px; }
.masthead__docs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.masthead__doc-group { display: flex; flex-direction: column; }
.passport-cases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.passport-case { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; }
.passport-case__art { flex: none; border-radius: 3px; box-shadow: var(--shadow); }
.passport-case__cover { fill: #16233f; }                 /* navy — the global default */
.passport-case__art[data-tone="burgundy"] .passport-case__cover { fill: #591b26; }
.passport-case__spine { fill: rgba(255, 255, 255, .1); }
.passport-case__seal { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .85; }
.passport-case__star { fill: var(--gold); }
.passport-case__label {
  font-family: var(--sans); font-size: 6.5px; font-weight: 700;
  letter-spacing: .13em; fill: var(--gold); text-anchor: middle; opacity: .9;
}
.passport-case__name { font-size: 10px; color: var(--ink-2); text-align: center; line-height: 1.15; }
.passport-case__expiry { font-size: 9px; color: var(--ink-3); text-align: center; line-height: 1.15; }

/* Driver's License card */
.license-case { width: 64px; }
.license-case__art {
  flex: none; border-radius: 3px; box-shadow: var(--shadow);
  background: #f6f8fb;
}
.license-case__base { fill: #e8ecf3; stroke: rgba(0, 0, 0, .08); stroke-width: 1; }
.license-case__header { fill: #22517d; }
.license-case__title {
  font-family: var(--sans); font-size: 4.4px; font-weight: 700;
  letter-spacing: .05em; fill: #ffffff; opacity: .95;
}
.license-case__code {
  font-family: var(--sans); font-size: 4.6px; font-weight: 800;
  fill: #ffdf70; text-anchor: end;
}
.license-case__photo-bg { fill: #d3dbe6; }
.license-case__photo-head, .license-case__photo-body { fill: #99a8bd; }
.license-case__chip { fill: #e3bc57; stroke: #c29938; stroke-width: .4; }
.license-case__chip-line { stroke: #c29938; stroke-width: .4; }
.license-case__line { fill: #b3bfcf; }

@media (max-width: 560px) {
  .masthead__search { padding-bottom: 14px; }
  .masthead .search { max-width: none; }
  .masthead .search::before { font-size: .9rem; }
  .search__input,
  .search__go {
    width: 100%;
  }
  .search__go { justify-content: center; }
}

@media (max-width: 640px) {
  main { padding-left: 16px; padding-right: 16px; }
  .masthead__bar { padding-left: 16px; padding-right: 16px; gap: 16px; }
  .masthead h1 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .masthead__purpose { max-width: none; }
  .travel-spark { width: 100%; max-width: none; }
  .trip-sections-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-left: 0; margin-right: 0; padding: 12px 14px;
    overflow-x: visible;
    border-radius: 26px;
  }
  .trip-sections-nav a {
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: .68rem .9rem;
  }
  .card__head { padding: 16px; gap: 12px; }
  .card__head-right { width: 100%; }
  .card__pocket-btn { padding: .5rem .72rem; }
  .trips-section--essentials {
    max-width: none;
    margin-left: 0; margin-right: 0;
    padding: 16px;
  }
  .masthead__essentials { grid-template-columns: 1fr; }
  .trips-section--essentials .masthead__docs { gap: 16px; }
  .trips-section .globe3d__cta .btn {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (min-width: 720px) {
  .trip-sections-nav {
    position: sticky;
    top: 12px;
    z-index: 15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .travel-spark,
  .trip-sections-nav a,
  .card,
  .search__go,
  .search__input {
    transition: none !important;
  }
}

/* --- Globe time scrubber (/globe) ---------------------------------------------
   Ships `hidden` and is revealed by site/public/globe.js, so a page without
   JavaScript never shows a control that cannot do anything. */

.globe3d__time {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 620px; margin: 4px auto 0;
}
.globe3d__time[hidden] { display: none; }

.globe3d__play {
  flex: none; width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-size: 12px; line-height: 1; display: grid; place-items: center;
}
.globe3d__play:hover { border-color: var(--accent); color: var(--accent); }
.globe3d__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.globe3d__range { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.globe3d__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.globe3d__year {
  flex: none; margin: 0; min-width: 12ch; text-align: right;
  font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.globe3d__year strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .globe3d__year { min-width: 8ch; }
  .globe3d__year span { display: none; }
}

/* --- Country coverage (index) -------------------------------------------------
   A single ratio against a fixed limit, which is what a meter is for — and this
   one is the card in miniature: the scratched hue filling a track of the same
   foil, so the bar and the map are visibly the same measure. Labels and numbers
   stay on text tokens. */

.coverage { margin-top: 8px; display: grid; gap: 12px; }
.coverage__bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(105deg, var(--foil-hi), var(--foil-mid) 45%, var(--foil-lo));
}
.coverage__fill { display: block; height: 100%; border-radius: 999px; background: var(--scratch); }
.coverage__cap {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
  margin: 0; font-size: 13px;
}
.coverage__cap strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.coverage__cap span { color: var(--ink-3); }

/* The scratch-off card. Still one binary measure and still one revealed hue, so
   nothing here shades by visit count. The gold is a MATERIAL, not a data colour:
   it stays gold in both schemes and only its steps change, the way a physical
   foil looks different under different light but is still the same foil.

   Rose against that gold clears the separation checks in both schemes where the
   old green did not — see the note above worldMap() for the numbers. Dots mark
   the countries too small to read at this size: a marker, not a second measure,
   so it is the same rose. */

.wmap {
  width: 100%; height: auto; display: block;
  background: var(--globe-sea); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.wmap__sea { fill: var(--globe-sea); }

/* What is under the foil. Only ever seen in the ragged rim where the scratch
   filter pulls the coating back past a border — which is exactly where a real
   card shows its pale print. */
.wmap__print { fill: var(--wmap-print); }

.wmap__reveal {
  fill: var(--scratch);
  /* Two scratched neighbours are one shape without this. */
  stroke: var(--globe-sea); stroke-width: .4; stroke-opacity: .5;
}

.wmap__stop--hi { stop-color: var(--foil-hi); }
.wmap__stop--mid { stop-color: var(--foil-mid); }
.wmap__stop--lo { stop-color: var(--foil-lo); }

/* Faint on purpose. At the opacity where you can see this as stripes it has
   stopped being a surface and started being a hatch pattern, which reads as a
   second category rather than as metal. */
.wmap__grain { stroke-width: 1; }
.wmap__grain--hi { stroke: #fff; stroke-opacity: .1; }
.wmap__grain--lo { stroke: #4b3712; stroke-opacity: .07; }

.wmap__sheen { stop-color: #fff; }
.wmap__sheen--off { stop-opacity: 0; }
.wmap__sheen--on { stop-opacity: .34; }
.wmap__sheen--half { stop-opacity: .15; }

/* Borders printed on the coating, so the unscratched half is a map and not a
   gold rectangle. Ink of the foil's own shadow step, not a text token — it is
   part of the material. */
.wmap__border { fill: none; stroke: var(--foil-ink); stroke-opacity: .45; stroke-width: .5; }

.wmap__fleck { fill: var(--foil-mid); fill-opacity: .5; }

/* Transparent, above everything, and the only layer that takes a pointer: the
   foil sits over the fill, so hovering the fill itself would land on the coating
   for every country whose middle is still covered. */
.wmap__hit { fill: #fff; fill-opacity: 0; pointer-events: all; cursor: default; }
.wmap__hit:hover { fill-opacity: .22; }

.wmap__key {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 12px; color: var(--ink-2);
}
.wmap__key li { display: flex; align-items: center; gap: 7px; }
.wmap__swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.wmap__swatch--seen { background: var(--scratch); }
.wmap__swatch--foil {
  background: linear-gradient(135deg, var(--foil-hi), var(--foil-mid) 45%, var(--foil-lo));
}
.wmap__swatch--mark { width: 9px; height: 9px; border-radius: 50%; background: var(--scratch); }

.masthead__nav { display: flex; gap: 16px; align-items: baseline; font-size: 13px; }
.masthead__search { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.masthead__search--end { justify-content: flex-end; }


/* --- Brand chrome (site/render.js: brandBar/mark/divider) -------------------
   .pb, .lp__mark and .lp__divider open EVERY page now, not just the public
   ones — the archive, search, globe and trip pages all render brandBar() at
   the top (site/render.js), so the "lp" prefix here predates that but the
   rules underneath it are shared site-wide. Everything else in this block is
   still landing/sample/colophon-only (site/landing.js): the hero, the ticket
   steps, the feature blocks, the dusk closer. Quieter than the archive on
   purpose — little data on the public pages, so nothing should compete with
   the one sentence and the two buttons. */

/* The bar: brand left, way in (or nothing) right. A hairline plaque-edge marks
   where the chrome ends and the page proper begins. */
.pb {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 16px; padding: 16px 20px;
  max-width: 1100px; margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.pb__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.pb__mark { width: 30px; height: auto; transition: transform .3s ease; }
.pb__brand:hover .pb__mark { transform: rotate(-9deg); }
@media (prefers-reduced-motion: reduce) { .pb__mark { transition: none; } }
/* The signed-in nav (email + 4 buttons) has nowhere near enough room next
   to the brand on a phone — .pb's own flex-wrap above lets this whole row
   drop under the brand instead of forcing the page wider than the
   viewport, and this wraps a second time within itself if even that row
   doesn't fit. */
.pb__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pb__login {
  font-size: 14px; font-weight: 650; text-decoration: none;
  padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); color: var(--ink);
}
.public-login {
  --login-ink: var(--ink);
  --login-border: var(--border-strong);
  --login-hover: var(--accent-strong);
  --login-focus: var(--focus);
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  border-color: var(--login-border);
  color: var(--login-ink);
  font-family: "Space Grotesk", var(--sans);
  font-weight: 650;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.public-login--night {
  --login-ink: var(--public-night-ink);
  --login-border: rgba(244, 241, 230, .48);
  --login-hover: #f1c66c;
  --login-focus: #f1c66c;
}
.public-login:visited { color: var(--login-ink); }
.public-login:hover,
.public-login:active { border-color: var(--login-hover); color: var(--login-hover); }
.public-login:focus-visible { outline: 3px solid var(--login-focus); outline-offset: 3px; }
.public-bar :is(.pb__brand, .public-nav__desktop > a:not(.public-login)):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) { .public-login { transition: none; } }
.pb__user { font-size: 13px; color: var(--ink-3); }
.pb__nav form { margin: 0; }
.pb__nav .btn { padding: 6px 12px; font-size: 13px; }

/* Phase 11: the trial countdown, directly under the brand bar on every
   signed-in page it's threaded into (site/render.js's trialBanner()). Full-
   width strip so it reads as a status bar, not another card; the same
   --hd-gold-with-fallback tint as .upgrade-note ties it to the same "this is
   about Pro" visual language rather than inventing a second one. */
.trial-banner {
  background: color-mix(in srgb, var(--hd-gold, var(--accent)) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--hd-gold, var(--accent)) 30%, transparent);
}
.trial-banner__body {
  max-width: 1100px; margin: 0 auto; padding: 10px 20px;
  font-size: 13.5px; color: var(--ink-2); text-align: center;
}
/* The base `a { color: var(--accent) }` drops to 4.44:1 against this
   banner's own 10%-gold-tinted background — under the 4.5:1 floor by a
   hair, axe-confirmed. See --accent-strong's definition above. */
.trial-banner__body a { font-weight: 600; color: var(--accent-strong); }

/* The compass from the logo, reduced to a plain waypoint mark rather than
   redrawn small — a miniature copy of a detailed illustration reads as a
   worse version of it; a plain mark reads as its own thing. Shared with
   site/render.js's divider(), used site-wide. */
.lp__mark { display: block; }

/* The intro paragraph style for a public page with no hero of its own —
   /colophon, /privacy, /terms. The landing page's own lede is
   .hedge__lede below; this one stays because those three pages still use it. */
.lp__lede {
  margin: 0 auto; max-width: 56ch; font-size: 17.5px; line-height: 1.64;
  color: var(--ink-2);
}

/* A quiet seam between sections — one rule, the waypoint mark at its centre.
   Shared with site/render.js's renderIndex (the archive). */
.lp__divider {
  margin: 4px 0 44px; display: flex; align-items: center; gap: 16px;
  color: var(--border-strong);
}
.lp__divider::before, .lp__divider::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.lp__divider .lp__mark { color: var(--sage-soft); flex: none; }

.publicFooter { max-width: 1180px; padding-top: 36px; }
.publicFooter__groups {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.publicFooter__group { display: grid; align-content: start; gap: 8px; }
.publicFooter__title {
  margin: 0 0 4px; color: var(--ink); font: 700 12px/1.2 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
}
.publicFooter__group a { width: fit-content; min-block-size: 24px; color: var(--ink-2); text-decoration: none; }
.publicFooter__group a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.publicFooter__group a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 640px) {
  .publicFooter { padding-inline: 20px; }
  .publicFooter__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}

/* --- The landing page: "hedge" -----------------------------------------
   site/landing.js's renderLanding() only. Everything below is scoped under
   .hedge (the wrapper div the whole page renders inside) so none of it can
   leak onto the archive, admin, or the other public pages, which keep the
   cream/day palette above. This is the one page allowed to ignore the
   reader's light/dark preference outright — it is a poster, not a document,
   and a poster has its own fixed colours the way a printed one would.

   Two type families live only here, self-hosted under /fonts (no CDN — see
   the CSP note in site/server.js): Playfair Display for display type,
   Space Grotesk for everything else. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/playfair-display-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/playfair-display-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/playfair-display-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/space-grotesk-variable.woff2") format("woff2");
}

/* The night palette, shared by every page that runs the brand's dark bands:
   the landing page (.hedge) and the account settings hub (.acct). Kept OFF
   :root on purpose — a page opts in by carrying one of these classes, so the
   night can never leak into /trips or the editor by accident. Declaring them
   here rather than twice is what stops the two pages drifting apart the first
   time one of these hexes is corrected. */
.hedge, .acct {
  --hd-night: #0F150E; --hd-night2: #161D15;
  --hd-ink: #F4F1E6; --hd-ink-soft: #B9BFAF;
  --hd-line: #2A332A;
  --hd-gold: #D8AA57; --hd-terra: #D48A62; --hd-sage: #8FA985; --hd-sea: #7FB9A4;
  /* A darker variant of --hd-gold for focus indicators only. The brand gold
     itself only reaches ~1.99:1 against .acct's paper background in light
     mode — nowhere near WCAG 2.4.11's 3:1 floor for a focus indicator, and a
     translucent ring of it is worse still (measured ~1.14:1 at 20% opacity).
     This keeps the same hue rather than falling back to a neutral outline,
     at a lightness that clears 3:1 against both the light AND dark surface
     (3.6:1 / 4.3:1 respectively — see the a11y audit's Finding H). */
  --hd-gold-focus: #A87830;
  --hd-serif: "Playfair Display", Georgia, serif;
  --hd-sans: "Space Grotesk", var(--sans);
}

/* Only .hedge paints itself night end to end; .acct is paper between its
   bands and sets its own surface. */
.hedge {
  background: var(--hd-night);
  font-family: var(--hd-sans);
  color: var(--hd-ink);
}
/* The page's top-level bands (hero/stats/day/day/refuse/cta2) are all plain
   <section> siblings, so the global `section + section { margin-top: 48px }`
   rule further down this file (written for a regular content column) also
   matches them — and since every band's own background+padding already does
   the spacing job, that inherited margin only ever showed as this page's
   night background leaking through as a gap, most visibly between the two
   back-to-back cream .hedge__day bands. */
.hedge > section + section { margin-top: 0; }
/* No blanket `.hedge a { color: inherit }` here on purpose: every link below
   sets its own colour, and a two-part selector like that would outrank the
   single-class rules on .hedge__gate and .hedge__btn* by specificity — which
   is exactly the bug that made "Open the Gate" render cream-on-cream. */

/* --- Nav: transparent, laid over the hero, brand left, way in on the right.
   Reuses the real brandBar()/sessionNav() markup (site/render.js) — so a
   signed-in reader sees their own session menu here exactly as everywhere
   else on the site — restyled for a transparent plate over a photo rather
   than a bordered bar over paper. */
.hedge__nav {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px clamp(20px, 4vw, 32px);
  max-width: none; border-bottom: 0;
}
.hedge__nav .pb__brand { font-family: var(--hd-serif); font-size: 21px; color: var(--hd-ink); gap: 12px; }
/* /logo-mark-crop.png IS the arch, pre-cropped at build time (547:348, the
   same ratio this box used to carve out of the full lockup image via
   overflow:hidden + an oversized absolutely-positioned <img> — see git
   history if that math is ever needed again). A plain scaled <img> is all
   that's needed now that the file itself is already the right shape. */
.hedge__nav .pb__mark { height: 40px; width: auto; flex: none; }
.hedge__nav .pb__mark img { display: block; height: 100%; width: auto; }
.hedge__nav .pb__nav { gap: 14px; }
.hedge__nav .pb__user { color: var(--hd-ink-soft); }
.hedge__nav .pb__nav .btn {
  background: transparent; color: var(--hd-ink-soft);
  border: 1px solid rgba(244, 241, 230, .28); border-radius: 2px;
}
.hedge__nav .pb__nav .btn:hover { border-color: var(--hd-ink); color: var(--hd-ink); }
.hedge__gate {
  display: inline-flex; align-items: center;
  font-family: var(--hd-sans); font-size: 14px; font-weight: 600; text-decoration: none;
  background: var(--hd-ink); color: var(--hd-night);
  padding: 10px 18px; border-radius: 2px; transition: background .15s ease;
}
/* Below ~480px "Log in" + "Join" + the wordmark no longer fit one row
   without wrapping onto the hero art — the icon alone still identifies
   the brand, so the text label is what gives. `:not(.pb__mark)` matters:
   the icon is ALSO a <span> (wrapping its <img>), and the plain
   `.pb__brand span` selector this replaced matched both, hiding the icon
   right along with the wordmark it was meant to leave behind — found by
   actually checking this page at a phone width, not just this rule. */
@media (max-width: 480px) {
  .hedge__nav { padding: 16px; }
  .hedge__nav .pb__brand span:not(.pb__mark) { display: none; }
  .hedge__nav .pb__nav { gap: 8px; }
  .hedge__gate { padding: 8px 12px; font-size: 13px; }
}
.hedge__gate:hover { background: var(--hd-gold); }
@media (prefers-reduced-motion: reduce) { .hedge__gate { transition: none; } }

/* --- Hero: the night sky the whole page opens on. The route map is drawn
   into .hedge__map by /landing-hero.js (progressive enhancement — the radial
   vignette and gradient alone are a complete, if static, opening if the
   script never runs). */
.hedge__hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--hd-night);
}
.hedge__map {
  position: absolute; inset: -6% -4% auto -4%; top: 6%;
  opacity: .62; pointer-events: none;
}
.hedge__map svg { display: block; width: 100%; height: auto; }
.hedge__heroVeil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 46%,
    rgba(15, 21, 14, .92), rgba(15, 21, 14, .55) 55%, transparent 80%);
}
.hedge__heroFade {
  position: absolute; inset: auto 0 0 0; height: 38%; pointer-events: none;
  background: linear-gradient(to top, var(--hd-night), transparent);
}
.hedge__heroBody {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px 24px;
}
.hedge__lockup {
  width: min(300px, 30vw); min-width: 200px; height: auto;
  margin: 0 auto 6px;
  animation: hedge-fade .8s ease both;
}
@keyframes hedge-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hedge__lockup { animation: none; } }
.hedge__h1 {
  margin: 0; max-width: 15ch;
  font-family: var(--hd-serif); font-weight: 400;
  font-size: clamp(40px, 8vw, 100px); line-height: .94; letter-spacing: -.02em;
  color: var(--hd-ink); text-wrap: balance;
}
.hedge__h1 em { font-style: italic; color: var(--hd-gold); }
.hedge__lede {
  margin: 26px auto 0; max-width: 56ch;
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; color: var(--hd-ink-soft);
  text-wrap: pretty;
}
.hedge__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.hedge__btn {
  font-family: var(--hd-sans); font-size: 15px; font-weight: 600; text-decoration: none;
  padding: 15px 30px; border-radius: 2px; transition: background .15s ease, border-color .15s ease;
}
.hedge__btn--solid { background: var(--hd-gold); color: var(--hd-night); }
.hedge__btn--solid:hover { background: var(--hd-ink); }
.hedge__btn--ghost { color: var(--hd-ink); border: 1px solid rgba(244, 241, 230, .28); }
.hedge__btn--ghost:hover { border-color: var(--hd-ink); }
@media (prefers-reduced-motion: reduce) { .hedge__btn { transition: none; } }
.hedge__trust { margin: 18px 0 0; font-size: 13px; color: rgba(244, 241, 230, .5); }

/* --- Stats: fixed-position count-up, server-rendered with the real value as
   its text content — landing-hero.js only animates the digits from zero, so
   a reader with JS off (or a crawler) sees the correct number immediately.
   Sourced from site/demo.js's fixture, same as /sample, and labelled the same
   way that page labels every invented figure. */
.hedge__stats { background: var(--hd-night2); border-top: 1px solid var(--hd-line); border-bottom: 1px solid var(--hd-line); padding: 40px 24px 44px; }
.hedge__statsLabel { max-width: 1180px; margin: 0 auto 20px; text-align: center; font-size: 12px; color: var(--hd-ink-soft); }
.hedge__statsLabel .lp__sample { color: rgba(244, 241, 230, .7); border-color: rgba(216, 170, 87, .4); background: rgba(216, 170, 87, .12); }
.hedge__statsGrid {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center;
}
.hedge__statValue { font-family: var(--hd-serif); font-size: clamp(36px, 5vw, 58px); line-height: 1; color: var(--hd-ink); }
.hedge__statLabel { margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 230, .5); }

/* --- Day sections: "How it works" and "Why bother" sit on the ordinary cream
   surface, the site's own day palette rather than new dusk-only tokens —
   this page dips out of the night twice before its final return to it. */
.hedge__day { background: var(--cream); color: var(--sage-dark); padding: 88px 24px; }
.hedge__day + .hedge__day { padding-top: 0; }
.hedge__dayInner { max-width: 1180px; margin: 0 auto; }
.hedge__h2 {
  margin: 0 0 52px; max-width: 20ch;
  font-family: var(--hd-serif); font-weight: 400;
  font-size: clamp(30px, 5vw, 58px); line-height: 1.03; letter-spacing: -.02em;
  color: var(--sage-dark);
}

/* How it works: a numbered route, one row per step. */
.hedge__steps { display: grid; }
.hedge__stepRow {
  display: grid; gap: 20px; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  padding: 30px 0; border-top: 1px solid var(--border);
}
.hedge__steps .hedge__stepRow:last-child { border-bottom: 1px solid var(--border); }
/* A plain waypoint number now, not a numeral-plus-category-tag pair — the
   same "No. 0X" ticket-stub language the rest of the site already uses. */
.hedge__stepNo {
  font-family: var(--hd-serif); font-style: italic;
  font-size: clamp(36px, 5vw, 58px); line-height: .9; color: var(--tone, var(--sage-soft));
}
.hedge__stepTitle { margin: 0 0 8px; font-family: var(--hd-serif); font-weight: 400; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.14; color: var(--sage-dark); }
.hedge__stepBody { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Why bother: six index cards with a coloured top rule. */
.hedge__why { display: grid; gap: 30px 48px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.hedge__whyItem { padding-top: 18px; border-top: 2px solid var(--tone, var(--sage-dark)); }
.hedge__whyTitle { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--sage-dark); }
.hedge__whyBody { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* --- Refuse: back to night, a two-column ledger. */
.hedge__refuse { background: var(--hd-night); padding: 84px 24px; }
.hedge__refuseInner {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start;
}
.hedge__refuseTitle {
  margin: 0; font-family: var(--hd-serif); font-weight: 400;
  font-size: clamp(28px, 4.2vw, 48px); line-height: 1.05; letter-spacing: -.02em; color: var(--hd-ink);
}
.hedge__refuseList { list-style: none; margin: 0; padding: 0; }
.hedge__refuseList li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--hd-line);
}
.hedge__refuseList li:last-child { border-bottom: 1px solid var(--hd-line); }
.hedge__refuseNo { font-family: var(--hd-serif); font-style: italic; font-size: 19px; color: var(--tone, var(--hd-sage)); }
.hedge__refuseText { font-size: 15px; line-height: 1.6; color: var(--hd-ink-soft); }

/* --- Closing gate: the bordered plaque, gold glow rising from below. */
.hedge__cta2 { background: var(--hd-night); padding: 0 24px 88px; }
.hedge__ctaCard {
  max-width: 760px; margin: 0 auto; padding: 68px 36px 54px; text-align: center;
  border: 1px solid rgba(216, 170, 87, .38); border-radius: 340px 340px 6px 6px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(216, 170, 87, .16), transparent 62%);
}
.hedge__ctaMark { margin: 0 auto 16px; color: var(--hd-gold); display: flex; justify-content: center; }
.hedge__ctaTitle {
  margin: 0 auto; max-width: 18ch; font-family: var(--hd-serif); font-weight: 400;
  font-size: clamp(28px, 4.6vw, 50px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--hd-ink); text-wrap: balance;
}
.hedge__ctaSub { margin: 16px auto 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--hd-ink-soft); }
.hedge__cta2 .hedge__cta { margin-top: 30px; }

/* --- Footer: brand mark left, the same public links every other page's
   footer carries (minus "Home" — this is home), right. */
.hedge__foot { background: var(--hd-night); border-top: 1px solid var(--hd-line); padding: 26px 24px 40px; }
.hedge__footInner { max-width: 1180px; margin: 0 auto; font-size: 13px; color: rgba(244, 241, 230, .5); }
.hedge__footBrand { display: flex; align-items: center; gap: 10px; }
/* /logo-mark-crop.png is pre-cropped at build time — see the matching note
   on .hedge__nav .pb__mark above. */
.hedge__footMark { height: 26px; width: auto; flex: none; opacity: .75; }
.hedge__footMark img { display: block; height: 100%; width: auto; }
.hedge__foot .publicFooter__groups { margin-top: 28px; }
.hedge__foot .publicFooter__title { color: var(--hd-ink); }
.hedge__foot .publicFooter__group a { color: var(--hd-ink-soft); }
.hedge__foot .publicFooter__group a:hover { color: var(--hd-gold); }
.hedge__foot .publicFooter__group a:focus-visible { outline-color: var(--hd-gold); }

@media (max-width: 640px) {
  .hedge__stepRow { grid-template-columns: 1fr; gap: 10px; }
}

/* Authentication is deliberately a quiet, task-first threshold: the route is
   atmosphere, while the panel holds the only job on the page. It uses the
   same paper, hedge ink, and foil trace as the public system without becoming
   a second landing-page hero. */
.gate--auth {
  --gate-forest: #0F150E;
  position: relative; isolation: isolate; max-width: none; margin: 0; overflow: clip;
  padding: 0 20px clamp(64px, 7vw, 80px);
}
.gate--auth::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--sage-dark) 3%, transparent) 0 1px, transparent 1px 24px),
    radial-gradient(72% 45% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
    radial-gradient(70% 45% at 0% 100%, color-mix(in srgb, var(--terracotta) 8%, transparent), transparent 72%),
    var(--bg);
  pointer-events: none;
}
.gate__rail { height: clamp(18px, 1.7vw, 24px); margin-inline: -20px; background: var(--gate-forest); }
.gate__rail::after { content: ""; display: block; width: min(28vw, 360px); height: 100%; margin-inline: auto 12%; border-top: 1px dashed color-mix(in srgb, var(--sage-soft) 65%, transparent); transform: translateY(50%); }
.gate__stage { position: relative; width: min(100%, 600px); margin: 0 auto; padding-top: clamp(56px, 6vw, 64px); }
.gate__route {
  position: absolute; z-index: -1; top: 18px; right: -8px; width: 156px; height: 70px;
  opacity: .68; pointer-events: none;
  background:
    radial-gradient(circle at 17% 67%, var(--gold) 0 4px, transparent 4.8px),
    radial-gradient(circle at 86% 25%, var(--terracotta) 0 4px, transparent 4.8px);
}
.gate__route::before {
  content: ""; position: absolute; inset: 14px 10px 12px;
  border-top: 2px dashed color-mix(in srgb, var(--sage-strong) 55%, transparent);
  border-radius: 58% 42% 62% 38%; transform: rotate(-13deg);
}
.gate__route::after {
  content: ""; position: absolute; top: 28px; left: 52px; width: 15px; height: 15px;
  border: 1px solid color-mix(in srgb, var(--gold-strong) 60%, transparent); border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 11%, transparent);
}
.gate__title {
  max-width: 560px; margin: 0 auto 22px; font-family: "Playfair Display", var(--serif); font-size: clamp(2.15rem, 5vw, 3rem);
  font-weight: 600; line-height: .98; letter-spacing: -.025em; text-wrap: balance;
}
.gate__form-panel {
  box-sizing: border-box; width: min(100%, 560px); margin-inline: auto; padding: clamp(32px, 3.5vw, 36px); border: 1px solid color-mix(in srgb, var(--border-strong) 86%, var(--gold));
  border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, white);
  box-shadow: 0 2px 4px rgba(44, 62, 46, .06), 0 22px 42px -29px rgba(44, 62, 46, .42);
}
.gate--auth .login__form { max-width: none; gap: 9px; margin: 22px 0 4px; }
.gate--auth .gate__form-panel .login__form { width: 100%; }
.gate--auth .gate__form-panel:has(#email) .login__form,
.gate--auth .gate__form-panel:has(#email) > :not(.login__form) { max-width: 432px; margin-inline: auto; }
.gate--auth .login__form label {
  margin-top: 7px; font-family: "Space Grotesk", var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .035em; text-transform: none; color: var(--ink-2);
}
.gate--auth .login__form input:not([type="hidden"]) {
  width: 100%; min-height: 48px; padding: 11px 12px; font: inherit; font-size: 1rem; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 72%, transparent);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.gate--auth .login__form input:not([type="hidden"]):hover { border-color: color-mix(in srgb, var(--sage-strong) 58%, var(--border-strong)); }
.gate--auth .login__form input:not([type="hidden"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px;
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.gate--auth .login__form input[aria-invalid="true"] { border-color: var(--red); background: color-mix(in srgb, var(--red) 5%, var(--surface)); }
.gate--auth .login__form input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100px var(--surface) inset;
}
.gate--auth .login__form .btn--primary {
  align-self: stretch; min-height: 48px; margin-top: 15px; padding: 11px 18px;
  border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink);
  font-family: "Space Grotesk", var(--sans); font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 18px -13px color-mix(in srgb, var(--sage-dark) 80%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.gate--auth .login__form .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--sage-dark) 88%, transparent); }
.gate--auth .login__form .btn--primary:active { transform: translateY(0); box-shadow: none; }
.gate--auth .login__form .btn--primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.gate--auth .login__form .btn--primary:disabled,
.gate--auth .login__form .btn--primary[aria-disabled="true"] { cursor: not-allowed; opacity: .62; transform: none; box-shadow: none; }
.gate--auth .turnstile-slot { width: 100%; min-height: 65px; margin: 11px 0 7px; }
.gate--auth .turnstile-slot .cf-turnstile { max-width: 100%; }
.gate--auth .warn { margin: 0 0 18px; color: var(--ink); background: color-mix(in srgb, var(--red) 12%, var(--surface)); border-color: color-mix(in srgb, var(--red) 64%, var(--border)); }
.gate--auth .gate__success { max-width: none; margin: 0; color: var(--ink); background: color-mix(in srgb, var(--green) 14%, var(--surface)); border-color: color-mix(in srgb, var(--green) 62%, var(--border)); }
.gate--auth .gate__form-panel > .gate__body:last-child { margin-bottom: 0; }
.gate--auth .gate__body { margin: 0 0 16px; color: var(--ink-2); line-height: 1.62; overflow-wrap: anywhere; }
.gate--auth .gate__sample { max-width: 560px; margin: 22px auto 0; font-size: .92rem; }
.gate--auth :is(a, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.publicFooter--auth { max-width: 1180px; padding-top: 28px; padding-bottom: 36px; border-top: 0; }
.publicFooter--auth::before { content: ""; display: block; margin-bottom: 28px; border-top: 1px solid color-mix(in srgb, var(--border-strong) 72%, var(--gold)); }
@media (prefers-reduced-motion: reduce) {
  .gate--auth .login__form input:not([type="hidden"]), .gate--auth .login__form .btn--primary { transition: none; }
}
@media (max-width: 640px) {
  .gate--auth {
    padding: 0 16px 56px;
  }
  .gate__rail { height: 11px; margin-inline: -16px; }
  .gate__rail::after { width: 104px; margin-inline: auto 0; }
  .gate__stage { width: 100%; padding-top: 30px; }
  .gate__route { top: 4px; right: -28px; width: 112px; height: 42px; transform: scale(.74); transform-origin: top right; }
  .gate__title { margin-bottom: 16px; font-size: 2.1rem; }
  .gate__form-panel { padding: 22px 18px; }
  .gate--auth .login__form { margin-top: 18px; }
}
@media (max-width: 351px) {
  .gate--auth .turnstile-slot { display: flex; justify-content: center; min-height: 140px; }
}

.colo { list-style: none; margin: 28px 0 0; padding: 0; }
.colo__item { padding: 18px 0; border-top: 1px solid var(--border); }
.colo__name { margin: 0 0 4px; font-size: 16px; }
.colo__what { margin: 0 0 4px; color: var(--ink-2); }
.colo__licence { margin: 0; font-size: 13px; color: var(--ink-3); }
.colo__note { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); max-width: var(--measure); }
.colo__foot { margin-top: 28px; font-size: 13px; color: var(--ink-3); max-width: var(--measure); }
.colophon-page { color-scheme: light; width: min(100% - 40px, 1080px); margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); background: #FAF6EE; box-shadow: 0 0 0 100vmax #FAF6EE; clip-path: inset(0 -100vmax); font-family: "Space Grotesk", var(--sans); outline: none; }
.colophon-page__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem); align-items: end; gap: 1.5rem 4rem; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 2px solid var(--sage); }
.colophon-page__kicker { grid-column: 1 / -1; margin: 0; color: var(--accent-strong); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.colophon-page__intro h1 { margin: 0; color: var(--sage-dark); font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; }
.colophon-page__intro > p:last-child { margin: 0; color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; }
.colophon-page__groups { display: grid; gap: clamp(3rem, 7vw, 6rem); padding-top: clamp(3rem, 6vw, 5rem); }
.colophon-group { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 2rem 4rem; }
.colophon-group + .colophon-group { margin-top: 0; }
.colophon-group h2 { margin: 0; color: var(--sage-dark); font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 550; line-height: 1.1; }
.colophon-group .colo { margin: 0; padding: 0; list-style: none; }
.colophon-group .colo__item:first-child { padding-top: 0; border-top: 0; }
.colophon-group .colo__name { font-size: 1.03rem; }
.colophon-group .colo__what { max-width: 66ch; line-height: 1.6; }
.colophon-page__notes { max-width: 66ch; margin-top: clamp(4rem, 8vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--border-strong); }
.colophon-page__notes .colo__foot { margin-top: .8rem; font-size: .9rem; line-height: 1.6; }
.colophon-page a { color: var(--accent-strong); }
.colophon-page a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
@media (prefers-color-scheme: dark) { .colophon-page { --surface: #FFFCF5; --ink: #22312B; --ink-2: #4F5C55; --ink-3: #68736D; --border: #E5DECF; --border-strong: #D3C9B4; --accent-strong: #76511D; --gold-strong: #8F6220; --focus: #76511D; } }
@media (max-width: 720px) { .colophon-page__intro, .colophon-group { grid-template-columns: 1fr; } .colophon-page__intro { align-items: start; } }

/* --- Landing demo sections (site/landing.js + site/demo.js) ----------------- */

/* Invented figures have to be labelled as invented, and the label has to be
   legible rather than a whisper in the corner. */
.lp__sample {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--sage-soft) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage-soft) 45%, transparent);
  vertical-align: middle;
}


/* What a booking cost, in the details line of a trip entry. Set in the mono
   face so a column of prices lines up when the eye runs down the page, and
   given the terracotta accent so it reads as a distinct kind of fact rather
   than another duration. */
.entry__price {
  font-family: var(--mono); font-size: .92em;
  color: var(--accent);
}

/* Price on a compact booking row. Same terracotta and mono face as the trip
   entry, one step down in size so it sits with the meta line rather than
   competing with the title. */
.row__price {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--accent);
  /* Award/miles redemptions ("45,000 Avios (British Airways / Iberia / ...)")
     can run much longer than a cash price — let those wrap instead of
     forcing the row (and the whole page) wider than the viewport. */
  white-space: normal; overflow-wrap: break-word; min-width: 0;
}

/* A leg priced as part of another leg's itinerary total (see priceTag() /
   applyItineraryGrouping) — muted rather than terracotta, so it reads as a
   pointer back to the real figure, not as a second amount. */
.price-linked { color: var(--ink-3); font-weight: 400; }

/* --- Account settings: "acct" ------------------------------------------
   The /account/settings hub, rebuilt from a Claude Design comp. Everything
   is namespaced under .acct for the same reason .hedge is: this page runs
   the night palette down the middle of a site that is otherwise paper, and
   none of it may leak into /trips or the editor.

   It borrows the --hd-* night tokens the landing page already defines rather
   than opening a second dark palette — the comp's colours ARE those tokens
   (#0F150E is --hd-night, #D8AA57 is --hd-gold, and so on down the list), so
   duplicating them as literals would have meant two sources of truth for one
   brand the moment either moved.

   Light-mode surfaces deliberately use --bg/--surface/--ink*, NOT literals.
   The comp is a light-mode drawing; the site has a real dark theme, and the
   sections between the dark bands have to follow it. The bands themselves
   stay night in both themes, exactly as the landing hero does — they are the
   brand's night, not a light-theme artefact. */

.acct { background: var(--bg); color: var(--ink); font-family: var(--hd-sans); }

/* --- The dark head ---------------------------------------------------- */
.acct__head {
  position: relative; overflow: hidden;
  background: var(--hd-night); color: var(--hd-ink);
  padding: 22px clamp(20px, 4vw, 32px) clamp(52px, 7vw, 76px);
}
/* Two crossing rule-lines and a vignette, the same survey-chart texture the
   landing hero uses. Both layers are pointer-events:none so they can never
   swallow a click on the nav sitting above them. */
.acct__weave, .acct__veil { position: absolute; inset: 0; pointer-events: none; }
.acct__weave {
  opacity: .5;
  background:
    repeating-linear-gradient(72deg, color-mix(in srgb, var(--hd-gold) 16%, transparent) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-58deg, color-mix(in srgb, var(--hd-sea) 12%, transparent) 0 1px, transparent 1px 62px);
}
.acct__veil {
  background: radial-gradient(72% 120% at 22% 40%,
    color-mix(in srgb, var(--hd-night) 92%, transparent),
    color-mix(in srgb, var(--hd-night) 50%, transparent) 58%, transparent 82%);
}
.acct__headInner { position: relative; max-width: 1180px; margin: clamp(36px, 5vw, 60px) auto 0; }
.acct__eyebrow {
  margin: 0 0 14px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in srgb, var(--hd-ink) 45%, transparent);
}
.acct__title {
  margin: 0; max-width: 22ch; font-family: var(--hd-serif); font-weight: 400;
  font-size: clamp(38px, 6.4vw, 76px); line-height: .96; letter-spacing: -.02em;
  text-wrap: balance; animation: acct-fade .7s ease both;
}
.acct__title em { font-style: italic; color: var(--hd-gold); }
.acct__lede {
  margin: 22px 0 0; max-width: 54ch; font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65; color: var(--hd-ink-soft); text-wrap: pretty;
}
@keyframes acct-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .acct__title { animation: none; } }

/* --- The reading band: at-a-glance telemetry cards ------------------ */
.acct__band {
  background: var(--hd-night2);
  border-top: 1px solid var(--hd-line);
  border-bottom: 1px solid var(--hd-line);
  padding: clamp(20px, 3vw, 28px) 24px;
}
.acct__bandInner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.acct__figureCard {
  background: color-mix(in srgb, var(--hd-ink) 3%, transparent);
  border: 1px solid var(--hd-line);
  border-radius: 4px;
  padding: 14px 18px;
  text-align: left;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.acct__figureCard:hover {
  background: color-mix(in srgb, var(--hd-ink) 7%, transparent);
  border-color: color-mix(in srgb, var(--hd-gold) 40%, var(--hd-line));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .acct__figureCard:hover {
    transform: none;
  }
}
.acct__figure {
  font-family: var(--hd-serif);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  color: var(--hd-ink);
}
.acct__figure--on {
  color: var(--hd-sage);
}
.acct__figure--trial {
  color: var(--hd-gold);
}
.acct__figure--off {
  color: var(--hd-terra);
}
.acct__figureLabel {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hd-ink) 55%, transparent);
  font-weight: 500;
}

/* --- Body: sticky index beside the sections --------------------------- */
.acct__main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) 24px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
.acct__cols {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
}
.acct__index {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  box-shadow: var(--shadow);
}
.acct__indexLabel {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.acct__indexLink {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 7px 8px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.acct__indexLink:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.acct__n {
  font-family: var(--hd-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
}
.acct__indexText {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.35;
  transition: color 0.15s ease;
}
/* Set by account-settings.js as you scroll. Without JS every row simply
   stays in its resting weight, which is a legible index either way. */
.acct__indexLink[aria-current="true"] {
  background: color-mix(in srgb, var(--hd-gold, var(--accent)) 10%, transparent);
  border-left: 2px solid var(--hd-gold, var(--accent));
  padding-left: 6px;
}
.acct__indexLink[aria-current="true"] .acct__indexText {
  color: var(--ink);
  font-weight: 600;
}
.acct__sections {
  display: grid;
  gap: clamp(48px, 6vw, 76px);
  min-width: 0;
}

/* --- A section ---------------------------------------------------------- */
.acct__section {
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
/* Each section keeps its own hairline hue at full saturation for the
   border-top accent, but the chapterTag tab below needs a darkened build
   of that same hue behind cream text to clear 4.5:1 — see the contrast
   check that produced these percentages (site review, 2026-08-28). */
.acct__section--passports {
  border-top-color: var(--sage-soft);
  --tone: color-mix(in srgb, var(--sage-soft) 70%, black);
}
.acct__section--password  {
  border-top-color: var(--gold);
  --tone: color-mix(in srgb, var(--gold) 65%, black);
}
.acct__section--twofactor {
  border-top-color: var(--terracotta);
  --tone: color-mix(in srgb, var(--terracotta) 80%, black);
}
.acct__section--google    {
  border-top-color: var(--teal);
  --tone: var(--teal);
}
.acct__section--sessions  {
  border-top-color: var(--ink-3);
  --tone: var(--ink-3);
}
.acct__section--calendar  {
  border-top-color: var(--sage-soft);
  --tone: color-mix(in srgb, var(--sage-soft) 70%, black);
}
.acct__section--billing   {
  border-top-color: var(--hd-gold, var(--accent));
  --tone: color-mix(in srgb, var(--hd-gold, var(--accent)) 60%, black);
}
.acct__sectionHeader {
  margin-bottom: 20px;
}
/* A stamped ticket-stub tab, not a spec-sheet label — the same "No. 0X"
   numbering the landing page's how-it-works steps use (.hedge__stepNo),
   given a colored stub so each section reads as a distinct ticket rather
   than a uniform table of contents. --tone falls back to the accent, the
   same pattern .hedge__stepRow uses for its own tone. */
.acct__chapterTag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cream);
  background: var(--tone, var(--accent));
  padding: 4px 10px 4px 8px;
  border-radius: 3px 3px 3px 0;
  margin-bottom: 10px;
}
.acct__chapterTag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 70%, transparent);
}
.acct__chapterTag--terra {
  background: color-mix(in srgb, var(--hd-terra) 65%, black);
}
.acct__h2 {
  margin: 0 0 8px;
  font-family: var(--hd-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.1;
  color: var(--ink);
}
.acct__h3 {
  margin: 0 0 6px;
  font-family: var(--hd-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.acct__body {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --- The forwarding plate (dark, inset) -------------------------------- */
.acct__section--plate {
  padding-top: 0;
  border-top: 0;
}
.acct__plate {
  position: relative;
  overflow: hidden;
  background: var(--hd-night);
  color: var(--hd-ink);
  border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 40px);
  box-shadow: var(--shadow);
  border: 1px solid var(--hd-line);
}
.acct__plate .acct__weave {
  opacity: .6;
  background: repeating-linear-gradient(66deg, color-mix(in srgb, var(--hd-gold) 14%, transparent) 0 1px, transparent 1px 52px);
}
.acct__plateInner {
  position: relative;
  display: grid;
  gap: 22px;
}
.acct__plateHead .acct__chapterTag {
  background: color-mix(in srgb, var(--hd-gold) 22%, transparent);
  color: var(--hd-gold);
}
.acct__plateHead .acct__chapterTag::before {
  background: var(--hd-gold);
}
.acct__plateTitle {
  margin: 0;
  max-width: 24ch;
  font-family: var(--hd-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--hd-ink);
}
.acct__plateBody {
  margin: 12px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hd-ink-soft);
}
.acct__addressRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.acct__address {
  font-family: var(--mono);
  font-size: 14.5px;
  background: color-mix(in srgb, var(--hd-ink) 6%, transparent);
  border: 1px solid var(--hd-line);
  border-radius: 6px;
  padding: 11px 14px;
  color: var(--hd-ink);
  user-select: all;
}
/* The base rule's --hd-ink text is styled for the dark .acct__plate
   (forwarding address) — used on a plain .acct__section instead (calendar
   feed), it needs the section's own light-surface tokens or it renders as
   near-white text on a near-white background. */
.acct__address--onLight {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--ink);
}

/* The price, stated before the "Upgrade" click rather than left for Stripe
   checkout to reveal — sits right above the button it belongs to. */
.acct__price {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--hd-ink);
}

/* --- Buttons. The comp squares them off (2px) against the paper 10px --- */
.acct__btn {
  display: inline-block;
  border-radius: 2px;
  padding: 10px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.acct__btn--gold {
  background: var(--hd-gold);
  color: var(--hd-night);
}
.acct__btn--gold:hover {
  filter: brightness(1.05);
}
.acct__btn--solid {
  background: var(--sage-dark);
  color: var(--cream);
}
.acct__btn--solid:hover {
  background: color-mix(in srgb, var(--sage-dark) 85%, black);
}
.acct__btn--ghost {
  background: transparent;
  color: var(--hd-ink);
  border-color: color-mix(in srgb, var(--hd-ink) 28%, transparent);
}
.acct__btn--ghost:hover {
  border-color: var(--hd-ink);
  background: color-mix(in srgb, var(--hd-ink) 6%, transparent);
}
.acct__btn--quiet {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--border-strong);
}
.acct__btn--quiet:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.acct__btn--warn {
  background: transparent;
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.acct__btn--warn:hover {
  background: color-mix(in srgb, var(--terracotta) 8%, transparent);
}
.acct__btn--exit {
  background: transparent;
  color: var(--hd-terra);
  border-color: color-mix(in srgb, var(--hd-terra) 50%, transparent);
}
.acct__btn--exit:hover {
  background: color-mix(in srgb, var(--hd-terra) 12%, transparent);
  border-color: var(--hd-terra);
}

/* --- Cards, rows and fields -------------------------------------------- */
.acct__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 2.4vw, 28px);
  max-width: 680px;
  display: grid;
  gap: 18px;
}
.acct__card--flush {
  padding: 0;
  display: block;
  overflow: hidden;
}
.acct__cardFooter {
  background: color-mix(in srgb, var(--ink) 2%, var(--surface));
  border-top: 1px solid var(--border);
  padding: 18px 20px;
}
.acct__note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sage-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  max-width: 680px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-2);
}
.acct__note--billing {
  border-left-color: var(--gold);
}
.acct__note--prominent {
  border-left-color: var(--gold);
  border-left-width: 4px;
  background:
    radial-gradient(100% 70% at 100% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%),
    var(--surface);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--gold) 8%, transparent), var(--shadow);
}
.acct__noteContent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 48ch;
}
.acct__noteText {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.acct__note strong {
  color: var(--ink);
}
.acct__subAction {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.acct__subBlock {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}
.acct__subBlock--danger {
  border-top-color: color-mix(in srgb, var(--terracotta) 40%, var(--border));
}
.acct__subNote {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.acct__statusLine {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
.acct__link {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.acct__link:hover {
  color: var(--ink);
}

/* --- Free vs Premium comparison chart & membership page (/account/premium) --- */

.premium-page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--hd-sans);
}

/* Header context & navigation */
.premium-head {
  padding-bottom: clamp(40px, 5.5vw, 64px);
}
.premium-head__inner {
  position: relative;
  max-width: 1180px;
  margin: clamp(32px, 4.5vw, 52px) auto 0;
}
.premium-head__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.premium-back-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--hd-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.premium-back-link:hover {
  color: var(--hd-ink);
}
.premium-head__tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hd-gold);
  border: 1px solid color-mix(in srgb, var(--hd-gold) 35%, transparent);
  background: color-mix(in srgb, var(--hd-gold) 10%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.premium-head__title {
  max-width: 22ch;
}
.premium-head__lede {
  max-width: 58ch;
}

/* Status & Action Shelf */
.premium-status-bar {
  background: var(--hd-night2);
  border-top: 1px solid var(--hd-line);
  border-bottom: 1px solid var(--hd-line);
  padding: clamp(26px, 3.5vw, 36px) 24px;
}
.premium-status-bar__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 860px) {
  .premium-status-bar__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.premium-status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.premium-status-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.premium-status-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  /* Solid stamped fills, not translucent outlines — the same saturated,
     legible-at-a-glance treatment as a trip card's status bar. */
}
.premium-status-badge--trial {
  /* Same fix as .plan-chart__premiumHead: a solid darkened foil-lo instead
     of the full gradient, since this badge's text ("N Days Left in Trial")
     is long enough to cross into the gradient's low-contrast middle. */
  background: color-mix(in srgb, var(--foil-lo) 78%, black);
  color: var(--cream);
}
.premium-status-badge--pro {
  background: var(--sage-dark);
  color: var(--cream);
}
.premium-status-badge--free {
  background: var(--ink-3);
  color: var(--surface);
}
.premium-status-badge--warn {
  /* Plain --terracotta only clears ~3.8:1 against cream text — darkened
     to hold 4.5:1 (verified 2026-08-28), same fix as .acct__section--twofactor. */
  background: color-mix(in srgb, var(--terracotta) 82%, black);
  color: var(--cream);
}
.premium-status-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 45% measured 4.06:1 against --hd-night2, axe-confirmed under the 4.5:1
     floor; 50% clears it (4.72:1) while staying close to the original
     whisper-quiet intent. */
  color: color-mix(in srgb, var(--hd-ink) 50%, transparent);
}
.premium-status-card__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hd-ink-soft);
  max-width: 56ch;
}
.premium-status-card__note strong {
  color: var(--hd-ink);
}

.premium-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
@media (max-width: 860px) {
  .premium-action-card {
    align-items: flex-start;
  }
}
.premium-price-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.premium-price-amount {
  font-family: var(--hd-serif);
  font-size: clamp(28px, 3.2vw, 36px);
  color: var(--hd-ink);
  line-height: 1;
}
.premium-price-period {
  font-size: 13px;
  color: var(--hd-ink-soft);
}
.premium-price-status {
  font-family: var(--hd-serif);
  font-size: 22px;
  color: var(--hd-ink);
}
.premium-cta-form {
  width: 100%;
  max-width: 320px;
}
.premium-cta-btn {
  width: 100%;
  text-align: center;
  padding: 13px 24px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.premium-guarantee {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--hd-ink) 50%, transparent);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Section Header styling */
.premium-section-header {
  margin-bottom: 24px;
}
/* .acct__eyebrow's color is tuned for the night header band it was built for
   (color-mix of --hd-ink at 45%, meant to whisper against --hd-night) — reused
   here on the page's light "day" surface, where that same blend computes to
   1.02:1 against the near-white background, axe-confirmed. --ink-3 is this
   design system's already-established "meta text that clears AA on the light
   surface" token (4.8:1 on cream, see its definition), so this scopes the fix
   to just this light-surface context rather than touching .acct__eyebrow's
   night usage. */
.premium-section-header .acct__eyebrow {
  color: var(--ink-3);
}
.premium-section-header .acct__h2 {
  margin-bottom: 6px;
}
.premium-section-header .acct__body {
  margin-bottom: 0;
}

/* The 2 Pillars (Archive vs Field Intelligence) */
.premium-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
  /* The real cause of the 546px-in-a-375px-viewport overflow: as a grid
     item of .premium-main, this defaults to min-width: auto, so its own
     content's preferred width wins over its 375px-wide grid cell — auto-fit
     never even gets a chance to collapse to one column. */
  min-width: 0;
}
.premium-pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  /* Grid/flex items default to min-width: auto, so their content's
     min-content width wins over the 1fr track and pushes the whole page
     wider than the viewport — the actual cause of the 546px/375px mobile
     overflow, not the column count. Same fix applied two levels down. */
  min-width: 0;
}
.premium-pillar--free {
  border-top: 3px solid var(--sage-soft);
}
.premium-pillar--pro {
  border-top: 3px solid var(--hd-gold, var(--accent));
  background:
    radial-gradient(100% 70% at 100% 0%, color-mix(in srgb, var(--hd-gold, var(--accent)) 6%, transparent), transparent 60%),
    var(--surface);
  border-color: color-mix(in srgb, var(--hd-gold, var(--accent)) 35%, var(--border));
}
.premium-pillar__tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.premium-pillar--pro .premium-pillar__tag {
  color: var(--accent);
}
.premium-pillar__title {
  margin: 0 0 10px;
  font-family: var(--hd-serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--ink);
}
.premium-pillar__desc {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  flex: 1;
}
.premium-pillar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  padding-top: 18px;
}
.premium-pillar__list li {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}
.premium-pillar__list li span {
  font-weight: 700;
  color: var(--green);
}
.premium-pillar--pro .premium-pillar__list li span {
  color: var(--accent);
}

/* Capability Suites Grid */
.premium-suites {
  margin: 40px 0;
}
.premium-suites__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.premium-suite-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-suite-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 62, 46, 0.08), 0 12px 28px -10px rgba(44, 62, 46, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .premium-suite-card:hover {
    transform: none;
  }
}
.premium-suite-card__head {
  padding: 16px 20px;
  border-top: 3px solid var(--suite-accent, var(--border));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--suite-accent, var(--border)) 5%, var(--surface));
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.premium-suite-card__num {
  font-family: var(--hd-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  color: var(--suite-accent, var(--ink-3));
}
.premium-suite-card__title {
  margin: 0;
  font-family: var(--hd-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.premium-suite-card__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.premium-feature-item h4 {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.premium-feature-item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Detailed Ledger Comparison Table */
.premium-ledger-section {
  margin: 40px 0;
}
.plan-chart__scroll {
  overflow-x: auto;
  min-width: 0;
  /* Without this, the 520px-wide table's intrinsic size leaks straight
     through overflow-x:auto and out to the document itself — confirmed the
     leak survives even overflow-x:hidden here, and survives an explicit
     min-width:0, because .acct__main is a CSS Grid ancestor and Chromium's
     intrinsic-size pass for a <table> can bypass a plain overflow clip in
     that case. contain:layout is what actually stops it (verified: page
     scrollWidth drops from 457px to the correct 375px on a 375px viewport,
     and the table's own internal horizontal scroll still works). */
  contain: layout;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}
.plan-chart {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.plan-chart th,
.plan-chart td {
  padding: 13px 18px;
  text-align: left;
}
.plan-chart thead th {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--ink) 2%, var(--surface));
}
.plan-chart__centerHead {
  text-align: center !important;
  width: 120px;
}
.plan-chart__premiumHead {
  /* A solid darkened foil-lo, not the full hi->lo gradient: the gradient's
     lighter end drops cream text below 2:1 contrast wherever the label
     lands on it (checked 2026-08-28) — the material read comes from
     matching the scratch-off map's own foil colour, not from a shimmer
     that would fight legibility on an 11.5px label. */
  color: var(--cream) !important;
  text-align: center !important;
  width: 120px;
  border-bottom: 2px solid var(--foil-hi) !important;
  background: color-mix(in srgb, var(--foil-lo) 78%, black) !important;
}
.plan-chart__groupHead {
  background: color-mix(in srgb, var(--ink) 3.5%, var(--surface));
  padding: 10px 18px !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.plan-chart__groupTitle {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.plan-chart__groupDesc {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
}
.plan-chart tbody tr {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.plan-chart tbody tr:first-child {
  border-top: 0;
}
.plan-chart__featureCell {
  font-weight: 500;
  color: var(--ink);
  vertical-align: top;
  min-width: 240px;
}
.plan-chart__featureName {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.plan-chart__featureDetail {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.plan-chart__cell {
  text-align: center;
  vertical-align: middle;
}
.plan-chart__cell--pro,
.plan-chart td:last-child {
  /* The premium column reads as the same material as the scratch-off
     card's foil — a coating you've unlocked, not just a tinted cell. */
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--foil-hi) 16%, transparent), color-mix(in srgb, var(--foil-mid) 10%, transparent) 55%, color-mix(in srgb, var(--foil-lo) 14%, transparent)),
    color-mix(in srgb, var(--foil-mid) 4%, var(--surface));
  border-left: 1px solid color-mix(in srgb, var(--foil-lo) 35%, transparent);
}
.plan-chart__mark {
  font-size: 15px;
  font-weight: 700;
}
.plan-chart__mark--yes {
  color: var(--green);
}
.plan-chart__mark--pro {
  color: var(--foil-lo);
  text-shadow: 0 0 8px color-mix(in srgb, var(--foil-mid) 55%, transparent);
}
.plan-chart__mark--no {
  color: var(--ink-3);
  font-weight: 400;
}

/* Membership & Independence Oath */
.premium-oath {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--hd-gold, var(--accent)) 30%, var(--border));
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 44px);
  text-align: center;
  margin-top: 48px;
  background:
    radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--hd-gold, var(--accent)) 8%, transparent), transparent 70%),
    var(--surface);
}
.premium-oath__mark {
  color: var(--hd-gold, var(--accent));
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
}
.premium-oath__title {
  margin: 0 auto 12px;
  max-width: 22ch;
  font-family: var(--hd-serif);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 400;
  color: var(--ink);
}
.premium-oath__body {
  margin: 0 auto 8px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.premium-oath__sub {
  margin: 0 auto 28px;
  max-width: 48ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  font-style: italic;
}
.premium-oath__cta {
  display: flex;
  justify-content: center;
}

.acct__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acct__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background 0.15s ease;
}
.acct__row:first-child {
  border-top: 0;
}
.acct__row:hover {
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.acct__rowMain {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.acct__flag {
  font-size: 22px;
  line-height: 1;
}
.acct__rowMeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acct__rowTitle {
  font-size: 14.5px;
  color: var(--ink);
}
.acct__code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.acct__empty {
  padding: 22px 20px;
  color: var(--ink-3);
  font-style: italic;
  font-size: 14px;
}
.acct__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct__field--grow {
  flex: 1;
  min-width: 200px;
}
.acct__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.acct__input, .acct__select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acct__input:focus, .acct__select:focus {
  border-color: var(--hd-gold-focus, var(--accent));
  outline: 2px solid var(--hd-gold-focus, var(--accent));
  outline-offset: 2px;
}
.acct__input--date {
  max-width: 160px;
}
.acct__select {
  min-width: 240px;
}
.acct__pair {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.acct__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.acct__actions--split {
  justify-content: space-between;
  margin-top: 4px;
}
.acct__actions--leave {
  align-self: center;
}
.acct__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.acct__addForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

/* --- Leaving ------------------------------------------------------------ */
.acct__leave {
  position: relative;
  overflow: hidden;
  background: var(--hd-night);
  color: var(--hd-ink);
  border-radius: var(--radius);
  padding: clamp(32px, 4.5vw, 56px);
  border: 1px solid var(--hd-line);
  box-shadow: var(--shadow);
}
.acct__leave .acct__weave {
  opacity: .5;
  background: repeating-linear-gradient(-62deg, color-mix(in srgb, var(--hd-terra) 14%, transparent) 0 1px, transparent 1px 56px);
}
.acct__leaveInner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.acct__leaveHead .acct__chapterTag {
  background: color-mix(in srgb, var(--hd-terra) 22%, transparent);
  color: var(--hd-terra);
}
.acct__leaveHead .acct__chapterTag::before {
  background: var(--hd-terra);
}
.acct__leaveTitle {
  margin: 0;
  max-width: 18ch;
  font-family: var(--hd-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--hd-ink);
}
.acct__leaveBody {
  margin: 14px 0 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hd-ink-soft);
}
.acct__terms {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acct__term {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--hd-line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hd-ink-soft);
}
.acct__term:last-child {
  border-bottom: 1px solid var(--hd-line);
}
.acct__termWord {
  font-family: var(--hd-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--hd-terra);
}

/* --- Narrow: the index stops being a sidebar and becomes a header ------ */
@media (max-width: 860px) {
  .acct__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .acct__index {
    position: static;
  }
}

/* The landing page's night nav, reused here but sitting IN flow rather than
   overlaid on a hero photo — this head is type, not an image, so an absolute
   bar would collide with the title instead of floating above a picture. */
.acct__head .hedge__nav {
  position: static;
  z-index: auto;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
/* The index numerals carry each section's own accent, matching the rule above
   its heading, so the colour is a wayfinding cue rather than decoration.
   gold/sage use the *-strong text-safe variants (raw --gold is 2.64:1 here,
   raw --sage-soft 3.28:1, both axe-confirmed under the 4.5:1 normal-text
   floor against .acct's --surface); terra reuses --accent, which is exactly
   this same "text-safe terracotta" derivation already. teal is unchanged —
   already 5.05:1 here, never flagged. */
.acct__n--gold  { color: var(--gold-strong); }
.acct__n--sage  { color: var(--sage-strong); }
.acct__n--terra { color: var(--accent); }
.acct__n--teal  { color: var(--teal); }
.acct__n--quiet { color: var(--ink-3); }

/* A forwarding address is one long unbroken token, and the plate holding it is
   a grid item — which defaults to min-width:auto, so the code element's
   intrinsic width pushed the whole dark plate wider than the viewport at 390px
   and clipped its own heading off the right edge. Caught in a real browser at
   phone width; it is invisible at desktop size and invisible to curl. */
.acct__address { overflow-wrap: anywhere; max-width: 100%; }
.acct__plate, .acct__plateInner, .acct__sections > * { min-width: 0; }

/* The signed-in session nav is five items wide. The landing hero has room to
   absorb that; this head is shorter, so let it wrap onto a second line rather
   than run off the side. */
.acct__head .hedge__nav { flex-wrap: wrap; }
.acct__head .hedge__nav .pb__nav { flex-wrap: wrap; justify-content: flex-end; }

/* The two-factor section stacks several independent forms — each is its own
   POST with its own password field, so they are siblings rather than one form,
   and the gap between them has to come from somewhere. */
.acct__stacked { margin-top: 18px; }
.acct__actions--mid { align-self: center; }

/* --- High-Contrast Printable Pocket Itinerary (8-Panel Accordion) --- */
.pocket-body {
  margin: 0;
  padding: 0;
  background: #f4f6f8;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.pocket-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #1e293b;
  color: #fff;
  border-bottom: 1px solid #334155;
}

.pocket-toolbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pocket-toolbar__title {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}

.pocket-toolbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pocket-fold-modal {
  position: relative;
}

.pocket-fold-card {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  z-index: 100;
  font-size: 13px;
  line-height: 1.5;
}

.pocket-fold-card h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #38bdf8;
}

.pocket-fold-card ol {
  margin: 0;
  padding-left: 20px;
}

.pocket-fold-card li {
  margin-bottom: 6px;
}

.pocket-sheet {
  position: relative;
  max-width: 1100px;
  margin: 24px auto;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* 8-panel grid: 4 columns x 2 rows */
.pocket-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  border: 2px solid #000;
  background: #fff;
}

.pocket-panel {
  border: 1px dashed #666;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  background: #fff;
  color: #000;
  position: relative;
}

.pocket-panel__badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

/* Panel 1: Cover */
.pocket-panel--cover {
  background: #fafafa;
}

.pocket-cover__head {
  text-align: center;
  margin-bottom: 8px;
}

.pocket-cover__emoji {
  font-size: 24px;
  display: block;
}

.pocket-cover__title {
  font-size: 16px;
  font-weight: 800;
  margin: 4px 0 2px;
  line-height: 1.2;
}

.pocket-cover__dates {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  margin: 0;
}

.pocket-cover__route {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  padding: 4px 6px;
  background: #eee;
  border-radius: 4px;
  margin-bottom: 6px;
}

.pocket-cover__countries {
  font-size: 10px;
  color: #333;
  text-align: center;
  margin-bottom: 8px;
}

.pocket-cover__qr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 8px 0;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

.pocket-cover__qr-svg {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.pocket-cover__qr-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pocket-cover__qr-text {
  font-size: 9px;
  line-height: 1.3;
}

.pocket-cover__emergency-box {
  border-top: 1px solid #000;
  padding-top: 6px;
  font-size: 9px;
}

.pocket-cover__emergency-title {
  font-weight: 800;
  margin-bottom: 2px;
}

.pocket-cover__emergency-line {
  color: #333;
  margin-top: 2px;
}

/* Itinerary items */
.pocket-item {
  border: 1px solid #000;
  border-radius: 3px;
  padding: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  background: #fff;
}

.pocket-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 2px;
  margin-bottom: 4px;
}

.pocket-item__type {
  letter-spacing: 0.03em;
}

.pocket-item__time {
  font-size: 10px;
}

.pocket-item__route {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}

.pocket-item__title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

.pocket-item__meta, .pocket-item__addr {
  font-size: 10px;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}

.pocket-conf {
  display: inline-block;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  background: #000;
  color: #fff;
  padding: 1px 5px;
  border-radius: 2px;
  margin-top: 2px;
}

.pocket-pill {
  display: inline-block;
  font-size: 9px;
  border: 1px solid #666;
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 2px;
}

.pocket-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 11px;
  color: #777;
  font-style: italic;
}

/* Panel 8: Emergency */
.pocket-panel--em {
  background: #fafafa;
}

.pocket-em__title {
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 6px;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
}

.pocket-em-country {
  margin-bottom: 6px;
  font-size: 10px;
}

.pocket-em-country__name {
  display: block;
  margin-bottom: 2px;
}

.pocket-em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
  font-size: 9px;
}

.pocket-notes {
  margin-top: auto;
  border-top: 1px solid #000;
  padding-top: 4px;
}

.pocket-notes__title {
  font-size: 9px;
  font-weight: 800;
  margin-bottom: 4px;
}

.pocket-notes__line {
  border-bottom: 1px dotted #888;
  height: 14px;
}

.pocket-footer {
  margin-top: 6px;
  text-align: center;
  font-size: 8px;
  color: #666;
}

@media print {
  @page {
    size: letter landscape;
    margin: 0.25in;
  }

  body.pocket-body {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .pocket-toolbar {
    display: none !important;
  }

  .pocket-sheet {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  .pocket-grid {
    border: 2px solid #000 !important;
    height: 98vh !important;
  }

  .pocket-panel {
    border: 1px dashed #444 !important;
    min-height: unset !important;
    page-break-inside: avoid;
  }

  .pocket-conf {
    background: #000 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- Trust & Security Center (/trust) -----------------------------------
   Built entirely on the .acct scaffold (dark head, .acct__section chapters,
   .acct__card / .acct__note) already established by /account/settings and
   /account/premium — everything below is only what those don't already
   provide: the hero CTA row, the "at a glance" card grid, the plain-list
   layout for the detailed-practices section, and one small accordion for
   Security Practices / FAQ. */

.trust__heroCta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.trust__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.trust__cardIcon { font-size: 22px; line-height: 1; display: block; margin-bottom: 10px; }
.trust__cardTitle { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.trust__cardBody { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* How We Protect Your Information: a plain two-column list rather than
   cards — six short items read better as a scan than as six more boxes
   right below the "at a glance" grid. */
.trust__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px 32px;
}
.trust__listItem .acct__h3 { font-size: 15.5px; }
.trust__listItem .acct__body { margin-bottom: 0; font-size: 14px; }

/* Security Practices / FAQ: native <details>, styled to read as a list of
   flush rows rather than the site's other, card-styled accordions (visa
   chips, booking rows) — a denser list suits eight-plus short entries
   better than a stack of boxed cards would. */
.trust__accordion { display: grid; }
.trust__fold {
  border-top: 1px solid var(--border);
}
.trust__accordion .trust__fold:last-child { border-bottom: 1px solid var(--border); }
.trust__foldSummary {
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trust__foldSummary::-webkit-details-marker { display: none; }
/* A plain rotating chevron, not a colour change, marks open/closed state —
   open/closed must never be conveyed by colour alone. */
.trust__foldSummary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.trust__fold[open] > .trust__foldSummary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .trust__foldSummary::after { transition: none; }
}
.trust__foldSummary:focus-visible {
  outline: 2px solid var(--hd-gold-focus, var(--accent));
  outline-offset: 2px;
  border-radius: 4px;
}
.trust__foldBody {
  margin: 0 4px 18px;
  max-width: var(--measure);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.trust__resources { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.trust__resources li { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.trust__reviewed { margin: 28px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* --- Trip detail: journal + command center --------------------------- */
.trip-page { max-width: 1120px; padding-bottom: 76px; }
.trip-page__nav { padding: 24px 0 14px; }
.trip-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); gap: 28px; position: relative; overflow: hidden; padding: clamp(28px, 5vw, 58px); border: 1px solid var(--border); background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 35%), var(--surface); box-shadow: 0 18px 38px -32px rgba(44, 62, 46, .42); }
.trip-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .38; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sage-dark) 4%, transparent) 0 1px, transparent 1px 25px); }
.trip-hero__copy, .trip-hero__visual, .trip-hero__actions { position: relative; z-index: 1; }
.trip-hero__copy { align-self: center; }
.trip-hero__eyebrow, .trip-panel > .section__label, .trip-panel__heading .section__label { margin: 0 0 10px; color: var(--terracotta); font: 700 .72rem/1.2 "Space Grotesk", var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.trip-hero h1 { max-width: 11ch; margin: 0; color: var(--ink); font: 600 clamp(2.8rem, 8vw, 6.4rem)/.91 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.trip-hero__route { margin: 22px 0 0; color: var(--ink-2); font: 600 clamp(1rem, 2vw, 1.3rem)/1.25 "Space Grotesk", var(--sans); }
.trip-hero__dates { margin: 8px 0 0; color: var(--ink-2); font-size: 1rem; font-variant-numeric: tabular-nums; }
.trip-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--ink-3); font-size: .78rem; }
.trip-hero__facts li + li::before { content: "·"; margin-right: 18px; color: var(--gold); }
.trip-hero__visual { min-height: 210px; align-self: stretch; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--border)); background: color-mix(in srgb, var(--sage) 45%, var(--surface)); transform: rotate(1.2deg); }
.trip-hero__visual img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; filter: sepia(.13) saturate(.78); }
.trip-hero__mark { display: grid; place-items: center; height: 100%; color: var(--terracotta); font-size: 5rem; }
.trip-hero__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.trip-hero__actions .btn { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.trip-page__status { display: grid; gap: 16px; margin: 22px 0; }
.trip-panel { border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, var(--sage) 12%); }
.trip-next, .trip-readiness, .trip-recap { padding: 22px 24px; }
.trip-next__body { display: flex; align-items: flex-start; gap: 16px; }
.trip-next__icon { color: var(--terracotta); font-size: 1.65rem; line-height: 1; }
.trip-next h2, .trip-stay h2, .trip-map h2, .trip-recap h2 { margin: 0; font: 600 clamp(1.2rem, 2.5vw, 1.8rem)/1.05 var(--serif); }
.trip-next__when, .trip-next__meta { margin: 7px 0 0; color: var(--ink-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.trip-next__meta { color: var(--ink-3); font-size: .82rem; }
.trip-panel__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.trip-panel__heading > span { color: var(--ink-3); font-size: .78rem; }
.trip-readiness ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.trip-readiness li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.trip-readiness li > span:nth-child(2) { display: grid; gap: 3px; }
.trip-readiness strong { font-size: .88rem; }
.trip-readiness small { color: var(--ink-3); font-size: .78rem; }
.trip-readiness b { color: var(--terracotta); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.trip-readiness__signal { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--terracotta) 45%, var(--border)); border-radius: 50%; color: var(--terracotta); font-weight: 700; }
.trip-recap { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.trip-recap > .section__label { color: var(--gold); }
.trip-recap h2 { max-width: 27ch; color: var(--surface); }
.trip-recap dl { display: flex; flex-wrap: wrap; gap: 26px; margin: 24px 0 0; }
.trip-recap dl div { display: grid; gap: 3px; }
.trip-recap dd { margin: 0; color: var(--gold); font: 600 2.2rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.trip-recap dt { color: color-mix(in srgb, var(--surface) 72%, var(--ink)); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.trip-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 22px; align-items: start; }
.trip-main { min-width: 0; padding: 28px clamp(18px, 3vw, 34px); }
.trip-section-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border); margin-bottom: 24px; padding-bottom: 14px; }
.trip-section-heading h2 { margin: 0; font: 600 2rem/1 var(--serif); }
.trip-context { display: grid; gap: 16px; min-width: 0; }
.trip-stay, .trip-map { padding: 20px; }
.trip-stay > p, .trip-map > p { color: var(--ink-2); font-size: .84rem; line-height: 1.5; }
.trip-stay a { overflow-wrap: anywhere; }
.trip-stay dl { display: flex; gap: 20px; margin: 16px 0 0; }
.trip-stay dt { color: var(--ink-3); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.trip-stay dd { margin: 3px 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.trip-map img { width: 100%; margin-top: 14px; border: 1px solid var(--border); aspect-ratio: 4 / 3; object-fit: cover; }
.trip-panel--empty { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.trip-entry { min-width: 0; }
.trip-entry__summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: start; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; border-radius: 4px; }
.trip-entry__summary::-webkit-details-marker { display: none; }
.trip-entry__summary:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.trip-entry__summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.entry__summaryIcon { color: var(--hue, var(--terracotta)); font-size: 1.15rem; }
.entry__summaryWhen { display: block; margin-top: 5px; color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.trip-entry__chevron { color: var(--ink-3); text-align: right; transition: transform .18s ease; }
.trip-entry[open] .trip-entry__chevron { transform: rotate(180deg); }
.trip-entry__panel { margin: 0 30px 14px 50px; padding: 10px 0 4px; border-top: 1px solid var(--border); }
.trip-entry__panel .entry__topline { margin-top: 8px; }
.trip-entry__panel .entry__when { display: none; }
.trip-entry__panel .entry__details { margin-top: 8px; }
.entry { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.entry__rail { position: relative; display: grid; place-items: start center; }
.entry__rail > .entry__icon { display: inline-grid; position: relative; z-index: 1; }
.entry__rail::after { content: ""; position: absolute; top: 28px; bottom: -12px; left: 50%; width: 2px; background: color-mix(in srgb, var(--hue, var(--gold)) 42%, transparent); }
.entry--last .entry__rail::after { display: none; }
@media (max-width: 800px) {
  .trip-layout { grid-template-columns: 1fr; }
  .trip-context { order: 2; }
  .trip-main { order: 1; }
}
@media (max-width: 600px) {
  .trip-page { padding-left: 16px; padding-right: 16px; }
  .trip-hero { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .trip-hero__visual { min-height: 140px; max-height: 180px; order: -1; transform: rotate(.6deg); }
  .trip-hero__visual img { min-height: 140px; }
  .trip-hero h1 { font-size: clamp(2.8rem, 16vw, 4.6rem); }
  .trip-next, .trip-readiness, .trip-recap { padding: 18px; }
  .trip-main { padding: 20px 12px; }
  .trip-entry__panel { margin-left: 40px; margin-right: 8px; }
  .trip-hero__facts { gap: 7px 12px; }
  .trip-hero__facts li + li::before { margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .trip-entry__chevron { transition: none; }
}

/* Upcoming trip essentials are open on detail pages: this is the practical
   briefing, not an accordion. The dashboard keeps its compact disclosure; the
   detail page is where a traveler does the actual review. */
.trip-essentials { padding: 24px clamp(18px, 3vw, 34px); }
.trip-essentials__grid { display: grid; gap: 18px; }
.trip-essential { padding: 16px 0 2px; border-top: 1px solid var(--border); }
.trip-essential__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.trip-essential h3 { margin: 0; color: var(--ink); font: 600 1.25rem/1.1 var(--serif); }
.trip-essential__status { flex: none; color: var(--green); font: 700 .68rem/1.2 "Space Grotesk", var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.trip-essential > p, .trip-essential > ul { max-width: 72ch; color: var(--ink-2); font-size: .82rem; line-height: 1.55; }
.trip-essential > ul { margin: 10px 0 0; padding-left: 1.15rem; }
.trip-essentials__disclaimer { margin: 18px 0 0; color: var(--ink-3); font-size: .75rem; }
@media (max-width: 600px) {
  .trip-essentials { padding: 20px 14px; }
  .trip-essential__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* The command-centre version: country panels (see .dest-panels--briefing)
   and driving guides stacked as one open briefing. */
.trip-essentials--command { padding: 0; }
.trip-essentials--command .trip-essentials__grid { gap: 2rem; }
.trip-essentials--command .trip-essential {
  padding-block: 0 1.25rem;
  border-top: 0;
  border-bottom: 1px solid var(--border);
}
.trip-essentials--command .trip-essential__heading { align-items: center; }
.trip-essentials--command .trip-essential__status[data-tone="warn"] { color: var(--orange); }
.trip-essentials--command .trip-essential__status[data-tone="no"] { color: var(--red); }
.trip-essentials--command .trip-essentials__disclaimer { max-width: 72ch; }
@media (max-width: 600px) {
  .trip-essentials--command { padding: 0; }
  .trip-essentials--command .trip-essential__heading { gap: .4rem; }
}

/* Upcoming trip command centre: scoped so prior-trip magazine pages remain unchanged. */
.trip-page--upcoming {
  --trip-thread: color-mix(in srgb, var(--gold-strong) 42%, var(--border));
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin-inline: auto;
}
.trip-page--upcoming ::selection { background: var(--gold); color: var(--sage-dark); }
.trip-page--upcoming .mag__back {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.trip-command__hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  margin-block-start: 1.5rem;
  padding: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem) 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
}
.trip-command__hero::before {
  position: absolute;
  inset: 0 0 auto;
  block-size: 4px;
  background: var(--gold);
  content: "";
}
.trip-command__hero > div { min-width: 0; max-width: 54rem; }
.trip-command__hero .section__label,
.trip-command__day > header .section__label {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  margin: 0;
  padding: .42rem .62rem;
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: "Space Grotesk", var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}
.trip-command__hero h1 {
  max-width: 18ch;
  margin: .85rem 0 .45rem;
  color: var(--ink);
  font-family: "Playfair Display", var(--serif);
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.trip-command__route {
  max-width: 46rem;
  margin: .55rem 0 .25rem;
  color: var(--accent);
  font: 650 1.1rem/1.4 "Space Grotesk", var(--sans);
  overflow-wrap: anywhere;
}
.trip-command__dates {
  margin: 0;
  color: var(--ink-2);
  font: 500 1rem/1.5 "Space Grotesk", var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.trip-command__hero > .btn {
  flex: none;
  min-block-size: 44px;
  border-color: var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-ink);
}
.trip-command__hero > .btn:hover { color: var(--btn-ink); }

.trip-command__overview {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.35rem;
  padding: 1.1rem .25rem 2rem;
  color: var(--ink);
  font: 650 .88rem/1.4 "Space Grotesk", var(--sans);
  font-variant-numeric: tabular-nums;
}
.trip-command__overview span { display: inline-flex; align-items: center; gap: 1.35rem; }
.trip-command__overview span + span::before {
  inline-size: .32rem;
  block-size: .32rem;
  border-radius: 50%;
  background: var(--gold-strong);
  content: "";
}

.trip-command__attention,
.trip-command__next {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 1.3rem 1.45rem;
  border-radius: 12px;
}
.trip-command__attention {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.trip-command__attention > div { min-width: 0; }
.trip-command__attention::before {
  position: absolute;
  inset: 0 0 auto;
  block-size: 3px;
  background: var(--green);
  content: "";
}
.trip-command__attention--amber { background: color-mix(in srgb, var(--yellow) 9%, var(--surface)); }
.trip-command__attention--amber::before { background: var(--gold-strong); }
.trip-command__attention--danger { background: color-mix(in srgb, var(--red) 8%, var(--surface)); }
.trip-command__attention--danger::before { background: var(--red); }
.trip-command__attention--neutral::before { background: var(--ink-3); }

.trip-command__attention .section__label { color: var(--ink); }
.trip-command__signal {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--surface);
  font-weight: 700;
}
.trip-command__attention--amber .trip-command__signal { background: var(--gold-strong); }
.trip-command__attention--danger .trip-command__signal { background: var(--red); }
.trip-command__attention--neutral .trip-command__signal { background: var(--ink-3); }
.trip-command__attention h2,
.trip-command__next h2 {
  margin: .15rem 0;
  font: 600 1.55rem/1.1 "Playfair Display", var(--serif);
}
.trip-command__attention h2 { color: var(--ink); }
.trip-command__attention p,
.trip-command__next p { margin: .2rem 0 0; overflow-wrap: anywhere; }
.trip-command__attention p { color: var(--ink-2); }
.trip-command__next {
.trip-command__attention-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block-start: .35rem;
  color: var(--accent-strong);
  font-weight: 700;
  text-underline-offset: .2em;
}

  justify-content: space-between;
  border: 0;
  background: var(--sage-dark);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.trip-command__next .section__label { color: var(--cream); }
.trip-command__next h2 { color: var(--cream); }
.trip-command__next p { color: color-mix(in srgb, var(--cream) 80%, var(--sage-dark)); }
.trip-command__next-copy { min-width: 0; max-width: 42rem; }
.trip-command__next-facts { font-weight: 600; }
.trip-command__next-tools {
  display: grid;
  flex: 0 1 auto;
  gap: .75rem;
  justify-items: end;
  min-width: min(100%, 17rem);
}
.trip-command__next-confirmation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem .65rem;
  min-width: 0;
}
.trip-command__next-confirmation > span:first-child {
  color: color-mix(in srgb, var(--cream) 76%, var(--sage-dark));
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.trip-command__next-confirmation code {
  color: var(--cream);
  font-weight: 700;
  overflow-wrap: anywhere;
  user-select: all;
}
.trip-command__next-confirmation .btn {
  min-block-size: 44px;
  border-color: var(--cream);
  background: var(--cream);
  color: var(--sage-dark);
}
.trip-command__next-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}
.trip-command__next-actions .btn {
  min-block-size: 44px;
  border-color: var(--cream);
  background: var(--cream);
  color: var(--sage-dark);
}
.trip-command__next-actions .btn:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.trip-command__itinerary { margin-top: 3rem; }
.trip-page--upcoming .trip-section-heading {
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  gap: .3rem;
  border-bottom: 0;
  padding-bottom: 1.35rem;
}
.trip-page--upcoming .trip-section-heading::after {
  position: absolute;
  inset: auto auto 0 0;
  inline-size: 4rem;
  block-size: 3px;
  background: var(--terracotta);
  content: "";
}
.trip-command__itinerary h2,
.trip-command__know h2,
.trip-command__references h2 {
  margin: .2rem 0 0;
  color: var(--ink);
  font: 600 2.15rem/1 "Playfair Display", var(--serif);
}
.trip-command__day { border-top: 1px solid var(--border-strong); padding: 2rem 0 1.25rem; }
.trip-command__day ol { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.trip-command__event {
  --event-time-width: 9.375rem;
  --event-mark-width: 2.25rem;
  --event-mark-half: 1.125rem;
  --event-gap: 1rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--event-time-width) var(--event-mark-width) minmax(0, 1fr);
  gap: var(--event-gap);
  padding: 0 0 1.65rem;
}
.trip-command__event:not(:last-child)::after {
  position: absolute;
  top: 2.25rem;
  bottom: -.15rem;
  left: calc(var(--event-time-width) + var(--event-gap) + var(--event-mark-half) - 1px);
  width: 2px;
  background: var(--trip-thread);
  content: "";
}
.trip-command__event-time {
  padding-top: .35rem;
  color: var(--ink-3);
  font: 650 .84rem/1.25 "Space Grotesk", var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.trip-command__event-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--event-mark-width);
  block-size: var(--event-mark-width);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
}
.trip-command__event-icon { inline-size: 1.15rem; block-size: 1.15rem; vector-effect: non-scaling-stroke; }
.trip-command__event-type {
  margin: 0;
  color: var(--accent);
  font: 700 .7rem/1.25 "Space Grotesk", var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.trip-command__event h3 {
  margin: .24rem 0;
  color: var(--ink);
  font: 600 1.42rem/1.15 "Playfair Display", var(--serif);
  overflow-wrap: anywhere;
}
.trip-command__event-content { min-width: 0; padding-top: .12rem; }
.trip-command__event-content p:last-child {
  max-width: var(--measure);
  margin: .25rem 0;
  color: var(--ink-2);
  font: .9rem/1.55 "Space Grotesk", var(--sans);
  overflow-wrap: anywhere;
}

.trip-command__know,
.trip-command__references { margin-top: 3rem; border-top: 1px solid var(--border-strong); padding-top: 2rem; }
.trip-command__know .trip-essentials { margin: 0; }
.trip-command__references ul { margin: 0; padding: 0; list-style: none; }
.trip-command__references li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: .8rem 0;
  border-bottom: 1px solid var(--border);
  font-family: "Space Grotesk", var(--sans);
}
.trip-command__references li span,
.trip-command__references code { min-width: 0; overflow-wrap: anywhere; }
.trip-command__references code { color: var(--accent); font-weight: 700; user-select: all; }
.trip-command__empty { color: var(--ink-3); }
.trip-page--upcoming a:focus-visible,
.trip-page--upcoming button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 760px) {
  .trip-page--upcoming { width: calc(100% - 28px); }
  .trip-command__hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
    margin-block-start: 1rem;
    padding: 1.8rem 1.35rem 1.45rem;
    border-radius: 12px;
  }
  .trip-command__hero h1 { font-size: clamp(2.5rem, 13vw, 3.8rem); }
  .trip-command__overview { gap: .65rem 1rem; padding-bottom: 1.35rem; }
  .trip-command__overview span { gap: 1rem; }
  .trip-command__overview span + span::before { display: none; }
  .trip-command__attention,
  .trip-command__next { align-items: flex-start; padding: 1.1rem; }
  .trip-command__next { flex-direction: column; }
  .trip-command__next-tools { inline-size: 100%; justify-items: start; }
  .trip-command__next-confirmation,
  .trip-command__next-actions { justify-content: flex-start; }
  .trip-command__event {
    --event-time-width: 3.4rem;
    --event-mark-width: 2rem;
    --event-mark-half: 1rem;
    --event-gap: .55rem;
  }
  .trip-command__event-time { font-size: .8rem; white-space: nowrap; }
  .trip-command__event-date,
  .trip-command__event-separator { display: none; }
  .trip-command__event-clock { display: block; }
  .trip-command__event-icon { inline-size: 1rem; block-size: 1rem; }
  .trip-command__event h3 { font-size: 1.18rem; }
  .trip-command__event-content p:last-child { overflow-wrap: anywhere; }
  .trip-command__references li { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .trip-command__references li span,
  .trip-command__references code { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .trip-page--upcoming { scroll-behavior: auto; }
}

/* Completed trip record: shares the command-centre primitives while changing
   the editorial sequence from preparation to reflection. */
.trip-page--completed {
  --trip-thread: color-mix(in srgb, var(--gold-strong) 42%, var(--border));
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin-inline: auto;
}
.trip-page--completed ::selection { background: var(--gold); color: var(--sage-dark); }
.trip-page--completed .mag__back { display: inline-flex; align-items: center; min-block-size: 44px; }
.trip-page--completed .trip-section-heading {
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  gap: .3rem;
  border-bottom: 0;
  padding-bottom: 1.35rem;
}
.trip-page--completed .trip-section-heading::after {
  position: absolute;
  inset: auto auto 0 0;
  inline-size: 4rem;
  block-size: 3px;
  background: var(--terracotta);
  content: "";
}
.trip-page--completed .trip-section-heading h2,
.trip-page--completed .trip-completed__footprint h2,
.trip-page--completed .trip-completed__record h2 { margin: .2rem 0 0; color: var(--ink); font: 600 2.15rem/1 "Playfair Display", var(--serif); }
/* Trip Summary: the owner's Claude Design "Trip Summary Redesign". A parchment band
   shading to the page's cream; on a centred 1000px measure: a terracotta-ruled label, the
   stored summary in large italic Playfair with a terracotta first letter and rule, the
   trip's counts as white cards, and "The route" on a forest card — each stay a dated stop
   on a gold line (city, stay, nights), then the legs between them. DM Sans → Space
   Grotesk (the site's two-family system, self-only CSP); small terracotta text deepened
   to #a2461f so it clears 4.5:1 on the gradient's darkest tone (the design's #b5502a is
   4.2:1 there). */
.trip-summary {
  --ts-terra: #b5502a; --ts-terra-text: #a2461f; --ts-ink: #1e2a22; --ts-card: #fff; --ts-card-edge: #e4d9c0;
  --ts-route: #1e2a22; --ts-route-ink: #faf6ee; --ts-route-soft: #f0ead9; --ts-route-muted: #d8d2c0; --ts-gold: #e9b955; --ts-route-rule: #3d4d42;
  --ts-top: #f3ead7;
  position: relative; isolation: isolate; max-inline-size: 62.5rem; margin: 0 auto; padding-block: 5rem 5.5rem; color: var(--ts-ink);
}
.trip-summary::before { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); content: ""; background: linear-gradient(180deg, var(--ts-top), var(--bg)); }
.trip-summary__label { display: flex; align-items: center; gap: .875rem; margin: 0 0 1.75rem; color: var(--ts-terra-text); font: 700 .8125rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.trip-summary__label::before { content: ""; inline-size: 2.5rem; block-size: 2px; background: var(--ts-terra); }
.trip-summary__text { max-inline-size: 53.75rem; }
.trip-summary__text p { margin: 0; color: var(--ts-ink); font: italic 400 clamp(1.75rem, 3.6vw, 2.75rem)/1.28 "Playfair Display", var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.trip-summary__text p + p { margin-block-start: .6em; }
.trip-summary__text p:first-child::first-letter { color: var(--ts-terra); }
.trip-summary__rule { display: block; inline-size: 6rem; block-size: 3px; margin-block-start: 2rem; border-radius: 2px; background: var(--ts-terra); }
/* One row of counts however many there are; two columns below tablet width. */
.trip-summary__stats { display: grid; grid-template-columns: repeat(var(--stats, 4), minmax(0, 1fr)); gap: 1rem; margin: 3.25rem 0 0; }
.trip-summary__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .625rem; padding: 1.375rem 1.5rem; border: 1px solid var(--ts-card-edge); border-radius: 14px; background: var(--ts-card); box-shadow: 0 1px 0 var(--ts-card-edge); }
.trip-summary__stats dd { margin: 0; color: var(--ts-ink); font: 400 3.25rem/1 "Playfair Display", var(--serif); }
.trip-summary__stats dt { color: var(--ts-terra-text); font: 700 .8125rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.trip-summary__route { margin-block-start: 1rem; padding: 2rem 2rem 1.75rem; border-radius: 16px; background: var(--ts-route); color: var(--ts-route-ink); }
.trip-summary__route-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.trip-summary__route-head h3, .trip-summary__route-head p { margin: 0; font: 700 .8125rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.trip-summary__route-head h3 { color: var(--ts-gold); }
.trip-summary__route-head p { color: var(--ts-route-muted); }
.trip-summary__stops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); row-gap: 2rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.trip-summary__stops:has(> li:only-child) { max-inline-size: 50%; }
.trip-summary__nowrap { white-space: nowrap; }
.trip-summary__stops li { position: relative; padding: 1.375rem 1.25rem 0 0; border-block-start: 2px solid var(--ts-gold); }
.trip-summary__stops li::before { position: absolute; inset-block-start: -8px; inset-inline-start: 0; content: ""; inline-size: 14px; block-size: 14px; box-sizing: border-box; border: 3px solid var(--ts-route); border-radius: 50%; background: var(--ts-gold); outline: 2px solid var(--ts-gold); }
.trip-summary__stop-dates { margin: 0; color: var(--ts-route-muted); font: 700 .75rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.trip-summary__stop-city { margin: .375rem 0 .25rem; color: var(--ts-route-ink); font: 400 1.875rem/1.15 "Playfair Display", var(--serif); overflow-wrap: anywhere; }
.trip-summary__stop-stay { margin: 0; color: var(--ts-route-soft); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.trip-summary__stop-nights { margin: .125rem 0 0; color: var(--ts-gold); font-size: .9375rem; }
.trip-summary__legs { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.75rem 0 0; padding: 1.125rem 0 0; border-block-start: 1px solid var(--ts-route-rule); list-style: none; color: var(--ts-route-soft); font-size: .9375rem; }
.trip-summary__legs li { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; }
.trip-summary__legs b { margin-inline-end: .35rem; color: var(--ts-gold); font-weight: 700; }
/* The Journey: the factual companion to "How you remember it". Same heading voice — Playfair
   400 at the memory band's size, one word in italic (terracotta, the light register's
   counterpart to the band's gold) over a quiet line — and the same centred 1000px measure
   as the bands above, but on the page's own cream, with the itinerary itself unchanged: the
   record, not the journal. A gold waypoint on the memory band's lower edge (the route
   card's stop dot) marks the hand-off. */
/* The Journey and the record sections after it share the bands' centred measure, so the
   page keeps one left edge from Trip Summary to Trip record. */
.trip-page--completed .trip-journey,
.trip-page--completed .trip-completed__footprint,
.trip-page--completed .trip-completed__record { max-inline-size: 62.5rem; margin-inline: auto; }
.trip-page--completed .trip-journey__head { gap: .5rem; padding-bottom: 1.5rem; }
.trip-page--completed .trip-journey__head::after { content: none; }
.trip-page--completed .trip-journey__head h2 { margin: 0; color: var(--ink); font: 400 2.75rem/1.1 "Playfair Display", var(--serif); }
.trip-journey__head h2 em { color: var(--accent); font-style: italic; }
.trip-journey__note { margin: 0; color: var(--ink-3); font: 400 .9375rem/1.4 "Space Grotesk", var(--sans); }
/* The heading introduces the days; the first day needs no rule of its own under it. */
.trip-page--completed .trip-journey__head + .trip-command__day { border-top: 0; padding-top: .75rem; }
.trip-summary + .trip-command__itinerary { margin-block-start: 2rem; }
.remember + .trip-journey { margin-block-start: 4rem; }
/* The hand-off: a waypoint on the memory band's lower edge, at the content's left edge (the
   route card's stop dot), and a short gold stem down to the Journey's heading — the route
   continuing from the journal into the record. */
.remember::after {
  position: absolute; inset-block-end: -9px; inset-inline-start: max(0px, calc((100% - 62.5rem) / 2)); content: "";
  inline-size: 16px; block-size: 16px; box-sizing: border-box; border: 3px solid var(--hy-base); border-radius: 50%;
  background: var(--hy-gold); outline: 2px solid var(--hy-gold);
}
.remember + .trip-journey .trip-journey__head::before {
  position: absolute; inset-block-start: -3.35rem; inset-inline-start: 7px; content: "";
  inline-size: 2px; block-size: 2.6rem; background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 0%, transparent));
}
@media (prefers-color-scheme: dark) {
  /* One hairline above and below: the dark band stays distinct from the dark page. */
  .remember::before { border-block: 1px solid var(--hy-edge); }
}
@media (max-width: 560px) {
  .trip-page--completed .trip-journey__head h2 { font-size: 2.25rem; }
  .remember + .trip-journey { margin-block-start: 3rem; }
  .remember + .trip-journey .trip-journey__head::before { inset-block-start: -2.35rem; block-size: 1.7rem; }
}
@media (prefers-color-scheme: dark) {
  .trip-summary { --ts-top: #1d241e; --ts-ink: var(--ink); --ts-terra: var(--accent); --ts-terra-text: var(--accent); --ts-card: var(--surface); --ts-card-edge: var(--border); }
  .trip-summary { --ts-route: #121813; }
  .trip-summary__route { box-shadow: inset 0 0 0 1px var(--ts-route-rule); }
}
@media (max-width: 56rem) {
  .trip-summary__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 18rem) {
  .trip-summary__stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .trip-summary { padding-block: 3.5rem 4rem; }
  .trip-summary__route { padding: 1.5rem 1.25rem 1.375rem; }
  .trip-summary__stops { row-gap: 1.25rem; }
  .trip-summary__stops:has(> li:only-child) { max-inline-size: none; }
  .trip-summary__stats dd { font-size: 2.75rem; }
}

.trip-completed__weather { max-width: var(--measure); margin: .7rem 0 0; color: var(--ink-2); font: 600 .88rem/1.5 "Space Grotesk", var(--sans); overflow-wrap: anywhere; }
.trip-page--completed .trip-command__day > header .section__label { margin: 0; }
/* The completed Journey renders its booking names as h4 (under the day's h3); give them the
   Playfair title the upcoming Journey's h3 has, a step smaller, so a booking stays the
   primary object of its row when a reflection memory sits beneath it. */
.trip-page--completed .trip-command__event-content h4 {
  margin: .24rem 0; color: var(--ink); font: 600 1.25rem/1.2 "Playfair Display", var(--serif); overflow-wrap: anywhere;
}
.trip-page--completed .trip-completed__day--quiet { padding-block: 1.5rem .75rem; }
.trip-page--completed .trip-completed__day--quiet ol { margin-top: .9rem; }
.trip-page--completed .trip-completed__day--quiet .trip-command__event { padding-bottom: .9rem; }
/* Cancelled bookings sit apart from the Journey, after it: a short quiet list, never a Journey row. */
.trip-completed__cancelled { max-width: var(--measure); margin-top: 1.6rem; }
.trip-completed__cancelled h2 { margin: 0 0 .45rem; }
.trip-completed__cancelled ul { margin: 0; padding: 0; list-style: none; }
.trip-completed__cancelled li { padding: .3rem 0; color: var(--ink-2); font: .95rem/1.5 "Space Grotesk", var(--sans); overflow-wrap: anywhere; }
.trip-completed__cancelled-type { margin-right: .35rem; color: var(--ink-2); font: 700 .7rem/1.25 "Space Grotesk", var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.trip-completed__footprint,
.trip-completed__record { margin-top: 3rem; border-top: 1px solid var(--border-strong); padding-top: 2rem; }
.trip-completed__footprint figure { margin: 0; }
.trip-completed__footprint img { display: block; width: min(100%, 58rem); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.trip-completed__footprint figcaption { max-width: var(--measure); margin-top: .9rem; color: var(--ink-2); font: 650 .92rem/1.5 "Space Grotesk", var(--sans); overflow-wrap: anywhere; }
.trip-completed__record ol { margin: 0; padding: 0; list-style: none; }
.trip-completed__record li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; min-width: 0; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.trip-completed__record li > div { min-width: 0; }
.trip-record__type { margin: 0; color: var(--accent); font: 700 .7rem/1.25 "Space Grotesk", var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.trip-completed__record h3 { margin: .22rem 0; color: var(--ink); font: 600 1.25rem/1.2 "Playfair Display", var(--serif); overflow-wrap: anywhere; }
.trip-completed__record h3 + p { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.trip-record__actions { display: grid; gap: .55rem; justify-items: end; }
.trip-record__confirmation { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem; }
.trip-record__confirmation code { color: var(--accent); font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.trip-record__actions .btn { min-block-size: 44px; }
.trip-page--completed a:focus-visible,
.trip-page--completed button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .trip-page--completed { width: calc(100% - 28px); }
  .trip-page--completed .trip-completed__day--quiet { padding-block: 1.25rem .45rem; }
  .trip-page--completed .trip-command__event-time { font-size: .84rem; }
  .trip-page--completed .trip-command__event-type { font-size: .72rem; }
  .trip-page--completed .trip-command__event-content h4 { font-size: 1.12rem; }
  .trip-completed__record li { flex-direction: column; gap: .8rem; }
  .trip-record__actions, .trip-record__confirmation { justify-items: start; justify-content: flex-start; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .trip-page--completed { scroll-behavior: auto; } }

/* Public product pages: a quiet reading surface drawn from the existing paper,
   hedge and waypoint vocabulary rather than a separate SaaS template. */
.public-page { min-height: 100vh; background: var(--cream); }
.public-page .pb { max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.public-page .pb__nav { flex-wrap: wrap; gap: 10px 16px; }
.public-page .pb__nav > a:not(.pb__login) { color: var(--ink-2); font-size: 13px; text-decoration: none; }
.public-page__main, .policy-page__main { max-width: none; margin: 0; padding: 0; }
.public-page__main { outline: none; }
.public-page__hero { max-width: 900px; margin: 0 auto; padding: clamp(54px, 9vw, 112px) 24px clamp(40px, 7vw, 76px); }
.public-page__category { margin: 0 0 14px; color: var(--accent); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.public-page__hero h1, .public-page__section h2, .public-page__cta h2 { font-family: var(--public-display); font-weight: 500; color: var(--sage-dark); letter-spacing: -.025em; }
.public-page__hero h1 { max-width: 16ch; margin: 0; font-size: clamp(42px, 7vw, 76px); line-height: .99; text-wrap: balance; }
.public-page__hero > p:last-child { max-width: 62ch; margin: 26px 0 0; color: var(--ink-2); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.public-page__body { max-width: 900px; margin: 0 auto; padding: 0 24px 72px; }
.public-page__section { max-width: 68ch; padding: 30px 0 34px; border-top: 1px solid var(--border); }
.public-page__section h2 { margin: 0 0 12px; font-size: clamp(25px, 3vw, 35px); line-height: 1.12; }
.public-page__section p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.public-page__section p + p { margin-top: 14px; }
.public-page__section a, .public-page__textLink, .hedge__proof a, .hedge__scope a, .hedge__more a, .hedge__trust a, .hedge__refuseEvidence a, .hedge__availability a { color: var(--accent); font-weight: 650; text-underline-offset: .18em; }
.hedge__availability a { color: #f1c66c; }
.public-page__main a:focus-visible { outline: 3px solid var(--accent-strong, var(--accent)); outline-offset: 3px; border-radius: 2px; }
.public-nav__menu { display: none; }
.public-page__cta { max-width: 900px; margin: 0 auto 76px; padding: 46px 36px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); text-align: center; }
.public-page__cta h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; }
.public-page__cta p { max-width: 54ch; margin: 16px auto 0; color: var(--ink-2); line-height: 1.65; }
.public-page__cta .btn { display: inline-block; margin-right: 12px; }
.public-page__crumbs { max-width: 900px; margin: 0 auto; padding: 28px 24px 0; display: flex; gap: 8px; color: var(--ink-3); font-size: 13px; }
.public-page__crumbs a { color: var(--accent); }

.public-page__evidence { max-width: min(900px, calc(100% - 40px)); padding: 30px 34px; text-align: left; }
.public-page__evidence h2 { font-size: clamp(25px, 3vw, 34px); }
.public-page__evidence p { max-width: 62ch; margin-left: 0; }
.public-page__evidence .btn { max-width: 100%; white-space: normal; text-wrap: balance; }

.plan-comparison__wrap { margin: 22px 0 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.plan-comparison { width: 100%; border-collapse: collapse; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-comparison caption { padding: 18px 0 14px; color: var(--ink); font-family: var(--serif); font-size: 1.22rem; font-weight: 600; text-align: left; }
.plan-comparison th, .plan-comparison td { padding: .72rem .8rem; border-top: 1px solid var(--border); vertical-align: middle; }
.plan-comparison thead th { border-top: 0; background: color-mix(in srgb, var(--sage) 11%, var(--surface)); color: var(--sage-dark); font-size: .82rem; font-weight: 700; text-align: center; }
.plan-comparison thead th:first-child { text-align: left; }
.plan-comparison tbody th { width: 62%; color: var(--ink-2); font-size: .91rem; font-weight: 600; line-height: 1.4; text-align: left; }
.plan-comparison td { width: 19%; color: var(--ink); font-size: .9rem; font-weight: 700; text-align: center; }
.plan-comparison__commercial th, .plan-comparison__commercial td { background: color-mix(in srgb, var(--gold) 8%, var(--surface)); color: var(--sage-dark); }
.plan-comparison__value, .plan-comparison__price { display: inline-block; min-width: 2.5rem; }
.plan-comparison__cell-label { display: none; }
.plan-comparison__note { margin: 18px 0 0; color: var(--ink-2); font-size: .94rem; }
.plan-comparison__note strong { color: var(--sage-dark); }

.sample-trip-notice { max-width: min(1240px, calc(100% - 48px)); margin: 18px auto 0; padding: .8rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.sample-trip-notice strong { color: var(--sage-dark); }

@media (max-width: 640px) {
  .public-page__evidence { padding: 28px 22px; }
  .plan-comparison caption { padding: 16px 0 12px; font-size: 1.13rem; }
  .plan-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .plan-comparison, .plan-comparison tbody, .plan-comparison tr, .plan-comparison th, .plan-comparison td { display: block; width: auto; }
  .plan-comparison tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .85rem; padding: .8rem 0; border-top: 1px solid var(--border); }
  .plan-comparison tbody th, .plan-comparison tbody td { box-sizing: border-box; padding: .25rem 0; border: 0; }
  .plan-comparison tbody th { grid-column: 1 / -1; width: auto; margin-bottom: .25rem; color: var(--sage-dark); }
  .plan-comparison td { display: flex; align-items: baseline; justify-content: space-between; width: auto; color: var(--ink-2); text-align: left; }
  .plan-comparison__cell-label { display: inline; color: var(--ink-3); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .plan-comparison__commercial { margin-inline: -.55rem; padding-inline: .55rem !important; }
  .sample-trip-notice { max-width: calc(100% - 28px); margin-top: 14px; }
}
.hedge__category { margin: 0 0 14px; color: rgba(244, 241, 230, .72); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.hedge__heroTrust, .hedge__availability { max-width: 58ch; margin: 14px auto 0; color: rgba(244, 241, 230, .68); font-size: 13px; line-height: 1.55; }
.hedge__availability { margin-top: 16px; }
.hedge__proof { max-width: 70ch; margin: 28px auto 0; color: rgba(244, 241, 230, .7); font-size: 14px; line-height: 1.6; text-align: center; }
.hedge__sectionIntro { max-width: 64ch; margin: -32px 0 34px; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.hedge__scope { max-width: 64ch; margin: 30px 0 0; color: var(--ink-2); line-height: 1.65; }
.hedge__more { margin: 16px 0 0; font-size: 14px; }
.hedge__refuseIntro, .hedge__refuseEvidence { margin: 0 0 18px; color: var(--hd-ink-soft); font-size: 15px; line-height: 1.65; }
.hedge__refuseEvidence { margin: 20px 0 0; }
.hedge__navLinks > a:not(.pb__login):not(.hedge__gate) { color: rgba(244, 241, 230, .72); font-size: 13px; text-decoration: none; }
.hedge__footNav span { color: rgba(244, 241, 230, .88); font-weight: 650; }
@media (max-width: 640px) {
  .public-nav__desktop { display: none; }
  .public-nav__menu { display: block; margin-left: auto; }
  .public-nav__menu:not([open]) > nav { display: none; }
  .public-nav__menu > summary { display: flex; align-items: center; min-block-size: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--ink); cursor: pointer; font-size: .875rem; font-weight: 700; }
  .public-nav__menu > summary::marker { content: ""; }
  .public-nav__menu > summary::after { content: "+"; margin-left: .5rem; font-size: 1.15em; }
  .public-nav__menu[open] > summary::after { content: "−"; }
  .public-nav__menu > nav { display: grid; gap: 4px; min-width: min(18rem, calc(100vw - 40px)); margin-top: 8px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--sage-dark) 70%, transparent); }
  .public-nav__menu > nav a { display: flex; align-items: center; min-block-size: 44px; padding: 0 10px; color: var(--ink-2); font-size: 1rem; font-weight: 600; text-decoration: none; }
  .public-nav__menu > nav a[aria-current="page"] { color: var(--sage-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
  .public-nav__menu > nav .pb__login { margin-top: 4px; justify-content: center; }
  .public-nav__menu > summary:focus-visible, .public-nav__menu > nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .public-page__cta { margin-left: 20px; margin-right: 20px; padding: 36px 22px; }
  .hedge__navLinks > a:not(.pb__login):not(.hedge__gate):not(:first-child) { display: none; }
  .hedge__heroBody { padding-top: 28px; }
  .hedge__lockup { width: min(220px, 60vw); min-width: 0; }
}

/* Public story, atlas and capability essays. The renderer owns semantic order;
   these named archetypes only compose the approved content around its real
   sequence. */
.public-page--features, .capability-page {
  --public-route: color-mix(in srgb, var(--sage-dark) 46%, transparent);
  background: var(--cream);
  overflow: clip;
}
.public-page .public-bar { max-width: 1280px; padding: 24px clamp(20px, 5vw, 72px); }
.public-page .public-bar .pb__nav > a[aria-current="page"] { color: var(--sage-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .38em; }
.public-page--features .public-bar { position: relative; z-index: 1; isolation: isolate; color: var(--public-night-ink); }
.public-page--features .public-bar::before { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--public-forest); content: ""; }
.public-page--features .public-bar .pb__brand { color: var(--public-night-ink); }
.public-page--features .public-bar .pb__nav > a:not(.pb__login) { color: color-mix(in srgb, var(--public-night-ink) 76%, transparent); }
.public-page--features .public-bar .pb__nav > a[aria-current="page"] { color: var(--public-night-ink); }
.editorial-hero { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: clamp(4.25rem, 8vw, 8rem) clamp(20px, 5vw, 72px) clamp(4.5rem, 8vw, 8.5rem); }
.editorial-hero h1 { max-width: 15ch; margin: 0; color: var(--sage-dark); font-family: var(--public-display); font-size: clamp(3rem, 6.8vw, 5.7rem); font-weight: 450; letter-spacing: -.045em; line-height: .95; text-wrap: balance; }
.editorial-hero > p { max-width: 62ch; margin: 1.55rem 0 0 clamp(0px, 8vw, 9rem); color: var(--ink-2); font-size: clamp(1.05rem, 1.45vw, 1.18rem); line-height: 1.68; text-wrap: pretty; }
.public-page__crumbs + .editorial-hero { padding-top: clamp(2.5rem, 5vw, 5rem); }
.public-page__crumbs { max-width: 1280px; padding-inline: clamp(20px, 5vw, 72px); }

/* Features masthead and evidence handoff. */
.public-page--features { --story-gold: #D8AA57; /* the landing's night gold (--hd-gold), scoped to these pages */ }
.story-hero { position: relative; z-index: 1; overflow: clip; background: var(--public-forest); color: var(--public-night-ink); }
.story-hero::after { position: absolute; right: clamp(20px, 7vw, 8rem); bottom: -1px; width: min(24vw, 22rem); height: 38px; border-top: 2px solid rgba(216,170,87,.7); border-radius: 100% 0 0; content: ""; }
.story-hero__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: end; gap: clamp(2rem, 5vw, 4.5rem); max-width: 1280px; margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) clamp(20px, 5vw, 72px) clamp(3.25rem, 6vw, 5.5rem); }
.story-hero__kicker { margin: 0 0 20px; color: var(--story-gold); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.story-hero h1 { max-width: 17ch; margin: 0; color: var(--public-night-ink); font-family: var(--public-display); font-size: clamp(2.75rem, 5.2vw, 4.6rem); font-weight: 450; letter-spacing: -.04em; line-height: .97; text-wrap: balance; }
.story-hero h1 em { color: var(--story-gold); font-style: italic; }
.story-hero__intro { max-width: 52ch; margin: 0; color: var(--public-night-muted); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.68; text-wrap: pretty; }
.story-hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0; margin: 32px 0 0; border-top: 1px solid rgba(216,170,87,.45); }
.story-hero__facts > div { padding: 16px 18px 0 0; }
.story-hero__facts dt { color: var(--story-gold); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-hero__facts dd { margin: 8px 0 0; color: var(--public-night-ink); font-size: 15px; line-height: 1.45; }
.features-hero__actions { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 1.2rem 0 0; }
.features-hero__actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--story-gold); font-size: 14px; font-weight: 700; text-underline-offset: .24em; }
.features-hero__actions a:last-child { color: var(--public-night-muted); font-weight: 600; }
.features-hero__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) 1rem; }
.features-hero__index > span { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features-hero__index a { display: flex; align-items: center; min-width: 0; min-height: 44px; padding-right: 10px; border-top: 1px solid rgba(216,170,87,.45); color: var(--public-night-ink); font-size: 12px; line-height: 1.35; text-decoration: none; }
.features-hero__index-secondary a { color: var(--public-night-muted); }
.features-hero__index a:hover { color: var(--story-gold); }
.public-page--features .public-nav__menu > summary { border-color: rgba(244,241,230,.48); color: var(--public-night-ink); }
.public-page--features .public-bar :is(.pb__brand, .public-nav__desktop a:not(.public-login), .public-nav__menu > summary):focus-visible { outline: 3px solid var(--story-gold); outline-offset: 3px; }
.story-evidence { padding: clamp(3rem, 6vw, 5rem) clamp(20px, 5vw, 72px) clamp(3.5rem, 7vw, 6rem); }
.story-evidence__inner { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 4rem); max-width: calc(1280px - 2 * clamp(20px, 5vw, 72px)); margin: 0 auto; padding-top: 1.4rem; border-top: 1px solid var(--border-strong); }
.story-evidence h2 { flex: 1 1 15rem; max-width: 14ch; margin: 0; color: var(--sage-dark); font-family: var(--public-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.story-evidence__copy { flex: 1.4 1 22rem; }
.story-evidence__copy p { max-width: 52ch; margin: 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; text-wrap: pretty; }
.story-evidence__copy .story-evidence__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; max-width: none; margin-top: 1.6rem; }
.story-evidence .btn { display: inline-flex; align-items: center; max-width: 100%; min-height: 48px; padding: 12px 22px; border-color: var(--sage-dark); background: var(--sage-dark); color: var(--cream); font-size: 15px; font-weight: 600; white-space: normal; text-wrap: balance; }
.story-evidence .btn:hover { border-color: var(--public-forest); background: var(--public-forest); }
.story-evidence .public-page__textLink { font-size: 15px; text-underline-offset: .22em; }

/* Shared essay type for the atlas and capability pages. */
.capability-page h2 { margin: 0 0 .9rem; color: var(--sage-dark); font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.55rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.capability-page__section p { max-width: 62ch; margin: 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; }
.capability-page__section p + p { margin-top: 1rem; }

/* How It Works: worked confirmation records and trip assembly. */
.public-page--workbench {
  --hiw-paper: #fffaf0;
  --hiw-paper-deep: #f2eadb;
  --hiw-rule: #d6cbb8;
  --hiw-muted: #596151;
  --hiw-review: #8f401d;
  min-height: 100vh;
  overflow: clip;
  background: var(--cream);
}
.public-page--workbench .public-bar {
  position: relative;
  z-index: 2;
  isolation: isolate;
  color: var(--public-night-ink);
}
.public-page--workbench .public-bar::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--public-forest);
  content: "";
}
.public-page--workbench .public-bar .pb__brand,
.public-page--workbench .public-nav__menu > summary { color: var(--public-night-ink); }
.public-page--workbench .public-bar .pb__nav > a:not(.pb__login) { color: color-mix(in srgb, var(--public-night-ink) 76%, transparent); }
.public-page--workbench .public-bar .pb__nav > a[aria-current="page"] { color: var(--public-night-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .38em; }
.public-page--workbench :is(a:not(.public-login), summary):focus-visible { outline: 3px solid #f1c66c; outline-offset: 3px; border-radius: 2px; }

.hiw-hero { background: var(--public-forest); color: var(--public-night-ink); border-top: 1px solid rgba(244,241,230,.12); }
.hiw-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  max-width: 1280px;
  min-height: min(720px, calc(100vh - 80px));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7.5rem) clamp(20px, 5vw, 72px) clamp(4.5rem, 8vw, 7rem);
}
.hiw-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--public-night-ink);
  font-family: var(--public-display);
  font-size: clamp(3.15rem, 6.4vw, 5.8rem);
  font-weight: 450;
  letter-spacing: -.04em;
  line-height: .94;
  text-wrap: balance;
}
.hiw-hero h1 em { color: var(--story-gold, #D8AA57); font-style: italic; }
.hiw-hero__copy > p { max-width: 58ch; margin: 1.75rem 0 0; color: var(--public-night-muted); font-size: clamp(1.05rem, 1.35vw, 1.18rem); line-height: 1.68; text-wrap: pretty; }
.hiw-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 2rem; }
.hiw-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border-color: var(--hiw-paper);
  background: var(--hiw-paper);
  color: var(--public-forest);
  font-weight: 650;
}
.hiw-hero__actions .btn:hover { border-color: var(--story-gold, #D8AA57); background: var(--story-gold, #D8AA57); }
.hiw-hero__actions .public-page__textLink { color: #f1c66c; font-size: 15px; text-underline-offset: .24em; }

.hiw-confirmations { position: relative; min-height: 440px; margin: 0; }
.hiw-confirmations > figcaption { position: absolute; top: 0; left: 0; color: var(--story-gold, #D8AA57); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hiw-confirmation {
  position: absolute;
  box-sizing: border-box;
  width: min(22rem, 78%);
  min-height: 12.25rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(93,83,60,.25);
  border-radius: 3px;
  background: var(--hiw-paper);
  color: var(--sage-dark);
  box-shadow: 0 22px 42px -28px rgba(0,0,0,.6);
}
.hiw-confirmation::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: var(--confirmation-color, var(--terracotta)); content: ""; }
.hiw-confirmation--flight { top: 48px; left: 0; z-index: 3; transform: rotate(-2.2deg); --confirmation-color: var(--blue); }
.hiw-confirmation--stay { top: 146px; right: 0; z-index: 2; transform: rotate(2.4deg); --confirmation-color: var(--green); }
.hiw-confirmation--rail { top: 252px; left: 10%; z-index: 1; transform: rotate(-.8deg); --confirmation-color: var(--purple); }
.hiw-confirmation p { margin: 0; }
.hiw-confirmation__kind { color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hiw-confirmation__title { margin-top: .8rem !important; font-family: var(--public-display); font-size: 1.35rem; }
.hiw-confirmation p:not([class]) { margin-top: .6rem; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.hiw-confirmation > span { display: inline-block; margin-top: .9rem; padding-top: .55rem; border-top: 1px solid var(--hiw-rule); color: var(--ink-3); font-size: .76rem; }

.hiw-anatomy, .hiw-assembly { max-width: 1280px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(20px, 5vw, 72px); }
.hiw-section-heading { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.hiw-section-heading h2, .hiw-review h2, .hiw-boundary h2, .hiw-close h2 {
  margin: 0;
  color: var(--sage-dark);
  font-family: var(--public-display);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 450;
  letter-spacing: -.035em;
  line-height: 1;
  text-wrap: balance;
}
.hiw-section-heading > p { max-width: 58ch; margin: .4rem 0 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; text-wrap: pretty; }
.hiw-anatomy__table { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, .9fr); align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(3rem, 6vw, 5rem); }
.hiw-source, .hiw-record {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--hiw-rule);
  border-radius: 4px;
  background: var(--hiw-paper);
  box-shadow: 0 20px 46px -34px rgba(44,62,46,.48);
}
.hiw-source figcaption, .hiw-record__label { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--hiw-rule); color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hiw-source__header { padding: 14px 18px; border-bottom: 1px solid var(--hiw-rule); }
.hiw-source__header p { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 8px; margin: 0; color: var(--ink-2); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.hiw-source__header p + p { margin-top: 5px; }
.hiw-source__header span { color: var(--ink-3); }
.hiw-source__body { min-height: 13rem; padding: 24px 28px; color: var(--ink-2); font-size: .95rem; line-height: 1.65; }
.hiw-source__body p { margin: 0; }
.hiw-source__body p + p { margin-top: 1rem; }
.hiw-source mark { padding: 0 .15em; background: color-mix(in srgb, var(--gold) 30%, var(--hiw-paper)); color: var(--sage-dark); }
.hiw-source code, .hiw-record code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.hiw-source__attachment { margin: 0; padding: 12px 18px; border-top: 1px solid var(--hiw-rule); color: var(--accent-strong); font-size: .82rem; font-weight: 650; }
.hiw-transfer { display: flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hiw-transfer span { flex: 1; height: 1px; background: var(--gold-strong); }
.hiw-record { overflow: hidden; background: var(--surface); }
.hiw-record__route { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 26px 22px; border-bottom: 1px solid var(--hiw-rule); color: var(--sage-dark); font-family: var(--public-display); font-size: clamp(1.7rem, 3vw, 2.45rem); }
.hiw-record__route > span { color: var(--gold-strong); font-family: var(--sans); font-size: 1rem; }
.hiw-record dl { margin: 0; }
.hiw-record dl > div { display: grid; grid-template-columns: minmax(6.5rem, .8fr) minmax(0, 1.2fr); gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.hiw-record dt { color: var(--hiw-muted); font-size: .78rem; font-weight: 650; }
.hiw-record dd { margin: 0; color: var(--ink-2); font-size: .88rem; }
.hiw-record dd span { display: block; margin-top: 3px; color: var(--hiw-muted); font-size: .75rem; }
.hiw-record__uncertain { background: color-mix(in srgb, var(--terracotta) 10%, var(--surface)); }
.hiw-record__uncertain dd strong { color: var(--accent); }
.hiw-anatomy__note { max-width: 72ch; margin: 2rem 0 0 auto; padding-top: 1.1rem; border-top: 1px solid var(--border-strong); color: var(--ink-3); font-size: .92rem; line-height: 1.65; }

.hiw-assembly { max-width: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--hiw-paper-deep); }
.hiw-assembly > * { max-width: calc(1280px - 2 * clamp(20px, 5vw, 72px)); margin-inline: auto; }
.hiw-assembly__spread { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); margin-top: clamp(3rem, 6vw, 5rem); }
.hiw-booking-stack { display: grid; gap: 0; padding: 1rem 0; }
.hiw-booking-stack article { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 4px 16px; margin: 0; padding: 16px 0; border-top: 1px solid var(--hiw-rule); }
.hiw-booking-stack article:last-child { border-bottom: 1px solid var(--hiw-rule); }
.hiw-booking-stack span { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hiw-booking-stack strong { color: var(--sage-dark); font-size: .93rem; font-weight: 650; }
.hiw-booking-stack small { color: var(--hiw-muted); font-size: .78rem; }
.hiw-booking-stack__review span, .hiw-booking-stack__review small { color: var(--hiw-review); }
.hiw-trip-sheet { margin: 0; border: 1px solid var(--hiw-rule); border-radius: 4px; background: var(--hiw-paper); box-shadow: 0 24px 55px -40px rgba(44,62,46,.5); }
.hiw-trip-sheet figcaption { padding: 14px 20px; border-bottom: 1px solid var(--hiw-rule); color: var(--ink-3); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hiw-trip-sheet__dates { margin: 0; padding: 22px 22px 6px; color: var(--sage-dark); font-family: var(--public-display); font-size: 2rem; }
.hiw-trip-sheet ol { margin: 0; padding: 10px 22px 22px; list-style: none; }
.hiw-trip-sheet li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 15px 0; border-top: 1px solid var(--hiw-rule); }
.hiw-trip-sheet time { color: var(--ink-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.hiw-trip-sheet li > span { color: var(--ink-3); font-size: .83rem; line-height: 1.45; }
.hiw-trip-sheet b { display: block; color: var(--sage-dark); font-size: .92rem; font-weight: 650; }
.hiw-trip-sheet__review b { color: var(--hiw-review); }

.hiw-review { display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 7vw, 8rem); max-width: 1280px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(20px, 5vw, 72px); }
.hiw-review__lead > p { margin: 0 0 .8rem; color: var(--terracotta); font-family: var(--public-display); font-size: clamp(5rem, 10vw, 9rem); font-style: italic; line-height: .7; }
.hiw-review__copy > p { max-width: 58ch; margin: 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; }
.hiw-review__copy > p + p { margin-top: 1.6rem; }
.hiw-review__copy dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 2rem 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.hiw-review__copy dl > div { padding: 1.2rem 1.1rem 1.2rem 0; }
.hiw-review__copy dl > div + div { padding-left: 1.1rem; border-left: 1px solid var(--border); }
.hiw-review__copy dt { color: var(--sage-dark); font-size: .85rem; font-weight: 700; }
.hiw-review__copy dd { margin: .5rem 0 0; color: var(--ink-3); font-size: .82rem; line-height: 1.5; }

.hiw-boundary { background: var(--public-forest); color: var(--public-night-ink); }
.hiw-boundary__inner { display: grid; grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 7vw, 8rem); max-width: 1280px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(20px, 5vw, 72px); }
.hiw-boundary h2 { color: var(--public-night-ink); }
.hiw-boundary h2 + p { max-width: 42ch; margin: 1.4rem 0 0; color: var(--public-night-muted); font-size: 1rem; line-height: 1.65; }
.hiw-boundary dl { margin: 0; border-top: 1px solid rgba(216,170,87,.5); }
.hiw-boundary dl > div { display: grid; grid-template-columns: minmax(8.5rem, .72fr) minmax(0, 1.28fr); gap: 1rem; padding: 15px 0; border-bottom: 1px solid rgba(244,241,230,.14); }
.hiw-boundary dt { color: var(--story-gold, #D8AA57); font-size: .78rem; font-weight: 700; }
.hiw-boundary dd { margin: 0; color: var(--public-night-muted); font-size: .9rem; line-height: 1.5; }
.hiw-boundary__links { display: flex; flex-wrap: wrap; grid-column: 2; gap: 10px 24px; margin-top: -1rem; font-size: .9rem; line-height: 1.6; }
.hiw-boundary a { color: #f1c66c; font-weight: 650; text-underline-offset: .22em; }

.hiw-close { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); align-items: end; gap: clamp(2rem, 7vw, 8rem); max-width: 1280px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(20px, 5vw, 72px); }
.hiw-close h2 { font-size: clamp(2.1rem, 3.5vw, 3.25rem); }
.hiw-close h2 + p { max-width: 52ch; margin: 1rem 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.hiw-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0; }
.hiw-close__actions .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; background: var(--sage-dark); color: var(--cream); font-size: 15px; white-space: normal; text-wrap: balance; }
.hiw-close__actions .public-page__textLink { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }

@media (max-width: 900px) {
  .hiw-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .hiw-confirmations { width: min(34rem, 100%); min-height: 410px; margin-inline: auto; }
  .hiw-section-heading, .hiw-review, .hiw-boundary__inner, .hiw-close { grid-template-columns: minmax(0, 1fr); }
  .hiw-anatomy__table { grid-template-columns: minmax(0, 1fr); }
  .hiw-transfer { justify-content: center; }
  .hiw-transfer span { max-width: 5rem; }
  .hiw-transfer span:first-child { transform: rotate(90deg); }
  .hiw-transfer span:last-child { transform: rotate(90deg); }
  .hiw-assembly__spread { grid-template-columns: minmax(0, 1fr); }
  .hiw-boundary__links { grid-column: auto; margin-top: 0; }
}
@media (max-width: 640px) {
  .hiw-hero__inner { gap: 2.5rem; padding-top: 3rem; }
  .hiw-hero h1 { font-size: clamp(2.65rem, 13vw, 3.5rem); }
  .hiw-hero__actions, .hiw-close__actions { align-items: stretch; flex-direction: column; }
  .hiw-hero__actions .btn, .hiw-close__actions .btn { justify-content: center; width: 100%; }
  .hiw-hero__actions .public-page__textLink, .hiw-close__actions .public-page__textLink { justify-content: center; min-height: 44px; text-align: center; }
  .hiw-confirmations { min-height: 440px; }
  .hiw-confirmation { width: 84%; min-height: 10.8rem; padding: 1.1rem 1.15rem; }
  .hiw-confirmation--flight { top: 38px; }
  .hiw-confirmation--stay { top: 145px; }
  .hiw-confirmation--rail { top: 252px; }
  .hiw-confirmation__title { margin-top: .55rem !important; font-size: 1.2rem; }
  .hiw-confirmation p:not([class]) { margin-top: .45rem; font-size: .82rem; }
  .hiw-confirmation > span { margin-top: .55rem; }
  .hiw-anatomy, .hiw-assembly, .hiw-review, .hiw-boundary__inner, .hiw-close { padding-block: 3.5rem; }
  .hiw-section-heading h2, .hiw-review h2, .hiw-boundary h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .hiw-source__body { min-height: 0; padding: 20px; }
  .hiw-record__route { font-size: 1.75rem; }
  .hiw-booking-stack article { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .hiw-trip-sheet li { grid-template-columns: 3.7rem minmax(0, 1fr); gap: .75rem; }
  .hiw-review__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1rem; }
  .hiw-review__lead > p { margin: 0; font-size: 4.5rem; }
  .hiw-review__copy dl { grid-template-columns: minmax(0, 1fr); }
  .hiw-review__copy dl > div, .hiw-review__copy dl > div + div { padding: 1rem 0; border-left: 0; border-top: 1px solid var(--border); }
  .hiw-review__copy dl > div:first-child { border-top: 0; }
  .hiw-boundary dl > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}
@media (max-width: 360px) {
  .features-itinerary__kind { display: none; }
  .hiw-confirmation { width: 90%; }
  .hiw-confirmation--stay { right: -2%; }
  .hiw-confirmation--rail { left: 4%; }
  .hiw-source__header p { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .hiw-record dl > div { grid-template-columns: minmax(5.5rem, .7fr) minmax(0, 1.3fr); }
}

/* Features: an illustrated capability index with a working itinerary,
   distinct archive and Premium bands, paired ownership tools, and a final
   evidence handoff. The light canvas is fixed to preserve the intended
   cream editorial surface across OS color schemes. */
.public-page--features { --surface: #FFFCF5; --border: #E5DECF; --border-strong: #D3C9B4; --ink-2: #3A423C; --ink-3: #69705F; --accent: #A2542F; --accent-strong: #8F6220; }
.features-spreads { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.features-spread { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(3rem, 6vw, 5.5rem) 0 0; }
.features-spread--itinerary { flex-direction: row-reverse; }
.features-spread__copy { flex: 1.15 1 21rem; max-width: 34rem; }
.features-spread__figure { flex: 1 1 19rem; min-width: 0; max-width: 26rem; }
.features-spread__figure img { display: block; width: 100%; height: auto; }
.features-spread h2, .features-night h2, .features-card h2 { max-width: 22ch; margin: 0 0 1rem; color: var(--sage-dark); font-family: var(--public-display); font-size: clamp(1.75rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.07; text-wrap: balance; }
.features-spread__copy > p, .features-card > p { max-width: 48ch; margin: 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; text-wrap: pretty; }
.features-spread__copy > .features-spread__note { margin-top: 1.1rem; color: var(--ink-3); font-size: .95rem; line-height: 1.6; }
.public-page--features .features-spread__link { margin: 1.5rem 0 0; font-size: 1rem; }
.public-page--features .features-spread__link + .features-spread__link { margin-top: .7rem; }
.public-page--features .features-spread__link a { color: var(--accent); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.public-page--features .features-spread__link a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
.features-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.features-catalog > div { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--border); }
.features-catalog > div:nth-child(odd) { margin-right: 14px; }
.features-catalog dt { border-left: 3px solid var(--catalog, var(--sage-soft)); padding-left: 9px; color: var(--sage-dark); font-size: 12px; font-weight: 700; }
.features-catalog dd { margin: 4px 0 0 12px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.features-facts { display: grid; gap: 0; max-width: 34rem; margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.features-facts li { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.features-facts b { min-width: 9rem; color: var(--sage-dark); font-size: 13px; font-weight: 600; }
.features-facts span { flex: 1 1 12rem; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.features-itinerary { flex-basis: 20rem; max-width: 30rem; margin: 0; }
.features-itinerary__card { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(44,62,46,.05), 0 18px 40px -24px rgba(44,62,46,.28); }
.features-itinerary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(var(--cream), var(--surface)); }
.features-itinerary__trip { color: var(--sage-dark); font-family: var(--public-display); font-size: 1.1rem; }
.features-itinerary__count, .features-itinerary__kind { color: var(--ink-3); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.features-itinerary ul { margin: 0; padding: 0; list-style: none; }
.features-itinerary li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; }
.features-itinerary li + li { border-top: 1px solid var(--border); }
.features-itinerary__bar { width: 3px; height: 34px; border-radius: 2px; background: var(--bar, var(--sage-soft)); }
.features-itinerary__what { min-width: 0; }
.features-itinerary__what b { display: block; color: var(--sage-dark); font-size: 14px; font-weight: 600; }
.features-itinerary__what > span { color: var(--ink-3); font-size: 12px; }
.features-itinerary__what code { font-family: ui-monospace, Menlo, monospace; font-size: inherit; }
.features-itinerary__kind { letter-spacing: .06em; }
.features-itinerary__kind--review { color: var(--accent); }
.features-itinerary figcaption { margin: .9rem 0 0; color: var(--ink-3); font-size: .85rem; line-height: 1.5; }
.features-band--archive { margin-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.features-band__inner { max-width: 1280px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(20px, 5vw, 72px); }
.features-spread--archive { padding-top: 0; }
.features-spread--archive .features-spread__figure { max-width: 28rem; }
@media (min-width: 701px) { .features-spread--archive .features-spread__figure { order: -1; } }
.features-spread--archive .features-spread__copy { flex-grow: 1.1; }
.features-terms { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 1.6rem 0 0; padding: 1.2rem 0 0; list-style: none; border-top: 1px solid var(--border); }
.features-terms li { color: var(--sage-dark); font-size: 13px; }
.features-band--night { position: relative; isolation: isolate; background: var(--public-forest); color: var(--public-night-ink); }
.features-band--night .features-band__inner { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.features-night { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 5vw, 5rem); }
.features-night__lead { flex: 1 1 18rem; max-width: 26rem; }
.features-night__list { flex: 1.4 1 24rem; min-width: 0; }
.features-night .features__no { color: var(--story-gold); }
.features-night h2 { max-width: 16ch; margin: 0; color: var(--public-night-ink); font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.03; }
.features-night__lead > p { max-width: 44ch; margin: 1.3rem 0 0; color: var(--public-night-muted); font-size: 1.02rem; line-height: 1.68; text-wrap: pretty; }
.features-night__lead > .features-stamp--premium { display: inline-block; max-width: none; margin: 1.4rem 0 0; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--story-gold) 45%, transparent); border-radius: 999px; color: var(--story-gold); font-size: 11px; line-height: 1.4; letter-spacing: .1em; }
.features-facts--night { max-width: none; margin: 0; border-top-color: color-mix(in srgb, var(--story-gold) 45%, transparent); }
.features-facts--night li { gap: 6px 18px; padding: 15px 0; border-bottom-color: rgba(244,241,230,.14); }
.features-facts--night b { min-width: 12rem; color: var(--public-night-ink); font-size: 14px; }
.features-facts--night span { flex-basis: 15rem; color: var(--public-night-muted); font-size: 14px; line-height: 1.55; }
.features-night__caveat { max-width: 52ch; margin: 1.5rem 0 0; color: var(--public-night-muted); font-size: .95rem; line-height: 1.6; }
.public-page--features .features-night__list .features-spread__link { margin-top: 1.2rem; }
.public-page--features .features-night__list a { color: var(--story-gold); font-weight: 700; }
.public-page--features .features-night__list a:hover { color: #f1c66c; }
.features-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: clamp(3rem, 6vw, 5.5rem) 0 0; border-top: 1px solid var(--border-strong); }
.features-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.25rem); }
.features-card + .features-card { border-left: 1px solid var(--border); }
.features-card > img { order: -1; width: 104px; height: auto; margin-bottom: 1.1rem; }
.features-card h2 { max-width: 20ch; margin-bottom: .9rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.08; }
.features-card > p { max-width: 44ch; font-size: 1.02rem; }
.features-card__list { display: grid; gap: 10px; margin: 1.4rem 0 0; padding: 1.2rem 0 0; list-style: none; border-top: 1px solid var(--border); }
.features-card__list li { display: flex; gap: 12px; align-items: baseline; }
.features-card__list li > span:last-child { flex: 1; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.features-card__list .features-stamp { min-width: 5.6rem; font-size: 11px; letter-spacing: .09em; }
.features-stamp { font-weight: 700; text-transform: uppercase; }
.features-stamp--premium { color: var(--accent); }
.features-stamp--free { color: var(--teal); }
.features-card__dot { flex: none; width: 7px; height: 7px; margin-top: .45rem; border-radius: 50%; background: var(--sage-soft); }
.public-page--features .features-card .features-spread__link { margin-top: 1.4rem; }
.public-page--features .features-card .features-spread__link + .features-spread__link { margin-top: .7rem; }
.public-page--features .story-evidence { padding-inline: 0; }
.public-page--features .story-evidence__inner { max-width: none; }

/* Capability essays share measure, proof and closing treatment; their
   instruments change material according to the capability. */
.capability-page .editorial-hero { padding-bottom: clamp(4rem, 7vw, 7rem); }
.capability-page__body { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) clamp(5rem, 9vw, 9rem); }
.capability-page__section { display: grid; grid-template-columns: minmax(11rem, 4fr) minmax(0, 7fr); align-items: start; gap: clamp(2rem, 7vw, 8rem); padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.capability-page__section + .capability-page__section { border-top: 1px solid var(--border); }
.capability-page__section:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(11rem, 4fr); }
.capability-page__section:nth-child(even) > div:last-child { grid-column: 1; grid-row: 1; }
.capability-page__section:nth-child(even) .capability-page__instrument { grid-column: 2; }
.capability-page__instrument { display: grid; align-content: center; min-height: 158px; padding: 24px; border-top: 2px solid var(--terracotta); background: color-mix(in srgb, var(--terracotta) 7%, var(--surface)); }
.capability-page__instrument i { display: block; height: 12px; margin: 7px 0; background: color-mix(in srgb, var(--terracotta) 30%, var(--surface)); }
.capability-page__instrument i:first-child { width: 42%; background: var(--terracotta); }
.capability-page--history .capability-page__instrument { border-color: var(--gold); background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 18%, var(--surface)), color-mix(in srgb, var(--gold) 12%, var(--surface))); }
.capability-page--history .capability-page__instrument i:first-child { background: var(--gold-strong); }
.capability-page--history .capability-page__instrument i:nth-child(2) { width: 78%; }
.capability-page--readiness .capability-page__instrument { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, var(--surface)); }
.capability-page--readiness .capability-page__instrument i:first-child { background: var(--teal); }
.capability-page--readiness .capability-page__section--4 { margin-inline: calc(-1 * clamp(20px, 5vw, 72px)); padding-inline: clamp(20px, 5vw, 72px); background: var(--public-forest); }
.capability-page--readiness .capability-page__section--4 h2 { color: var(--public-night-ink); }
.capability-page--readiness .capability-page__section--4 p { color: var(--public-night-muted); }
.capability-page--readiness .capability-page__section--4 a { color: var(--gold); }
.capability-page--readiness .capability-page__section--4 .capability-page__instrument { background: rgba(31,122,108,.18); border-color: var(--teal); }

.public-evidence { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); max-width: 1280px; margin: 0 auto clamp(5rem, 9vw, 9rem); padding: clamp(2.5rem, 5vw, 5rem) clamp(20px, 5vw, 72px); background: color-mix(in srgb, var(--sage) 14%, var(--surface)); }
.public-evidence__object { position: relative; min-height: 180px; overflow: hidden; background: var(--public-forest); }
.public-evidence__object::before, .public-evidence__object::after, .public-evidence__object i { position: absolute; display: block; height: 2px; background: var(--gold); content: ""; }
.public-evidence__object::before { top: 34%; left: 12%; width: 72%; transform: rotate(7deg); }
.public-evidence__object::after { top: 58%; left: 27%; width: 60%; transform: rotate(-13deg); }
.public-evidence__object i { width: 12px; height: 12px; border: 3px solid var(--public-forest); border-radius: 50%; background: var(--terracotta); }
.public-evidence__object i:nth-child(1) { top: calc(34% - 6px); left: 14%; }
.public-evidence__object i:nth-child(2) { top: calc(43% - 6px); right: 18%; background: var(--gold); }
.public-evidence__object i:nth-child(3) { bottom: 22%; left: 35%; background: var(--teal); }
.public-evidence--history .public-evidence__object, .public-evidence--sample .public-evidence__object { background: var(--teal); }
.public-evidence--readiness .public-evidence__object { background: var(--teal); }
.public-evidence__copy h2 { margin: 0; color: var(--sage-dark); font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
.public-evidence__copy p { max-width: 58ch; margin: 1.1rem 0 0; color: var(--ink-2); line-height: 1.65; }
.public-evidence .btn { display: inline-block; max-width: 100%; margin: .35rem .8rem .35rem 0; white-space: normal; text-wrap: balance; }
.public-footer--forest { max-width: none; margin: 0; padding: clamp(3.5rem, 7vw, 6rem) clamp(20px, 5vw, 72px); background: var(--public-forest); }
.public-footer--forest .publicFooter__groups { max-width: 1180px; margin: 0 auto; }
.public-footer--forest .publicFooter__title { color: var(--public-night-ink); }
.public-footer--forest .publicFooter__group a { color: var(--public-night-muted); }
.public-footer--forest .publicFooter__group a:hover { color: var(--gold); }
.public-footer--forest .publicFooter__group a:focus-visible { outline-color: var(--gold); }
.public-page--features :is(a, button):focus-visible { outline-color: var(--gold); }

/* Legal pages are policy readers: their shared shell keeps long, consequential
   text easy to scan without turning any clause into promotional content. */
.policy-page { min-height: 100vh; color-scheme: light; background: var(--cream); font-family: "Space Grotesk", var(--sans); }
@media (prefers-color-scheme: dark) { .policy-page { --surface: #FFFCF5; --ink: #22312B; --ink-2: #4F5C55; --ink-3: #68736D; --border: #E5DECF; --border-strong: #D3C9B4; --accent-strong: #76511D; --gold-strong: #8F6220; --focus: #76511D; } }
.policy-page__main { outline: none; }
.policy-page__masthead {
  position: relative; overflow: clip;
  background: var(--public-forest); color: var(--public-night-ink);
}
.policy-page__masthead::after {
  position: absolute; right: clamp(1.25rem, 7vw, 7rem); bottom: -1px;
  width: min(25vw, 17rem); height: 2.3rem;
  border-top: 2px solid color-mix(in srgb, var(--gold) 72%, transparent);
  border-radius: 100% 0 0; content: "";
}
.policy-page__mastheadInner { width: min(100% - 40px, 1040px); margin: 0 auto; padding: clamp(3.25rem, 8vw, 6.5rem) 0 clamp(2.75rem, 6vw, 5rem); }
.policy-page__home { margin: 0 0 2.25rem; font-size: .94rem; }
.policy-page__home a { color: var(--public-night-muted); font-weight: 650; text-underline-offset: .22em; }
.policy-page__home a:hover { color: var(--gold); }
.policy-page__masthead h1 { max-width: 13ch; margin: 0; color: var(--public-night-ink); font-family: var(--serif); font-size: clamp(2.85rem, 6.7vw, 5.25rem); font-weight: 500; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.policy-page__date { margin: 1.35rem 0 0; color: var(--public-night-muted); font-size: .9rem; font-weight: 650; }
.policy-page__intro { max-width: 66ch; margin: 1.6rem 0 0; color: var(--public-night-muted); font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.68; }
.policy-page__reader { display: grid; grid-template-columns: minmax(11.5rem, 13rem) minmax(0, 72ch); justify-content: center; gap: clamp(2.5rem, 6vw, 6.5rem); width: min(100% - 40px, 1040px); margin: 0 auto; padding: clamp(2.8rem, 7vw, 6rem) 0 clamp(4.5rem, 8vw, 7rem); }
.policy-page__nav { position: sticky; top: 1.5rem; align-self: start; padding: .15rem 0 0; }
.policy-page__nav p { margin: 0 0 .85rem; color: var(--ink); font-size: .82rem; font-weight: 700; letter-spacing: .06em; }
.policy-page__nav ol, .policy-page__mobileNav ol { margin: 0; padding: 0; list-style: none; }
.policy-page__nav li + li { margin-top: .5rem; }
.policy-page__nav a, .policy-page__mobileNav a { color: var(--ink-2); font-size: .92rem; line-height: 1.35; text-decoration: none; text-underline-offset: .22em; }
.policy-page__nav a:hover, .policy-page__mobileNav a:hover { color: var(--accent-strong); text-decoration: underline; }
.policy-page__content { min-width: 0; }
.policy-page__section { padding: 0 0 clamp(2.5rem, 5vw, 4.5rem); scroll-margin-top: 1.5rem; }
.policy-page__section + .policy-page__section { padding-top: clamp(2.4rem, 5vw, 4.2rem); border-top: 1px solid var(--border-strong); }
.policy-page__section h2 { max-width: 22ch; margin: 0 0 1rem; color: var(--sage-dark); font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 550; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.policy-page__section p { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.72; overflow-wrap: anywhere; }
.policy-page__section a { color: var(--accent-strong); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.policy-page__section--emphasis { position: relative; padding-inline-start: clamp(1rem, 2vw, 1.5rem); }
.policy-page__section--emphasis::before { position: absolute; top: .2rem; bottom: clamp(2.5rem, 5vw, 4.5rem); left: 0; width: 2px; background: var(--sage-dark); content: ""; }
.policy-page__mobileNav { display: none; }
.policy-page :is(a, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.policy-page .publicFooter { max-width: none; margin: 0; padding: clamp(3.5rem, 7vw, 6rem) clamp(20px, 5vw, 72px); background: var(--public-forest); }
.policy-page .publicFooter__groups { max-width: 1180px; margin: 0 auto; }
.policy-page .publicFooter__title { color: var(--public-night-ink); }
.policy-page .publicFooter__group a { color: var(--public-night-muted); }
.policy-page .publicFooter__group a:hover { color: var(--gold); }
.policy-page .publicFooter__group a:focus-visible { outline-color: var(--gold); }
@media (max-width: 1100px) {
  .story-hero__inner { align-items: start; }
  .policy-page__reader { display: block; width: min(100% - 40px, 760px); padding-top: clamp(2rem, 5vw, 3.5rem); }
  .policy-page__nav { position: static; display: block; margin: 0 0 2.75rem; padding: 0 0 1.15rem; border-bottom: 1px solid var(--border-strong); }
  .policy-page__nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.25rem; }
  .policy-page__nav li + li { margin: 0; }
}
@media (max-width: 560px) {
  .policy-page__mastheadInner, .policy-page__reader { width: calc(100% - 40px); }
  .policy-page__mastheadInner { padding-top: 2.75rem; padding-bottom: 2.6rem; }
  .policy-page__home { margin-bottom: 1.75rem; }
  .policy-page__masthead h1 { font-size: clamp(2.65rem, 13vw, 3.45rem); }
  .policy-page__intro { font-size: 1rem; line-height: 1.64; }
  .policy-page__nav { display: none; }
  .policy-page__mobileNav { display: block; margin: 0 0 2.75rem; padding: 1rem 0; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
  .policy-page__mobileNav summary { color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer; }
  .policy-page__mobileNav ol { display: grid; gap: .75rem; margin-top: 1rem; }
  .policy-page__mobileNav a { display: inline-block; min-height: 2.75rem; padding-block: .55rem; font-size: 1rem; }
  .policy-page__section { padding-bottom: 2.75rem; }
  .policy-page__section + .policy-page__section { padding-top: 2.75rem; }
  .policy-page__section h2 { font-size: clamp(1.65rem, 8vw, 2rem); }
  .policy-page__section p { font-size: 1rem; line-height: 1.68; }
  .policy-page__section--emphasis { padding-inline-start: 1rem; }
  .policy-page__section--emphasis::before { bottom: 2.75rem; }
}

@media (max-width: 800px) {
  .editorial-hero { padding-top: clamp(3.5rem, 9vw, 5rem); }
  .editorial-hero > p { margin-left: 0; }
  .capability-page__section, .capability-page__section:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .capability-page__section:nth-child(even) > div:last-child, .capability-page__section:nth-child(even) .capability-page__instrument { grid-column: auto; grid-row: auto; }
  .capability-page__instrument { min-height: 116px; }
  .public-evidence { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 640px) {
  .public-page .public-bar { padding-block: 18px; }
  .public-page .pb__nav { gap: 7px 12px; }
  .public-page--features .pb__nav > a:not(.pb__login), .capability-page .pb__nav > a:not(.pb__login) { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; }
  .editorial-hero h1 { max-width: 17ch; font-size: clamp(2.5rem, 11.5vw, 3rem); }
  .editorial-hero { padding-bottom: 4rem; }
  .story-hero__inner { padding-top: 2.75rem; }
  .story-evidence .btn { padding-block: 13px; }
  .capability-page h2 { font-size: clamp(1.55rem, 7vw, 1.95rem); }
  .capability-page__section p { font-size: 1rem; }
  .features-spread, .features-cards { padding-top: 3rem; }
  .features-hero__index { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 1rem; }
  .features-hero__index-secondary { margin-top: 4px; }
  .features-catalog { grid-template-columns: minmax(0, 1fr); }
  .features-catalog > div:nth-child(odd) { margin-right: 0; }
  .features-cards { grid-template-columns: minmax(0, 1fr); }
  .features-card { padding-inline: 0; }
  .features-card + .features-card { border-top: 1px solid var(--border); border-left: 0; }
  .features-card > img { order: 0; margin: 1.5rem 0 0; }
  .features-spread__copy > p, .features-card > p { font-size: 1rem; }
  .features-spread h2, .features-card h2 { font-size: clamp(1.55rem, 7vw, 1.95rem); }
  .features-night h2 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .features-band__inner, .features-band--night .features-band__inner { padding-block: 3rem; }
  .capability-page__body { padding-bottom: 4rem; }
  .capability-page__section { padding-block: 2.75rem; }
  .capability-page--readiness .capability-page__section--4 { margin-inline: -20px; padding-inline: 20px; }
  .public-evidence { margin-bottom: 4rem; padding-block: 2.25rem; }
  .public-evidence__object { min-height: 150px; }
  .public-evidence__copy h2 { font-size: 2rem; }
  .public-evidence .btn { min-height: 48px; padding-block: 13px; }
}

/* Public decision sheet: the plan comparison is the object, not a row of SaaS cards. */
.public-page--decision { color-scheme: light; overflow-x: clip; }
@media (prefers-color-scheme: dark) {
  .public-page--decision { --ink: #22312B; --ink-2: #4F5C55; --ink-3: #68736D; --surface: #FFFCF5; --border: #E5DECF; --border-strong: #D3C9B4; --accent-strong: #76511D; --focus: #76511D; }
}
.public-page--decision .editorial-hero { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.pricing-decision { max-width: 1000px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) clamp(5rem, 9vw, 9rem); }
.pricing-decision > section + section { margin-top: 0; }
.pricing-decision__actions { display: flex; align-items: center; gap: 1rem 1.4rem; margin: 0 0 clamp(3.5rem, 7vw, 6rem); }
.pricing-decision__actions .btn { min-height: 48px; }
.public-page--decision :is(.pricing-decision, .pricing-decision__actions) a:not(.btn) { color: var(--accent-strong); font-weight: 650; }
.public-page--decision .plan-comparison__cell-label { color: var(--ink-2); }
.pricing-decision h2, .pricing-declaration h3 { color: var(--sage-dark); font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; }
.pricing-decision__comparison > h2 { max-width: 12ch; margin: 0 0 2rem; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1; }
.pricing-declarations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin: 0 0 clamp(2.25rem, 5vw, 4rem); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.pricing-declaration { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.15rem, 3vw, 2.5rem); }
.pricing-declaration + .pricing-declaration { border-left: 1px solid var(--border-strong); }
.pricing-declaration--premium { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); box-shadow: inset 0 5px var(--foil-mid); }
.pricing-declaration h3 { max-width: 15ch; margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.04; }
.pricing-declaration p, .pricing-decision__consequence p, .pricing-decision__access p { max-width: 60ch; margin: 1rem 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.public-page--decision .plan-comparison__wrap { margin-top: 0; }
.plan-comparison__group th { padding: 1.15rem .8rem .65rem; border-top: 2px solid var(--sage); color: var(--sage-dark); font-family: var(--serif); font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; text-align: left; }
.public-page--decision .plan-comparison thead th:last-child, .public-page--decision .plan-comparison td[data-plan="Premium"] { background-color: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.public-page--decision .plan-comparison thead th:last-child { box-shadow: inset 4px 0 var(--foil-mid); }
.public-page--decision .plan-comparison td[data-plan="Premium"] { box-shadow: inset 4px 0 color-mix(in srgb, var(--foil-mid) 82%, var(--surface)); }
.pricing-decision__consequence { max-width: 67ch; margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(1.75rem, 4vw, 3rem) 0; border-top: 2px solid var(--sage); border-bottom: 1px solid var(--border-strong); }
.pricing-decision__consequence h2, .pricing-decision__access h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.65rem); line-height: 1.08; }
.pricing-decision__access { max-width: 67ch; padding-top: clamp(2.25rem, 5vw, 4rem); }
.public-page--decision .public-evidence { margin-bottom: 0; background: var(--public-forest); }
.public-page--decision .public-evidence__copy h2 { color: var(--public-night-ink); }
.public-page--decision .public-evidence__copy p { color: var(--public-night-muted); }
.public-page--decision .public-evidence__copy .public-page__textLink { color: var(--public-night-gold); }


@media (max-width: 760px) {
  .pricing-decision__actions { align-items: flex-start; flex-direction: column; }
  .pricing-declarations { grid-template-columns: 1fr; }
  .pricing-declaration + .pricing-declaration { border-top: 1px solid var(--border-strong); border-left: 0; }
  .public-page--decision .plan-comparison { min-width: 0; }
  .plan-comparison__group { display: table-row !important; }
  .plan-comparison__group th { display: table-cell !important; width: auto !important; padding-block: 1.25rem .7rem !important; }
}
@media (max-width: 520px) {
  .pricing-decision { padding-inline: 20px; }
  .pricing-declaration { padding-inline: 1.25rem; }
  .plan-comparison caption { display: block; width: 100%; }
  .plan-comparison__commercial td { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .plan-comparison__price { min-width: 0; overflow-wrap: anywhere; }
}
@media print {
  @page { size: portrait; margin: 18mm; }
  .policy-page { background: #fff !important; color: #111 !important; }
  .policy-page__masthead { background: #fff !important; }
  .policy-page__masthead::after, .policy-page__nav, .policy-page__mobileNav, .policy-page .publicFooter, body > .public-bar { display: none !important; }
  .policy-page__mastheadInner, .policy-page__reader { width: auto; padding: 0; }
  .policy-page__masthead h1, .policy-page__date, .policy-page__intro, .policy-page__section h2, .policy-page__section p, .policy-page__section a { color: #111 !important; }
  .policy-page__section { break-inside: avoid; padding-block: 0 1.25rem; }
  .policy-page__section + .policy-page__section { padding-top: 1.25rem; }
}

/* Public methodology reader (/travel-guidance-sources). Approved Claude Design:
   forest masthead with a three-fact ledger, compass-marked reading rail, ruled
   i/ii/× priority list, teal decision ledger, right-bleed callout, three-column
   register and a two-column corrections close. Design hex values map onto the
   runtime tokens; the night gold is scoped exactly as the features masthead does. */
.public-page--method { --method-gold: #D8AA57; --method-teal-ink: #1A6357; --method-mark: var(--sage-strong); --method-gutter: clamp(20px, 5vw, 72px); color-scheme: light; background: var(--cream); font-family: "Space Grotesk", var(--sans); overflow-x: clip; }
/* This reader deliberately keeps its paper-and-ink palette in both OS schemes.
   Pair every semantic foreground with that fixed light surface so dark-mode
   root tokens cannot leak low-contrast light ink onto cream paper. */
@media (prefers-color-scheme: dark) {
  .public-page--method {
    --surface: #FFFCF5;
    --border: #E5DECF;
    --border-strong: #D3C9B4;
    --ink: var(--sage-dark);
    --ink-2: #3A423C;
    --ink-3: #69705F;
    --accent: #A2542F;
    --accent-strong: #96502D;
    --sage-strong: #4C6B45;
    --teal: #1F7A6C;
    --foil-hi: #E6CD8C;
    --foil-mid: #C9A44C;
    --foil-lo: #A8842C;
    --foil-ink: #6B5015;
  }
}
.public-page--method .public-bar { position: relative; z-index: 1; isolation: isolate; color: var(--public-night-ink); }
.public-page--method .public-bar::before { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--public-forest); content: ""; }
.public-page--method .public-bar .pb__brand { color: var(--public-night-ink); }
.public-page--method .public-bar .pb__nav > a:not(.pb__login) { color: color-mix(in srgb, var(--public-night-ink) 76%, transparent); }
.public-page--method .public-bar .pb__nav > a:not(.pb__login):hover, .public-page--method .public-bar .pb__nav > a[aria-current="page"] { color: var(--public-night-ink); }
.public-page--method .public-nav__menu > summary { border-color: rgba(244,241,230,.48); color: var(--public-night-ink); }
.public-page--method .public-bar :is(.pb__brand, .public-nav__desktop a:not(.public-login), .public-nav__menu > summary):focus-visible { outline: 3px solid var(--method-gold); outline-offset: 3px; }

.method-hero { position: relative; z-index: 1; overflow: clip; background: var(--public-forest); color: var(--public-night-ink); }
.method-hero::before { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 100% at 85% 0%, rgba(122,147,113,.28), transparent 64%); pointer-events: none; content: ""; }
.method-hero::after { position: absolute; right: clamp(20px, 7vw, 8rem); bottom: -1px; width: min(24vw, 22rem); height: 38px; border-top: 2px solid rgba(216,170,87,.7); border-radius: 100% 0 0; content: ""; }
.method-hero__inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; gap: clamp(2rem, 5vw, 4.5rem); max-width: 1280px; margin: 0 auto; padding: clamp(3rem, 6vw, 5.5rem) var(--method-gutter) clamp(3.25rem, 6vw, 5.5rem); }
.method-hero__kicker { margin: 0 0 20px; color: var(--method-gold); font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.method-hero h1 { max-width: 17ch; margin: 0; color: var(--public-night-ink); font-family: var(--public-display); font-size: clamp(2.6rem, 5.2vw, 4.5rem); font-weight: 450; letter-spacing: -.04em; line-height: .97; text-wrap: balance; }
.method-hero h1 em { color: var(--method-gold); font-style: italic; }
.method-hero__intro { max-width: 52ch; margin: 0; color: var(--public-night-muted); font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.68; text-wrap: pretty; }
.method-hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0; margin: 32px 0 0; border-top: 1px solid rgba(216,170,87,.45); }
.method-hero__facts > div { padding: 16px 18px 0 0; }
.method-hero__facts dt { color: var(--method-gold); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.method-hero__facts dd { margin: 8px 0 0; color: var(--public-night-ink); font-size: .94rem; line-height: 1.45; }
.method-hero__rule { height: 3px; background: linear-gradient(90deg, transparent, var(--foil-lo) 8%, var(--foil-hi) 44%, var(--foil-mid) 74%, transparent); }
@media (min-width: 1100px) { .method-hero__inner { align-items: end; } }

.guidance-method { display: grid; grid-template-columns: minmax(11rem, 13rem) minmax(0, 62rem); align-items: start; gap: 0 clamp(2.5rem, 6vw, 5.5rem); max-width: 1280px; margin: 0 auto; padding: clamp(2.75rem, 5vw, 4.5rem) var(--method-gutter) clamp(4rem, 8vw, 7rem); }
.guidance-method__rail { position: sticky; top: 1.5rem; }
.guidance-method__nav { border-top: 2px solid var(--sage-soft); border-bottom: 1px solid var(--border-strong); }
.guidance-method__nav > p { margin: 0; padding: .8rem 0 .7rem; color: var(--sage-dark); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.guidance-method__nav ol { display: grid; gap: .15rem; margin: 0; padding: 0 0 .85rem; list-style: none; }
.guidance-method__nav a { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); align-items: baseline; gap: .2rem; min-height: 32px; color: var(--ink-2); font-size: .85rem; line-height: 1.35; text-decoration: none; }
.guidance-method__navMark { display: inline-flex; align-items: center; height: 1.2em; color: var(--ink-3); }
.guidance-method__navMark svg { display: block; }
.guidance-method__nav a:hover, .guidance-method__nav a:hover .guidance-method__navMark, .guidance-method__nav a[aria-current="true"], .guidance-method__nav a[aria-current="true"] .guidance-method__navMark { color: var(--accent); }
.guidance-method__nav a[aria-current="true"] { font-weight: 600; }
.guidance-method__railNote { margin: .9rem 0 0; color: var(--ink-3); font-size: .72rem; line-height: 1.5; }
.guidance-method__copy { min-width: 0; }
.guidance-method__section { scroll-margin-top: 1.5rem; padding: 0 0 clamp(2.75rem, 5vw, 4rem); }
.guidance-method__heading { display: flex; align-items: baseline; gap: .9rem; margin: 0 0 1.15rem; }
.guidance-method__mark { display: inline-flex; flex: none; align-self: flex-start; margin-top: .3rem; color: var(--method-mark); }
.guidance-method__mark svg { display: block; }
.guidance-method__headingRow { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem 1rem; }
.guidance-method__section h2 { margin: 0; max-width: 22ch; color: var(--sage-dark); font-family: var(--public-display); font-size: clamp(1.85rem, 3.3vw, 2.85rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.guidance-method__badge { display: inline-flex; align-items: center; padding: .3rem .55rem; border: 1px solid var(--gold); border-radius: 2px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--foil-ink); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.guidance-method__section > p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 1.05rem; line-height: 1.72; text-wrap: pretty; }
.guidance-method__section > p + p { margin-top: 1rem; }

.guidance-not { display: grid; gap: 0; max-width: 44rem; margin: 1.7rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border-strong); }
.guidance-not li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: baseline; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--border-strong); color: var(--ink); font-size: 1rem; line-height: 1.5; }
.guidance-not__label { color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.guidance-priority { display: grid; gap: 0; max-width: 46rem; margin: 1.7rem 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border-strong); }
.guidance-priority li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: clamp(.75rem, 2vw, 1.4rem); padding: 1.05rem 0; border-top: 1px solid var(--border-strong); }
.guidance-priority__mark { color: var(--method-mark); font-family: var(--public-display); font-style: italic; font-size: 1.45rem; line-height: 1.1; }
.guidance-priority--excluded .guidance-priority__mark { color: var(--accent); font-style: normal; }
.guidance-priority p { margin: 0; max-width: 54ch; color: var(--ink-2); font-size: .98rem; line-height: 1.62; }
.guidance-priority .guidance-priority__title { margin: 0 0 .3rem; color: var(--sage-dark); font-size: 1.02rem; font-weight: 600; }
.guidance-priority .guidance-priority--excluded .guidance-priority__title { color: var(--accent); }
.guidance-priority__title s { text-decoration-thickness: 1px; }

.guidance-ledger { margin: 1.8rem 0 0; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(.5rem, 2vw, 1rem); border-top: 2px solid var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--surface)); }
.guidance-ledger__label { margin: 0 0 .35rem; color: var(--method-teal-ink); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.guidance-ledger__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: baseline; gap: .35rem clamp(1rem, 3vw, 2.5rem); padding: .95rem 0; border-top: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); }
.guidance-ledger__condition { color: var(--sage-dark); font-size: 1rem; font-weight: 600; }
.guidance-ledger__outcome { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.guidance-ledger__outcome > span { color: var(--method-teal-ink); }

.guidance-method__trust { position: relative; margin: clamp(2.25rem, 4.5vw, 3.25rem) calc(-1 * (var(--method-gutter) + max(0px, (100vw - 1280px) / 2))) 0 0; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); background: var(--public-forest); color: var(--public-night-ink); }
.guidance-method__trust::before { position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--foil-lo), var(--foil-hi) 38%, var(--foil-mid) 68%, transparent); content: ""; }
.guidance-method__trust p { margin: 1.1rem 0 0; max-width: 54ch; color: var(--public-night-muted); font-size: 1rem; line-height: 1.66; }
.guidance-method__trust .guidance-method__trustLead { margin: 0; max-width: 30ch; color: var(--public-night-ink); font-family: var(--public-display); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.15; text-wrap: balance; }

.guidance-method__section > .guidance-sources__review { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border-strong); color: var(--ink-3); font-size: .9rem; line-height: 1.62; }
.guidance-sources__review strong { color: var(--ink); font-weight: 600; }
.guidance-sources { container-type: inline-size; margin: 1.8rem 0 0; background: var(--surface); border-top: 2px solid var(--gold); border-bottom: 1px solid var(--border-strong); }
.guidance-sources__head, .guidance-sources__item { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: .6rem clamp(1rem, 2.5vw, 2rem); padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 2.5vw, 1.6rem); }
.guidance-sources__head { gap: .3rem clamp(1rem, 2.5vw, 2rem); padding-block: .75rem; border-bottom: 1px solid var(--border-strong); }
.guidance-sources__head span { color: var(--ink-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.guidance-sources__list { margin: 0; padding: 0; list-style: none; }
.guidance-sources__item { border-top: 1px solid var(--border); transition: background-color .2s ease; }
.guidance-sources__item:first-child { border-top: 0; }
.guidance-sources__item:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.guidance-sources__item > div { min-width: 0; }
.guidance-sources__item h3 { margin: 0 0 .3rem; color: var(--sage-dark); font-family: var(--public-display); font-size: 1.12rem; font-weight: 500; line-height: 1.2; }
.guidance-sources__item p { margin: 0; }
.guidance-sources__item a { display: inline-block; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.guidance-sources__authority { color: var(--ink-3); font-size: .85rem; line-height: 1.45; }
.guidance-sources__item .guidance-sources__host { margin-top: .3rem; color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; overflow-wrap: anywhere; }
.guidance-sources__checked { color: var(--ink); font-size: .92rem; font-variant-numeric: tabular-nums; }
/* The column header is aria-hidden decoration; this label carries the meaning
   for assistive tech at every width and becomes visible once rows stack. */
.guidance-sources__cellLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.guidance-sources__item .guidance-sources__age { margin-top: .3rem; color: var(--ink-3); font-size: .76rem; }

.guidance-method__corrections { padding: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--border-strong); }
.guidance-corrections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.guidance-corrections > p { margin: 0; max-width: 44ch; color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }
.guidance-corrections__label { margin: 0 0 .85rem; color: var(--ink-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.guidance-corrections ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.guidance-corrections li a { display: inline-flex; align-items: center; min-height: 32px; font-size: .97rem; line-height: 1.4; }

@container (max-width: 39.99rem) {
  .guidance-sources__head { display: none; }
  .guidance-sources__item { grid-template-columns: 1fr; gap: .75rem; }
  .guidance-sources__cellLabel { position: static; display: block; width: auto; height: auto; margin-bottom: .2rem; overflow: visible; clip-path: none; white-space: normal; color: var(--ink-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
}
@media (max-width: 899px) {
  .guidance-method { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .guidance-method__rail { position: static; }
  .guidance-method__nav { max-width: 34rem; }
  .guidance-method__nav a { min-height: 44px; align-items: center; }
  .guidance-method__navMark { height: auto; }
}
@media (max-width: 639px) {
  .guidance-sources__head { display: none; }
  .guidance-sources__item { grid-template-columns: 1fr; gap: .75rem; }
  .guidance-sources__cellLabel { position: static; display: block; width: auto; height: auto; margin-bottom: .2rem; overflow: visible; clip-path: none; white-space: normal; color: var(--ink-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
}
@media (max-width: 520px) {
  .guidance-method { padding-inline: 20px; }
  .guidance-method__section > p { font-size: 1rem; }
  .guidance-method__trust { margin-inline: -20px; }
  .guidance-not li { grid-template-columns: 3rem minmax(0, 1fr); gap: .6rem; }
  .guidance-priority li { grid-template-columns: 2rem minmax(0, 1fr); }
  .guidance-ledger, .guidance-sources__head, .guidance-sources__item { padding-inline: 1rem; }
  .guidance-corrections li a { min-height: 44px; }
}
@media (max-width: 639px) { .guidance-sources__item a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .guidance-sources__item { transition: none; } }

/* Corrective public-page composition: pricing, colophon and legal readers.
   These routes share the established paper/forest/foil world, but each page's
   real object controls its silhouette: archive folio, provenance atlas,
   correspondence boundary, and numbered clause sheet. */

/* Pricing: an editorial decision ledger, not a stack of SaaS cards. */
.public-page--decision { background: var(--cream); font-family: "Space Grotesk", var(--sans); }
.public-page--decision .public-bar { position: relative; z-index: 2; isolation: isolate; color: var(--public-night-ink); }
.public-page--decision .public-bar::before { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--public-forest); content: ""; }
.public-page--decision .public-bar .pb__brand, .public-page--decision .public-nav__menu > summary { color: var(--public-night-ink); }
.public-page--decision .public-bar .pb__nav > a:not(.pb__login) { color: color-mix(in srgb, var(--public-night-ink) 76%, transparent); }
.public-page--decision .public-bar .pb__nav > a[aria-current="page"] { color: var(--public-night-ink); }
.public-page--decision .public-nav__menu > summary { border-color: color-mix(in srgb, var(--public-night-ink) 48%, transparent); }
.public-page--decision .public-bar :is(.pb__brand, .public-nav__desktop a:not(.public-login), .public-nav__menu > summary):focus-visible { outline-color: var(--public-night-gold); }
@media (prefers-color-scheme: dark) {
  .public-page--decision {
    --surface: #FFFCF5;
    --border: #E5DECF;
    --border-strong: #D3C9B4;
    --ink: var(--sage-dark);
    --ink-2: #3A423C;
    --ink-3: #69705F;
    --accent: #A2542F;
    --accent-strong: #96502D;
    --foil-hi: #E6CD8C;
    --foil-mid: #C9A44C;
    --foil-lo: #A8842C;
    --foil-ink: #6B5015;
  }
}
.pricing-hero { position: relative; overflow: clip; background: var(--public-forest); color: var(--public-night-ink); }
.pricing-hero::after { position: absolute; right: clamp(20px, 7vw, 8rem); bottom: -1px; width: min(28vw, 24rem); height: 42px; border-top: 2px solid color-mix(in srgb, var(--public-night-gold) 72%, transparent); border-radius: 100% 0 0; content: ""; }
.pricing-hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); max-width: 1280px; min-height: min(680px, calc(100vh - 80px)); margin: 0 auto; padding: clamp(4rem, 7vw, 7rem) clamp(20px, 5vw, 72px) clamp(4.5rem, 8vw, 7rem); }
.pricing-hero h1 { max-width: 13ch; margin: 0; color: var(--public-night-ink); font-family: var(--public-display); font-size: clamp(3.2rem, 6.6vw, 5.9rem); font-weight: 450; letter-spacing: -.04em; line-height: .93; text-wrap: balance; }
.pricing-hero__copy > p { max-width: 58ch; margin: 1.7rem 0 0; color: var(--public-night-muted); font-size: clamp(1.03rem, 1.35vw, 1.16rem); line-height: 1.68; text-wrap: pretty; }
.pricing-hero .pricing-decision__actions { margin: 2rem 0 0; }
.pricing-hero .pricing-decision__actions .btn { display: inline-flex; align-items: center; min-height: 48px; border-color: var(--surface); background: var(--surface); color: var(--public-forest); font-weight: 700; }
.pricing-hero .pricing-decision__actions .btn:hover { border-color: var(--public-night-gold); background: var(--public-night-gold); }
.public-page--decision .pricing-hero .pricing-decision__actions .public-page__textLink { display: inline-flex; align-items: center; min-height: 44px; color: var(--public-night-gold); }
.pricing-hero__folio { position: relative; min-height: 440px; }
.pricing-hero__folio > img { position: absolute; z-index: 3; top: 4px; right: 0; width: min(230px, 52%); height: auto; filter: drop-shadow(0 18px 20px color-mix(in srgb, var(--public-forest) 54%, transparent)); }
.pricing-hero__archiveSheet { position: absolute; z-index: 2; top: 100px; left: 0; width: min(23rem, 78%); min-height: 18rem; padding: 2rem 2.1rem; border: 1px solid color-mix(in srgb, var(--sage-dark) 20%, transparent); border-radius: var(--radius); background: var(--surface); color: var(--sage-dark); box-shadow: 0 28px 48px -34px var(--public-forest); transform: rotate(-2deg); }
.pricing-hero__archiveSheet::before { position: absolute; top: -24px; left: 22px; width: 9.5rem; height: 25px; border-radius: 5px 5px 0 0; background: var(--surface); content: ""; }
.pricing-hero__archiveSheet span, .pricing-hero__premiumSlip span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pricing-hero__archiveSheet span { color: var(--accent-strong); }
.pricing-hero__archiveSheet strong { display: block; max-width: 10ch; margin-top: .75rem; font-family: var(--public-display); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 500; line-height: 1; }
.pricing-hero__archiveSheet i { display: block; width: 78%; height: 1px; margin-top: 1.45rem; background: var(--border-strong); }
.pricing-hero__archiveSheet i:nth-of-type(2) { width: 62%; }
.pricing-hero__archiveSheet i:nth-of-type(3) { width: 70%; }
.pricing-hero__premiumSlip { position: absolute; z-index: 4; right: 5%; bottom: 26px; width: min(19rem, 64%); padding: 1.35rem 1.5rem 1.45rem; border: 1px solid var(--foil-lo); border-radius: var(--radius); background: linear-gradient(125deg, var(--foil-hi), var(--foil-mid) 48%, var(--foil-lo)); color: var(--public-forest); box-shadow: 0 22px 38px -28px var(--public-forest); transform: rotate(2.5deg); }
.pricing-hero__premiumSlip strong { display: block; margin-top: .45rem; font-family: var(--public-display); font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 600; line-height: 1.05; }
.pricing-decision { max-width: 1140px; padding-top: clamp(4rem, 8vw, 7rem); }
.pricing-decision__comparisonIntro { display: grid; grid-template-columns: minmax(15rem, 4fr) minmax(20rem, 5fr); align-items: end; gap: clamp(2rem, 6vw, 6rem); margin-bottom: clamp(2rem, 5vw, 4rem); }
.pricing-decision__comparisonIntro > h2 { margin: 0; max-width: 11ch; font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: .96; }
.pricing-decision__comparisonIntro > p { max-width: 46ch; margin: 0; color: var(--ink-2); font-size: 1.08rem; line-height: 1.68; }
.pricing-declarations { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); border-width: 2px 0 1px; border-top-color: var(--sage); background: var(--surface); }
.pricing-declaration { padding-block: clamp(2rem, 4vw, 3.25rem); }
.pricing-declaration--free { padding-right: clamp(1.5rem, 4vw, 4rem); }
.pricing-declaration--premium { padding-left: clamp(1.5rem, 4vw, 4rem); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); box-shadow: inset 0 7px var(--foil-mid); }
.pricing-declaration .pricing-declaration__label { margin: 0 0 .75rem; color: var(--accent-strong); font-size: .72rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.pricing-declaration--premium .pricing-declaration__label { color: var(--foil-ink); }
.pricing-declaration h3 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
.pricing-declaration p { font-size: 1.03rem; }
.public-page--decision .plan-comparison__wrap { border-top: 2px solid var(--sage-dark); background: var(--surface); }
.public-page--decision .plan-comparison caption { padding: 1.25rem clamp(1rem, 2vw, 1.5rem); font-size: clamp(1.25rem, 2vw, 1.55rem); }
.public-page--decision .plan-comparison th, .public-page--decision .plan-comparison td { padding: 1rem clamp(.8rem, 2vw, 1.35rem); }
.public-page--decision .plan-comparison thead th { padding-block: 1rem; font-size: .9rem; }
.public-page--decision .plan-comparison tbody th { width: 55%; font-size: 1rem; }
.public-page--decision .plan-comparison td { width: 22.5%; font-size: .98rem; }
.public-page--decision .plan-comparison__group th { padding-block: 1.35rem .8rem; background: var(--cream); font-size: 1.2rem; }
.public-page--decision .plan-comparison__body + .plan-comparison__body .plan-comparison__group th { border-top-color: var(--gold); }
.public-page--decision .plan-comparison__note { margin-top: 1.35rem; text-align: right; }
.pricing-decision__after { display: grid; grid-template-columns: minmax(13rem, .8fr) repeat(2, minmax(0, 1fr)); align-items: stretch; margin-top: clamp(4rem, 8vw, 7rem); border-top: 2px solid var(--sage); border-bottom: 1px solid var(--border-strong); background: var(--surface); }
.pricing-decision__archiveMark { display: flex; flex-direction: column; justify-content: flex-end; min-height: 17rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--public-forest); color: var(--public-night-ink); }
.pricing-decision__archiveMark span { color: var(--public-night-gold); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pricing-decision__archiveMark strong { max-width: 8ch; margin-top: .75rem; font-family: var(--public-display); font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 500; line-height: .95; }
.pricing-decision__consequence, .pricing-decision__access { max-width: none; margin: 0; padding: clamp(1.75rem, 4vw, 3rem); border: 0; }
.pricing-decision__access { border-left: 1px solid var(--border-strong); }
.pricing-decision__consequence h2, .pricing-decision__access h2 { font-size: clamp(1.65rem, 2.7vw, 2.35rem); }
.public-page--decision .public-evidence { max-width: 1280px; margin-bottom: 0; box-shadow: 0 0 0 100vmax var(--public-forest); clip-path: inset(0 -100vmax); }
.public-page--decision .public-footer--forest { border-top: 1px solid color-mix(in srgb, var(--public-night-ink) 14%, transparent); }

/* Colophon: an authored provenance atlas rather than an undifferentiated list. */
.colophon-page { width: auto; max-width: none; padding-block: 0; overflow: clip; }
.colophon-page__intro { grid-template-columns: minmax(0, 1fr) minmax(20rem, .78fr); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(20px, 5vw, 72px) clamp(4.5rem, 8vw, 7rem); border: 0; }
.colophon-page__introCopy > p:last-child { max-width: 50ch; margin: 1.6rem 0 0; color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; }
.colophon-page__kicker { grid-column: auto; }
.colophon-page__atlas { position: relative; margin: 0; padding: 1rem 0 1.15rem; border-top: 2px solid var(--sage); border-bottom: 1px solid var(--border-strong); }
.colophon-page__atlas::after { position: absolute; right: 0; bottom: 3.6rem; width: 54%; height: 2.4rem; border-top: 2px solid var(--gold); border-radius: 100% 0 0; content: ""; }
.colophon-page__atlas img { position: relative; z-index: 1; display: block; width: min(300px, 82%); height: auto; margin: 0 auto; }
.colophon-page__atlas figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--ink-3); font-size: .76rem; font-weight: 650; }
.colophon-page__groups { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) clamp(5rem, 9vw, 8rem); }
.colophon-group { grid-template-columns: minmax(13rem, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 7rem); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.colophon-group:not(:first-child) { padding-block: clamp(3rem, 5vw, 4.5rem); }
.colophon-group + .colophon-group { border-top: 1px solid var(--border-strong); }
.colophon-group__heading { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.colophon-group__index { color: var(--gold-strong); font-family: var(--public-display); font-size: 2.8rem; font-style: italic; line-height: .8; }
.colophon-group__heading h2 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); }
.colophon-group__heading p { margin: .7rem 0 0; color: var(--ink-3); font-size: .78rem; font-weight: 650; }
.colophon-group .colo { display: grid; grid-template-columns: minmax(0, 1fr); }
.colophon-group--1 .colo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.colophon-group--1 .colo__item:nth-child(2) { padding-top: 0; border-top: 0; }
.colophon-group .colo__item { min-width: 0; padding-block: 1.4rem; }
.colophon-group .colo__name { font-family: var(--public-display); font-size: 1.18rem; font-weight: 550; line-height: 1.2; }
.colophon-group .colo__what { margin-top: .5rem; font-size: .96rem; line-height: 1.62; }
.colophon-group .colo__licence { margin-top: .65rem; font-size: .78rem; line-height: 1.5; }
.colophon-page__notes { max-width: none; margin: 0; padding: clamp(3rem, 6vw, 5rem) max(20px, calc((100vw - 1180px) / 2)); border: 0; background: var(--public-forest); box-shadow: 0 0 0 100vmax var(--public-forest); clip-path: inset(0 -100vmax); }
.colophon-page__notesInner { display: grid; grid-template-columns: auto minmax(0, 48rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; max-width: 1180px; margin: 0 auto; }
.colophon-page__notesMark { color: var(--public-night-gold); }
.colophon-page__notes .colo__foot { margin: 0; color: var(--public-night-muted); font-size: .98rem; }
.colophon-page__notes .colo__foot + .colo__foot { margin-top: 1rem; }
.colophon-page__notes a { color: var(--public-night-gold); }
.colophon-page + .public-footer--forest { border-top: 1px solid color-mix(in srgb, var(--public-night-ink) 14%, transparent); }

/* Shared legal-reader system with page-specific masthead objects and numbered clauses. */
.policy-page__frame { min-height: 100vh; background: var(--cream); }
.policy-page__mastheadInner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(19rem, .72fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); width: min(100% - 40px, 1120px); min-height: 31rem; }
.policy-page__mastheadCopy { min-width: 0; }
.policy-page__masthead h1 { font-size: clamp(3rem, 6.2vw, 5.45rem); }
.policy-page__intro { max-width: 58ch; }
.policy-page__artifact { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding-block: 1.25rem; }
.policy-page__seal { position: relative; display: grid; place-items: center; width: min(300px, 78%); aspect-ratio: 1; border-radius: 50%; background: var(--public-night-ink); }
.policy-page__seal::before, .policy-page__seal::after { position: absolute; border-radius: 50%; border: 1px solid var(--public-night-gold); content: ""; pointer-events: none; }
.policy-page__seal::before { inset: -11px; opacity: .85; }
.policy-page__seal::after { inset: -19px; opacity: .32; }
.policy-page__seal img { position: relative; width: 79%; height: auto; }
.policy-page__artifactNote { color: var(--public-night-muted); font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.policy-page__reader { grid-template-columns: minmax(12.5rem, 14.5rem) minmax(0, 50rem); width: min(100% - 40px, 1120px); }
.policy-page__nav { border-top: 2px solid var(--sage); border-bottom: 1px solid var(--border-strong); }
.policy-page__nav p { display: flex; justify-content: space-between; gap: .75rem; margin: 0; padding: .85rem 0 .75rem; }
.policy-page__nav p span:last-child { color: var(--ink-3); font-size: .72rem; font-weight: 600; }
.policy-page__nav ol { counter-reset: policy-nav; padding-bottom: .8rem; }
.policy-page__nav li { counter-increment: policy-nav; }
.policy-page__nav li + li { margin-top: .15rem; }
.policy-page__nav a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; min-height: 36px; padding-block: .35rem; }
.policy-page__nav a::before { color: var(--gold-strong); font-family: var(--public-display); font-style: italic; content: counter(policy-nav, decimal-leading-zero); }
.policy-page__section { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(2.75rem, 5vw, 4.75rem); }
.policy-page__section + .policy-page__section { padding-top: clamp(2.75rem, 5vw, 4.75rem); }
.policy-page__sectionIndex { padding-top: .2rem; color: var(--gold-strong); font-family: var(--public-display); font-size: 1.45rem; font-style: italic; line-height: 1; }
.policy-page__section > div { min-width: 0; }
.policy-page__section h2 { font-size: clamp(1.85rem, 3.1vw, 2.55rem); }
.policy-page__section p { font-size: 1.06rem; line-height: 1.78; }
.policy-page__section--boundary { margin: .25rem -2rem clamp(2.75rem, 5vw, 4.75rem); padding: clamp(2rem, 4vw, 3rem) 2rem; background: color-mix(in srgb, var(--sage-soft) 20%, var(--surface)); }
.policy-page__section + :is(.policy-page__section--boundary, .policy-page__section--last), .policy-page__section--boundary + .policy-page__section { border-top: 0; }
.policy-page__section--boundary .policy-page__sectionIndex { color: var(--accent-strong); }
.policy-page--terms .policy-page__section--emphasis { padding-inline-start: 0; }
.policy-page--terms .policy-page__section--emphasis::before { display: none; }
.policy-page__section--last { margin-top: .5rem; padding: clamp(2rem, 4vw, 3rem); background: var(--surface); }
.policy-page__section--last + .policy-page__section { border-top: 0; }
.policy-page__mobileNav summary { justify-content: space-between; gap: 1rem; }
.policy-page__mobileNav summary span:last-child { color: var(--ink-3); font-size: .78rem; font-weight: 600; }
.policy-page__mobileNav summary span:last-child::after { content: " · Collapse"; }
.policy-page__mobileNav:not([open]) summary span:last-child::after { content: " · Expand"; }

@media (max-width: 900px) {
  .pricing-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(17rem, .8fr); min-height: 0; }
  .pricing-hero__folio { min-height: 390px; }
  .pricing-decision__comparisonIntro { grid-template-columns: 1fr; gap: 1.25rem; }
  .pricing-decision__after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-decision__archiveMark { grid-column: 1 / -1; min-height: 12rem; }
  .colophon-group, .colophon-page__intro { grid-template-columns: minmax(0, 1fr); }
  .colophon-page__atlas { max-width: 32rem; }
  .policy-page__mastheadInner { grid-template-columns: minmax(0, 1fr) minmax(15rem, .55fr); min-height: 0; }
  .policy-page__reader { width: min(100% - 40px, 800px); }
  .policy-page__nav { border-top: 0; }
  .policy-page__section--boundary { margin-inline: 0; }
}
@media (max-width: 640px) {
  .pricing-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 3rem; }
  .pricing-hero h1 { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .pricing-hero__folio { min-height: 330px; }
  .pricing-hero__folio > img { width: 47%; }
  .pricing-hero__archiveSheet { top: 66px; width: 76%; min-height: 14rem; padding: 1.5rem; }
  .pricing-hero__archiveSheet strong { font-size: 2rem; }
  .pricing-hero__archiveSheet i { margin-top: 1.1rem; }
  .pricing-hero__premiumSlip { bottom: 12px; width: 66%; }
  .pricing-hero .pricing-decision__actions { align-items: flex-start; }
  .pricing-decision { padding-top: 3.5rem; }
  .pricing-declarations { grid-template-columns: minmax(0, 1fr); }
  .pricing-declaration--premium { padding-left: 1.25rem; }
  .pricing-declaration + .pricing-declaration { border-left: 0; }
  .public-page--decision .plan-comparison tbody { display: block; }
  .public-page--decision .plan-comparison__group { display: block !important; }
  .public-page--decision .plan-comparison__group th { display: block !important; width: auto !important; }
  .public-page--decision .plan-comparison tbody tr:not(.plan-comparison__group) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .public-page--decision .plan-comparison tbody tr:not(.plan-comparison__group) > :is(th, td) { grid-column: 1; }
  .public-page--decision .plan-comparison td { width: auto; min-height: 44px; gap: 1rem; padding: .55rem .25rem; }
  .public-page--decision .plan-comparison :is(.plan-comparison__value, .plan-comparison__price) { min-width: 0; text-align: right; white-space: nowrap; }
  .public-page--decision .plan-comparison__note { text-align: left; }
  .pricing-decision__after { grid-template-columns: minmax(0, 1fr); }
  .pricing-decision__archiveMark { grid-column: auto; }
  .pricing-decision__access { border-top: 1px solid var(--border-strong); border-left: 0; }
  .public-page--decision .public-evidence { box-shadow: none; clip-path: none; }
  .colophon-page__intro, .colophon-page__groups { padding-inline: 20px; }
  .colophon-page__intro { padding-block: 3rem 4rem; }
  .colophon-page__intro h1 { font-size: clamp(3.5rem, 18vw, 5rem); }
  .colophon-group { gap: 2rem; padding-block: 3.25rem; }
  .colophon-group__heading { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .colophon-group__index { font-size: 2.25rem; }
  .colophon-group--1 .colo { grid-template-columns: minmax(0, 1fr); }
  .colophon-group--1 .colo__item:nth-child(2) { padding-top: 1.4rem; border-top: 1px solid var(--border); }
  .colophon-page__notes { padding-inline: 20px; }
  .colophon-page__notesInner { grid-template-columns: minmax(0, 1fr); }
  .policy-page__mastheadInner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.75rem 3.5rem; }
  .policy-page__artifact { gap: 1.1rem; padding-block: .75rem 0; }
  .policy-page__seal { width: min(210px, 64%); }
  .policy-page__section { grid-template-columns: 2.15rem minmax(0, 1fr); gap: .8rem; }
  .policy-page__sectionIndex { font-size: 1.15rem; }
  .policy-page__section--boundary { margin-inline: -20px; padding-inline: 20px; }
  .policy-page__section--last { margin-inline: -10px; padding-inline: 10px; }
  .policy-page__mobileNav summary { display: flex; min-height: 44px; align-items: center; }
}
@media (max-width: 350px) {
  .pricing-hero__folio { min-height: 300px; }
  .pricing-hero__archiveSheet { width: 80%; }
  .pricing-hero__premiumSlip { right: 0; width: 72%; }
  .policy-page__section { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .policy-page__sectionIndex { font-size: 1rem; }
}
@media print {
  @page public-editorial { size: portrait; margin: 18mm; }
  @page legal { size: portrait; margin: 18mm; }
  body:has(.public-page--decision), body:has(.colophon-page), body:has(.policy-page) { margin: 0 !important; padding: 0 !important; background: #FFFCF5 !important; }
  .public-page--decision, .colophon-page { page: public-editorial; background: #FFFCF5 !important; color: #2C3E2E !important; }
  .policy-page { page: legal; background: #FFFCF5 !important; color: #2C3E2E !important; }
  .pricing-hero, .pricing-decision__archiveMark, .colophon-page__notes, .policy-page__masthead { background: #FFFCF5 !important; color: #2C3E2E !important; }
  .pricing-hero__folio, .colophon-page__atlas, .policy-page__artifact { display: none !important; }
  .pricing-hero__inner, .colophon-page__intro, .colophon-page__groups, .pricing-decision, .policy-page__mastheadInner, .policy-page__reader { width: auto; max-width: none; min-height: 0; padding-inline: 0; }
  .pricing-hero h1, .pricing-hero__copy > p, .pricing-decision h2, .pricing-decision h3, .colophon-page :is(h1,h2,h3,p,a), .policy-page :is(h1,h2,p,a), .policy-page__sectionIndex { color: #2C3E2E !important; }
  .pricing-decision__actions, .public-page--decision .public-evidence, .colophon-page + .publicFooter { display: none !important; }
  .pricing-decision__after, .colophon-group, .policy-page__section { break-inside: avoid; }
}

/* --- Upcoming trip card (/trips) ---------------------------------------
   The card site/render.js's tripCard() draws for each upcoming trip: title
   and composition up top, the entry-requirement readiness band, anything
   that runs alongside the whole trip, then the itinerary as a day-by-day
   ledger — time column, a 3px type bar, the booking, and the type spelled
   out on the right. Everything is scoped under .tc so the shared .card
   rules other pages use (/share, the sample) are untouched, and every
   colour goes through the hue tokens above so dark mode follows for free.
   Layout widths are custom properties so the phone breakpoints below only
   retune numbers, never restate the grid. */
.tc {
  --tc-pad: 26px; --tc-time: 78px; --tc-gap: 16px; --tc-type: 96px;
  border-color: var(--border); border-radius: 14px; overflow: hidden;
  margin-bottom: 26px;
  box-shadow: 0 1px 2px rgba(15, 21, 14, .04);
  /* Once, for everything inside — the disclosure panels the card adopts
     (entry guide, driving guide, connection breakdown, share form) inherit
     it rather than falling back to the page's system stack. */
  font-family: "Space Grotesk", var(--sans);
}
/* Anchored targets (jump links, the "Needs attention" pill, #trip-… links)
   land below the sticky section strip, same offset the sections use. */
.tc[id], .tc [id] { scroll-margin-top: clamp(5.75rem, 12vh, 8.5rem); }
.tc .car-guide__panel, .tc .seam__drawer { font-size: .88rem; }
.tc.card--featured {
  border-color: color-mix(in srgb, var(--gold) 46%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 3%, var(--surface)), var(--surface) 32%);
  box-shadow: 0 1px 2px rgba(15, 21, 14, .04), 0 18px 42px -28px rgba(15, 21, 14, .4);
}
/* The one featured card (the trip that is next) gets a thin gold rule along
   the top instead of .card--featured's left-edge foil bar. */
.tc.card--featured::before {
  inset: 0 0 auto 0; width: auto; height: 3px; border-radius: 0;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 55%, var(--foil-hi)) 40%, var(--border));
}
.tc.card--featured .card__head { background: none; }
/* The page-level `section + section` rhythm is for the archive's big
   sections, not the days and legs inside one card. */
.tc section + section, .tc .itin__day, .tc .itin__leg { margin-top: 0; }
.tc [data-hue="blue"]   { --hue: var(--blue); }
.tc [data-hue="green"]  { --hue: var(--green); }
.tc [data-hue="pink"]   { --hue: var(--pink); }
.tc [data-hue="yellow"] { --hue: var(--yellow); }
.tc [data-hue="purple"] { --hue: var(--purple); }
.tc [data-hue="brown"]  { --hue: var(--brown); }
.tc [data-hue="orange"] { --hue: var(--orange); }
.tc [data-hue="red"]    { --hue: var(--red); }
.tc [data-hue="gray"]   { --hue: var(--gray); }
.tc [data-hue="teal"]   { --hue: var(--teal); }

/* Header */
.tc .card__head {
  padding: 22px var(--tc-pad) 18px; border-bottom: 0;
  gap: 14px 20px; align-items: flex-start;
}
.tc__ident { min-width: 0; flex: 1 1 400px; }
.tc__eyebrow {
  margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", var(--sans); font-size: .68rem; font-weight: 600;
  line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.tc__eyebrow--next { color: var(--gold-strong); }
.tc__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tc .card__title {
  font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 1.875rem);
  line-height: 1.15; letter-spacing: -.01em; text-wrap: pretty;
}
.tc .card__title--long { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.25; }
.tc .itin__arrow { color: color-mix(in srgb, var(--ink-3) 60%, var(--border)); font-weight: 400; }
.tc .card__dates { margin-top: 8px; font-size: .9rem; color: var(--ink-2); }
.tc__chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tc__chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; border-radius: 6px;
  font-family: "Space Grotesk", var(--sans); font-size: .78rem; font-weight: 500; line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--hue, var(--gray)) 18%, var(--border));
  background: color-mix(in srgb, var(--hue, var(--gray)) 10%, var(--surface));
  color: color-mix(in srgb, var(--hue, var(--gray)) 55%, var(--ink));
}
.itin__tick {
  display: inline-block; width: 3px; height: 11px; border-radius: 2px; flex: none;
  background: var(--hue, var(--gray));
}
.tc .card__head-right { gap: 10px; align-items: center; }
.tc .card__head-right:has(.card__share--active),
.tc .card__head-right:has(.card__share-options[open]) { flex: 1 1 100%; }
.tc .card__actions { align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
/* With the share form open, the head-right row takes the full card width
   and the share block grows so its form fills what is left of the row
   beside "Pocket guide", instead of the buttons stacking one per line. */
.tc .card__head-right:has(.card__share-options[open]) { align-items: flex-start; }
.tc .card__actions:has(.card__share-options[open]) { flex: 1 1 auto; }
.tc .card__actions:has(.card__share-options[open]) > .card__share { flex: 1 1 auto; }
.tc .card__share-options-form { margin-top: 10px; }
.tc .pill--alert a { color: inherit; text-decoration: none; }
.tc .pill--alert a:hover { text-decoration: underline; }
.tc .btn--primary { color: var(--surface); }
.tc .card__actions > .btn,
.tc .card__share-cta-summary .btn {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border-radius: 999px; border-color: var(--border-strong); background: var(--surface);
  font-family: "Space Grotesk", var(--sans); font-size: .82rem; font-weight: 500; color: var(--ink-2);
}
.tc .card__actions > .btn:hover,
.tc .card__share-cta-summary:hover .btn { border-color: var(--ink-3); color: var(--ink); }
.tc .card__share--active { flex: 1 1 100%; }
.tc .pills { gap: 6px; }
.tc .pill { min-height: 32px; padding: .3rem .75rem; font-size: .78rem; font-weight: 500; }

/* Travel readiness band: the entry chips under one tone and one tally. */
.tc__ready {
  padding: 12px var(--tc-pad) 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  --tc-tone: var(--accent-strong);
  background: color-mix(in srgb, var(--terracotta) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--terracotta) 18%, var(--border));
}
.tc__ready[data-tone="ok"] {
  --tc-tone: var(--sage-strong);
  background: color-mix(in srgb, var(--sage-soft) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--sage-soft) 22%, var(--border));
}
.tc__readyHead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc__readyMark {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tc-tone); color: var(--surface); font-size: .7rem; font-weight: 700; line-height: 1;
}
.tc__label {
  margin: 0; font-family: "Space Grotesk", var(--sans); font-size: .82rem; font-weight: 600; line-height: 1.3;
  color: var(--tc-tone);
}
.tc__readySum { margin: 0; flex: 1 1 24ch; min-width: 0; font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.tc__readySum b { font-weight: 600; }
.tc .dest-panels { padding: 4px var(--tc-pad) 18px; }

/* Bookings that run alongside the trip rather than sitting on one day. */
.tc__across {
  padding: 14px var(--tc-pad); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
  --tc-tone: var(--gold-strong);
}
.tc__across .tc__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.tc__acrossList {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 24px;
}
.tc__acrossList li {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
  font-family: "Space Grotesk", var(--sans); font-size: .85rem; line-height: 1.4;
}
.tc__acrossList .itin__tick { transform: translateY(1px); background: var(--gold-strong); }
.tc__acrossText { min-width: 0; overflow-wrap: anywhere; }
.tc__acrossText b { font-weight: 600; }
.tc__acrossFacts { color: color-mix(in srgb, var(--ink-3) 82%, var(--ink)); font-size: .82rem; }

/* Itinerary: legs, days, rows */
.itin { padding-bottom: 4px; }
.itin__leghead {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px var(--tc-pad) 2px;
  font-family: "Space Grotesk", var(--sans); font-size: .75rem; font-weight: 500; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.itin__leghead::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.itin__legdates { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-size: .78rem; }
.itin__leg + .itin__leg { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.itin__gap {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px var(--tc-pad);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 4%, var(--surface));
  font-family: "Space Grotesk", var(--sans); font-size: .7rem; font-weight: 500; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-strong); text-align: center;
}
.itin__gap::before, .itin__gap::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 3px, transparent 3px 7px);
}
.itin__dayhead {
  display: grid; grid-template-columns: var(--tc-time) 3px minmax(24px, 1fr) minmax(0, max-content);
  column-gap: var(--tc-gap); align-items: end; padding: 20px var(--tc-pad) 9px;
}
.itin__day + .itin__day .itin__dayhead { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.itin__date { margin: 0; grid-column: 1; text-align: right; }
.itin__weekday {
  display: block; margin-bottom: 5px;
  font-family: "Space Grotesk", var(--sans); font-size: .68rem; font-weight: 600; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.itin__daynum { display: block; font-family: "Playfair Display", var(--serif); font-size: 1.2rem; font-weight: 500; line-height: 1; color: var(--ink); }
.itin__rule { grid-column: 3; height: 1px; margin-bottom: 5px; background: var(--border); }
.itin__daysum {
  grid-column: 4; margin: 0 0 3px; min-width: 0;
  font-family: "Space Grotesk", var(--sans); font-size: .78rem; line-height: 1.3; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.itin__rows { list-style: none; margin: 0; padding: 0; }
.itin__row {
  display: grid; grid-template-columns: var(--tc-time) 3px minmax(0, 1fr) var(--tc-type);
  grid-template-areas: "when bar body type"; column-gap: var(--tc-gap); align-items: stretch;
  padding: 12px var(--tc-pad); border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.itin__row.is-hovered { background: color-mix(in srgb, var(--hue, var(--gray)) 7%, var(--surface)); }
.itin__when {
  grid-area: when; text-align: right; align-self: start;
  font-family: "Space Grotesk", var(--sans); font-size: .9rem; font-weight: 600; line-height: 1.3;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.itin__when > b { display: block; font-weight: 600; }
.itin__when > span { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-3); }
.itin__when > span { white-space: nowrap; }
.itin__when sup { font-size: .72em; line-height: 0; vertical-align: 3px; }
.itin__when--none { color: var(--ink-3); font-weight: 400; }
.itin__bar { grid-area: bar; border-radius: 2px; background: var(--hue, var(--gray)); }
.itin__body { grid-area: body; min-width: 0; }
.itin__title { margin: 0; font-family: "Space Grotesk", var(--sans); font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.itin__title .tag { vertical-align: 2px; margin-left: 3px; }
.itin__meta { margin: 3px 0 0; font-family: "Space Grotesk", var(--sans); font-size: .82rem; line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; }
.itin__meta a { color: inherit; }
.itin__meta a:hover { color: var(--accent); }
.itin__jump { text-decoration-style: dotted; }
.itin__ref { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); }
.itin__type {
  grid-area: type; text-align: right; padding-top: 3px;
  font-family: "Space Grotesk", var(--sans); font-size: .66rem; font-weight: 600; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hue, var(--gray)) 72%, var(--ink));
}
.itin__row--cancelled { background: color-mix(in srgb, var(--red) 5%, var(--surface)); }
.itin__row--cancelled .itin__name, .itin__row--cancelled .itin__when > b { text-decoration: line-through; color: var(--ink-2); }
.itin__row--cancelled .itin__type, .itin__row--cancelled .itin__bar { color: var(--ink-3); background-color: var(--ink-3); }
.itin__row--cancelled .itin__type { background: none; }
.itin__row--ranged { padding-top: 16px; padding-bottom: 16px; background: color-mix(in srgb, var(--hue, var(--teal)) 5%, var(--surface)); }
.itin__row--ranged .itin__when > b { font-size: .82rem; }
.tc .tag--span {
  background: color-mix(in srgb, var(--hue, var(--teal)) 14%, var(--surface));
  color: color-mix(in srgb, var(--hue, var(--teal)) 65%, var(--ink));
  font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .74rem; padding: 3px 8px;
}
.tc .tag--stay { padding: 3px 7px; letter-spacing: .1em; }
/* "1 unverified" (reviewTag): what the parser could not confirm against the
   email. Never had a tint of its own; here it carries the gold warning
   family so it is not the one tag reading as plain text. */
.tc .tag--review {
  background: color-mix(in srgb, var(--gold) 16%, var(--surface));
  color: var(--gold-strong); padding: 3px 7px; letter-spacing: .1em;
}
.tc .tag--checkin { background: color-mix(in srgb, var(--hue, var(--green)) 14%, var(--surface)); border: 0; color: color-mix(in srgb, var(--hue, var(--green)) 70%, var(--ink)); }
.tc .tag--checkout { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); border: 0; color: var(--ink-2); }
/* Two shared tags measured just under 4.5:1 on their own tints (.tag--alert
   4.2, .car-guide__badge 4.1); taken darker here only, in the card scope. */
.tc .tag--alert:not(.tag--conn) { color: color-mix(in srgb, var(--red) 80%, var(--ink)); }
.tc .tag--warn:not(.tag--conn) { color: color-mix(in srgb, var(--yellow) 55%, var(--ink)); }
.tc .tag--cabin[data-cabin="first"] { color: color-mix(in srgb, var(--yellow) 68%, var(--ink)); }
.tc .tag--cabin[data-cabin="business"] { color: color-mix(in srgb, var(--purple) 78%, var(--ink)); }
.tc .tag--cabin[data-cabin="premium"] { color: color-mix(in srgb, var(--teal) 78%, var(--ink)); }
.tc .car-guide__badge { color: var(--ink-2); }
.tc .car-guide__badge[data-tone="warn"] { color: var(--orange-strong); }
.tc .car-guide__badge[data-tone="info"] { color: color-mix(in srgb, var(--teal, var(--green)) 78%, var(--ink)); }
.tc .car-guide__badge[data-tone="ok"] { color: var(--green-strong); }
.tc .car-guide { margin-top: 7px; }
.tc .car-guide__toggle {
  padding: 5px 10px; border-radius: 6px; font-size: .76rem;
  background: color-mix(in srgb, var(--terracotta) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--terracotta) 22%, var(--border));
  color: var(--accent-strong);
}
/* The flight-to-flight connection seam (site/connections.js) inside the
   ledger: its dashed stem takes the type bar's column so it reads as the
   line between the two flights it joins. */
.itin .row--seam {
  margin: 0 var(--tc-pad) 0 calc(var(--tc-pad) + var(--tc-time) + var(--tc-gap));
  padding: 4px 0; background: transparent; border: 0; min-height: 30px;
}
.itin .seam__connector { width: 3px; }
.itin .seam__stem { width: 3px; border-radius: 2px; }
.itin .seam__main { padding-left: calc(var(--tc-gap) - 8px); }
.itin .seam__summary { min-height: 28px; flex-wrap: wrap; row-gap: 2px; }
.itin .seam__hint { margin-left: 0; }
.tc .car-guide__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (prefers-reduced-motion: reduce) {
  .tc, .tc .seam__summary { transition: none; }
}

/* Footer */
.tc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 6px var(--tc-pad); border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--gold) 4%, var(--surface));
}
.tc__tally { margin: 0; font-size: .78rem; color: color-mix(in srgb, var(--ink-3) 82%, var(--ink)); }
.tc .card__view-link {
  border-top: 0; padding: 10px 2px; min-height: 44px; justify-content: flex-end;
  color: var(--accent); font-size: .85rem; font-weight: 500;
}
.tc a:focus-visible, .tc button:focus-visible, .tc summary:focus-visible {
  outline: 3px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px;
}

/* Section head: "Upcoming" beside its tally and the add-a-booking link. */
.trips-section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.trips-section__head > .section__label { margin-bottom: 0; }
.trips-section__meta {
  margin: 0 0 4px; display: flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", var(--sans); font-size: .82rem; color: var(--ink-3);
}
.trips-section__meta > span + a::before {
  content: ""; display: inline-block; width: 1px; height: 14px; margin-right: 10px;
  background: var(--border-strong); vertical-align: -2px;
}
.trips-section__meta a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }

@media (max-width: 760px) {
  .tc { --tc-pad: 18px; --tc-time: 58px; --tc-gap: 12px; }
  .tc .card__head { padding: 18px var(--tc-pad) 14px; }
  .tc__ident { flex-basis: 100%; }
  .tc .card__title { font-size: clamp(1.3rem, 5.2vw, 1.6rem); }
  .tc .card__title--long { font-size: clamp(1.15rem, 4.6vw, 1.4rem); }
  .tc .card__head-right { width: 100%; }
  /* The type label moves from its own column to a small caps line above the
     booking, so what a row is stays in words at every width. */
  .itin__row {
    grid-template-columns: var(--tc-time) 3px minmax(0, 1fr);
    grid-template-areas: "when bar type" "when bar body"; row-gap: 1px;
  }
  .itin__type { text-align: left; padding-top: 0; line-height: 1.2; align-self: end; }
  .itin__bar { grid-row: 1 / span 2; }
  .itin__dayhead { grid-template-columns: var(--tc-time) 3px minmax(0, 1fr); row-gap: 4px; padding-top: 16px; }
  .itin__date { grid-row: 1 / span 2; align-self: end; }
  .itin__rule { grid-column: 3; grid-row: 1; margin-bottom: 0; align-self: end; }
  .itin__daysum { grid-column: 3; grid-row: 2; white-space: normal; margin: 0; }
  .itin .row--seam { margin-left: calc(var(--tc-pad) + var(--tc-time) + var(--tc-gap)); }
  .tc__acrossList { grid-template-columns: 1fr; }
  .tc__foot { padding: 4px var(--tc-pad); }
  /* No room beside "Pocket guide" here: the open share form drops below. */
  .tc .card__actions:has(.card__share-options[open]) { flex-wrap: wrap; }
  .tc .card__actions:has(.card__share-options[open]) > .card__share { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .tc { --tc-pad: 14px; --tc-time: 54px; --tc-gap: 10px; border-radius: 12px; }
  .itin__when { font-size: .82rem; }
  .itin__when > span { font-size: .72rem; }
  .itin__daynum { font-size: 1.05rem; }
  .tc__chips { gap: 6px; }
  .tc__chip { padding: 4px 9px 4px 7px; font-size: .74rem; }
  .tc .card__actions { width: 100%; }
  .tc .card__actions > .btn, .tc .card__share-cta-summary .btn { padding: 6px 12px; }
  .trips-section__head { align-items: flex-start; flex-direction: column; }
}

/* Upcoming card refinement: the actions share only the eyebrow row. The
   title, facts, and booking composition get the full card measure. */
.tc .card__head {
  display: block;
  padding: 22px var(--tc-pad) 18px;
}
.tc__head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  min-width: 0;
}
.tc__eyebrow-wrap { min-width: 0; }
.tc__head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  flex-wrap: wrap;
  min-width: 0;
  margin-left: auto;
}
.tc__head-actions .pills { justify-content: flex-end; }
.tc .card__title {
  max-width: none;
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.tc .tc__chips { width: 100%; }

/* Native details supplies the disclosure semantics and Enter/Space behavior;
   this enhancement only makes the state legible and keeps nested links out of
   the toggle surface. */
.tc__disclosure {
  border-top: 1px solid var(--border);
}
.tc__disclosure-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 10px var(--tc-pad);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 4%, var(--surface));
  font-family: "Space Grotesk", var(--sans);
  font-size: .82rem;
  font-weight: 600;
}
.tc__disclosure-toggle::-webkit-details-marker { display: none; }
.tc__disclosure-toggle:hover { background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.tc__disclosure-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.tc__disclosure-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tc__disclosure-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--gold-strong);
  border-radius: 50%;
  color: var(--gold-strong);
  font-size: 1rem;
  line-height: 1;
}
.tc__disclosure-mark::before { content: "+"; }
.tc__disclosure[open] .tc__disclosure-mark::before { content: "−"; }
.tc__disclosure-close { display: none; }
.tc__disclosure[open] .tc__disclosure-open { display: none; }
.tc__disclosure[open] .tc__disclosure-close { display: inline; }
.tc__disclosure-hint {
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 400;
  text-align: right;
}
.tc__body { min-width: 0; }
.tc__disclosure[open] > .tc__body {
  animation: tc-disclosure-in .18s ease both;
}
@keyframes tc-disclosure-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tc__disclosure[open] > .tc__body { animation: none; }
}
@media (max-width: 760px) {
  .tc__head-top { gap: 10px 14px; }
  .tc__head-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .tc__head-actions .pills { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .tc__head-top { display: block; }
  .tc__head-actions { margin-top: 12px; justify-content: flex-start; }
  .tc__disclosure-toggle { align-items: flex-start; }
  .tc__disclosure-hint { margin-left: auto; }
}

/* Featured upcoming card: give the next departure a little more presence
   through material and spacing, while leaving every booking fact untouched. */
.tc.card--featured .tc__head {
  padding-top: 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 4%, var(--surface)), var(--surface));
}
.tc--next .tc__eyebrow--next {
  color: var(--gold-strong);
  letter-spacing: .17em;
}
.tc--next .card__title {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -.018em;
}
.tc__disclosure[open] > .tc__disclosure-toggle {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--gold) 9%, var(--surface)),
      color-mix(in srgb, var(--gold) 4%, var(--surface)));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--gold) 32%, var(--border));
}
.tc__disclosure-toggle {
  transition: background .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tc__disclosure-toggle { transition: none; }
}

/* --- Travel Memory reflection (R3) -------------------------------------------
   The guided reflection on a finished trip (site/reflectionRender.js): one
   question per page, laid out as a journal sheet rather than a form wizard.
   Same devices as the completed-trip record it opens from — the gold top rule,
   Playfair for the words that matter, Space Grotesk for the interface, the
   hedge-green fill for chosen things and saturated badges for state. Every
   state is also carried by words or a glyph, never by colour alone. */
.reflect {
  --reflect-rule: color-mix(in srgb, var(--gold) 70%, var(--border));
  inline-size: min(780px, calc(100% - 32px));
  margin-inline: auto;
  padding-block: 1rem 3.5rem;
  font-family: "Space Grotesk", var(--sans);
}
.reflect .btn, .reflect-card .btn { font-family: "Space Grotesk", var(--sans); min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; }
.reflect .btn--primary, .reflect-card .btn--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.reflect .btn--primary:hover, .reflect-card .btn--primary:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--gold)); }
.reflect :is(a, button, input, select, textarea):focus-visible,
.reflect-card :is(a, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.reflect__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.reflect__nav .mag__back, .reflect__nav-link { display: inline-flex; align-items: center; min-block-size: 44px; }
.reflect__nav-link { color: var(--accent); font-weight: 600; font-size: .92rem; }

.reflect__head { margin-block: .75rem 1.5rem; }
.reflect__head .section__label,
.reflect-card .section__label {
  display: inline-flex; margin: 0; padding: .42rem .62rem; border-radius: 6px;
  background: var(--btn-bg); color: var(--btn-ink);
  font: 700 .68rem/1 "Space Grotesk", var(--sans); letter-spacing: .11em; text-transform: uppercase;
}
.reflect__trip { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem; margin: .7rem 0 1rem; }
.reflect__trip-title { color: var(--ink); font: 600 clamp(1.35rem, 3.4vw, 1.75rem)/1.15 "Playfair Display", var(--serif); overflow-wrap: anywhere; }
.reflect__trip-dates { color: var(--ink-2); font-size: .95rem; font-variant-numeric: tabular-nums; }

.reflect__progress-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .45rem; color: var(--ink-2); font-size: .9rem; }
.reflect__progress-label strong { color: var(--ink); font-weight: 700; }
.reflect__progress-detail { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reflect__meter { block-size: 8px; border-radius: 999px; background: color-mix(in srgb, var(--sage-soft) 22%, var(--surface)); border: 1px solid var(--border); overflow: hidden; }
.reflect__meter > span { display: block; block-size: 100%; min-inline-size: 0; background: linear-gradient(90deg, var(--sage-soft), var(--gold)); border-radius: inherit; transition: inline-size .4s ease; }

.reflect__sheet {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.1rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
}
.reflect__sheet::before { position: absolute; inset: 0 0 auto; block-size: 4px; background: var(--gold); content: ""; }
.reflect__section { margin: 0 0 .6rem; color: var(--gold-strong); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.reflect__subject { display: grid; justify-items: start; gap: .25rem; margin: 0 0 .9rem; color: var(--ink-2); font-size: .95rem; }
.reflect__subject-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.reflect__subject-dates { color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* R5: the one fact that tells repeated stays / same-day activities apart. */
.reflect__subject-detail { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.reflect__subject-dates + .reflect__subject-detail::before { content: "·"; margin-inline-end: .55rem; color: var(--gold-strong); font-weight: 700; }
.reflect__kind { display: inline-flex; align-items: center; padding: .28rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--sage-soft) 26%, var(--surface)); color: var(--ink); font-size: .78rem; font-weight: 700; }
.reflect__subject-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.reflect__muted { color: var(--ink-3); font-weight: 400; }
.reflect__prompt { margin: 0 0 1.4rem; max-inline-size: 26ch; color: var(--ink); font: 600 clamp(1.8rem, 5.2vw, 2.7rem)/1.08 "Playfair Display", var(--serif); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.reflect__answer { margin-block-end: .5rem; }

.reflect__choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.reflect__choices--rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.reflect__choice, .reflect__tag { position: relative; display: block; cursor: pointer; }
.reflect__choice input, .reflect__tag input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.reflect__choice-face {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 52px; padding: .65rem 1.15rem;
  border: 2px solid var(--border-strong); border-radius: 12px; background: var(--bg); color: var(--ink);
  font-weight: 600; text-align: center; transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.reflect__choices--rating .reflect__choice-face { flex-direction: column; gap: .15rem; min-block-size: 84px; padding: .6rem .3rem; }
.reflect__choice-num { font: 600 1.7rem/1 "Playfair Display", var(--serif); }
.reflect__choices--rating .reflect__choice-text { font-size: .78rem; line-height: 1.15; }
.reflect__choice:hover .reflect__choice-face, .reflect__tag:hover span { border-color: var(--sage-soft); }
.reflect__choice input:checked + .reflect__choice-face { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); box-shadow: inset 0 -3px 0 var(--gold); }
.reflect__choice input:focus-visible + .reflect__choice-face, .reflect__tag input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.reflect__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.reflect__tag span { display: inline-flex; align-items: center; min-block-size: 44px; padding: .5rem .95rem; border: 2px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: .92rem; }
.reflect__tag input:checked + span { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); }
.reflect__tag input:checked + span::before { content: "✓"; margin-inline-end: .4rem; }
.reflect__text, .reflect__select {
  display: block; inline-size: 100%; max-inline-size: 100%; padding: .9rem 1rem; border: 2px solid var(--border-strong); border-radius: 12px;
  background: var(--bg); color: var(--ink); font: 400 1.08rem/1.6 var(--serif);
}
.reflect__text { min-block-size: 9.5rem; resize: vertical; }
.reflect__select { font-family: "Space Grotesk", var(--sans); min-block-size: 52px; }
.reflect__hint { margin: .55rem 0 0; color: var(--ink-3); font-size: .85rem; }
.reflect__hint--hold a { color: var(--accent); }
.reflect__state { margin: 0 0 .8rem; color: var(--ink-2); font-size: .92rem; }
.reflect__save { min-block-size: 1.4em; margin: .4rem 0 0; color: var(--ink-3); font-size: .85rem; }
.reflect__save[data-tone="ok"]::before { content: "✓ "; color: var(--sage-strong); }
.reflect__save[data-tone="warn"] { color: var(--accent); font-weight: 600; }

.reflect__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-top: 1px dashed var(--reflect-rule); }
.reflect__back { order: 1; }
.reflect__skip { order: 2; background: transparent; }
.reflect__continue { order: 3; margin-inline-start: auto; min-inline-size: 9.5rem; }
.reflect__aside { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-block-start: .9rem; }
.reflect__link { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 .9rem "Space Grotesk", var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.reflect__notice { display: flex; gap: .65rem; align-items: flex-start; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--border-strong); border-left: 5px solid var(--gold); border-radius: 10px; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); color: var(--ink); font-size: .95rem; line-height: 1.45; }
.reflect__notice--error { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface)); }
.reflect__notice--ok { border-left-color: var(--sage-soft); background: color-mix(in srgb, var(--sage-soft) 14%, var(--surface)); }
.reflect__notice-mark { flex: none; display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: .85rem; }
.reflect__server { margin: 0 0 1rem; color: var(--ink-2); }
.reflect__server span { font-weight: 700; color: var(--ink); }
.reflect__lost { margin: 0 0 1rem; }
.reflect__lost p { margin: 0 0 .35rem; font-weight: 600; }
.reflect__lost blockquote, .reflect__quote { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 4px solid var(--gold); background: var(--bg); border-radius: 0 10px 10px 0; color: var(--ink); font: italic 400 1.05rem/1.55 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.reflect__held { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 0 0 1rem; padding: 1rem 1.1rem; border: 2px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.reflect__held p { margin: 0; flex: 1 1 18rem; }

.reflect__overview { display: grid; gap: 2rem; }
.reflect__intro { display: grid; gap: 1rem; justify-items: start; }
.reflect__title { margin: 0; color: var(--ink); font: 600 clamp(2rem, 6vw, 3.1rem)/1 "Playfair Display", var(--serif); letter-spacing: -.03em; }
.reflect__complete { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem 1rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; }
.reflect__complete-mark { color: var(--gold); font-size: 1.1rem; }
.reflect__group h2, .reflect__attention h2 { position: relative; margin: 0 0 .9rem; padding-block-end: .7rem; color: var(--ink); font: 600 1.55rem/1.1 "Playfair Display", var(--serif); }
.reflect__group h2::after, .reflect__attention h2::after { position: absolute; inset: auto auto 0 0; inline-size: 3rem; block-size: 3px; background: var(--terracotta); content: ""; }
.reflect__lede { margin: 0 0 1rem; color: var(--ink-2); max-inline-size: 60ch; }
.reflect__attention { padding: 1.25rem; border: 2px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.reflect__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.reflect__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.reflect__row > div:first-child { flex: 1 1 20rem; min-inline-size: 0; }
.reflect__row .reflect__subject { margin-block-end: .35rem; font-size: .85rem; }
.reflect__row-prompt { margin: 0; color: var(--ink); font: 600 1.12rem/1.3 "Playfair Display", var(--serif); overflow-wrap: anywhere; }
.reflect__row-answer { margin: .4rem 0 0; color: var(--ink-2); font: italic 400 1rem/1.5 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.reflect__row-text { margin: 0; color: var(--ink-2); }
.reflect__row-side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.reflect__edit { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--accent); font-weight: 700; }
.reflect__badge { display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.reflect__badge--done { background: var(--btn-bg); color: var(--btn-ink); }
.reflect__badge--attention { background: var(--accent); color: var(--surface); }
.reflect__badge--skipped { background: var(--gold-strong); color: var(--surface); }
.reflect__badge--open { border: 1px dashed var(--border-strong); color: var(--ink-2); }

.reflect__sheet--attention .reflect__prompt { font-size: clamp(1.5rem, 4.4vw, 2.15rem); max-inline-size: 30ch; }
.reflect__was, .reflect__target { margin-block-end: 1.25rem; }
.reflect__target { padding: 1rem 1.1rem; border: 1px dashed var(--reflect-rule); border-radius: 12px; }
.reflect__decisions { display: grid; gap: 1rem; padding-block-start: 1.1rem; border-top: 1px dashed var(--reflect-rule); }
.reflect__decide fieldset { margin: 0 0 .8rem; padding: 0; border: 0; }
.reflect__decide legend { margin-block-end: .5rem; font-weight: 700; color: var(--ink); }
.reflect__decide--inline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.reflect__decide--inline .reflect__hint { margin: 0; flex: 1 1 14rem; }
.reflect__decide .reflect__choices, .reflect__decide .reflect__tags, .reflect__decide .reflect__text, .reflect__decide .reflect__select { margin-block-end: .8rem; }
.reflect__option { display: flex; gap: .6rem; align-items: center; min-block-size: 44px; }
.reflect__option input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--btn-bg); }
.reflect__option-body { display: grid; justify-items: start; gap: .2rem; padding: .5rem 0; }
.reflect__option-body .reflect__section { margin: 0; }
.reflect__move-hint { margin: 0 0 .65rem; }

/* The completed-trip page's entry point. */
.reflect-card {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-block: 2rem; padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.2rem, 4vw, 2.4rem);
  border: 1px solid var(--border-strong); border-left: 6px solid var(--gold); border-radius: 14px; background: var(--surface);
  font-family: "Space Grotesk", var(--sans);
}
.reflect-card__body { flex: 1 1 22rem; min-inline-size: 0; }
.reflect-card h2 { margin: .7rem 0 .45rem; color: var(--ink); font: 600 clamp(1.6rem, 4vw, 2.2rem)/1.05 "Playfair Display", var(--serif); letter-spacing: -.02em; }
.reflect-card__text { margin: 0; max-inline-size: 58ch; color: var(--ink-2); line-height: 1.5; }
.reflect-card__meter { display: grid; gap: .4rem; margin-block-start: .9rem; max-inline-size: 22rem; }
.reflect-card__count { color: var(--ink-2); font-size: .9rem; }
.reflect-card__count strong { color: var(--ink); font: 600 1.6rem/1 "Playfair Display", var(--serif); margin-inline-end: .15rem; }
.reflect-card__detail { color: var(--ink-3); font-size: .85rem; }
.reflect-card__flash, .reflect-card__more { margin: .8rem 0 0; color: var(--ink-2); font-size: .9rem; }
.reflect-card__flash { padding-inline-start: .7rem; border-left: 3px solid var(--accent); color: var(--ink); }
.reflect-card__more a { color: var(--accent); }
.reflect-card--attention { border-left-color: var(--accent); }
.reflect-card__action form { margin: 0; }

/* R5 LAN remediation: a COMPLETE reflection steps back from the trip. A small note
   with a perforated ticket-stub edge; the R4A postmark in miniature is its one device.
   Playfair names it, Space Grotesk says how much was kept, a plain link opens it.
   No meter, no button, no attention colour: unfinished and held reflections keep the
   full card above. */
.reflect-done {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem 1rem;
  margin-block: 1.75rem; padding: .7rem .9rem .7rem 1rem;
  border: 1.5px dashed color-mix(in srgb, var(--gold-strong) 42%, transparent); border-radius: 14px;
  font-family: "Space Grotesk", var(--sans);
}
.reflect-done__seal {
  display: grid; place-content: center; inline-size: 2.6rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--gold-strong); color: var(--gold-strong); font-size: 1.05rem; line-height: 1;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 9%, var(--surface)), inset 0 0 0 4px color-mix(in srgb, var(--gold-strong) 60%, transparent);
  transform: rotate(-7deg);
}
.reflect-done__body { min-inline-size: 0; }
.reflect-done__title { margin: 0; color: var(--ink); font: 600 1.15rem/1.2 "Playfair Display", var(--serif); letter-spacing: -.01em; }
.reflect-done__text { margin: .1rem 0 0; color: var(--ink-2); font-size: .88rem; font-variant-numeric: tabular-nums; }
.reflect-done__link {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .35rem;
  color: var(--accent); font-size: .92rem; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.reflect-done__link:hover { text-decoration-thickness: 2px; }
.reflect-done__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.reflect-done .reflect-card__flash, .reflect-done .reflect-card__more { margin-block-start: .45rem; font-size: .85rem; }

/* Travel Memory on the historical trip page: the owner's Claude Design "Trip Summary
   Redesign". One dark forest band across the full width, its content on a centred 1000px
   measure: the heading ("remember it" in gold italic); a card holding what stayed with you
   (small gold label, the quote) and the trip's verdicts as tiles; "Along the way" as cards
   (kind over name, the rating as a gold pill, when, the answers as a two-column list, the
   owner's words in italic); "Remember for next time" as paper tip cards with a gold top
   edge, each headed in terracotta by what it is about. Design → site: DM Sans → Space
   Grotesk; a dark-scheme band one green step above the dark page. Measured: gold 7.6:1 and
   muted 7.9:1 on the cards, 9.1:1 / 9.4:1 on the band; tip heading 5.7:1 on the paper. */
.remember {
  --hy-base: #17211a; --hy-card: #223026; --hy-tile: #17211a; --hy-edge: #3d4d42;
  --hy-ink: #faf6ee; --hy-soft: #f0ead9; --hy-muted: #c9c3b0; --hy-quiet: #d8d2c0; --hy-gold: #e9b955;
  --hy-paper: #faf6ee; --hy-paper-ink: #1e2a22; --hy-terra: #a2461f;
  position: relative; isolation: isolate; margin-block: 0 3.5rem; padding-block: 5.5rem 6rem;
  color: var(--hy-ink); background: var(--hy-base); font-family: "Space Grotesk", var(--sans);
}
@media (prefers-color-scheme: dark) {
  .remember { --hy-base: #202c22; --hy-card: #2a392d; --hy-tile: #202c22; --hy-edge: #45574a; }
}
/* The band's colour reaches the viewport's edges; its own box carries it too, so every
   tool that reads the background under the text reads the true one. */
.remember::before { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); content: ""; background: var(--hy-base); }
.remember section + section { margin-block-start: 0; }
.trip-page--completed .remember { margin-block-start: 2.5rem; }
.trip-summary + .remember { margin-block-start: 0; }
.remember__inner { display: flex; flex-direction: column; max-inline-size: 62.5rem; margin-inline: auto; }
.remember :focus-visible { outline-color: var(--hy-gold); }
.remember a { color: var(--hy-gold); }
.remember a:focus-visible { outline: 3px solid var(--hy-gold); outline-offset: 2px; border-radius: 4px; }

.remember__head { display: flex; flex-direction: column; gap: .5rem; }
.remember__title { margin: 0; color: var(--hy-ink); font: 400 2.75rem/1.1 "Playfair Display", var(--serif); }
.remember__title em { color: var(--hy-gold); font-style: italic; white-space: nowrap; }
.remember__provenance { margin: 0; color: var(--hy-muted); font-size: .9375rem; text-wrap: pretty; }
.remember__head .reflect-card__flash { margin: 0; color: var(--hy-ink); font-size: .9375rem; }
/* The small gold label every part opens with. */
.remember__label { margin: 0; color: var(--hy-gold); font: 700 .8125rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* What stayed with you, and the trip's verdicts. */
.remember__moment { margin-block-start: 2.75rem; padding: 2.5rem 2.75rem; border: 1px solid var(--hy-edge); border-radius: 18px; background: var(--hy-card); }
.remember__quote { margin: 1rem 0 0; color: var(--hy-ink); font: italic 400 clamp(1.625rem, 3.6vw, 2.375rem)/1.3 "Playfair Display", var(--serif); text-wrap: balance; overflow-wrap: anywhere; }
.remember__quote p { margin: 0; }
.remember__quote p + p { margin-block-start: .5em; }
.remember__quote p:first-child::before { content: "“" / ""; }
.remember__quote p:last-child::after { content: "”" / ""; }
.remember__prose { max-inline-size: 62ch; color: var(--hy-soft); font: italic 400 1.125rem/1.5 "Playfair Display", var(--serif); overflow-wrap: anywhere; text-wrap: pretty; }
.remember__prose p { margin: 0; }
.remember__prose p + p { margin-block-start: .6em; }
.remember__moment > .remember__prose { margin-block-start: 1rem; }
.remember__aside { margin: 0 0 .2rem; color: var(--hy-muted); font: normal 400 .8125rem/1.4 "Space Grotesk", var(--sans); }
.remember__verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.25rem), 1fr)); gap: .75rem; margin: 0; }
.remember__moment > * + .remember__verdicts { margin-block-start: 2rem; }
.remember__verdict { padding: 1rem 1.25rem; border-radius: 12px; background: var(--hy-tile); }
.remember__verdict dt { color: var(--hy-gold); font: 700 .75rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.remember__verdict dd { margin: .375rem 0 0; color: var(--hy-ink); font: 400 1.5rem/1.2 "Playfair Display", var(--serif); overflow-wrap: anywhere; }

/* Along the way. */
.remember__part { display: flex; flex-direction: column; gap: 1.125rem; min-inline-size: 0; }
.remember .remember__part { margin-block-start: 3.5rem; }
.remember__entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 27.5rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.remember__entry { display: flex; flex-direction: column; gap: .875rem; padding: 1.625rem 1.75rem; border: 1px solid var(--hy-edge); border-radius: 16px; background: var(--hy-card); scroll-margin-block-start: 5rem; }
.remember__entry:target { outline: 2px dashed var(--hy-gold); outline-offset: .25rem; }
.remember__entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.remember__entry-title { min-inline-size: 0; }
.remember__kind { margin: 0; color: var(--hy-gold); font: 700 .75rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.remember__name { margin: .25rem 0 0; color: var(--hy-ink); font: 500 1.625rem/1.2 "Playfair Display", var(--serif); overflow-wrap: anywhere; }
.remember__rating { flex-shrink: 0; margin: 0; padding: .3125rem .75rem; border-radius: 99px; color: var(--hy-base); background: var(--hy-gold); font: 700 .8125rem/1.3 "Space Grotesk", var(--sans); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .remember__rating { color: #17211a; } }
.remember__meta { display: flex; flex-wrap: wrap; margin: 0 0 0 -.75rem; clip-path: inset(-.3rem 0 -.3rem .75rem); color: var(--hy-quiet); font-size: .9375rem; }
.remember__meta span { position: relative; max-inline-size: 100%; padding-inline-start: .75rem; overflow-wrap: anywhere; }
.remember__meta span::before { position: absolute; inset-inline-start: 0; inline-size: .75rem; text-align: center; content: "·" / ", "; }
.remember__stays { margin: 0; color: var(--hy-quiet); font-size: .9375rem; overflow-wrap: anywhere; }
.remember__answers { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.125rem; margin: 0; font-size: 1rem; line-height: 1.4; }
.remember__answers > div { display: contents; }
.remember__answers dt { color: var(--hy-muted); }
.remember__answers dd { margin: 0; color: var(--hy-ink); font-weight: 700; overflow-wrap: anywhere; }
.remember__words .remember__prose { color: var(--hy-soft); }

/* Remember for next time: paper tip cards. */
.remember__lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.125rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
/* Each card spans two rows of the grid — what it is about, then the words — so across a
   row the words start level whether or not a card has a heading. */
.remember__lessons { grid-auto-rows: auto auto; }
.remember__lessons > .remember__lesson { grid-row: span 2; }
@supports (grid-template-rows: subgrid) {
  .remember__lessons > .remember__lesson { display: grid; grid-template-rows: subgrid; row-gap: .625rem; align-content: start; }
  .remember__lessons > .remember__lesson > .remember__from { grid-row: 1; }
  .remember__lessons > .remember__lesson > .remember__tip { grid-row: 2; }
}
.remember__lesson { display: flex; flex-direction: column; gap: .625rem; padding: 1.375rem 1.375rem 1.5rem; border-block-start: 4px solid var(--hy-gold); border-radius: 14px; color: var(--hy-paper-ink); background: var(--hy-paper); font-size: 1.0625rem; line-height: 1.5; overflow-wrap: anywhere; text-wrap: pretty; scroll-margin-block-start: 5rem; }
.remember__lesson p { margin: 0; }
.remember__lesson p + p { margin-block-start: .5em; }
.remember__lesson .remember__from { display: flex; flex-wrap: wrap; margin-inline-start: -.75rem; clip-path: inset(-.3rem 0 -.3rem .75rem); color: var(--hy-terra); font: 700 .75rem/1.35 "Space Grotesk", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.remember__from span { position: relative; padding-inline-start: .75rem; }
.remember__from-kind { white-space: nowrap; }
.remember__from span::before { position: absolute; inset-inline-start: 0; inline-size: .75rem; text-align: center; content: "·" / ", "; }
.remember__lesson:target { outline: 2px dashed var(--hy-gold); outline-offset: .25rem; }
.remember__more {
  align-self: flex-start; min-block-size: 44px; margin: 0 0 -.5rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--hy-gold); font: 700 .875rem/1.3 "Space Grotesk", var(--sans); text-decoration: underline; text-underline-offset: 3px;
}
.remember__more:focus-visible { outline: 3px solid var(--hy-gold); outline-offset: 2px; border-radius: 4px; }
[data-remember-limit] > li.is-extra { display: none; }

/* The owner's sign-off, closing the band. */
.remember__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; margin-block-start: 3rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hy-edge); }
.remember__foot-body { min-inline-size: 0; }
.remember__kept { margin: 0; color: var(--hy-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.remember__foot .reflect-card__more, .remember__omitted { margin: .25rem 0 0; color: var(--hy-muted); font-size: .9375rem; }
.remember__foot .reflect-done__link { color: var(--hy-gold); }

@media (max-width: 60rem) {
  .remember__lessons { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
}
@media (max-width: 30rem) {
  /* One column: nothing to line up, so each card is a plain stack. */
  .remember__lessons { grid-auto-rows: auto; }
  .remember__lessons > .remember__lesson { display: flex; grid-row: auto; }
}
@media (max-width: 26rem) {
  .remember__answers { grid-template-columns: minmax(0, 1fr); row-gap: .125rem; }
  .remember__answers dd { margin-block-end: .5rem; }
}
@media (max-width: 560px) {
  .trip-page--completed .remember { margin-block-start: 2rem; }
  .trip-summary + .remember { margin-block-start: 0; }
  .remember { padding-block: 3.5rem 4rem; }
  .remember__title { font-size: 2.25rem; }
  .remember__moment { margin-block-start: 2rem; padding: 1.5rem 1.25rem; }
  .remember .remember__part { margin-block-start: 2.5rem; }
  .remember__entry { padding: 1.25rem; }
  .remember__name { font-size: 1.375rem; }
  .remember__foot .reflect-done__link { margin-inline-start: -.35rem; white-space: normal; }
}

.reflect-attn__intro h2 { font: 600 clamp(1.75rem, 1.2rem + 2vw, 2.15rem)/1.1 "Playfair Display", var(--serif); letter-spacing: -.015em; }
.reflect-attn__group-title {
  display: flex; align-items: baseline; gap: 1rem; margin: 0;
  color: var(--ink); font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem)/1.2 "Playfair Display", var(--serif); letter-spacing: -.01em;
}
.reflect-attn__group-title::after { content: ""; flex: 1; block-size: 1px; background: var(--border); }

/* The one note treatment, shared by the section above and the Journey. */
.remember__facts, .remember__notes { margin: 0; font-family: "Space Grotesk", var(--sans); }
.remember__facts { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.remember__facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; min-inline-size: 0; }
.remember__facts dt, .remember__note dt {
  color: var(--ink-3); font: 500 .84rem/1.4 "Space Grotesk", var(--sans); letter-spacing: 0; text-transform: none;
}
.remember__facts dd {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; margin: 0;
  color: var(--ink); font: 600 .95rem/1.4 "Space Grotesk", var(--sans); overflow-wrap: anywhere;
}
.remember__pips { display: inline-flex; gap: 3px; align-self: center; }
.remember__pip { inline-size: .55rem; aspect-ratio: 1; border: 1.5px solid var(--gold-strong); border-radius: 50%; }
.remember__pip--on { background: var(--gold-strong); }
.remember__score { font-variant-numeric: tabular-nums; }
.remember__word { color: var(--ink-3); font-size: .84rem; font-weight: 500; }
.remember__notes { display: grid; gap: .85rem; }
.remember__note dt { margin-block-end: .2rem; }
.remember__note dd {
  max-inline-size: 62ch; margin: 0; color: var(--ink);
  font: 400 1rem/1.62 "Playfair Display", var(--serif); overflow-wrap: anywhere;
}
.remember__note dd p { margin: 0; }
.remember__note dd p + p { margin-block-start: .65em; }

/* A booking's memory in the Journey: one small tab in the memory band's own colours,
   pointing up to the section above. The Journey records what happened; the reflection's
   words stay in the section. */
.journey-memory { grid-column: 3; margin: -.1rem 0 0; }
.journey-memory__link {
  display: inline-flex; align-items: center; gap: .45rem; min-block-size: 28px; padding: .2rem .8rem .2rem .65rem; border-radius: 999px;
  color: #efe8d8; background: #18201a; box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .45); text-decoration: none;
  font: italic 400 .875rem/1.2 "Playfair Display", var(--serif);
}
.journey-memory__star { inline-size: .7rem; block-size: .7rem; flex-shrink: 0; color: #d9b664; }
.journey-memory__text { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(239, 232, 216, .4); text-underline-offset: .2em; }
.journey-memory__link:hover .journey-memory__text { text-decoration-color: currentColor; }
.journey-memory__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .journey-memory__link { background: #26352a; }
}

/* R6 LAN remediation: what needs a look, ONE item per experience however many of its
   answers wait. The historical page's editorial rhythm (Claude Design "Trip
   Reflection", "The whole trip" → "The Journey"): hairline-ruled rows, the name in
   Playfair, a quiet meta line, the words in the middle, one plain Review action. No
   card per item, no warning panel. */
.reflect-card--list { align-items: flex-start; }
.reflect-card--list .reflect-card__body { flex-basis: 100%; }
.reflect-attn__list { flex: 1 1 100%; min-inline-size: 0; list-style: none; margin: 0; padding: 0; border-block-end: 1px solid var(--border); }
.reflect-attn {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; align-items: start; gap: .45rem 1.75rem;
  padding-block: 1rem; border-block-start: 1px solid var(--border);
}
.reflect-attn__who, .reflect-attn__what { min-inline-size: 0; }
.reflect-attn__name { margin: 0; color: var(--ink); font: 600 1.12rem/1.3 "Playfair Display", var(--serif); letter-spacing: -.005em; overflow-wrap: anywhere; }
.reflect-attn__meta, .reflect-attn__next { display: flex; flex-wrap: wrap; gap: 0 .45rem; margin: .2rem 0 0; color: var(--ink-3); font-size: .84rem; font-variant-numeric: tabular-nums; }
.reflect-attn__meta span, .reflect-attn__next span { white-space: nowrap; }
.reflect-attn__meta span:not(:last-child)::after,
.reflect-attn__next span:not(:first-child):not(:last-child)::after { content: "·"; margin-inline-start: .45rem; color: var(--gold-strong); }
.reflect-attn__text { margin: 0; max-inline-size: 52ch; color: var(--ink); line-height: 1.5; }
.reflect-attn__next { margin-block-start: .4rem; color: var(--ink-2); }
.reflect-attn__next .reflect-attn__next-label { margin-inline-end: .2rem; color: var(--accent); font-weight: 600; white-space: normal; }
.reflect-attn__go { align-self: start; }
.reflect__attention { padding: 0; border: 0; background: none; }
.reflect__attention .reflect-attn__list { margin-block-start: .25rem; }
@media (max-width: 720px) {
  .reflect-attn { grid-template-columns: minmax(0, 1fr); }
  .reflect-attn__go { justify-self: start; }
  .reflect-attn__next .reflect-attn__next-label { flex-basis: 100%; }
}

/* R6 final LAN remediation: the trip page's grouped attention in the Claude Design
   "Trip Reflection" language — the same head as "Remember for next time", a "Needs a
   look" section with the design's Playfair heading and hairline, and each experience as
   one of the design's cards; the updated booking reads as an answer chip. No card chrome
   around the whole, no warning panel. The overview keeps its ruled rows. */
.reflect-card--list { display: block; margin-block: 2.25rem 3.5rem; padding: 0; border: 0; border-radius: 0; background: none; }
.reflect-attn__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; }
.reflect-attn__intro-body { min-inline-size: 0; }
.reflect-attn__intro h2 { margin: .1rem 0 .3rem; }
.reflect-attn__intro .reflect-card__text { margin-block-start: .5rem; }
.reflect-attn__group { display: flex; flex-direction: column; gap: 1.5rem; margin-block-start: 2.5rem; }
.reflect-card--list .reflect-attn__list { display: grid; gap: .875rem; border: 0; }
.reflect-card--list .reflect-attn {
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.75rem;
  padding: 1.5rem 1.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.reflect-card--list .reflect-attn__name { font: 500 1.5rem/1.25 "Playfair Display", var(--serif); letter-spacing: 0; }
.reflect-card--list .reflect-attn__meta { gap: .375rem .625rem; margin-block-start: .5rem; color: var(--ink-2); font-size: .875rem; }
.reflect-card--list .reflect-attn__meta span:not(:last-child)::after { content: none; }
.reflect-card--list .reflect-attn__meta span + span::before { content: "·"; margin-inline-end: .625rem; color: var(--gold-strong); }
.reflect-card--list .reflect-attn__next {
  display: inline-flex; flex-wrap: wrap; gap: .25rem .5rem; margin-block-start: .75rem; padding: .75rem 1.125rem; border-radius: 8px;
  background: color-mix(in srgb, var(--border) 62%, var(--bg)); color: var(--ink); font-size: .95rem; font-weight: 600;
}
.reflect-card--list .reflect-attn__next .reflect-attn__next-label {
  flex-basis: 100%; margin: 0; color: var(--accent-strong); font: 600 .75rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.reflect-attn__changed { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: .28em; }
.reflect-attn__after { margin: 1rem 0 0; }
.reflect-attn__after .reflect-done__link { padding-inline: 0; }
.reflect-card--list .reflect-attn__go { align-self: center; }
@media (max-width: 720px) {
  .reflect-card--list .reflect-attn { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 1.25rem; }
  .reflect-card--list .reflect-attn__go { justify-self: start; }
}

/* The stale subject's page: a record correction read like a ledger. The experience as
   reviewed (with the review, in the Journey's own note treatment), then the updated
   booking on the same ruled line; the changed fact struck on the old record and
   underlined on the new, and said in words for assistive tech. One action. */
.reflect-continuity .reflect__prompt { margin-block-end: .8rem; font-size: clamp(1.5rem, 4.4vw, 2.15rem); max-inline-size: 30ch; }
.reflect-continuity__lede { margin: 0 0 1.75rem; max-inline-size: 58ch; color: var(--ink-2); line-height: 1.55; }
.reflect-ledger { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.reflect-ledger__entry { position: relative; min-inline-size: 0; padding: 0 0 1.6rem 2.1rem; }
.reflect-ledger__entry::before {
  position: absolute; inset-inline-start: .3rem; inset-block-start: .15rem; inline-size: .8rem; aspect-ratio: 1;
  border: 2px solid var(--gold-strong); border-radius: 50%; background: var(--surface); content: "";
}
.reflect-ledger__entry--now::before { background: var(--gold-strong); }
.reflect-ledger__entry--was::after {
  position: absolute; inset-inline-start: calc(.7rem - 1px); inset-block: 1.25rem .15rem;
  border-inline-start: 2px dotted var(--reflect-rule); content: "";
}
.reflect-ledger--single .reflect-ledger__entry--was::after,
.reflect-ledger--single .reflect-ledger__entry::before { display: none; }
.reflect-ledger--single .reflect-ledger__entry { padding-inline-start: 0; }
.reflect-ledger__entry:last-child { padding-block-end: .5rem; }
.reflect-ledger__label { margin: 0 0 .4rem; color: var(--accent); font: 600 .75rem/1.3 "Space Grotesk", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.reflect-ledger__name { margin: 0; color: var(--ink); font: 600 1.35rem/1.25 "Playfair Display", var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.reflect-ledger__meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; margin: .3rem 0 0; color: var(--ink-2); font-size: .92rem; font-variant-numeric: tabular-nums; }
.reflect-ledger__meta > span { white-space: nowrap; }
.reflect-ledger__meta > span:not(:last-child)::after { content: "·"; margin-inline-start: .5rem; color: var(--gold-strong); }
del.reflect-ledger__changed { color: var(--ink-3); text-decoration-thickness: 1.5px; }
ins.reflect-ledger__changed {
  color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 3px; text-underline-offset: .28em;
}
.reflect-ledger__review {
  display: grid; gap: .85rem; max-inline-size: 44rem; margin-block-start: 1rem; padding-block-start: .9rem;
  border-block-start: 1px solid var(--border);
}
.reflect-ledger__note { margin: .55rem 0 0; color: var(--ink-3); font-size: .88rem; }
.reflect-continuity__decide { display: grid; justify-items: start; gap: .6rem; padding-block-start: 1.25rem; border-block-start: 1px dashed var(--reflect-rule); }
.reflect-continuity__decide .btn { max-inline-size: 100%; white-space: normal; text-align: center; }
.reflect-continuity__decide .reflect__hint { margin: 0; max-inline-size: 52ch; }
/* Phones: in a facts line the pips repeat the score in words; without them a rating
   keeps to one line in a narrow column. */
@media (max-width: 560px) {
  .remember__facts .remember__pips { display: none; }
}

.reflect__subject-stays { color: var(--ink-2); font-size: .88rem; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .reflect__choices--rating { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .reflect__choices--rating .reflect__choice-face { min-block-size: 72px; padding-inline: .35rem; }
  .reflect__choice-num { font-size: 1.4rem; }
  .reflect__choices:not(.reflect__choices--rating) { display: grid; }
  .reflect__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .reflect__continue { grid-column: 1 / -1; order: 0; margin-inline-start: 0; }
  .reflect__actions .btn { inline-size: 100%; }
  .reflect__row-side { flex-direction: row; align-items: center; inline-size: 100%; justify-content: space-between; }
  .reflect-card__action, .reflect-card__action .btn, .reflect-card__action form { inline-size: 100%; }
  .reflect-done { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; }
  .reflect-done__link { grid-column: 2; justify-self: start; margin-inline-start: -.35rem; white-space: normal; }
}
@media (max-width: 360px) {
  .reflect__choices--rating { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reflect__choices--rating .reflect__choice:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .reflect__meter > span, .reflect__choice-face { transition: none; }
}

/* --- Travel Memory invitation on /trips (R4A) ---------------------------------
   One finished trip, offered for reflection above Upcoming (site/reflectionRender.js
   renderPrompt). A postcard, not an alert: the one bold device is the postmark —
   a gold double ring with the trip's own emoji and the month it ended, set at a
   slight angle like a real cancellation stamp. Everything around it stays quiet:
   Playfair for the trip, Space Grotesk for the words, the hedge-green button.
   No dismiss control, no motion, no colour-only state: the kicker and the button
   say what kind of invitation it is. */
.memory-prompt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  grid-template-areas: "stamp head actions" "stamp text actions";
  gap: .6rem clamp(1.1rem, 3vw, 2rem);
  margin: 0 0 2.5rem; padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3.5vw, 2rem);
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 4%, var(--surface));
  font-family: "Space Grotesk", var(--sans);
}
.memory-prompt__stamp {
  --stamp-ink: var(--gold-strong);
  grid-area: stamp; display: grid; place-content: center; justify-items: center; gap: .15rem;
  inline-size: 5.5rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--stamp-ink);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--gold) 9%, var(--surface)), inset 0 0 0 5px color-mix(in srgb, var(--stamp-ink) 65%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  transform: rotate(-7deg);
}
.memory-prompt--review .memory-prompt__stamp { --stamp-ink: var(--accent); }
.memory-prompt__stamp-mark { font-size: 1.75rem; line-height: 1; }
.memory-prompt__stamp-date {
  color: var(--stamp-ink); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.memory-prompt__head { grid-area: head; align-self: end; min-inline-size: 0; }
.memory-prompt__kicker { margin: 0; color: var(--gold-strong); font-size: .92rem; font-weight: 600; }
.memory-prompt--review .memory-prompt__kicker { color: var(--accent); }
.memory-prompt__title {
  margin: .2rem 0 0; color: var(--ink); text-wrap: balance;
  font: 600 clamp(1.45rem, 3.4vw, 1.95rem)/1.1 "Playfair Display", var(--serif); letter-spacing: -.015em;
}
.memory-prompt__dates { margin: .3rem 0 0; color: var(--ink-2); font-size: .9rem; }
.memory-prompt__text { grid-area: text; align-self: start; margin: 0; max-inline-size: 60ch; color: var(--ink-2); line-height: 1.5; }
.memory-prompt__actions { grid-area: actions; display: grid; justify-items: center; gap: .15rem; }
.memory-prompt__actions form { margin: 0; }
.memory-prompt .btn { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Grotesk", var(--sans); }
.memory-prompt .btn--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.memory-prompt .btn--primary:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--gold)); }
.memory-prompt__link {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .5rem;
  color: var(--accent); font-size: .92rem; font-weight: 600;
}
.memory-prompt :is(a, button):focus-visible { outline: 3px solid var(--gold-strong); outline-offset: 2px; }

@media (max-width: 720px) {
  .memory-prompt { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "stamp head" "text text" "actions actions"; row-gap: .8rem; }
  .memory-prompt__head { align-self: center; }
  .memory-prompt__stamp { inline-size: 3.9rem; }
  .memory-prompt__stamp-mark { font-size: 1.3rem; }
  .memory-prompt__stamp-date { font-size: .52rem; letter-spacing: .08em; }
  .memory-prompt__actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: .5rem; }
  .memory-prompt__actions .btn { inline-size: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  .memory-prompt__actions { grid-template-columns: 1fr; justify-items: center; }
  .memory-prompt__actions form, .memory-prompt__actions > .btn { inline-size: 100%; }
}

/* Public sample: the pointer to the sample trip's invented Travel Memory, at the head of
   Prior trips. The R5 completed-reflection stub (.reflect-done: dashed gold edge, tilted
   postmark), carrying one quoted line from the trip; the link names where it goes. Only
   /sample renders it (site/demoTravelMemory.js sampleMemoryTeaser). */
.memory-teaser { max-inline-size: 54rem; margin-block: .25rem 1.75rem; padding: 1.1rem 1.2rem; align-items: start; background: var(--surface); }
.memory-teaser .reflect-done__seal { margin-block-start: .1rem; }
.memory-teaser__title { margin: 0; color: var(--ink); font: 600 1.25rem/1.25 "Playfair Display", var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.memory-teaser__text { max-inline-size: 60ch; margin: .4rem 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.memory-teaser__quote { margin: .9rem 0 0; padding-inline-start: .9rem; border-inline-start: 2px solid color-mix(in srgb, var(--gold-strong) 55%, transparent); }
.memory-teaser__quote blockquote { margin: 0; }
.memory-teaser__quote p { margin: 0; color: var(--ink); font: italic 400 1.05rem/1.5 "Playfair Display", var(--serif); overflow-wrap: anywhere; }
.memory-teaser__quote figcaption { margin-block-start: .3rem; color: var(--ink-3); font-size: .84rem; }
.memory-teaser > .reflect-done__link { align-self: end; }
@media (max-width: 560px) {
  .memory-teaser { grid-template-columns: auto minmax(0, 1fr); row-gap: .25rem; padding: 1rem; }
  .memory-teaser > .reflect-done__link { grid-column: 2; justify-self: start; margin-inline-start: -.35rem; white-space: normal; }
}

/* Features, "Keep the history": Travel Memory after the facts. The same dashed stub and
   tilted postmark as a remembered trip page (.reflect-done) and the /sample pointer. */
.features-memory {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin: 2rem 0 0; padding: 1.25rem 1.35rem;
  border: 1.5px dashed color-mix(in srgb, var(--gold-strong) 45%, transparent); border-radius: 14px;
}
.features-memory__seal {
  display: grid; place-content: center; inline-size: 2.3rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--gold-strong); color: var(--gold-strong); font-size: .95rem; line-height: 1;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 9%, var(--surface)), inset 0 0 0 4px color-mix(in srgb, var(--gold-strong) 60%, transparent);
  transform: rotate(-7deg);
}
.features-memory__parts { display: grid; gap: 1.1rem; min-inline-size: 0; }
.features-memory h3 { margin: 0 0 .35rem; color: var(--sage-dark); font: 500 1.25rem/1.25 var(--public-display); letter-spacing: -.01em; }
.features-memory p { max-inline-size: 48ch; margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.65; text-wrap: pretty; }
@media (max-width: 420px) {
  .features-memory { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
}