/* ═══════════════════════════════════════════════════════════════
   Atlas v2 — production styles
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --paper: #F8FBFD;
  --cream: #FAF6ED;
  /* Very soft, low-contrast map — land barely lifts off a pale ocean,
     hairline-thin borders. Refined and quiet rather than diagrammatic. */
  --ocean-top: #F0F5FA;
  --ocean-bottom: #E7EEF5;
  --land-top: #D6DFE9;
  --land-bottom: #C6D2DF;
  --land-stroke: rgba(74, 92, 122, 0.07);   /* near-invisible country dividers — quiet map */
  --card: rgba(255, 255, 255, 0.78);
  --card-solid: #FFFFFF;
  /* Ink */
  --ink-1: #0E1B33;
  --ink-2: #4A5C7A;
  --ink-3: #8C9CB5;
  --ink-4: #BFCCDB;
  /* Accent */
  --accent: #3D7DBE;
  --accent-glow: #5EB8E8;
  --accent-deep: #2A5A8B;
  --accent-soft: rgba(61, 125, 190, 0.10);
  /* Status */
  --sage: #5EA68A;
  --sage-soft: rgba(94, 166, 138, 0.15);
  --amber: #D89B3F;
  --amber-soft: rgba(216, 155, 63, 0.15);
  --copper: #C76B2B;
  --warning: #C7382E;
  --warning-soft: rgba(199, 56, 46, 0.12);
  /* Brand */
  --leather: #6C849C;
  --paper-band: #C4D4E4;
  --page-edges: #EADFC8;
  /* Glass chrome (Theme.innerStroke / specular) */
  --innerStroke: rgba(255, 255, 255, 0.55);
  --specular: rgba(255, 255, 255, 0.75);
  /* Hairlines + shadows */
  --hairline: rgba(13, 27, 51, 0.10);
  --hairline-soft: rgba(13, 27, 51, 0.06);
  --shadow-soft: 0 18px 40px rgba(13, 27, 51, 0.10);
  --shadow-tight: 0 4px 12px rgba(13, 27, 51, 0.06);
  --shadow-glass: 0 30px 60px rgba(13, 27, 51, 0.15), 0 12px 24px rgba(13, 27, 51, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  /* Type */
  --serif: "Fraunces", "New York", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0A1420;
    --cream: #18212F;
    --ocean-top: #11202F;
    --ocean-bottom: #0A1929;
    --land-top: #1F2B3D;
    --land-bottom: #161F2D;
    --land-stroke: rgba(255, 255, 255, 0.055);
    --innerStroke: rgba(255, 255, 255, 0.08);
    --specular: rgba(255, 255, 255, 0.10);
    --card: rgba(28, 38, 54, 0.78);
    --card-solid: #11202F;
    --ink-1: #F0F4F9;
    --ink-2: #C8D4E3;
    --ink-3: #8A99AB;
    --ink-4: #5E6C7E;
    --accent: #2F63CC;
    --accent-glow: #4F7FE6;
    --accent-deep: #1A428F;
    --accent-soft: rgba(47, 99, 204, 0.20);
    --sage: #6EC792;
    --amber: #F7C46C;
    --copper: #F39B6B;
    --warning: #FF7A78;
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-soft: rgba(255, 255, 255, 0.06);
    --shadow-glass: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* Reset + base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.55;
  overflow-x: hidden;
}
/* The hero fades to a soft blue; the rest of the page continues in that tone
   (rather than near-white) so the whole site reads as one continuous canvas,
   dark at the very top (hero) and dark again at the very bottom (footer). */
@media (prefers-color-scheme: light) {
  /* One continuous canvas spanning the whole document: starts at the hero's
     bottom tone so the seam is invisible, holds light through the content,
     and eases a touch deeper toward the foot of the page, where the footer
     takes over and returns to the dark navy of the very top. */
  body {
    background: linear-gradient(180deg, #DCE5EF 0%, #D6E1EE 50%, #C7D5E7 100%);
    background-attachment: scroll;
  }
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
kbd {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85em;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(13, 27, 51, 0.06);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  kbd { background: rgba(255, 255, 255, 0.06); }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ─── Brand icon ──────────────────────────────────────────── */
.brand-icon {
  display: inline-block;
  width: 24px; height: 24px;
  background: url(/atlas/images/atlas-icon/atlas-icon-256.png) center / contain no-repeat;
  position: relative;
  filter: drop-shadow(0 1px 3px rgba(13, 27, 51, 0.22));
  flex-shrink: 0;
}
/* Real app icon image now stands in for the old CSS-drawn placeholder. */
.brand-icon::before, .brand-icon::after { display: none; }

/* ─── Top nav (full-width, over the dark masthead) ─────────────
   The at-the-top state: a wide, airy bar sitting above the app panel,
   light text on the deep-ink masthead. It scrolls away with the hero,
   handing over to the floating pill once you've scrolled past. */
.topnav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  /* Horizontal padding tracks the app window's inset so the logo and the
     buttons line up with the panel's left/right edges at every width.
     Vertical padding scales with the viewport height. */
  padding: clamp(16px, 2vh, 30px) clamp(16px, 3vw, 44px);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.7s var(--ease-out) 0.2s, transform 0.7s var(--ease-out) 0.2s;
}
body.intro-done .topnav { opacity: 1; transform: none; }
body.scrolled-past .topnav { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.topnav-brand { display: flex; align-items: center; gap: clamp(9px, 0.9vw, 14px); text-decoration: none; flex-shrink: 0; }
/* Logo scales fluidly with the window. */
.topnav-brand .brand-icon {
  width: clamp(30px, 2.3vw, 38px); height: clamp(30px, 2.3vw, 38px);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.34));
}
.topnav-name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 1.7vw, 30px); color: #fff; letter-spacing: -0.012em; }
.topnav-links { display: flex; gap: clamp(18px, 1.9vw, 32px); margin-left: clamp(4px, 0.7vw, 12px); }
.topnav-links a {
  font-size: clamp(14.5px, 1.05vw, 17px); font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.topnav-links a:hover { color: #fff; }
.topnav-actions { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 1vw, 18px); flex-shrink: 0; }

/* "Designed for Mac" — a quiet outline pill that sits left of the buttons,
   labelling the platform without competing with the CTA. */
.mac-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Matched pair with the Download | Buy Atlas pill: identical height (its
     group-padding + button-padding + line-height) and the same width, so the
     two large pills sit as equals. Vertical padding is 1px shy of the exact
     sum to absorb this pill's 1px border. */
  padding: clamp(10px, 0.92vw, 13.5px) clamp(16px, 1.4vw, 24px);
  min-width: clamp(196px, 16vw, 236px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 1vw, 16.5px); font-weight: 500;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mac-badge .apple-mark { width: clamp(12px, 0.85vw, 14px); height: auto; fill: currentColor; opacity: 0.95; margin-top: -2px; }

/* Grouped Download | Buy control — a light pill holding a ghost "Download"
   and a filled accent "Buy Atlas", split by a hairline divider. Scales fluidly. */
.buy-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: clamp(4px, 0.35vw, 6px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(8, 14, 24, 0.30);
}
/* A thin white highlight that travels softly around the pill's edge: a faint
   constant hairline ring with one bright arc rotating around the perimeter.
   Built as a conic-gradient masked to a 1.6px border ring, so it traces the
   outline (reads beautifully against the dark hero). */
@property --bg-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.buy-group::before,
.travel-ring::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--bg-ang),
    rgba(255, 255, 255, 0.16) 0deg,
    rgba(255, 255, 255, 0.16) 232deg,
    rgba(255, 255, 255, 0.95) 286deg,
    rgba(255, 255, 255, 0.16) 332deg,
    rgba(255, 255, 255, 0.16) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
  pointer-events: none;
  z-index: 4;
  animation: bgBorderLight 4.5s linear infinite;
}
@keyframes bgBorderLight { to { --bg-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .buy-group::before,
  .travel-ring::before { animation: none; }
}
/* Hosts of the travelling-highlight ring need a positioning context + visible
   overflow so the ring can sit just outside the edge. (coach-pill is already
   absolutely positioned, so it is excluded here.) */
.intro-download.travel-ring, .atlas-pricing .pr-buy.travel-ring { position: relative; overflow: visible; }
.bg-btn {
  border-radius: 999px;
  font-size: clamp(14px, 1vw, 16.5px); font-weight: 600;
  white-space: nowrap;
  padding: clamp(9px, 0.85vw, 12px) clamp(15px, 1.35vw, 22px);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bg-download { color: #16243C; background: transparent; }
.bg-download:hover { background: rgba(13, 27, 51, 0.06); }
/* Mobile-only "Email Link" pill — same look as Download. Hidden on desktop. */
.bg-remind { display: none; color: #16243C; background: transparent; text-decoration: none; align-items: center; }
.bg-remind:hover { background: rgba(13, 27, 51, 0.06); text-decoration: none; }
.bg-divider { width: 1px; align-self: stretch; margin: clamp(5px, 0.5vw, 8px) 2px; background: rgba(13, 27, 51, 0.12); }
.bg-buy {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
  box-shadow: 0 3px 10px rgba(61, 125, 190, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.bg-buy:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(61, 125, 190, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.28); }

/* ─── Site header ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 9px 18px 9px 14px;
  background: var(--card);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-tight);
  opacity: 0;
  /* Invisible at the top of the page — must NOT intercept taps meant for the
     full-width .topnav beneath it (this was eating the mobile "Email Link"
     button). Only becomes interactive once it actually fades in. */
  pointer-events: none;
  transform: translateX(-50%) translateY(-20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
/* The pill is the SCROLLED state — it fades in only once you've scrolled
   past the app window (see .topnav for the top-of-page full-width nav). */
body.scrolled-past .site-header { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink-1); }
.brand-name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; }
.menubar-trigger {
  /* Hidden: the menu-bar-preview trigger (and its pulse) was distracting in the
     floating nav. Kept in the DOM so the demo JS references stay valid. */
  display: none;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--accent);
  align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out);
}
.menubar-trigger:hover { transform: scale(1.08); background: var(--card-solid); }
.menubar-trigger.is-pulsing::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 11px;
  border: 2px solid var(--accent);
  animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.nav-links { display: flex; gap: 18px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink-1); text-decoration: none; }
.cta-mini {
  background: var(--accent);
  color: white;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  transition: background 0.15s, transform 0.15s;
}
.cta-mini:hover { background: var(--accent-deep); transform: translateY(-1px); }
.cta-mini .px { opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ─── Menu bar popover ────────────────────────────────────── */
.menubar-popover {
  position: fixed;
  top: 60px; right: 100px;
  width: 280px;
  z-index: 60;
  background: var(--card);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(13, 27, 51, 0.25);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.menubar-popover.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.pop-section { padding: 10px 14px; border-bottom: 1px solid var(--hairline-soft); position: relative; }
.pop-section:last-child { border-bottom: 0; }
.pop-dawn { background: linear-gradient(180deg, rgba(255, 220, 160, 0.30), rgba(255, 220, 160, 0.08)); }
.pop-day { background: linear-gradient(180deg, rgba(94, 166, 138, 0.18), rgba(94, 166, 138, 0.04)); }
.pop-dusk { background: linear-gradient(180deg, rgba(61, 125, 190, 0.18), rgba(61, 125, 190, 0.04)); }
.pop-footer { padding: 8px 14px; background: rgba(120, 100, 150, 0.10); }
.pop-eyebrow { font-size: 9.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.10em; margin-bottom: 6px; text-transform: uppercase; }
.pop-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.pop-flag { font-size: 13px; }
.pop-nm { color: var(--ink-1); font-weight: 500; }
.pop-tm { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.pop-nudge { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.pop-nudge-ic { color: var(--accent); font-style: normal; }

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE HERO (with cinematic intro choreography)
   ═══════════════════════════════════════════════════════════════ */

.stage-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 760px;
  /* The ONLY change from the original here: overflow is visible (was hidden).
     The app window's drop shadow used to be clipped flat at the hero's bottom,
     making a hard horizontal line before the next section. Now the shadow fades
     gently down onto the page instead. Sideways scroll is still prevented by
     body { overflow-x: hidden }; the app window clips its own map internally. */
  overflow: visible;
}

/* The hero is now the WEBSITE backdrop; the app lives in a floating window.
   Background = a "deep ink masthead": a dark navy top fading down to light,
   so the app window glows on a dramatic desktop. Dark mode = full midnight. */
.hero {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 1050px 600px at 78% -12%, rgba(95, 184, 232, 0.16), transparent 56%),
    linear-gradient(180deg, #0E1B33 0%, #1F3050 24%, #9FB4CE 70%, #D2DCEA 84%, rgba(220, 229, 239, 0.4) 93%, rgba(220, 229, 239, 0) 100%);
  /* overflow-y must stay visible: .hero contains the floating app window, whose
     large drop shadow was being hard-clipped at the hero's bottom edge, leaving
     a crisp horizontal line where the next section begins. Letting it overflow
     downward lets the soft shadow fade onto the page. overflow-x: clip still
     prevents any sideways scroll (the app window clips its own map internally). */
  overflow-x: clip;
  overflow-y: visible;
}
@media (prefers-color-scheme: dark) {
  .hero {
    background:
      radial-gradient(ellipse 1050px 620px at 76% -10%, rgba(95, 184, 232, 0.18), transparent 60%),
      radial-gradient(ellipse 920px 600px at 4% 114%, rgba(47, 99, 204, 0.14), transparent 60%),
      linear-gradient(180deg, #080E18 0%, #0D1626 55%, #0F1B2D 84%, rgba(16, 30, 50, 0.4) 93%, rgba(16, 30, 50, 0) 100%);
  }
}

/* The floating app window — even gap to the viewport, soft rounded corners,
   a gentle shadow so it reads as the Mac app floating on the page. */
.app-window {
  /* A real Mac-window aspect ratio (16:9). The panel scales up and down with
     the viewport but can never distort: it takes whichever of the width-limit
     or height-limit is smaller, then margin:auto centres it in the band below
     the nav. (It used to be pinned to top AND bottom, so a tall / narrow
     window stretched the panel vertically into a big empty rectangle.) */
  --aw-top: clamp(100px, 12.5vh, 144px);
  --aw-gap: clamp(16px, 3vw, 44px);
  position: absolute;
  top: var(--aw-top);
  bottom: var(--aw-gap);
  left: var(--aw-gap);
  right: var(--aw-gap);
  margin: auto;
  aspect-ratio: 16 / 9;
  width: min(calc(100% - 2 * var(--aw-gap)), calc((100vh - var(--aw-top) - var(--aw-gap)) * 16 / 9));
  /* Size from the LARGE (stable) viewport height so the window's width — and
     therefore the map's fill mode — never changes when iOS Safari's toolbar
     collapses on scroll. Without this the window straddles the map's width
     threshold and flips from banded to filled mid-scroll. (vh line above is the
     fallback for browsers without lvh.) */
  width: min(calc(100% - 2 * var(--aw-gap)), calc((100lvh - var(--aw-top) - var(--aw-gap)) * 16 / 9));
  height: auto;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ocean-top), var(--ocean-bottom));
  border: 1px solid var(--hairline);
  box-shadow:
    0 50px 100px rgba(13, 27, 51, 0.18),
    0 18px 40px rgba(13, 27, 51, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: scale(0.985) translateY(10px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-spring);
}
body.intro-map-visible .app-window { opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-color-scheme: dark) {
  .app-window {
    /* Lift the window off the near-identical navy page with an elegant white
       ambient glow: a crisp lit edge, a tight white halo and a soft wide cool
       bloom radiating behind the panel, grounded by a deep drop shadow so it
       floats clearly above the background instead of fading into it. */
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 50px rgba(220, 232, 252, 0.10),
      0 0 140px rgba(180, 205, 245, 0.13),
      0 44px 100px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

/* Stars — visible during intro start */
.hero-stars { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.5s ease; }
body.intro-dawn .hero-stars { opacity: 0; }
.h-star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; opacity: 0.7; }
.h-star.lg { width: 3px; height: 3px; }
.h-star.twink { animation: starBlink 3.5s ease-in-out infinite; }
.h-star.twink-2 { animation: starBlink 4.2s ease-in-out infinite 0.7s; }
@keyframes starBlink { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.3; } }

/* Map stage */
/* The map lives in the WORKING AREA — to the right of the sidebar — as a true
   2:1 frame, vertically centred. This shows the whole world (not hidden behind
   the sidebar) and keeps every pin pixel-aligned with the map. */
.map-stage {
  /* The map bleeds to the window's top and bottom edges (no inset band) and
     fills the full height; its width overflows, cropping empty ocean
     east/west. The SVG viewBox is cropped to 0 18 1000 465 (trimming the
     emptiest polar ocean, bottom-weighted since the team is all northern),
     so the container matches that 1000:465 ratio and the percentage-
     positioned pins keep aligning with the viewBox. Centred just right of
     the sidebar; +150px keeps San Francisco clear of the panel and Tokyo
     clear of the right edge. */
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% + 150px);
  transform: translateX(-50%);
  width: auto;
  aspect-ratio: 1000 / 465;
  cursor: grab;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 0.4s;
}
body.intro-map-visible .map-stage { opacity: 1; }
.map-stage.is-scrubbing { cursor: ew-resize; }
/* (native cursor stays visible during ⌘-drag — no custom cursor) */
/* The map ALWAYS fills the window height (the rule above: top:0/bottom:0). Its
   width overflows the working area and crops empty ocean east/west — and on
   narrow windows the far-edge cities (San Francisco, Tokyo) sit right at the
   panel edges, which is fine: the map is drag-scrubbable. There is deliberately
   no width-driven / letterboxed fallback — that was the source of the recurring
   "map doesn't fill the height" bug, where the window straddled a width
   threshold and flipped between filled and banded on iOS scroll. */
.atlas-map {
  width: 100%; height: 100%; display: block; pointer-events: none;
  /* Soft-fade the map's top and bottom edges so the washes and band lines
     never end in a hard horizontal rectangle. Matters most on tall windows
     where the map is width-driven and leaves ocean above/below: the edges now
     melt into the app-window ocean instead of reading as a floating block.
     Only empty polar ocean sits in the fade zone, so no pin is affected. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.map-ocean { opacity: 0; transition: opacity 1.2s ease 0.6s; }
body.intro-map-visible .map-ocean { opacity: 1; }
.countries { opacity: 0; transition: opacity 1s ease 0.8s; }
body.intro-map-visible .countries { opacity: 1; }
.solar-spot { opacity: 0; transition: opacity 1.5s ease 1s; }
body.intro-map-visible .solar-spot { opacity: 1; }

/* ── Atmospheric map zones (faithful to MapView.swift) ──────────
   Three washes + the great-circle terminator + the working-hours lens.
   Colours are the exact Theme.swift tokens; dash patterns match the app
   (daylight 5 4 @ 1.3pt, working 5 4 @ 1.5pt). */

/* Washes — soft fills that help the zones read without going heavy */
.hm-night-wash    { fill: rgba(20, 33, 61, 0.06); }
.hm-twilight-wash { fill: rgba(255, 214, 115, 0.07); }
.hm-working-wash  { fill: rgba(77, 140, 217, 0.08); }

/* Daylight terminator — clearly legible amber dashed line, but not heavy.
   Reads well against the now-quiet map (faint country borders). */
.hm-terminator {
  stroke: rgba(212, 152, 66, 0.62);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 4;
}
/* Working-hours lens — clearly legible blue dashed outline */
.hm-lens {
  stroke: rgba(61, 125, 191, 0.62);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 4;
}

/* The zone stack fades in gently AFTER the map has settled — a soft, layered
   reveal so the daylight + working-hours diagram drifts in rather than
   snapping on, yet is fully present before the auto-demo begins (~4.4s). */
#nightWash, #twilightWash, #workingWash,
#terminatorGroup, #lensCapGroup, #lensSidesGroup {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 0.95s;
}
body.intro-map-visible #nightWash,
body.intro-map-visible #twilightWash,
body.intro-map-visible #workingWash,
body.intro-map-visible #terminatorGroup,
body.intro-map-visible #lensCapGroup,
body.intro-map-visible #lensSidesGroup { opacity: 1; }

@media (prefers-color-scheme: dark) {
  .hm-night-wash    { fill: rgba(0, 0, 0, 0.14); }
  .hm-twilight-wash { fill: rgba(255, 199, 115, 0.045); }
  .hm-working-wash  { fill: rgba(107, 166, 255, 0.06); }
  .hm-terminator    { stroke: rgba(247, 196, 108, 0.55); }
  .hm-lens          { stroke: rgba(107, 166, 242, 0.58); }
}

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  position: absolute;
  top: 22px; left: 22px;     /* inset within the floating app window */
  width: 312px;
  /* Bound to the app window so the suggestion + actions always stay
     visible; the roster scrolls internally on shorter screens, exactly
     like the macOS app. */
  max-height: calc(100% - 44px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--card);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border: 1px solid rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  transform: translateX(-30px);
  transition:
    transform 0.7s var(--ease-in-out),
    opacity 0.9s ease,
    backdrop-filter 1.2s ease,
    background 1s ease,
    border-color 1s ease,
    box-shadow 1s ease;
}
body.intro-sidebar-visible .sidebar {
  opacity: 1;
  transform: translateX(0);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  background: rgba(248, 251, 253, 0.78);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-glass);
}
@media (prefers-color-scheme: dark) {
  body.intro-sidebar-visible .sidebar {
    background: rgba(28, 38, 54, 0.78);
    border-color: rgba(255, 255, 255, 0.10);
  }
}
.sidebar::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  top: -120px; right: -120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 65%);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  /* On the dark glass this corner specular (a 45% white radial, plus-lighter)
     blooms into a strong faded-white wash. Drop it to a whisper so the panel
     stays an even, clean slate. */
  .sidebar::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 65%); }
}

.sidebar-header { display: flex; align-items: center; gap: 8px; padding: 15px 18px 10px; }
.sidebar-title {
  font-family: var(--serif);
  font-style: normal;        /* App: Fonts.serif(18, italic: false) — upright */
  font-weight: 500;
  font-size: 19px;
  color: var(--ink-1);
  margin: 0 auto 0 0;
  letter-spacing: -0.005em;
}

/* Typing animation for the wordmark */
/* The wordmark simply, softly fades in (no typing). */
.type-target {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.8s var(--ease-out) 0.25s, transform 0.8s var(--ease-out) 0.25s;
}
body.intro-sidebar-visible .type-target { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .type-target { transition: opacity 0.3s ease; transform: none; }
}

.sidebar-chip {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(61, 125, 190, 0.40);
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring);
}
.sidebar-chip:hover { transform: scale(1.08); }
.sidebar-chip-gear { background: rgba(13, 27, 51, 0.06); color: var(--ink-2); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  /* Ghost icon button: transparent fill + hairline edge. A faint fill used to
     show through the open centre of the cog icon as a little white dot — going
     fully transparent lets the dark sidebar read through the cog instead. */
  .sidebar-chip-gear { background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--ink-3); box-shadow: none; }
}

.group-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 9px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--hairline);
  font-size: 14px; font-weight: 600;
  color: var(--ink-1);
  cursor: pointer;
  width: calc(100% - 24px);
  transition: background 0.15s, transform 0.15s;
}
.group-chip:hover { background: var(--card-solid); }
@media (prefers-color-scheme: dark) {
  .group-chip { background: rgba(255, 255, 255, 0.05); }
  .group-chip:hover { background: rgba(255, 255, 255, 0.08); }
}
.group-emoji { font-size: 16px; }
.group-name { flex: 1; text-align: left; }
.group-shortcut { font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.group-chevron { font-size: 11.5px; color: var(--ink-3); }

.search-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 13px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(13, 27, 51, 0.03);
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  font-size: 13.5px;
}
@media (prefers-color-scheme: dark) {
  .search-row { background: rgba(255, 255, 255, 0.03); }
}
.search-plus { color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.search-placeholder { flex: 1; }
.search-kbd { font-size: 11.5px; color: var(--ink-3); }

.who-label {
  display: flex; align-items: center;
  padding: 0 18px;
  margin-bottom: 6px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.who-count { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }

/* Fixed-height sections stay put; only the roster flexes + scrolls. */
.sidebar-header, .group-chip, .search-row, .who-label,
.suggests-card, .action-row { flex-shrink: 0; }
.who-list {
  list-style: none; padding: 0 12px; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
}
.who-list::-webkit-scrollbar { width: 5px; }
.who-list::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.who-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 7px;
  border-radius: 9px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out), background 0.15s;
}
body.intro-sidebar-visible .who-row[data-row="0"] { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }
body.intro-sidebar-visible .who-row[data-row="1"] { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
body.intro-sidebar-visible .who-row[data-row="2"] { opacity: 1; transform: translateY(0); transition-delay: 1.3s; }
body.intro-sidebar-visible .who-row[data-row="3"] { opacity: 1; transform: translateY(0); transition-delay: 1.4s; }
body.intro-sidebar-visible .who-row[data-row="4"] { opacity: 1; transform: translateY(0); transition-delay: 1.5s; }
body.intro-sidebar-visible .who-row[data-row="5"] { opacity: 1; transform: translateY(0); transition-delay: 1.6s; }
body.intro-sidebar-visible .who-row[data-row="6"] { opacity: 1; transform: translateY(0); transition-delay: 1.7s; }
.who-row:hover { background: rgba(13, 27, 51, 0.03); }
@media (prefers-color-scheme: dark) {
  .who-row:hover { background: rgba(255, 255, 255, 0.03); }
}
.who-flag { font-size: 18px; line-height: 1; }
.who-name-block { display: flex; flex-direction: column; line-height: 1.2; }
.who-name { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.who-city { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--ink-3); }
.who-time-block { margin-left: auto; text-align: right; line-height: 1.15; font-variant-numeric: tabular-nums; }
.who-time { font-size: 13.5px; font-weight: 600; color: var(--sage); display: block; transition: color 0.25s; }
.who-time.amber { color: var(--amber); }
.who-time.warning { color: var(--warning); }
.who-tz { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }

.suggests-card {
  margin: 11px 12px 11px;
  padding: 12px 13px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-tight);
  opacity: 0;
  transition: opacity 0.6s ease 1.9s;
}
body.intro-sidebar-visible .suggests-card { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .suggests-card { background: rgba(255, 255, 255, 0.04); }
}
.suggests-label { font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: 0.10em; margin-bottom: 6px; text-transform: uppercase; }
.suggests-time {
  font-family: var(--serif); font-style: normal; font-weight: 500;  /* App: serif(19, italic:false).medium, monospaced digits */
  font-size: 20px; color: var(--ink-1);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;   /* breathing room above the status box */
}
.suggests-warn {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(216, 155, 63, 0.17), rgba(216, 155, 63, 0.09));
  border: 1px solid rgba(216, 155, 63, 0.30);
  font-size: 12px;
  transition: background 0.3s, border-color 0.3s;
}
.suggests-warn.is-great {
  background: linear-gradient(180deg, rgba(94, 166, 138, 0.22), rgba(94, 166, 138, 0.10));
  border-color: rgba(94, 166, 138, 0.40);
  animation: warnBloom 0.5s var(--ease-spring);
}
@keyframes warnBloom {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
/* Circular status badge holding the glyph. */
.suggests-warn-ic {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(216, 155, 63, 0.22); color: var(--amber);
  transition: background 0.3s, color 0.3s;
}
.suggests-warn.is-great .suggests-warn-ic { background: rgba(94, 166, 138, 0.24); color: var(--sage); }
.suggests-warn-main { flex: 1; min-width: 0; }
.suggests-warn-head { display: flex; align-items: center; gap: 8px; }
.suggests-warn-title { font-weight: 600; color: var(--ink-1); font-size: 12.5px; }
.suggests-warn-body { color: var(--ink-2); font-size: 11.5px; margin-top: 2px; }
/* Six pips showing how many teammates are in hours. */
.overlap-pips { display: inline-flex; gap: 3px; margin-left: auto; }
.overlap-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(13, 27, 51, 0.16); transition: background 0.3s, transform 0.3s; }
.overlap-pips i.on { background: var(--sage); }
@media (prefers-color-scheme: dark) {
  .overlap-pips i { background: rgba(255, 255, 255, 0.16); }
}

/* Calendar-conflict row — red, sits below the working-hours row. The wrapper
   animates its height with the grid 0fr → 1fr technique so the whole card
   grows and shrinks SMOOTHLY (no abrupt jump) as the row arrives or leaves.
   A faint fade + slight rise on the inner row finishes the entrance. */
.suggests-conflict-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows 0.42s var(--ease-out),
    margin-top 0.42s var(--ease-out),
    opacity 0.32s ease;
}
.suggests-conflict-wrap.is-active {
  grid-template-rows: 1fr;
  margin-top: 8px;
  opacity: 1;
}
/* The grid item itself must carry no padding/border, or a 0fr track can't
   reach 0 (auto-min keeps the box's padding). So an unpadded clip wraps the
   visible padded row and is what the grid track collapses. */
.suggests-conflict-clip { min-height: 0; overflow: hidden; }
.suggests-conflict {
  transform: translateY(-4px);
  transition: transform 0.42s var(--ease-out);
  background: linear-gradient(180deg, rgba(199, 56, 46, 0.14), rgba(199, 56, 46, 0.08));
  border-color: rgba(199, 56, 46, 0.30);
}
.suggests-conflict-wrap.is-active .suggests-conflict { transform: translateY(0); }
.suggests-conflict .suggests-warn-ic { background: rgba(199, 56, 46, 0.16); color: var(--warning); }
.suggests-conflict .suggests-warn-title { color: var(--warning); }
.suggests-conflict .suggests-warn-body { font-style: italic; font-family: var(--serif); }
@media (prefers-reduced-motion: reduce) {
  .suggests-conflict-wrap, .suggests-conflict { transition: none; }
}

.action-row {
  display: flex; gap: 7px;
  margin: 10px 12px 12px;
  opacity: 0;
  transition: opacity 0.6s ease 2.1s;
}
body.intro-sidebar-visible .action-row { opacity: 1; }
.btn {
  flex: 1;
  padding: 11px 12px;
  border-radius: 11px;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
  color: white;
  box-shadow: 0 4px 12px rgba(61, 125, 190, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(61, 125, 190, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30); }
/* Joyful confirmed state after Add to Calendar is pressed. */
.btn-primary.is-added {
  background: linear-gradient(180deg, #6FBF9C, var(--sage));
  box-shadow: 0 4px 14px rgba(94, 166, 138, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  animation: addedPop 0.45s var(--ease-spring);
}
.btn-primary.is-added kbd { display: none; }
@keyframes addedPop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* When the best slot is found, the button breathes a soft, blurred glow to
   draw the eye — no hard expanding ring (that read as a "bubble"). */
.btn-primary.is-pulsing { animation: btnPulse 2.2s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(61, 125, 190, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.30); }
  50% { box-shadow: 0 6px 22px rgba(61, 125, 190, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30); }
}
.btn-primary kbd { background: rgba(255, 255, 255, 0.22); border: none; color: white; font-size: 11px; }
.btn-secondary {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  padding: 11px 11px;
}
@media (prefers-color-scheme: dark) {
  .btn-secondary { background: rgba(255, 255, 255, 0.06); }
}
.btn-secondary kbd { font-size: 11px; color: var(--ink-3); margin-left: 4px; }

/* ─── Pins ─────────────────────────────────────────────────── */
.pin {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  z-index: 4;
  /* Intro state: hidden */
  opacity: 0;
  transform: translate(-50%, calc(-50% - 60px)) scale(0.4);
  transition: opacity 0.55s ease, transform 0.7s var(--ease-spring), box-shadow 0.3s;
}
body.intro-pins-visible .pin {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
body.intro-pins-visible .pin[data-pin-order="1"] { transition-delay: 0s, 0s, 0s; }
body.intro-pins-visible .pin[data-pin-order="2"] { transition-delay: 0.12s, 0.12s, 0s; }
body.intro-pins-visible .pin[data-pin-order="3"] { transition-delay: 0.24s, 0.24s, 0s; }
body.intro-pins-visible .pin[data-pin-order="4"] { transition-delay: 0.36s, 0.36s, 0s; }
body.intro-pins-visible .pin[data-pin-order="5"] { transition-delay: 0.48s, 0.48s, 0s; }
body.intro-pins-visible .pin[data-pin-order="6"] { transition-delay: 0.60s, 0.60s, 0s; }

/* FlagDisc — 28px paper disc + two concentric status halo rings
   (36px @ 55%, 50px @ 20%), exactly as PinView.FlagDisc. The ring
   colour is driven by --pin-glow (an "r,g,b" triple) set per status. */
.pin-disc {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--innerStroke, rgba(255, 255, 255, 0.55));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 6px var(--shadow-tight);
  transition: transform 0.2s var(--ease-spring);
  --pin-glow: 94, 166, 138;   /* sage, in-hours default */
}
.pin-disc::before {     /* middle ring — 36px @ 55% */
  content: ''; position: absolute;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.8px solid rgba(var(--pin-glow), 0.55);
  transition: border-color 0.3s;
}
.pin-disc::after {      /* outer ring — 50px @ 20% */
  content: ''; position: absolute;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1.4px solid rgba(var(--pin-glow), 0.20);
  transition: border-color 0.3s;
}
.pin:hover .pin-disc { transform: scale(1.06); }

/* Status drives the halo colour (tracks the scrub via JS). The colour
   crossfades smoothly as the visitor scrubs — calm, never a ripple. */
.pin.s-in .pin-disc    { --pin-glow: 94, 166, 138; }   /* sage */
.pin.s-edge .pin-disc  { --pin-glow: 216, 155, 63; }   /* amber */
.pin.s-out .pin-disc   { --pin-glow: 199, 56, 46; }    /* warning red */
@media (prefers-color-scheme: dark) {
  .pin.s-in .pin-disc   { --pin-glow: 110, 199, 146; }
  .pin.s-edge .pin-disc { --pin-glow: 247, 196, 108; }
  .pin.s-out .pin-disc  { --pin-glow: 255, 122, 120; }
}

/* In-hours teammates feel quietly alive: the middle halo breathes — a slow,
   low-amplitude glow (opacity + a touch of scale), staggered per pin so they
   never pulse in unison. Edge / out pins stay still, so "awake" reads at a
   glance. Honoured only when the pin is in-hours. */
.pin.s-in .pin-disc::before { animation: haloBreath 4.6s ease-in-out infinite; }
@keyframes haloBreath {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.045); }
}
.pin[data-pin-order="1"] .pin-disc::before { animation-delay: 0s; }
.pin[data-pin-order="2"] .pin-disc::before { animation-delay: 1.5s; }
.pin[data-pin-order="3"] .pin-disc::before { animation-delay: 0.7s; }
.pin[data-pin-order="4"] .pin-disc::before { animation-delay: 2.3s; }
.pin[data-pin-order="5"] .pin-disc::before { animation-delay: 1.1s; }
.pin[data-pin-order="6"] .pin-disc::before { animation-delay: 3.0s; }

/* Wake bloom — a single soft, status-tinted halo radiating out once. Reserved
   for the Add-to-Calendar payoff (gentle: ~12px, low opacity), not the scrub. */
.pin.is-waking .pin-disc { animation: pinWake 0.85s var(--ease-out); }
@keyframes pinWake {
  0%   { box-shadow: 0 2px 6px var(--shadow-tight), 0 0 0 0 rgba(var(--pin-glow), 0.4); }
  100% { box-shadow: 0 2px 6px var(--shadow-tight), 0 0 0 12px rgba(var(--pin-glow), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pin.s-in .pin-disc::before { animation: none; }
  .pin.is-waking .pin-disc { animation: none; }
}

/* SoloPinCard — name (Fraunces upright) / time (mono semibold, status) /
   city (tracked uppercase). cornerRadius 9, thin-material + specular. */
.pin-card {
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 0.6px solid var(--innerStroke, rgba(255, 255, 255, 0.55));
  text-align: center;
  line-height: 1.25;
  min-width: 56px;
  box-shadow: 0 5px 14px var(--shadow-soft);
}
@media (prefers-color-scheme: dark) {
  .pin-card { background: rgba(28, 38, 54, 0.78); border-color: rgba(255,255,255,0.10); }
}
.pin-card .name { display: block; font-family: var(--serif); font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--ink-1); }
.pin-card .time { display: block; font-weight: 600; font-size: 13px; color: var(--sage); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pin-card .time.amber { color: var(--amber); }
.pin-card .time.warning { color: var(--warning); }
.pin-card .city { display: block; font-size: 8.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }

.cluster-card {
  position: absolute;
  padding: 9px 11px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  box-shadow: 0 3px 12px rgba(13, 27, 51, 0.12);
  z-index: 5;
  min-width: 130px;
  opacity: 0;
  transform: translate(-50%, calc(-50% - 60px)) scale(0.4);
  transition: opacity 0.55s ease 0.6s, transform 0.7s var(--ease-spring) 0.6s;
}
body.intro-pins-visible .cluster-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-color-scheme: dark) {
  .cluster-card { background: rgba(28, 38, 54, 0.92); }
}
.cluster-time { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--sage); text-align: center; margin-bottom: 7px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.cluster-time.amber { color: var(--amber); }
.cluster-time.warning { color: var(--warning); }
.cluster-row { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.4; margin-bottom: 2px; }
.cluster-flag { font-size: 13px; }
.cluster-name { font-family: var(--serif); font-style: normal; color: var(--ink-1); font-weight: 500; font-size: 11.5px; }
.cluster-city { margin-left: auto; font-size: 8.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }

/* ─── Coach pill ───────────────────────────────────────────────
   A single frosted-glass caption that lives at the bottom of the app
   window. It narrates the auto-demonstration ("watch Atlas sweep the
   day"), then invites the visitor to take over ("now you try"), then
   retires for good on their first ⌘-drag. One coach, never a checklist. */
.coach-pill {
  position: absolute;
  bottom: 24px; left: 50%;
  z-index: 22;
  display: inline-flex; align-items: center; gap: 9px;
  max-width: min(88%, 480px);
  padding: 13px 24px;
  border-radius: 999px;
  /* Layered glass: a soft top sheen over deep ink, with an inner highlight. */
  background: linear-gradient(180deg, rgba(30, 45, 72, 0.86), rgba(11, 21, 38, 0.90));
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(8, 16, 32, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #eaf1f9;
  font-family: var(--sans);          /* secondary font — clean instructional voice */
  font-style: normal;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.004em;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.55s var(--ease-out), transform 0.6s var(--ease-spring);
}
.coach-pill.is-visible { opacity: 1; transform: translate(-50%, 0); }
.coach-pill.is-leaving { opacity: 0; transform: translate(-50%, 10px) scale(0.97); }
.coach-text { display: inline-block; transition: opacity 0.26s ease; }
/* The ⌘ rendered as a soft, raised keycap. */
.coach-pill kbd {
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  margin: 0 1px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.12));
  color: #fff;
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 1px 2px rgba(0, 0, 0, 0.28);
  vertical-align: 1px;
}
/* A soft breathing halo while the pill is inviting interaction — a cool glow
   with a hairline ring, so it gently pulses for attention. */
/* Terminal "Learn more" state — the only time the coach becomes clickable. */
.coach-pill.is-cta {
  pointer-events: auto;
  cursor: pointer;
  gap: 7px;
  transition: opacity 0.55s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.coach-pill.is-cta:hover {
  transform: translate(-50%, -2px);
  box-shadow: 0 22px 50px rgba(8, 16, 32, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.coach-pill.is-cta:focus-visible { outline: 2px solid rgba(122, 168, 224, 0.9); outline-offset: 3px; }
.coach-arrow { margin-left: 1px; transform: translateY(0); animation: coachArrowBob 1.9s ease-in-out infinite; }
@keyframes coachArrowBob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .coach-arrow { animation: none; } }

.coach-pill.is-invite { animation: coachBreathe 2.8s ease-in-out infinite; }
@keyframes coachBreathe {
  0%, 100% { box-shadow: 0 18px 44px rgba(8, 16, 32, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 0 rgba(122, 168, 224, 0.0); }
  50%      { box-shadow: 0 18px 44px rgba(8, 16, 32, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 10px rgba(122, 168, 224, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .coach-pill { transition: opacity 0.3s ease; transform: translate(-50%, 0); }
  .coach-pill.is-invite { animation: none; }
}

/* ─── Map legend ───────────────────────────────────────────────
   A small frosted key, bottom-right of the map, that ties each dashed line
   to its meaning so visitors grasp the diagram instantly. */
.map-legend {
  position: absolute;
  bottom: 16px; right: 16px;
  z-index: 8;
  display: flex; gap: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 14px rgba(13, 27, 51, 0.08);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out) 1s;   /* fades in just after the zones */
}
body.intro-map-visible .map-legend { opacity: 1; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-key { width: 13px; height: 0; border-top: 2px dashed; flex-shrink: 0; border-radius: 2px; }
.legend-key.key-day  { border-color: rgba(212, 152, 66, 0.95); }   /* amber day/night line */
.legend-key.key-work { border-color: rgba(61, 125, 191, 0.95); }   /* blue working-hours lens */
@media (prefers-color-scheme: dark) {
  .map-legend { background: rgba(20, 30, 46, 0.6); border-color: rgba(255, 255, 255, 0.10); }
}
@media (max-width: 880px) { .map-legend { display: none; } }

/* ─── Guided-demo cursor ───────────────────────────────────────
   A pointer that drives the demonstration: glides over the map, scrubs to
   the best overlap, then presses Add to Calendar before handing over. */
.demo-cursor {
  position: absolute;
  top: 0; left: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 3px 5px rgba(8, 16, 32, 0.35));
  will-change: transform, opacity;
}
.demo-cursor.is-visible { opacity: 1; }
.demo-cursor svg { display: block; transition: transform 0.16s var(--ease-out); }
.demo-cursor.is-holding svg { transform: scale(0.86); }   /* held during a drag */
.demo-cursor.is-pressing svg { transform: scale(0.8); }
/* A soft click ripple. */
.demo-cursor::after {
  content: '';
  position: absolute; left: 1px; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(61, 125, 191, 0.65);
  opacity: 0; transform: scale(0.4);
  pointer-events: none;
}
.demo-cursor.is-pressing::after { animation: cursorRipple 0.55s var(--ease-out); }
@keyframes cursorRipple {
  0% { opacity: 0.7; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-cursor { display: none; }
}

/* ─── Explainer callout ────────────────────────────────────────
   A single reusable popover that teaches what each app control does.
   It floats to the right of the sidebar, over the map, with an arrow
   that points back at whatever the visitor is hovering. */
.explainer {
  position: absolute;
  z-index: 24;
  width: 256px;
  padding: 13px 16px 14px;
  border-radius: 14px;
  background: var(--card);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 22px 48px rgba(13, 27, 51, 0.18), 0 6px 16px rgba(13, 27, 51, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px) scale(0.98);
  transform-origin: left center;
  transition: opacity 0.28s var(--ease-out), transform 0.34s var(--ease-spring);
}
@media (prefers-color-scheme: dark) {
  .explainer { border-color: rgba(255, 255, 255, 0.10); }
}
.explainer.is-visible { opacity: 1; transform: translateX(0) scale(1); }
/* Arrow on the left edge, vertically tracking the hovered element. */
.explainer::before {
  content: '';
  position: absolute;
  left: -6px;
  top: var(--arrow-y, 50%);
  width: 13px; height: 13px;
  margin-top: -6.5px;
  background: var(--card-solid);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
}
@media (prefers-color-scheme: dark) {
  .explainer::before { background: var(--card-solid); border-color: rgba(255, 255, 255, 0.10); }
}
.explainer-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 5px;
}
.explainer-title {
  font-family: var(--serif); font-weight: 500; font-size: 15.5px;
  color: var(--ink-1); letter-spacing: -0.005em; margin-bottom: 3px;
}
.explainer-body { font-size: 12.5px; line-height: 1.46; color: var(--ink-2); }

/* The element currently being explained gets a soft accent spotlight. */
.is-explaining {
  position: relative;
  box-shadow: 0 0 0 2px rgba(61, 125, 190, 0.28) !important;
}
@media (prefers-color-scheme: dark) {
  .is-explaining { box-shadow: 0 0 0 2px rgba(79, 127, 230, 0.40) !important; }
}
.sidebar-chip.is-explaining { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .explainer { transition: opacity 0.2s ease; transform: none; }
  .explainer.is-visible { transform: none; }
}

/* Sparkles */
/* Skip-intro */
.skip-intro {
  position: fixed;
  bottom: 14px; right: 14px;
  z-index: 100;
  padding: 6px 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s, background 0.15s;
}
.skip-intro:hover { opacity: 1; background: var(--card); }
body.intro-done .skip-intro { display: none; }

/* ─── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(13, 27, 51, 0.45);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--card-solid);
  border-radius: 18px;
  padding: 36px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.40);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.35s var(--ease-spring);
  border: 1px solid var(--hairline);
}
.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }
.modal-eyebrow { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.modal h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; margin: 0 0 6px; color: var(--ink-1); letter-spacing: -0.01em; line-height: 1.1; }
.modal-when { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.modal-body { padding: 14px 16px; border-radius: 10px; background: rgba(13, 27, 51, 0.03); font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-2); line-height: 1.65; margin-bottom: 18px; }
@media (prefers-color-scheme: dark) { .modal-body { background: rgba(255, 255, 255, 0.04); } }
.modal-routes { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.route-chip { padding: 6px 12px; border-radius: 8px; background: rgba(13, 27, 51, 0.04); border: 1px solid var(--hairline); font-size: 12px; color: var(--ink-2); }
.route-chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.modal-close { display: block; margin: 0 auto; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(13, 27, 51, 0.03); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.modal-close:hover { background: var(--card-solid); }
.modal-buy { text-align: center; }
.modal-icon { display: flex; justify-content: center; margin-bottom: 24px; }
.modal-lede { color: var(--ink-2); margin: 0 0 28px; font-size: 15px; line-height: 1.6; }
.modal-form { display: flex; gap: 8px; margin-bottom: 18px; }
.modal-form input {
  flex: 1; padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 14px;
  background: var(--paper);
  color: var(--ink-1);
}
.modal-form button {
  padding: 12px 18px;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
  color: white;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(61, 125, 190, 0.32);
}

/* ═══════════════════════════════════════════════════════════════
   CALLBACK
   ═══════════════════════════════════════════════════════════════ */

/* Hero headline — the product line, sitting just below the live mockup on the
   continuing light background. */
/* ── Welcome: intro copy (left) + feature bento (right) ───────── */
.hero-intro {
  padding: clamp(84px, 13vh, 156px) clamp(20px, 4vw, 56px) clamp(76px, 11vh, 128px);
}
.hero-intro-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-intro-eyebrow {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px;
}
.hero-intro-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 6vw, 76px); line-height: 1.0; letter-spacing: -0.024em;
  color: var(--ink-1); margin: 0 0 22px;
  text-wrap: balance;
}
.hero-intro-h1 em { font-style: italic; color: var(--accent); }
.hero-intro-tagline {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; letter-spacing: -0.005em;
  color: var(--ink-2); margin: 0 auto 34px;
  max-width: 560px;
  text-wrap: pretty;
}
.hero-intro-desc {
  font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.6; color: var(--ink-2);
  margin: 0 0 30px; text-wrap: pretty;
}
.hero-intro-cta { display: flex; flex-direction: column; gap: 14px; align-items: center; }
/* Staggered entrance. Fail-safe by design: .wi elements are fully visible by
   default, so if the observer never fires (JS off, edge cases) the copy is
   still shown. When the section scrolls into view the chapterObserver adds
   .is-in-view, which plays the rise-in animation as a pure enhancement. */
@media (prefers-reduced-motion: no-preference) {
  .hero-intro.is-in-view .wi { animation: wiRise 0.7s var(--ease-out) both; }
  .hero-intro.is-in-view .wi-1 { animation-delay: 0.04s; }
  .hero-intro.is-in-view .wi-2 { animation-delay: 0.14s; }
  .hero-intro.is-in-view .wi-3 { animation-delay: 0.26s; }
  .hero-intro.is-in-view .wi-4 { animation-delay: 0.38s; }
}
@keyframes wiRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.intro-download {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 14px;
  font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #1F3050, #0E1B33);
  box-shadow: 0 10px 26px rgba(13, 27, 51, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.intro-download .apple-mark { width: 17px; height: auto; fill: currentColor; margin-top: -2px; }
.intro-download:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(13, 27, 51, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.intro-download:active { transform: translateY(0) scale(0.98); }
.intro-meta { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Feature bento — layered tiles with bespoke mini-visuals ───── */
.hero-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 0.95vw, 16px);
}
.hb {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(16px, 1.3vw, 20px);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  border: 1px solid rgba(13, 27, 51, 0.07);
  box-shadow: 0 1px 2px rgba(13, 27, 51, 0.04), 0 14px 30px rgba(13, 27, 51, 0.07);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.hb:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(13, 27, 51, 0.04), 0 24px 46px rgba(13, 27, 51, 0.13); }
.hb h3 { margin: 0 0 5px; font-size: 16px; font-weight: 650; color: var(--ink-1); letter-spacing: -0.012em; }
.hb p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* Featured tile: copy + live mini-roster */
.hb-feature {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: clamp(20px, 2.2vw, 34px);
  padding: clamp(22px, 1.8vw, 28px);
}
.hb-feature-copy { flex: 1; }
.hb-feature-copy h3 { font-size: clamp(19px, 1.5vw, 23px); }
.hb-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.hb-roster {
  flex: 0 0 clamp(180px, 17vw, 230px);
  background: linear-gradient(180deg, rgba(220, 229, 239, 0.7), rgba(199, 213, 231, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px; padding: 10px; display: grid; gap: 6px;
}
.hb-row { display: flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.82); border-radius: 9px; padding: 7px 11px; box-shadow: 0 1px 2px rgba(13, 27, 51, 0.04); }
.hb-flag { font-size: 15px; line-height: 1; }
.hb-city { font-size: 12.5px; color: var(--ink-2); }
.hb-time { margin-left: auto; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-time.in { color: var(--sage); }

/* Small-tile mini-visuals */
.hb-mini { display: flex; align-items: center; min-height: 38px; margin-bottom: 14px; }
.hb-mini-pips { gap: 6px; }
.hb-mini-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(13, 27, 51, 0.14); }
.hb-mini-pips i.on { background: var(--sage); }
.hb-mini-label { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hb-event { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border: 1px solid rgba(13, 27, 51, 0.08); border-radius: 11px; padding: 8px 11px; box-shadow: 0 4px 10px rgba(13, 27, 51, 0.05); }
.hb-event-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hb-event-t { font-size: 12.5px; font-weight: 600; color: var(--ink-1); }
.hb-event-s { font-size: 11px; color: var(--ink-3); }
.hb-event-check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(94, 166, 138, 0.18); color: var(--sage); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.hb-chips { flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; }
.hb-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(13, 27, 51, 0.07); border-radius: 8px; padding: 5px 9px; }
.hb-chip.is-on { color: var(--ink-1); border-color: rgba(61, 125, 190, 0.4); background: var(--accent-soft); }
.hb-chip kbd { margin-left: auto; font: 600 10.5px var(--sans); color: var(--ink-3); background: rgba(13, 27, 51, 0.06); padding: 2px 6px; border-radius: 5px; }
.hb-keys { gap: 6px; }
.hb-keys kbd { font: 600 16px var(--sans); color: var(--ink-1); background: linear-gradient(180deg, #fff, #eaf0f7); border: 1px solid rgba(13, 27, 51, 0.12); border-bottom-width: 2px; border-radius: 9px; padding: 6px 12px; box-shadow: 0 2px 4px rgba(13, 27, 51, 0.06); }
/* Privacy: a slim full-width row */
.hb-privacy-tile { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
.hb-lock { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.hb-lock svg { width: 22px; height: 22px; }

@media (prefers-color-scheme: dark) {
  .hb { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border-color: rgba(255, 255, 255, 0.09); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); }
  .hb-roster { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-color: rgba(255,255,255,0.08); }
  .hb-row, .hb-event { background: rgba(255, 255, 255, 0.06); border-color: rgba(255,255,255,0.08); }
  .hb-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
  .hb-keys kbd { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
  .intro-download { background: linear-gradient(180deg, #2a3f63, #16243c); }
}
@media (max-width: 920px) {
  .hero-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-intro-copy { max-width: 640px; }
}
@media (max-width: 560px) {
  .hero-bento { grid-template-columns: 1fr; }
  .hb-feature, .hb-privacy-tile { grid-column: auto; }
  .hb-feature { flex-direction: column; align-items: stretch; }
  .hb-roster { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hb:hover, .intro-download:hover { transform: none; }
}

.callback-section {
  padding: 140px 32px 100px;
  background: transparent;   /* show the continuing page background */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}
.callback-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.callback-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.callback-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 140px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0 auto 32px;
  color: var(--ink-1);
  max-width: 1100px;
}
.callback-headline .hl { color: var(--accent); }
.callback-headline .hl-warm { color: var(--copper); }
.callback-headline .hl-good { color: var(--sage); }
.callback-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-3);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   THE PINNED 24-HOUR DAY
   ═══════════════════════════════════════════════════════════════ */

.day-section {
  height: 700vh;
  position: relative;
}
.day-sticky {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: hsl(var(--day-sky-h, 215), var(--day-sky-s, 38%), var(--day-sky-l, 8%));
  transition: background 0.4s ease;
}

.day-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1600px 800px at var(--day-sun-x, 50%) 110%, rgba(247, 196, 108, calc(var(--day-warmth, 0) * 0.4)) 0%, transparent 65%),
    linear-gradient(180deg,
      hsl(var(--day-sky-h, 215), var(--day-sky-s, 38%), var(--day-sky-l, 8%)) 0%,
      hsl(var(--day-sky-h, 215), var(--day-sky-s, 38%), calc(var(--day-sky-l, 8%) + 4%)) 100%);
}

.day-stars { position: absolute; inset: 0; opacity: var(--day-stars-op, 0); transition: opacity 1s ease; pointer-events: none; }
.d-star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; }
.d-star.lg { width: 3px; height: 3px; }

.day-sun {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4D9 0%, #FDE7B5 35%, rgba(244, 199, 122, 0) 75%);
  top: var(--day-sun-y, 20%);
  left: var(--day-sun-x, 50%);
  transform: translate(-50%, -50%);
  opacity: var(--day-sun-op, 0);
  transition: opacity 0.6s ease, top 0.05s linear, left 0.05s linear;
  filter: blur(4px);
  pointer-events: none;
}
.day-sun::after {
  content: '';
  position: absolute;
  inset: -300%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 231, 181, 0.18) 0%, rgba(247, 196, 108, 0) 60%);
  pointer-events: none;
}

.day-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.day-countries {
  fill: hsl(var(--day-land-h, 215), var(--day-land-s, 32%), var(--day-land-l, 18%));
  stroke: rgba(255, 255, 255, var(--day-stroke-a, 0.06));
  stroke-width: 0.35;
  stroke-linejoin: round;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

/* Day pins */
.day-pin {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  z-index: 4;
  opacity: 0.4;
  transition: opacity 0.6s ease;
}
.day-pin.is-awake { opacity: 1; }
.day-pin.is-edge { opacity: 0.7; }
.dp-disc {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.5s ease;
}
.day-pin.is-awake .dp-disc {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(94, 166, 138, 0.5), 0 0 28px rgba(94, 166, 138, 0.4);
}
.day-pin.is-edge .dp-disc {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(216, 155, 63, 0.5);
}
.dp-lbl {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}
.day-pin.is-awake .dp-lbl, .day-pin.is-edge .dp-lbl { opacity: 0.95; }

/* Beat captions */
.beat {
  position: absolute;
  z-index: 5;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  letter-spacing: -0.015em;
  line-height: 1.0;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  padding: 0 32px;
  max-width: 1000px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out);
  left: 50%; top: 50%;
}
.beat.is-in { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.beat-when {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-transform: uppercase;
}
.beat-sub {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
  margin: 26px auto 0;
  max-width: 540px;
  line-height: 1.45;
}

.day-clock {
  position: absolute;
  top: 24px; left: 28px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.day-clock-time {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE CHAPTERS (varied layouts)
   ═══════════════════════════════════════════════════════════════ */

.ch { padding: 140px 32px; position: relative; overflow: hidden; }
.ch-center { max-width: 1100px; margin: 0 auto; text-align: center; }
.ch-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.ch.is-in-view .ch-eyebrow { opacity: 1; transform: translateY(0); }
.ch-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.015em;
  line-height: 1.0;
  margin: 0 auto 28px;
  color: var(--ink-1);
  max-width: 900px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out) 0.1s, transform 0.8s var(--ease-out) 0.1s;
}
.ch.is-in-view .ch-h2 { opacity: 1; transform: translateY(0); }
.ch-h2-mega {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 140px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 auto 40px;
  color: var(--ink-1);
  max-width: 1100px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out) 0.1s, transform 0.8s var(--ease-out) 0.1s;
}
.ch.is-in-view .ch-h2-mega { opacity: 1; transform: translateY(0); }
.ch-lede {
  font-size: 19px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s;
}
.ch-lede-center { font-family: var(--serif); font-style: italic; font-size: 21px; max-width: 700px; color: var(--ink-3); }
.ch.is-in-view .ch-lede { opacity: 1; transform: translateY(0); }

/* Chapter A: Menu bar */
.ch-menubar {
  background: linear-gradient(180deg, var(--paper) 0%, #f0e8da 100%);
}
@media (prefers-color-scheme: dark) {
  .ch-menubar { background: linear-gradient(180deg, var(--paper) 0%, #1a1c1f 100%); }
}
.menubar-showcase { margin: 40px auto 50px; max-width: 360px; opacity: 0; transform: scale(0.95); transition: opacity 0.9s var(--ease-out) 0.3s, transform 0.9s var(--ease-spring) 0.3s; }
.ch-menubar.is-in-view .menubar-showcase { opacity: 1; transform: scale(1); }
.menubar-product {
  background: var(--card-solid);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(13, 27, 51, 0.16);
}
.mp-section { padding: 14px 16px; border-bottom: 1px solid var(--hairline-soft); position: relative; }
.mp-section:last-child { border-bottom: 0; }
.mp-dawn { background: linear-gradient(180deg, rgba(255, 220, 160, 0.30), rgba(255, 220, 160, 0.06)); }
.mp-day { background: linear-gradient(180deg, rgba(94, 166, 138, 0.20), rgba(94, 166, 138, 0.04)); }
.mp-dusk { background: linear-gradient(180deg, rgba(61, 125, 190, 0.20), rgba(61, 125, 190, 0.04)); }
.mp-footer { background: rgba(120, 100, 150, 0.10); padding: 10px 16px; }
.mp-eyebrow { font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.10em; margin-bottom: 8px; text-transform: uppercase; }
.mp-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; }
.mp-row .nm { color: var(--ink-1); font-weight: 500; }
.mp-row .tm { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.mp-nudge { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.mp-nudge span { color: var(--accent); }

/* Chapter B: Slot scoring (poster-scale cards) */
.ch-slots {
  background: var(--paper);
}
.slot-posters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 60px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.slot-poster {
  aspect-ratio: 3 / 4;
  padding: 32px 28px;
  border-radius: 20px;
  background: var(--card-solid);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  box-shadow: var(--shadow-tight);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), box-shadow 0.3s;
}
.ch-slots.is-in-view .slot-poster:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.ch-slots.is-in-view .slot-poster:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.ch-slots.is-in-view .slot-poster:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.slot-poster:hover { box-shadow: var(--shadow-soft); transform: translateY(-4px); }
.slot-poster.is-great {
  background: linear-gradient(180deg, rgba(94, 166, 138, 0.10) 0%, rgba(94, 166, 138, 0.04) 100%);
  border: 1.5px solid rgba(94, 166, 138, 0.40);
}
.sp-eyebrow { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.10em; text-transform: uppercase; }
.slot-poster.is-great .sp-eyebrow { color: var(--sage); }
.sp-time {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.05;
  color: var(--ink-1);
  letter-spacing: -0.02em;
}
.sp-status { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-2); }
.slot-poster.is-great .sp-status { color: var(--sage); font-weight: 500; }

/* Chapter C: Calendar handoff (Mac window mockup) */
.ch-calendar {
  background: linear-gradient(180deg, var(--paper) 0%, #e8eef5 100%);
}
@media (prefers-color-scheme: dark) {
  .ch-calendar { background: linear-gradient(180deg, var(--paper) 0%, #0e1a26 100%); }
}
.mac-window {
  max-width: 720px;
  margin: 60px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--card-solid);
  box-shadow:
    0 50px 100px rgba(13, 27, 51, 0.20),
    0 20px 40px rgba(13, 27, 51, 0.10);
  opacity: 0;
  transform: translateY(40px) rotateX(2deg);
  transition: opacity 1s var(--ease-out) 0.3s, transform 1.2s var(--ease-out) 0.3s;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.ch-calendar.is-in-view .mac-window { opacity: 1; transform: translateY(0) rotateX(0); }
.mac-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #f0f1f3, #e6e8eb);
  border-bottom: 1px solid var(--hairline);
}
@media (prefers-color-scheme: dark) {
  .mac-titlebar { background: linear-gradient(180deg, #2a3140, #232a37); }
}
.mac-light { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.mac-light.close { background: #FF5F57; }
.mac-light.minimize { background: #FEBC2E; }
.mac-light.maximize { background: #28C840; }
.mac-titlebar-title {
  margin-left: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.mac-content { padding: 28px 32px; text-align: left; }
.mac-event-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink-1);
  margin-bottom: 6px;
}
.mac-event-time {
  font-size: 14px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.mac-event-attendees {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px;
}
.att {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13, 27, 51, 0.04);
  border: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--ink-2);
}
@media (prefers-color-scheme: dark) {
  .att { background: rgba(255, 255, 255, 0.04); }
}
.mac-event-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  padding: 14px 16px;
  background: rgba(13, 27, 51, 0.03);
  border-radius: 9px;
  margin-bottom: 20px;
}
@media (prefers-color-scheme: dark) {
  .mac-event-body { background: rgba(255, 255, 255, 0.03); }
}
.mac-routes { display: flex; gap: 6px; flex-wrap: wrap; }

/* Chapter D: Saved groups */
.ch-groups {
  background: var(--paper);
}
.group-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 60px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.group-card {
  padding: 32px 28px;
  border-radius: 18px;
  background: var(--card-solid);
  border: 1px solid var(--hairline);
  text-align: left;
  box-shadow: var(--shadow-tight);
  position: relative;
  opacity: 0;
  transform: translateY(30px) rotate(0deg);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), box-shadow 0.3s;
}
.ch-groups.is-in-view .group-card:nth-child(1) { opacity: 1; transform: translateY(0) rotate(-1deg); transition-delay: 0.3s; }
.ch-groups.is-in-view .group-card:nth-child(2) { opacity: 1; transform: translateY(0) rotate(0.5deg); transition-delay: 0.45s; }
.ch-groups.is-in-view .group-card:nth-child(3) { opacity: 1; transform: translateY(0) rotate(-0.3deg); transition-delay: 0.6s; }
.group-card:hover { transform: translateY(-4px) rotate(0) !important; box-shadow: var(--shadow-soft); }
.group-card.is-active {
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
  color: white;
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(61, 125, 190, 0.30);
}
.gc-icon { font-size: 28px; margin-bottom: 16px; }
.gc-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink-1);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.group-card.is-active .gc-name { color: white; }
.gc-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; }
.group-card.is-active .gc-meta { color: rgba(255, 255, 255, 0.75); }
.gc-kbd {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(13, 27, 51, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.group-card.is-active .gc-kbd { background: rgba(255, 255, 255, 0.20); color: white; }

/* Chapter E: Quick Check — pure type */
.ch-quick {
  background: linear-gradient(180deg, var(--paper) 0%, #f0eada 50%, var(--paper) 100%);
  padding: 200px 32px;
}
@media (prefers-color-scheme: dark) {
  .ch-quick { background: linear-gradient(180deg, var(--paper) 0%, #1a1c20 50%, var(--paper) 100%); }
}

/* Every feature chapter is now transparent so the single continuous page
   canvas (set on <body>) flows behind all of them, uninterrupted. Their
   content mockups and dark ink text sit directly on the gradient. */
.ch-menubar, .ch-slots, .ch-calendar, .ch-groups, .ch-quick {
  background: transparent;
}

/* Chapter F: Privacy — now sits on the continuous page canvas (the dark
   backdrop + twinkling lights were a background effect, removed). */
.ch-privacy {
  background: transparent;
  position: relative;
  padding: 160px 32px;
}
.privacy-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pl {
  position: absolute;
  width: 3px; height: 3px;
  background: rgba(255, 240, 200, 0.7);
  border-radius: 50%;
  animation: lightTwinkle 4s ease-in-out infinite;
}
.pl-bright { width: 4px; height: 4px; background: rgba(255, 240, 220, 0.95); box-shadow: 0 0 6px rgba(255, 220, 180, 0.6); }
.pl:nth-of-type(2) { animation-delay: 0.5s; }
.pl:nth-of-type(3) { animation-delay: 1s; }
.pl:nth-of-type(4) { animation-delay: 1.5s; }
.pl:nth-of-type(5) { animation-delay: 2s; }
.pl:nth-of-type(6) { animation-delay: 2.5s; }
.pl:nth-of-type(7) { animation-delay: 3s; }
@keyframes lightTwinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
/* These were light-on-dark; now they track the ink tokens so the privacy
   copy reads on the light canvas (and stays correct in dark mode). */
.ch-eyebrow-light { color: var(--accent); }
.ch-h2-light { color: var(--ink-1); }
.ch-lede-light {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: 19px;
}
.privacy-pillars {
  list-style: none;
  padding: 0;
  margin: 60px auto 0;
  max-width: 700px;
  text-align: left;
  display: grid;
  gap: 18px;
}
.privacy-pillars li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.ch-privacy.is-in-view .privacy-pillars li:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.ch-privacy.is-in-view .privacy-pillars li:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.45s; }
.ch-privacy.is-in-view .privacy-pillars li:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }
.ch-privacy.is-in-view .privacy-pillars li:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.75s; }
.pp-check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(94, 166, 138, 0.18);
  color: var(--sage);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING SUNRISE (from Experiment 04 v2)
   ═══════════════════════════════════════════════════════════════ */

/* The sunrise scroll-showpiece is gone; this is now a calm pricing section
   sitting on the continuous page canvas. Normal flow, no pin, no backdrop. */
.sunrise-section { position: relative; padding: 120px 32px; background: transparent; }
.sunrise-sticky {
  position: static;
  height: auto;
  overflow: visible;
  background: none;
}

.layer-stars { position: absolute; inset: 0; pointer-events: none; opacity: var(--sr-stars-op, 1); transition: opacity 0.6s ease; }
.morning-star {
  position: absolute;
  top: 25%; left: 65%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 230, 200, 0.5);
  opacity: var(--venus-op, 1);
  transition: opacity 1s ease;
}

.layer-cirrus { position: absolute; inset: 0; pointer-events: none; opacity: var(--cirrus-op, 0); transition: opacity 1s ease; mix-blend-mode: screen; }
.cirrus-svg { width: 100%; height: 100%; }

.layer-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 1200px 300px at 50% var(--haze-y, 105%), hsla(var(--haze-h, 30), 60%, 70%, var(--haze-a, 0)) 0%, transparent 60%);
  transition: background 0.4s ease;
}

.layer-mountains-distant {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 35%;
  pointer-events: none;
  opacity: var(--mtn-d-op, 0.4);
  transition: opacity 0.8s ease;
}
.layer-mountains-distant svg { width: 100%; height: 100%; }

.sun-system {
  position: absolute;
  left: 50%;
  bottom: var(--sun-bottom, -180px);
  transform: translateX(-50%);
  width: 320px; height: 320px;
  pointer-events: none;
  transition: bottom 0.4s var(--ease-out);
}
.sun-corona {
  position: absolute;
  inset: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(var(--sun-h, 35), 90%, 80%, var(--corona-a, 0)) 0%, hsla(var(--sun-h, 35), 85%, 70%, calc(var(--corona-a, 0) * 0.4)) 30%, transparent 60%);
  opacity: var(--sun-vis, 0);
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;
}
.sun-rays {
  position: absolute;
  inset: -400px;
  pointer-events: none;
  opacity: calc(var(--sun-vis, 0) * var(--rays-a, 0));
  transition: opacity 0.6s ease;
}
.sun-rays svg { width: 100%; height: 100%; }
.ray {
  stroke: hsla(var(--sun-h, 35), 95%, 85%, 0.4);
  stroke-width: 1;
  stroke-linecap: round;
}
.sun-halo {
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(var(--sun-h, 35), 100%, 80%, calc(var(--sun-vis, 0) * 0.5)) 0%, hsla(var(--sun-h, 35), 95%, 70%, calc(var(--sun-vis, 0) * 0.3)) 30%, transparent 70%);
  filter: blur(20px);
  mix-blend-mode: screen;
}
.sun-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    #FFF8E5 0%,
    #FFE9B5 20%,
    hsl(var(--sun-h, 35), 95%, 75%) 50%,
    hsl(var(--sun-h, 35), 85%, 55%) 75%,
    hsl(var(--sun-h, 35), 75%, 45%) 95%,
    transparent 100%);
  opacity: var(--sun-vis, 0);
  filter: blur(1.5px);
  transition: opacity 0.6s ease, background 1s ease;
  box-shadow: inset 0 0 30px hsla(var(--sun-h, 35), 100%, 80%, 0.6), inset 0 0 80px hsla(var(--sun-h, 35), 100%, 70%, 0.3);
}
.sun-disc::before {
  content: '';
  position: absolute;
  top: 12%; left: 22%;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  filter: blur(8px);
}

.lens-flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--flare-a, 0) * 0.5);
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;
}
.flare-1, .flare-2, .flare-3, .flare-4 {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4D9 0%, rgba(253, 231, 181, 0.6) 30%, transparent 70%);
  filter: blur(4px);
}
.flare-1 { width: 50px; height: 50px; top: 70%; left: 20%; }
.flare-2 { width: 30px; height: 30px; top: 80%; left: 35%; opacity: 0.6; }
.flare-3 { width: 70px; height: 70px; top: 60%; left: 75%; opacity: 0.5; }
.flare-4 { width: 25px; height: 25px; top: 75%; left: 88%; opacity: 0.8; }

.layer-mountains-near {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 22%;
  pointer-events: none;
}
.layer-mountains-near svg { width: 100%; height: 100%; }

.sun-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 1200px 800px at 50% 50%, rgba(255, 245, 215, var(--flash, 0)) 0%, transparent 60%);
  mix-blend-mode: screen;
  transition: background 0.3s ease;
}

/* Static, in-flow pricing block on the light page canvas (the scroll-driven
   sunrise reveal is gone, so colours/opacity are fixed and dark-on-light). */
.pricing-content {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}
.pricing-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.pricing-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 6.5vw, 88px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-align: center;
  margin: 0 0 22px;
  max-width: 1020px;
  color: var(--ink-1);
  text-wrap: balance;
}
.pricing-headline .line { display: block; color: var(--ink-1); }
.pricing-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 auto 48px;
  line-height: 1.5;
  text-wrap: pretty;
}
.pricing-card {
  width: 100%; max-width: 460px;
  padding: 38px 34px;
  border-radius: 24px;
  background: var(--card-solid);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}
.pricing-price { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 88px; line-height: 1; color: #0E1B33; margin: 0 0 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pricing-price .cur { font-size: 34px; vertical-align: super; font-style: normal; margin-right: 4px; }
.pricing-tag { color: rgba(13, 27, 51, 0.55); font-size: 14px; margin-bottom: 28px; }
.pricing-includes { text-align: left; list-style: none; padding: 0; margin: 0 0 28px; }
.pricing-includes li { padding: 12px 0; border-top: 1px solid rgba(13, 27, 51, 0.07); color: rgba(13, 27, 51, 0.75); font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.pricing-includes li:first-child { border-top: 0; }
.pricing-includes li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5EA68A; flex-shrink: 0; }
.pricing-cta {
  display: block;
  width: 100%;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #5EB8E8, #3D7DBE);
  color: white;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(61, 125, 190, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 calc(var(--cta-glow, 0) * 60px) calc(var(--cta-glow, 0) * 20px) rgba(255, 220, 150, calc(var(--cta-glow, 0) * 0.7));
  transition: transform 0.15s ease, box-shadow 0.6s ease;
}
.pricing-cta:hover { transform: translateY(-2px); }
.pricing-foot { font-size: 12px; color: rgba(13, 27, 51, 0.5); margin: 14px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   CLOSING
   ═══════════════════════════════════════════════════════════════ */

/* Testimonials: two full-bleed marquee rows drifting in opposite
   directions (top left, bottom right); pause on hover, grab to drag. */
.tm-section { background: transparent; padding: clamp(80px, 10vh, 140px) 0 clamp(60px, 7vh, 100px); overflow: hidden; }
.tm-head { max-width: 1080px; margin: 0 auto 56px; text-align: center; padding: 0 32px; }
.tm-display { margin: 0 auto; max-width: 18ch; }
.tm-sub { font-family: var(--sans); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.5; color: var(--ink-2); margin: 18px auto 0; max-width: 52ch; text-wrap: balance; }
.tm-rows { display: flex; flex-direction: column; gap: 20px; }
.tm-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.tm-track { display: flex; gap: 20px; width: max-content; cursor: grab; will-change: transform; touch-action: pan-y; }
.tm-track.is-dragging { cursor: grabbing; }
.tm-card {
  flex: 0 0 auto; width: clamp(300px, 30vw, 384px);
  height: 210px; /* fixed so every card — top row and bottom — is identical */
  padding: 24px 26px 26px; border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  border: 1px solid rgba(13, 27, 51, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(13, 27, 51, .04), 0 12px 32px rgba(13, 27, 51, .06);
  user-select: none; -webkit-user-select: none;
}
.tm-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.tm-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; background: rgba(13, 27, 51, .045); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.tm-name { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink-1); }
.tm-role { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.tm-quote { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-color-scheme: dark) {
  .tm-card { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .09); }
}

/* ── Comparison matrix — Atlas column elevated and glowing, competitors
   fairly behind; rows highlight on hover and drive the caption; the Atlas
   ticks animate in on scroll. ── */
.vs-section { background: transparent; padding: clamp(80px, 10vh, 140px) 32px clamp(72px, 9vh, 120px); }
.vs-inner { max-width: 1080px; margin: 0 auto; }
.vs-head { text-align: center; margin-bottom: 44px; }
.vs-sub { max-width: 60ch; margin: 14px auto 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

.vs-table { position: relative; background: linear-gradient(180deg, #ffffff, #f1f6fc); border: 1px solid var(--hairline); border-radius: 22px; padding: 10px clamp(14px, 1.6vw, 24px) 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(13,27,51,.04), 0 18px 44px rgba(13,27,51,.08); }
/* the elevated accent card behind the Atlas column (placed by JS) */
.vs-hi {
  position: absolute; top: -16px; bottom: -14px; z-index: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(95, 184, 232, 0.12), rgba(61, 125, 190, 0.06));
  border: 1.5px solid rgba(61, 125, 190, 0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 44px rgba(61, 125, 190, 0.18);
}
.vs-row { position: relative; z-index: 1; display: flex; align-items: stretch; border-top: 1px solid var(--hairline-soft); border-radius: 10px; transition: background 0.2s var(--ease-out); }
.vs-row + .vs-row { margin-top: 0; }
.vs-row:not(.vs-row-head):hover { background: rgba(13, 27, 51, 0.035); }
.vs-rh { flex: 2; padding: 16px 14px 16px 6px; display: flex; align-items: center; gap: 13px; }
.vs-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.vs-ico svg { width: 18px; height: 18px; }
.vs-lab { font-family: var(--serif); font-weight: 400; font-size: 15.5px; line-height: 1.2; letter-spacing: -0.008em; color: var(--ink-1); white-space: nowrap; }
.vs-c { flex: 1; padding: 17px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }

/* header row */
.vs-row-head { border-top: none; align-items: flex-end; }
.vs-row-head .vs-c { padding-bottom: 20px; padding-top: 8px; }
.vs-c-headcell { gap: 4px; }
.vs-brand { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 21px; letter-spacing: -0.01em; color: var(--accent-deep); }
.vs-tag { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); background: rgba(61,125,190,.12); border: 1px solid rgba(61,125,190,.3); padding: 3px 8px; border-radius: 999px; }
.vs-name { font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink-3); line-height: 1.2; }
.vs-desc { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; letter-spacing: .03em; color: var(--ink-4); }

/* marks */
.m { display: inline-flex; align-items: center; justify-content: center; }
.m-on { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-glow), var(--accent)); box-shadow: 0 4px 11px rgba(61,125,190,.42), inset 0 1px 0 rgba(255,255,255,.4); }
.m-on svg { width: 15px; height: 15px; color: #fff; }
.m-y { width: 26px; height: 26px; border-radius: 50%; background: rgba(94,166,138,.12); }
.m-y svg { width: 14px; height: 14px; color: var(--sage); }
.m-x { width: 26px; height: 26px; border-radius: 50%; background: rgba(199,56,46,.09); color: #C7382E; }
.m-x svg { width: 12px; height: 12px; }

/* price row */
.vs-price-row .vs-c { padding-top: 18px; padding-bottom: 18px; }
.vs-price { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1; letter-spacing: -0.01em; color: var(--ink-1); }
.vs-price-per { font-size: 0.58em; font-weight: 700; color: #9c6a1a; }
.vs-price-sub { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.vs-price-row .vs-c-atlas .vs-price { font-size: 23px; color: var(--accent-deep); }
.vs-price-row .vs-c-atlas .vs-price-sub { color: var(--accent); }
/* billing-cadence chips: make recurring (amber) vs one-time (green) unmistakable */
.vs-cadence { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 8px 3px 6px; border-radius: 999px; font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.vs-cadence svg { width: 10px; height: 10px; flex: 0 0 auto; }
.vs-cadence.recurring { color: #9c6a1a; background: rgba(216, 155, 63, .16); border: 1px solid rgba(216, 155, 63, .36); }
.vs-cadence.once { color: #34795e; background: rgba(78, 154, 126, .16); border: 1px solid rgba(78, 154, 126, .40); }

.vs-caption { margin: 26px auto 0; max-width: 60ch; text-align: center; min-height: 2.6em; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--ink-2); transition: opacity 0.25s var(--ease-out); }

/* reveal: Atlas ticks pop in on scroll (armed by JS so no-JS stays visible) */
.vs-armed .vs-c-atlas .m-on { opacity: 0; transform: scale(0.4); }
.vs-table .vs-c-atlas .m-on { transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-spring); }
.vs-in .vs-c-atlas .m-on { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .vs-table .vs-c-atlas .m-on { transition: none; }
}
@media (max-width: 820px) {
  .vs-inner { overflow-x: auto; }
  .vs-table { min-width: 680px; }
  .vs-rh { flex: 1.5; font-size: 13.5px; }
}
/* Dark: the table becomes a lifted slate panel; the Atlas column keeps its
   cobalt glow; accent/status text brightens so it doesn't sink into the navy. */
@media (prefers-color-scheme: dark) {
  .vs-table { background: linear-gradient(180deg, #1C2636, #141C2A); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3), 0 24px 50px rgba(0,0,0,.45); }
  .vs-hi { background: linear-gradient(180deg, rgba(79,127,230,.16), rgba(47,99,204,.06)); border-color: rgba(79,127,230,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.4); }
  .vs-row:not(.vs-row-head):hover { background: rgba(255,255,255,.04); }
  .vs-brand { color: var(--accent-glow); }
  .m-y { background: rgba(110,199,149,.16); }
  .m-x { background: rgba(255,122,120,.12); color: var(--warning); }
  .vs-price-per { color: var(--amber); }
  .vs-cadence.recurring { color: #F7C46C; background: rgba(216,155,63,.16); border-color: rgba(216,155,63,.40); }
  .vs-cadence.once { color: #6EC795; background: rgba(78,154,126,.18); border-color: rgba(78,154,126,.45); }
  .vs-price-row .vs-c-atlas .vs-price { color: var(--accent-glow); }
}

.hero-testimonial {
  margin: 0 auto 50px;
  max-width: 800px;
  padding: 50px 60px;
  text-align: center;
  background: linear-gradient(180deg, var(--card-solid) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--shadow-tight);
}
@media (prefers-color-scheme: dark) {
  .hero-testimonial { background: linear-gradient(180deg, var(--card-solid) 0%, rgba(255, 255, 255, 0.02) 100%); }
}
.hero-testimonial p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink-1);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.hero-testimonial footer { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hero-testimonial .flag { font-size: 22px; }
.hero-testimonial .nm { font-weight: 600; font-size: 14px; color: var(--ink-1); }
.hero-testimonial .role { font-size: 13px; color: var(--ink-3); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.testimonial {
  padding: 26px;
  border-radius: 16px;
  background: var(--card-solid);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-tight);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.testimonial:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.testimonial .stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.testimonial p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-1);
  margin: 0 0 16px;
  line-height: 1.55;
}
.testimonial footer { display: flex; align-items: center; gap: 10px; }
.testimonial .flag { font-size: 18px; line-height: 1; }
.testimonial .nm { font-weight: 600; font-size: 13.5px; color: var(--ink-1); }
.testimonial .role { font-size: 12px; color: var(--ink-3); }

.faq-list { display: grid; gap: 2px; max-width: 800px; margin: 0 auto; }
.faq-item { padding: 18px 0; border-top: 1px solid var(--hairline-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline-soft); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-1);
  padding-right: 32px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute; right: 0; top: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-3);
  transition: transform 0.25s var(--ease-spring);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-item p { font-size: 14.5px; color: var(--ink-2); margin: 12px 0 0; line-height: 1.6; }

/* Related */
/* ── Theodore catalogue — exact execution ported from the Shiny site:
   product-branded cards (each app's real palette), brand-coloured hover
   glow, icon-wrap that crops built-in icon padding, Plus Jakarta Sans. ── */
/* the day-to-dusk close begins here, just below the FAQ: one long, smooth
   alpha ramp of a single navy (no intermediate colour stops, so there is no
   visible banding) fades the light page canvas down to the deep footer navy */
.catalogue-section { background: linear-gradient(180deg, rgba(11, 20, 38, 0) 0%, rgba(11, 20, 38, 0) 20%, rgba(11, 20, 38, 1) 100%); padding: clamp(80px, 10vh, 140px) 32px clamp(72px, 9vh, 120px); }
.catalogue-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.cat-eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 12px; }
.cat-display { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.02em; color: var(--ink-1); line-height: 1.05; text-wrap: balance; margin: 0 auto; max-width: 18ch; }
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin: 48px auto 0;
  max-width: 1100px;
  text-align: left;
}
@media (max-width: 760px) { .catalogue-grid { grid-template-columns: 1fr; } }

.catalogue-grid .cat-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 36px;
  border-radius: 22px;
  text-decoration: none;
  position: relative; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 2px rgba(60, 40, 20, .04),
    0 16px 40px rgba(60, 40, 20, .08);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
  font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}
.catalogue-grid .cat-card:hover { transform: translateY(-5px); }

/* SOLACE — dark navy palette, warm amber hover glow */
.catalogue-grid .cat-solace {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 180, 90, .20), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(74, 158, 255, .16), transparent 55%),
    linear-gradient(135deg, #1C1C1E 0%, #2A2D3A 60%, #1F2438 100%);
  color: #EBEBF5;
}
.catalogue-grid .cat-solace .cat-tag { color: rgba(235, 235, 245, .72); }
.catalogue-grid .cat-solace:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1.5px rgba(255, 180, 90, .7),
    0 0 36px rgba(255, 180, 90, .45),
    0 4px 8px rgba(0, 0, 0, .18),
    0 28px 60px rgba(0, 0, 0, .30);
}

/* CHARM — cream paper palette, soft blue hover glow */
.catalogue-grid .cat-charm {
  background:
    radial-gradient(circle at 100% 0%, rgba(74, 158, 255, .20), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(168, 85, 247, .12), transparent 55%),
    linear-gradient(135deg, #FAF7F0 0%, #F2EEE5 100%);
  color: #1A1A1A;
}
.catalogue-grid .cat-charm .cat-tag { color: rgba(26, 26, 26, .66); }
.catalogue-grid .cat-charm:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1.5px rgba(74, 158, 255, .65),
    0 0 36px rgba(74, 158, 255, .40),
    0 4px 8px rgba(60, 40, 20, .08),
    0 28px 60px rgba(60, 40, 20, .14);
}

/* SHINY — fresh mint/teal palette to match its brand, teal hover glow */
.catalogue-grid .cat-shiny {
  background:
    radial-gradient(circle at 100% 0%, rgba(80, 210, 225, .22), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(50, 150, 200, .14), transparent 55%),
    linear-gradient(135deg, #F3FBFC 0%, #E7F4F3 100%);
  color: #11302E;
}
.catalogue-grid .cat-shiny .cat-tag { color: rgba(17, 48, 46, .66); }
.catalogue-grid .cat-shiny:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 1.5px rgba(80, 210, 225, .65),
    0 0 36px rgba(80, 210, 225, .40),
    0 4px 8px rgba(20, 60, 55, .08),
    0 28px 60px rgba(20, 60, 55, .14);
}

.catalogue-grid .cat-brand { display: flex; align-items: center; gap: 14px; }
.catalogue-grid .cat-icon-wrap {
  width: 46px; height: 46px; border-radius: 11px;
  flex-shrink: 0; overflow: hidden; display: inline-flex;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .18);
}
.catalogue-grid .cat-icon { width: 108%; height: 108%; margin: -4%; object-fit: cover; display: block; }
.catalogue-grid .cat-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-style: normal;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1; letter-spacing: -0.025em;
  margin: 0; color: inherit;
}
.catalogue-grid .cat-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 14.5px; line-height: 1.55;
  margin: 0; max-width: 46ch; text-wrap: pretty;
}
.catalogue-grid .cat-tag strong { font-weight: 700; }
.catalogue-grid .cat-tag + .cat-tag { margin-top: -2px; }
@media (prefers-reduced-motion: reduce) {
  .catalogue-grid .cat-card:hover { transform: none; }
}
/* Dark: Solace already ships a dark palette, so it carries over untouched.
   Charm and Shiny get bespoke dark backgrounds — a deep slate base with their
   own brand accent washed in as a corner tint, mirroring the Solace treatment
   so all three cards read as a cohesive dark set. */
@media (prefers-color-scheme: dark) {
  .catalogue-grid .cat-card {
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .06),
      0 1px 2px rgba(0, 0, 0, .3),
      0 16px 40px rgba(0, 0, 0, .42);
  }
  .catalogue-grid .cat-icon-wrap { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45); }

  .catalogue-grid .cat-charm {
    background:
      radial-gradient(circle at 100% 0%, rgba(74, 158, 255, .24), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(168, 85, 247, .14), transparent 55%),
      linear-gradient(135deg, #15212E 0%, #1B2A3C 60%, #182234 100%);
    color: #E6EDF5;
  }
  .catalogue-grid .cat-charm .cat-tag { color: rgba(230, 237, 245, .72); }
  .catalogue-grid .cat-charm:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 0 0 1.5px rgba(74, 158, 255, .7),
      0 0 36px rgba(74, 158, 255, .42),
      0 4px 8px rgba(0, 0, 0, .25),
      0 28px 60px rgba(0, 0, 0, .35);
  }

  .catalogue-grid .cat-shiny {
    background:
      radial-gradient(circle at 100% 0%, rgba(80, 210, 225, .24), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(50, 150, 200, .16), transparent 55%),
      linear-gradient(135deg, #112428 0%, #143038 60%, #122A30 100%);
    color: #E2F1F2;
  }
  .catalogue-grid .cat-shiny .cat-tag { color: rgba(226, 241, 242, .72); }
  .catalogue-grid .cat-shiny:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 0 0 1.5px rgba(80, 210, 225, .7),
      0 0 36px rgba(80, 210, 225, .42),
      0 4px 8px rgba(0, 0, 0, .25),
      0 28px 60px rgba(0, 0, 0, .35);
  }
}

/* ── FAQ — six featured cards + searchable, topic-filtered accordion.
   Structure/interactions ported from the Shiny site, styled in Atlas's
   palette (accent blue + sage on the light canvas, Fraunces + Inter). ── */
.faq-section { padding: clamp(52px, 7vh, 92px) 32px clamp(44px, 6vh, 80px); background: transparent; }
.faq-head { max-width: 1080px; margin: 0 auto; text-align: center; }
.faq-display { margin-bottom: 0; max-width: 22ch; }
/* two-pane: featured cards | meridian | search hub, as equal halves */
.faq-split { max-width: 1000px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 30px; text-align: left; }
.faq-left { min-width: 0; }
.faq-pane-line { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.3; letter-spacing: -.01em; color: var(--accent-deep); margin: 0 0 15px; }
.faq-divider { width: 100%; height: 1px; background: repeating-linear-gradient(90deg, rgba(61, 125, 190, .38) 0 4px, transparent 4px 10px); }
.faq-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 13px; }
@media (max-width: 900px) { .faq-split { gap: 26px; } .faq-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } }
@media (max-width: 560px) { .faq-bento { grid-template-columns: 1fr; } }
.faq-card {
  position: relative;
  padding: 16px 18px;
  border-radius: 13px;
  display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  border: 1px solid rgba(13, 27, 51, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(13, 27, 51, .04), 0 12px 32px rgba(13, 27, 51, .06);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  height: 100%;
}
.faq-card:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 125, 190, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(61, 125, 190, .16), 0 0 32px rgba(61, 125, 190, .14), 0 4px 8px rgba(13, 27, 51, .08), 0 22px 48px rgba(13, 27, 51, .10);
}
.faq-stamp {
  display: inline-block; align-self: flex-start; white-space: nowrap;
  font-family: var(--sans); font-size: 9px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
  padding: 3px 7px; border-radius: 6px;
  background: var(--accent-soft); border: 1px solid rgba(61, 125, 190, .22);
}
.faq-q { font-family: var(--serif); font-weight: 400; font-size: clamp(14.5px, 1.1vw, 16px); letter-spacing: -0.014em; line-height: 1.25; color: var(--ink-1); margin: 0; min-height: 1.5em; text-wrap: balance; }
.faq-a { font-family: var(--sans); font-size: 12.25px; line-height: 1.5; color: var(--ink-2); margin: 0; text-wrap: pretty; }
/* card header row: category stamp (left) + a quiet survey coordinate (right) */
.faq-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.faq-coord { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; letter-spacing: .01em; color: var(--ink-4); white-space: nowrap; flex-shrink: 0; opacity: .8; }

/* the connecting meridian: a short dashed line + ringed node that threads the
   featured grid down into the search hub, so the two read as one instrument */
.faq-connector { display: flex; flex-direction: column; align-items: center; margin: 26px 0 4px; }
.faq-conn-line { width: 1px; height: 40px; background: repeating-linear-gradient(180deg, rgba(61,125,190,.45) 0 4px, transparent 4px 9px); }
.faq-conn-node { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) { .faq-conn-node { animation: faqNodePulse 3.2s var(--ease-out) infinite; } }
@keyframes faqNodePulse { 0%,100% { box-shadow: 0 0 0 4px rgba(61,125,190,.10); } 50% { box-shadow: 0 0 0 7px rgba(61,125,190,.06); } }

/* match the hub's width to the bento above it so both sections align edge to edge */
.faq-hub { max-width: none; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.faq-line {
  text-align: center; margin: 0 auto 28px; max-width: 32ch;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; letter-spacing: -0.012em;
  color: var(--accent-deep); text-wrap: balance;
}
.faq-search { position: relative; margin-bottom: 13px; }
.faq-search input {
  width: 100%; padding: 12px 18px 12px 46px;
  font-family: var(--sans); font-size: 13.5px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-radius: 13px; color: var(--ink-1);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(13, 27, 51, .04);
}
.faq-search input:focus { outline: none; border-color: rgba(61, 125, 190, .5); background: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 4px rgba(61, 125, 190, .16); }
.faq-search input::placeholder { color: var(--ink-3); }
.faq-search-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; display: inline-flex; }
.faq-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 0 0 14px; }
@media (max-width: 900px) { .faq-chips { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .faq-chips { grid-template-columns: repeat(2, 1fr); } }
/* chips echo the cards' category stamps (uppercase, tracked) so the browse
   row reads as the same category system as the six cards above */
.faq-chip {
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  padding: 9px 8px; border-radius: 9px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--hairline); color: var(--ink-3);
  cursor: pointer; transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.faq-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(61, 125, 190, .4); }
.faq-chip.is-active { background: linear-gradient(180deg, var(--accent-glow), var(--accent)); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 4px 12px rgba(61, 125, 190, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.faq-results {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 15px; padding: 0 16px; border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(13, 27, 51, .04), 0 12px 32px rgba(13, 27, 51, .06);
  text-align: left;
}
.faq-row { border-top: 1px solid var(--hairline-soft); }
.faq-row:first-of-type { border-top: none; }
.faq-row > summary {
  padding: 13px 4px; cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--serif); font-weight: 400; font-size: 15.5px; letter-spacing: -0.012em; line-height: 1.3;
  color: var(--ink-1); transition: color .25s var(--ease-out);
}
.faq-row > summary::-webkit-details-marker { display: none; }
.faq-row > summary:hover { color: var(--accent); }
.faq-toggle { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); transition: transform .4s var(--ease-out), color .3s var(--ease-out); }
.faq-row[open] .faq-toggle { transform: rotate(45deg); color: var(--amber); }
.faq-row.is-collapsing .faq-toggle { transform: rotate(0deg); color: var(--accent); }
/* animated disclosure: smooth two-way height via grid 0fr -> 1fr, body fades in */
.faq-row-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .48s var(--ease-out); }
.faq-row[open] .faq-row-wrap { grid-template-rows: 1fr; }
.faq-row-body { overflow: hidden; min-height: 0; padding: 0 6px 17px 40px; max-width: 74ch; font-family: var(--sans); font-size: 13.25px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; opacity: 0; transition: opacity .26s var(--ease-out); }
.faq-row[open] .faq-row-body { opacity: 1; transition: opacity .42s var(--ease-out) .12s; }
.faq-row.is-collapsing .faq-row-body { opacity: 0; transition: opacity .2s var(--ease-out); }
.faq-row-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(61, 125, 190, .3); }
.faq-row-body a:hover { border-bottom-color: currentColor; }
.faq-empty { text-align: center; padding: 40px 16px; font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: 16px; }
@media (prefers-color-scheme: dark) {
  .faq-card { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .09); }
  .faq-search input, .faq-chip, .faq-results { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
  .faq-search input:focus { background: rgba(255, 255, 255, .08); }
}
@media (prefers-reduced-motion: reduce) { .faq-card:hover { transform: none; } .faq-row-wrap, .faq-row-body, .faq-toggle, .faq-row > summary { transition: none; } }

/* Footer */
/* The page closes dark again — the footer fades from the light page into deep
   ink, echoing the hero's masthead and completing the day-to-dusk arc. */
/* The page closes on a confident sign-off: a closing call-to-action over a
   brand lockup and three link columns, on the deep navy that bookends the hero. */
.site-footer {
  padding: clamp(72px, 9vh, 100px) clamp(24px, 5vw, 48px) 56px;
  background: #0B1426;
  border-top: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-inner { max-width: 1120px; margin: 0 auto; }
/* closing call-to-action */
.footer-cta { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.footer-cta-line { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0 0 28px; text-wrap: balance; }
.footer-cta-actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.footer-buy { display: inline-flex; align-items: center; gap: 7px; padding: 12px 20px; border-radius: 12px; background: linear-gradient(180deg, var(--accent-glow), var(--accent)); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 14.5px; box-shadow: 0 6px 18px rgba(61, 125, 190, .4), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.footer-buy:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(61, 125, 190, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.footer-buy .px { font-weight: 500; color: rgba(255, 255, 255, .8); }
.footer-ghost { font-family: var(--sans); font-size: 14.5px; color: rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(255, 255, 255, .28); padding-bottom: 1px; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.footer-ghost:hover { color: #fff; border-color: #fff; }
.footer-rule { height: 1px; background: rgba(255, 255, 255, .10); }
/* brand lockup + three link columns */
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); padding: 48px 0 40px; text-align: left; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-style: italic; font-size: 19px; color: #fff; }
.footer-brand:hover { text-decoration: none; }
.footer-brand .brand-icon { width: 22px; height: 22px; border-radius: 6px; }
.footer-tag { font-family: var(--serif); font-style: italic; font-size: 15px; color: rgba(255, 255, 255, .62); margin: 14px 0 0; line-height: 1.45; max-width: 30ch; }
.footer-coord { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .06em; color: rgba(255, 255, 255, .30); margin: 16px 0 0; }
.footer-col h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin: 0 0 16px; }
.footer-col a { display: block; font-family: var(--sans); font-size: 14px; color: rgba(255, 255, 255, .66); margin-bottom: 11px; width: fit-content; transition: color .2s var(--ease-out), transform .2s var(--ease-out); }
.footer-col a:hover { color: #fff; text-decoration: none; transform: translateX(2px); }
/* bottom bar */
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 30px; text-align: center; }
.footer-credit { margin: 0; font-size: 12.5px; letter-spacing: .01em; color: rgba(255, 255, 255, .42); }
.footer-contact {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: rgba(255, 255, 255, .82); padding: 11px 24px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out);
}
.footer-contact:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .32); color: #fff; text-decoration: none; transform: translateY(-1px); }
.footer-contact:active { transform: scale(.96); }
/* adaptive: brand drops to its own full-width row, link columns reflow */
@media (max-width: 900px) {
  .footer-main { grid-template-columns: repeat(3, 1fr); }
  .footer-brandcol { grid-column: 1 / -1; }
  .footer-tag { max-width: 42ch; }
}
@media (max-width: 560px) {
  /* Reduced mobile footer: drop the brand mark, tagline and coordinates —
     just the three link columns + copyright. */
  .footer-brandcol { display: none; }
  .footer-main { grid-template-columns: repeat(3, 1fr); gap: 26px 10px; }
  .footer-col h4 { font-size: 9.5px; letter-spacing: .1em; }
  .footer-col a { font-size: 13px; }
  .footer-cta-actions { flex-direction: column; gap: 14px; }
  .footer-bottom { flex-direction: column; gap: 14px; align-items: center; text-align: center; }
}
@media (max-width: 380px) {
  .footer-main { gap: 22px 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */

.mobile-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--paper) 0%, var(--ocean-top) 100%);
  overflow-y: auto;
  padding: 60px 24px 40px;
}
.mobile-gate-inner { max-width: 460px; margin: 0 auto; text-align: center; }
.mobile-gate-icon { width: 72px; height: 72px; margin: 0 auto 32px; filter: drop-shadow(0 16px 30px rgba(13, 27, 51, 0.24)); }
.mobile-gate-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 40px; line-height: 1.1; margin: 0 0 18px; color: var(--ink-1); }
.mobile-gate-lede { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0 0 32px; }
.mobile-gate-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.mobile-gate-cta {
  padding: 14px 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
  color: white;
  font-weight: 600;
  font-size: 15px;
  border: none;
  box-shadow: 0 10px 24px rgba(61, 125, 190, 0.30);
}
.mobile-gate-secondary { padding: 14px 24px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--card); color: var(--ink-2); font-weight: 500; font-size: 14px; display: inline-block; }
.mobile-gate-loop { margin-top: 32px; border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); position: relative; }
.mobile-gate-loop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, transparent 40%, var(--paper) 95%); pointer-events: none; }
.mobile-gate-map { width: 100%; height: auto; display: block; }
#mgTerminator { animation: mgTerminatorSweep 12s linear infinite; }
@keyframes mgTerminatorSweep { 0% { transform: translateX(0); } 50% { transform: translateX(550px); } 100% { transform: translateX(0); } }

@media (max-width: 880px) {
  /* Mobile shows the SAME guided hero app (just non-interactive), not a gate. */
  .mobile-gate { display: none !important; }
  .menubar-popover, .menubar-trigger, .skip-intro { display: none !important; }
  .site-header { padding: 7px 12px 7px 10px; gap: 12px; }
  .site-header .nav-links { display: none; }

  /* Hero app on mobile: render the full desktop layout at a fixed design width
     (720px) and scale it down to fit the phone, so the sidebar + map stay
     proportional. It's a guided, non-interactive "live preview". The negative
     margin reclaims the space the un-scaled box would otherwise reserve. */
  :root { --aw-scale: calc((100vw - 28px) / 720px); }
  /* Clip the 720px window's layout box HORIZONTALLY (no sideways scroll), but
     keep the vertical axis visible so the app window's drop shadow fades softly
     down into the page instead of being sliced flat — that flat slice was the
     hard line under the window. (overflow:clip uniquely allows the orthogonal
     axis to stay visible.) */
  .stage-wrap { height: auto; min-height: 0; overflow-x: clip; overflow-y: visible; }
  /* Soft dawn fade from the dark masthead into the page (no hard edge). Many
     closely-spaced stops, and the lightest blue → paper transition is spread
     across the lower third so it dissolves into the page with no visible band.
     The fade has room to breathe because the app window sits ~60% down the
     gradient (see the generous bottom spacing below), not at 85%. */
  .hero { height: auto; min-height: 0; padding: 120px 0 0;
    /* padding-top (not the app window's margin-top) holds the 120px under the
       nav, so it can't margin-collapse out of the hero and expose a light strip
       of page background above the dark masthead. */
    /* The tail EASES into the body colour (#DCE5EF): the steps shrink toward
       the bottom so the gradient is almost flat where it meets the body's
       (also nearly-flat) gradient — no slope crease / Mach band at the seam. */
    background: linear-gradient(180deg, #0E1B33 0%, #15243C 14%, #243A57 28%, #3C5878 42%, #5C7693 54%, #8198B3 64%, #A6BACF 74%, #C2D2E4 82%, #D0DCEA 88%, rgba(217, 227, 238, 0.45) 94%, rgba(220, 229, 239, 0) 100%); }
  /* Tighten the space above the "Welcome to Atlas" text (half the desktop
     top padding) so the gap from the app window to the headline is halved. */
  .hero-intro { padding-top: 55px; }
  .app-window {
    position: relative;
    inset: auto;
    left: 50%;
    /* Top: 120px of space under the nav.
       Bottom: +40px — half the previous gap to the Welcome section. The fade
       stays seamless because the gradient ends on the body colour (#DCE5EF). */
    margin: 0 0 calc(405px * (var(--aw-scale) - 1) + 40px);
    margin-left: calc(-360px * var(--aw-scale));
    width: 720px; height: 405px; aspect-ratio: auto;   /* regular 16:9 window */
    transform-origin: top left;
    transform: scale(var(--aw-scale));
  }
  body.intro-map-visible .app-window { transform: scale(var(--aw-scale)); }
  /* No touch interactivity: hide the "hold ⌘ and drag" coach + the map legend. */
  .coach-pill, .map-legend { display: none !important; }
  .map-stage { cursor: default; }
  /* Compact the hero sidebar for the short 16:9 window: narrower, first three
     people only, and a much smaller suggestion box so the roster always has
     room. Vertical budget is tight (~377px design), so every block is trimmed. */
  .sidebar { top: 11px; left: 14px; width: 218px; max-height: calc(100% - 17px); }
  .sidebar-header { padding: 9px 14px 3px; }
  /* Drop the placeholder search row on mobile — it's the least essential block
     and reclaims room for the three people. */
  .search-row { display: none; }
  .group-chip { margin: 0 12px 4px; padding: 7px 11px; }
  .who-label { padding: 0 14px; margin-bottom: 3px; }

  /* Roster: first three people only (team still has six — they stay on the map
     and in the suggestion, so the WHO count remains 6). Fixed at its natural
     three-row height so it never gets shrunk to nothing by the cards below. */
  .who-list { flex: 0 0 auto; padding: 0 8px; }
  .who-row[data-row="3"], .who-row[data-row="4"], .who-row[data-row="5"] { display: none; }
  .who-row { padding: 3px 7px; gap: 8px; }
  .who-flag { font-size: 16px; }
  .who-name { font-size: 12.5px; }
  .who-city { font-size: 9.5px; }
  .who-time { font-size: 12px; }
  .who-tz { font-size: 9px; }

  /* Atlas Suggests: much smaller. Tight margins/padding, smaller time, compact
     status box (subtitle dropped on mobile), and the calendar-conflict row is
     suppressed so the card height stays stable (no thrash that crushes rows). */
  .suggests-card { margin: 5px 10px 6px; padding: 7px 10px; border-radius: 11px; }
  .suggests-label { font-size: 8.5px; margin-bottom: 2px; letter-spacing: .08em; }
  .suggests-time { font-size: 15px; margin-bottom: 4px; }
  .suggests-warn { padding: 6px 8px; gap: 7px; border-radius: 9px; }
  .suggests-warn-ic { width: 18px; height: 18px; font-size: 10px; }
  .suggests-warn-title { font-size: 10.5px; }
  .suggests-warn-body { display: none; }
  .overlap-pips i { width: 5px; height: 5px; }
  .suggests-conflict-wrap { display: none !important; }

  /* Action row: keep the Add-to-Calendar payoff but make it compact —
     single tidy row, no keyboard hints. */
  .action-row { padding: 4px 10px 8px; gap: 6px; }
  .action-row .btn { padding: 6px 8px; font-size: 10px; }
  .action-row .btn kbd { display: none; }

  /* ── NAV: Atlas wordmark + an "Email Link" reminder pill + Buy. Atlas is a
     Mac app, so Download is swapped for Email Link (emails the visitor a
     reminder to open Atlas on their Mac). Mirrors the desktop double-pill. ── */
  .topnav { justify-content: space-between; padding: 12px 15px; gap: 10px; }
  .topnav-links, .topnav .mac-badge { display: none !important; }
  /* Download is desktop-only on mobile (everywhere). */
  .buy-group .bg-download { display: none !important; }
  /* The divider only belongs in the TOP NAV, between Email Link and Buy.
     Elsewhere (e.g. the footer CTA, which shows Buy alone) hide it so there's
     no stray divider + empty slot next to the button. */
  .buy-group .bg-divider { display: none !important; }
  .topnav .buy-group .bg-divider { display: inline-block !important; }
  /* The Email Link reminder pill exists only in the top nav. */
  .topnav .buy-group .bg-remind { display: inline-flex !important; }
  /* Slightly tighter pills so the three-part top-nav group fits a narrow phone. */
  .topnav .buy-group .bg-btn { padding: 9px 14px; font-size: 13.5px; }

  /* ── COMPARISON: the desktop table, slimmed down so every column fits the
     phone width (no scroll). ── */
  .vs-section { overflow-x: hidden; }
  .vs-inner { overflow-x: visible; }            /* override the old scroll rule */
  .vs-table { padding: 6px 6px 10px; max-width: 100%; min-width: 0 !important; }
  .vs-row { min-width: 0; }
  /* Fixed, wide-enough label column (text wraps inside it) + equal narrow
     product columns that only need to hold a tick. */
  .vs-rh { flex: 0 0 104px; min-width: 0; padding: 10px 3px 10px 2px; gap: 4px; }
  .vs-rh .vs-ico { width: 17px; height: 17px; flex: 0 0 auto; }
  .vs-rh .vs-ico svg { width: 10px; height: 10px; }
  .vs-lab { font-size: 9.5px; line-height: 1.15; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .vs-c { flex: 1 1 0; min-width: 0; padding: 10px 1px; gap: 3px; }
  .vs-brand { font-size: 11px; }
  .vs-name { font-size: 8.5px; line-height: 1.05; text-align: center; }
  .vs-desc { display: none; }
  .vs-tag { font-size: 6px; letter-spacing: .04em; padding: 2px 4px; }
  .vs-price { font-size: 10.5px; }
  .vs-price-row .vs-c-atlas .vs-price { font-size: 13px; }   /* shrink the big Atlas price so it fits its column */
  .vs-price-per { font-size: 7px; }
  .vs-price-sub, .vs-cadence { display: none; }
  .m-on, .m-x { width: 18px; height: 18px; }
  .m-on svg, .m-x svg { width: 9px; height: 9px; }
  .vs-hi { display: none; }
  .vs-caption { min-width: 0; }

  /* ── TESTIMONIALS: ~half-size cards so several show at once. ── */
  .tm-track { gap: 14px; }
  .tm-card { width: 210px; height: 152px; padding: 15px 15px 16px; }
  .tm-card-head { gap: 9px; margin-bottom: 9px; }
  .tm-avatar { width: 32px; height: 32px; font-size: 17px; }
  .tm-name { font-size: 12px; }
  .tm-role { font-size: 9.5px; margin-top: 1px; }
  .tm-quote { font-size: 10.5px; line-height: 1.45; -webkit-line-clamp: 4; }

  /* ── PRICING: slimmer pass — four key fields in a 2-up grid. ── */
  .pr-grid { grid-template-columns: 1fr 1fr !important; gap: 14px 18px; }
  .pr-grid > div:nth-child(n+5) { display: none; }   /* drop Updates + Requires */

  /* ── FAQ: only the top three featured questions; keep the search/browse. ── */
  .faq-bento .faq-card:nth-of-type(n+4) { display: none; }

  .day-section { height: 500vh; }  /* Shorter pin on mobile */
  .beat { font-size: clamp(32px, 7vw, 56px); }
  .beat-when { font-size: 12px; margin-bottom: 16px; }
  .beat-sub { font-size: 15px; }
  .ch { padding: 80px 24px; }
  .slot-posters, .group-cards { grid-template-columns: 1fr; }
  .ch-h2-mega { font-size: clamp(40px, 11vw, 72px); }
}