/* Fancy Flights landing page.
   Tokens follow the MVP spec, section 7.2. One type scale, two weights, no shadows, no gradients. */

:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --muted: #6B6B6B;
  --line: #E6E6E6;
  --quiet: #F5F5F5;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-56: 56px;
  --t-48: 48px;
  --t-40: 40px;
  --t-32: 32px;
  --t-24: 24px;
  --t-20: 20px;
  --t-17: 17px;
  --t-14: 14px;
  --t-13: 13px;
  --t-12: 12px;

  --r-control: 8px;
  --r-card: 12px;
  --r-chip: 4px;
  --grid: 1200px;
  --reading: 680px;
  --gutter: 20px;
  --section: 64px;
  --control: 52px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --section: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-17);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
strong { font-weight: 500; }
s { text-decoration-thickness: 1.5px; }

/* The display face: wordmark, headings, prices, buttons, chips. */
.wordmark, h1, h2, .steps h3, .deal-route, .row-route, .price strong, .price s, .price-save strong,
.leg-price, .deals td, .step-num, .join button, .chip, .eyebrow, .rotor-next {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 500;
}

.wrap {
  max-width: calc(var(--grid) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.visually-hidden, .trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Small type */
.eyebrow {
  font-size: var(--t-12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--ink);
  border-radius: var(--r-chip);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  vertical-align: middle;
}
.chip-ink { background: var(--ink); color: var(--paper); }
.chip-quiet { border-color: #C8C8C8; color: var(--muted); }
.fine { font-size: var(--t-13); font-style: italic; color: var(--muted); }

/* Header */
.head { padding-top: 24px; padding-bottom: 24px; }
.wordmark {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}

/* Hero */
.hero { padding-top: 24px; padding-bottom: var(--section); }
h1 {
  font-size: clamp(25px, 8vw, var(--t-48));
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.lede { margin-top: 20px; max-width: 30em; font-size: var(--t-20); line-height: 1.45; }

/* Sign-up form, used twice */
.join { margin-top: 32px; max-width: 520px; }
.join-intro { margin-bottom: 12px; font-weight: 500; }
.join-row { display: flex; flex-direction: column; gap: 10px; }
.join input[type="email"] {
  width: 100%;
  height: var(--control);
  padding: 0 16px;
  border: 1px solid #BDBDBD;
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.join input[type="email"]::placeholder { color: var(--muted); }
.join input[type="email"]:focus { outline: none; border-color: var(--ink); }
.join input[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.join button {
  height: var(--control);
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-14);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 150ms ease-out;
}
.join button:hover { opacity: 0.8; }
.join button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.join button:disabled { opacity: 0.5; cursor: default; }
.join-note { margin-top: 12px; font-size: var(--t-13); font-style: italic; color: var(--muted); }
.join.is-error .join-note { font-style: normal; font-size: var(--t-14); font-weight: 500; color: var(--ink); }
.join.is-done .join-note { margin-top: 0; font-style: normal; font-size: var(--t-20); font-weight: 500; color: var(--ink); }

/* Rotating deal card */
.rotor {
  margin-top: 48px;
  padding: 20px;
  background: var(--quiet);
  border-radius: var(--r-card);
}
.rotor-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: right; }
.rotor-next {
  padding: 16px 0;
  margin: -12px 0;
  border: 0;
  background: none;
  font-size: var(--t-12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #BDBDBD;
  cursor: pointer;
}
.rotor-next:hover { text-decoration-color: var(--ink); }
.rotor-next:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* Every deal sits in the same grid cell, so the card is as tall as the tallest deal and never jumps. */
.rotor-stage { display: grid; margin-top: 16px; }
.deal {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.deal.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

.deal-route { font-size: var(--t-24); line-height: 1.2; }
.deal-meta { margin-top: 6px; font-size: var(--t-14); color: var(--muted); }

.price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; margin-top: 24px; }
.price p { display: flex; flex-direction: column; gap: 4px; }
.price-label { font-size: var(--t-12); line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.price strong { font-size: var(--t-40); line-height: 1; letter-spacing: -0.01em; }
.price s { font-size: var(--t-24); line-height: 1; color: var(--muted); }
.price-save {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 16px; padding: 12px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.price-save strong { font-size: var(--t-24); line-height: 1; }

.legs { margin-top: 8px; }
.legs li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "route price" "chips chips";
  column-gap: 12px;
  row-gap: 6px;
  align-items: baseline;
  padding: 10px 0;
}
.legs li + li { border-top: 1px solid var(--line); }
.leg-route { grid-area: route; font-size: var(--t-14); }
.chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; }
.leg-price { grid-area: price; font-size: var(--t-14); color: var(--muted); text-align: right; }
.deal-note { margin-top: 16px; font-size: var(--t-13); font-style: italic; color: var(--muted); }

/* Sections share one structure: hairline, heading, optional intro, content */
.section { padding-top: var(--section); padding-bottom: var(--section); border-top: 1px solid var(--line); }
.section-head { margin-bottom: 32px; }
h2 { font-size: var(--t-24); line-height: 1.15; letter-spacing: -0.01em; }
.section-head p { margin-top: 14px; max-width: var(--reading); font-size: var(--t-20); line-height: 1.45; }

/* Loopholes: founder's note beside three lead-in statements */
.loopholes { display: grid; gap: 40px; }
.founder p { max-width: 30em; font-size: var(--t-20); line-height: 1.45; }
.founder-name { margin-top: 14px; font-size: var(--t-14); color: var(--muted); }
.truths li { padding: 18px 0; border-top: 1px solid var(--line); max-width: 36em; }
.truths li:last-child { border-bottom: 1px solid var(--line); }

/* Deals table: a table on wide screens, stacked cards on phones */
.deals { width: 100%; border-collapse: collapse; }
.deals thead { display: none; }
.deals tbody { display: grid; gap: 8px; }
.deals tr {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "trip trip" "save now" "save was";
  gap: 2px 16px;
  align-items: baseline;
  padding: 20px;
  background: var(--quiet);
  border-radius: var(--r-card);
}
.deals th, .deals td { padding: 0; text-align: left; font-weight: 400; }
.deals th[scope="row"] { grid-area: trip; margin-bottom: 14px; font-family: var(--text); }
.row-route { display: block; font-size: var(--t-20); line-height: 1.25; }
.row-meta { display: block; margin-top: 6px; font-size: var(--t-14); color: var(--muted); }
.row-meta .chip { margin-left: 4px; }
.cell-label { display: block; margin-bottom: 4px; font: 400 var(--t-12) var(--text); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.deals td.save { grid-area: save; align-self: end; font-size: var(--t-32); line-height: 1; }
.deals td.now { grid-area: now; font-size: var(--t-17); line-height: 1.2; text-align: right; }
.deals td.was { grid-area: was; font-size: var(--t-17); line-height: 1.2; text-align: right; color: var(--muted); }

/* How it works: three numbered steps */
.steps { display: grid; gap: 28px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; }
.steps li > :not(.step-num) { grid-column: 2; }
.step-num { grid-row: 1 / span 2; font-size: var(--t-32); line-height: 1; color: var(--muted); }
.steps h3 { font-size: var(--t-20); line-height: 1.2; margin-top: 4px; }
.steps p { margin-top: 6px; }

/* Questions */
.faq { display: grid; gap: 0; }
.faq > div { padding: 18px 0; border-top: 1px solid var(--line); }
.faq > div:last-child { border-bottom: 1px solid var(--line); }
.faq dt { font-weight: 500; line-height: 1.3; }
.faq dd { margin-top: 6px; max-width: 36em; }

/* The closing band: centred, hero-scale */
.band { padding-top: var(--section); padding-bottom: var(--section); background: var(--ink); color: var(--paper); text-align: center; }
.band-title { font-size: clamp(32px, 9.2vw, var(--t-56)); line-height: 1.05; letter-spacing: -0.02em; }
.band-intro { margin: 20px auto 0; max-width: 28em; font-size: var(--t-20); line-height: 1.45; color: #D4D4D4; }
.band .join { margin: 32px auto 0; }
.band .join input[type="email"] { background: transparent; border-color: #5A5A5A; color: var(--paper); }
.band .join input[type="email"]::placeholder { color: #8A8A8A; }
.band .join input[type="email"]:focus { border-color: var(--paper); }
.band .join input[aria-invalid="true"] { border-color: var(--paper); }
.band .join button { background: var(--paper); color: var(--ink); }
.band .join button:focus-visible { outline-color: var(--paper); }
.band .join-note { color: #A3A3A3; }
.band .join.is-error .join-note, .band .join.is-done .join-note { color: var(--paper); }

/* Footer */
.foot { padding-top: 24px; padding-bottom: 40px; font-size: var(--t-14); color: var(--muted); }

/* Text link, used on the thanks page */
.text-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { opacity: 0.7; }

/* Tablet and up */
@media (min-width: 720px) {
  .head { padding-top: 32px; padding-bottom: 32px; }
  .wordmark { font-size: var(--t-24); }
  .hero { padding-top: 48px; }
  .lede { margin-top: 24px; }
  .join { margin-top: 40px; }
  .join-row { flex-direction: row; }
  .join input[type="email"] { flex: 1; }
  .rotor { padding: 28px; }
  h2 { font-size: var(--t-40); }
  .section-head { margin-bottom: 40px; }
  .loopholes { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .truths li:first-child { padding-top: 0; border-top: 0; }
  .deals thead { display: table-header-group; }
  .deals tbody { display: table-row-group; }
  .deals tr { display: table-row; background: none; }
  .deals th, .deals td { padding: 22px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
  .deals th[scope="row"] { margin: 0; }
  .deals th:first-child, .deals td:first-child { padding-left: 0; }
  .deals th:last-child, .deals td:last-child { padding-right: 0; }
  .deals thead th { padding-top: 0; padding-bottom: 12px; border-top: 0; font-size: var(--t-13); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .deals tbody tr:last-child th, .deals tbody tr:last-child td { border-bottom: 1px solid var(--line); }
  .deals .num { text-align: right; }
  .deals td { white-space: nowrap; }
  .deals td.now, .deals td.was { text-align: right; font-size: var(--t-20); }
  .cell-label { display: none; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .steps li { display: block; }
  .step-num { display: block; }
  .steps h3 { margin-top: 16px; }
  .faq { grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .faq > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .band-intro { margin-top: 24px; }
  .band .join { margin-top: 40px; }
}

/* Desktop: the deal sits beside the headline so both are seen at once */
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 72px; align-items: center; padding-top: 56px; }
  h1 { font-size: min(var(--t-56), 4.4vw); }
  .rotor { margin-top: 0; padding: 32px; }
  .join { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .deal { transition: none; }
  .join button { transition: none; }
}