/* Stressie site.
   Layout: dark like the app, product-first. The page follows a shift: discover nearby, take a moment, the day on the wrist,
   sleep, then the Wallet. Vermilion pattern blocks and the S mark are the colour moments; everything else is quiet.
   Type: the system face (SF Pro on Apple devices, Inter elsewhere). Icons: Phosphor. */

:root {
  color-scheme: dark;
  /* App surfaces (sampled from the app screens) */
  --bg: #1C1B17;
  --bg-2: #22211D;
  --card: #2B2A26;
  --card-2: #34322E;
  --card-3: #403D38;
  /* Text */
  --text: #FFFFFF;
  --text-2: #E8E5DF;
  --muted: #A7A29A;
  --faint: #78736B;
  --line: rgba(255, 255, 255, .08);
  /* Brand */
  --accent: #F3683E;       /* the app's active orange */
  --accent-soft: rgba(243, 104, 62, .16);
  --red: #D3451D;          /* the mark and the pattern */
  --red-deep: #B93A17;
  --ok: #8CCB86;
  --you: #4C8DFF;
  /* Wallet passes */
  --pass-coffee: #5C3827;
  --pass-market: #275E40;
  --pass-gym: #2B3D4B;
  --pass-teal: #00666A;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --gutter: 20px;
  --nav: 68px;
  --wrap: 1200px;
}
@media (min-width: 800px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
[hidden]:not(.keep) { display: none !important; }
.ph, .ph-fill { line-height: 1; }

/* ---------- Type ---------- */
.h1, .h2, .h3 { margin: 0; font-family: var(--display); font-weight: 700; color: var(--text); text-wrap: balance; }
.h1 { font-size: clamp(44px, 6.6vw, 92px); line-height: 1; letter-spacing: -.042em; }
.h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.036em; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.h1 em, .h2 em { font-style: normal; color: var(--accent); }
.lead { margin: 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--muted); max-width: 600px; text-wrap: pretty; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--accent); }
.eyebrow i { font-size: 18px; }
.sec { padding: clamp(96px, 12vw, 160px) 0 0; }
.sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; justify-items: center; text-align: center; }
.soon { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- Buttons and badges ---------- */
.btn { appearance: none; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px/1 var(--sans); white-space: nowrap; transition: background-color .2s, color .2s, transform .2s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn i { font-size: 18px; transition: transform .3s var(--ease-out); }
.btn:hover i.ph-arrow-right { transform: translateX(3px); }
.btn-light { background: var(--text); color: var(--bg); }
.btn-light:hover { background: #F2EFEA; }
.btn-dark { background: var(--card-2); color: var(--text); }
.btn-dark:hover { background: var(--card-3); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); text-decoration: none; }
.link i { font-size: 17px; transition: transform .3s var(--ease-out); }
.link:hover i { transform: translateX(3px); }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 16px; background: var(--text); color: var(--bg); text-decoration: none; transition: background-color .2s; }
.badge:hover { background: #F2EFEA; }
.badge i { font-size: 26px; }
.badge span { display: grid; line-height: 1.1; }
.badge small { font-size: 11px; font-weight: 500; opacity: .7; }
.badge b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card-2); color: var(--text-2); font-size: 14px; font-weight: 500; }
.chip i { font-size: 16px; }

/* ---------- The mark ---------- */
.mark { display: block; flex: none; width: 30px; height: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 20px/1 var(--display); letter-spacing: -.025em; color: var(--text); }

/* ---------- Nav, with the For business menu ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; background: rgba(28, 27, 23, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); transition: background-color .3s, box-shadow .3s; }
.nav.is-scrolled { background: rgba(28, 27, 23, .9); box-shadow: 0 1px 0 var(--line); }
.nav-in { display: flex; align-items: center; gap: 20px; height: var(--nav); }
.nav-links { display: none; align-items: center; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links > li { position: relative; }
.nav-links a, .menu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: background-color .2s, color .2s; }
.nav-links a:hover, .menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--card-2); color: var(--text); }
.menu-btn i { font-size: 14px; transition: transform .25s var(--ease-out); }
.menu-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.nav .btn { margin-left: auto; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav .btn { margin-left: 8px; } .burger { display: none; } }
.menu { position: absolute; right: 0; top: calc(100% + 10px); width: 360px; padding: 8px; border-radius: 22px; background: var(--card); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px var(--line); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .2s, transform .25s var(--ease-out), visibility .25s; }
.menu.is-open { opacity: 1; transform: none; visibility: visible; }
.menu a { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 12px; border-radius: 16px; text-decoration: none; }
.menu a:hover { background: var(--card-2); }
.menu a i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card-2); color: var(--accent); font-size: 20px; }
.menu a:hover i { background: var(--card-3); }
.menu b { font-size: 15px; font-weight: 600; color: var(--text); }
.menu small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.menu hr { margin: 6px 12px; border: 0; border-top: 1px solid var(--line); }
.burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: 0; border-radius: 50%; background: var(--card-2); color: var(--text); cursor: pointer; font-size: 20px; }
.nav .btn-sm { min-height: 40px; }
.sheet { position: fixed; inset: var(--nav) 0 auto 0; z-index: 99; max-height: calc(100svh - var(--nav)); overflow: auto; padding: 8px var(--gutter) 24px; background: var(--bg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.sheet a { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; text-decoration: none; }
.sheet a i { font-size: 22px; color: var(--accent); }
.sheet p { margin: 20px 4px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
@media (min-width: 900px) { .sheet { display: none !important; } }

/* ---------- Hero: a dark map with Stressie places on it ---------- */
.hero { position: relative; display: grid; grid-template-rows: minmax(440px, 1fr) auto; min-height: calc(100svh - var(--nav)); max-height: 1000px; margin-top: calc(var(--nav) * -1); padding-top: var(--nav); overflow: hidden; isolation: isolate; }
.map { position: absolute; inset: 0; z-index: -3; background: #201F1B; }
.map .maplibregl-canvas { opacity: 0; transition: opacity 1s var(--ease-out); }
.map.is-ready .maplibregl-canvas { opacity: 1; }
.map .maplibregl-ctrl-attrib { font: 11px var(--sans); background: rgba(28, 27, 23, .7) !important; color: var(--muted); }
.map .maplibregl-ctrl-attrib a { color: var(--muted); }
.map .maplibregl-ctrl-attrib-button { filter: invert(1); }
.map-veil { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 27, 23, .55) 0%, rgba(28, 27, 23, .1) 16%, rgba(28, 27, 23, .1) 44%, rgba(28, 27, 23, .9) 66%, var(--bg) 80%),
              radial-gradient(90% 70% at 50% 36%, transparent 45%, rgba(28, 27, 23, .65) 100%); }
.spots { position: relative; z-index: 1; }
.pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; transform: translate(-17px, -100%); }
.pin-dot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--accent); box-shadow: 0 0 0 2.5px var(--bg); }
.pin-dot i { transform: rotate(45deg); font-size: 17px; color: #fff; }
.pin b { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; text-shadow: 0 0 3px var(--bg), 0 0 8px var(--bg), 0 0 14px var(--bg); }
.pin.left { flex-direction: row-reverse; transform: translate(calc(-100% + 17px), -100%); }
.you { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--you); box-shadow: 0 0 0 3px #fff, 0 0 0 14px rgba(76, 141, 255, .18); }
@media (max-width: 899px) {
  .pin, .you { left: var(--mx, var(--x)); top: var(--my, var(--y)); }
  .pin.m-hide { display: none; }
}

/* Wallet passes, as in the app */
.pass { --c: var(--pass-gym); position: relative; display: grid; gap: 4px; padding: 14px 16px 15px; border-radius: 18px; background: var(--c); color: #fff; overflow: hidden; isolation: isolate; }
.pass::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 60%); pointer-events: none; }
.pass-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pass-name { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.pass-name i { font-size: 21px; }
.pass-val { text-align: right; font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.pass-val small { display: block; font-size: 12px; font-weight: 500; opacity: .75; }
.pass.coffee { --c: var(--pass-coffee); }
.pass.market { --c: var(--pass-market); }
.pass.gym { --c: var(--pass-gym); }
.pass.teal { --c: var(--pass-teal); }
/* Marketplace offers on the hero map: photo, place, offer, then points and the button */
.offer { position: absolute; z-index: 2; width: 222px; padding: 8px 8px 12px; border-radius: 22px; background: var(--card); }
.of-photo { position: relative; height: 112px; border-radius: 15px; overflow: hidden; background: var(--card-2); }
.of-photo img { width: 100%; height: 100%; object-fit: cover; }
.of-tag { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; font-weight: 600; }
.of-tag i { font-size: 13px; color: var(--accent); }
.of-place { margin: 10px 6px 0; font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer h3 { margin: 3px 6px 0; font: 700 17.5px/1.15 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.of-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 6px 0; }
.of-pts { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.of-pts i { font-size: 18px; color: var(--accent); }
.of-pts small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.of-btn { padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--bg); font-size: 13px; font-weight: 600; }
.of-0 { left: calc(28% - 222px - 34px); top: 9%; }
.of-1 { left: calc(72% + 34px); top: 5%; }
@media (max-width: 899px) {
  .offer { width: calc(50% - 22px); top: auto; bottom: 4%; }
  .of-0 { left: 14px; }
  .of-1 { left: auto; right: 14px; }
  .of-photo { height: 86px; }
  .of-tag { display: none; }
  .offer h3 { font-size: 15.5px; }
  .of-btn { padding: 7px 11px; font-size: 12px; }
  .of-pts small { display: none; }
}

.hero-copy { position: relative; z-index: 3; display: grid; justify-items: center; gap: 18px; padding-top: 12px; padding-bottom: 76px; text-align: center; }
.hero-copy .lead { max-width: 620px; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media (max-width: 899px) {
  .hero { grid-template-rows: 470px auto; max-height: none; min-height: 0; }
}

/* ---------- Steps: one pinned section, a hand plays each step ---------- */
.flow { position: relative; height: 330vh; margin-top: clamp(40px, 6vw, 80px); }
.flow-pin { position: sticky; top: var(--nav); height: calc(100svh - var(--nav)); display: grid; align-items: center; }
.flow-grid { display: grid; gap: 28px; align-items: center; width: 100%; }
@media (min-width: 900px) { .flow-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
.flow-text .eyebrow { margin-bottom: 10px; }
.flow-text .h2 { font-size: clamp(32px, 3.8vw, 52px); margin-bottom: clamp(18px, 3vh, 32px); }
.fs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fs-head { appearance: none; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 0; text-align: left; }
.fs-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card-2); font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: background-color .4s, color .4s; }
.fs-t { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--faint); transition: color .4s; }
.fs.is-on .fs-n { background: var(--text); color: var(--bg); }
.fs.is-on .fs-t { color: var(--text); }
.fs-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.fs.is-on .fs-body { grid-template-rows: 1fr; }
.fs-body > div { overflow: hidden; padding-left: 46px; }
.fs-body p { margin: 0 0 12px; color: var(--muted); max-width: 440px; }
.fs-body .note { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14.5px; color: var(--text-2); }
.fs-body .note i { font-size: 17px; color: var(--accent); }
.flow-cta { margin: 20px 0 0 46px; }
.fs-dots { display: none; }
.flow-stages { position: relative; justify-self: center; width: min(100%, calc(100svh - var(--nav) - 140px), 580px); aspect-ratio: 1; }
.stage { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; isolation: isolate; background: var(--red); opacity: 0; transform: scale(.97); transition: opacity .55s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
.stage.is-on { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .flow { height: 300vh; }
  .flow-pin { align-items: start; padding-top: 14px; }
  .flow-grid { gap: 16px; }
  .flow-stages { order: -1; width: min(100%, calc(100svh - var(--nav) - 330px)); min-width: 230px; }
  .flow-text .h2 { display: none; }
  .flow-text .eyebrow { display: none; }
  .fs:not(.is-on) { display: none; }
  .fs-body > div { padding-left: 0; }
  .fs-dots { display: flex; gap: 6px; margin-bottom: 4px; }
  .fs-dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--card-3); transition: background-color .3s; }
  .fs-dots i.is-on { background: var(--accent); }
  .flow-cta { margin: 10px 0 0; }
}

/* The vermilion icon pattern (filled by script) */
.pattern { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pattern i { position: absolute; font-size: var(--ps, 22px); color: rgba(255, 255, 255, var(--po, .5)); transform: translate(-50%, -50%); }

/* A constant 520px artboard inside each square stage, scaled as one piece */
.art { position: absolute; left: 0; top: 0; width: 520px; height: 520px; transform-origin: 0 0; transform: scale(var(--s, 1)); }

/* App close-ups: the app's own dark cards */
.app { position: absolute; left: 50%; top: 50%; width: 372px; transform: translate(-50%, -50%); padding: 20px; border-radius: 30px; background: var(--bg); color: #fff; font-size: 14px; box-shadow: 0 40px 80px -30px rgba(60, 12, 0, .55); }
.app-title { margin: 0; font: 700 30px/1.05 var(--display); letter-spacing: -.03em; }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-sub { margin: 16px 0 10px; font: 700 19px/1.1 var(--display); letter-spacing: -.02em; }
.round { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card-2); font-size: 18px; color: #fff; }
.round.av { font-size: 14px; font-weight: 600; }
.round.work { color: var(--accent); }
.app [data-show] { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.app .off { opacity: 0; transform: translateY(8px); pointer-events: none; }
.app .gone { display: none !important; }
.pressed { transform: scale(.95) !important; }

/* Scene 1: Take a moment, then breathe */
.moments { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mo { display: grid; gap: 2px; align-content: start; min-height: 104px; padding: 14px; border-radius: 18px; background: var(--card-2); transition: transform .2s var(--ease-out), background-color .2s; }
.mo i { font-size: 26px; margin-bottom: 8px; }
.mo b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.mo span { font-size: 13px; color: var(--muted); }
.mo .mark { width: 26px; height: 26px; margin-bottom: 8px; }
.breath { display: grid; justify-items: center; gap: 12px; padding: 4px 0 2px; }
.bloom-wrap { position: relative; display: grid; place-items: center; width: 236px; height: 236px; }
.bloom { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bloom .petals circle { mix-blend-mode: screen; fill-opacity: .52; stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.breath-count { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--bg); font: 700 19px var(--display); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.breath-phase { font: 700 22px var(--display); letter-spacing: -.02em; transition: opacity .18s; }
.breath-steps { display: flex; gap: 6px; }
.breath-steps span { padding: 5px 11px; border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
.breath-steps span.on { background: var(--accent); color: #fff; }
.done-pill { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card-2); font-size: 14px; font-weight: 600; }
.done-pill i { font-size: 19px; color: var(--ok); }
.done-pill b { color: var(--accent); }

/* Scene 2: Discover on a map */
.app-map { padding: 0; height: 420px; overflow: hidden; }
.app-map .streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-map .streets path { fill: none; stroke: #2E2C28; stroke-width: 14; stroke-linecap: round; }
.app-map .streets path.thin { stroke-width: 6; stroke: #282622; }
.app-map .park { fill: #232A21; }
.app-map .water { fill: #1B2629; }
.app-map .app-row { position: absolute; left: 16px; right: 16px; top: 16px; z-index: 2; }
.app-map .app-title { font-size: 26px; }
.map-chips { position: absolute; left: 16px; top: 62px; z-index: 2; display: flex; gap: 6px; }
.map-chips span { padding: 6px 12px; border-radius: 999px; background: var(--card-2); font-size: 12.5px; font-weight: 500; }
.map-chips span:first-child { background: #fff; color: var(--bg); }
.app-map .pin { transform: translate(-14px, -100%); }
.app-map .pin-dot { width: 28px; height: 28px; transition: transform .35s var(--spring); }
.app-map .pin-dot i { font-size: 14px; }
.app-map .pin.hit .pin-dot { transform: rotate(-45deg) scale(1.25); }
.app-map .you { width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(76, 141, 255, .2); }
.map-sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: var(--card); }
.map-sheet .pass { padding: 12px 14px; }
.map-sheet .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.mini-btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border-radius: 999px; background: #fff; color: var(--bg); font-size: 14px; font-weight: 600; transition: transform .18s var(--ease-out); }
.mini-btn i { font-size: 17px; }
.map-added { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--card); font-size: 14px; font-weight: 600; }
.map-added i { font-size: 22px; color: var(--ok); }

/* Scene 3: the Wallet */
.app-wallet { padding-bottom: 16px; }
.stack { position: relative; display: grid; margin-top: 14px; }
.stack .pass { margin-top: -26px; padding-bottom: 30px; transition: margin .5s var(--ease-out), transform .5s var(--ease-out); }
.stack .pass:first-child { margin-top: 0; }
.stack .pass.big { padding-bottom: 16px; }
.stack .pass .pass-name { font-size: 15px; }
.stack .pass .pass-val { font-size: 15px; }
.pass-offer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 30px; }
.pass-offer b { display: block; font: 700 34px/1 var(--display); letter-spacing: -.03em; }
.pass-offer span { font-size: 13px; opacity: .85; }
.qr { width: 70px; height: 70px; padding: 6px; border-radius: 12px; background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }
.pass-offer .qr { transition: opacity .4s, transform .5s var(--spring); }
.pass.teal:not(.open) .qr { opacity: 0; transform: scale(.6); }
.pts { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.pts small { font-size: 14px; font-weight: 600; color: var(--muted); }
.pts b { font: 700 30px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .3s; }
.pts b.bump { color: var(--accent); }

/* The hand */
.hand { position: absolute; left: 0; top: 0; z-index: 10; width: calc(58px * max(var(--s, 1), .72)); height: calc(58px * max(var(--s, 1), .72)); pointer-events: none; opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform var(--t, .7s) cubic-bezier(.45, 0, .2, 1), opacity .4s; filter: drop-shadow(0 10px 14px rgba(40, 8, 0, .35)); }
.hand.on { opacity: 1; }
.hand svg { width: 100%; height: 100%; transform-origin: 28% 6%; transition: transform .14s var(--ease-out); }
.hand.down svg { transform: scale(.88) rotate(-4deg); }
.ripple { position: absolute; z-index: 9; width: calc(44px * var(--s, 1)); height: calc(44px * var(--s, 1)); margin: calc(-22px * var(--s, 1)) 0 0 calc(-22px * var(--s, 1)); border-radius: 50%; border: 2px solid #fff; pointer-events: none; animation: rip .6s var(--ease-out) forwards; }
@keyframes rip { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- Your shift: four moments and a day dial ---------- */
.shift-grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .shift-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.times { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.time { appearance: none; border: 0; cursor: pointer; display: grid; grid-template-columns: 48px 1fr; gap: 2px 16px; align-items: center; width: 100%; padding: 14px 16px; border-radius: 20px; background: none; text-align: left; transition: background-color .25s; }
.time:hover { background: var(--bg-2); }
.time[aria-selected="true"] { background: var(--card); }
.time i { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--card-2); font-size: 24px; color: var(--text-2); transition: background-color .25s, color .25s; }
.time[aria-selected="true"] i { background: var(--accent); color: #fff; }
.time b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.time b small { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.time span { font-size: 15px; line-height: 1.45; color: var(--muted); }
.wrist { position: relative; display: grid; justify-items: center; align-content: center; gap: 20px; min-height: 580px; padding: 44px 24px; border-radius: 34px; background: var(--red); overflow: hidden; isolation: isolate; }
.wrist > p { margin: 0; max-width: 320px; text-align: center; color: #fff; font-size: 16px; line-height: 1.45; }
.day { display: grid; justify-items: center; gap: 16px; width: min(100%, 360px); padding: 22px 20px 20px; border-radius: 30px; background: var(--bg); }
.dial { position: relative; width: 250px; height: 250px; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial .track { fill: none; stroke: var(--card-2); stroke-width: 12; }
.dial .shift { fill: none; stroke: rgba(243, 104, 62, .32); stroke-width: 12; stroke-linecap: round; }
.dial .done { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .8s var(--ease-out); }
.dial .tick { stroke: var(--card-3); stroke-width: 2; stroke-linecap: round; }
.dial .tick.major { stroke: var(--faint); }
.dial text { fill: var(--faint); font: 600 10.5px var(--sans); text-anchor: middle; dominant-baseline: middle; }
.dial .dot { fill: var(--card-3); stroke: var(--bg); stroke-width: 3; }
.dial .sel { transition: transform .8s var(--ease-out); }
.dial .sel circle { fill: #fff; stroke: var(--accent); stroke-width: 4; }
.dial-mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; }
.dial-mid b { font: 700 38px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dial-mid span { font-size: 13.5px; color: var(--muted); }
.suggest { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 20px; background: var(--card-2); }
.suggest .s-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; background: var(--card-3); font-size: 24px; transition: opacity .2s; }
.suggest .s-ic img { width: 100%; height: 100%; object-fit: cover; }
.suggest .s-ic .mark { width: 24px; height: 24px; }
.suggest small { display: block; font-size: 11.5px; font-weight: 600; color: var(--accent); }
.suggest b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.suggest em { display: block; font-style: normal; font-size: 13px; color: var(--muted); }
.suggest .play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--bg); font-size: 16px; }
.suggest .s-body { min-width: 0; transition: opacity .2s; }
.suggest.swap .s-body, .suggest.swap .s-ic { opacity: 0; }

/* ---------- Sleep ---------- */
.sleep-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .sleep-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .sleep-grid { grid-template-columns: 2fr 3fr; } }
.sleep-card { display: grid; gap: 12px; align-content: start; }
.sleep-card .art-img { position: relative; aspect-ratio: 385 / 326; border-radius: 24px; overflow: hidden; background: var(--card); }
.sleep-card .art-img img { width: 100%; height: 100%; object-fit: cover; }
.sleep-card .art-img span { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sleep-card b, .sleep-row b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.sleep-card small, .sleep-row small { font-size: 15px; color: var(--muted); }
.sleep-list { display: grid; gap: 10px; align-content: start; }
@media (min-width: 760px) and (max-width: 1039px) { .sleep-list { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
.sleep-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 22px; background: var(--bg-2); }
.sleep-row img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.sleep-row > i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--card-2); color: var(--accent); font-size: 28px; }
.sleep-row b { font-size: 16.5px; }
.sleep-row small { font-size: 14px; }
.dur { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dur i { font-size: 20px; color: #fff; }
.sleep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sleep-chips .chip { border: 0; cursor: pointer; min-height: 40px; transition: background .2s, color .2s; }
.sleep-chips .chip:hover { color: var(--text); }
.sleep-chips .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.sleep-grid [hidden] { display: none; }
.sleep-grid:has(> .sleep-card[hidden]) { grid-template-columns: 1fr; }

/* ---------- Wallet and rewards ---------- */
.wallet-grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .wallet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wallet-demo { display: grid; gap: 0; padding: clamp(20px, 3vw, 32px); border-radius: 34px; background: var(--bg-2); }
.wallet-demo .stack .pass { margin-top: -30px; padding-bottom: 34px; }
.wallet-demo .stack .pass:first-child { margin-top: 0; }
.wallet-demo .stack .pass.big { padding-bottom: 20px; }
.wallet-demo .pass-offer b { font-size: 44px; }
.wallet-demo .pts b { font-size: 40px; }
.badges-row { display: flex; gap: 10px; margin-top: 18px; }
.badges-row span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--card-2); font-size: 28px; }
.perks { display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
.perks li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 16px; }
.perks i { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--card-2); color: var(--accent); font-size: 22px; }
.perks b { font-size: 17px; font-weight: 600; }
.perks span { color: var(--muted); font-size: 15.5px; }

.card-band { display: grid; gap: 32px; align-items: center; margin-top: clamp(64px, 8vw, 112px); padding: clamp(28px, 4vw, 56px); border-radius: 34px; background: var(--bg-2); }
@media (min-width: 960px) { .card-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } }
.card-band p { margin: 14px 0 0; color: var(--muted); max-width: 440px; }
.cards { position: relative; height: clamp(250px, 30vw, 330px); }
.metal { position: absolute; width: min(400px, 82%); aspect-ratio: 1.586; padding: 7%; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #3A322D 0%, #1A1512 42%, #2B2420 70%, #120F0D 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.metal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 60%); }
.metal.front { right: 0; top: 0; z-index: 2; }
.metal.back { left: 0; bottom: 0; background: #17120F; }
.metal .mark { width: 44px; height: 44px; }
.chip-gold { position: absolute; left: 7%; top: 44%; width: 15%; aspect-ratio: 1.3; border-radius: 8px; background: linear-gradient(135deg, #D9C796, #A99665); }
.chip-gold::after { content: ""; position: absolute; inset: 22% 30%; border: 1px solid rgba(0, 0, 0, .18); border-radius: 3px; }
.metal .nfc { position: absolute; left: 26%; top: 46%; font-size: 26px; opacity: .8; }
.metal .holder { position: absolute; left: 7%; bottom: 10%; font-size: 15px; font-weight: 600; letter-spacing: .16em; }
.metal.back .pattern i { color: rgba(255, 255, 255, .14); }
.metal.back b { position: absolute; right: 7%; bottom: 10%; font: 700 22px var(--display); letter-spacing: -.02em; }

/* ---------- Ways in ---------- */
.ways { display: grid; gap: 14px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: 28px; background: var(--bg-2); }
.way > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--card-2); color: var(--accent); font-size: 26px; }
.way h3 { margin: 6px 0 0; font: 700 23px/1.15 var(--display); letter-spacing: -.02em; }
.way p { margin: 0; color: var(--muted); }
.way .link, .way .btn { margin-top: 8px; justify-self: start; }
.private { display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; align-items: center; margin-top: 14px; padding: 24px 28px; border-radius: 28px; background: var(--bg-2); }
.private > i { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--card-2); color: var(--ok); font-size: 26px; }
.private b { font-size: 18px; font-weight: 600; }
.private span { color: var(--muted); }
.private a { color: var(--text); font-weight: 600; }

/* ---------- For business band ---------- */
.biz { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 18px; min-height: clamp(520px, 50vw, 640px); padding: clamp(28px, 4vw, 56px); border-radius: 34px; background: var(--card); }
.biz > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.biz::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 18, 15, .15) 0%, rgba(20, 18, 15, .35) 40%, rgba(20, 18, 15, .92) 100%); }
.biz .h2 { max-width: 640px; }
.biz p { margin: 0; max-width: 540px; color: rgba(255, 255, 255, .85); font-size: 18px; }
.biz-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.biz-inds { display: flex; flex-wrap: wrap; gap: 8px; }
.biz-inds .chip { background: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; }

/* ---------- Get the app: the vermilion pattern with the mark in the middle ---------- */
.get { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 18px; padding: clamp(64px, 9vw, 120px) 24px; border-radius: 34px; background: var(--red); text-align: center; }
.get .mark { width: 104px; height: 104px; margin-bottom: 10px; filter: drop-shadow(0 18px 30px rgba(80, 15, 0, .45)); }
.get .h2 { color: #fff; }
.get p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 18px; }
.get .badge { background: #fff; }
.get .pattern { -webkit-mask: radial-gradient(closest-side at 50% 50%, transparent 32%, #000 60%); mask: radial-gradient(closest-side at 50% 50%, transparent 32%, #000 60%); }

/* ---------- Footer: the back of the card ---------- */
.site-foot { padding: clamp(96px, 12vw, 160px) 12px 12px; }
.foot-card { position: relative; isolation: isolate; overflow: hidden; max-width: none; padding: clamp(36px, 5vw, 72px) clamp(22px, 5vw, 72px) 0; border-radius: 34px; background: #14110F; color: var(--muted); }
.foot-card .pattern i { color: rgba(255, 255, 255, .05); }
.foot-grid { display: grid; gap: 36px; max-width: 1256px; margin: 0 auto; padding-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }
@media (max-width: 899px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .foot-brand { grid-column: 1 / -1; } }
.foot-brand { display: grid; gap: 16px; align-content: start; max-width: 340px; }
.foot-brand p { margin: 0; font-size: 15px; line-height: 1.6; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card-2); color: var(--text); font-size: 20px; text-decoration: none; transition: background-color .2s; }
.socials a:hover { background: var(--card-3); }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-col h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.foot-col a { width: fit-content; font-size: 15px; color: var(--muted); text-decoration: none; transition: color .2s; }
.foot-col a:hover, .foot-col a[aria-current="page"] { color: var(--text); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; max-width: 1256px; margin: 0 auto; padding: 20px 0; border-top: 1px solid var(--line); font-size: 13px; }
.foot-base p { margin: 0; }
.foot-base a { color: var(--text); }
.motion-toggle { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.foot-word { display: block; margin: clamp(8px, 2vw, 24px) 0 -0.18em; font: 700 clamp(84px, 21vw, 330px)/.82 var(--display); letter-spacing: -.055em; text-align: right; color: #fff; opacity: .96; white-space: nowrap; }

/* ---------- Business page ---------- */
.bhero { padding-top: 12px; }
.ind-tile { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; align-content: space-between; gap: 32px; min-height: min(calc(100svh - var(--nav) - 24px), 760px); margin: 0 12px; padding: clamp(28px, 4vw, 64px); border-radius: 34px; background: var(--card); }
.ind-photos { position: absolute; inset: 0; z-index: -2; }
.ind-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease-out), transform 1.4s var(--ease-out); }
.ind-photos img.is-on { opacity: 1; transform: none; }
.ind-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 18, 15, .78) 0%, rgba(20, 18, 15, .3) 38%, rgba(20, 18, 15, .2) 55%, rgba(20, 18, 15, .9) 100%); }
.ind-top { display: grid; gap: 18px; max-width: 760px; }
.ind-top .lead { color: rgba(255, 255, 255, .85); }
.ind-bottom { display: grid; gap: 22px; align-self: end; }
.ind-tabs { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ind-tabs button { position: relative; z-index: 1; appearance: none; border: 0; background: none; cursor: pointer; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .85); white-space: nowrap; transition: color .3s; }
.ind-tabs button:hover { color: #fff; }
.ind-tabs button[aria-selected="true"] { color: var(--bg); font-weight: 600; }
.ind-thumb { position: absolute; left: 0; top: 0; border-radius: 999px; background: #fff; transition: transform .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out); }
.ind-panels { display: grid; max-width: 560px; }
.ind-panel { grid-area: 1 / 1; display: grid; gap: 12px; justify-items: start; transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.ind-panel.is-off { visibility: hidden; opacity: 0; transform: translateY(10px); }
.ind-panel h3 { margin: 0; font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.025em; }
.ind-panel p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 17px; }
.ind-panel .btn { margin-top: 6px; }
@media (max-width: 760px) {
  .ind-tile { min-height: 720px; border-radius: 26px; }
  .ind-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 22px; }
  .ind-thumb { border-radius: 18px; }
  .ind-photos img { object-position: 80% 50%; }
  .ind-photos img:first-child { object-position: 92% 50%; }
}

/* Proof: one big voice, the Ember pilot, then a second voice */
.words-lead { display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .words-lead { grid-template-columns: 7fr 5fr; gap: 80px; } }
.voice, .story { margin: 0; }
.voice blockquote, .story blockquote { margin: 0; }
.voice p, .story p { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.025em; color: var(--text); text-wrap: pretty; }
.voice p { font-size: clamp(28px, 3vw, 42px); line-height: 1.16; }
.voice p em, .story p em { font-style: normal; color: var(--accent); }
.hang { margin-left: -.42em; }
.voice figcaption, .story figcaption { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 36px); font-size: 14px; color: var(--muted); }
.voice figcaption b, .story figcaption b { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.face { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.pilot { display: grid; padding: 10px 10px 22px; border-radius: 30px; background: var(--bg-2); }
.pilot-photo { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; }
.pilot-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.glass-tag { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pilot-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 0; }
.pilot-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 0 14px; }
.pilot-stats div + div { box-shadow: inset 1px 0 0 var(--line); }
.pilot-stats dd { margin: 0; font: 700 clamp(30px, 3vw, 42px)/1 var(--display); letter-spacing: -.03em; color: var(--accent); }
.pilot-stats dt { font-size: 13px; line-height: 1.3; color: var(--muted); }
.story { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "q q" "p c"; gap: 20px 14px; align-items: center; margin-top: clamp(72px, 9vw, 120px); }
.story blockquote { grid-area: q; }
.story-photo { grid-area: p; position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--card-2); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.story-photo .glass-tag { display: none; }
.story figcaption { grid-area: c; display: block; margin: 0; }
.story p { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.24; }
@media (min-width: 960px) {
  .story { grid-template-columns: 5fr 7fr; grid-template-rows: 1fr auto 1fr; grid-template-areas: "p ." "p q" "p c"; gap: 0 80px; align-items: start; }
  .story-photo { width: 100%; height: auto; aspect-ratio: 1; max-width: 400px; border-radius: 26px; }
  .story-photo .glass-tag { display: block; }
  .story figcaption { margin-top: 28px; }
}

/* Partners */
.partners { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .partners { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.partners .soon { margin-top: 18px; }
.partner-demo { position: relative; display: grid; place-items: center; min-height: 460px; padding: 32px; border-radius: 34px; background: var(--red); overflow: hidden; isolation: isolate; }
.partner-card { width: min(320px, 100%); padding: 10px 10px 14px; border-radius: 26px; background: var(--bg); }
.partner-card .ph-img { height: 160px; border-radius: 18px; overflow: hidden; }
.partner-card .ph-img img { width: 100%; height: 100%; object-fit: cover; }
.partner-card .who { display: inline-flex; align-items: center; gap: 6px; margin: 12px 6px 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.partner-card h3 { margin: 4px 6px 0; font: 700 21px/1.15 var(--display); letter-spacing: -.02em; }
.partner-card .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 6px 0; }
.partner-card .row span { font-size: 13.5px; color: var(--muted); }

/* ---------- Inner pages ---------- */
.page-main { padding: 12px 0 0; }
.page-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 12px; padding: clamp(56px, 8vw, 112px) 0 clamp(44px, 6vw, 80px); border-radius: 34px; background: var(--bg-2); }
.page-hero .eyebrow { display: flex; }
.page-title { font-size: clamp(42px, 5.8vw, 80px); }
.page-meta { margin: 18px 0 0; font-size: 15px; font-weight: 500; color: var(--muted); }
.page-hero .lead { margin-top: 22px; max-width: 640px; }
.page-hero .lead a { color: var(--text); }
.legal { display: grid; gap: 28px; padding-top: clamp(40px, 6vw, 72px); }
@media (min-width: 960px) { .legal { grid-template-columns: 240px minmax(0, 1fr); gap: 88px; } }
.toc { align-self: start; padding: 18px; border-radius: 22px; background: var(--bg-2); }
@media (min-width: 960px) { .toc { position: sticky; top: calc(var(--nav) + 28px); padding: 0; background: none; } }
.toc p { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a { display: flex; gap: 10px; padding: 7px 12px; margin-left: -12px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--muted); text-decoration: none; transition: background-color .2s, color .2s; }
.toc a span { flex: none; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--faint); }
.toc a:hover { color: var(--text); }
.toc a.is-on { background: var(--card); color: var(--text); font-weight: 600; }
.toc a.is-on span { color: var(--accent); }
.legal-body { max-width: 700px; color: var(--text-2); }
.legal-body section { margin-bottom: clamp(40px, 5vw, 56px); scroll-margin-top: calc(var(--nav) + 24px); }
.legal-body h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; font: 700 clamp(24px, 2.3vw, 30px)/1.2 var(--display); letter-spacing: -.02em; color: var(--text); }
.legal-body h2 .n { flex: none; font: 600 13px/1 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.legal-body h3 { margin: 26px 0 10px; font-size: 16px; font-weight: 600; color: var(--text); }
.legal-body p { margin: 0 0 14px; line-height: 1.7; text-wrap: pretty; }
.legal-body ul { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.legal-body li { position: relative; padding-left: 22px; line-height: 1.6; }
.legal-body li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.legal-body b, .legal-body strong { font-weight: 600; color: var(--text); }
.legal-body a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }
.note { margin: 18px 0 20px !important; padding: 18px 20px; border-radius: 18px; background: var(--card); color: var(--text-2); }
.help { display: grid; gap: 4px; margin: 0 0 20px; padding: 20px 22px; border-radius: 20px; background: var(--red); color: rgba(255, 255, 255, .9); }
.help b { color: #fff !important; font-size: 17px; }
.help a { color: #fff !important; font-weight: 700; }
.legal-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 26px 28px; border-radius: 24px; background: var(--bg-2); }
.legal-end p { margin: 0; font: 700 clamp(20px, 2vw, 24px)/1.25 var(--display); letter-spacing: -.015em; color: var(--text); }

.mani-hero { text-align: center; }
.mani-hero .wrap { max-width: 1000px; }
.chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.chips-row span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--card-2); font-size: 13px; font-weight: 600; color: var(--text-2); }
.chips-row i { font-size: 15px; color: var(--accent); }
.mani-hero .page-title { font-size: clamp(44px, 6.6vw, 96px); line-height: .98; }
.mani { max-width: 720px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gutter) 24px; }
.stanza { margin: 0 0 clamp(34px, 4.4vw, 52px); font: 500 clamp(21px, 2vw, 27px)/1.42 var(--display); letter-spacing: -.015em; color: var(--text-2); text-wrap: pretty; }
.stanza > span { display: block; }
.stanza.big { font-size: clamp(32px, 3.9vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; color: var(--text); }
.stanza em { font-style: normal; color: var(--accent); }
.stanza.moments > span { color: var(--accent); }
.mani-photo { margin: 0 12px clamp(40px, 6vw, 72px); }
.mani-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 70% 40%; border-radius: 34px; }
@media (max-width: 700px) { .mani-photo img { aspect-ratio: 4 / 3; object-position: 78% 40%; } }
.sign { display: grid; gap: 2px; margin-top: clamp(48px, 6vw, 72px); }
.sign b { font: 700 clamp(28px, 3vw, 38px)/1.1 var(--display); letter-spacing: -.02em; color: var(--text); }
.sign span { font-size: 14px; font-weight: 600; color: var(--muted); }

.contact { display: grid; gap: 40px; padding-top: clamp(48px, 7vw, 96px); }
@media (min-width: 960px) { .contact { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } .contact-intro { position: sticky; top: calc(var(--nav) + 40px); } }
.contact-intro .lead { margin-top: 18px; }
.contact-intro .chips-row { justify-content: flex-start; margin: 24px 0 0; }
.contact-ways { display: grid; gap: 4px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.contact-ways li { display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 12px; padding: 10px 0; }
.contact-ways span { font-size: 14px; font-weight: 600; color: var(--muted); }
.contact-ways a { width: fit-content; font: 600 clamp(18px, 1.6vw, 21px)/1.3 var(--display); letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.contact-ways a:hover { color: var(--accent); }
.contact-form, .contact-done { display: grid; gap: 26px; padding: clamp(22px, 3.4vw, 40px); border-radius: 30px; background: var(--bg-2); }
.contact-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form legend, .field > label { display: block; margin: 0 0 12px; padding: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.field > label i { font-style: normal; color: var(--accent); }
.field > label small, legend small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--faint); }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--card-2); font: 400 16px/1.4 var(--sans); color: var(--text); appearance: none; }
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.field input[aria-invalid="true"] { outline: 2px solid #FF7A5C; }
.err { margin: 8px 0 0; font-size: 14px; font-weight: 500; color: #FF8A6E; }
.group { display: grid; gap: 26px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row label { position: relative; display: inline-flex; }
.pill-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-row span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--card-2); font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: background-color .2s, color .2s; pointer-events: none; }
.pill-row label:hover span { background: var(--card-3); }
.pill-row input:checked + span { background: var(--text); color: var(--bg); font-weight: 600; }
.pill-row input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.scale .pill-row span { justify-content: center; min-width: 48px; padding: 0 12px; }
.scale-ends { display: flex; justify-content: space-between; max-width: 296px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-foot p { margin: 0; font-size: 13.5px; color: var(--muted); }
.contact-done { justify-items: start; gap: 14px; }
.contact-done > i { font-size: 40px; color: var(--ok); }
.contact-done h2 { margin: 0; font: 700 clamp(28px, 3vw, 38px)/1.1 var(--display); letter-spacing: -.025em; color: var(--text); }
.contact-done p { margin: 0; color: var(--muted); max-width: 460px; }
.msg-box { width: 100%; display: grid; gap: 10px; margin-top: 6px; }
.msg-to { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--muted); }
.msg-to b { font: 600 19px/1.3 var(--display); color: var(--text); user-select: all; }
.msg-box pre { margin: 0; max-height: 260px; overflow: auto; padding: 16px 18px; border-radius: 16px; background: var(--card-2); font: 400 14px/1.6 var(--sans); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.link-btn { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveals: visible at rest, only blocks below the first screen fade in ---------- */
.reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-waiting { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .reveal.is-waiting { opacity: 1; transform: none; }
  .stage, .ind-photos img, .ind-panel, .dial .done, .dial .sel { transition: none; }
}
.motion-off .stage, .motion-off .dial .done, .motion-off .dial .sel { transition: none; }

/* ---------- Business page: the team close-ups ---------- */
.app .ui-q { margin: 14px 0 0; font: 700 21px/1.15 var(--display); letter-spacing: -.02em; }
.app .ui-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.app .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.code-field { display: flex; align-items: center; height: 52px; margin-top: 16px; padding: 0 16px; border-radius: 16px; background: var(--card-2); font: 700 20px var(--display); letter-spacing: .14em; transition: box-shadow .25s; }
.code-field.focus { box-shadow: inset 0 0 0 2px var(--accent); }
.caret { width: 2px; height: 24px; margin-left: 2px; background: var(--accent); animation: blink 1s steps(1) infinite; opacity: 0; }
.code-field.focus .caret { opacity: 1; }
@keyframes blink { 50% { visibility: hidden; } }
.app .mini-btn { width: 100%; margin-top: 12px; }
.code-ok { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 13px 14px; border-radius: 16px; background: var(--card-2); font-size: 13.5px; font-weight: 500; }
.code-ok i { flex: none; font-size: 21px; color: var(--ok); }
.big { font: 700 32px var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.anon { display: grid; gap: 10px; margin-top: 16px; }
.anon div { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; }
.anon i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card-2); font-size: 15px; color: var(--muted); }
.anon s { height: 9px; border-radius: 9px; background: var(--card-3); text-decoration: none; }
.anon em { font-style: normal; font-size: 12px; color: var(--muted); }
.ghost-btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 16px; border-radius: 999px; background: var(--card-2); font-size: 14px; font-weight: 600; transition: transform .18s var(--ease-out); }
.ghost-btn i { font-size: 17px; }
.anon-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 250px; padding: 10px 13px; border-radius: 14px; background: #fff; color: var(--bg); font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; }
.app .anon-tip.off { opacity: 0; transform: translate(-50%, 8px); }
.shake { animation: shake .45s var(--ease-out); }
@keyframes shake { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; height: 140px; margin-top: 18px; }
.bars div { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 8px; height: 100%; }
.bars i { align-self: end; width: 100%; max-width: 48px; height: calc(var(--h, .5) * 100%); border-radius: 12px 12px 5px 5px; background: var(--c); transform-origin: bottom; transform: scaleY(var(--k, 0)); transition: transform .9s var(--ease-out), filter .3s; }
.bars span { font-size: 12px; color: var(--muted); }
.bars .hot i { filter: brightness(1.12); }
.tr-tip { position: absolute; left: 0; top: 0; padding: 8px 11px; border-radius: 12px; background: #fff; color: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); }
.app .tr-tip.off { opacity: 0; transform: translate(-50%, calc(-100% - 2px)); }
.tr-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--card-2); }
.tr-next b { display: block; font-size: 15px; font-weight: 600; }
.tr-next span { font-size: 12.5px; color: var(--muted); }
.tr-next .mini-btn { width: auto; min-height: 36px; margin: 0; padding: 0 16px; font-size: 13px; }

/* Fixes after the first look: the menu button is phone-only; the hero copy fits above the fold */
@media (min-width: 900px) { .burger { display: none; } }
.hero { grid-template-rows: minmax(320px, 1fr) auto; }
.hero .h1 { font-size: clamp(44px, 5.8vw, 84px); }
.hero-copy { gap: 16px; padding-bottom: 60px; }
@media (max-width: 899px) { .hero { grid-template-rows: 470px auto; } }
/* Keep text readable on the pattern: the icons fade out behind the content */
.wrist .pattern { -webkit-mask: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 46%, #000 92%); mask: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 46%, #000 92%); }
.get .pattern { -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 44%, #000 94%); mask: radial-gradient(ellipse 58% 62% at 50% 50%, transparent 44%, #000 94%); }

/* ===================== Round 3 ===================== */

/* Breathing: the step pills sit centred, not stretched */
.breath-foot { align-items: center; justify-items: center; }
.breath-steps { align-items: center; }
.breath-steps span { line-height: 1.3; }

/* Steps: more room, a rail through the numbers, a check on finished steps */
.fs-wrap { position: relative; }
.fs-list { gap: 18px; }
.fs-head { gap: 16px; padding: 4px 0; }
.fs-n { position: relative; z-index: 1; width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 6px var(--bg); }
.fs-n i { display: none; font-size: 17px; }
.fs.is-done .fs-n { background: var(--accent); color: #fff; }
.fs.is-done .fs-n b { display: none; }
.fs.is-done .fs-n i { display: block; }
.fs.is-done .fs-t { color: var(--text-2); }
.fs-body > div { padding-left: 52px; }
.fs-body p { margin-top: 6px; }
.fs-rail { position: absolute; left: 17px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--card-3); overflow: hidden; }
.fs-rail i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.flow-cta { margin-left: 52px; }
.fs-count { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* A three-part bar over the close-up: done, now, next */
@media (max-width: 899px) {
  .fs-rail { display: none; }
  .fs-body > div { padding-left: 0; }
  .fs-dots { align-items: center; }
  .flow-cta { margin-left: 0; }
}

/* The QR code to get the app */
.qr-card { display: inline-flex; align-items: center; gap: 16px; padding: 10px 22px 10px 10px; border-radius: 22px; background: var(--card); text-align: left; }
.qr-box { position: relative; flex: none; width: 96px; height: 96px; padding: 6px; border-radius: 14px; background: #fff; }
.qr-box svg { display: block; width: 100%; height: 100%; }
.qr-box .mark { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #fff; border-radius: 5px; }
.qr-card b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.qr-card small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.qr-card.big .qr-box { width: 128px; height: 128px; }
.qr-card.big b { font-size: 19px; }
.hero-get { display: flex; justify-content: center; margin-top: 10px; }
.hero-badges { display: none; justify-content: center; }
.get-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.get .qr-card { background: rgba(0, 0, 0, .22); }
.get .qr-card b { color: #fff; }
.get .qr-card small { color: rgba(255, 255, 255, .82); }
@media (max-width: 899px), (pointer: coarse) {
  .hero-get .qr-card, .get .qr-card { display: none; }
  .hero-badges { display: flex; }
}

/* Your shift: the moments read as a timeline; a legend under the dial */
.times { position: relative; }
.times::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px; background: var(--card-2); }
.time { position: relative; }
.time i { position: relative; z-index: 1; }
.legend { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.legend i { width: 22px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), rgba(243, 104, 62, .35)); }
.dial .dot { cursor: pointer; }

/* Sleep: when your night is */
.sleep-when { display: grid; gap: 22px; margin-top: 16px; padding: 26px 28px; border-radius: 28px; background: var(--bg-2); }
@media (min-width: 900px) { .sleep-when { grid-template-columns: 260px 1fr; align-items: center; gap: 40px; } }
.sw-head b { display: block; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; }
.sw-head span { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }
.sw-chart { display: grid; gap: 12px; }
.sw-row { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.sw-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sw-label i { font-size: 18px; color: var(--accent); }
.sw-bar { position: relative; height: 34px; border-radius: 12px; background: var(--card); }
.sw-bar i { position: absolute; top: 4px; bottom: 4px; left: calc(var(--a) / 24 * 100%); width: calc((var(--b) - var(--a)) / 24 * 100%); display: grid; place-items: center; border-radius: 9px; background: linear-gradient(90deg, #3C4A8C, #6A5BC9); font-style: normal; }
.sw-bar span { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.sw-axis { position: relative; height: 16px; margin-left: 126px; font-size: 11.5px; color: var(--faint); }
.sw-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sw-axis span:nth-child(1) { display: none; }
.sw-axis span:nth-child(2) { left: 0; transform: none; }
.sw-axis span:nth-child(3) { left: 25%; }
.sw-axis span:nth-child(4) { left: 50%; }
.sw-axis span:nth-child(5) { left: 75%; }
.sw-axis span:nth-child(6) { left: 100%; transform: translateX(-100%); }
@media (max-width: 560px) { .sw-row { grid-template-columns: 1fr; gap: 6px; } .sw-axis { margin-left: 0; } }

/* Ways in: a small piece of UI in each card */
.way { grid-template-rows: auto auto auto 1fr; }
.way-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: end; margin-top: 12px; padding: 12px; border-radius: 18px; background: var(--card); }
.mini-store { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.mini-store i { font-size: 16px; }
.code-mini { flex: 1; padding: 10px 14px; border-radius: 12px; background: var(--card-2); font: 700 15px var(--display); letter-spacing: .16em; }
.ok-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); }
.ok-mini i { font-size: 17px; }
.share-link { flex: 1; display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--card-2); font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-mini { appearance: none; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; }

/* Business page: pointer to the partners page */
.xlink { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 22px 28px; border-radius: 28px; background: var(--bg-2); text-decoration: none; transition: background-color .2s; }
.xlink:hover { background: var(--card); }
.xlink > i:first-child { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--card-2); color: var(--accent); font-size: 26px; }
.xlink b { display: block; font-size: 18px; font-weight: 600; }
.xlink span { color: var(--muted); }
.xlink > i:last-child { font-size: 22px; }

/* Partners page */
.phero { padding: clamp(40px, 6vw, 88px) 0 0; }
.phero .partner-demo { min-height: 540px; }
.p-note { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--bg); font-size: 13.5px; font-weight: 600; }
.p-note i { font-size: 17px; color: var(--accent); }
.p-note.n1 { top: 14%; left: 8%; }
.p-note.n2 { bottom: 13%; right: 7%; }
.lst { display: grid; margin-top: 12px; }
.lst-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lst-row span { color: var(--muted); }
.lst-row b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-align: right; }

/* The page the QR code opens */
.getpage { min-height: 60svh; display: grid; align-content: center; }

/* ---------- Entrance animations: each block rises in as it comes into view ---------- */
.anim { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), filter .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.anim.anim-big { filter: none; transform: translateY(36px) scale(.97); }
.anim.in { opacity: 1; transform: none; filter: none; }

.sw-head b { text-wrap: balance; }
@media (min-width: 900px) { .sleep-when { grid-template-columns: 300px 1fr; } }

/* The header shows where you are */
.menu-btn.is-current { background: var(--card-2); color: var(--text); }
.menu a[aria-current="page"] { background: var(--card-2); }
.menu a[aria-current="page"] i { background: var(--accent); color: #fff; }
.sheet a[aria-current="page"] { color: var(--accent); }
@media (max-width: 420px) { .nav .btn-sm { padding: 0 14px; font-size: 13.5px; } }

/* Fewer white buttons: store badges are black like the official ones, small UI buttons are dark */
.badge, .get .badge { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.badge:hover, .get .badge:hover { background: #111; }
.mini-store { background: var(--card-3); color: var(--text); }
.copy-mini { background: var(--card-3); color: var(--text); }
.ind-panel .link { margin-top: 4px; color: #fff; font-size: 16px; }

/* Hero download: the QR code with both store buttons beside it (phones get the buttons only) */
.hero-get { flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-badges { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 899px), (pointer: coarse) { .hero-badges { flex-direction: row; } }

/* Hero fits a laptop screen: slightly smaller title, a two-line lead, a compact download row */
.hero { grid-template-rows: minmax(260px, 1fr) auto; }
.hero .h1 { font-size: clamp(42px, 5.2vw, 76px); }
.hero-copy { gap: 14px; padding-bottom: 44px; }
.hero-copy .lead { max-width: 700px; }
.hero .qr-card.big .qr-box { width: 112px; height: 112px; }
@media (max-width: 899px) { .hero { grid-template-rows: 470px auto; } }

/* The audience switch in the header: For companies | For partners */
.aud { display: none; align-items: center; gap: 2px; margin-left: 14px; padding: 4px; border-radius: 999px; background: var(--card); }
.aud a { padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.aud a:hover { color: var(--text); }
.aud a[aria-current="page"] { background: var(--card-3); color: var(--text); }
@media (min-width: 760px) { .aud { display: inline-flex; } }
.sheet .aud-sheet { display: flex; margin: 14px 0 8px; }
.sheet .aud-sheet a { display: block; flex: 1; padding: 11px 12px; border-bottom: 0; text-align: center; font-size: 15px; font-weight: 600; }

/* Section links only on wide screens; narrower screens use the menu button */
.nav-links { display: none; }
@media (min-width: 1180px) { .nav-links { display: flex; } }
.nav .btn { margin-left: auto; }
@media (min-width: 1180px) { .nav .btn { margin-left: 8px; } }
.burger { display: grid; }
@media (min-width: 1180px) { .burger { display: none; } }
@media (min-width: 900px) and (max-width: 1179px) { nav.sheet:not([hidden]) { display: block !important; } }
@media (max-width: 420px) { .nav-in { gap: 10px; } }

/* ===================== Light theme, opt-in ===================== */
/* The page is warm white, panels are a soft peach, and the app close-ups stay dark like the real app. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #FBF9F6;
  --bg-2: #F4EFE9;
  --card: #EDE7E0;
  --card-2: #E6DFD7;
  --card-3: #DAD2C9;
  --text: #1C1B17;
  --text-2: #3A3732;
  --muted: #6B655D;
  --faint: #9A938A;
  --line: rgba(28, 27, 23, .1);
  --accent: #C4441B;        /* text-safe orange on light */
  --accent-hi: #EE6A3A;     /* fills, big type */
  --accent-soft: rgba(238, 106, 58, .14);
  --red: #FFE4D2;           /* panels: a soft peach tint instead of vermilion */
  --red-deep: #FFD3B6;
}
html[data-theme="light"] .app, html[data-theme="light"] .day, html[data-theme="light"] .wallet-demo, html[data-theme="light"] .partner-card, html[data-theme="light"] .p-note, html[data-theme="light"] .metal, html[data-theme="light"] .foot-card, html[data-theme="light"] .ind-tile, html[data-theme="light"] .mani-teaser {
  --bg: #1C1B17; --bg-2: #22211D; --card: #2B2A26; --card-2: #34322E; --card-3: #403D38;
  --text: #FFFFFF; --text-2: #E8E5DF; --muted: #A7A29A; --faint: #78736B; --line: rgba(255, 255, 255, .08);
  --accent: #F3683E; --accent-hi: #F3683E; --accent-soft: rgba(243, 104, 62, .16);
  color: var(--text);
}
html[data-theme="light"] .btn-light { background: var(--text); color: var(--bg); }
html[data-theme="light"] .btn-light:hover { background: var(--text-2); }
html[data-theme="light"] .nav { background: rgba(251, 249, 246, .82); }
html[data-theme="light"] .nav.is-scrolled { background: rgba(251, 249, 246, .94); }
html[data-theme="light"] .map { background: #EEEAE5; }
html[data-theme="light"] .map .maplibregl-ctrl-attrib { background: rgba(251, 249, 246, .8) !important; }
html[data-theme="light"] .map .maplibregl-ctrl-attrib-button { filter: none; }
html[data-theme="light"] .map-veil { background: linear-gradient(180deg, rgba(251, 249, 246, .5) 0%, rgba(251, 249, 246, .08) 16%, rgba(251, 249, 246, .08) 44%, rgba(251, 249, 246, .9) 66%, var(--bg) 80%),
                       radial-gradient(90% 70% at 50% 36%, transparent 45%, rgba(251, 249, 246, .6) 100%); }
html[data-theme="light"] .pin-dot { background: var(--accent-hi); }
html[data-theme="light"] .offer { background: #fff; }
html[data-theme="light"] .of-btn { background: var(--text); color: #fff; }
html[data-theme="light"] .of-tag { color: #fff; }
html[data-theme="light"] .h1 em, html[data-theme="light"] .h2 em { color: var(--accent-hi); }
html[data-theme="light"] .stage .pattern i, html[data-theme="light"] .wrist .pattern i, html[data-theme="light"] .get .pattern i, html[data-theme="light"] .partner-demo .pattern i, html[data-theme="light"] .gt-vis .pattern i { color: rgba(226, 104, 50, .3); }
html[data-theme="light"] .app { box-shadow: 0 34px 70px -34px rgba(150, 60, 10, .35); }
html[data-theme="light"] .fs.is-done .fs-n, html[data-theme="light"] .fs-rail i, html[data-theme="light"] .time[aria-selected="true"] i { background: var(--accent-hi); }
html[data-theme="light"] .wrist > p { color: var(--text-2); }
html[data-theme="light"] .get .h2 { color: var(--text); }
html[data-theme="light"] .get p { color: var(--text-2); }
html[data-theme="light"] .get .qr-card { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .get .qr-card b { color: var(--text); }
html[data-theme="light"] .get .qr-card small { color: var(--muted); }
html[data-theme="light"] .get-alt { color: var(--text); }
html[data-theme="light"] .get .mark { filter: drop-shadow(0 16px 26px rgba(180, 70, 10, .25)); }
html[data-theme="light"] .help { color: var(--text-2); }
html[data-theme="light"] .help b, html[data-theme="light"] .help a { color: var(--text) !important; }
html[data-theme="light"] .dur i { color: var(--text); }
html[data-theme="light"] .sleep-card .art-img span { color: #fff; }

/* Manifesto teaser on the home page */
.mani-teaser { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: 22px; padding: clamp(36px, 6vw, 80px); border-radius: 34px; background: #1C1B17; text-decoration: none; }
.mani-teaser .pattern i { color: rgba(255, 255, 255, .05); }
.mani-teaser blockquote { margin: 0; }
.mani-teaser blockquote p { margin: 0; font: 700 clamp(34px, 5vw, 68px)/1.04 var(--display); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.mani-teaser blockquote em { font-style: normal; color: var(--accent); }
.mani-teaser .mt-sign { font-size: 15px; color: var(--muted); }
.mani-teaser .mt-sign b { color: #fff; font-weight: 600; margin-right: 6px; }
.mani-teaser .link { color: #fff; }


/* ===================== Both themes: softer orange panels and a calm background ===================== */
:root { --panel: linear-gradient(155deg, #EE8A4C 0%, #DE6B3D 100%); }
html[data-theme="light"] { --panel: linear-gradient(155deg, #FFEADB 0%, #FFD8C0 100%); }
.stage, .wrist, .get, .partner-demo, .gt-vis { background: var(--panel); }

/* Slow drifting lines behind everything, like a stress landscape settling */
body::before { content: ""; position: fixed; inset: -10% -10%; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='880' viewBox='0 0 1600 880'%3E%3Cg fill='none' stroke='%23F3683E' stroke-opacity='.09' stroke-width='1.4' stroke-linecap='round'%3E%3Cpolyline points='0,30.0 40,36.7 80,42.6 120,47.1 160,49.8 200,50.6 240,49.6 280,47.5 320,44.7 360,41.9 400,39.7 440,38.5 480,38.2 520,38.8 560,39.6 600,40.2 640,40.0 680,38.6 720,35.6 760,31.1 800,25.5 840,19.5 880,13.6 920,8.8 960,5.5 1000,4.3 1040,5.2 1080,8.1 1120,12.3 1160,17.3 1200,22.3 1240,26.6 1280,29.9 1320,31.9 1360,32.7 1400,32.7 1440,32.4 1480,32.4 1520,33.1 1560,35.0 1600,38.0'/%3E%3Cpolyline points='0,101.5 40,106.3 80,109.0 120,109.5 160,108.2 200,105.6 240,102.4 280,99.1 320,96.3 360,94.3 400,93.1 440,92.6 480,92.1 520,91.3 560,89.6 600,86.6 640,82.1 680,76.4 720,69.9 760,63.3 800,57.3 840,52.7 880,50.1 920,49.8 960,51.8 1000,55.8 1040,61.3 1080,67.4 1120,73.5 1160,78.9 1200,83.1 1240,86.1 1280,87.8 1320,88.8 1360,89.5 1400,90.4 1440,92.1 1480,94.6 1520,98.0 1560,101.9 1600,105.9'/%3E%3Cpolyline points='0,166.1 40,165.8 80,163.7 120,160.3 160,156.2 200,152.2 240,148.7 280,146.0 320,144.1 360,142.7 400,141.5 440,139.7 480,137.0 520,133.2 560,128.0 600,121.9 640,115.2 680,108.8 720,103.4 760,99.7 800,98.2 840,99.2 880,102.5 920,107.8 960,114.4 1000,121.6 1040,128.4 1080,134.4 1120,139.1 1160,142.3 1200,144.4 1240,145.6 1280,146.6 1320,147.8 1360,149.5 1400,152.1 1440,155.2 1480,158.7 1520,161.8 1560,164.0 1600,164.6'/%3E%3Cpolyline points='0,213.7 40,209.3 80,204.6 120,200.2 160,196.4 200,193.7 240,191.8 280,190.4 320,189.1 360,187.4 400,184.8 440,181.0 480,176.1 520,170.4 560,164.5 600,158.9 640,154.6 680,152.1 720,152.0 760,154.2 800,158.6 840,164.8 880,171.9 920,179.3 960,186.0 1000,191.7 1040,195.8 1080,198.5 1120,199.9 1160,200.5 1200,200.8 1240,201.4 1280,202.7 1320,204.7 1360,207.2 1400,210.0 1440,212.3 1480,213.6 1520,213.2 1560,210.8 1600,206.3'/%3E%3Cpolyline points='0,249.2 40,245.0 80,241.8 120,239.7 160,238.7 200,238.2 240,237.8 280,237.0 320,235.2 360,232.2 400,228.2 440,223.5 480,218.5 520,214.1 560,210.9 600,209.6 640,210.4 680,213.3 720,218.2 760,224.5 800,231.3 840,238.0 880,243.7 920,248.1 960,250.8 1000,252.0 1040,252.0 1080,251.4 1120,250.7 1160,250.4 1200,250.9 1240,252.3 1280,254.4 1320,256.6 1360,258.5 1400,259.4 1440,258.7 1480,256.2 1520,251.8 1560,245.7 1600,238.7'/%3E%3Cpolyline points='0,287.9 40,287.1 80,287.3 120,288.2 160,289.0 200,289.3 240,288.5 280,286.6 320,283.4 360,279.6 400,275.5 440,271.9 480,269.5 520,268.8 560,270.1 600,273.3 640,278.0 680,283.7 720,289.6 760,295.0 800,299.2 840,301.9 880,302.9 920,302.5 960,301.0 1000,299.2 1040,297.5 1080,296.5 1120,296.6 1160,297.7 1200,299.7 1240,301.9 1280,303.9 1320,304.9 1360,304.5 1400,302.4 1440,298.6 1480,293.4 1520,287.5 1560,281.5 1600,276.2'/%3E%3Cpolyline points='0,338.3 40,340.2 80,341.9 120,342.9 160,342.8 200,341.3 240,338.7 280,335.3 320,331.7 360,328.6 400,326.7 440,326.3 480,327.8 520,330.9 560,335.4 600,340.5 640,345.5 680,349.7 720,352.6 760,353.8 800,353.5 840,351.8 880,349.3 920,346.7 960,344.6 1000,343.4 1040,343.4 1080,344.7 1120,346.8 1160,349.3 1200,351.5 1240,352.8 1280,352.6 1320,350.9 1360,347.6 1400,343.2 1440,338.1 1480,333.2 1520,329.2 1560,326.6 1600,325.7'/%3E%3Cpolyline points='0,393.9 40,395.0 80,394.8 120,393.3 160,390.7 200,387.4 240,384.1 280,381.4 320,380.0 360,380.2 400,382.1 440,385.6 480,390.1 520,395.1 560,399.8 600,403.5 640,405.7 680,406.3 720,405.3 760,403.1 800,400.2 840,397.4 880,395.2 920,394.1 960,394.2 1000,395.6 1040,397.8 1080,400.2 1120,402.3 1160,403.3 1200,403.0 1240,401.0 1280,397.6 1320,393.2 1360,388.4 1400,383.9 1440,380.5 1480,378.6 1520,378.5 1560,380.1 1600,383.1'/%3E%3Cpolyline points='0,442.8 40,441.1 80,438.4 120,435.4 160,432.5 200,430.6 240,430.1 280,431.4 320,434.4 360,438.9 400,444.3 440,449.9 480,455.0 520,458.9 560,461.2 600,461.6 640,460.5 680,458.1 720,455.2 760,452.3 800,450.1 840,448.9 880,449.0 920,450.0 960,451.7 1000,453.5 1040,454.6 1080,454.7 1120,453.2 1160,450.3 1200,446.0 1240,441.0 1280,435.8 1320,431.3 1360,428.1 1400,426.6 1440,427.1 1480,429.3 1520,433.0 1560,437.3 1600,441.7'/%3E%3Cpolyline points='0,483.6 40,481.2 80,479.4 120,478.8 160,479.8 200,482.7 240,487.4 280,493.4 320,500.1 360,506.8 400,512.6 440,517.0 480,519.5 520,520.0 560,518.7 600,516.2 640,513.0 680,509.9 720,507.3 760,505.6 800,505.0 840,505.1 880,505.7 920,506.2 960,505.8 1000,504.3 1040,501.4 1080,497.0 1120,491.7 1160,485.8 1200,480.2 1240,475.7 1280,472.8 1320,471.9 1360,473.2 1400,476.4 1440,481.0 1480,486.3 1520,491.7 1560,496.3 1600,499.9'/%3E%3Cpolyline points='0,528.3 40,529.3 80,532.0 120,536.7 160,543.0 200,550.4 240,558.2 280,565.7 320,572.0 360,576.4 400,578.8 440,578.9 480,577.1 520,574.0 560,570.2 600,566.3 640,563.0 680,560.5 720,558.9 760,558.0 800,557.3 840,556.3 880,554.6 920,551.6 960,547.3 1000,541.9 1040,535.7 1080,529.5 1120,523.9 1160,519.8 1200,517.7 1240,517.9 1280,520.4 1320,524.9 1360,530.8 1400,537.4 1440,543.9 1480,549.6 1520,554.0 1560,557.1 1600,558.8'/%3E%3Cpolyline points='0,587.6 40,593.4 80,600.6 120,608.7 160,616.9 200,624.3 240,630.2 280,634.0 320,635.5 360,634.7 400,632.0 440,627.9 480,623.2 520,618.6 560,614.6 600,611.4 640,609.1 680,607.5 720,606.0 760,604.3 800,601.7 840,598.0 880,593.2 920,587.4 960,581.3 1000,575.4 1040,570.5 1080,567.4 1120,566.5 1160,568.0 1200,571.9 1240,577.7 1280,584.8 1320,592.3 1360,599.5 1400,605.7 1440,610.5 1480,613.7 1520,615.7 1560,616.7 1600,617.3'/%3E%3Cpolyline points='0,658.0 40,665.7 80,673.2 120,679.7 160,684.4 200,687.0 240,687.1 280,685.0 320,681.2 360,676.3 400,671.1 440,666.1 480,661.9 520,658.8 560,656.6 600,655.1 640,653.8 680,652.2 720,649.8 760,646.4 800,641.9 840,636.6 880,631.2 920,626.2 960,622.5 1000,620.6 1040,620.9 1080,623.6 1120,628.5 1160,635.1 1200,642.6 1240,650.2 1280,657.2 1320,662.9 1360,667.0 1400,669.5 1440,670.7 1480,671.0 1520,670.9 1560,671.0 1600,671.6'/%3E%3Cpolyline points='0,725.5 40,730.5 80,733.7 120,734.8 160,733.6 200,730.5 240,726.0 280,720.7 320,715.5 360,710.9 400,707.5 440,705.2 480,704.0 520,703.5 560,703.2 600,702.6 640,701.1 680,698.5 720,694.9 760,690.6 800,686.1 840,682.1 880,679.4 920,678.5 960,679.6 1000,683.0 1040,688.2 1080,694.6 1120,701.7 1160,708.5 1200,714.3 1240,718.6 1280,721.2 1320,722.2 1360,722.0 1400,721.0 1440,719.8 1480,719.1 1520,719.1 1560,720.0 1600,721.6'/%3E%3Cpolyline points='0,780.1 40,780.0 80,777.9 120,774.2 160,769.5 200,764.5 240,759.9 280,756.4 320,754.1 360,753.3 400,753.5 440,754.4 480,755.4 520,755.9 560,755.4 600,753.7 640,750.9 680,747.3 720,743.6 760,740.3 800,738.2 840,737.8 880,739.3 920,742.6 960,747.5 1000,753.3 1040,759.3 1080,764.7 1120,768.9 1160,771.5 1200,772.4 1240,771.8 1280,770.1 1320,767.9 1360,765.9 1400,764.6 1440,764.3 1480,765.1 1520,766.7 1560,768.7 1600,770.4'/%3E%3Cpolyline points='0,823.7 40,819.8 80,815.2 120,810.7 160,807.0 200,804.4 240,803.4 280,803.7 320,805.1 360,807.1 400,809.0 440,810.1 480,810.2 520,809.0 560,806.5 600,803.3 640,800.0 680,797.1 720,795.3 760,795.1 800,796.6 840,799.9 880,804.4 920,809.5 960,814.5 1000,818.7 1040,821.6 1080,822.8 1120,822.3 1160,820.5 1200,817.9 1240,815.1 1280,812.7 1320,811.3 1360,811.1 1400,812.1 1440,814.0 1480,816.4 1520,818.4 1560,819.7 1600,819.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 1600px 880px repeat;
  animation: drift 90s linear infinite; }
html[data-theme="light"] body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='880' viewBox='0 0 1600 880'%3E%3Cg fill='none' stroke='%23E0662F' stroke-opacity='.12' stroke-width='1.4' stroke-linecap='round'%3E%3Cpolyline points='0,30.0 40,36.7 80,42.6 120,47.1 160,49.8 200,50.6 240,49.6 280,47.5 320,44.7 360,41.9 400,39.7 440,38.5 480,38.2 520,38.8 560,39.6 600,40.2 640,40.0 680,38.6 720,35.6 760,31.1 800,25.5 840,19.5 880,13.6 920,8.8 960,5.5 1000,4.3 1040,5.2 1080,8.1 1120,12.3 1160,17.3 1200,22.3 1240,26.6 1280,29.9 1320,31.9 1360,32.7 1400,32.7 1440,32.4 1480,32.4 1520,33.1 1560,35.0 1600,38.0'/%3E%3Cpolyline points='0,101.5 40,106.3 80,109.0 120,109.5 160,108.2 200,105.6 240,102.4 280,99.1 320,96.3 360,94.3 400,93.1 440,92.6 480,92.1 520,91.3 560,89.6 600,86.6 640,82.1 680,76.4 720,69.9 760,63.3 800,57.3 840,52.7 880,50.1 920,49.8 960,51.8 1000,55.8 1040,61.3 1080,67.4 1120,73.5 1160,78.9 1200,83.1 1240,86.1 1280,87.8 1320,88.8 1360,89.5 1400,90.4 1440,92.1 1480,94.6 1520,98.0 1560,101.9 1600,105.9'/%3E%3Cpolyline points='0,166.1 40,165.8 80,163.7 120,160.3 160,156.2 200,152.2 240,148.7 280,146.0 320,144.1 360,142.7 400,141.5 440,139.7 480,137.0 520,133.2 560,128.0 600,121.9 640,115.2 680,108.8 720,103.4 760,99.7 800,98.2 840,99.2 880,102.5 920,107.8 960,114.4 1000,121.6 1040,128.4 1080,134.4 1120,139.1 1160,142.3 1200,144.4 1240,145.6 1280,146.6 1320,147.8 1360,149.5 1400,152.1 1440,155.2 1480,158.7 1520,161.8 1560,164.0 1600,164.6'/%3E%3Cpolyline points='0,213.7 40,209.3 80,204.6 120,200.2 160,196.4 200,193.7 240,191.8 280,190.4 320,189.1 360,187.4 400,184.8 440,181.0 480,176.1 520,170.4 560,164.5 600,158.9 640,154.6 680,152.1 720,152.0 760,154.2 800,158.6 840,164.8 880,171.9 920,179.3 960,186.0 1000,191.7 1040,195.8 1080,198.5 1120,199.9 1160,200.5 1200,200.8 1240,201.4 1280,202.7 1320,204.7 1360,207.2 1400,210.0 1440,212.3 1480,213.6 1520,213.2 1560,210.8 1600,206.3'/%3E%3Cpolyline points='0,249.2 40,245.0 80,241.8 120,239.7 160,238.7 200,238.2 240,237.8 280,237.0 320,235.2 360,232.2 400,228.2 440,223.5 480,218.5 520,214.1 560,210.9 600,209.6 640,210.4 680,213.3 720,218.2 760,224.5 800,231.3 840,238.0 880,243.7 920,248.1 960,250.8 1000,252.0 1040,252.0 1080,251.4 1120,250.7 1160,250.4 1200,250.9 1240,252.3 1280,254.4 1320,256.6 1360,258.5 1400,259.4 1440,258.7 1480,256.2 1520,251.8 1560,245.7 1600,238.7'/%3E%3Cpolyline points='0,287.9 40,287.1 80,287.3 120,288.2 160,289.0 200,289.3 240,288.5 280,286.6 320,283.4 360,279.6 400,275.5 440,271.9 480,269.5 520,268.8 560,270.1 600,273.3 640,278.0 680,283.7 720,289.6 760,295.0 800,299.2 840,301.9 880,302.9 920,302.5 960,301.0 1000,299.2 1040,297.5 1080,296.5 1120,296.6 1160,297.7 1200,299.7 1240,301.9 1280,303.9 1320,304.9 1360,304.5 1400,302.4 1440,298.6 1480,293.4 1520,287.5 1560,281.5 1600,276.2'/%3E%3Cpolyline points='0,338.3 40,340.2 80,341.9 120,342.9 160,342.8 200,341.3 240,338.7 280,335.3 320,331.7 360,328.6 400,326.7 440,326.3 480,327.8 520,330.9 560,335.4 600,340.5 640,345.5 680,349.7 720,352.6 760,353.8 800,353.5 840,351.8 880,349.3 920,346.7 960,344.6 1000,343.4 1040,343.4 1080,344.7 1120,346.8 1160,349.3 1200,351.5 1240,352.8 1280,352.6 1320,350.9 1360,347.6 1400,343.2 1440,338.1 1480,333.2 1520,329.2 1560,326.6 1600,325.7'/%3E%3Cpolyline points='0,393.9 40,395.0 80,394.8 120,393.3 160,390.7 200,387.4 240,384.1 280,381.4 320,380.0 360,380.2 400,382.1 440,385.6 480,390.1 520,395.1 560,399.8 600,403.5 640,405.7 680,406.3 720,405.3 760,403.1 800,400.2 840,397.4 880,395.2 920,394.1 960,394.2 1000,395.6 1040,397.8 1080,400.2 1120,402.3 1160,403.3 1200,403.0 1240,401.0 1280,397.6 1320,393.2 1360,388.4 1400,383.9 1440,380.5 1480,378.6 1520,378.5 1560,380.1 1600,383.1'/%3E%3Cpolyline points='0,442.8 40,441.1 80,438.4 120,435.4 160,432.5 200,430.6 240,430.1 280,431.4 320,434.4 360,438.9 400,444.3 440,449.9 480,455.0 520,458.9 560,461.2 600,461.6 640,460.5 680,458.1 720,455.2 760,452.3 800,450.1 840,448.9 880,449.0 920,450.0 960,451.7 1000,453.5 1040,454.6 1080,454.7 1120,453.2 1160,450.3 1200,446.0 1240,441.0 1280,435.8 1320,431.3 1360,428.1 1400,426.6 1440,427.1 1480,429.3 1520,433.0 1560,437.3 1600,441.7'/%3E%3Cpolyline points='0,483.6 40,481.2 80,479.4 120,478.8 160,479.8 200,482.7 240,487.4 280,493.4 320,500.1 360,506.8 400,512.6 440,517.0 480,519.5 520,520.0 560,518.7 600,516.2 640,513.0 680,509.9 720,507.3 760,505.6 800,505.0 840,505.1 880,505.7 920,506.2 960,505.8 1000,504.3 1040,501.4 1080,497.0 1120,491.7 1160,485.8 1200,480.2 1240,475.7 1280,472.8 1320,471.9 1360,473.2 1400,476.4 1440,481.0 1480,486.3 1520,491.7 1560,496.3 1600,499.9'/%3E%3Cpolyline points='0,528.3 40,529.3 80,532.0 120,536.7 160,543.0 200,550.4 240,558.2 280,565.7 320,572.0 360,576.4 400,578.8 440,578.9 480,577.1 520,574.0 560,570.2 600,566.3 640,563.0 680,560.5 720,558.9 760,558.0 800,557.3 840,556.3 880,554.6 920,551.6 960,547.3 1000,541.9 1040,535.7 1080,529.5 1120,523.9 1160,519.8 1200,517.7 1240,517.9 1280,520.4 1320,524.9 1360,530.8 1400,537.4 1440,543.9 1480,549.6 1520,554.0 1560,557.1 1600,558.8'/%3E%3Cpolyline points='0,587.6 40,593.4 80,600.6 120,608.7 160,616.9 200,624.3 240,630.2 280,634.0 320,635.5 360,634.7 400,632.0 440,627.9 480,623.2 520,618.6 560,614.6 600,611.4 640,609.1 680,607.5 720,606.0 760,604.3 800,601.7 840,598.0 880,593.2 920,587.4 960,581.3 1000,575.4 1040,570.5 1080,567.4 1120,566.5 1160,568.0 1200,571.9 1240,577.7 1280,584.8 1320,592.3 1360,599.5 1400,605.7 1440,610.5 1480,613.7 1520,615.7 1560,616.7 1600,617.3'/%3E%3Cpolyline points='0,658.0 40,665.7 80,673.2 120,679.7 160,684.4 200,687.0 240,687.1 280,685.0 320,681.2 360,676.3 400,671.1 440,666.1 480,661.9 520,658.8 560,656.6 600,655.1 640,653.8 680,652.2 720,649.8 760,646.4 800,641.9 840,636.6 880,631.2 920,626.2 960,622.5 1000,620.6 1040,620.9 1080,623.6 1120,628.5 1160,635.1 1200,642.6 1240,650.2 1280,657.2 1320,662.9 1360,667.0 1400,669.5 1440,670.7 1480,671.0 1520,670.9 1560,671.0 1600,671.6'/%3E%3Cpolyline points='0,725.5 40,730.5 80,733.7 120,734.8 160,733.6 200,730.5 240,726.0 280,720.7 320,715.5 360,710.9 400,707.5 440,705.2 480,704.0 520,703.5 560,703.2 600,702.6 640,701.1 680,698.5 720,694.9 760,690.6 800,686.1 840,682.1 880,679.4 920,678.5 960,679.6 1000,683.0 1040,688.2 1080,694.6 1120,701.7 1160,708.5 1200,714.3 1240,718.6 1280,721.2 1320,722.2 1360,722.0 1400,721.0 1440,719.8 1480,719.1 1520,719.1 1560,720.0 1600,721.6'/%3E%3Cpolyline points='0,780.1 40,780.0 80,777.9 120,774.2 160,769.5 200,764.5 240,759.9 280,756.4 320,754.1 360,753.3 400,753.5 440,754.4 480,755.4 520,755.9 560,755.4 600,753.7 640,750.9 680,747.3 720,743.6 760,740.3 800,738.2 840,737.8 880,739.3 920,742.6 960,747.5 1000,753.3 1040,759.3 1080,764.7 1120,768.9 1160,771.5 1200,772.4 1240,771.8 1280,770.1 1320,767.9 1360,765.9 1400,764.6 1440,764.3 1480,765.1 1520,766.7 1560,768.7 1600,770.4'/%3E%3Cpolyline points='0,823.7 40,819.8 80,815.2 120,810.7 160,807.0 200,804.4 240,803.4 280,803.7 320,805.1 360,807.1 400,809.0 440,810.1 480,810.2 520,809.0 560,806.5 600,803.3 640,800.0 680,797.1 720,795.3 760,795.1 800,796.6 840,799.9 880,804.4 920,809.5 960,814.5 1000,818.7 1040,821.6 1080,822.8 1120,822.3 1160,820.5 1200,817.9 1240,815.1 1280,812.7 1320,811.3 1360,811.1 1400,812.1 1440,814.0 1480,816.4 1520,818.4 1560,819.7 1600,819.5'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1600px, 0, 0); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
.motion-off body::before, html.motion-off body::before { animation: none; }
body { position: relative; isolation: isolate; }

/* The theme button in the header */
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 8px; border: 0; border-radius: 50%; background: var(--card-2); color: var(--text); font-size: 18px; cursor: pointer; transition: background-color .2s; }
.theme-btn:hover { background: var(--card-3); }
.theme-btn .ph-moon { display: none; }
html[data-theme="light"] .theme-btn .ph-sun { display: none; }
html[data-theme="light"] .theme-btn .ph-moon { display: block; }

/* Dark mode: lift the manifesto block off the page */
.mani-teaser { background: linear-gradient(160deg, #2C2622, #1F1D1A); }

/* Light mode, take two: no waves, no peach. Panels are dark ink like the app, on the warm white page. */
html[data-theme="light"] body::before { display: none; }
html[data-theme="light"] { --panel: linear-gradient(160deg, #2A2622 0%, #1A1815 100%); }
html[data-theme="light"] .stage, html[data-theme="light"] .wrist, html[data-theme="light"] .get, html[data-theme="light"] .partner-demo, html[data-theme="light"] .gt-vis {
  --bg: #1C1B17; --bg-2: #22211D; --card: #2B2A26; --card-2: #34322E; --card-3: #403D38;
  --text: #FFFFFF; --text-2: #E8E5DF; --muted: #A7A29A; --faint: #78736B; --line: rgba(255, 255, 255, .08);
  --accent: #F3683E; --accent-hi: #F3683E; color: var(--text); }
html[data-theme="light"] .stage .pattern i, html[data-theme="light"] .wrist .pattern i, html[data-theme="light"] .get .pattern i, html[data-theme="light"] .partner-demo .pattern i, html[data-theme="light"] .gt-vis .pattern i { color: rgba(243, 104, 62, .22); }
html[data-theme="light"] .wrist > p, html[data-theme="light"] .get p { color: rgba(255, 255, 255, .85); }
html[data-theme="light"] .get .h2, html[data-theme="light"] .get .qr-card b, html[data-theme="light"] .get-alt { color: #fff; }
html[data-theme="light"] .get .qr-card { background: rgba(255, 255, 255, .08); }
html[data-theme="light"] .get .qr-card small { color: rgba(255, 255, 255, .7); }
html[data-theme="light"] .app { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
html[data-theme="light"] .help { background: var(--bg-2); }

/* ===================== No wave pattern anywhere ===================== */
body::before { display: none !important; }

/* ===================== The founder's letter ===================== */
.letter { max-width: 680px; margin: clamp(40px, 7vw, 96px) auto 0; padding: clamp(32px, 6vw, 72px) clamp(24px, 6vw, 72px); border-radius: 28px; background: var(--bg-2); }
.letter-kicker { margin: 0; font-size: 15px; font-weight: 600; color: var(--accent); }
.letter-meta { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.letter-body { margin-top: clamp(28px, 4vw, 44px); }
.letter-body p { margin: 0 0 1.35em; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.letter-body p:first-child { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.4; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.letter-sign { display: grid; gap: 2px; margin-top: clamp(28px, 4vw, 40px); }
.letter-sign b { font-size: 16px; font-weight: 600; color: var(--text); }
.letter-sign > span:last-child { font-size: 14px; color: var(--muted); }
.signature { display: block; margin-bottom: 4px; font: 500 clamp(44px, 5vw, 58px)/1 "Caveat", "Segoe Script", cursive; color: var(--text); transform: rotate(-3deg); transform-origin: left; }

/* The note on the home page */
.note-card { display: grid; justify-items: start; gap: 14px; max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 60px); border-radius: 28px; background: var(--bg-2); text-decoration: none; }
.note-text { margin: 4px 0 0; font: 600 clamp(26px, 3vw, 38px)/1.25 var(--display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.note-by { display: grid; font-size: 14px; color: var(--muted); }
.note-by b { font-size: 16px; font-weight: 600; color: var(--text); }
.note-card .link { margin-top: 6px; color: var(--accent); }

.note-card { max-width: 880px; }
.note-text { font-size: clamp(24px, 2.6vw, 34px); }

/* ===================== Calm dark: Stressie's earlier orange, soft gradients, glass ===================== */
:root {
  --accent: #F99A45;           /* warm Stressie orange, not red */
  --accent-hi: #F78521;
  --accent-soft: rgba(247, 133, 33, .16);
  --orange-a: #F78521;
  --orange-b: #F05F1C;
  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .09);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  --bg: #16130F;
  /* Panels: a soft orange glow on warm dark, instead of flat vermilion */
  --panel:
    radial-gradient(120% 90% at 15% 0%, rgba(247, 133, 33, .55) 0%, rgba(247, 133, 33, 0) 60%),
    radial-gradient(110% 90% at 100% 100%, rgba(240, 95, 28, .38) 0%, rgba(240, 95, 28, 0) 60%),
    linear-gradient(160deg, #3A2618 0%, #24180F 100%);
}

/* The page floats on slow, soft orange light */
html { background: var(--bg); }
body {
  background:
    radial-gradient(55% 40% at 8% 0%, rgba(247, 133, 33, .16), transparent 70%),
    radial-gradient(45% 35% at 95% 30%, rgba(240, 95, 28, .09), transparent 70%),
    radial-gradient(55% 40% at 20% 75%, rgba(249, 160, 70, .07), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(247, 133, 33, .1), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.theme-btn { display: none !important; }

/* Primary buttons: the earlier Stressie orange gradient */
.btn-light { background: linear-gradient(90deg, var(--orange-a), var(--orange-b)); color: #fff; box-shadow: inset 0 0 12px rgba(255, 198, 155, .55), 0 10px 26px -14px rgba(240, 95, 28, .7); }
.btn-light:hover { background: linear-gradient(90deg, #F99236, #F26A2A); }
.ind-tile .btn-light, .get .btn-light { color: #fff; }

/* Orange accents */
.h1 em, .h2 em, .stanza em { color: var(--accent); background: linear-gradient(90deg, #FBB15E, #F78521 60%, #F26A2A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pin-dot { background: linear-gradient(135deg, var(--orange-a), var(--orange-b)); }
.fs.is-done .fs-n, .time[aria-selected="true"] i, .breath-steps span.on { background: linear-gradient(135deg, var(--orange-a), var(--orange-b)); }
.fs-rail i { background: linear-gradient(180deg, #FBB15E, var(--orange-a)); }
.dial .done { stroke: var(--orange-a); }
.pilot-stats dd { color: var(--accent); }

/* Panels: glowing orange, icons faint */
.stage, .wrist, .get, .partner-demo, .gt-vis { background: var(--panel); box-shadow: var(--glass-edge); }
.stage .pattern i, .wrist .pattern i, .get .pattern i, .partner-demo .pattern i, .gt-vis .pattern i { color: rgba(255, 255, 255, .1); }

/* Glass surfaces */
.nav { background: rgba(22, 19, 15, .55); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
.nav.is-scrolled { background: rgba(22, 19, 15, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.aud, .chip, .qr-card, .sleep-row, .sleep-when, .way, .private, .pilot, .xlink, .note-card, .letter, .wallet-demo, .card-band,
.time[aria-selected="true"], .contact-form, .contact-done, .page-hero, .legal-end, .toc, .note {
  background: var(--glass); box-shadow: var(--glass-edge);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.aud a[aria-current="page"], .time[aria-selected="true"] { background: var(--glass-2); }
.offer, .p-note { background: rgba(28, 24, 20, .62); box-shadow: var(--glass-edge); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.get .qr-card { background: rgba(0, 0, 0, .18); }
.badge { background: rgba(0, 0, 0, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.app { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), var(--glass-edge); }

/* The hero map takes on the warmer dark */
.map { background: #1B1712; }
.map-veil { background: linear-gradient(180deg, rgba(22, 19, 15, .5) 0%, rgba(22, 19, 15, .08) 16%, rgba(22, 19, 15, .08) 44%, rgba(22, 19, 15, .88) 66%, transparent 86%),
                       radial-gradient(90% 70% at 50% 36%, transparent 45%, rgba(22, 19, 15, .6) 100%); }

/* Footer wordmark: centred */
.foot-word { text-align: center; font-size: clamp(64px, 21vw, 330px); }

/* One width for every section */
.note-card { max-width: none; }


/* No map credit on the map itself (it stays in the footer) */
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-attrib { display: none !important; }

/* Desktop: the places spread across the whole hero, around the headline */
@media (min-width: 900px) { .hero .spots { position: absolute; inset: var(--nav) 0 0 0; } }

/* Desktop hero: the headline sits in the middle, places ring around it */
@media (min-width: 900px) {
  .hero { grid-template-rows: 1fr; align-items: center; min-height: max(780px, calc(100svh - var(--nav))); max-height: none; }
  .hero-copy { padding-top: 40px; padding-bottom: 40px; }
  .of-0 { left: 3%; top: 32%; }
  .of-1 { left: auto; right: 3%; top: 26%; }
  .map-veil { background: radial-gradient(ellipse 42% 38% at 50% 54%, rgba(22, 19, 15, .9) 0%, rgba(22, 19, 15, .6) 55%, transparent 100%),
                         linear-gradient(180deg, rgba(22, 19, 15, .35) 0%, transparent 20%, transparent 80%, var(--bg) 100%); }
}
@media (min-width: 900px) and (max-width: 1299px) { .offer { display: none; } }

.maplibregl-control-container { display: none !important; }

@media (min-width: 900px) { .of-0 { top: 23%; } .of-1 { top: 20%; } }

/* Footer: just the crisis note, centred */
.foot-base { justify-content: center; text-align: center; }

/* Hero: in beta, one button to the waitlist */
.beta-line { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.beta-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(243, 104, 62, .22); }
.hero-get:has(.beta-line) { flex-direction: column; gap: 14px; }
.beta-line { font-size: 14px; font-weight: 500; }

/* Waitlist form: errors on text areas, a busy button, a hidden trap for bots */
.field textarea[aria-invalid="true"] { outline: 2px solid #FF7A5C; }
.btn:disabled { opacity: .6; cursor: progress; }
#wl-fail a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
#wl-fail:focus { outline: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Header: links never break onto two lines; tighter pills where all five links just fit */
.nav-links a { white-space: nowrap; }
@media (min-width: 1180px) and (max-width: 1279px) { .nav-links a { padding: 9px 11px; } .aud a { padding: 8px 13px; } }

/* Narrow phones: single columns may shrink, so wide cards can't push the page sideways */
@media (max-width: 959px) { .wallet-grid, .contact { grid-template-columns: minmax(0, 1fr); } }
.wallet-demo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) { .contact-ways li { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 359px) {
  .nav-in { gap: 8px; }
  .nav .btn-sm { padding: 0 12px; font-size: 13px; }
  .burger { margin-left: 0; }
  .wallet-demo { padding: 16px; }
  .wallet-demo .stack .pass .pass-name, .wallet-demo .stack .pass .pass-val { font-size: 14px; }
  .wallet-demo .pass-val { white-space: normal; }
}

/* Beta line: the dot stays with the first word when the line wraps on phones */
.beta-line { display: block; text-align: center; text-wrap: balance; }
.beta-line i { display: inline-block; margin: 0 9px 1px 0; vertical-align: middle; }

/* Phones: comfortable tap targets for the logo and the waitlist link */
.nav .brand { min-height: 44px; }
@media (max-width: 599px) { .get-alt { min-height: 40px; } }