/* =========================================================================
   AIRCELEO — "ONE BOX, ONE FLIGHT"
   The homepage is the journey of a single box from a San Francisco kitchen
   to a Bengaluru doorstep. Scroll = flight. Two worlds:
     1. THE SKY — a pinned scroll-cinema (fog → gold → stratosphere → dawn
        → Bengaluru night) with live flight telemetry.
     2. THE PAPER — customs documents, baggage tags, a split-flap arrivals
        board, a boarding-pass CTA.
   No mouse tracking. Everything is scroll- or story-driven.
   ======================================================================= */

:root {
  /* sky world */
  --space:   #0a0f2e;
  --ink-sky: #101828;
  /* paper world */
  --paper:      #f4efe4;
  --paper-2:    #ece5d5;
  --paper-line: #d8cfba;
  --ink:        #1b1710;
  --ink-soft:   rgba(27, 23, 16, 0.62);
  --ink-faint:  rgba(27, 23, 16, 0.38);
  /* brand */
  --orange:     #ff6b1f;
  --orange-ink: #e05a12;
  --stamp-red:  #c8371e;
  --stamp-blue: #274d8d;
  --board:      #14120d;

  --serif: "Zodiak", Georgia, "Times New Roman", serif;
  --mono:  "Spline Sans Mono", Consolas, "SFMono-Regular", monospace;
  --sans:  "Switzer", system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: #fff; }

/* =====================================================================
   ERROR FALLBACK — shown only if an unexpected script error slips past
   this file's normal degrade path (see engine header comment above).
   =================================================================== */
.err-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 32px);
  padding: 13px 16px 13px 18px;
  border-radius: 999px;
  background: rgba(12, 14, 24, 0.94);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.err-toast button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0;
}
.err-toast .err-toast-close {
  color: var(--paper);
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
}
.err-toast .err-toast-close:hover { opacity: 1; }

/* =====================================================================
   LOAD VEIL — hides the first-paint layout settle
   The cinema flips from the stacked fallback into the pinned layout and
   the web fonts swap in during the first few hundred ms, which visibly
   "maps out" the page. This opaque cover — painted with the exact opening
   fog gradient so the reveal is a seamless cross-fade, not a colour jump —
   sits over everything (above nav + mobile menu) until flight.js confirms
   the layout has settled, then fades once. pointer-events:none so it never
   blocks input, and JS always removes it (with a safety timeout).
   =================================================================== */
#load-veil {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e9eef3 0%, #ccd8e2 55%, #b9c9d6 100%);
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#load-veil .lv-mark {
  width: 72px;
  height: 72px;
  padding: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 12px 44px -14px rgba(20, 28, 56, 0.4);
  animation: lv-pulse 1.4s ease-in-out infinite;
}
@keyframes lv-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.82; }
  50%      { transform: scale(1.06); opacity: 1; }
}
html.veil-out #load-veil { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #load-veil { transition: opacity 0.2s linear; }
  #load-veil .lv-mark { animation: none; }
}

/* =====================================================================
   NAV — one dark pill that reads over both worlds
   =================================================================== */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  /* Deliberately NO backdrop-filter. This pill is position:fixed over the
     pinned flight scene, which animates every frame; a backdrop blur would
     force the browser to re-sample and re-blur the whole scene behind it on
     every scroll frame — the main mobile scroll-jank source. The background is
     nearly opaque, so a blur added almost nothing visually. Kept fully in
     paint-cheap territory instead. */
  background: rgba(12, 14, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.5);
  color: #f2f4f8;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 13px;
}
.nav-brand { color: #fff; }
.nav-brand img {
  width: 28px;
  height: 28px;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  object-fit: contain;
}
.nav-brand .accent { color: #fff; }
.nav-links { display: flex; align-items: center; }
.nav-links a {
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(242, 244, 248, 0.66);
  padding: 7px 11px;
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-cta {
  margin-left: 10px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--orange);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.25s;
}
.nav-cta:hover { background: var(--orange-ink); }
.nav-burger {
  display: none;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 12, 20, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  color: #f2f4f8;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { display: flex; }
.mobile-menu a {
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu a .idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange);
  margin-right: 14px;
  letter-spacing: 0.2em;
}
.mobile-menu .mm-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 16px;
  border-radius: 999px;
}

/* =====================================================================
   FLIGHT — the pinned scroll-cinema
   Default (no JS / reduced motion): copy blocks stack as normal
   sections over a night gradient; decorative layers hidden.
   html.js-flight: full cinema.
   =================================================================== */
#flight {
  position: relative;
  background: linear-gradient(180deg, #dfe7ee 0%, #c8d4de 100%);
  color: var(--ink-sky);
}
.stage { position: relative; }

/* -- decorative layers hidden unless cinema mode -- */
.sky, .stars, .clouds, .gg, .blr, .runway,
.plane-wrap, .boxfly, .route-panel, .hud, .paperfade,
.scroll-hint, .fly-item { display: none; }

/* copy blocks: readable stacked fallback */
.scene-copy {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 12vh 24px;
}

/* ---------------- cinema mode ---------------- */
html.js-flight .stage {
  /* Large viewport height, not small: fill the screen even when the mobile
     address bar is collapsed. With 100svh the scene was only as tall as the
     viewport-with-address-bar, so once the bar hid during scroll a light dead
     strip (the #flight gradient) showed below it. normalizeScroll keeps the
     bar collapsed, so the large viewport is what's actually on screen — lvh
     matches it and leaves no gap. 100vh is the fallback (legacy vh already
     resolves to the large viewport on mobile). */
  height: 100vh;
  height: 100lvh;
  overflow: clip;
}
html.js-flight .sky,
html.js-flight .stars,
html.js-flight .clouds,
html.js-flight .gg,
html.js-flight .blr,
html.js-flight .runway,
html.js-flight .plane-wrap,
html.js-flight .boxfly,
html.js-flight .route-panel,
html.js-flight .hud,
html.js-flight .paperfade,
html.js-flight .scroll-hint { display: block; }
html.js-flight .fly-item { display: inline-flex; }
html.js-flight .hud { display: flex; }

/* GPU-layer hints — deliberately SPARSE. Promoting every timeline target
   permanently (5 full-screen sky gradients + stars + paperfade + all 6 copy
   blocks + every fly-item/idcard) held 25+ standing compositor layers at once,
   which thrashed mobile GPU memory and was itself a big stutter source. Only
   the elements that move continuously across most of the timeline keep a
   standing hint; GSAP's force3D promotes each other element on demand for the
   duration of its own tween and releases the layer the moment it finishes. */
html.js-flight .plane-wrap,
html.js-flight .boxfly,
.cloud { will-change: transform; }

/* stacked-fallback readability: dark-scene copy sits on the light
   gradient, so use ink; stamps render inline as decorations */
html:not(.js-flight) .scene-copy.on-dark { color: var(--ink-sky); }
html:not(.js-flight) .scene-copy.on-dark h2 em { color: var(--orange-ink); }
html:not(.js-flight) .sc-close .kicker { color: var(--orange-ink); }

html.js-flight .scene-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: none;
  margin: 0;
  padding: 0 24px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
html.js-flight .scene-copy.is-on { pointer-events: auto; visibility: visible; }
html.js-flight .sc-hero { opacity: 1; visibility: visible; pointer-events: auto; padding-bottom: 22vh; }
/* Takeoff copy sits below the climbing plane, not behind it. As this block
   fades in the plane is still crossing screen-centre (its bottom reaches ~43%
   on desktop, lower on mobile), so the "Wheels up" kicker and headline used to
   render straight over the fuselage. The top padding drops the whole block
   clear of the plane while keeping the body above the HUD. Same intent as the
   .ann offset for the cruise announcements. */
html.js-flight .sc-takeoff { padding-top: 28vh; }

/* sky gradient layers (crossfaded by the timeline) */
.sky { position: absolute; inset: 0; }
.sky-l { position: absolute; inset: 0; opacity: 0; }
.sky-l[data-sky="fog"]   { background: linear-gradient(180deg, #e9eef3 0%, #ccd8e2 55%, #b9c9d6 100%); opacity: 1; }
.sky-l[data-sky="gold"]  { background: linear-gradient(180deg, #9db8cf 0%, #eec89a 60%, #f6ac62 100%); }
.sky-l[data-sky="space"] { background: linear-gradient(180deg, #05081c 0%, #0a0f2e 55%, #1b2350 100%); }
.sky-l[data-sky="dawn"]  { background: linear-gradient(180deg, #2b2340 0%, #96547c 55%, #ff9e6d 100%); }
.sky-l[data-sky="dusk"]  { background: linear-gradient(180deg, #191330 0%, #2f2148 60%, #4b2f52 100%); }

.stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }

/* clouds — soft SVG puffs, scroll-parallaxed */
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud { position: absolute; opacity: 0; }
.cloud svg { display: block; width: 100%; height: auto; }
.cloud.c1 { width: 34vw; top: 58%; left: 68%; }
.cloud.c2 { width: 26vw; top: 30%; left: 82%; }
.cloud.c3 { width: 44vw; top: 70%; left: 92%; }
.cloud.c4 { width: 22vw; top: 16%; left: 74%; }
.cloud.c5 { width: 38vw; top: 46%; left: 105%; }
.cloud.c6 { width: 28vw; top: 80%; left: 78%; }

/* golden gate / SF fog foreground */
.gg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 42vh;
  pointer-events: none;
}
.gg svg { width: 100%; height: 100%; display: block; }

/* runway rush lines */
.runway {
  position: absolute;
  left: 0; right: 0; bottom: 8vh;
  height: 10vh;
  opacity: 0;
  pointer-events: none;
}
.runway svg { width: 100%; height: 100%; }

/* bengaluru skyline */
.blr {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38vh;
  pointer-events: none;
  transform: translateY(105%);
}
.blr svg { width: 100%; height: 100%; display: block; }

/* the plane */
.plane-wrap {
  position: absolute;
  top: 38%;
  left: 50%;
  width: clamp(220px, 30vw, 420px);
  margin-left: calc(clamp(220px, 30vw, 420px) / -2);
  transform: translateX(-160vw);
}
.plane-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
}

/* the box (hero prop) */
.boxfly {
  position: absolute;
  top: 72%;
  left: 50%;
  width: clamp(150px, 17vw, 230px);
  transform: translate(-50%, -50%);
}
.boxfly svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 40px rgba(30, 20, 5, 0.35)); }
.box-tag {
  position: absolute;
  right: -12%;
  bottom: -14%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border-radius: 4px;
  border: 1px solid var(--paper-line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: rotate(6deg) scale(0);
  transform-origin: top left;
}
.box-tag::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 8px;
  width: 14px;
  height: 14px;
  border: 2px solid #b9a77e;
  border-radius: 50%;
  background: transparent;
}
.box-tag strong { display: block; font-weight: 600; color: var(--stamp-red); }

/* items flying into the box — illustrated products (inline SVG), not
   text pills. Each gets its own width; height follows the viewBox. */
.fly-item {
  position: absolute;
  top: 68%;
  left: 50%;
  opacity: 0;
}
.fly-item svg { display: block; width: 100%; height: auto; }
.fly-item.fi-spice   { width: clamp(58px, 6.5vw, 92px); }
.fly-item.fi-laptop  { width: clamp(90px, 10vw, 138px); }
.fly-item.fi-bear    { width: clamp(70px, 8vw, 110px); }

/* hero copy */
.sc-hero .kicker,
.scene-copy .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.62;
  margin-bottom: 20px;
}
.sc-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 7.6vw, 108px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.sc-hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange-ink);
}
.sc-hero .sub {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.65;
  color: inherit;
  opacity: 0.78;
}
.sc-hero .cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--orange-ink); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-ink); }
.btn-line { border: 1.5px solid currentColor; }
.btn-line:hover { background: rgba(0, 0, 0, 0.06); }

/* packing caption sits in the upper third, above the box */
html.js-flight .sc-pack { justify-content: flex-start; padding-top: 16vh; }

/* scene copy general (over dark skies) */
.scene-copy h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.scene-copy h2 em { font-style: italic; color: var(--orange); }
.scene-copy p.body {
  margin-top: 18px;
  max-width: 52ch;
  opacity: 0.8;
  font-size: clamp(14.5px, 1.35vw, 17px);
  line-height: 1.7;
}
.scene-copy.on-dark { color: #eef1f8; text-shadow: 0 2px 26px rgba(4, 7, 24, 0.85); }
.scene-copy.on-dark h2 em { color: #ffa163; }
html.js-flight .ann { text-shadow: 0 2px 26px rgba(4, 7, 24, 0.9); }

/* match scene — two ID cards + stamp */
.sc-match .cards {
  display: flex;
  gap: clamp(14px, 3vw, 30px);
  justify-content: center;
  align-items: center;
  margin-top: 34px;
  perspective: 900px;
}
.idcard {
  width: clamp(200px, 24vw, 290px);
  background: #fffdf6;
  color: var(--ink);
  border-radius: 12px;
  border: 1px solid var(--paper-line);
  box-shadow: 0 24px 50px -18px rgba(10, 8, 2, 0.45);
  padding: 16px 18px;
  text-align: left;
  font-family: var(--mono);
}
.idcard .ic-top {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px dashed var(--paper-line);
  padding-bottom: 9px;
}
.idcard .ic-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0 10px;
}
.idcard .ic-ava {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 20px;
  color: #fff;
}
.idcard.left .ic-ava { background: var(--stamp-blue); }
.idcard.right .ic-ava { background: var(--orange-ink); }
.idcard .ic-name { font-weight: 600; font-size: 14px; font-family: var(--sans); }
.idcard .ic-role { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.idcard .ic-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-soft);
  border-top: 1px dashed var(--paper-line);
  padding-top: 9px;
}
.idcard .ok { color: #1d7a3d; font-weight: 600; }

/* rubber stamps */
.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp-red);
  border: 3px double var(--stamp-red);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: clamp(15px, 2vw, 22px);
  transform: rotate(-8deg);
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(200, 55, 30, 0.06), transparent 60%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.92 0.08'/%3E%3C/filter%3E%3Crect width='240' height='90' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.92 0.08'/%3E%3C/filter%3E%3Crect width='240' height='90' fill='%23fff' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-size: cover;
}
.stamp.blue { color: var(--stamp-blue); border-color: var(--stamp-blue); }
.sc-match .stamp, .sc-arrive .stamp { display: inline-block; margin-top: 22px; }
html.js-flight .sc-match .stamp, html.js-flight .sc-arrive .stamp {
  position: absolute;
  z-index: 5;
  margin-top: 0;
  transform: rotate(-10deg) scale(0);
}
html.js-flight .sc-match .stamp { top: 27%; mix-blend-mode: normal; }
html.js-flight .sc-arrive .stamp {
  top: 47%;
  mix-blend-mode: normal;
  color: #ff9a68;
  border-color: #ff9a68;
  background: rgba(10, 7, 24, 0.72);
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 0 34px rgba(255, 107, 31, 0.3);
}

/* cruise announcements */
.ann {
  position: absolute;
  left: 50%;
  /* Sit the announcement block below the cruising plane, not behind it. At the
     old 42% the kicker ("Cabin announcement · NN") and headline top rode up
     into the plane's fuselage during cruise (plane bottom ~28% on desktop,
     ~15% on mobile). 50% drops the whole block clear of the plane on every
     viewport while staying above the route arc and HUD. */
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 48px));
  color: #eef1f8;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
html.js-flight .ann { display: block; }
.ann .ann-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8ea2d8;
  margin-bottom: 16px;
}
.ann h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.ann h3 em { font-style: italic; color: #ffa163; }
.ann p {
  margin: 16px auto 0;
  max-width: 52ch;
  opacity: 0.72;
  font-size: 15.5px;
  line-height: 1.7;
}
/* stacked fallback for announcements when no cinema */
html:not(.js-flight) .ann {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  width: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 8vh 24px;
  color: var(--ink-sky);
}
html:not(.js-flight) .ann .ann-k { color: var(--orange-ink); }
html:not(.js-flight) .ann h3 em { color: var(--orange-ink); }

/* route panel — SFO→BLR arc */
.route-panel {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%) translateY(30px);
  width: min(680px, calc(100vw - 40px));
  opacity: 0;
  pointer-events: none;
}
.route-panel svg { width: 100%; height: auto; display: block; }

/* delivery scene */
.sc-arrive .handoff-scene {
  margin-top: 30px;
  width: min(420px, 76vw);
  position: relative;
}
.sc-arrive .handoff-scene svg { width: 100%; height: auto; display: block; }

/* closing line */
.sc-close h2 {
  font-size: clamp(34px, 6.4vw, 88px);
  max-width: 16ch;
}
.sc-close .kicker { color: #ffb98a; opacity: 1; }

/* paper crossfade out of the sky */
.paperfade {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}

/* telemetry HUD */
.hud {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(10, 12, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  color: #eef1f8;
  font-family: var(--mono);
  max-width: calc(100vw - 24px);
}
.hud-cell {
  padding: 10px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 104px;
}
.hud-cell:last-child { border-right: 0; }
.hud-cell .k {
  font-size: 8.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(238, 241, 248, 0.45);
}
.hud-cell .v {
  font-size: 14px;
  font-weight: 600;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud-cell .v .u { font-size: 10px; opacity: 0.55; margin-left: 3px; }
.hud-cell.status .v { color: var(--orange); }
@media (max-width: 720px) {
  .hud-cell { min-width: 0; padding: 8px 12px; }
  .hud-cell.city { display: none; }
  .hud-cell .v { font-size: 12px; }
}

.scroll-hint {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-sky);
  opacity: 0.55;
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* =====================================================================
   PAPER WORLD
   =================================================================== */
.paper-world {
  position: relative;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255, 158, 109, 0.10), transparent),
    var(--paper);
  color: var(--ink);
}
/* subtle paper fibre texture */
.paper-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}
.pw { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); position: relative; }

.doc-rule {
  border: 0;
  border-top: 1px dashed var(--paper-line);
  margin: 0;
}

/* section headers styled like customs-form fields */
.form-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0 14px;
  border-bottom: 2px solid var(--ink);
}
.form-head .no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--orange-ink);
  white-space: nowrap;
}
.form-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 54px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.form-head h2 em { font-style: italic; color: var(--orange-ink); }
.form-head .fh-right {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 640px) { .form-head .fh-right { display: none; } }

/* purpose — the plain-language declaration (always visible, no animation) */
.purpose { padding: clamp(26px, 4vh, 48px) 0 clamp(50px, 8vh, 90px); }
.purpose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(24px, 5vw, 70px);
  padding-top: clamp(26px, 4vh, 44px);
}
@media (max-width: 860px) { .purpose-grid { grid-template-columns: 1fr; } }
.purpose-side .stamp { transform: rotate(-6deg); font-size: 14px; }
.purpose-side .p-meta {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 2.1;
  color: var(--ink-soft);
}
.purpose-side .p-meta b { color: var(--ink); font-weight: 600; }
.purpose-side .p-meta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--orange);
}
.purpose-copy p { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; color: var(--ink); }
.purpose-copy p + p { margin-top: 18px; }
.purpose-copy .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.purpose-copy .links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.purpose-copy .links a:hover { background: var(--ink); color: var(--paper); }

/* baggage-tag role cards */
.roles { padding: clamp(50px, 8vh, 90px) 0; }
.roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 34px);
  padding-top: clamp(26px, 4vh, 44px);
}
@media (max-width: 860px) { .roles-grid { grid-template-columns: 1fr; } }
.tag-card {
  position: relative;
  display: block;
  text-decoration: none;
  background: #fffdf6;
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: clamp(24px, 3.2vw, 40px);
  padding-left: clamp(52px, 6vw, 72px);
  box-shadow: 0 18px 40px -22px rgba(30, 22, 6, 0.35);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
  overflow: hidden;
}
.tag-card:hover {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 0 30px 56px -22px rgba(30, 22, 6, 0.45);
}
/* the punched hole + reinforcement ring of a real luggage tag */
.tag-card::before {
  content: "";
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid #c9b98d;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tag-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: clamp(44px, 5vw, 60px);
  border-right: 1px dashed var(--paper-line);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(255, 107, 31, 0.06) 8px 16px);
}
.tag-card .tc-route {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.tag-card .tc-route .hot { color: var(--orange-ink); }
.tag-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  margin-top: 14px;
  letter-spacing: -0.01em;
}
.tag-card h3 em { font-style: italic; color: var(--orange-ink); }
.tag-card p { margin-top: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; max-width: 44ch; }
.tag-card ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.tag-card ul li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  align-items: baseline;
}
.tag-card ul li::before { content: "✓"; color: var(--orange-ink); font-weight: 700; flex-shrink: 0; }
.tag-card .tc-go {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 3px;
}

/* =====================================================================
   SPLIT-FLAP ARRIVALS BOARD
   =================================================================== */
.board-sec { padding: clamp(50px, 8vh, 90px) 0; }
.board {
  margin-top: clamp(26px, 4vh, 44px);
  background: var(--board);
  border-radius: 16px;
  padding: clamp(20px, 3.4vw, 44px);
  box-shadow: 0 40px 80px -40px rgba(20, 14, 2, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow-x: auto;
}
.board-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  color: #d9a04b;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
  min-width: 520px;
}
.board-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 1fr) 96px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  min-width: 520px;
}
.board-row + .board-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.flap-line { display: flex; gap: 3px; flex-wrap: nowrap; }
.flap {
  width: 1.16em;
  height: 1.7em;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg, #2b2820 0 48%, #221f18 52% 100%);
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 19px);
  color: #f4e9d0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
}
.flap.hot { color: #ffab63; }
.board-row .rem {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 233, 208, 0.4);
}

/* =====================================================================
   FAQ — customs-declaration accordion
   =================================================================== */
.faq { padding: clamp(50px, 8vh, 90px) 0; scroll-margin-top: 90px; }
.faq-list { margin-top: clamp(20px, 3vh, 36px); }
.faq-item { border-bottom: 1px solid var(--paper-line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 18px;
  text-align: left;
  padding: 22px 4px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(15.5px, 1.7vw, 19px);
  transition: color 0.25s;
}
.faq-q:hover { color: var(--orange-ink); }
.faq-q .qno {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--orange-ink);
  flex-shrink: 0;
}
.faq-q .qmark {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.faq-item.is-open .qmark { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  padding: 0 40px 24px 44px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 68ch;
}
.faq-a-inner a { color: var(--orange-ink); }

/* =====================================================================
   CTA — the boarding pass
   =================================================================== */
.cta { padding: clamp(60px, 10vh, 120px) 0 clamp(80px, 12vh, 140px); scroll-margin-top: 90px; }
.bpass {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(180px, 24vw, 280px);
  background: #fffdf6;
  border: 1px solid var(--paper-line);
  border-radius: 18px;
  box-shadow: 0 40px 90px -36px rgba(30, 20, 4, 0.5);
  overflow: hidden;
  transform: rotate(-0.6deg);
}
@media (max-width: 720px) { .bpass { grid-template-columns: 1fr; transform: none; } }
.bpass-main { padding: clamp(26px, 4vw, 52px); }
.bpass-main .bp-k {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bpass-main h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-top: 18px;
  max-width: 14ch;
}
.bpass-main h2 em { font-style: italic; color: var(--orange-ink); }
.bpass-main p { margin-top: 16px; color: var(--ink-soft); max-width: 48ch; line-height: 1.7; }
.bpass-main .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* waitlist form (JS replaces the mailto buttons with this) */
.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.waitlist input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: #fffdf6;
  border: 1.5px solid var(--paper-line);
  border-radius: 999px;
  padding: 13px 18px;
}
.waitlist input::placeholder { color: var(--ink-faint); }
.waitlist input:focus { outline: none; border-color: var(--orange); }
.waitlist .btn { flex-shrink: 0; }
.waitlist button:disabled { opacity: 0.6; cursor: default; }
.wl-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wl-done {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d7a3d;
  border: 3px double #1d7a3d;
  border-radius: 8px;
  padding: 12px 22px;
  transform: rotate(-2deg);
}

.bpass-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 34px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed var(--paper-line);
  font-family: var(--mono);
}
.bpass-fields .f .k { font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.bpass-fields .f .v { font-size: 13px; font-weight: 600; margin-top: 2px; }
.bpass-stub {
  position: relative;
  border-left: 2px dashed var(--paper-line);
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255, 107, 31, 0.035) 10px 20px), #fffdf6;
}
/* perforation notches */
.bpass-stub::before, .bpass-stub::after {
  content: "";
  position: absolute;
  left: -13px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--paper-line);
}
.bpass-stub::before { top: -13px; }
.bpass-stub::after { bottom: -13px; }
@media (max-width: 720px) {
  .bpass-stub { border-left: 0; border-top: 2px dashed var(--paper-line); }
  .bpass-stub::before { top: -13px; left: -13px; }
  .bpass-stub::after { top: -13px; bottom: auto; left: auto; right: -13px; }
}
.bpass-stub .bp-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bpass-stub .seat {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 1;
}
.bpass-stub .seat small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 8px;
}
.barcode {
  height: 54px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 17px,
    var(--ink) 17px 18px, transparent 18px 24px);
  border-radius: 2px;
}

/* =====================================================================
   FOOTER
   =================================================================== */
.footer {
  border-top: 2px solid var(--ink);
  padding: clamp(40px, 7vh, 70px) 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand .fb-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 15px;
}
.footer-brand .fb-mark img { width: 28px; height: 28px; object-fit: contain; }
.footer-brand .fb-tag {
  font-family: var(--serif);
  font-style: italic;
  color: var(--orange-ink);
  font-size: 18px;
  margin-top: 12px;
}
.footer-brand small { display: block; margin-top: 12px; color: var(--ink-soft); max-width: 34ch; line-height: 1.65; font-size: 13px; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.25s;
}
.footer-col a:hover { color: var(--orange-ink); }
.footer-bottom {
  margin-top: clamp(30px, 5vh, 50px);
  padding-top: 20px;
  border-top: 1px dashed var(--paper-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =====================================================================
   PAPER SUBPAGES — shared components for how/why/who/sender/travler/
   safety/vision and the legal documents. Same paper world as the
   homepage's second half.
   =================================================================== */
body.paper-page { background: var(--paper); }

/* gentle scroll-rise reveal (IO-driven; visible without JS) */
html.rise-ready .rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
html.rise-ready .rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.rise-ready .rise { opacity: 1; transform: none; transition: none; }
}

.page-hero { padding: clamp(120px, 16vh, 170px) 0 clamp(30px, 5vh, 60px); }
.ph-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
}
.ph-meta .hot { color: var(--orange-ink); }
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 28px;
  max-width: 16ch;
}
.page-hero h1 em { font-style: italic; color: var(--orange-ink); }
.page-hero .lede {
  margin-top: 20px;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
}
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-hero .ph-stampline { margin-top: 30px; }
.page-hero .ph-stampline .stamp { font-size: 13px; }

/* one "sky moment" per page — a night-flight quote band */
.quote-band {
  position: relative;
  margin: clamp(50px, 8vh, 90px) 0;
  padding: clamp(70px, 12vh, 130px) 0;
  background: linear-gradient(180deg, #05081c 0%, #0a0f2e 55%, #1b2350 100%);
  color: #eef1f8;
  overflow: clip;
}
.quote-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 44% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 58% 52%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 72% 30%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 84% 74%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 92% 14%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.4), transparent);
}
.quote-band::after {
  /* faint dashed flight path across the band */
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 55%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(238,241,248,0.22) 0 6px, transparent 6px 15px);
  transform: rotate(-3deg);
  pointer-events: none;
}
.quote-band .qk {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8ea2d8;
  margin-bottom: 20px;
}
.quote-band .q {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 4.4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 26ch;
  position: relative;
  z-index: 1;
}
.quote-band .q em { font-style: italic; color: #ffa163; }

/* declaration cards (feature grids) */
.decl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 22px);
  padding-top: clamp(24px, 4vh, 40px);
}
@media (max-width: 720px) { .decl-grid { grid-template-columns: 1fr; } }
.decl-card {
  background: #fffdf6;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 14px 30px -20px rgba(30, 22, 6, 0.3);
}
.decl-card .dc-no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--orange-ink);
  text-transform: uppercase;
}
.decl-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  margin-top: 10px;
  letter-spacing: -0.01em;
}
.decl-card p { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }

/* prose duo (narrative sections) */
.prose-sec { padding: clamp(36px, 6vh, 64px) 0 0; }
.prose-sec .prose {
  padding-top: clamp(20px, 3vh, 34px);
  max-width: 74ch;
}
.prose-sec .prose p { color: var(--ink); font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.8; }
.prose-sec .prose p + p { margin-top: 16px; }
.prose-sec .prose p strong { font-weight: 600; }

/* step sheets with app screenshots */
.step-doc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(36px, 6vh, 60px) 0;
  border-bottom: 1px dashed var(--paper-line);
}
.step-doc:last-of-type { border-bottom: 0; }
.step-doc.flip .sd-copy { order: 2; }
.step-doc.flip .sd-shot { order: 1; }
@media (max-width: 760px) {
  .step-doc { grid-template-columns: 1fr; }
  .step-doc.flip .sd-copy { order: 1; }
  .step-doc.flip .sd-shot { order: 2; }
}
.sd-copy .sd-no {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stamp-blue);
  border: 2px solid var(--stamp-blue);
  border-radius: 6px;
  padding: 5px 12px;
  transform: rotate(-2deg);
}
.sd-copy h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  margin-top: 16px;
  letter-spacing: -0.015em;
}
.sd-copy h3 em { font-style: italic; color: var(--orange-ink); }
.sd-copy p { margin-top: 12px; color: var(--ink-soft); line-height: 1.7; max-width: 50ch; }
.sd-copy .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sd-copy .chips span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--paper-line);
  background: #fffdf6;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--ink-soft);
}
.sd-shot { position: relative; }
.sd-shot img {
  width: min(300px, 76vw);
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid var(--paper-line);
  box-shadow: 0 30px 60px -28px rgba(30, 22, 6, 0.45);
  transform: rotate(1.4deg);
}
.step-doc.flip .sd-shot img { transform: rotate(-1.4deg); }

/* legal documents */
.doc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: clamp(20px, 3vh, 32px);
}
.doc-toc a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--paper-line);
  background: #fffdf6;
  padding: 7px 13px;
  border-radius: 999px;
  transition: border-color 0.25s, color 0.25s;
}
.doc-toc a:hover { border-color: var(--orange-ink); color: var(--orange-ink); }
.legal-doc { padding-bottom: clamp(40px, 6vh, 70px); }
.legal-intro {
  padding: clamp(26px, 4vh, 40px) clamp(20px, 3vw, 34px);
  margin-top: clamp(24px, 4vh, 40px);
  background: #fffdf6;
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--orange);
  border-radius: 10px;
}
.legal-intro p { color: var(--ink); line-height: 1.75; font-size: 15.5px; }
.legal-intro p + p { margin-top: 12px; }
.legal-art {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--paper-line);
}
@media (max-width: 640px) { .legal-art { grid-template-columns: 1fr; gap: 8px; } }
.legal-art .la-no {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--orange-ink);
  line-height: 1;
}
.legal-art .la-no small {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  margin-top: 6px;
}
.legal-art h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 28px);
  letter-spacing: -0.01em;
}
.legal-art h3 {
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.legal-art p { margin-top: 12px; color: var(--ink-soft); line-height: 1.75; font-size: 15px; }
.legal-art p a { color: var(--orange-ink); }
.legal-art ul { margin: 12px 0 0; padding-left: 2px; list-style: none; display: grid; gap: 7px; }
.legal-art ul li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.legal-art ul li::before {
  content: "§";
  color: var(--orange-ink);
  font-family: var(--mono);
  font-size: 12px;
  flex-shrink: 0;
}

/* =====================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}