/* yourwindowseat.com (asset v9) — Brand v2 "Contrail + The Window" (Steam Tail). Tokens in :root are the only place colour and type live. Fonts: assets/fonts/fonts.css (self-hosted). */

:root {
  color-scheme: light;
  /* Steam Tail — Brand v2 "Contrail + The Window" */
  --ink: #0F1021;
  --deep-tail: #465D5F;
  --lagoon: #5699A0;
  --sky: #8FB9C3;
  --reef: #72A9B1;   /* v16: the teal between Lagoon and Sky — Points & miles (Claudio, 2026-09-24) */
  --haze: #CDD0DE;
  --blush: #F9DFEF;
  --white: #FFFFFF;
  --mist: #F4F6F9;
  /* glass stripes: one pair per frame colour */
  --glass-hero-a: #8FB9C3;  --glass-hero-b: #9BC1CA;
  --glass-haze-a: #DADCE7;  --glass-haze-b: #E3E5EE;
  --glass-lagoon-a: #6AA6AC; --glass-lagoon-b: #74ADB3;
  --glass-sky-a: #A0C4CD;   --glass-sky-b: #A9CAD2;
  --glass-reef-a: #85B5BC;  --glass-reef-b: #8EBBC2;

  /* Formance builder contract */
  --color-bg: var(--white);
  --color-surface: var(--mist);
  --color-ink: var(--ink);
  --color-ink-muted: var(--deep-tail);
  --color-border: var(--haze);
  --color-accent: var(--lagoon);
  --color-deep: var(--ink);

  --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-width: 1280px;
  --gutter: clamp(16px, 3vw, 32px);
  --line: 2.5px;
  --radius-card: 24px;
  --radius-panel: 28px;
  --space-section: clamp(80px, 10vw, 128px);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
/* build.py wraps photos in <picture> for AVIF/WebP — the wrapper must generate no box of its own,
   and the rules below reach the <img> through it (descendant, not child). */
picture { display: contents; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- draft note ---------- */
.draft-note { background: var(--mist); font-size: 14px; color: var(--deep-tail); }
.draft-note .wrap { padding-block: 9px; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
.draft-note strong { color: var(--ink); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--haze); }
.site-header .wrap {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav cta";
  align-items: center; gap: 12px 32px; padding-block: 18px;
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.04em; line-height: 1; }
.wordmark span { color: var(--deep-tail); }
.site-nav { grid-area: nav; display: flex; gap: 8px 28px; flex-wrap: wrap; justify-content: center; }
.site-nav a { font-weight: 500; font-size: 16px; text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--ink); }
.header-cta { grid-area: cta; }

/* ---------- buttons + labels ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 2px solid var(--ink);
  font: 600 16px/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--white); }
/* .btn--blush retired 2026-09-24 (Claudio: "the pink button does not fit here") — Blush lives only in the logo sun until the accent is re-decided */
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--white); }
.btn--small { padding: 11px 20px; font-size: 15px; }

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-tail);
}
/* a tiny window in the section's frame colour */
.label[data-frame]::before {
  content: ""; width: 13px; height: 17px; flex: none;
  border-radius: 42% / 30%; border: 2px solid var(--ink); background: var(--frame, var(--haze));
}
[data-frame="haze"]   { --frame: var(--haze); }
[data-frame="lagoon"] { --frame: var(--lagoon); }
[data-frame="sky"]    { --frame: var(--sky); }
[data-frame="reef"]   { --frame: var(--reef); }
[data-frame="blush"]  { --frame: var(--blush); }   /* v19: the accent at chip size only — Pro tip + Write with us label icons (Claudio, 2026-09-24: option 2) */

.arrow-link { font-weight: 600; font-size: 15px; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.sample {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1.5px dashed var(--deep-tail); color: var(--deep-tail);
}

/* ---------- the window ---------- */
.window {
  --glass-a: var(--glass-hero-a); --glass-b: var(--glass-hero-b);
  width: 100%; max-width: 100%; aspect-ratio: 3 / 4;
  border-radius: 42% / 30%; background: var(--frame, var(--haze));
  border: var(--line) solid var(--ink); padding: 7%; display: flex;
}
.window__glass {
  flex: 1; position: relative; overflow: hidden;
  border-radius: 40% / 28%; border: var(--line) solid var(--ink);
  background: repeating-linear-gradient(135deg, var(--glass-a) 0 12px, var(--glass-b) 12px 24px);
  display: flex; align-items: flex-end; justify-content: center; padding: 0 6px 20%;
}
/* the blind: always at the top, always 24% */
.window__glass::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 24%;
  background: var(--white); border-bottom: var(--line) solid var(--ink);
}
.window__label {
  position: relative; font-size: 12px; line-height: 1.3; text-align: center;
  background: var(--white); color: var(--ink); padding: 5px 11px; border-radius: 999px;
}
.window[data-frame="haze"]   { --glass-a: var(--glass-haze-a);   --glass-b: var(--glass-haze-b); }
.window[data-frame="lagoon"] { --glass-a: var(--glass-lagoon-a); --glass-b: var(--glass-lagoon-b); }
.window[data-frame="sky"]    { --glass-a: var(--glass-sky-a);    --glass-b: var(--glass-sky-b); }
.window[data-frame="reef"]   { --glass-a: var(--glass-reef-a);   --glass-b: var(--glass-reef-b); }
.window--hero { --frame: var(--haze); --glass-a: var(--glass-hero-a); --glass-b: var(--glass-hero-b); }

/* ---------- layout ---------- */
main { display: flex; flex-direction: column; gap: var(--space-section); padding-block: 40px var(--space-section); }
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.lede { font-size: 19px; line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.muted { color: var(--deep-tail); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(52px, 7.4vw, 104px); font-weight: 700; letter-spacing: -.045em; line-height: .92; }
.hero .lede { color: var(--deep-tail); max-width: 34ch; font-size: clamp(18px, 1.6vw, 20px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .window { justify-self: center; width: min(100%, 400px); }

/* ---------- three windows (teasers) ---------- */
.teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.teaser {
  background: var(--frame); border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink);
  transition: transform .2s ease;
}
.teaser:hover { transform: translateY(-4px); }
.teaser__photo {
  aspect-ratio: 4 / 3; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center; font-size: 13px;
  background: repeating-linear-gradient(135deg, var(--glass-a) 0 12px, var(--glass-b) 12px 24px);
}
.teaser[data-frame="haze"]   .teaser__photo { --glass-a: var(--glass-haze-a);   --glass-b: var(--glass-haze-b); color: var(--deep-tail); }
.teaser[data-frame="lagoon"] .teaser__photo { --glass-a: var(--glass-lagoon-a); --glass-b: var(--glass-lagoon-b); }
.teaser[data-frame="sky"]    .teaser__photo { --glass-a: var(--glass-sky-a);    --glass-b: var(--glass-sky-b); }
.teaser[data-frame="reef"]   .teaser__photo { --glass-a: var(--glass-reef-a);   --glass-b: var(--glass-reef-b); }
.teaser__kicker { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.teaser__title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.teaser__link { font-weight: 600; font-size: 15px; margin-top: auto; }

/* ---------- stories ---------- */
.stories-section { display: flex; flex-direction: column; gap: 48px; }
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 48px 28px; }
.story { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.story .window { width: min(100%, 250px); margin-bottom: 8px; }
.story__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; align-items: center; font-size: 14px; color: var(--deep-tail); }
.story h3 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.story__dek { font-size: 16px; color: var(--deep-tail); max-width: 32ch; }
.story__byline { font-size: 14px; font-weight: 500; margin-top: auto; }
.story .arrow-link { margin-top: 4px; }

.pitch {
  background: var(--haze); border-radius: var(--radius-panel); padding: clamp(24px, 4vw, 44px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 48px; align-items: start;
}
.pitch h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.pitch__copy { display: flex; flex-direction: column; gap: 14px; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input {
  font: 400 16px/1.3 var(--font-sans); color: var(--ink); background: var(--white);
  border: 2px solid var(--ink); border-radius: 999px; padding: 12px 18px; width: 100%;
}
.form .btn { justify-self: start; }
.form-status { grid-column: 1 / -1; font-size: 15px; font-weight: 500; }

/* ---------- people (advisor + points) ---------- */
.person-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 72px; align-items: center; }
.person-section .window { justify-self: center; width: min(100%, 380px); }
.person-copy { display: flex; flex-direction: column; gap: 20px; }
.person-copy h2 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.person { display: flex; flex-direction: column; gap: 2px; }
.person__name { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.person__role { font-size: 15px; color: var(--deep-tail); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ink); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.facts div { background: var(--mist); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-tail); }
.facts dd { font-weight: 600; }

.seen { font-size: 14px; color: var(--deep-tail); line-height: 1.7; }
.seen b { color: var(--ink); font-weight: 600; }
.articles { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.articles li { border-bottom: 1.5px solid var(--haze); }
.articles a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 2px; text-decoration: none; align-items: center; }
.articles a:hover .headline { text-decoration: underline; text-underline-offset: 4px; }
.outlet { grid-column: 1; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-tail); }
.headline { grid-column: 1; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.articles .go { grid-column: 2; grid-row: 1 / span 2; font-weight: 600; }

/* ---------- newsletter ---------- */
.postcards {
  background: var(--ink); color: var(--white); border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between;
}
.postcards h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; max-width: 18ch; }
.postcards p { color: var(--haze); font-size: 15px; margin-top: 8px; }
.postcards > div { flex: 1 1 320px; }
.postcards form { flex: 0 1 440px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.postcards input {
  font: 400 16px/1.3 var(--font-sans); color: var(--ink); background: var(--white);
  border: 2px solid var(--white); border-radius: 999px; padding: 13px 20px; flex: 1 1 220px; min-width: 0;
}
.postcards .btn { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.postcards .form-status { flex-basis: 100%; color: var(--haze); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--haze); }
.site-footer .wrap { padding-block: 44px 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand p { color: var(--deep-tail); font-size: 15px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col h2 { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--deep-tail); }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-col .soon { color: var(--deep-tail); }
.fineprint { grid-column: 1 / -1; font-size: 13px; color: var(--deep-tail); border-top: 1px solid var(--haze); padding-top: 20px; }

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  :root { --header-h: 116px; }
  body { font-size: 16px; }
  .site-header .wrap { grid-template-columns: 1fr auto; grid-template-areas: "brand cta" "nav nav"; padding-block: 12px; gap: 10px 16px; }
  .site-nav { justify-content: flex-start; gap: 6px 22px; }
  .site-nav a { font-size: 15px; }
  .wordmark { font-size: 20px; }
  .header-cta .btn { padding: 10px 16px; font-size: 14px; }
  main { padding-top: 24px; }
  .hero { gap: 40px; }
  .person-section .window { width: min(100%, 300px); }
  #points .window { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- photos (seen through the glass, below the blind) ---------- */
.window__glass img {
  position: absolute; left: 0; right: 0; bottom: 0; top: 24%;
  width: 100%; height: 76%; object-fit: cover; display: block;
}
.window--rotate .window__glass > img { opacity: 0; transition: opacity 1.4s ease; }
.window--rotate .window__glass > img.is-active { opacity: 1; }
.teaser__photo { position: relative; overflow: hidden; }
.teaser__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================================ v2: subpages, stories, referral box */

.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.muted { color: var(--deep-tail); }

/* ---------- subpage heads ---------- */
.page-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 72px; align-items: center; }
.page-hero .window { justify-self: center; width: min(100%, 360px); }
.page-hero h1, .page-head h1 { font-size: clamp(42px, 5.6vw, 76px); font-weight: 700; letter-spacing: -.045em; line-height: .95; }
.page-head { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.page-head .filters { margin-top: 8px; }

/* ---------- content blocks ---------- */
.block { display: flex; flex-direction: column; gap: 24px; }
.block > h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.chips--large li { font-size: 16px; padding: 8px 18px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; background: var(--mist); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.steps li::before {
  content: counter(step); width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink);
  display: grid; place-items: center; font: 700 16px/1 var(--font-display);
}
.steps h3, .earn h3, .voice h3, .article-group h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.steps p, .earn p, .voice p { color: var(--deep-tail); font-size: 16px; }

.earn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.earn > div { border: 1.5px solid var(--ink); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
#how-we-earn { scroll-margin-top: calc(var(--header-h) + 16px); }

.rules { display: flex; flex-direction: column; gap: 10px; max-width: 70ch; }
.rules li { padding-left: 26px; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 16px; border-radius: 42% / 30%; border: 2px solid var(--ink); background: var(--haze); }

.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.voice { background: var(--frame); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); transition: transform .2s ease; }
.voice:hover { transform: translateY(-4px); }
.voice .label, .voice p { color: var(--ink); }

.cta-band { background: var(--lagoon); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.cta-band--sky { background: var(--sky); }
.cta-band h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; max-width: 22ch; }

.article-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px 40px; }
.article-group { display: flex; flex-direction: column; gap: 12px; }

/* ---------- story cards ---------- */
.story__window { display: flex; justify-content: center; width: 100%; text-decoration: none; }
.story h3 a { text-decoration: none; }
.story h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.story__links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.story__meta--left { justify-content: flex-start; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { font: 500 15px/1.2 var(--font-sans); color: var(--ink); background: var(--white); border: 1.5px solid var(--ink); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.pitch--callout { align-items: center; }
.pitch__cta { justify-self: start; }

/* ---------- story page ---------- */
.story-page { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.article-head { display: flex; flex-direction: column; gap: 16px; }
.crumbs { font-size: 14px; color: var(--deep-tail); }
.crumbs a { color: inherit; }
.dek { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; color: var(--deep-tail); max-width: 42ch; }
.byline { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; font-size: 15px; font-weight: 500; }

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 20px; font-size: 19px; line-height: 1.65; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin-top: 12px; }
.prose blockquote { margin: 8px 0; padding-left: 22px; border-left: 3px solid var(--lagoon); }
.prose blockquote p { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.sample-note { font-size: 15px; line-height: 1.5; color: var(--deep-tail); border: 1.5px dashed var(--deep-tail); border-radius: 14px; padding: 10px 14px; }

/* ---------- mini window (avatars) ---------- */
.mini-window { position: relative; flex: none; width: 54px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 42% / 30%; border: 2px solid var(--ink); background: var(--white); }
.mini-window::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 24%; background: var(--white); border-bottom: 2px solid var(--ink); z-index: 1; }
.mini-window img { position: absolute; left: 0; right: 0; bottom: 0; top: 24%; width: 100%; height: 76%; object-fit: cover; }

/* ---------- Book the same trip: Jon first, then labelled affiliate links ---------- */
.book {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  border: var(--line) solid var(--ink); border-radius: var(--radius-panel); overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.book__jon, .book__diy { padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.book__jon { background: var(--lagoon); }
.book__jon .label { color: var(--ink); }
.book__jon h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.book__jon .who { display: flex; gap: 14px; align-items: center; }
.book__jon .who p { font-size: 14px; }
.book__diy { background: var(--white); }
.book--solo { grid-template-columns: minmax(0, 1fr); }
.partners { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.partners li { border-bottom: 1.5px solid var(--haze); }
.partners a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 2px; text-decoration: none; align-items: center; }
.partners .partner { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-tail); }
.partners .what { grid-column: 1; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.partners .aff { grid-column: 2; grid-row: 1; justify-self: end; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--deep-tail); border: 1.5px dashed var(--deep-tail); border-radius: 999px; padding: 2px 8px; }
.partners .go { grid-column: 2; grid-row: 2; justify-self: end; font-weight: 600; }
.partners a:hover .what { text-decoration: underline; text-underline-offset: 4px; }
.disclosure { font-size: 14px; line-height: 1.5; color: var(--deep-tail); }
.disclosure a { color: var(--ink); }

/* ---------- author ---------- */
.author { display: flex; gap: 16px; align-items: center; max-width: 68ch; padding-block: 20px; border-top: 1.5px solid var(--haze); border-bottom: 1.5px solid var(--haze); }
.author svg { flex: none; }
.author__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.author__bio { font-size: 15px; color: var(--deep-tail); }
.author__bio a { color: var(--ink); font-weight: 600; }

/* ================================================================ v3: legal pages, credit-card links */

.legal { max-width: 72ch; display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.6; }
.legal h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 16px; }
.legal ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
.legal__date { font-size: 14px; color: var(--deep-tail); }
.facts--legal { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
.facts--legal div { background: none; border-radius: 0; border-bottom: 1.5px solid var(--haze); padding: 14px 2px; display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 4px 16px; }
.facts--legal dd { font-weight: 500; }
@media (max-width: 560px) { .facts--legal div { grid-template-columns: minmax(0, 1fr); } }

.card-disclosure { max-width: 80ch; font-size: 15px; line-height: 1.55; color: var(--deep-tail); border-left: 3px solid var(--sky); padding-left: 16px; }
.card-disclosure b, .card-disclosure a { color: var(--ink); }
.cards { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.card-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 18px 2px; border-bottom: 1.5px solid var(--haze); }
.card-row::before { content: ""; width: 58px; height: 38px; border-radius: 7px; border: 2px solid var(--ink); background: linear-gradient(135deg, var(--sky) 0 58%, var(--haze) 58%); }
.card-row__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-row__offer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; }
.card-row .aff { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--deep-tail); border: 1.5px dashed var(--deep-tail); border-radius: 999px; padding: 2px 8px; }
.card-row .terms { font-size: 14px; color: var(--ink); }
.offer-pending { font-size: 13px; color: var(--deep-tail); border: 1.5px dashed var(--deep-tail); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .card-row { grid-template-columns: auto minmax(0, 1fr); }
  .card-row__offer { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ================================================================ v4: curated experiences (Jon) */

:root { --sea: #E1EDEF; }   /* pale Sky: the water behind a route map */

@media (max-width: 760px) { .site-nav { gap: 6px 16px; } }

/* route map seen through the window */
.window--map .window__glass { background: var(--sea); }
.window__glass > .route { position: absolute; left: 0; right: 0; bottom: 0; top: 24%; width: 100%; height: 76%; }
.route text { font: 600 20px var(--font-sans); fill: var(--ink); }
.page-hero .window--big { width: min(100%, 420px); }

.type-chip { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--lagoon); color: var(--ink); }

/* experience cards: one wide row per trip, so the list grows cleanly */
.xp-list { display: flex; flex-direction: column; gap: 16px; }
.xp-card { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: clamp(18px, 2.4vw, 28px); border: 1.5px solid var(--ink); border-radius: var(--radius-card); }
.xp-card__window { display: flex; justify-content: center; text-decoration: none; }
.xp-card__window .window { width: min(100%, 240px); }
.xp-card__body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.xp-card h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.xp-card h3 a { text-decoration: none; }
.xp-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.xp-card__price { font-weight: 600; }
@media (max-width: 640px) { .xp-card { grid-template-columns: minmax(0, 1fr); } }
.xp-more { border: 1.5px dashed var(--deep-tail); border-radius: var(--radius-card); padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; color: var(--deep-tail); }
.xp-more__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.xp-more .arrow-link { color: var(--ink); }

/* experience page */
.xp-page { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.xp-price { display: flex; flex-direction: column; gap: 4px; }
.xp-price__text { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.xp-price__note { font-size: 13px; line-height: 1.45; color: var(--deep-tail); max-width: 52ch; }
.facts--xp { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.xp-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px 56px; align-items: start; }
.highlights { display: flex; flex-direction: column; gap: 10px; }
.highlights li { position: relative; padding: 14px 16px 14px 44px; background: var(--mist); border-radius: 16px; font-weight: 500; }
.highlights li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 13px; height: 17px; border-radius: 42% / 30%; border: 2px solid var(--ink); background: var(--lagoon); }

.timeline { display: flex; flex-direction: column; margin-left: 8px; border-left: 2.5px dotted var(--ink); max-width: 720px; }
.timeline li { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 16px; padding: 0 0 22px 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -9.5px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--white); }
.timeline li:first-child::before, .timeline li:last-child::before { background: var(--lagoon); }
.timeline__day { grid-row: 1 / span 2; padding-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-tail); }
.timeline__place { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.timeline__detail { font-size: 15px; color: var(--deep-tail); }
.timeline__sea .timeline__place { color: var(--deep-tail); }
.timeline__sea::before { border-style: dashed; }

.ticks { display: flex; flex-direction: column; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; font-size: 16px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ink); }

.xp-book {
  background: var(--lagoon); border-radius: var(--radius-panel); padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 48px; align-items: center;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.xp-book .label, .xp-book .disclosure, .xp-book .xp-price__note, .xp-book .arrow-link, .xp-book .disclosure a { color: var(--ink); }
.xp-book h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.xp-book__copy, .xp-book__actions { display: flex; flex-direction: column; gap: 14px; }
.source-note { font-size: 13px; line-height: 1.5; color: var(--deep-tail); max-width: 80ch; }

/* ================================================================ v5: destination window beside the itinerary */

.days-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 40px 64px; align-items: start; }
.xp-gallery { position: sticky; top: calc(var(--header-h) + 24px); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.xp-gallery .window { width: min(100%, 380px); }
.xp-gallery__caption { justify-content: center; min-height: 1.4em; }
.timeline li.is-current::before { background: var(--lagoon); box-shadow: 0 0 0 4px var(--sea); }
.timeline li.is-current .timeline__place { text-decoration: underline; text-decoration-color: var(--lagoon); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (max-width: 900px) {
  .days-grid { grid-template-columns: minmax(0, 1fr); }
  .xp-gallery { position: static; }
  .xp-gallery .window { width: min(100%, 320px); }
}

/* ================================================================ v7: block heads with a label + lede (advisor: curated overview) */
.block-head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.block-head h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }

/* ================================================================ v8: co-brand for curated experiences
   YWS keeps structure, type, header/footer, ink text and Jon's "Curated with Jon".
   The partner's colours (inline --partner-* vars from content/experiences.json) go ONLY into these slots:
   window frames, the type chip, the booking button, the booking band, highlight + itinerary accents, route end dots. */

.cobrand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cobrand__yws { display: inline-flex; align-items: center; gap: 8px; }
.cobrand__yws .wordmark { font-size: 20px; }
.cobrand__x { font: 400 22px/1 var(--font-sans); color: var(--deep-tail); }
.cobrand__name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--partner, var(--ink)); }

.xp-page--cobrand .window[data-frame] { --frame: var(--partner); }
.xp-page--cobrand .type-chip { background: var(--partner); color: var(--partner-ink); }
.xp-page--cobrand .route__end { fill: var(--partner); }
.btn--partner { background: var(--partner); color: var(--partner-ink); border-color: var(--partner); }

.xp-page--cobrand .facts div, .xp-page--cobrand .highlights li { background: var(--partner-surface); }
.xp-page--cobrand .highlights li::before { background: var(--partner); }
.xp-page--cobrand .timeline li:first-child::before, .xp-page--cobrand .timeline li:last-child::before,
.xp-page--cobrand .timeline li.is-current::before { background: var(--partner); }
.xp-page--cobrand .timeline li.is-current::before { box-shadow: 0 0 0 4px var(--partner-surface); }
.xp-page--cobrand .timeline li.is-current .timeline__place { text-decoration-color: var(--partner); }
.xp-page--cobrand .xp-gallery__caption::before { background: var(--partner); }

.xp-page--cobrand .xp-book { background: var(--partner-deep); color: var(--partner-deep-ink); }
.xp-page--cobrand .xp-book .label { color: var(--partner-soft); }
.xp-page--cobrand .xp-book .disclosure, .xp-page--cobrand .xp-book .disclosure a,
.xp-page--cobrand .xp-book .xp-price__note, .xp-page--cobrand .xp-book .arrow-link { color: var(--partner-deep-ink); }
.xp-page--cobrand .xp-book .btn--partner { border-color: var(--partner-deep-ink); }

/* v9: co-brand lockup never strands the ×; notes read as one block */
.cobrand__with { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.xp-notes { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 420px) {
  .cobrand { gap: 6px 10px; }
  .cobrand__yws .wordmark { font-size: 18px; }
  .cobrand__name { font-size: 18px; }
  .cobrand__with { gap: 8px; }
}

/* v10: a supplied partner logo sits in the Included card; the lockup keeps the partner's name */
.earn > .xp-included { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
.xp-included__text { display: flex; flex-direction: column; gap: 8px; }
.xp-included__logo { height: var(--partner-logo-h, 96px); width: auto; flex: none; align-self: center; }
@media (max-width: 420px) {
  .xp-included__logo { height: calc(var(--partner-logo-h, 96px) * .6); }
}

/* v11: photos, lists and the route inside a story */
.story-photo { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.story-photo img { display: block; width: 100%; height: auto; border-radius: 14px; }
.story-photo--tall { max-width: 440px; }
.story-photo figcaption { font-size: 14px; line-height: 1.45; color: var(--deep-tail); }
.prose ul { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; list-style: disc; }
.prose .timeline { margin-top: 6px; font-size: 17px; line-height: 1.5; }
.prose .timeline li { grid-template-columns: 100px minmax(0, 1fr); }
.timeline li.timeline__circle::before { background: var(--lagoon); box-shadow: 0 0 0 4px var(--sea); }

/* v12: photo grids inside a story (pairs, and small shots in a row of four) */
.story-grid { display: grid; gap: 12px; margin: 6px 0; }
.story-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-grid .story-photo { margin: 0; }
.story-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.story-grid__caption { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--deep-tail); }
.story-photo--small { max-width: 480px; }
@media (max-width: 640px) { .story-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v13: story blocks (Claudio, 2026-09-24: "make it better with blocks") — photos sit beside their text or in a full-width row; loose text keeps the 68ch column */
.prose.story-body { max-width: none; }
.story-body > * { max-width: 68ch; }
.story-body > .sb, .story-body > .sb-wide, .story-body > .sb-cards, .story-body > .sb-panel { max-width: none; margin-block: clamp(8px, 2vw, 24px); }
.sb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sb--narrow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sb--narrow.sb--flip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.sb--flip > .sb__media { order: -1; }
.sb__text { display: flex; flex-direction: column; gap: 16px; }
.story-body .sb h2, .story-body .sb-cards h2, .story-body .sb-panel h2 { margin-top: 0; }
.sb .story-photo, .sb .story-grid { margin: 0; }
.story-grid--2l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-grid--2l img { aspect-ratio: 3 / 2; }
.story-grid--lp { grid-template-columns: minmax(0, 16fr) minmax(0, 9fr); }
.story-grid--pl { grid-template-columns: minmax(0, 9fr) minmax(0, 16fr); }
.story-grid--lp > :first-child img, .story-grid--pl > :last-child img { aspect-ratio: 4 / 3; }
.sb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.sb-cards > * { background: var(--mist); border-radius: var(--radius-card); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.story-body .sb-cards h2 { font-size: clamp(22px, 2vw, 26px); }
.sb-cards p { font-size: 17px; line-height: 1.6; }
.sb-panel { background: var(--mist); border-radius: var(--radius-panel); padding: clamp(24px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px clamp(24px, 4vw, 56px); align-items: start; }
.sb-panel__head { display: flex; flex-direction: column; gap: 16px; }
.story-body .sb-panel ul { list-style: none; padding: 0; gap: 0; border-top: 1.5px solid var(--ink); }
.sb-panel li { padding: 12px 2px; border-bottom: 1.5px solid var(--haze); font-size: 17px; line-height: 1.55; }
.sb-tip { background: var(--white); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.55; }
@media (max-width: 760px) {
  .sb, .sb--narrow, .sb--narrow.sb--flip, .sb-panel { grid-template-columns: minmax(0, 1fr); }
  .sb--flip > .sb__media { order: 0; }
}
@media (max-width: 560px) {
  .story-grid--2l, .story-grid--lp, .story-grid--pl { grid-template-columns: minmax(0, 1fr); }
}
/* v13b: a single portrait photo in a narrow block stays ≤460px wide, so the text beside it can keep up */
.sb--narrow > .story-photo.sb__media { width: 100%; max-width: 460px; justify-self: end; }
.sb--narrow.sb--flip > .story-photo.sb__media { justify-self: start; }
@media (max-width: 760px) { .sb--narrow > .story-photo.sb__media { justify-self: start; } }

/* v14: a story's own route map (stories.json "route" → {{route-map}}): the window sits in a block beside the timeline */
.sb__media > .window { width: min(100%, 420px); justify-self: center; }
.story-body .route text { font: 600 17px var(--font-sans); }
.sb--route { align-items: start; }
@media (max-width: 760px) { .sb__media > .window { justify-self: start; max-width: 360px; } }

/* v15: thinner frames on phones (Claudio, 2026-09-24: the 7% frame took too much of the photo on small screens).
   One rule for every window, whatever its width: the frame ring drops from 7% to 4% and the lines from 2.5px to 2px. */
@media (max-width: 760px) {
  .window { padding: 4%; --line: 2px; }
}

/* v17/v18: the home hero window (Claudio, 2026-09-24: "switch to sky, make it moving gradient … moving across the frame,
   always showing all colors, not changing colors as a total"). The frame is the teal scale Lagoon → Reef → Sky as a repeating
   band that slides across the ring; the tile holds two cycles and the loop moves exactly one, so it never jumps. The glass
   keeps the Sky stripes. Still for people who asked for less motion. One photo behind it (the mountain) — the gradient is the movement. */
.window--hero {
  --frame: var(--sky);
  background-image: linear-gradient(135deg, var(--lagoon) 0%, var(--reef) 12.5%, var(--sky) 25%, var(--reef) 37.5%, var(--lagoon) 50%,
                                             var(--reef) 62.5%, var(--sky) 75%, var(--reef) 87.5%, var(--lagoon) 100%);
  background-size: 200% 200%; background-position: 0% 0%;
  animation: hero-frame 18s linear infinite;
}
@keyframes hero-frame {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) { .window--hero { animation: none; } }

/* ---------- cookie choice ---------- */
/* Shape follows DudesNude's cookie-banner (fixed full-width bar, copy left, Accept/Reject right,
   fades in); colours are YWS's own tokens, because the design system here is the house. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink);
  color: var(--white); animation: consent-in .25s ease-out both; }
.consent[hidden] { display: none; }
.consent .wrap { display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; flex-wrap: wrap; padding-block: 20px; }
.consent p { margin: 0; flex: 1 1 420px; font-size: 15px; line-height: 1.55; color: var(--haze); }
.consent p a { color: var(--white); }
.consent__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.consent .btn--ink { background: var(--white); color: var(--ink); border-color: var(--white); }
.consent .btn--outline { border-color: var(--haze); color: var(--white); }
.consent .btn--outline:hover { background: rgba(255,255,255,.12); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-align: left; }
.linklike:hover { text-decoration: underline; }
@keyframes consent-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
@media (max-width: 560px) { .consent .wrap { justify-content: stretch; }
  .consent__actions { width: 100%; } .consent__actions .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- Book it yourself (v34, 2026-09-26) ---------- */
[data-frame="white"] { --frame: var(--white); }

/* who should book what: Jon's card in Lagoon (the Advisor colour), the do-it-yourself card in Haze */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.split__card { border-radius: var(--radius-panel); padding: clamp(24px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.split__card--jon { background: var(--lagoon); }
.split__card--diy { background: var(--haze); }
.split__card .label { color: var(--ink); }
.split__card--diy > .arrow-link { margin-top: auto; }
.reasons { display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.reasons li { padding: 16px 2px; border-bottom: 1.5px solid rgba(15, 16, 33, .22); display: flex; flex-direction: column; gap: 4px; }
.reasons h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.reasons p { font-size: 16px; line-height: 1.55; }
.reasons a { font-weight: 600; }

/* do's and don'ts: stage | do | don't — an open window for do, the blind pulled down for don't */
.dd { display: flex; flex-direction: column; border-top: var(--line) solid var(--ink); }
.dd__head, .dd__stage { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.3fr) minmax(0, 2.3fr); gap: 14px clamp(20px, 3vw, 44px); }
.dd__head { padding-block: 14px; border-bottom: 1.5px solid var(--haze); }
.dd__key, .dd__list::before { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dd__stage { padding-block: 26px; border-bottom: 1.5px solid var(--haze); }
.dd__when { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.dd__list { display: flex; flex-direction: column; gap: 16px; }
.dd__list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: var(--deep-tail); }
.dd__list b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 2px; }
.dd__key::before, .dd__list li::before { content: ""; flex: none; width: 14px; height: 19px; border-radius: 42% / 30%; border: 2px solid var(--ink); }
.dd__list li::before { position: absolute; left: 0; top: .2em; }
.dd__key--do::before, .dd__list--do li::before { background: linear-gradient(var(--white) 0 26%, var(--ink) 26% calc(26% + 2px), var(--lagoon) calc(26% + 2px)); }
.dd__key--dont::before, .dd__list--dont li::before { background: linear-gradient(var(--white) 0 74%, var(--ink) 74% calc(74% + 2px), var(--white) calc(74% + 2px)); }
.dd__src { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1.5px solid var(--haze); border-radius: 999px; padding: 1px 9px 1px 7px; white-space: nowrap; vertical-align: 1px; }
.dd__src::before { content: ""; width: 8px; height: 11px; border-radius: 42% / 30%; border: 1.5px solid var(--ink); background: var(--haze); }
.dd__src:hover { border-color: var(--ink); }
.dd__list::before { display: none; }
@media (max-width: 760px) {
  .dd__head { display: none; }
  .dd__stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dd__list::before { display: inline-flex; color: var(--deep-tail); }
  .dd__list--do::before { content: "Do"; }
  .dd__list--dont::before { content: "Don’t"; }
  :lang(es) .dd__list--do::before { content: "Qué hacer"; }
  :lang(es) .dd__list--dont::before { content: "Qué evitar"; }
}

/* where to book it yourself: the story box's partner rows, two groups side by side */
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.shelf__group { display: flex; flex-direction: column; gap: 14px; }

.cta-band__copy { display: flex; flex-direction: column; gap: 8px; }
.cta-band__copy p { font-size: 17px; max-width: 46ch; }

/* story box v2: the trip itself, then the extras anyone can add, then the guide */
.book__group { display: flex; flex-direction: column; gap: 10px; }
.book__hint { font-size: 15px; line-height: 1.5; color: var(--deep-tail); }

/* Language switch (v35, 2026-10-07): EN / ES beside "Plan my trip". On narrow phones only the other
   language shows, so the header keeps one row (brand · switch · button). */
.header-cta { display: flex; align-items: center; gap: 16px; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.lang-switch a { text-decoration: none; color: var(--deep-tail); padding-block: 4px; border-bottom: 2px solid transparent; }
.lang-switch a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lang-switch a.is-current { color: var(--ink); border-bottom-color: var(--ink); }
.lang-switch span { color: var(--haze); }
@media (max-width: 760px) { .header-cta { gap: 12px; } .lang-switch { font-size: 13px; } }
@media (max-width: 420px) { .lang-switch .is-current, .lang-switch span { display: none; } }
/* Phones ≤ 420 px: with the switch in the top row, brand + switch + button and the four nav items each keep one
   line in both languages (the Spanish labels are longer). Measured 2026-10-07 at 360 and 375 px: header 104 px. */
@media (max-width: 420px) {
  .wordmark { font-size: 18px; }
  .site-header .wrap { column-gap: 10px; }
  .header-cta { gap: 8px; }
  .header-cta .btn { padding: 9px 12px; font-size: 13px; white-space: nowrap; }
  .site-nav { gap: 6px 14px; }
  .site-nav a { font-size: 14px; }
}
/* Tablets 761–1100 px: the compact switch (only the other language) and slightly tighter gaps keep the nav on
   one line from ~860 px in both languages, as the English had before the switch (measured 2026-10-07). */
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header .wrap { column-gap: 24px; }
  .site-nav { gap: 8px 22px; }
  .header-cta { gap: 14px; }
  .lang-switch .is-current, .lang-switch span { display: none; }
}
/* Lounges and travel money on /book-it-yourself/ (v36, 2026-10-07): its own segment under the two shelf groups,
   the two rows side by side on the same columns as the groups above; one column on phones. */
.shelf__group--wide { grid-column: 1 / -1; }
.partners--pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); column-gap: clamp(24px, 4vw, 56px); }
/* "Plan it with Jon" in the /book-it-yourself/ hero (v37, 2026-10-07): the Blush accent as a moving gradient — Claudio:
   "the plan with Jon button should be the gradient moving pink to get more attention with the accent color but a bit
   more dynamic". The one exception to the 2026-09-24 "no Blush on a button" ruling. Same seamless trick as the hero
   window (two cycles over a 200 % background, one cycle per loop), faster; ink text ≈ 11:1 on the deepest pink. */
.btn--jon {
  color: var(--ink);
  background-image: linear-gradient(100deg, var(--blush) 0%, #F2B3D6 25%, var(--blush) 50%, #F2B3D6 75%, var(--blush) 100%);
  background-size: 200% 100%; background-position: 0% 50%;
  animation: jon-pink 6s linear infinite;
}
@keyframes jon-pink { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .btn--jon { animation: none; } }