/* =========================================================
   RallyFox: AI travel assistant for travel agencies
   Bright, sunny "holiday scrapbook" design. See DESIGN_NOTES.md
   ========================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --sand: #FFF8EE;
  --paper: #FFFFFF;
  --fox: #FF6B2C;
  --sunset: #FF4F6D;
  --sun: #FFC83D;
  --sky: #3FB6FF;
  --lagoon: #19C3B1;
  --lilac: #A78BFA;
  --ink: #1C2340;
  --ink-2: #5A6380;
  --line: rgba(28, 35, 64, 0.08);

  /* Pastel tints (section + panel backgrounds) */
  --t-sky: #E6F5FF;
  --t-peach: #FFEBDD;
  --t-mint: #DDF7F2;
  --t-sun: #FFF3CC;
  --t-lilac: #EFE9FF;
  --t-pink: #FFE4EA;

  /* Deep inks for small colored text (AA on tints) */
  --fox-deep: #B93C0A;
  --sunset-deep: #C81E4A;
  --sky-deep: #0369A1;
  --lagoon-deep: #0F766E;
  --lilac-deep: #6D28D9;

  /* Gradients */
  --g-sunrise: linear-gradient(120deg, var(--sun) 0%, var(--fox) 52%, var(--sunset) 100%);
  --g-ocean: linear-gradient(120deg, var(--sky) 0%, var(--lagoon) 100%);

  /* Tinted shadows */
  --sh-card: 0 1px 2px rgba(28, 35, 64, 0.06), 0 24px 48px -24px rgba(28, 35, 64, 0.28);
  --sh-fox: 0 30px 60px -30px rgba(255, 107, 44, 0.55), 0 2px 4px rgba(255, 107, 44, 0.08);
  --sh-sky: 0 30px 60px -30px rgba(63, 182, 255, 0.6), 0 2px 4px rgba(63, 182, 255, 0.1);
  --sh-mint: 0 30px 60px -30px rgba(25, 195, 177, 0.55);
  --sh-lilac: 0 30px 60px -30px rgba(167, 139, 250, 0.65);
  --sh-sun: 0 24px 50px -26px rgba(255, 170, 0, 0.6);

  /* Shape */
  --r-xl: 36px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 999px;

  /* Type */
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Motion */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1.3, .36, 1);
  --out: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
use { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none; transition: top .2s var(--out);
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; position: relative; }
.section { position: relative; padding-block: clamp(80px, 11vw, 160px); }
/* clip sideways overflow from tilted stickers and pre-reveal scales (clip keeps position: sticky working) */
main > section, .footer { overflow-x: clip; }

.section-head { max-width: 780px; margin-bottom: clamp(48px, 6vw, 88px); position: relative; z-index: 1; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: 20px; }

/* ---------- Type ---------- */
.hero__title, .h2, .h3, .h4 {
  font-family: var(--f-display);
  font-weight: 800;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title {
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-variation-settings: "opsz" 96;
}
.h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-variation-settings: "opsz" 96;
}
.h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 750;
}
.h4 {
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 750;
}
.lead {
  font-size: clamp(1.125rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--ink-2);
  max-width: 54ch;
}
.hand {
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--fox-deep);
}
.hand__arrow {
  width: 56px; height: 38px; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.mini-label {
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.mini-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sunset); }

/* Highlighted word: hand-drawn marker swash / squiggle */
.hl { position: relative; display: inline-block; white-space: nowrap; z-index: 0; }
.hl__mark {
  position: absolute; z-index: -1; left: -4%; width: 108%;
  bottom: .04em; height: .46em; overflow: visible; pointer-events: none;
}
.hl__mark path {
  fill: none; stroke: var(--hl, var(--sun)); stroke-width: 15; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.hl--sun { --hl: var(--sun); }
.hl--sky { --hl: #9ED8FF; }
.hl--mint { --hl: #8EE6D9; }
.hl--pink { --hl: #FFB3C1; }
.hl--paper { --hl: rgba(255, 255, 255, .85); }
.hl--squiggle .hl__mark { bottom: .02em; height: .2em; left: 0; width: 100%; }
.hl--squiggle .hl__mark path { stroke: var(--sunset); stroke-width: 4.5; }

.js [data-reveal] .hl__mark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--out) .5s; }
.js [data-reveal].is-in .hl__mark path { stroke-dashoffset: 0; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: translate .3s var(--spring), scale .18s var(--spring), box-shadow .3s var(--out), background-color .3s var(--out);
}
.btn .ico { transition: translate .35s var(--spring); }
.btn:hover { translate: 0 -3px; }
.btn:hover .ico { translate: 4px 0; }
.btn:active { scale: .94 .9; transition-duration: .12s; }
.btn--fox {
  background: var(--fox); color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(255, 107, 44, .9), inset 0 -3px 0 rgba(28, 35, 64, .1);
}
.btn--fox:hover { background: #FF7A3F; box-shadow: 0 20px 34px -14px rgba(255, 79, 109, .7), inset 0 -3px 0 rgba(28, 35, 64, .1); }
.btn--paper {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 18px 36px -18px rgba(28, 35, 64, .45), inset 0 -3px 0 rgba(28, 35, 64, .06);
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.1rem; }
.btn--xl { min-height: 68px; padding: 0 40px; font-size: 1.25rem; }

.link-play {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.link-play__dot {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--fox-deep); box-shadow: var(--sh-card);
  transition: scale .35s var(--spring), rotate .35s var(--spring);
}
.link-play__dot .ico { width: 22px; height: 22px; }
.link-play:hover .link-play__dot { scale: 1.12; rotate: -10deg; }
.link-play:hover { text-decoration: underline; text-decoration-color: var(--fox); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- Stickers, tags, doodles ---------- */
.sticker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(255, 107, 44, .7), inset 0 0 0 2px rgba(255, 107, 44, .25);
  rotate: -3deg;
}
.sticker .ico { color: var(--fox-deep); width: 18px; height: 18px; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .92rem; rotate: -2deg; margin-bottom: 20px;
}
.tag .ico { width: 18px; height: 18px; }
.tag--sky { background: #D2ECFF; color: var(--sky-deep); }
.tag--mint { background: #CBF3EC; color: var(--lagoon-deep); }
.tag--peach { background: #FFDCC7; color: var(--fox-deep); }
.tag--sun { background: #FFE89E; color: #8A4B00; }
.tag--pink { background: #FFD3DD; color: var(--sunset-deep); }

.benefit { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 700; color: var(--ink); }
.benefit .ico {
  width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: var(--lagoon); color: var(--ink); stroke-width: 3;
}

.doodle { position: absolute; width: var(--size, 64px); height: var(--size, 64px); pointer-events: none; z-index: 2; }
.doodle svg { width: 100%; height: 100%; }
.doodle use { stroke-width: 1.5; }

/* ---------- Image placeholders ---------- */
.media {
  --ph: linear-gradient(150deg, #FFE3CF 0%, #FFD6DF 100%);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ph); border-radius: var(--r-lg); margin: 0;
}
.media--peach { --ph: linear-gradient(150deg, #FFE6D3 0%, #FFD5DE 100%); }
.media--sky { --ph: linear-gradient(150deg, #DDF1FF 0%, #D6F6F1 100%); }
.media--mint { --ph: linear-gradient(150deg, #D8F6EE 0%, #E3F1FF 100%); }
.media--sun { --ph: linear-gradient(150deg, #FFF1C4 0%, #FFDCCB 100%); }
/* dotted travel-map pattern (continents) */
.media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(28, 35, 64, .16) 1.4px, transparent 1.9px) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(42% 30% at 28% 34%, #000 55%, transparent 72%), radial-gradient(30% 26% at 72% 58%, #000 55%, transparent 72%), radial-gradient(18% 16% at 62% 22%, #000 50%, transparent 72%), radial-gradient(16% 14% at 30% 76%, #000 50%, transparent 72%);
  mask: radial-gradient(42% 30% at 28% 34%, #000 55%, transparent 72%), radial-gradient(30% 26% at 72% 58%, #000 55%, transparent 72%), radial-gradient(18% 16% at 62% 22%, #000 50%, transparent 72%), radial-gradient(16% 14% at 30% 76%, #000 50%, transparent 72%);
}
/* tiny plane doodle on a dotted arc */
.media::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 60px;
  translate: -50% -50%; opacity: .55; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none' stroke='%231C2340' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 52C26 20 56 10 88 22' stroke-dasharray='.1 7'/%3E%3Cpath d='M114 8 96 36l-5-10-11-4Z' fill='%23fff'/%3E%3Cpath d='m114 8-23 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.media__label {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.media__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fox); }
.media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--out); z-index: 2;
}
.media.is-loaded > img { opacity: 1; }
.hero__media > img { opacity: 1; transition: none; }
.media.is-loaded .media__label, .media.is-loaded::after { opacity: 0; }

/* ---------- Blobs (drifting background) ---------- */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 66%);
  animation: drift 24s ease-in-out infinite alternate;
}
.blob--sun { --c: rgba(255, 200, 61, .55); }
.blob--sky { --c: rgba(63, 182, 255, .32); animation-duration: 30s; animation-delay: -6s; }
.blob--pink { --c: rgba(255, 79, 109, .22); animation-duration: 22s; animation-delay: -12s; }
.blob--mint { --c: rgba(25, 195, 177, .26); animation-duration: 28s; animation-delay: -3s; }
.blob--lilac { --c: rgba(167, 139, 250, .3); animation-duration: 26s; animation-delay: -9s; }
@keyframes drift {
  0% { translate: 0 0; scale: 1; }
  50% { translate: 4vw 2.5vw; scale: 1.12; }
  100% { translate: -3vw 4vw; scale: .94; }
}

/* ---------- Scroll reveal (springy, staggered) ---------- */
.js [data-reveal] {
  opacity: 0; translate: 0 28px;
  transition: opacity .7s var(--out), translate .9s var(--spring-soft), scale .9s var(--spring-soft), rotate .9s var(--spring-soft);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.js [data-reveal="sticker"] { translate: 0 44px; scale: .86; rotate: calc(var(--rot, 0deg) + 9deg); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; }
.js [data-reveal="sticker"].is-in { rotate: var(--rot, 0deg); }
.js [data-reveal].is-in:hover { transition-delay: 0s; }

/* Hover tilt (transform is set by main.js; reveal uses translate/scale/rotate so they compose) */
[data-tilt] { transition: transform .45s var(--out); }
.js [data-reveal][data-tilt] {
  transition: opacity .7s var(--out), translate .9s var(--spring-soft), scale .9s var(--spring-soft), rotate .9s var(--spring-soft), transform .45s var(--out);
  transition-delay: calc(var(--d, 0) * 110ms), calc(var(--d, 0) * 110ms), calc(var(--d, 0) * 110ms), calc(var(--d, 0) * 110ms), 0s;
}

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 12px var(--gutter) 0; pointer-events: none; }
.nav__progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 52; }
.nav__progress span {
  display: block; height: 100%; background: var(--g-sunrise);
  transform-origin: 0 50%; transform: scaleX(0);
}
.nav__inner {
  pointer-events: auto;
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background-color .45s var(--out), box-shadow .45s var(--out), border-color .45s var(--out), -webkit-backdrop-filter .45s, backdrop-filter .45s;
}
.nav.is-scrolled .nav__inner {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-color: rgba(28, 35, 64, .06);
  box-shadow: 0 16px 36px -20px rgba(28, 35, 64, .35);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 12px; }
.brand__mark:empty { display: none; }
.brand__mark img { height: 34px; width: auto; }
.brand__word {
  font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.035em; line-height: 1; color: var(--ink);
}
.brand__word span { color: #E8590C; } /* brand orange, deepened slightly for 3:1 contrast on every background */
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 10px 14px; border-radius: var(--r-pill); text-decoration: none;
  font-weight: 600; font-size: .98rem; transition: background-color .25s var(--out);
}
.nav__links a:hover { background: rgba(255, 200, 61, .35); }
.nav__cta { margin-left: 6px; }
.nav__burger { display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); box-shadow: var(--sh-card); place-items: center; }
.nav__burger-lines { display: grid; gap: 6px; }
.nav__burger-lines i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.nav__burger-lines i:last-child { width: 14px; justify-self: end; }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 70; overflow: auto;
  background: var(--sun);
  display: flex; flex-direction: column; gap: 28px;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) max(28px, env(safe-area-inset-bottom));
}
.menu.is-open { animation: menuIn .5s var(--spring-soft) both; }
.menu.is-closing { animation: menuOut .25s var(--out) both; }
@keyframes menuIn { from { opacity: 0; scale: 1.04; } to { opacity: 1; scale: 1; } }
@keyframes menuOut { to { opacity: 0; scale: 1.02; } }
.menu__blobs i { position: absolute; border-radius: 50%; pointer-events: none; }
.menu__blobs i:nth-child(1) { width: 70vw; height: 70vw; right: -25vw; top: -10vw; background: radial-gradient(circle, rgba(255, 79, 109, .45), transparent 65%); }
.menu__blobs i:nth-child(2) { width: 80vw; height: 80vw; left: -30vw; bottom: -20vw; background: radial-gradient(circle, rgba(63, 182, 255, .4), transparent 65%); }
.menu__blobs i:nth-child(3) { width: 40vw; height: 40vw; right: 10vw; bottom: 25vh; background: radial-gradient(circle, rgba(255, 255, 255, .6), transparent 65%); }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-left: 10px; position: relative; }
.menu__top .brand__word span { color: var(--ink); text-decoration: underline; text-decoration-color: var(--paper); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.menu__close { width: 52px; height: 52px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: var(--sh-card); }
.menu__close .ico { width: 24px; height: 24px; }
.menu__links { display: flex; flex-direction: column; position: relative; margin-top: 3vh; }
.menu__links a {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 13vw, 4.5rem); line-height: 1.05; letter-spacing: -.045em;
  text-decoration: none; padding: 6px 10px; border-radius: 16px;
}
.menu.is-open .menu__links a { animation: menuLink .6s var(--spring) both; animation-delay: calc(80ms + var(--i) * 60ms); }
@keyframes menuLink { from { opacity: 0; translate: 0 30px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.menu__cta { align-self: flex-start; position: relative; }
.menu__note { position: relative; rotate: -4deg; color: var(--ink); margin-left: 10px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; overflow: clip;
  padding-top: calc(var(--nav-h) + clamp(32px, 6vh, 72px));
  padding-bottom: clamp(72px, 9vw, 128px);
  min-height: min(100svh, 1000px);
  display: flex; align-items: center;
}
.hero__route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route--ghost { stroke: rgba(28, 35, 64, .16); stroke-width: 4; stroke-dasharray: .1 15; }
.route--trail { stroke: var(--fox); stroke-width: 6; stroke-dasharray: .1 15; }
.plane-glyph { filter: drop-shadow(0 6px 6px rgba(28, 35, 64, .18)); }
.js .hero__route { opacity: 0; transition: opacity .6s var(--out); }
.js .hero__route.is-ready { opacity: 1; }
.js [data-route-plane], .js [data-map-plane] { opacity: 0; transition: opacity .4s var(--out); }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--maxw));
}
.hero__copy { position: relative; }
.hero__title { margin-top: 28px; }
.hero__sub { margin-top: 28px; max-width: 34ch; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }

/* Hero intro (pure CSS so it never waits on JS) */
.hero__title .w { display: inline-block; }
.hero__title .w { animation: wordIn .8s var(--spring) both; animation-delay: calc(40ms + var(--i, 0) * 70ms); }
[data-intro] { animation: popIn .9s var(--spring) both; }
[data-intro] { animation-delay: calc(140ms + var(--d, 0) * 90ms); }
/* words only move and fade (no scale) so the headline paints at its final size right away */
@keyframes wordIn {
  0% { opacity: 0; translate: 0 .4em; }
  50% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes popIn {
  0% { opacity: 0; translate: 0 .5em; scale: .7; }
  60% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
.hero .hl__mark path { stroke-dashoffset: 1; animation: draw 1s var(--out) 1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__visual { position: relative; width: min(100%, 470px); justify-self: end; margin-right: clamp(0px, 3vw, 40px); }
.hero__media { border-radius: var(--r-xl); box-shadow: var(--sh-fox), 0 0 0 10px var(--paper); rotate: 2deg; }

.hfloat { position: absolute; z-index: 3; margin: 0; }
.hfloat { animation: popIn .9s var(--spring) both, bob 6s ease-in-out infinite alternate; animation-delay: calc(140ms + var(--d, 0) * 90ms), 2.2s; }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -12px; } }
.hfloat--chat {
  top: 9%; left: -24%; display: flex; align-items: flex-end; gap: 10px; rotate: -4deg;
  background: var(--paper); padding: 14px 18px 14px 14px; border-radius: 22px 22px 22px 6px; box-shadow: var(--sh-card);
  max-width: 260px;
}
.hfloat__avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--t-pink); color: var(--sunset-deep); font-family: var(--f-display); font-weight: 800;
}
.hfloat__msg { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.hfloat__meta { display: block; margin-top: 4px; font-size: .78rem; color: var(--ink-2); }
.hfloat--pass { bottom: 10%; left: -28%; rotate: 3deg; animation-duration: .9s, 7s; }
.mpass {
  width: 236px; background: var(--paper); border-radius: 20px; box-shadow: var(--sh-sky); padding: 14px 16px; position: relative;
}
.mpass__main { display: grid; grid-template-columns: 1fr 1fr; position: relative; column-gap: 12px; }
.mpass__k { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mpass__main b { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.1; }
.mpass__main b:nth-of-type(2) { text-align: right; }
.mpass__main .mpass__k:nth-child(2) { text-align: right; }
.mpass__plane { position: absolute; left: 50%; top: 58%; translate: -50% -50%; width: 22px; height: 22px; color: var(--sky-deep); }
.mpass__row {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 2px dashed rgba(28, 35, 64, .12); font-size: .74rem; color: var(--ink-2);
}
.mpass__row b { display: block; color: var(--ink); font-size: .85rem; }
.mpass__row b.ok { color: var(--lagoon-deep); }
.hfloat--sent {
  top: -4%; right: -8%; rotate: 7deg;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--lagoon); color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--sh-mint), inset 0 0 0 3px rgba(255, 255, 255, .5);
}
.hfloat--sent .ico { stroke-width: 3; }
.hfloat--note { right: -2%; bottom: -11%; rotate: -5deg; display: flex; align-items: center; gap: 4px; }
.hfloat--note .hand__arrow { rotate: 200deg; translate: 0 -12px; }
.doodle--sun { --size: 76px; top: -9%; left: 4%; color: #E69A00; animation-name: popIn, spin; animation-duration: .9s, 40s; animation-timing-function: var(--spring), linear; animation-iteration-count: 1, infinite; animation-fill-mode: both, none; animation-delay: calc(140ms + var(--d) * 90ms), 1.5s; }
.doodle--palm { --size: 70px; right: -12%; top: 40%; color: var(--lagoon-deep); }
@keyframes spin { to { rotate: 360deg; } }

/* =========================================================
   DEPARTURES BOARD
   ========================================================= */
.board { position: relative; overflow: hidden; padding-block: 18px 30px; z-index: 3; margin-top: -40px; }
.board__strip {
  width: 112%; margin-left: -6%; rotate: -2deg;
  background: var(--sun); box-shadow: var(--sh-sun);
  padding: 14px 0 18px;
}
.board__head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding-inline: calc(6% + var(--gutter)); margin-bottom: 12px;
}
.board__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.board__title .ico { width: 20px; height: 20px; rotate: 45deg; }
.board__sub { font-size: .92rem; font-weight: 600; color: #4A3A12; }
.board__viewport { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.board__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.board__viewport:hover .board__track { animation-play-state: paused; }
.board.is-paused .board__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.board__list { display: flex; list-style: none; margin: 0; padding: 0; }
.board__list li {
  display: flex; align-items: center; gap: 14px; padding: 4px 28px;
  border-right: 2px dotted rgba(28, 35, 64, .25); white-space: nowrap;
}
.board__code { font-weight: 700; font-size: .82rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #4A3A12; }
.flap { display: inline-flex; gap: 3px; perspective: 300px; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; }
.flap__c {
  position: relative; display: inline-grid; place-items: center; width: 1.25em; height: 1.65em;
  background: var(--paper); color: var(--ink); border-radius: 6px; line-height: 1;
  box-shadow: 0 2px 0 rgba(28, 35, 64, .14);
}
.flap__c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(28, 35, 64, .14); }
.flap__c.is-flip { animation: flip .09s linear; }
@keyframes flip { 50% { transform: rotateX(80deg); } }
.board__status { font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); }
.s-mint { background: var(--t-mint); color: var(--lagoon-deep); }
.s-sky { background: var(--t-sky); color: var(--sky-deep); }
.s-peach { background: var(--t-peach); color: var(--fox-deep); }
.s-pink { background: var(--t-pink); color: var(--sunset-deep); }

/* =========================================================
   PROBLEM (sticky notes)
   ========================================================= */
.problem { background: var(--paper); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); max-width: 1120px; margin-inline: auto; }
.note {
  position: relative; rotate: var(--rot);
  min-height: 250px; padding: 40px 28px 64px;
  background: var(--note-bg); border-radius: 6px 6px 34px 6px;
  box-shadow: 0 1px 1px rgba(28, 35, 64, .05), 0 26px 40px -24px var(--note-sh);
}
.note--sun { --note-bg: #FFEFB0; --note-sh: rgba(230, 160, 0, .55); }
.note--pink { --note-bg: #FFDCE4; --note-sh: rgba(255, 79, 109, .45); }
.note--sky { --note-bg: #D7EEFF; --note-sh: rgba(63, 182, 255, .5); }
.note__tape {
  position: absolute; top: -14px; left: 50%; width: 104px; height: 30px; translate: -50% 0; rotate: -4deg;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .75) 0 6px, rgba(255, 255, 255, .55) 6px 12px);
  box-shadow: 0 2px 6px rgba(28, 35, 64, .08);
}
.note__time { color: var(--ink-2); font-size: 1.55rem; }
.note__text { margin-top: 12px; font-family: var(--f-display); font-weight: 650; font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.3; letter-spacing: -.015em; }
.note__stamp {
  position: absolute; right: 18px; bottom: 16px; rotate: -10deg;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px;
  border: 2.5px solid currentColor; border-radius: 10px; color: var(--lagoon-deep); background: rgba(255, 255, 255, .55);
  font-family: var(--f-display); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
.note__stamp .ico { stroke-width: 3; width: 16px; height: 16px; }
.js .note__stamp { opacity: 0; scale: 2; }
.js .problem.is-resolved .note__stamp { animation: thump .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.js .problem.is-resolved .note:nth-child(2) .note__stamp { animation-delay: .18s; }
.js .problem.is-resolved .note:nth-child(3) .note__stamp { animation-delay: .36s; }
@keyframes thump {
  0% { opacity: 0; scale: 2.2; }
  60% { opacity: 1; scale: .92; }
  100% { opacity: 1; scale: 1; }
}
.resolve {
  margin: clamp(56px, 7vw, 96px) auto 0; max-width: none; text-align: center; text-wrap: balance;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.1; letter-spacing: -.035em;
}
.resolve__burst {
  display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; vertical-align: -.2em; margin-right: .15em;
  border-radius: 50%; background: var(--g-sunrise); color: var(--ink); rotate: -8deg;
}
.resolve__burst svg { width: 58%; height: 58%; }
.resolve__em { display: inline-block; background: var(--sun); padding: 0 .25em .04em; border-radius: .25em; rotate: -2deg; }

/* =========================================================
   FEATURES (five scrapbook spreads)
   ========================================================= */
.features { background: var(--sand); overflow: clip; }
.spread {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
  padding-block: clamp(40px, 6vw, 88px);
}
.spread--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.features .section-head + .spread { padding-top: 0; }
.spread--flip .spread__visual { order: -1; }
.spread__copy > p:not(.tag):not(.benefit) { color: var(--ink-2); max-width: 46ch; margin-top: 16px; font-size: 1.1rem; }
.spread__copy--center { text-align: center; margin-inline: auto; max-width: 660px; }
.spread__copy--center > p:not(.tag):not(.benefit) { margin-inline: auto; }
.spread__copy--center .benefit { justify-content: center; }
.spread__visual { position: relative; }

/* 1. Answers 24/7: day/night clock panel */
.clockpanel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 40px);
  background: linear-gradient(160deg, #D9EFFF 0%, #EAF7FF 55%, #FFF1C9 100%);
  box-shadow: var(--sh-sky);
}
.clockpanel__night {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(160deg, #DCD3FF 0%, #ECE6FF 55%, #D9E8FF 100%);
  animation: night 12s ease-in-out infinite;
}
.clockpanel__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.clockpanel__stars i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 8px rgba(255, 255, 255, .9); opacity: 0; animation: night 12s ease-in-out infinite;
}
.clockpanel__stars i:nth-child(1) { top: 12%; left: 46%; }
.clockpanel__stars i:nth-child(2) { top: 24%; left: 70%; width: 4px; height: 4px; }
.clockpanel__stars i:nth-child(3) { top: 8%; left: 88%; }
.clockpanel__stars i:nth-child(4) { top: 36%; left: 92%; width: 4px; height: 4px; }
.clockpanel__stars i:nth-child(5) { top: 30%; left: 56%; width: 5px; height: 5px; }
@keyframes night { 0%, 18% { opacity: 0; } 30%, 68% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes day { 0%, 18% { opacity: 1; } 30%, 68% { opacity: 0; } 80%, 100% { opacity: 1; } }

.dial {
  position: relative; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; float: left; margin: 0 22px 8px 0;
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9);
}
.dial__arm { position: absolute; inset: 0; animation: spin 12s linear infinite; }
.dial__sun, .dial__moon { position: absolute; left: 50%; width: 46px; height: 46px; translate: -50% 0; }
.dial__sun { top: 10px; color: #D97A00; }
.dial__sun use { fill: var(--sun); stroke-width: 1.8; }
.dial__moon { bottom: 10px; rotate: 180deg; color: var(--lilac-deep); }
.dial__moon use { fill: #F4F0FF; stroke-width: 1.8; }
.dial__hill {
  position: absolute; left: -10%; right: -10%; bottom: -34%; height: 78%; border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #7FDCCF, var(--lagoon));
}
.clockpanel__time { display: grid; padding-top: 18px; font-family: var(--f-display); }
.clockpanel__time span {
  grid-area: 1 / 1; font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.t-day { animation: day 12s ease-in-out infinite; }
.t-night { opacity: 0; animation: night 12s ease-in-out infinite; color: var(--lilac-deep); }
.clockpanel__time b { grid-area: 2 / 1; margin-top: 8px; font-family: var(--f-hand); font-size: 1.55rem; font-weight: 600; color: var(--sky-deep); }
.clockpanel .mini-label { clear: both; display: flex; margin: 26px 0 14px; }
.qa { display: flex; flex-direction: column; gap: 8px; }
.qa li {
  max-width: 82%; padding: 11px 16px; font-size: .98rem; line-height: 1.4; font-weight: 500;
}
.qa__q { align-self: flex-end; background: var(--sky); color: var(--ink); border-radius: 20px 20px 6px 20px; font-weight: 600; }
.qa__a { align-self: flex-start; background: var(--paper); border-radius: 20px 20px 20px 6px; box-shadow: 0 8px 18px -12px rgba(28, 35, 64, .3); }
.js .clockpanel .qa li { opacity: 0; translate: 0 14px; scale: .9; }
.js .is-in .clockpanel .qa li { animation: bubble .6s var(--spring) both; }
.js .is-in .clockpanel .qa li:nth-child(2) { animation-delay: .5s; }
.js .is-in .clockpanel .qa li:nth-child(3) { animation-delay: 1.1s; }
.js .is-in .clockpanel .qa li:nth-child(4) { animation-delay: 1.6s; }
.js .is-in .clockpanel .qa li:nth-child(5) { animation-delay: 2.2s; }
.js .is-in .clockpanel .qa li:nth-child(6) { animation-delay: 2.7s; }
@keyframes bubble { to { opacity: 1; translate: 0 0; scale: 1; } }
/* pause ambient loops when off screen */
.js [data-ambient] *, .js [data-ambient] { animation-play-state: paused; }
.js [data-ambient].is-visible *, .js [data-ambient].is-visible { animation-play-state: running; }

/* 2. Itinerary postcard stack */
.itin { min-height: 520px; display: flex; flex-direction: column; align-items: center; }
.itin__prompt {
  position: relative; z-index: 12; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 14px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-card);
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; rotate: -2deg;
}
.itin__prompt .ico { color: var(--sky-deep); }
.itin__label { margin-top: 14px; }
.postcards { position: relative; width: 100%; height: clamp(360px, 36vw, 440px); margin-top: 8px; }
.postcard {
  --p: var(--n);
  position: absolute; left: 50%; top: 50%; width: min(82%, 380px); margin: 0;
  background: var(--paper); border-radius: 22px; padding: 12px 12px 16px;
  box-shadow: 0 1px 2px rgba(28, 35, 64, .08), 0 28px 50px -28px rgba(28, 35, 64, .45);
  z-index: calc(10 - var(--p));
  transform: translate(calc(-50% + var(--p) * 18px), calc(-50% + var(--p) * -14px)) rotate(calc(var(--p) * 3.5deg - 5deg));
  transition: transform .9s var(--spring-soft), opacity .6s var(--out);
}
.postcard .media { border-radius: 14px; }
.postcard__body { display: flex; align-items: center; gap: 12px; padding: 12px 6px 0; }
.postcard__day { font-size: 1.5rem; color: var(--fox-deep); flex: none; }
.postcard__body b { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.postcard__ico { margin-left: auto; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--t-sun); color: #8A4B00; }
.js [data-postcards]:not(.is-in) .postcard {
  opacity: 0;
  transform: translate(calc(-50% - 140px), calc(-50% + 220px)) rotate(-28deg);
}
.js [data-postcards] .postcard { transition-delay: calc((4 - var(--n)) * 120ms); }
.js [data-postcards].is-shuffling .postcard { transition-delay: 0s; }
.postcard.is-leaving { transform: translate(calc(-50% + 70%), calc(-50% - 30px)) rotate(14deg) !important; transition-duration: .5s; transition-timing-function: var(--out); }

/* 3. Polaroids */
.polaroids {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px); max-width: 1040px; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: 24px;
}
.polaroids__note { position: absolute; top: -34px; left: 2%; z-index: 4; display: flex; align-items: flex-start; gap: 4px; rotate: -3deg; }
.polaroids__note .hand__arrow { rotate: 70deg; translate: 0 14px; }
.polaroid {
  position: relative; background: var(--paper); padding: 14px 14px 0; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(28, 35, 64, .08), 0 34px 56px -30px rgba(28, 35, 64, .45);
  rotate: var(--rot);
}
.polaroid .media { border-radius: 4px; }
.polaroid figcaption { padding: 14px 6px 18px; text-align: center; font-size: 1.6rem; color: var(--ink); }
.polaroid:hover, .js .polaroid.is-in:hover { rotate: 0deg; scale: 1.04; z-index: 2; }
.sticker-dot {
  position: absolute; top: -20px; right: -16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px 10px 12px; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 800; font-size: 1rem; color: var(--ink);
  border: 4px solid var(--paper); box-shadow: 0 10px 22px -10px rgba(28, 35, 64, .45); rotate: 10deg;
}
.sticker-dot .ico { width: 18px; height: 18px; }
.sticker-dot--sun { background: var(--sun); }
.sticker-dot--sky { background: var(--sky); rotate: -8deg; }
.sticker-dot--pink { background: var(--sunset); rotate: 6deg; }
.polaroid:hover .sticker-dot { animation: wiggle .6s var(--out); }
@keyframes wiggle { 20% { transform: rotate(-12deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }

/* 4. Luggage tag */
.ltag-wrap { position: relative; max-width: 420px; margin-inline: auto; padding-top: 96px; filter: drop-shadow(0 30px 34px rgba(230, 150, 0, .35)); }
.ltag__string { position: absolute; z-index: 2; top: 0; left: 50%; width: 120px; height: 140px; translate: -50% 0; fill: none; stroke: var(--sunset); stroke-width: 3.5; stroke-linecap: round; }
.ltag {
  position: relative; background: var(--sun); border-radius: 0 0 30px 30px;
  clip-path: polygon(22% 0, 78% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
  rotate: -2deg; transform-origin: 50% 0;
  animation: sway 5s ease-in-out infinite alternate;
  padding-bottom: 6px;
}
@keyframes sway { from { rotate: -3deg; } to { rotate: 2deg; } }
.ltag__hole { position: absolute; top: 20px; left: 50%; width: 26px; height: 26px; translate: -50% 0; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 5px rgba(255, 255, 255, .75); }
.ltag__head {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 66px 20px 6px;
  font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em;
}
.ltag__ex { font-family: var(--f-body); font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); color: #6B3D00; letter-spacing: .02em; }
.ltag__fields { margin: 14px 16px 0; background: var(--paper); border-radius: 22px; padding: 6px 18px; }
.ltag__fields div {
  display: grid; grid-template-columns: 112px 1fr 28px; align-items: center; gap: 8px; padding: 12px 0;
  border-bottom: 2px dashed rgba(28, 35, 64, .1);
}
.ltag__fields div:last-child { border-bottom: 0; }
.ltag__fields dt { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.ltag__fields dt .ico { width: 16px; height: 16px; }
.ltag__fields dd { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }
.tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lagoon); color: var(--ink); }
.tick .ico { width: 15px; height: 15px; stroke-width: 3.2; }
.js [data-loop]:not(.is-play) .ltag__fields dd { opacity: 0; translate: -10px 0; }
.js [data-loop]:not(.is-play) .tick { scale: 0; }
.js [data-loop].is-play .ltag__fields dd { animation: typeIn .5s var(--out) both; animation-delay: calc(.3s + var(--i) * .45s); }
.js [data-loop].is-play .tick { animation: tickPop .5s var(--spring) both; animation-delay: calc(.6s + var(--i) * .45s); }
@keyframes typeIn { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tickPop { from { scale: 0; rotate: -45deg; } to { scale: 1; rotate: 0deg; } }
.ltag__foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px 18px; font-weight: 700; font-size: .95rem; }

/* 5. Printing quote */
.printer { position: relative; max-width: 440px; margin-inline: auto; }
.printer__body {
  position: relative; z-index: 2; height: 92px; border-radius: 30px 30px 24px 24px;
  background: linear-gradient(180deg, #F1ECFF 0%, #DCD0FF 100%); box-shadow: var(--sh-lilac), inset 0 -4px 0 rgba(109, 40, 217, .08);
}
.printer__light { position: absolute; top: 22px; right: 28px; width: 12px; height: 12px; border-radius: 50%; background: var(--lagoon); box-shadow: 0 0 0 4px rgba(25, 195, 177, .25); }
.printer__slot { position: absolute; left: 9%; right: 9%; bottom: 18px; height: 12px; border-radius: var(--r-pill); background: rgba(109, 40, 217, .35); }
.printer__out { position: relative; z-index: 1; margin: -26px 11% 0; overflow: hidden; padding: 0 10px 34px; }
.quote {
  position: relative; background: var(--paper); padding: 44px 22px 26px; border-radius: 0 0 18px 18px;
  box-shadow: 0 24px 40px -24px rgba(109, 40, 217, .45);
  background-image: radial-gradient(circle at 50% 0, rgba(167, 139, 250, .12), transparent 40%);
}
.quote__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 2px dashed rgba(28, 35, 64, .1); }
.quote__logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--g-sunrise); color: var(--ink); }
.quote__head b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.08rem; }
.quote__head span { font-size: .8rem; color: var(--ink-2); }
.quote__lines { padding-top: 6px; }
.quote__lines li {
  display: flex; align-items: center; gap: 10px; padding: 11px 0; font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid var(--line);
}
.quote__lines li > .ico { width: 18px; height: 18px; color: var(--lilac-deep); }
.quote__lines li span { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--lagoon-deep); font-size: .85rem; font-weight: 700; }
.quote__lines li span .ico { width: 15px; height: 15px; stroke-width: 3; }
.quote__lines .quote__total { border-bottom: 0; padding-top: 16px; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; }
.quote__lines .quote__total span { color: var(--ink); font-size: .95rem; padding: 6px 12px; border-radius: var(--r-pill); background: var(--t-sun); }
.quote__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 14px; border-top: 2px dashed rgba(28, 35, 64, .1); }
.quote__foot .hand { font-size: 1.35rem; color: var(--lilac-deep); max-width: 14ch; }
.quote__stamp {
  position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 0;
  border: 4px solid currentColor; outline: 2px solid currentColor; outline-offset: -11px;
  color: var(--sunset-deep); background: rgba(255, 255, 255, .7);
  font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; rotate: -14deg;
}
.quote__stamp .ico { width: 22px; height: 22px; stroke-width: 3.2; }
.js [data-loop]:not(.is-play) .quote { translate: 0 -100%; }
.js [data-loop]:not(.is-play) .quote__lines li, .js [data-loop]:not(.is-play) .quote__stamp, .js [data-loop]:not(.is-play) .quote__foot .hand { opacity: 0; }
.js [data-loop].is-play .quote { animation: print 2.8s both; }
.js [data-loop].is-play .quote__lines li { animation: typeIn .45s var(--out) both; animation-delay: calc(.5s + var(--i) * .44s); }
.js [data-loop].is-play .quote__stamp { animation: stampIn .6s cubic-bezier(.3, 1.7, .5, 1) 3.1s both; }
.js [data-loop].is-play .quote__foot .hand { animation: typeIn .5s var(--out) 2.7s both; }
@keyframes print {
  0% { translate: 0 -100%; animation-timing-function: var(--out); }
  14% { translate: 0 -82%; } 22% { translate: 0 -82%; animation-timing-function: var(--out); }
  36% { translate: 0 -64%; } 44% { translate: 0 -64%; animation-timing-function: var(--out); }
  58% { translate: 0 -46%; } 66% { translate: 0 -46%; animation-timing-function: var(--out); }
  80% { translate: 0 -26%; } 86% { translate: 0 -26%; animation-timing-function: var(--out); }
  100% { translate: 0 0; }
}
@keyframes stampIn {
  0% { opacity: 0; scale: 2.6; rotate: -40deg; }
  60% { opacity: 1; scale: .9; }
  100% { opacity: 1; scale: 1; rotate: -14deg; }
}

/* =========================================================
   DEMO (chat phone)
   ========================================================= */
.demo { background: var(--t-sky); overflow: clip; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; z-index: 1; }
.demo__copy { position: relative; }
.demo__copy .lead { margin-top: 20px; }
.tabs { display: inline-flex; gap: 4px; padding: 6px; margin-top: 36px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--sh-sky); }
.tabs__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink-2);
  transition: background-color .3s var(--out), color .3s var(--out), scale .2s var(--spring);
}
.tabs__btn .ico { width: 18px; height: 18px; }
.tabs__btn:hover { color: var(--ink); background: var(--t-sun); }
.tabs__btn[aria-selected="true"] { background: var(--fox); color: var(--ink); box-shadow: 0 10px 20px -10px rgba(255, 107, 44, .8); }
.tabs__btn:active { scale: .94; }
.demo__label { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 700; font-size: .92rem; color: var(--ink-2); }
.demo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sunset); box-shadow: 0 0 0 0 rgba(255, 79, 109, .5); animation: ping 1.8s var(--out) infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(255, 79, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 79, 109, 0); } }
.demo__note { position: absolute; right: -4%; bottom: -84px; rotate: -4deg; display: flex; align-items: flex-start; gap: 4px; }
.demo__note .hand__arrow { rotate: -20deg; }

.demo__stage { position: relative; display: grid; place-items: center; padding-block: 24px; border-radius: 40px; }
.demo__stage:focus-visible { outline-offset: 8px; }
.doodle--plane { --size: 70px; top: 4%; left: 2%; color: var(--sky-deep); rotate: -12deg; animation: bob 4s ease-in-out infinite alternate; }
.doodle--compass { --size: 64px; bottom: 10%; left: 4%; color: var(--fox-deep); animation: spin 30s linear infinite; }
.doodle--suitcase { --size: 66px; top: 16%; right: 2%; color: var(--sunset-deep); rotate: 10deg; animation: bob 5s ease-in-out infinite alternate-reverse; }

.phone {
  position: relative; z-index: 3;
  width: min(360px, 100%); height: clamp(580px, 72vh, 680px);
  padding: 10px; border-radius: 54px; background: var(--g-sunrise);
  box-shadow: 0 50px 80px -40px rgba(255, 79, 109, .6), 0 0 0 2px rgba(255, 255, 255, .6) inset;
  rotate: 2deg;
}
.phone__screen { height: 100%; border-radius: 44px; background: #FFFCF7; overflow: hidden; display: flex; flex-direction: column; }
.phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 6px; font-weight: 700; font-size: .85rem; }
.phone__island { width: 92px; height: 26px; border-radius: var(--r-pill); background: var(--ink); }
.phone__bat { width: 24px; height: 12px; border-radius: 4px; border: 2px solid var(--ink); position: relative; }
.phone__bat::after { content: ""; position: absolute; inset: 1px 5px 1px 1px; border-radius: 1px; background: var(--lagoon); }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 10px 18px 12px; border-bottom: 1px solid var(--line); }
.chat__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--g-sunrise); color: var(--ink); }
.chat__avatar .ico { width: 20px; height: 20px; }
.chat__head b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; }
.chat__head span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--lagoon-deep); font-weight: 600; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--lagoon); }
.chat__log {
  flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 40px); mask: linear-gradient(180deg, transparent 0, #000 40px);
}
.msg {
  flex: none; max-width: 84%; padding: 10px 14px; font-size: .92rem; line-height: 1.42;
  animation: msgIn .5s var(--spring) both;
}
@keyframes msgIn { from { opacity: 0; scale: .6; translate: 0 14px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.msg--user { align-self: flex-end; background: var(--sky); color: var(--ink); font-weight: 600; border-radius: 20px 20px 6px 20px; transform-origin: 100% 100%; }
.msg--ai { align-self: flex-start; background: var(--paper); border-radius: 20px 20px 20px 6px; box-shadow: 0 6px 16px -10px rgba(28, 35, 64, .35), inset 0 0 0 1px var(--line); transform-origin: 0 100%; }
.msg--typing { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fox); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; background: var(--sunset); }
.dots i:nth-child(3) { animation-delay: .3s; background: var(--lilac); }
@keyframes dot { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.msg--event {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--lagoon); color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: .85rem;
}
.msg--event .ico { width: 15px; height: 15px; stroke-width: 3; }
.msg__list { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 3px; }
.msg__list li::before { content: "•"; color: var(--fox); font-weight: 800; margin-right: 6px; }
.chat__compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; border-top: 1px solid var(--line); }
.chat__input {
  flex: 1; min-height: 42px; display: flex; align-items: center; padding: 8px 16px; border-radius: var(--r-pill);
  background: #F1F3F8; font-size: .9rem; line-height: 1.3; overflow: hidden; white-space: nowrap;
}
.chat__ph { color: #707a96; }
.chat__input.is-typing::after { content: ""; width: 2px; height: 1.1em; margin-left: 1px; background: var(--fox); animation: caret 1s steps(1) infinite; flex: none; }
@keyframes caret { 50% { opacity: 0; } }
.chat__send { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--fox); color: var(--ink); flex: none; transition: scale .25s var(--spring); }
.chat__send.is-pressed { scale: .82; }
.chat__send .ico { width: 18px; height: 18px; }

/* =========================================================
   HOW IT WORKS (map route)
   ========================================================= */
.how { background: var(--t-mint); }
.map { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 10px solid var(--paper); box-shadow: var(--sh-mint), 0 1px 2px rgba(28, 35, 64, .06); }
.map__media { border-radius: 0; }
.map__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.route--map { stroke-width: 8; stroke-dasharray: .1 24; }
.route--ghost.route--map { stroke: rgba(28, 35, 64, .25); stroke-width: 7; }
.stop__ring { fill: var(--paper); filter: drop-shadow(0 8px 10px rgba(28, 35, 64, .18)); }
.stop__dot--sun { fill: var(--sun); }
.stop__dot--sky { fill: var(--sky); }
.stop__dot--pink { fill: var(--sunset); }
.map__code {
  position: absolute; left: var(--x); top: var(--y); translate: -50% calc(-100% - clamp(18px, 3.4vw, 46px));
  padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--paper);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(.75rem, 1.2vw, 1rem); letter-spacing: .08em;
}
.map__code::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: inherit; border-radius: 2px; }
.stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(28px, 4vw, 48px); }
.stub {
  position: relative; background: var(--paper); border-radius: var(--r-lg); padding: 28px 28px 30px;
  box-shadow: var(--sh-card);
}
.stub::before, .stub::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: var(--t-mint); translate: 0 -50%; }
.stub::before { left: -13px; }
.stub::after { right: -13px; }
.stub__num {
  display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 800; font-size: .85rem; letter-spacing: .02em;
}
.stub:nth-child(1) .stub__num { background: var(--sun); }
.stub:nth-child(2) .stub__num { background: var(--sky); }
.stub:nth-child(3) .stub__num { background: var(--sunset); }
.stub p { margin-top: 8px; color: var(--ink-2); }

/* =========================================================
   CHANNELS
   ========================================================= */
.channels { background: var(--paper); overflow: clip; }
.chan { position: relative; max-width: 1080px; margin-inline: auto; }
.chan__line { position: absolute; left: 0; top: 14px; width: 100%; height: 120px; fill: none; stroke: var(--sky); stroke-width: 3; stroke-dasharray: 1 12; stroke-linecap: round; z-index: 0; overflow: visible; }
.chan__line path { vector-effect: non-scaling-stroke; }
.chan__list { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; }
.chan__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; rotate: var(--rot); }
.chan__badge {
  width: clamp(96px, 11vw, 136px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 6px solid var(--paper); color: var(--ink);
  box-shadow: 0 22px 36px -20px var(--b-sh), 0 0 0 2px rgba(28, 35, 64, .05);
  transition: scale .4s var(--spring);
}
.chan__badge .ico { width: 44%; height: 44%; }
.chan__badge use { stroke-width: 1.7; }
.chan__badge--sky { background: var(--sky); --b-sh: rgba(63, 182, 255, .9); }
.chan__badge--mint { background: var(--lagoon); --b-sh: rgba(25, 195, 177, .9); }
.chan__badge--pink { background: var(--sunset); --b-sh: rgba(255, 79, 109, .8); }
.chan__badge--lilac { background: var(--lilac); --b-sh: rgba(167, 139, 250, .9); }
.chan__badge--sun { background: var(--sun); --b-sh: rgba(230, 160, 0, .8); }
.chan__item:hover .chan__badge { animation: hop .7s var(--spring); }
@keyframes hop { 0% { translate: 0 0; } 35% { translate: 0 -18px; scale: 1.06 .94; } 65% { translate: 0 0; scale: .96 1.04; } 100% { translate: 0 0; scale: 1; } }
.chan__name { font-family: var(--f-display); font-weight: 750; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.2; }

/* =========================================================
   WHY (passport stamps)
   ========================================================= */
.why {
  background-color: var(--t-sun);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Cpath d='M0 20c20-14 40-14 60 0s40 14 60 0 30-10 40-6' fill='none' stroke='%23E8B53A' stroke-opacity='.28' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 160px 40px;
}
.stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px); }
.stamp-cell { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.stamp-cell > p { color: var(--ink-2); max-width: 26ch; font-weight: 500; }
.stamp {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: min(100%, 250px); aspect-ratio: 1; padding: 30px;
  color: var(--stamp); border: 3.5px solid currentColor; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  rotate: var(--rot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.2 1.75'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.2 1.75'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stamp::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed currentColor; border-radius: inherit; opacity: .75; }
.stamp--rect { border-radius: 22px; aspect-ratio: 1.2; }
.stamp--oval { border-radius: 50%; aspect-ratio: 1.3; }
.stamp--ticket { border-radius: 16px; aspect-ratio: 1.15; }
.stamp--ticket::after { content: ""; position: absolute; inset: 22px -2px; border-left: 3.5px dotted currentColor; border-right: 3.5px dotted currentColor; opacity: .6; }
.stamp--sunset { --stamp: var(--sunset-deep); }
.stamp--sky { --stamp: var(--sky-deep); }
.stamp--lagoon { --stamp: var(--lagoon-deep); }
.stamp--fox { --stamp: var(--fox-deep); }
.stamp--lilac { --stamp: var(--lilac-deep); }
.stamp .ico { width: 30px; height: 30px; }
.stamp h3 {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.12; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance; max-width: 15ch;
}
.stamp__tiny { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.js [data-reveal="stamp"] { opacity: 1; translate: 0 0; }
.js [data-reveal="stamp"] .stamp { opacity: 0; scale: 1.7; }
.js [data-reveal="stamp"] > p { opacity: 0; translate: 0 10px; transition: opacity .6s var(--out), translate .6s var(--out); transition-delay: calc(var(--d) * 110ms + .3s); }
.js [data-reveal="stamp"].is-in .stamp { animation: thump .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d) * 110ms); }
.js [data-reveal="stamp"].is-in > p { opacity: 1; translate: 0 0; }
.js [data-reveal="stamp"].is-in .stamp { opacity: 1; scale: 1; }
.stamp { transition: transform .45s var(--spring); }
.stamp-cell:hover .stamp { transform: rotate(-7deg) scale(1.05); }

/* =========================================================
   PROOF (placeholder, hidden until real testimonials exist)
   ========================================================= */
/* Hidden by default. Delete this one line (or the data-hide-until-ready attribute in index.html) to show the section. */
[data-hide-until-ready] { display: none; }
.proof { background: var(--sand); }
.proof__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pcard { position: relative; aspect-ratio: 3 / 2; padding: 28px; background: var(--paper); border-radius: 18px; box-shadow: var(--sh-card); rotate: var(--rot); display: flex; flex-direction: column; justify-content: space-between; }
.pcard__text { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; max-width: 70%; }
.pcard__stamp { position: absolute; top: 18px; right: 18px; width: 56px; height: 66px; border: 2px dashed var(--sunset); border-radius: 6px; display: grid; place-items: center; color: var(--sunset-deep); }

/* =========================================================
   PRICING (boarding pass)
   ========================================================= */
.pricing { background: var(--t-peach); }
.pass {
  --stub: 270px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub);
  max-width: 1000px; margin-inline: auto;
  background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--sh-fox), 0 1px 2px rgba(28, 35, 64, .05);
  transition: transform .3s var(--out);
}
.pass::before, .pass::after {
  content: ""; position: absolute; right: var(--stub); width: 44px; height: 44px; border-radius: 50%;
  background: var(--t-peach); translate: 50% 0; z-index: 2;
}
.pass::before { top: -22px; }
.pass::after { bottom: -22px; }
.pass__main { padding: clamp(28px, 4.5vw, 56px); }
.pass__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pass__airline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; }
.pass__airline .ico { color: var(--fox-deep); }
.pass__class { padding: 6px 12px; border-radius: var(--r-pill); background: var(--t-lilac); color: var(--lilac-deep); font-weight: 700; font-size: .85rem; }
.pass__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px; margin: 30px 0 26px; }
.pass__k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pass__route b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 2.8vw, 2.3rem); letter-spacing: -.035em; line-height: 1.05; }
.pass__to { text-align: right; }
.pass__arc { position: relative; width: clamp(70px, 10vw, 120px); align-self: center; }
.pass__arc svg:first-child { width: 100%; height: auto; fill: none; stroke: var(--fox); stroke-width: 3; stroke-dasharray: .1 9; stroke-linecap: round; }
.pass__arc .ico { position: absolute; left: 50%; top: -6px; translate: -50% 0; width: 26px; height: 26px; color: var(--fox-deep); rotate: 45deg; }
.pass__lead { font-size: 1.15rem; max-width: 46ch; padding-top: 24px; border-top: 2px dashed rgba(28, 35, 64, .1); }
.pass__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 24px 0 34px; }
.pass__list li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.pass__list .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--lagoon); color: var(--ink); stroke-width: 3.2; }
.pass__stub {
  display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 4vw, 48px) 32px;
  background: var(--sun); border-radius: 0 var(--r-xl) var(--r-xl) 0;
  border-left: 3px dashed rgba(28, 35, 64, .18);
}
.pass__stub .pass__k { color: #5A4310; }
.pass__stub b { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.pass__barcode {
  margin-top: auto; height: 76px; border-radius: 4px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 13px, transparent 13px 15px, var(--ink) 15px 16px, transparent 16px 20px);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--paper); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__head .lead { margin-top: 20px; }
.faq__mail {
  display: inline-block; margin-top: 22px; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: var(--fox); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.faq__mail:hover { text-decoration-style: wavy; }
.doodle--suitcase-lg { --size: 96px; position: relative; display: block; margin-top: 40px; color: var(--sunset-deep); rotate: -10deg; }
.faq__list { display: grid; gap: 12px; }
.faq__item { border-radius: 24px; background: var(--sand); transition: background-color .35s var(--out); }
.faq__item[open] { background: var(--t-sun); }
.faq__item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 18px 20px 18px 26px; cursor: pointer; border-radius: 24px;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.2rem); letter-spacing: -.015em; line-height: 1.25;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover .faq__plus { scale: 1.1; }
.faq__plus {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 6px 14px -8px rgba(28, 35, 64, .35);
  transition: rotate .55s var(--spring), background-color .3s var(--out), scale .3s var(--spring);
}
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.faq__plus::after { rotate: 90deg; }
.faq__item[open] .faq__plus { rotate: 135deg; background: var(--fox); }
.faq__a { padding: 0 26px 24px; color: var(--ink); max-width: 64ch; }
.faq__a a { font-weight: 700; text-decoration-color: var(--fox); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta { background: var(--sand); padding-block: clamp(72px, 9vw, 128px); }
.cta__banner {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 80px);
  border-radius: clamp(32px, 4vw, 56px); background: var(--g-sunrise);
  box-shadow: 0 50px 90px -50px rgba(255, 79, 109, .7);
}
.cta__banner::before {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient(30% 30% at 25% 30%, rgba(255, 255, 255, .45), transparent 70%), radial-gradient(26% 26% at 78% 70%, rgba(255, 200, 61, .7), transparent 70%), radial-gradient(22% 22% at 70% 20%, rgba(255, 255, 255, .3), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
.cta__title { max-width: 16ch; margin-inline: auto; }
.cta__sub { margin: 24px auto 40px; color: var(--ink); max-width: 44ch; }
.cta__email { margin-top: 20px; font-size: .95rem; font-weight: 600; max-width: none; }
.cta__email a { font-weight: 800; overflow-wrap: anywhere; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doodle--cta-sun { --size: clamp(80px, 9vw, 130px); top: 8%; left: 5%; color: var(--ink); opacity: .22; animation: spin 50s linear infinite; }
.doodle--cta-palm { --size: clamp(90px, 10vw, 150px); bottom: 4%; right: 5%; color: var(--ink); opacity: .2; }
.cta__confetti { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.confetti {
  position: absolute; left: 50%; top: 60%; width: var(--cs, 26px); height: var(--cs, 26px); color: var(--cc);
  will-change: transform, opacity;
}
.confetti svg { width: 100%; height: 100%; }
.confetti use { stroke-width: 2.2; fill: var(--cf, none); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--t-sky); padding: clamp(56px, 7vw, 88px) 0 calc(36px + 76px); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; align-items: start; }
.footer__tag { margin-top: 12px; font-size: 1.7rem; color: var(--sky-deep); }
.footer__nav { display: grid; gap: 4px; justify-items: start; }
.footer__nav a, .footer__mail { padding: 6px 0; font-weight: 600; text-decoration: none; }
.footer__nav a:hover, .footer__mail:hover { text-decoration: underline; text-decoration-color: var(--fox); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.footer__mail { overflow-wrap: anywhere; font-family: var(--f-display); font-weight: 700; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(28, 35, 64, .1);
  font-size: .9rem; color: var(--ink-2);
}
.footer__made { display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================
   FLOATING EMAIL BUTTON
   ========================================================= */
.fab {
  position: fixed; z-index: 60;
  right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: var(--r-pill);
}
.fab:focus-visible { outline: none; }
.fab:focus-visible .fab__btn { outline: 3px solid var(--ink); outline-offset: 3px; }
.fab__btn {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--sun) -20%, var(--fox) 45%, var(--sunset) 110%);
  box-shadow: 0 16px 30px -12px rgba(255, 79, 109, .75), inset 0 0 0 3px rgba(255, 255, 255, .4);
  animation: fabBob 3.4s ease-in-out infinite;
  transition: scale .35s var(--spring), box-shadow .35s var(--out);
}
@keyframes fabBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.fab__env { width: 32px; height: 32px; overflow: visible; }
.fab__body { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
.fab__letter { fill: var(--t-sun); stroke: var(--ink); stroke-width: 1.4; transition: translate .4s var(--spring); }
.fab__front { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; opacity: .45; }
.fab__flap { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; transition: transform .4s var(--spring); }
.fab:hover .fab__btn, .fab:focus-visible .fab__btn { scale: 1.08; animation-play-state: paused; box-shadow: 0 22px 36px -12px rgba(255, 79, 109, .85), inset 0 0 0 3px rgba(255, 255, 255, .5); }
.fab:hover .fab__flap, .fab:focus-visible .fab__flap { transform: scaleY(-1); }
.fab:hover .fab__letter, .fab:focus-visible .fab__letter { translate: 0 -6px; }
.fab:active .fab__btn { scale: .92; }
.fab__label {
  padding: 10px 16px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font-family: var(--f-display); font-weight: 700; font-size: .95rem; white-space: nowrap;
  box-shadow: var(--sh-card); opacity: 0; translate: 16px 0; pointer-events: none;
  transition: opacity .3s var(--out), translate .45s var(--spring);
}
@media (hover: hover) and (min-width: 768px) {
  .fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; translate: 0 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .hfloat--chat { left: -12%; }
  .hfloat--pass { left: -16%; }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__burger { display: grid; }

  .hero { min-height: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .hero__sub { max-width: 40ch; }
  .hero__visual { justify-self: center; margin-right: 0; width: min(78%, 420px); }

  .spread, .spread--flip { grid-template-columns: minmax(0, 1fr); }
  .spread--flip .spread__visual { order: 0; }
  .spread__copy { max-width: 620px; }

  .demo__grid { grid-template-columns: minmax(0, 1fr); }
  .demo__note { display: none; }

  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .doodle--suitcase-lg { display: none; }

  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .notes { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .note { min-height: 0; }

  .polaroids { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 44px; padding-top: 44px; }
  .polaroids__note { top: -10px; }
  .polaroid:nth-child(odd) { translate: -12px 0; }
  .polaroid:nth-child(even) { translate: 12px 0; }

  .stops { grid-template-columns: minmax(0, 1fr); }
  .map { border-width: 6px; }

  .chan__line { display: none; }
  .chan__list { flex-wrap: wrap; justify-content: center; gap: 28px 12px; }
  .chan__item { flex: 0 1 30%; min-width: 100px; }

  .pass { grid-template-columns: minmax(0, 1fr); }
  .pass::before, .pass::after { display: none; }
  .pass__stub { border-left: 0; border-top: 3px dashed rgba(28, 35, 64, .18); border-radius: 0 0 var(--r-xl) var(--r-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pass__barcode { grid-column: 1 / -1; height: 56px; }
  .pass__list { grid-template-columns: minmax(0, 1fr); }

  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .proof__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  :root { --nav-h: 76px; }
  .nav__inner { padding-left: 12px; min-height: 60px; }
  .brand__word { font-size: 1.3rem; }
  .brand__mark img { height: 28px; }

  .hero__title { margin-top: 22px; }
  .hero__ctas { gap: 12px 20px; }
  .hero__ctas .btn { width: 100%; }
  .hero__visual { width: 76%; margin-left: 10%; }
  .hfloat--chat { left: -16%; top: 6%; max-width: 210px; padding: 10px 14px 10px 10px; }
  .hfloat__msg { font-size: .9rem; }
  .hfloat__avatar { width: 30px; height: 30px; }
  .hfloat--pass { left: -18%; bottom: 6%; }
  .mpass { width: 196px; padding: 12px; }
  .mpass__main b { font-size: 1.3rem; }
  .hfloat--sent { right: -10%; font-size: .92rem; padding: 10px 14px; }
  .hfloat--note { bottom: -14%; right: -8%; font-size: 1.35rem; }
  .doodle--palm { --size: 52px; right: -14%; }
  .doodle--sun { --size: 58px; }

  .flap { font-size: 1.1rem; }

  .itin { min-height: 0; }
  .postcards { height: 400px; margin-top: 20px; }
  .postcard { transform: translate(calc(-50% + var(--p) * 10px), calc(-50% + var(--p) * -10px)) rotate(calc(var(--p) * 2.5deg - 4deg)); }

  .tabs { display: flex; width: 100%; }
  .tabs__btn { flex: 1; padding: 0 8px; font-size: .92rem; gap: 6px; }
  .phone { height: 580px; rotate: 0deg; }
  .doodle--plane, .doodle--suitcase, .doodle--compass { --size: 48px; }
  .doodle--plane { left: -2%; top: 0; }
  .doodle--suitcase { right: -2%; top: 6%; }

  .clockpanel { padding: 22px; }
  .dial { width: 104px; height: 104px; margin-right: 16px; }
  .dial__sun, .dial__moon { width: 36px; height: 36px; }

  .ltag__fields div { grid-template-columns: 92px 1fr 26px; }
  .printer__out { margin-inline: 6%; }

  .stamps { grid-template-columns: minmax(0, 1fr); }
  .stamp { width: min(100%, 230px); }

  .pass__route { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pass__arc { display: none; }
  .pass__to { text-align: left; }
  .pass__stub { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px; }
  .pass .btn { width: 100%; }

  .faq__item summary { padding: 16px 16px 16px 20px; }
  .faq__a { padding: 0 20px 20px; }

  .cta .btn--xl { width: 100%; padding: 0 20px; font-size: 1.1rem; min-height: 60px; }
  .fab__btn { width: 52px; height: 52px; }
  .fab__env { width: 28px; height: 28px; }
}

/* =========================================================
   PHONE POLISH (phones only; desktop and laptop are untouched)
   Tighter rhythm, swipeable rows instead of tall stacks, and
   tidier stickers so every screen reads cleanly.
   ========================================================= */
@media (max-width: 760px) {
  .section { padding-block: 64px; }
  .section-head { margin-bottom: 36px; }
  .h2 { font-size: clamp(2.1rem, 9vw, 2.75rem); line-height: 1.02; letter-spacing: -.035em; }
  .lead { font-size: 1.06rem; }

  /* Hero: fewer, tidier stickers around a smaller photo */
  .hero { padding-bottom: 64px; }
  .hero__grid { gap: 56px; }
  .hero__visual { width: min(72%, 360px); margin: 0 auto; }
  .hfloat--note, .doodle--palm { display: none; }

  /* Problem notes: compact */
  .notes { gap: 26px; }
  .note { padding: 30px 22px 56px; }
  .note__text { font-size: 1.12rem; }
  .resolve { margin-top: 44px; }

  /* Feature spreads: less air between them */
  .spread { padding-block: 28px; gap: 28px; }
  .spread__copy > p:not(.tag):not(.benefit) { font-size: 1.02rem; }

  /* Polaroids: a swipeable row instead of three tall stacked cards */
  .polaroids {
    display: flex; gap: 18px; max-width: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 20px calc(-1 * var(--gutter)) 0; padding: 34px var(--gutter) 26px;
  }
  .polaroids::-webkit-scrollbar { display: none; }
  .polaroid, .polaroid:nth-child(odd), .polaroid:nth-child(even) { flex: 0 0 70%; scroll-snap-align: center; translate: none; }
  .polaroid figcaption { font-size: 1.35rem; padding: 10px 4px 14px; }
  .polaroids__note { display: none; }
  .sticker-dot { top: -16px; right: -6px; font-size: .9rem; padding: 7px 12px 7px 10px; }

  /* Channels: true circles in a neat 3 + 2 layout */
  .chan__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 4%; }
  .chan__item { flex: 0 0 29%; min-width: 0; gap: 10px; }
  .chan__badge { width: 76px; height: 76px; aspect-ratio: auto; border-width: 5px; }
  .chan__name { font-size: .9rem; }

  /* Stamps: two per row, sized for a phone */
  .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .stamp-cell { gap: 12px; }
  .stamp { width: 100%; padding: 16px 12px; gap: 5px; }
  .stamp--rect, .stamp--ticket { aspect-ratio: 1.05; }
  .stamp--oval { aspect-ratio: 1.15; }
  .stamp::before { inset: 5px; }
  .stamp .ico { width: 22px; height: 22px; }
  .stamp h3 { font-size: .8rem; max-width: none; letter-spacing: 0; }
  .stamp__tiny { display: none; }
  .stamp-cell > p { font-size: .88rem; line-height: 1.45; }

  /* Demo + footer */
  .phone { height: 540px; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .footer { padding-top: 48px; }
}

@media (max-width: 400px) {
  .hero__title { font-size: 2.75rem; }
  .hfloat--chat { left: -10%; max-width: 190px; }
  .hfloat--pass { left: -12%; }
  .mpass { width: 180px; }
  .hfloat--sent { right: -6%; }
}

/* Older Safari (before 16) ignores overflow: clip; fall back so nothing scrolls sideways */
@supports not (overflow: clip) {
  main > section:not(.faq), .footer, .hero { overflow-x: hidden; }
}

/* ---------- Reduced motion: everything in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-reveal="sticker"] { opacity: 1; translate: 0 0; scale: 1; rotate: var(--rot, 0deg); }
  .js [data-reveal] .hl__mark path, .hero .hl__mark path { stroke-dashoffset: 0; }
  .board__track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .board__list { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .board__list[aria-hidden="true"] { display: none; }
  .blob, .cta__banner::before { animation: none !important; }
  .clockpanel__night, .clockpanel__stars i, .t-night { animation: none !important; opacity: 0; }
  .t-day { animation: none !important; opacity: 1; }
  .dial__arm { animation: none !important; }
  .cta__confetti { display: none; }
}