/* ============================================================
   FLYTE — SUBPAGE PRIMITIVES
   Extends assets/css/styles.css (the "Departures" system) with the
   pieces only the subpages need: page headers, content stops,
   the comparison table, legal documents and the deletion form.

   Loaded AFTER styles.css, and only by the subpages, so the
   homepage keeps its lean critical CSS. Every value here comes
   from a token defined in styles.css — no new palette.
   ============================================================ */

/* Two additions to the palette, both for contrast reasons. The subpages use
   these surfaces for sustained reading rather than for short captions, so the
   secondary-text and success values the homepage uses do not clear WCAG AA
   here. Measured against #FFFFFF:
     --mint (inherited) 2.30:1  ✗   --ok  5.35:1  ✓
   Same hue family, just darker. --ink-65/-70 live in styles.css beside the
   other ink tokens, because the shared footer needs them too. */
:root {
  --ok: #1F7A45;
}

/* Visually hidden, still read by assistive tech — used for the table
   caption and the empty corner header cell, which need names. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ PAGE HEAD ============ */
/* The subpage answer to the hero: same night sky and mono kicker,
   but no split-flap board — that belongs to the homepage alone.

   The sky is lerped by scroll between zone MIDPOINTS, so a short
   opening zone lets the next (light) zone win the top of a tall
   viewport — which would leave this paper-coloured text on a paper
   sky. .zone-head gives the night zone enough height to hold the
   fold the way the homepage hero does, and the [data-tone] rules
   below are the belt-and-braces: if the sky ever does go light
   behind this header, the type follows it to ink. */

.zone-head { min-height: 56svh; display: flex; align-items: center; }

.pagehead {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 168px 20px 96px;
}
.pagehead .sec-label { margin-bottom: 22px; }
.pagehead h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1.03;
  letter-spacing: -.03em;
  color: var(--paper);
  max-width: 15ch;
}
.pagehead h1 em { font-style: normal; color: var(--coral-peach); }
.pagehead .lead {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--paper-60);
  max-width: 58ch;
  margin-top: 26px;
}
.pagehead .updated {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .24em;
  color: var(--paper-40);
  margin-top: 30px;
  text-transform: uppercase;
}

/* Sky went light behind the header — follow it, or the title vanishes. */
body[data-tone="light"] .pagehead h1 { color: var(--ink); }
body[data-tone="light"] .pagehead h1 em { color: var(--coral); }
body[data-tone="light"] .pagehead .lead { color: var(--ink-65); }
body[data-tone="light"] .pagehead .updated { color: var(--ink-65); }
body[data-tone="light"] .pagehead .sec-label.light { color: var(--ink-65); }

/* Same exposure on the closing CTA, which sits on the sunrise azure. */
body[data-tone="light"] .close-cta h2 { color: var(--ink); }
body[data-tone="light"] .close-cta h2 em { color: var(--gold-deep); }
body[data-tone="light"] .close-cta > .inner > p { color: var(--ink-65); }
body[data-tone="light"] .close-cta .sec-label.light { color: var(--ink-65); }
body[data-tone="light"] .close-cta .hero-micro { color: var(--ink-65); }

/* ============ STOPS — alternating content rows ============ */

.stops { max-width: 1160px; margin: 0 auto; padding: 40px 20px 130px; display: flex; flex-direction: column; gap: 24px; }
.stop {
  background: var(--card);
  border: .5px solid var(--hair);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 24px 50px -30px rgba(20, 24, 40, .28);
}
.stop-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.stop.rev .stop-inner > .stop-copy { order: 2; }
.stop.rev .stop-inner > .stop-vis { order: 1; }

.stop-num {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.stop-num b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  flex: none;
}
.stop-num span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--coral-deep);
  text-transform: uppercase;
}
.stop-copy h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
}
.stop-copy h2 em { font-style: normal; color: var(--coral); }
.stop-copy > p { font-size: 15.5px; color: var(--ink-65); margin-top: 16px; max-width: 46ch; }
.stop-list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.stop-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--ink-65);
}
.stop-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 1.5px;
  background: var(--coral);
}
.stop-vis { min-width: 0; }

/* ============ VISUAL — travel-style spectrum ============ */

.spec { display: flex; flex-direction: column; gap: 20px; }
.spec-row {
  display: grid;
  grid-template-columns: minmax(58px, auto) 1fr minmax(58px, auto);
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--ink-65);
  text-transform: uppercase;
}
.spec-row .r { text-align: right; }
.spec-track {
  position: relative;
  height: 3px;
  background: var(--ink-8);
  border-radius: 999px;
}
.spec-knob {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink-55);
  transform: translate(-50%, -50%);
}
.spec-row.on { color: var(--ink-82); }
.spec-row.on .spec-knob { border-color: var(--coral); background: var(--coral); }

/* ============ VISUAL — crew grid ============ */

.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.crew-p {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--canvas2);
}
.crew-p.match { box-shadow: 0 0 0 2px var(--coral); }
.crew-p.match::after {
  content: "MATCH";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .14em;
  color: #fff;
  background: var(--coral);
  border-radius: 999px;
  padding: 3px 8px;
}

/* ============ VISUAL — group poll ============ */

.poll { display: flex; flex-direction: column; gap: 14px; }
.poll-p {
  display: grid;
  grid-template-columns: 84px 1fr 42px;
  align-items: center;
  gap: 12px;
}
.poll-p .label { font-size: 13px; font-weight: 500; color: var(--ink); }
.poll-p .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-65);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.poll-bar { height: 8px; background: var(--ink-8); border-radius: 999px; overflow: hidden; }
.poll-bar i { display: block; height: 100%; background: var(--coral); border-radius: 999px; }
.poll-p:first-child .poll-bar i { background: var(--ink); }

/* ============ VISUAL — mini departure board ============ */

.miniboard {
  border: .5px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.miniboard .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--paper-60);
  border-top: .5px solid rgba(255, 255, 255, .1);
}
.miniboard .row:first-child { border-top: 0; color: var(--paper); }
.miniboard .code { font-size: 20px; letter-spacing: .06em; color: var(--paper); }
.miniboard .ok { color: var(--mint); }

/* ============ VISUAL — destination postcards ============ */
/* Flat poster tones, matching the homepage swipe deck. Deliberately
   not photographs: the page must not hot-link a third-party image
   host, and no stock photo here is licensed for this use. */

.cards { position: relative; height: 320px; display: grid; place-items: center; }
.cards .pc {
  position: absolute;
  width: 46%;
  max-width: 180px;
  aspect-ratio: 3 / 4.2;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 50px -22px rgba(10, 10, 10, .4);
}
.cards .pc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A tint under the photo so the card never flashes white while it loads. */
  background: var(--canvas2);
}
.cards .pc figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.02em;
  color: #fff;
}
.cards .pc .pc-scrim {
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 10, .72));
}
/* The fan overlaps, so each outer card's label has to live in the sliver
   that stays visible — left card labels left, right card labels right.
   Offsets are wide enough that a long name like "Marrakech" still clears
   the card in front of it. */
.cards .pc-1 { transform: translateX(-60%) rotate(-8deg); z-index: 1; }
.cards .pc-2 { z-index: 3; }
.cards .pc-3 { transform: translateX(60%) rotate(8deg); z-index: 2; }
.cards .pc-3 figcaption { left: auto; right: 12px; }

/* ============ VISUAL — expense split ============ */

.split {
  border: .5px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  background: var(--canvas);
}
.split .total {
  padding: 22px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.split .total .v { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.02em; }
.split .total .v em { font-style: normal; color: var(--gold); }
.split .total .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; color: var(--paper-40); }
.split .line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 14px;
  color: var(--ink);
  border-top: .5px solid var(--hair);
}
.split .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--canvas2);
  flex: none;
}
.split .amt {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-65);
  font-variant-numeric: tabular-nums;
}

/* ============ VISUAL — trust cards ============ */

.trust { display: flex; flex-direction: column; gap: 12px; }
.trust .card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--canvas);
  border: .5px solid var(--hair);
  border-radius: 16px;
}
.trust .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--canvas2);
  flex: none;
}
.trust .name { font-size: 15px; font-weight: 600; color: var(--ink); }
.trust .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.trust .tags b {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-70);
  background: var(--ink-8);
  border-radius: 999px;
  padding: 4px 8px;
}

/* ============ COMPARISON TABLE ============ */

.cmp { max-width: 1160px; margin: 0 auto; padding: 20px 20px 140px; }
.cmp-scroll { overflow-x: auto; margin-top: 56px; -webkit-overflow-scrolling: touch; }
.cmp table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--card);
  border: .5px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
}
.cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: .5px solid var(--hair); }
.cmp thead th {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--ink-65);
  text-transform: uppercase;
}
.cmp thead th.fl { color: var(--coral); }
.cmp tbody td:first-child { font-size: 14.5px; color: var(--ink); }
.cmp tbody td { text-align: center; font-size: 15px; }
.cmp tbody td:first-child { text-align: left; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .y { color: var(--ok); font-weight: 600; }
.cmp .n { color: var(--ink-65); }
.cmp tbody td:nth-child(2) { background: rgba(36, 86, 224, .05); }

/* ============ LEGAL DOCUMENT ============ */
/* Clause numbering is real structure — these documents are cited by
   section — so the numbers live in a mono gutter rather than being
   decoration baked into the heading text. */

.doc-wrap { max-width: 1160px; margin: 0 auto; padding: 30px 20px 140px; }
.doc {
  background: var(--card);
  border: .5px solid var(--hair);
  border-radius: 24px;
  padding: clamp(30px, 5vw, 72px);
  box-shadow: 0 24px 50px -30px rgba(20, 24, 40, .28);
}
.doc section { padding-top: 38px; }
.doc section:first-child { padding-top: 0; }
.doc section + section { border-top: .5px solid var(--hair); margin-top: 38px; }
.doc h2 {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.doc h2 .cl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--coral-deep);
  flex: none;
  min-width: 34px;
  transform: translateY(-2px);
}
.doc p, .doc li { font-size: 15.5px; line-height: 1.72; color: var(--ink-82); max-width: 68ch; }
.doc p + p, .doc ul + p, .doc ol + p { margin-top: 14px; }
.doc ul, .doc ol { margin: 14px 0 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc li { padding-left: 4px; }
.doc li::marker { color: var(--ink-55); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--coral-deep); border-bottom: 1px solid var(--coral-peach); transition: border-color .2s; }
.doc a:hover { border-bottom-color: var(--coral); }

/* ============ FORM CARD (delete-account) ============ */

.formwrap { max-width: 760px; margin: 0 auto; padding: 30px 20px 140px; }
.formcard {
  background: var(--card);
  border: .5px solid var(--hair);
  border-radius: 24px;
  padding: clamp(30px, 5vw, 60px);
  box-shadow: 0 24px 50px -30px rgba(20, 24, 40, .28);
}
.formcard h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 34px 0 12px;
}
.formcard section:first-of-type h2:first-child { margin-top: 0; }
.formcard p, .formcard li { font-size: 15.5px; line-height: 1.7; color: var(--ink-82); max-width: 66ch; }
.formcard p + p, .formcard ul + p, .formcard ol + p { margin-top: 12px; }
.formcard ul, .formcard ol { margin: 12px 0 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.formcard strong { color: var(--ink); font-weight: 600; }
.formcard a { color: var(--coral-deep); border-bottom: 1px solid var(--coral-peach); }
.formcard a:hover { border-bottom-color: var(--coral); }

/* The irreversible-action notice. Ink rule, not a red panic box —
   the page is a legitimate destination, not an error state. */
.notice {
  border-left: 2px solid var(--cta);
  background: rgba(244, 87, 58, .05);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
  margin: 26px 0;
}
.notice p { font-size: 14.5px; max-width: none; }

.dform { margin-top: 30px; }
.dform label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-65);
  margin-bottom: 10px;
}
.drow { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.drow input[type="email"] {
  flex: 1;
  min-width: 220px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--canvas);
  border: .5px solid var(--ink-55);
  border-radius: 999px;
  padding: 15px 22px;
  outline: none;
  transition: border-color .25s, background .25s;
}
.drow input[type="email"]::placeholder { color: var(--ink-65); }
.drow input[type="email"]:focus { border-color: var(--coral); background: var(--card); }

.drow button, .btn-primary, .btn-ghost {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  border-radius: 999px;
  padding: 15px 26px;
  white-space: nowrap;
  text-align: center;
  transition: transform .15s var(--ease-out), filter .25s, border-color .25s, color .25s;
}
.drow button, .btn-primary {
  color: var(--cta-text);
  background: var(--cta);
  box-shadow: 0 12px 22px -6px rgba(var(--cta-glow), .5);
}
.btn-ghost {
  color: var(--ink-65);
  background: transparent;
  border: .5px solid var(--ink-55);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }
.drow button:hover, .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.drow button:active, .btn-primary:active, .btn-ghost:active { transform: scale(.97); }
.drow button[disabled], .btn-primary[disabled] { opacity: .55; pointer-events: none; }

/* ============ CENTRED CARD (unsubscribe) ============ */

.cardwrap { max-width: 560px; margin: 0 auto; padding: 30px 20px 140px; }
.formcard.center { text-align: center; }
.formcard.center p, .formcard.center ul { max-width: none; }
.formcard.center h2 { margin-top: 0; }
.pill-email {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-70);
  background: var(--canvas2);
  border-radius: 999px;
  padding: 10px 18px;
  margin-top: 20px;
}
.btnstack { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.state { display: none; }
.state.on { display: block; }

.backlink {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-65);
  transition: color .2s;
}
.backlink:hover { color: var(--coral); }
.backwrap { text-align: center; }

/* ============ CLOSING CTA ============ */

.close-cta { padding: 150px 20px 160px; text-align: center; }
.close-cta .inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.close-cta h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--paper);
}
.close-cta h2 em { font-style: normal; color: var(--em-on-arrival); }
.close-cta > .inner > p { font-size: clamp(15px, 1.6vw, 18px); color: rgba(251, 248, 242, .88); margin-top: 20px; }
.close-cta .waitlist { margin-left: auto; margin-right: auto; }
.close-cta .hero-micro { color: rgba(251, 248, 242, .72); }

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .stop-inner { grid-template-columns: 1fr; gap: 34px; }
  /* Copy always leads on narrow screens — a bare visual with no
     heading above it reads as an orphan. */
  .stop.rev .stop-inner > .stop-copy { order: 1; }
  .stop.rev .stop-inner > .stop-vis { order: 2; }
}

@media (max-width: 640px) {
  .pagehead { padding: 128px 20px 70px; }
  .stops, .cmp, .doc-wrap, .formwrap { padding-bottom: 96px; }
  .close-cta { padding: 110px 20px 120px; }
  .cards { height: 260px; }
  /* Narrower column — pull the fan in so it can't overflow the card. */
  .cards .pc-1 { transform: translateX(-48%) rotate(-8deg); }
  .cards .pc-3 { transform: translateX(48%) rotate(8deg); }
  .cards .pc figcaption { font-size: 13px; }
  .poll-p { grid-template-columns: 68px 1fr 38px; }
}