/* Out of Office — marketing site
   One switch owns the page: html.is-out drenches it green. */

@font-face {
  font-family: "Outfit";
  src: url("assets/fonts/Outfit-Latin.woff2") format("woff2"),
       url("assets/fonts/Outfit-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F7F7F5;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --green: #25D34B;
  --green-deep: #19B23E;
  --track: #EBEBE9;
  --muted: #6E6E6B;
  --green-ink: #0E4A1C;

  /* theme (flips with html.is-out) */
  --bg: var(--paper);
  --surface: var(--white);
  --text: var(--ink);
  --text-2: var(--muted);
  --pill-track: var(--track);
  --pill-on: var(--green);
  --shade: 26 26 26;

  --gutter: clamp(20px, 4vw, 48px);
  --max: 1200px;
  --nav-h: 64px;
  --section-y: clamp(96px, 12vw, 176px);

  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.3, 1.2, .5, 1);
  --pop: cubic-bezier(.34, 1.5, .64, 1);

  --shadow-sm: 0 1px 2px rgb(var(--shade) / .06), 0 4px 12px -2px rgb(var(--shade) / .08);
  --shadow-lg: 0 4px 10px rgb(var(--shade) / .06), 0 40px 80px -28px rgb(var(--shade) / .36);

  interpolate-size: allow-keywords;
  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .1 4%, .24 9%, .43 15%, .62 22%, .78 30%, .9 38%, .975 46%, 1.018 54%, 1.032 61%, 1.03 68%, 1.018 77%, 1.006 88%, 1);
    --pop: linear(0, .21 5%, .58 12%, .9 19%, 1.08 26%, 1.13 32%, 1.1 39%, 1.04 47%, .995 57%, .985 66%, .995 78%, 1);
  }
}

html.is-out {
  --bg: var(--green);
  --surface: color-mix(in srgb, var(--green), #fff 20%);
  --text-2: var(--green-ink);
  --pill-on: var(--green-deep);
  --shade: 8 56 20;
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: rgb(var(--shade) / .28) transparent;
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--ink);
  overflow-x: clip;
}

::selection { background: var(--ink); color: var(--green); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--shade) / .24);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--shade) / .4); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .24em; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 300ms var(--ease);
}
.skip:focus-visible { transform: none; outline-color: var(--green); }

/* Colour eases only when there is no View Transition to do the flood. */
html.color-ease body,
html.color-ease .nav,
html.color-ease .widget,
html.color-ease .hs-lock,
html.color-ease .faq details,
html.color-ease .facts dt,
html.color-ease .step-art--presets li,
html.color-ease .step-art--quick li,
html.color-ease .app-dots span,
html.color-ease .step-num {
  transition: background-color 450ms var(--ease), color 450ms var(--ease), box-shadow 450ms var(--ease);
}

/* View Transition: JS authors the flood; kill the default crossfade. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- rings (the three O's) ---------- */

.rings {
  --d: 14px;
  display: inline-flex;
  gap: calc(var(--d) * .14);
  color: var(--ink);
  flex: none;
}
.rings span {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  border: calc(var(--d) * .235) solid currentColor;
}
.rings span:nth-child(2) { --i: 1; }
.rings span:nth-child(3) { --i: 2; }

html.celebrate .rings span {
  animation: ring-pulse 560ms var(--ease) calc(260ms + var(--i, 0) * 110ms) both;
}
@keyframes ring-pulse {
  0% { transform: scale(1); }
  38% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* ---------- pill switch ---------- */

.pill {
  --w: 380px;
  --h: calc(var(--w) * .558);
  --pad: calc(var(--h) * .066);
  --knob: calc(var(--h) - var(--pad) * 2);
  --stretch: 0px;
  position: relative;
  display: block;
  flex: none;
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--pill-track);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .07);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 380ms var(--ease), box-shadow 380ms var(--ease);
}
.pill[aria-checked="true"] {
  background: var(--pill-on);
  box-shadow: inset 0 3px 10px rgb(0 40 10 / .28);
}
.pill .knob {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: calc(var(--knob) + var(--stretch));
  height: var(--knob);
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 calc(var(--h) * .03) calc(var(--h) * .09) rgb(0 0 0 / .16),
    0 1px 3px rgb(0 0 0 / .1);
  transition:
    transform 520ms var(--spring),
    width 260ms var(--ease),
    box-shadow 260ms var(--ease);
  will-change: transform;
}
.pill[aria-checked="true"] .knob {
  transform: translateX(calc(var(--w) - var(--h) - var(--stretch)));
}
.pill:active { --stretch: calc(var(--knob) * .14); }
.pill:hover .knob { box-shadow: 0 calc(var(--h) * .04) calc(var(--h) * .12) rgb(0 0 0 / .2), 0 1px 3px rgb(0 0 0 / .1); }
.pill:focus-visible { outline-offset: 6px; }

/* mini pills: widget and lock-screen art */
.mini-pill {
  --mw: 2.1em;
  --kd: calc(var(--mw) * .56 * .76);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--mw);
  height: calc(var(--mw) * .56);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transition: background-color 300ms var(--ease);
}
.mini-pill > span {
  position: absolute;
  top: calc((var(--mw) * .56 - var(--kd)) / 2);
  left: calc((var(--mw) * .56 - var(--kd)) / 2);
  width: var(--kd);
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  transition: transform 520ms var(--spring), background-color 300ms var(--ease);
}
html.is-out .mini-pill { background: currentColor; }
html.is-out .mini-pill > span {
  background: var(--green);
  transform: translateX(calc(var(--mw) - var(--mw) * .56));
}

/* ---------- App Store buttons + links ---------- */

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 10px 22px -10px rgb(var(--shade) / .5);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.store svg { width: 17px; height: 20px; margin-top: -2px; }
.store:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(0 0 0 / .12), 0 16px 30px -12px rgb(var(--shade) / .6); }
.store:active { transform: scale(.975); transition-duration: 90ms; }

.store--nav { height: 40px; padding: 0 16px 0 14px; font-size: .9375rem; gap: 8px; }
.store--nav svg { width: 15px; height: 18px; }

.store--lg { height: 60px; padding: 0 28px 0 22px; gap: 12px; }
.store--lg svg { width: 22px; height: 26px; margin-top: -3px; }
.store-text { display: flex; flex-direction: column; line-height: 1.05; font-size: 1.3125rem; font-weight: 600; }
.store-text small { font-size: .6875rem; font-weight: 500; letter-spacing: .01em; opacity: .78; margin-bottom: 1px; }

.store--invert { background: var(--paper); color: var(--ink); box-shadow: 0 16px 36px -16px rgb(0 0 0 / .6); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(var(--shade) / .3);
  transition: text-decoration-color 200ms var(--ease);
}
.text-link svg { width: 16px; height: 16px; transition: transform 320ms var(--ease); }
.text-link:hover { text-decoration-color: currentColor; }
.text-link:hover svg { transform: translateY(3px); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
}
.nav::after {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 1px;
  background: rgb(var(--shade) / .08);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
html.scrolled .nav::after { opacity: 1; }
html.is-out .nav {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(100% - 2 * var(--gutter), var(--max));
  height: 100%;
  margin-inline: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  border-radius: 999px;
}
.rings--brand { --d: 13px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 6px;
  transition: color 200ms var(--ease);
}
.nav-links a:hover { color: var(--text); }

/* ---------- shared type ---------- */

.display {
  font-size: clamp(3.5rem, 7.2vw, 6rem);
  line-height: .92;
  letter-spacing: -0.04em;
}
.display-heavy, .display-thin { display: block; }
.display-heavy { font-weight: 800; }
.display-thin { font-weight: 200; letter-spacing: -0.035em; }

.h2 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2 .thin { display: block; font-weight: 200; letter-spacing: -0.035em; }
.h2--xl { font-size: clamp(2.75rem, 6.4vw, 5.5rem); line-height: .96; }

.lead {
  max-width: 52ch;
  margin-top: 22px;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.section-head { max-width: 780px; margin-bottom: clamp(44px, 5.5vw, 80px); }

.hero, .setup, .widgets, .shield-section, .screens, .privacy, .faq {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.setup, .widgets, .shield-section, .screens, .privacy, .faq { padding-top: var(--section-y); }
.faq { padding-bottom: var(--section-y); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  min-height: calc(100svh - var(--nav-h));
  padding-block: 56px 72px;
}
.hero-copy { max-width: 620px; }
.hero-sub {
  max-width: 33ch;
  margin-top: 32px;
  font-size: clamp(1.125rem, 1.45vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 40px;
}
.hero-meta { margin-top: 22px; font-size: .9375rem; color: var(--text-2); }

.hero-switch {
  --hw: clamp(248px, 26.4vw, 380px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rings--hero { --d: calc(var(--hw) * .3); margin-bottom: calc(var(--hw) * .1); }
.status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 36px;
}
.status-title { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.status-line { font-size: 1rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pill--hero { --w: var(--hw); }
.hero-hint {
  margin-top: 18px;
  font-size: .9375rem;
  color: var(--text-2);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
html.has-flipped .hero-hint { opacity: 0; transform: translateY(-4px); }

/* first paint: visible by default, choreographed only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .hero .display-heavy { animation: rise 900ms var(--ease) 80ms both; }
  .hero .display-thin { animation: rise 900ms var(--ease) 170ms both; }
  .hero-sub { animation: rise 900ms var(--ease) 260ms both; }
  .hero-actions { animation: rise 900ms var(--ease) 340ms both; }
  .hero-meta { animation: rise 900ms var(--ease) 400ms both; }
  /* entrance only: once flipped, the celebrate pulse owns the rings */
  html:not(.has-flipped) .rings--hero span { animation: pop 700ms var(--spring) calc(360ms + var(--i, 0) * 90ms) both; }
  .hero .status { animation: rise 800ms var(--ease) 560ms both; }
  .pill--hero { animation: rise-pill 1000ms var(--ease) 460ms both; }
  .hero-hint { animation: fade 800ms var(--ease) 1300ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes rise-pill { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- story: Friday 5:52 → 6:00 PM ---------- */

.story { position: relative; }
html.js .story { height: 400vh; }

.story-stage {
  display: grid;
  grid-template-columns: minmax(0, 660px) auto;
  justify-content: start;
  align-items: center;
  gap: clamp(32px, 8vw, 116px);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding-block: var(--nav-h) 24px;
}
html.js .story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
}

.clock {
  display: flex;
  align-items: baseline;
  margin-left: -0.05em;
  font-size: clamp(6rem, 16vw, 15rem);
  line-height: .8;
  letter-spacing: -0.045em;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  transition: font-weight 700ms var(--ease);
}
.story.is-six .clock { font-weight: 800; }
.clock-h, .clock-m { display: inline-block; }
.clock-colon { margin-inline: .01em; transform: translateY(-.06em); }
.clock-ampm {
  margin-left: .12em;
  font-size: .2em;
  font-weight: 500;
  letter-spacing: 0;
}

.beats {
  display: grid;
  max-width: 26ch;
  margin-top: clamp(28px, 3.5vw, 48px);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.beat { grid-area: 1 / 1; text-wrap: balance; }
.beat--out { font-weight: 700; }
html.js .beat {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 500ms var(--ease), transform 600ms var(--ease), filter 500ms var(--ease);
}
html.js .beat.is-past { transform: translateY(-14px); }
html.js .beat.is-current { opacity: 1; transform: none; filter: none; }
html:not(.js) .beat:not(:first-child) { display: none; }

.story-progress {
  position: relative;
  width: min(240px, 60%);
  height: 4px;
  margin-top: clamp(28px, 3.5vw, 44px);
  border-radius: 999px;
  background: rgb(var(--shade) / .1);
  overflow: hidden;
}
.story-progress span {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
html:not(.js) .story-progress { display: none; }

/* phone frame */
.phone {
  --pw: clamp(280px, 25vw, 340px);
  position: relative;
  container-type: inline-size;
  width: var(--pw);
  padding: calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .16);
  background: #111;
  box-shadow:
    inset 0 0 0 1.5px #2C2C2A,
    inset 0 0 0 4px #0A0A0A,
    var(--shadow-lg);
}
.island {
  position: absolute;
  z-index: 6;
  top: 3.4cqw;
  left: 50%;
  width: 31cqw;
  height: 9cqw;
  translate: -50% 0;
  border-radius: 999px;
  background: #050505;
}

.story-phone, .phone--lock { --pw: min(340px, 25vw, calc((100svh - var(--nav-h) - 72px) / 2.2)); }

.lock {
  --wall-ring: rgb(26 26 26 / .06);
  position: relative;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: calc(var(--pw) * .13);
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 97%, transparent 0 17cqw, var(--wall-ring) 17.2cqw 23cqw, transparent 23.2cqw),
    radial-gradient(circle at 50% 97%, transparent 0 17cqw, var(--wall-ring) 17.2cqw 23cqw, transparent 23.2cqw),
    radial-gradient(circle at 86% 97%, transparent 0 17cqw, var(--wall-ring) 17.2cqw 23cqw, transparent 23.2cqw),
    linear-gradient(172deg, #F4F4F1 0%, #E4E4E0 100%);
  isolation: isolate;
}
.lock-flood {
  --wall-ring: rgb(14 74 28 / .14);
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 14% 97%, transparent 0 17cqw, var(--wall-ring) 17.2cqw 23cqw, transparent 23.2cqw),
    radial-gradient(circle at 50% 97%, transparent 0 17cqw, var(--wall-ring) 17.2cqw 23cqw, transparent 23.2cqw),
    radial-gradient(circle at 86% 97%, transparent 0 17cqw, var(--wall-ring) 17.2cqw 23cqw, transparent 23.2cqw),
    linear-gradient(172deg, #2EDA53 0%, #21C645 100%);
  clip-path: circle(0 at 64% 33%);
  transition: clip-path 1000ms var(--ease);
}
.phone--lock.is-out .lock-flood { clip-path: circle(160% at 64% 33%); }

.lock-date, .lock-time, .lock-widgets { position: relative; z-index: 2; text-align: center; }
.lock-date {
  padding-top: 17cqw;
  font-size: 4.8cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lock-time {
  margin-top: -1cqw;
  font-size: 25cqw;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.lock-widgets {
  display: flex;
  justify-content: center;
  gap: 3cqw;
  margin-top: 5cqw;
}

/* lock-screen accessory widgets: a ring that fills, a pill that flips */
.acc-ring {
  display: grid;
  place-items: center;
  width: 15.5cqw;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background: rgb(26 26 26 / .08);
}
.acc-ring > span {
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.9cqw solid currentColor;
  transition: background-color 400ms var(--ease);
}
.acc-rect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2cqw;
  width: 42cqw;
  height: 15.5cqw;
  padding: 0 3.6cqw;
  border-radius: 4.4cqw;
  background: rgb(26 26 26 / .08);
  text-align: left;
}
.acc-rect-top { display: flex; align-items: center; justify-content: space-between; }
.acc-rect-top svg { width: 9cqw; height: 3cqw; }
.acc-rect-top .mini-pill { --mw: 7.2cqw; }
.acc-rect-text { font-size: 3.5cqw; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the story phone runs on its own clock, not the page switch */
.phone--lock .mini-pill { background: color-mix(in srgb, currentColor 22%, transparent); }
.phone--lock .mini-pill > span { background: currentColor; transform: none; }
.phone--lock.is-out .acc-ring > span { background: currentColor; }
.phone--lock.is-out .mini-pill { background: currentColor; }
.phone--lock.is-out .mini-pill > span { background: var(--green); transform: translateX(calc(var(--mw) - var(--mw) * .56)); }

/* notifications */
.notifs {
  position: absolute;
  z-index: 3;
  left: 4cqw;
  right: 4cqw;
  top: 86cqw;
  height: 112cqw;
  text-align: left;
}
.notif {
  --k: -1;
  --y: calc(min(var(--k), 3) * 22.5cqw + max(var(--k) - 3, 0) * 4.2cqw);
  position: absolute;
  inset: 0 0 auto;
  z-index: calc(20 - var(--k));
  display: grid;
  grid-template-columns: 9.4cqw minmax(0, 1fr);
  align-items: start;
  gap: 3cqw;
  min-height: 20.5cqw;
  padding: 3.2cqw 3.6cqw;
  border-radius: 5.4cqw;
  background: rgb(255 255 255 / .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1.2cqw 4cqw -1.5cqw rgb(0 0 0 / .18);
  font-size: 3.5cqw;
  line-height: 1.3;
  transform-origin: 50% 0;
  opacity: 0;
  transform: translateY(-7cqw) scale(.94);
  transition:
    transform 620ms var(--spring),
    opacity 380ms var(--ease),
    filter 420ms var(--ease);
}
.notif.is-shown {
  opacity: calc(1 - max(var(--k) - 5, 0) * .35);
  transform: translateY(var(--y)) scale(calc(1 - max(var(--k) - 3, 0) * .05));
}
.notif.is-shielded {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(calc(var(--y) - 12cqw)) scale(.9);
  transition-duration: 520ms, 420ms, 420ms;
  transition-timing-function: var(--ease);
  transition-delay: calc(var(--k) * 55ms);
}
html:not(.js) .notif[data-at="45"] { opacity: 1; transform: none; }

.n-icon {
  display: grid;
  place-items: center;
  width: 9.4cqw;
  aspect-ratio: 1;
  border-radius: 2.3cqw;
  background: var(--ink);
  color: #fff;
}
.n-icon svg { width: 5.6cqw; height: 5.6cqw; }
.n-icon--ooo { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 .3cqw rgb(0 0 0 / .06); }
.n-icon--ooo svg { width: 7cqw; height: 2.4cqw; }
.notif--out .n-icon--ooo { background: var(--green); }
.n-body { display: flex; flex-direction: column; min-width: 0; }
.n-head { display: flex; justify-content: space-between; gap: 2cqw; }
.n-head b { font-weight: 600; }
.n-head time { flex: none; color: #5E5E5B; font-size: 3.1cqw; font-variant-numeric: tabular-nums; }
.n-title { font-weight: 600; }
.n-title, .n-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif--out .n-text { white-space: normal; }

.home-bar {
  position: absolute;
  z-index: 4;
  bottom: 2.4cqw;
  left: 50%;
  width: 36cqw;
  height: 1.5cqw;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--ink);
}

/* ---------- setup ---------- */

.steps {
  --step-gap: clamp(40px, 4vw, 64px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: var(--step-gap);
}
.steps::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 44px;
  right: calc((100% - 2 * var(--step-gap)) / 3 + var(--step-gap) - 44px);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgb(var(--shade) / .2) 0 6px, transparent 6px 12px);
}
.step {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
}
.step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 8px var(--bg);
}
.step h3 {
  margin-top: 28px;
  font-size: 1.625rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.step > p { margin-top: 12px; max-width: 36ch; color: var(--text-2); text-wrap: pretty; }
.step-art { align-self: start; padding-top: 32px; }

.app-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.app-dots span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.app-dots svg { width: 21px; height: 21px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .875rem;
  font-weight: 600;
}
.chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.step-art--presets { display: flex; flex-direction: column; gap: 8px; }
.step-art--presets li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: .9375rem;
}
.step-art--presets li span { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-art--presets li:first-child { background: var(--ink); color: var(--paper); }
.step-art--presets li:first-child span { color: #BDBDB8; }

.step-art--quick { display: flex; flex-wrap: wrap; gap: 8px; }
.step-art--quick li {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: .9375rem;
  font-weight: 500;
}

/* ---------- widgets ---------- */

.homescreen {
  --u: clamp(124px, 10.6vw, 150px);
  --g: calc(var(--u) * .15);
  --r: calc(var(--u) * .15);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(28px, 4.4vw, 64px);
  border-radius: clamp(28px, 3.4vw, 48px);
  background:
    radial-gradient(120% 90% at 85% 0%, #2B2B29 0%, transparent 60%),
    var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.homescreen :focus-visible { outline-color: #fff; }

.hs-home { display: flex; gap: var(--g); }
.hs-col { display: flex; flex-direction: column; gap: var(--g); }
.hs-row { display: flex; gap: var(--g); }

.widget {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * .12);
  border: 0;
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .5);
  transition: transform 300ms var(--ease);
}
.widget:hover { transform: translateY(-2px); }
.widget:active { transform: scale(.965); transition-duration: 120ms; }
html.is-out .widget { background: var(--green); }
.widget .mini-pill { --mw: calc(var(--u) * .26); background: var(--track); }
.widget .mini-pill > span { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
html.is-out .widget .mini-pill { background: var(--green-deep); }
html.is-out .widget .mini-pill > span { background: #fff; }

.w-large { width: calc(var(--u) * 2 + var(--g)); height: calc(var(--u) * 2 + var(--g)); }
.w-medium { width: calc(var(--u) * 2 + var(--g)); height: var(--u); flex-direction: row; gap: calc(var(--u) * .14); align-items: stretch; }
.w-small { width: var(--u); height: var(--u); }

.rings--w { --d: calc(var(--u) * .1); }

.w-top { display: flex; justify-content: space-between; align-items: center; }
.w-word { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.w-hero {
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.w-anchor { color: var(--muted); font-weight: 500; line-height: 1.2; }
html.is-out .w-anchor { color: var(--green-ink); }

.w-large .w-word { margin-top: auto; font-size: calc(var(--u) * .14); }
.w-large .w-hero { margin-top: calc(var(--u) * .03); font-size: calc(var(--u) * .56); }
.w-large .w-anchor { margin-top: calc(var(--u) * .05); font-size: calc(var(--u) * .095); }
.w-week {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--u) * .14);
}
.w-week span {
  display: grid;
  place-items: center;
  width: calc(var(--u) * .19);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: calc(var(--u) * .075);
  font-weight: 600;
  color: #5E5E5B;
  background: var(--track);
}
.w-week .today { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 calc(var(--u) * .016) var(--ink); }
html.is-out .w-week span { background: color-mix(in srgb, var(--green), #fff 24%); color: var(--green-ink); }
html.is-out .w-week .today,
html.is-out .w-week .wknd { background: var(--ink); color: var(--green); box-shadow: none; }

.w-mark { display: flex; flex-direction: column; justify-content: space-between; }
.w-story { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-width: 0; }
.w-medium .w-word { font-size: calc(var(--u) * .12); }
.w-medium .w-hero { margin-top: calc(var(--u) * .02); font-size: calc(var(--u) * .42); }
.w-medium .w-anchor { margin-top: calc(var(--u) * .04); font-size: calc(var(--u) * .088); }

.w-small {
  display: grid;
  grid-template: "r p" auto "h h" 1fr "a a" auto / 1fr auto;
  align-items: start;
}
.w-small .rings { grid-area: r; align-self: center; }
.w-small .mini-pill { grid-area: p; }
.w-small .w-hero { grid-area: h; align-self: end; font-size: calc(var(--u) * .34); }
.w-small .w-anchor { grid-area: a; margin-top: calc(var(--u) * .04); font-size: calc(var(--u) * .085); }

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .07);
  width: var(--u);
  height: var(--u);
}
.app-icon-img {
  position: relative;
  width: calc(var(--u) * .56);
  aspect-ratio: 1;
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / .6);
}
.app-icon-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.icon-on { opacity: 0; transition: opacity 500ms var(--ease); }
html.is-out .icon-on { opacity: 1; }
.app-icon-label { font-size: calc(var(--u) * .085); font-weight: 500; color: #fff; }

.hs-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 36px 28px 40px;
  border-radius: calc(var(--r) * 1.6);
  background: #2A2A28;
  color: #fff;
}
html.is-out .hs-lock { background: var(--green); color: var(--ink); }
.hs-lock-time {
  font-size: 5rem;
  line-height: .9;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.acc-inline {
  order: -1;
  font-size: .9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hs-lock-row { display: flex; gap: 12px; }
.hs-lock .acc-ring,
.hs-lock .acc-rect {
  border: 0;
  color: inherit;
  background: rgb(255 255 255 / .14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 260ms var(--ease);
}
html.is-out .hs-lock .acc-ring,
html.is-out .hs-lock .acc-rect { background: rgb(14 74 28 / .16); }
.hs-lock .acc-ring:active,
.hs-lock .acc-rect:active { transform: scale(.94); transition-duration: 100ms; }
.acc-ring--lg { width: 76px; }
.acc-ring--lg > span { border-width: 7px; }
html.is-out .acc-ring--lg > span { background: currentColor; }
.acc-rect--lg { width: 172px; height: 76px; padding: 0 16px; gap: 6px; border-radius: 20px; font: inherit; }
.acc-rect--lg .acc-rect-top svg { width: 36px; height: 12px; }
.acc-rect--lg .mini-pill { --mw: 30px; }
.acc-rect--lg .acc-rect-text { font-size: .875rem; }
.hs-lock .mini-pill > span { background: currentColor; }
html.is-out .hs-lock .mini-pill > span { background: var(--green); }

.hs-note {
  max-width: 60ch;
  margin: 24px auto 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--text-2);
  text-wrap: balance;
}

/* ---------- shield ---------- */

.shield-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
}

.phone--shield { --pw: clamp(270px, 24vw, 320px); }
.shield-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 9 / 19.5;
  padding: 0 7cqw 10cqw;
  overflow: hidden;
  border-radius: calc(var(--pw) * .13);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}
.shield-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding-top: 12cqw;
}
.rings--shield { --d: 12cqw; margin-bottom: 9cqw; }
.shield-title {
  font-size: 7.4cqw;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.shield-fact { margin-top: 3.4cqw; font-size: 4.6cqw; color: var(--muted); font-variant-numeric: tabular-nums; }
.shield-btn {
  width: 100%;
  height: 14cqw;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font-size: 5cqw;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--ease), background-color 200ms var(--ease);
}
.shield-btn:hover { background: #2BDB51; }
.shield-btn:active { transform: scale(.96); transition-duration: 90ms; }

/* ---------- screens ---------- */

.screens-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  border-radius: 12px;
}
.shot { container-type: inline-size; }
.phone--shot {
  display: block;
  width: 100cqw;
  padding: 3cqw;
  border-radius: 15.5cqw;
}
.phone--shot img {
  width: 100%;
  height: auto;
  border-radius: 12.5cqw;
  background: var(--paper);
}
.shot figcaption {
  margin-top: 18px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-align: center;
}
.shot:nth-child(even) { transform: translateY(clamp(0px, 3vw, 44px)); }

/* ---------- privacy ---------- */

.privacy .h2--xl { max-width: 15ch; }
.privacy-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 72px);
  align-items: start;
}
.privacy-body .lead { margin-top: 0; font-size: clamp(1.125rem, 1.45vw, 1.3125rem); color: var(--text); }
.privacy-more { margin-top: 20px; font-weight: 600; }
.privacy-more a { text-decoration-color: rgb(var(--shade) / .35); text-underline-offset: 4px; }
.privacy-more a:hover { text-decoration-color: currentColor; }
.facts { display: flex; flex-direction: column; gap: 22px; }
.facts div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: baseline; }
.facts dt {
  justify-self: start;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: .875rem;
  font-weight: 600;
}
.facts dd { color: var(--text-2); }

/* ---------- faq ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq .h2 { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 18px 76px 18px 28px;
  border-radius: 28px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 36px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 380ms var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p {
  max-width: 62ch;
  padding: 0 28px 26px;
  color: var(--text-2);
  text-wrap: pretty;
}
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 420ms var(--ease), content-visibility 420ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* ---------- close ---------- */

.close {
  padding-block: clamp(112px, 14vw, 200px);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.close :focus-visible { outline-color: var(--paper); }
.close-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.close-switch { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.rings--close { --d: 22px; color: var(--paper); }
.pill--close { --w: 176px; background: #3A3A38; box-shadow: inset 0 2px 6px rgb(0 0 0 / .35); }
.pill--close[aria-checked="true"] { background: var(--green); }
.display--close { margin-top: clamp(44px, 5vw, 64px); }
.display--close .display-thin { transition: color 500ms var(--ease); }
html.is-out .display--close .display-thin { color: var(--green); }
.close-sub { margin: 28px 0 40px; font-size: 1.125rem; color: #BDBDB8; }

/* ---------- life: flip it on and your life spills out of the switch ---------- */

/* stickers emerge from behind the switch, then settle clear of it */
.pill-stage { position: relative; isolation: isolate; }
.pill-stage > .pill { z-index: 1; }
.story-phone { position: relative; }
.life {
  --u: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  pointer-events: none;
}
.life--hero, .life--close { z-index: 0; }
.life--hero { --u: calc(var(--hw) / 380); }
.life--story { --u: calc(var(--pw) / 340); }

.sticker {
  --px: var(--x);
  --py: var(--y);
  --ps: var(--s);
  --dx: calc(var(--px) * var(--u));
  --dy: calc(var(--py) * var(--u));
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  width: calc(var(--ps) * var(--u));
  opacity: 0;
  /* tucked inside the switch, waiting */
  transform: translate(calc(-50% - var(--dx)), calc(-50% - var(--dy))) rotate(calc(var(--r) * -3)) scale(.12);
  transition:
    transform 300ms cubic-bezier(.5, 0, .75, 0) calc(var(--i) * 18ms),
    opacity 140ms linear calc(var(--i) * 18ms),
    scale 420ms var(--spring),
    rotate 420ms var(--spring);
}
.sticker img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px rgb(var(--shade) / .26));
}

html.is-out .life--hero .sticker,
html.is-out .life--close .sticker,
html.is-out .story.is-six .life--story .sticker {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--r)) scale(1);
  transition:
    transform 1000ms var(--pop) calc(90ms + var(--i) * 55ms),
    opacity 160ms linear calc(150ms + var(--i) * 55ms),
    scale 420ms var(--spring),
    rotate 420ms var(--spring);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sticker:hover { scale: 1.08; rotate: -4deg; }
}

/* settled, they breathe; only while someone can see them */
@media (prefers-reduced-motion: no-preference) {
  html.is-out .life--hero.is-live .sticker img,
  html.is-out .life--close.is-live .sticker img,
  html.is-out .story.is-six .life--story.is-live .sticker img {
    animation: bob calc(4.2s + var(--i) * .45s) ease-in-out calc(var(--i) * -1.7s) infinite alternate;
  }
}
@keyframes bob {
  from { transform: translateY(3px) rotate(-2deg); }
  to { transform: translateY(-5px) rotate(2.5deg); }
}

.life--close .sticker img { filter: drop-shadow(0 10px 16px rgb(0 0 0 / .5)); }

/* the status line doesn't shrink with the pill: keep the bottom row clear of it */
@media (min-width: 901px) {
  .sticker { --dx: clamp(var(--lo, -100vw), calc(var(--px) * var(--u)), var(--hi, 100vw)); }
}

@media (max-width: 1100px) {
  .sticker--xl { display: none; }
}

@media (max-width: 900px) {
  .sticker--wide { display: none; }
  .sticker { --px: var(--mx); --py: var(--my); --ps: var(--ms); }
}

/* ---------- footer ---------- */

.foot { padding-block: 40px 48px; }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.brand--foot { margin-right: 0; font-size: 1rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; margin-right: auto; }
.foot-links a { text-decoration: none; font-size: .9375rem; color: var(--text-2); }
.foot-links a:hover { color: var(--text); text-decoration: underline; }
.foot-guides { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; width: 100%; font-size: .875rem; }
.foot-guides span { font-weight: 600; color: var(--text); }
.foot-guides a { text-decoration: none; color: var(--text-2); }
.foot-guides a:hover { color: var(--text); text-decoration: underline; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; width: 100%; font-size: .8125rem; }
.foot-legal a { color: var(--text-2); text-decoration: none; }
.foot-legal a:hover { color: var(--text); text-decoration: underline; }
.foot-small { width: 100%; font-size: .8125rem; color: var(--text-2); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .homescreen { --u: clamp(112px, 13vw, 140px); }
  .hs-lock { width: 100%; max-width: 520px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: 40px 72px; }
  /* the switch is the product: on small screens it follows the headline */
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero .display { order: 0; }
  .hero-switch { order: 1; align-items: flex-start; text-align: left; margin-top: 40px; }
  .hero-sub { order: 2; margin-top: 44px; }
  .hero-actions { order: 3; }
  .hero-meta { order: 4; }
  .hero-switch { --hw: min(248px, 64vw); }
  .status { margin-top: 24px; }
  .hero-hint { margin-top: 12px; }
  .steps { grid-template-columns: 1fr; grid-template-rows: none; gap: 56px; }
  .step { grid-row: auto; grid-template-rows: none; }
  .steps::before { display: none; }
  .step-art { padding-top: 24px; }
  .shield-section { grid-template-columns: 1fr; justify-items: center; }
  .shield-copy { justify-self: stretch; }
  .privacy-body, .faq { grid-template-columns: 1fr; }
  .faq .h2 { position: static; }

  .story-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 24px;
    text-align: center;
  }
  .story-copy { display: flex; flex-direction: column; align-items: center; }
  .clock { font-size: clamp(4.5rem, 21vw, 8rem); }
  .beats { justify-items: center; min-height: 2.5em; margin-top: 14px; font-size: 1.125rem; }
  .story-progress { display: none; }
  .story-phone, .phone--lock { --pw: min(300px, 64vw, calc((100svh - var(--nav-h) - 250px) / 2.2)); }
}

@media (max-width: 760px) {
  :root { --nav-h: 58px; }
  .nav-inner { gap: 20px; }
  .nav-links a:not(:last-child) { display: none; }
  .foot-guides span { flex-basis: 100%; }
  .homescreen {
    --u: calc((100vw - 2 * var(--gutter) - 40px) / 2.15);
    padding: 20px;
    border-radius: 32px;
  }
  .hs-home { flex-direction: column; }
  .screens-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(62vw, 260px);
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .screens-row::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: start; }
  .shot:nth-child(even) { transform: none; }
  .facts div { grid-template-columns: 1fr; gap: 8px; }
  .faq summary { padding-left: 22px; padding-right: 64px; font-size: 1.0625rem; }
  .faq summary::before, .faq summary::after { right: 26px; }
  .faq details p { padding-inline: 22px; }
  .foot-links { margin-right: 0; }
}

@media (max-width: 420px) {
  .store--nav span { display: none; }
  .store--nav { width: 40px; padding: 0; justify-content: center; }
  .hs-lock { padding: 28px 16px 32px; }
  .hs-lock-row { flex-wrap: wrap; justify-content: center; }
}

/* ---------- reduced motion: cross-fades only ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .pill .knob, .mini-pill > span, .widget, .store, .text-link svg, .shield-btn,
  .hs-lock .acc-ring, .hs-lock .acc-rect { transition-property: opacity, background-color, color !important; }
  html.js .beat, html.js .beat.is-past { transform: none; filter: none; }
  .notif, .notif.is-shielded { filter: none; transition-property: opacity; }
  .lock-flood, .phone--lock.is-out .lock-flood { clip-path: none; transition: opacity 400ms linear; }
  .lock-flood { opacity: 0; }
  .phone--lock.is-out .lock-flood { opacity: 1; }
  .clock { transition: none; }
  .sticker,
  html.is-out .life--hero .sticker,
  html.is-out .life--close .sticker,
  html.is-out .story.is-six .life--story .sticker {
    transform: translate(-50%, -50%) rotate(var(--r));
    transition: opacity 400ms linear;
  }
}