/* ============================================================
   Time Zone Buddy — Home page
   Aurora dark throughout, drawn like the app: a deep navy canvas,
   low amber / teal / blue blobs, frosted cards.
   Motion lives in js/home.js; everything here is the resting layout.
   The other pages still use Tailwind (css/styles.css).
   ============================================================ */

:root {
  --ink: #06081A;
  --ink-2: #020C14;
  --card: rgba(255, 255, 255, 0.045);
  --teal: #2ECAD4;
  --teal-l: #64D6DD;
  --teal-h: #8EE3E8;
  --blue: #2E88D4;
  --amber: #F5A623;
  --green: #34C759;
  --green-b: #5EE27F;
  --purple: #C9A6FF;
  --purple-m: #A97DFF;
  --purple-d: #7D4FE0;
  --indigo: #8EA2FF;
  --t1: #F5F7FA;
  --t2: #A8B6CC;
  --t3: #8B97AB;
  --t4: #6B7688;
  --hair: rgba(255, 255, 255, 0.08);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --gutter: 22px;
  --nav-h: 60px;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; background-color: var(--ink); scroll-padding-top: 70px; }

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--t1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--teal-l); }
a:hover { color: var(--teal-h); }
button { font-family: inherit; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--teal); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* EU waitlist (js/eu-waitlist.js). A class, not [hidden], because CTAs set their own display. */
.eu-hidden { display: none !important; }
[hidden] { display: none !important; }

/* Atmosphere: the brand's navy canvas and three aurora blobs, never saturated. */
.atmo {
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: calc(100lvh + 120px); z-index: -1;
  pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}
.atmo i { position: absolute; border-radius: 50%; filter: blur(46px); }
.atmo .b1 { width: 560px; height: 560px; left: -220px; top: -160px; background: radial-gradient(circle, rgba(245, 166, 35, 0.26), rgba(245, 166, 35, 0) 70%); }
.atmo .b2 { width: 680px; height: 680px; right: -300px; top: 28%; background: radial-gradient(circle, rgba(46, 202, 212, 0.22), rgba(46, 202, 212, 0) 70%); }
.atmo .b3 { width: 720px; height: 720px; left: -200px; bottom: -340px; background: radial-gradient(circle, rgba(46, 136, 212, 0.3), rgba(46, 136, 212, 0) 70%); }

/* ── Type ─────────────────────────────────────────────────── */

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-l);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; border-radius: 1px; background: currentColor; flex: none; }

.display {
  margin: 0; font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.03; color: var(--t1);
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--teal-l); }

.lede { margin: 0; color: var(--t2); font-size: 16px; line-height: 1.55; }

/* Tier tags: small caps pills, the app's own colours (purple = Plus, green = free). */
.tag {
  display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
.tag.plus { background: rgba(169, 125, 255, 0.2); color: var(--purple); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, 0.35); }
.tag.free { background: rgba(52, 199, 89, 0.16); color: var(--green-b); box-shadow: inset 0 0 0 1px rgba(94, 226, 127, 0.3); }

/* ── Nav ──────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(6, 8, 26, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--hair);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--t1); text-decoration: none; }
.brand:hover { color: var(--t1); }
.brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.nav-links { display: none; }
.nav-links a { color: var(--t2); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--t1); }
.nav-links a.pill-cta, .nav-links a.pill-cta:hover { color: #06121F; }

.pill-cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 19px; border: 0;
  background: linear-gradient(180deg, #7FE3E8, var(--teal)); color: #06121F; font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(46, 202, 212, 0.6);
}
.pill-cta:hover { color: #06121F; filter: brightness(1.08); }

/* Mobile menu */
.nav-m { display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border-radius: 19px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07);
  color: var(--t1); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn path { transform-origin: 12px 12px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }
.menu {
  position: fixed; z-index: 49; left: 12px; right: 12px; top: calc(var(--nav-h) + 8px);
  display: flex; flex-direction: column; padding: 8px; border-radius: 22px;
  background: rgba(14, 20, 40, 0.92); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: 90% 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu.open { opacity: 1; transform: none; }
.menu a {
  display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 14px;
  color: var(--t1); text-decoration: none; font-size: 17px; font-weight: 600;
}
.menu a:hover, .menu a:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--t1); }
.menu a + a { border-top: 1px solid var(--hair); }

.badge { display: inline-block; line-height: 0; border-radius: 10px; }
.badge img { height: 48px; width: auto; }

.btn {
  display: flex; justify-content: center; align-items: center; height: 48px; padding: 0 20px; border-radius: 16px; border: 0;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  color: var(--t1); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.btn:hover { color: var(--t1); background: rgba(255, 255, 255, 0.12); }
.btn-teal, .btn-teal:hover { background: linear-gradient(180deg, #7FE3E8, var(--teal)); color: #06121F; box-shadow: 0 12px 30px -12px rgba(46, 202, 212, 0.6); }

/* ── Phone ────────────────────────────────────────────────── */

.phone {
  position: absolute; width: 250px; aspect-ratio: 1470 / 3000;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.6));
}
.phone .glass {
  position: absolute; top: 2.233%; left: 5.102%; width: 89.796%; height: 95.533%;
  overflow: hidden; border-radius: 13% / 6%; background: #05070F;
}
.phone .glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* A one-pass light sweep across the glass (hero entrance, Plus card). */
.sweep { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sweep::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, rgba(142, 227, 232, 0), rgba(142, 227, 232, 0.2) 50%, rgba(142, 227, 232, 0));
  transform: translateX(0) skewX(-12deg); opacity: 0;
}

/* ── Floating chip (hero) ─────────────────────────────────── */

.chip {
  position: absolute; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 16px; white-space: nowrap;
  background: rgba(14, 20, 40, 0.88); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.chip small {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--green-b);
}
.chip small.away { color: var(--amber); }
.chip small svg { width: 12px; height: 12px; }
.chip b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  padding: calc(var(--nav-h) + 24px) 0 0;
}
.hero-copy { position: relative; z-index: 2; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 16px; }
.hero h1 { font-size: clamp(40px, 11.3vw, 50px); }
.hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hero-cta p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--t3); }

.eu-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px;
  background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1);
}
.eu-card p:not(.eyebrow) { margin: 0; font-size: 14px; color: var(--t2); }

/* Headline words rise out of a mask on load. */
.m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.06em 0.14em; margin: 0 -0.06em -0.14em; }
.w { display: inline-block; }
.display em.w { font-style: normal; }

/* The visual is laid out at 390 px and scaled to fit (--s is set by home.js). */
.hero-visual { position: relative; height: calc(430px * var(--s, 1)); margin-top: 26px; }
.rig { position: absolute; left: 50%; top: 0; width: 390px; transform-origin: 50% 0; transform: translateX(-50%) scale(var(--s, 1)); }
.hero-rig { height: 560px; }
.hero-rig .glow {
  position: absolute; left: -40px; top: -40px; width: 470px; height: 560px; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 40% 38%, rgba(46, 202, 212, 0.22), rgba(46, 202, 212, 0) 70%),
    radial-gradient(ellipse 35% 30% at 70% 60%, rgba(245, 166, 35, 0.14), rgba(245, 166, 35, 0) 70%);
}
.hero-rig .phone { left: 60px; top: 0; width: 270px; }
.hero-rig .chip-a { left: 4px; top: 128px; }
.hero-rig .chip-b { left: 226px; top: 238px; }

.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 22, 0), rgba(4, 10, 22, 0.97) 72%);
}
.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--t3); text-decoration: none;
}
.scroll-cue svg { width: 12px; height: 12px; }

/* ── Scroll story ─────────────────────────────────────────── */

.story { position: relative; height: 700vh; height: 700lvh; }
/* Safari on iOS 26 draws the page under its floating toolbar, and even the large viewport stops
   short of the screen's bottom edge. On phones the stage runs 120 px past it so the story never
   ends in a hard line; everything in it is anchored to the top, so the overhang is only backdrop. */
.stage { position: sticky; top: 0; height: 100vh; height: calc(100lvh + 120px); overflow: hidden; }

.progress {
  position: absolute; left: var(--gutter); right: calc(var(--gutter) + 92px); top: calc(var(--nav-h) + 8px);
  display: flex; gap: 5px; z-index: 5;
}
.progress i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.progress i::after {
  content: ''; display: block; height: 100%; background: var(--teal-l);
  transform-origin: 0 50%; transform: scaleX(var(--f, 0));
}

.skip-tour {
  position: absolute; z-index: 6; top: calc(var(--nav-h) - 2px); right: var(--gutter); padding: 4px 0 4px 10px;
  font-size: 12px; font-weight: 600; color: var(--t3); text-decoration: none;
}
.skip-tour:hover { color: var(--t1); }
.chapters {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 30px); z-index: 5;
}
.chapter { position: absolute; left: 0; right: 0; top: 0; }
/* Phones read eyebrow, headline, lede; desktop keeps the headline first and opens the rest. */
.chapter .body { display: flex; flex-direction: column; gap: 10px; }
.chapter .more { display: contents; }
.chapter .eyebrow { order: 0; }
.chapter h2 { order: 1; }
.chapter .lede { order: 2; }
.chapter h2 { font-size: clamp(32px, 9.2vw, 40px); }
.chapter .lede { font-size: 15px; }
.chapter .num { display: none; }

.story-rig { height: 560px; top: 0; left: 0; transform-origin: 0 0; transform: none; }
.story-rig .phone { left: 70px; top: 0; }
.shots img { opacity: 0; }
.shots img:first-child { opacity: 1; }

/* Overlays share the rig's coordinates: 0,0 is the phone's top edge. */
.ov { position: absolute; left: 0; top: 0; width: 390px; opacity: 0; pointer-events: none; }

.panel {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(24, 32, 58, 0.96), rgba(12, 18, 36, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.panel h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

/* 1 · Travel Mode */
.ov-travel { left: 30px; top: 150px; width: 330px; }
.arrive { position: relative; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.route { width: 100%; height: auto; overflow: visible; }
.route .arc-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; stroke-dasharray: 3 6; }
.route .arc { fill: none; stroke: var(--teal-l); stroke-width: 2.5; stroke-linecap: round; }
.route .end.a { fill: var(--green-b); }
.route .end.b { fill: var(--amber); transform-box: fill-box; transform-origin: center; }
.route text { fill: var(--t3); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.route text.lb { fill: var(--amber); }
.route .jet { color: var(--t1); filter: drop-shadow(0 0 6px rgba(100, 214, 221, 0.9)); }
.arrive h3 { margin-top: 4px; font-size: 22px; }
.arrive > p { margin: 0; font-size: 13px; color: var(--t2); }
.split {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.split > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; }
.split > div + div { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.split small { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.split small svg { width: 12px; height: 12px; }
.split small.h { color: var(--green-b); }
.split small.a { color: var(--amber); }
.split b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 2 · Meeting Overlap */
.ov-overlap { left: 16px; top: 120px; width: 358px; }
.overlap { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.overlap header { display: flex; flex-direction: column; gap: 3px; }
.overlap header small { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--t3); }
.overlap h3 em { font-style: normal; color: var(--teal-l); font-variant-numeric: tabular-nums; }
.ogrid { display: grid; grid-template-columns: 78px 1fr; gap: 10px; }
.names { display: flex; flex-direction: column; padding-top: 20px; }
.names div { height: 40px; display: flex; flex-direction: column; justify-content: center; }
.names b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.names small { font-size: 11px; color: var(--teal-l); font-variant-numeric: tabular-nums; opacity: 0; }
.tracks { position: relative; }
.axis { position: relative; height: 20px; }
.axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 9px; font-weight: 600; color: var(--t4); }
.trk { position: relative; height: 40px; }
.trk::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.blk {
  position: absolute; top: 14px; width: 50%; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #2E9E5B, #3FBF6E);
}
.band {
  position: absolute; left: 50%; width: 12.5%; top: 16px; bottom: -2px; border-radius: 8px;
  background: rgba(100, 214, 221, 0.16); border: 1.5px solid var(--teal-l);
  box-shadow: 0 0 24px rgba(46, 202, 212, 0.35); transform-origin: 50% 0;
}
.best {
  position: absolute; left: 50%; bottom: calc(100% + 6px); white-space: nowrap;
  padding: 3px 8px; border-radius: 7px; background: var(--teal); color: #06121F;
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  opacity: 0; transform: translate(-50%, 6px) scale(0.85);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.best.on { opacity: 1; transform: translate(-50%, 0); }

/* 3 · Meeting Hub */
.ov-hub { left: 12px; top: 176px; width: 366px; display: flex; flex-direction: column; gap: 10px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 12px; display: flex; flex-direction: column; gap: 2px; border-radius: 18px; }
.tile small { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--c); }
.tile small i { width: 7px; height: 7px; border-radius: 4px; background: var(--c); }
.tile b { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile p { margin: 0; font-size: 11px; color: var(--t2); }
.heads { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 30px; }
.heads .ic { width: 32px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(169, 125, 255, 0.2); color: var(--purple); }
.heads .ic svg { width: 16px; height: 16px; }
.heads b { display: block; font-size: 14px; }
.heads small { display: block; font-size: 12px; color: var(--t2); }

/* 4 · DST */
.ov-dst { height: 560px; }
.ov-dst .scrim { position: absolute; left: -160px; right: -160px; top: -60px; height: 700px; background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(3, 6, 16, 0.8) 55%, rgba(3, 6, 16, 0) 100%); }
.notifs { position: absolute; left: 18px; top: 24px; width: 354px; }
.notif {
  position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 11px; padding: 11px 13px; border-radius: 22px;
  background: rgba(40, 46, 66, 0.86); border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
}
.notif img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.notif > div { flex: 1; min-width: 0; }
.notif header { display: flex; justify-content: space-between; gap: 8px; }
.notif header b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif header span { font-size: 12px; color: var(--t3); flex: none; }
.notif p { margin: 1px 0 0; font-size: 13px; line-height: 1.35; color: #DCE3EE; }
.home-free {
  position: absolute; left: 50%; top: 392px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 18px; background: rgba(52, 199, 89, 0.16); color: var(--green-b);
  border: 1px solid rgba(94, 226, 127, 0.3); font-size: 12px; font-weight: 700; transform: translateX(-50%);
}
.home-free svg { width: 14px; height: 14px; }

/* 5 · Time Impacts */
.ov-alerts { left: 28px; top: 84px; width: 334px; }
.impacts { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.impacts header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.impacts header span { font-size: 11px; font-weight: 600; color: var(--t2); }
.seg { position: relative; display: grid; grid-template-columns: 0.8fr 1.25fr 1fr; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); }
.seg span { position: relative; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 0; color: var(--t2); transition: color 0.3s ease; }
.seg span.on { color: var(--t1); }
.impacts ul { list-style: none; margin: 0; padding: 0; }
.impacts li { display: flex; align-items: center; gap: 12px; padding: 7px 2px; transition: opacity 0.35s ease; }
.impacts li + li { border-top: 1px solid var(--hair); }
.impacts .date {
  width: 42px; height: 42px; flex: none; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(142, 162, 255, 0.14); color: #B7C3FF; font-size: 17px; font-weight: 700; line-height: 1;
}
.impacts .date small { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; margin-top: 3px; }
.impacts li.clk .date { background: rgba(245, 166, 35, 0.18); color: var(--amber); }
.impacts b { display: block; font-size: 14px; font-weight: 600; }
.impacts li div small { display: block; font-size: 11px; color: var(--t2); }
.impacts li.dim { opacity: 0.22; }

/* 6 · Lock Screen widgets */
.ov-lock { height: 560px; }
.lw {
  position: absolute; color: #fff;
  background: rgba(72, 78, 104, 0.62); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.85);
}
.lw .tag { position: absolute; top: -9px; right: 10px; }
.lw svg { width: 14px; height: 14px; flex: none; }
.lw.rect { left: 4px; top: 150px; width: 212px; padding: 12px 14px; border-radius: 20px; }
.lw.rect small { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.lw.rect b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lw.rect em { font-style: normal; font-size: 14px; font-weight: 700; margin-left: 3px; opacity: 0.75; }
.lw.rect .d { font-size: 14px; font-weight: 500; opacity: 0.6; }
.lw.circ {
  left: 264px; top: 112px; width: 100px; height: 100px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lw.circ .tag { right: 50%; transform: translateX(50%); }
.lw.circ small { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.lw.circ b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lw.inline {
  left: 96px; top: 318px; display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 20px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.lw.inline b { font-weight: 600; font-variant-numeric: tabular-nums; }

.stage-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 210px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 10, 22, 0), rgba(3, 10, 22, 0.94));
}
.rail-v { display: none; }

/* ── Sections after the story ─────────────────────────────── */

.section { position: relative; padding: 72px var(--gutter) 0; max-width: 1120px; margin: 0 auto; }
.section h2.display { font-size: clamp(32px, 9vw, 52px); }
.stack { display: flex; flex-direction: column; gap: 20px; }

/* Try it: the time-shift bar. Drawn like the app's docked bar: a glass pill, a white thumb,
   blue fill from Now when live, amber once you've moved off it. */
.shift {
  margin-top: 26px; padding: 14px; border-radius: 28px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08);
}
.shift-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.readout { min-width: 0; }
.readout small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3); }
.readout b { display: flex; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.readout .rel { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--blue); }
.shift.shifted .readout .rel { color: var(--amber); }
.count { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; font-size: 14px; color: var(--t2); white-space: nowrap; }
.count i { width: 8px; height: 8px; border-radius: 4px; background: var(--green); box-shadow: 0 0 8px rgba(52, 199, 89, 0.7); }
.count.none i { background: var(--t4); box-shadow: none; }
.count b { color: var(--t1); }

.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zc {
  --sky: linear-gradient(160deg, #1B2350, #111735);
  position: relative; display: flex; flex-direction: column; min-height: 150px; padding: 12px 14px 18px; border-radius: 20px;
  background: var(--sky); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.8);
}
.zc[data-sky="day"] { --sky: linear-gradient(160deg, #237FA8, #1B4E86); }
.zc[data-sky="dusk"] { --sky: linear-gradient(160deg, #C4631F, #7C2F4B); }
.zc[data-sky="night"] { --sky: linear-gradient(160deg, #1B2350, #111735); }
.zc .pin {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.25); font-size: 11px; font-weight: 600; color: var(--teal-h);
}
.zc .pin svg { width: 12px; height: 12px; }
.zc .ic { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; color: #FFD479; }
.zc[data-sky="night"] .ic { color: var(--indigo); }
.zc .city { margin-top: auto; padding-top: 10px; font-size: 16px; font-weight: 600; }
.zc .t { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zc .meta { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.zc .st { margin-top: 4px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc.in .st { color: #9DF2B4; }
.zc .work { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); transition: background 0.3s ease; }
.zc.in .work { background: var(--green); box-shadow: 0 0 10px rgba(52, 199, 89, 0.6); }

.bar {
  display: flex; align-items: center; margin-top: 12px; padding: 4px 8px; border-radius: 28px;
  background: rgba(20, 28, 52, 0.92); border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
/* The thumb is 52 px wide and travels 26 px in from each end, so the rail and the ticks are
   inset by the same 26 px and everything shares one coordinate: --f, 0 → 1. */
.track {
  --f: 0.5; --tc: var(--blue);
  position: relative; flex: 1; min-width: 0; height: 56px; cursor: grab;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  outline: none;
}
.track.dragging { cursor: grabbing; }
.shift.shifted .track { --tc: var(--amber); }
.rail { position: absolute; left: 26px; right: 26px; top: 16px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.rail .fill {
  position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--tc);
  left: calc(min(var(--f), 0.5) * 100%); width: calc(max(var(--f) - 0.5, 0.5 - var(--f)) * 100%);
}
.rail .mid { position: absolute; left: 50%; top: -4px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.35); }
.ticks { position: absolute; left: 26px; right: 26px; top: 36px; height: 14px; pointer-events: none; }
.ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--t4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticks span:nth-child(1) { left: 0; }
.ticks span:nth-child(2) { left: 25%; }
.ticks span:nth-child(3) { left: 50%; color: var(--t3); }
.ticks span:nth-child(4) { left: 75%; }
.ticks span:nth-child(5) { left: 100%; }
.thumb {
  position: absolute; top: 4px; left: calc(var(--f) * (100% - 52px)); width: 52px; height: 32px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #8A93A6;
  background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.thumb svg { width: 18px; height: 18px; }
.track.dragging .thumb { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.12); }
.track:focus-visible .thumb { box-shadow: 0 0 0 3px var(--teal-l), 0 4px 14px rgba(0, 0, 0, 0.5); }
/* Tapping the rail glides the thumb there; dragging follows the finger exactly. */
.track.glide .thumb { transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s ease; }
.track.glide .rail .fill { transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1), width 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.shift .now {
  flex: none; width: 66px; height: 36px; padding: 0; border-radius: 18px; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 700;
}
.shift .now:disabled { background: rgba(46, 136, 212, 0.14); color: #6FB2EE; cursor: default; }
.shift .now:disabled::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 3px; background: currentColor; vertical-align: 1px; }
.shift-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 4px 2px; }
.shift-foot .note { margin: 0; font-size: 13px; color: var(--t3); }
.shift-foot .badge img { height: 44px; }

/* City view */
.city .seo { margin: 0; font-size: 14px; line-height: 1.6; color: var(--t3); }
.sky { position: relative; height: 520px; margin-top: 30px; }
.sky .phone { left: 50%; top: 0; width: 250px; transform: translateX(-50%); }
.sky .glow {
  position: absolute; left: 50%; top: 40px; width: 420px; height: 440px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(245, 166, 35, 0.18), rgba(46, 136, 212, 0.12) 40%, rgba(46, 136, 212, 0) 70%);
}
.cycle img { opacity: 0; animation: sky 16s linear infinite; }
.cycle img:nth-child(1) { opacity: 1; animation: none; }
.cycle img:nth-child(2) { animation-delay: 0s; }
.cycle img:nth-child(3) { animation-delay: 4s; }
.cycle img:nth-child(4) { animation-delay: 8s; }
@keyframes sky {
  0%, 18% { opacity: 0; }
  25%, 43% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.pills li {
  padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09); font-size: 13px; font-weight: 600; color: var(--t2);
}

.facts { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.fact { display: flex; gap: 14px; align-items: flex-start; }
.fact .ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(46, 202, 212, 0.14); color: var(--teal-l); display: flex; align-items: center; justify-content: center; }
.fact .ic svg { width: 20px; height: 20px; }
.fact h3 { margin: 0; font-size: 15px; font-weight: 700; }
.fact p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--t2); }
.privacy .facts { margin-top: 24px; }

.plans { display: grid; gap: 14px; }
.plan {
  position: relative; overflow: hidden; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px;
  background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1);
}
.plan.plus {
  background: linear-gradient(160deg, rgba(125, 79, 224, 0.42), rgba(34, 22, 78, 0.6) 55%, rgba(14, 18, 44, 0.9));
  border-color: rgba(201, 166, 255, 0.45);
  box-shadow: 0 30px 60px -24px rgba(150, 110, 255, 0.4);
}
.plan header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.plan .rec {
  position: absolute; top: 0; left: 22px; margin: 0; padding: 4px 10px; border-radius: 0 0 9px 9px;
  background: var(--purple); color: #1D0F45; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.plan.plus { padding-top: 34px; }
.plan .price { text-align: right; white-space: nowrap; }
.plan .price b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price small { font-size: 13px; color: var(--t2); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; flex: 1; align-content: start; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.plan li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--green-b); }
.plan.plus li svg { color: var(--purple); }
.plan li.no { color: var(--t3); }
.plan li.no svg { color: var(--t3); }
.plan .fine { margin: 0; font-size: 12px; color: var(--t2); }
.plan .btn { margin-top: 4px; }
.plan.plus .btn { background: linear-gradient(180deg, var(--purple-m), var(--purple-d)); color: #fff; box-shadow: 0 12px 30px -12px rgba(150, 110, 255, 0.6); }
.plan.life .btn { box-shadow: inset 0 0 0 1.5px rgba(100, 214, 221, 0.5); color: var(--teal-h); background: rgba(46, 202, 212, 0.08); }
.solo { margin: 0; font-size: 13px; color: var(--t3); }

.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer;
  list-style: none; font-size: 16px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; width: 10px; height: 10px; flex: none; margin-right: 4px;
  border-right: 2px solid var(--t2); border-bottom: 2px solid var(--t2); transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--t2); }
.more-link { font-weight: 600; text-decoration: none; }

.final { position: relative; overflow: hidden; text-align: center; padding: 96px var(--gutter) 48px; }
.final::before {
  content: ''; position: absolute; left: 50%; top: 20px; width: 560px; height: 480px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(46, 202, 212, 0.2), rgba(46, 202, 212, 0) 70%);
}
.final > * { position: relative; }
.final .mark { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 20px; box-shadow: 0 20px 50px -12px rgba(46, 202, 212, 0.5); }
.final h2 { font-size: clamp(34px, 9vw, 58px); max-width: 680px; margin: 0 auto; }
.final p { margin: 14px auto 22px; max-width: 520px; color: var(--t2); }
.final .badge img { height: 54px; margin: 0 auto; }
.eu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.foot { padding: 40px var(--gutter) 40px; border-top: 1px solid var(--hair); max-width: 1120px; margin: 24px auto 0; font-size: 13px; color: var(--t3); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .brand span { font-size: 15px; }
.foot-brand .brand img { width: 28px; height: 28px; }
.foot-brand p { margin: 10px 0 0; max-width: 320px; }
.foot nav { display: flex; flex-direction: column; gap: 0; }
.foot nav a { padding: 8px 0; }
.foot h2 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--t2); }
.foot a { color: var(--t3); text-decoration: none; }
.foot a:hover { color: var(--t1); }
.foot-base { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 12px; }
.foot-base p { margin: 0; }
.foot-base a { color: var(--t2); }

/* Consent bar (js/analytics.js injects it; styled here because this page has no Tailwind). */
.tzb-cc {
  position: fixed; z-index: 60; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(680px, calc(100% - 2rem));
  padding: 1rem 1.25rem; border-radius: 18px; font-size: 14px; line-height: 1.5; color: var(--t2);
  background: rgba(14, 20, 40, 0.94); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.tzb-cc__inner { display: flex; flex-direction: column; gap: 0.875rem; }
.tzb-cc__text { margin: 0; flex: 1; }
.tzb-cc__text strong { color: var(--t1); }
.tzb-cc__text a { color: var(--teal-l); }
.tzb-cc__actions { display: flex; gap: 0.625rem; flex-shrink: 0; }
.tzb-cc__btn { font-weight: 600; font-size: 14px; padding: 0.5rem 1.1rem; border-radius: 12px; cursor: pointer; border: 1.5px solid transparent; }
.tzb-cc__btn--solid { background: var(--teal); color: #06121F; }
.tzb-cc__btn--ghost { background: transparent; color: var(--t2); border-color: rgba(255, 255, 255, 0.16); }
.tzb-cc__short { display: none; }
@media (min-width: 640px) { .tzb-cc__inner { flex-direction: row; align-items: center; } }
@media (max-width: 639px) {
  .tzb-cc {
    left: 0; right: 0; bottom: 0; transform: none; width: 100%; border-radius: 16px 16px 0 0; border-width: 1px 0 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.45;
  }
  .tzb-cc__inner { gap: 0.5rem; }
  .tzb-cc__actions { justify-content: flex-end; }
  .tzb-cc__btn { font-size: 13px; padding: 0.4rem 0.95rem; border-radius: 10px; }
  .tzb-cc__full { display: none; }
  .tzb-cc__short { display: inline; }
}

/* Gentle reveal once the pin has released. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.plan.plus.in .sweep::after { animation: sweep 1.4s 0.4s cubic-bezier(0.45, 0, 0.2, 1) both; }

/* ── Hero entrance (runs once; js adds .go when fonts are ready) ── */

.js .hero .w { transform: translateY(105%); }
.js .hero .eyebrow, .js .hero .lede, .js .hero-cta { opacity: 0; transform: translateY(12px); }
.js .hero-rig .phone { opacity: 0; transform: translateY(40px); }
.js .hero-rig .chip { opacity: 0; transform: translateY(10px) scale(0.86); }

.hero.go .w { transform: none; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.12s + var(--i) * 0.05s); }
.hero.go .eyebrow { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hero.go .lede { opacity: 1; transform: none; transition: opacity 0.7s ease 0.5s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; }
.hero.go .hero-cta { opacity: 1; transform: none; transition: opacity 0.7s ease 0.65s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.65s; }
.hero.go .hero-rig .phone { opacity: 1; transform: none; transition: opacity 0.8s ease 0.25s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.hero.go .hero-rig .phone .sweep::after { animation: sweep 1.3s 0.9s cubic-bezier(0.45, 0, 0.2, 1) both; }
.hero.go .hero-rig .chip { opacity: 1; transform: none; transition: opacity 0.3s ease var(--d), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d); }
.hero.go .glow { animation: drift 16s ease-in-out 2s infinite alternate; }
.atmo .b1 { animation: drift 20s ease-in-out infinite alternate; }
.atmo .b2 { animation: drift 24s ease-in-out -6s infinite alternate-reverse; }

@keyframes sweep {
  0% { opacity: 0; transform: translateX(0) skewX(-12deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(420%) skewX(-12deg); }
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18px, 22px) scale(1.06); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(94, 226, 127, 0.7); }
  100% { box-shadow: 0 0 0 8px rgba(94, 226, 127, 0); }
}
.tile .live { animation: pulse 1.6s ease-out infinite; }

/* Narrow phones: a smaller nav so the name, the button and the menu keep their breathing room. */
@media (max-width: 420px) {
  .nav { padding: 0 12px; }
  .brand { gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-size: 15px; }
  .nav-m { gap: 6px; }
  .nav-m .pill-cta { height: 34px; padding: 0 12px; font-size: 13px; }
  .menu-btn { width: 34px; height: 34px; }
  .menu-btn svg { width: 18px; height: 18px; }
  .zc { min-height: 138px; padding: 10px 12px 16px; }
  .zc .t { font-size: 25px; }
  .readout b { font-size: 20px; }
  .shift-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 349px) {
  .nav .brand span { display: none; }
}

/* ── Tablet ───────────────────────────────────────────────── */

@media (min-width: 640px) {
  .zones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr; }
  .foot-brand { grid-column: auto; }
  .foot-base { flex-direction: row; justify-content: space-between; }
  .section h2.display { font-size: clamp(40px, 6.4vw, 56px); }
}

/* Portrait tablets and the unfolded iPhone Duo: one centred column, bigger type. */
@media (min-width: 600px) and (max-width: 999px) and (orientation: portrait) {
  .hero-copy { max-width: 640px; margin: 0 auto; align-items: center; text-align: center; }
  .hero h1 { font-size: clamp(54px, 9vw, 72px); }
  .hero .lede { font-size: 18px; max-width: 520px; }
  .section { max-width: 720px; }
  .sky { height: 600px; }
  .sky .phone { width: 285px; }
}

@media (min-width: 740px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .plan { padding: 20px 18px; }
  .plan.plus { padding-top: 34px; }
  .plan .price b { font-size: 26px; }
  .section:has(.plans) { max-width: 1120px; }
}
/* Three narrow columns (iPad mini, the open Duo sideways): price under the plan name. */
@media (min-width: 740px) and (max-width: 999px) {
  .plan header { flex-direction: column; align-items: flex-start; gap: 2px; }
  .plan .price { text-align: left; }
}

/* ── Two columns: desktop, iPad landscape, the Duo opened sideways, phones on their side ── */

@media (min-width: 1000px), (min-width: 640px) and (orientation: landscape) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px; align-items: center; padding: var(--nav-h) max(var(--gutter), 6vw) 0; }
  .hero-copy { padding: 0; gap: 20px; }
  .hero h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; }
  .hero .lede { font-size: 18px; max-width: 520px; }
  .hero-visual { height: calc(600px * var(--s, 1)); margin-top: 0; }
  .scroll-cue { display: none; }
  .try { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
  .try .shift { margin-top: 0; padding: 18px; }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .city { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
  .sky { margin-top: 0; }
  .privacy { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
  .privacy .facts { grid-template-columns: 1fr; margin-top: 0; gap: 26px; }
}
/* Short landscape (phones on their side, the Duo opened sideways): tighter hero type. */
@media (min-width: 640px) and (orientation: landscape) and (max-height: 640px) {
  .hero { min-height: 0; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(36px, 5vw, 52px); }
  .hero .lede { font-size: 15px; }
  .hero-copy { gap: 14px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: 0.14em; }
}

/* ── Desktop ──────────────────────────────────────────────── */

@media (min-width: 1000px) {
  :root { --gutter: 48px; --nav-h: 76px; }
  .nav { padding: 0 max(48px, 5.5vw); }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 19px; }
  .nav-links { display: flex; align-items: center; gap: 30px; }
  .nav-m, .menu { display: none !important; }
  .pill-cta { height: 40px; padding: 0 18px; font-size: 14px; }

  .hero { padding: var(--nav-h) max(48px, 8vw) 0; }
  .hero-copy { gap: 22px; }
  .hero .lede { font-size: 19px; }
  .hero-cta p { font-size: 13px; }
  .badge img { height: 54px; }
  .eu-card { max-width: 440px; }

  .section { padding-top: 130px; }
  .try { gap: 56px; }
  .zc { min-height: 150px; }
  .zc .t { font-size: 34px; }
  .city { gap: 56px; }
  .sky { height: 600px; }
  .sky .phone { width: 285px; }
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .plan { padding: 22px; }
  .plan.plus { padding-top: 34px; transform: translateY(-10px); }
  .plan.plus.reveal:not(.in) { transform: translateY(6px); }
  .plan .price b { font-size: 30px; }
  #plans > .stack > .stack { max-width: 640px; }
  .final { padding-top: 150px; }
}

/* ── Story layouts (home.js sets one class on <html> from the viewport) ──
   stack: portrait phones and tablets — text on top, phone below (the base rules above).
   split: landscape but too small for the list — one chapter at a time on the left, phone right.
   list:  desktop and iPad landscape — every chapter listed, the active one opens. */

.lay-list .story { height: 640vh; height: 640lvh; }
.lay-list .stage, .lay-split .stage { height: 100vh; height: 100lvh; }
.lay-list .stage-fade, .lay-split .stage-fade { height: 90px; }
.lay-list .chapters {
  left: max(48px, 8vw); right: auto; width: min(560px, 42vw); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
}
.lay-list .chapter {
  position: relative; display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--hair);
  opacity: 0.38; transition: opacity 0.4s ease;
}
.lay-list .chapter .body { flex-direction: column; gap: 0; }
.lay-list .chapter .num { display: block; padding-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--t2); transition: color 0.3s ease, padding 0.3s ease; }
.lay-list .chapter h2 { order: 0; font-size: 24px; line-height: 1.05; transition: font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.lay-list .chapter .more { display: flex; flex-direction: column; max-height: 0; overflow: hidden; opacity: 0; gap: 10px; transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease; }
.lay-list .chapter .lede { font-size: 17px; max-width: 460px; }
.lay-list .chapter.is-on { opacity: 1; }
.lay-list .chapter.is-on .num { color: var(--teal-l); padding-top: 14px; }
.lay-list .chapter.is-on h2 { font-size: 44px; }
.lay-list .chapter.is-on .more { max-height: 170px; opacity: 1; margin-top: 12px; }
.lay-list .progress { display: none; }
.lay-list .rail-v { display: block; position: absolute; right: max(32px, 3vw); top: 22%; height: 56%; width: 4px; border-radius: 2px; background: var(--hair); }
.lay-list .rail-v i { display: block; width: 100%; height: 100%; border-radius: 2px; background: var(--teal-l); transform-origin: 50% 0; transform: scaleY(var(--f, 0)); }
.lay-list .skip-tour { top: auto; bottom: 28px; left: max(48px, 8vw); right: auto; }

.lay-split .chapters { left: max(var(--gutter), 5vw); right: auto; width: calc(46vw - max(var(--gutter), 5vw)); top: 50%; transform: translateY(-50%); }
.lay-split .chapter h2 { font-size: clamp(28px, 3.8vw, 40px); }
.lay-split .progress { right: 54vw; left: max(var(--gutter), 5vw); }
.lay-split .skip-tour { top: auto; bottom: 20px; left: max(var(--gutter), 5vw); right: auto; }

/* Tablet stack: keep the text a readable measure, centred over the phone. */
@media (min-width: 600px) {
  .lay-stack .chapters { left: max(var(--gutter), calc(50% - 320px)); right: max(var(--gutter), calc(50% - 320px)); }
  .lay-stack .progress { left: max(var(--gutter), calc(50% - 320px)); right: max(calc(var(--gutter) + 92px), calc(50% - 320px + 92px)); }
  .lay-stack .skip-tour { right: max(var(--gutter), calc(50% - 320px)); }
  .lay-stack .chapter h2 { font-size: 46px; }
  .lay-stack .chapter .lede { font-size: 17px; }
}
/* Short phones (SE, mini with Safari's bars): smaller chapter type so the phone and its
   overlay stay on screen. */
@media (max-width: 599px) and (max-height: 700px) {
  .lay-stack .chapter h2 { font-size: 30px; }
  .lay-stack .chapter .lede { font-size: 14px; }
  .lay-stack .chapters { top: calc(var(--nav-h) + 24px); }
}

/* ── Reduced motion: everything shows, nothing travels ────── */

@media (prefers-reduced-motion: reduce) {
  .js .hero .w, .js .hero .eyebrow, .js .hero .lede, .js .hero-cta, .js .hero-rig .phone, .js .hero-rig .chip { opacity: 1; transform: none; transition: none; }
  .hero.go .glow, .hero.go .hero-rig .phone .sweep::after, .plan.plus.in .sweep::after, .atmo i, .tile .live { animation: none; }
  .cycle img { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .best { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
  .menu, .menu-btn path, .zc { transition: none; }
}