/* FocusDrop — site design system (1.8 redesign)
 *
 * Type and colour come from the app: SF Pro Rounded (ui-rounded on Apple
 * devices, Nunito elsewhere) at heavy weights with tight tracking, brand
 * violet #7B6FD4, ink #2A2440, paper #FAF8F5 (FDTypography / FDColors).
 * Everything inside a device screen is sized in that device's own points
 * via container units, so the replicas scale with the render around them.
 */

/* ------------------------------------------------------------ tokens */
:root {
  --violet: #7B6FD4;
  --violet-600: #5F54AE;
  --violet-cta: #6B5FC8; /* white text on it is 5.1:1; #7B6FD4 stays for rings, arcs and accents */
  --violet-700: #52479B;
  --violet-50: #F4F2FD;
  --violet-100: #EAE6FB;
  --violet-200: #D9D2F6;
  --ink: #2A2440;
  --ink-2: #4E4866;
  --ink-3: #625D7C;
  --line: rgba(42, 36, 64, .09);
  --line-2: rgba(42, 36, 64, .14);
  --paper: #FAF8F5;
  --white: #fff;
  --night: #15122B;
  --night-2: #1E1A3B;
  --gold: #F5C963;
  --mint: #2EBD8E;
  --pink: #E88CAE;
  --cyan: #6DC9D4;
  --coral: #D4896E;
  --sky-1: #C9C0F4;
  --sky-2: #E3DCFA;
  --blush: #F6DCE8;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --shadow-1: 0 1px 2px rgba(42, 36, 64, .05), 0 6px 20px -6px rgba(42, 36, 64, .10);
  --shadow-2: 0 2px 6px rgba(42, 36, 64, .05), 0 30px 60px -18px rgba(60, 46, 140, .28);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.36, .5, 1);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--violet) 60%, transparent); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--violet-200); color: var(--ink); }
.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:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip: auto; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
kbd {
  font: 700 .82em/1 var(--font); letter-spacing: .02em;
  padding: .28em .5em .32em; border-radius: 7px;
  background: var(--white); color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--line-2), 0 0 0 1px var(--line-2);
  white-space: nowrap;
}
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* release gate: .when-pending is today's copy; live-only copy waits in
   <template data-when="live">, which nothing renders or indexes. At launch
   the bake (or site.js, if only data-release flips) unwraps the templates and
   drops the .when-pending elements. The .when-live rule is a fallback for any
   old markup that still uses the class. */
body[data-release="pending"] .when-live { display: none !important; }
body[data-release="live"] .when-pending { display: none !important; }

/* ------------------------------------------------------------- type */
.display {
  font-weight: 800;
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: .96;
  letter-spacing: -.045em;
  margin: 0;
  text-wrap: balance;
}
.h1 {
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
.h3 {
  font-weight: 800;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
}
.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.body { color: var(--ink-2); margin: 0; text-wrap: pretty; }
.small { font-size: 14px; color: var(--ink-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--violet-600);
}
.eyebrow::before { content: ""; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: currentColor; transform: translateY(-1px); }
/* A query-bearing eyebrow moved inside its heading (<h2><span class="eyebrow">…</span> Title</h2>)
   renders exactly like the old sibling: its own line at the body's line height, the drop
   centred on that line, and the container's gap below it. As a block it follows the
   heading's text-align, so it centres wherever the head is centred. */
:is(h1, h2, h3) > .eyebrow {
  display: block; margin: 0 0 var(--eyebrow-gap, 18px);
  line-height: 1.55; text-wrap: wrap; text-shadow: none; font-variant-numeric: normal;
}
:is(h1, h2, h3) > .eyebrow::before { display: inline-block; vertical-align: top; margin: calc((1.55em - 10px) / 2) 10px 0 0; }
.page-hero, .post-head, .index-head { --eyebrow-gap: 16px; }
.tile, .tl-drop .txt { --eyebrow-gap: 10px; }
.violet { color: var(--violet); }
.grad-text {
  background: linear-gradient(100deg, #6E5FD6 10%, #9C7FE0 55%, #E08AB4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pro { display: inline-block; vertical-align: .18em; margin-left: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px 3px; border-radius: 99px; background: #FFF1CF; color: #8A6413; }
.free { background: #DDF5EB; color: #0F7A58; }

.section { padding-block: clamp(80px, 11vw, 150px); position: relative; }
.section-head { max-width: 760px; display: grid; gap: 18px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* ----------------------------------------------------------- buttons */
.btn {
  --bg: var(--ink); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 99px;
  background: var(--bg); color: var(--fg);
  font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .35s var(--spring), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-violet { --bg: var(--violet-cta); box-shadow: 0 10px 30px -10px rgba(123, 111, 212, .8), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-violet:hover { --bg: #6255C2; }
.btn-ghost { --bg: rgba(255, 255, 255, .7); --fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 24px -14px rgba(42,36,64,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-ghost:hover { --bg: #fff; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.badge-store { display: inline-flex; border-radius: 13px; transition: transform .35s var(--spring); }
.badge-store img { height: 54px; width: auto; }
.badge-store:hover { transform: translateY(-2px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--violet-600); }
.link-arrow::after { content: "→"; transition: transform .3s var(--spring); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 14px 0 auto; z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  width: min(1120px, 100% - 24px);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 30px -18px rgba(42, 36, 64, .45);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled .nav-inner { background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px var(--line), 0 14px 40px -20px rgba(42, 36, 64, .5); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { padding: 9px 14px; border-radius: 99px; font-weight: 700; font-size: 15px; color: var(--ink-2); transition: background .2s, color .2s; }
.nav-links a:hover { background: rgba(123, 111, 212, .1); color: var(--ink); }
.nav-cta { margin-left: 6px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 99px; margin-left: auto; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; margin-left: 4px; }
  .nav-cta { margin-left: auto; }
  .nav.open .nav-links {
    display: grid; position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    padding: 10px; border-radius: 24px; background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .nav.open .nav-links a { padding: 14px 16px; font-size: 17px; }
}
@media (max-width: 420px) { .nav-cta { display: none; } .nav-toggle { margin-left: auto; } }

/* -------------------------------------------------------------- hero */
/* After the founder's reference: a bright sky with the sun in one corner and a
   rainbow in the other, white type, a dark pill CTA with stickers around it,
   glass cards at the sides and the devices standing below. */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: clamp(104px, 13vh, 140px);
  background:
    radial-gradient(60% 50% at 82% 30%, rgba(246, 205, 226, .75), transparent 70%),
    radial-gradient(50% 40% at 12% 18%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, #F1ECFB 68%, var(--paper) 100%);
}
/* the homepage: dark enough behind the white copy (4.5:1 or better) down to --sky-dark, then light behind the devices */
.hero-home {
  --sky-dark: 620px;
  background: linear-gradient(180deg, #4B4DBD 0, #5A5CCA 200px, #6265CF var(--sky-dark), #9A9DEA calc(var(--sky-dark) + 260px), #D2CEF7 calc(var(--sky-dark) + 520px), var(--paper) 100%);
  background-color: #5A5CCA; /* what contrast checkers read; the gradient paints over it */
}
@media (max-width: 760px) { .hero-home { --sky-dark: 720px; } }
.hero::after { /* paper grain, so the gradient never bands */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: soft-light; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hero > .sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero > .sky .sun { /* centred on the top-right corner, so its glow never reaches the type */
  position: absolute; right: 0; top: 0; translate: 50% -50%; width: clamp(520px, 64vw, 1000px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 5%, rgba(255, 251, 240, .95) 9%, rgba(255, 226, 241, .55) 18%, rgba(255, 214, 236, .2) 32%, rgba(255, 214, 236, .05) 48%, transparent 60%);
}
/* a lens flare: a few ghosts running from the sun, above and right of the headline */
.hero > .sky .flare {
  position: absolute; right: 0; top: 0; width: 34vw; height: 11vw; opacity: .85; filter: blur(1px);
  background:
    radial-gradient(circle at 86% 16%, rgba(255,255,255,.5) 0 18px, transparent 19px),
    radial-gradient(circle at 70% 38%, rgba(255,236,250,.32) 0 9px, transparent 10px),
    radial-gradient(circle at 55% 58%, rgba(214,240,255,.24) 0 26px, transparent 28px),
    radial-gradient(circle at 38% 80%, rgba(255,240,214,.3) 0 6px, transparent 7px);
}
/* the rainbow: the top-left arc of a circle centred low in the sky */
.hero > .sky .rainbow {
  position: absolute; left: -16vw; top: -2vw; width: 128vw; aspect-ratio: 1; border-radius: 50%; opacity: .5; filter: blur(6px);
  background: radial-gradient(closest-side, transparent 92.6%, rgba(255, 110, 130, .8) 93.4%, rgba(255, 186, 100, .8) 94.3%, rgba(255, 240, 130, .75) 95.2%, rgba(130, 230, 160, .7) 96.1%, rgba(100, 176, 255, .75) 97%, rgba(170, 124, 255, .65) 97.9%, transparent 98.8%);
  -webkit-mask-image: radial-gradient(24% 20% at 22% 9%, #000 25%, transparent 100%); mask-image: radial-gradient(24% 20% at 22% 9%, #000 25%, transparent 100%);
}

.drift { position: absolute; pointer-events: none; z-index: 1; will-change: transform; }
.drift-1 { width: clamp(180px, 22vw, 340px); left: -4%; top: 31%; opacity: .95; animation: drift 46s linear infinite alternate; }
.drift-2 { width: clamp(140px, 15vw, 240px); right: -3%; top: 9%; opacity: .9; animation: drift 38s linear infinite alternate-reverse; }
.drift-3 { width: clamp(120px, 12vw, 200px); right: 18%; top: 48%; opacity: .7; animation: drift 52s linear infinite alternate; }
@keyframes drift { from { translate: -3vw 0; } to { translate: 4vw 0; } }

.hero-copy { display: grid; justify-items: center; text-align: center; gap: 22px; position: relative; z-index: 3; color: #fff; }
.hero-copy .display { max-width: 18ch; font-size: clamp(40px, 5.6vw, 80px); color: #fff; text-shadow: 0 2px 40px rgba(40, 34, 140, .22); }
.hero-copy .display .hl {
  display: inline-block; font-weight: 600; letter-spacing: -.04em; text-shadow: none;
  background: linear-gradient(95deg, #fff 0%, #FFE1F0 48%, #E2E6FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy .lede { max-width: 700px; color: #fff; font-weight: 600; }
.hero-note { margin: -4px 0 0; font-size: 14.5px; font-weight: 700; color: #fff; }
.release-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 16px; border-radius: 99px; color: var(--ink);
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 8px 24px -16px rgba(42, 36, 64, .4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-weight: 800; font-size: 14.5px; letter-spacing: -.01em;
}
.release-pill .tag { padding: 5px 11px; border-radius: 99px; background: var(--violet-cta); color: #fff; font-size: 12.5px; }
.release-pill:hover .tag { background: var(--violet-700); }
.btn-glass { --bg: rgba(30, 24, 96, .26); --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* dark glass: white on it stays above 4.5:1 */
.btn-glass:hover { --bg: rgba(30, 24, 96, .38); }

/* the CTA with its stickers and Drop beside it */
.cta-wrap { position: relative; display: grid; justify-items: center; margin-top: 26px; }
.cta-wrap .cta-row { justify-content: center; }
.sticker {
  position: absolute; z-index: 1; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(160deg, #fff 30%, #ECE8FD); color: var(--violet-cta);
  box-shadow: 0 14px 26px -12px rgba(36, 28, 120, .55), inset 0 -2px 0 rgba(123, 111, 212, .16);
  animation: bob 7s ease-in-out infinite;
}
.sticker svg { width: 23px; height: 23px; }
.sticker::before { /* a thread to the buttons */
  content: ""; position: absolute; top: 50%; height: 1.5px; width: var(--thread, 40px); background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.15));
  transform-origin: 0 50%; left: 100%; rotate: var(--ta, 0deg);
}
.sticker.k1 { right: calc(100% + 58px); top: -30px; rotate: -12deg; --thread: 52px; --ta: 32deg; }
.sticker.k2 { right: calc(100% + 92px); top: 40px; rotate: 9deg; animation-delay: -2.3s; --thread: 80px; --ta: -14deg; }
.sticker.k3 { left: calc(100% + 34px); top: -36px; rotate: 11deg; animation-delay: -4.6s; }
.sticker.k3::before { left: auto; right: 100%; transform-origin: 100% 50%; --thread: 40px; --ta: -36deg; background: linear-gradient(270deg, rgba(255,255,255,.75), rgba(255,255,255,.15)); }
@keyframes bob { 50% { translate: 0 -7px; } }
.cta-wrap .st-drop { position: absolute; z-index: 2; width: 128px; left: calc(100% + 92px); top: -8px; }

/* the device stage: Watch · MacBook · iPhone at real relative size */
.stage {
  position: relative; z-index: 2;
  width: min(1440px, 100% - 2 * var(--gutter));
  margin: clamp(64px, 7vw, 104px) auto 0; padding-bottom: clamp(40px, 5vw, 72px);
}
.stage .row { --span: 549.5; --gap: 6; position: relative; z-index: 2; }
/* The founder asked for the iPhone and the Watch a little larger and closer in: 1.2x their true
   scale beside the MacBook (Apple asks for true relative scale; this is a deliberate departure,
   and it lifts the Watch past Apple's 200 px minimum on a 1440 px screen). */
@media (min-width: 761px) {
  .stage .row > .st-phone { width: calc(81.17 * 1.2 * var(--mm)); }
  .stage .row > .st-watch { width: calc(45.09 * 1.2 * var(--mm)); }
}
.stage .cloud-bank { position: absolute; z-index: 1; left: -14%; width: 128%; bottom: -1%; pointer-events: none; }
.stage-tabs { display: none; }
.stage-hint {
  position: absolute; z-index: 7; left: 50%; top: -14px; translate: -50% -100%;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(42, 36, 64, .6);
  transition: opacity .4s var(--ease), translate .5s var(--spring);
}
.stage-hint::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); translate: -50% 0; rotate: 45deg; border-radius: 2px; }
.stage-hint .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
/* the ping is a ring that grows from the dot (8 px) to 26 px and fades out: transform and
   opacity only, so it runs on the compositor instead of repainting a box-shadow every frame */
.stage-hint .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(46, 189, 142); opacity: 0; animation: ping 1.8s infinite; }
.stage-hint.gone { opacity: 0; translate: -50% -80%; pointer-events: none; }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(3.25); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }

/* glass cards: what each device is doing right now */
.hero-cards { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(20px, 3vw, 32px); }
.cards-l, .cards-r { display: contents; }
.sync-chip {
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; border-radius: 18px; text-align: left;
  background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 18px 40px -22px rgba(36, 28, 120, .55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background .4s var(--ease), transform .5s var(--spring);
}
.sync-chip > i { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-600); transition: background .3s, color .3s; }
.sync-chip > i svg { width: 20px; height: 20px; }
.sync-chip > span { display: grid; gap: 1px; min-width: 0; }
.sync-chip b { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.sync-chip .st { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink-2); }
.sync-chip.live { background: #fff; }
.sync-chip.live > i { background: var(--violet-cta); color: #fff; }
.sync-chip.live .st { color: var(--violet-600); }
.sync-chip.flash { animation: chipflash .9s var(--ease); }
@keyframes chipflash { 30% { box-shadow: inset 0 0 0 2px var(--violet), 0 18px 40px -16px rgba(123, 111, 212, .8); } }

/* wide screens: the cards float at the sides, level with the buttons */
@media (min-width: 1240px) {
  .hero-cards { position: absolute; left: 0; right: 0; bottom: calc(100% + 26px); margin: 0; display: block; pointer-events: none; }
  .cards-l, .cards-r { position: absolute; bottom: 0; display: grid; gap: 12px; pointer-events: auto; }
  .hero-cards .sync-chip { white-space: nowrap; }
  .cards-l { left: 0; rotate: -4deg; justify-items: start; }
  .cards-r { right: 0; rotate: 4deg; justify-items: end; }
  .cards-l .sync-chip:nth-child(2) { margin-left: 34px; }
  .cards-r .sync-chip:nth-child(2) { margin-right: 34px; }
}
@media (max-width: 1100px) { .sticker, .cta-wrap .st-drop { display: none; } }
@media (max-width: 1239px) { .hero > .drift-1, .hero > .drift-2 { display: none; } } /* the copy is wide: no white clouds behind white type */

/* phones: one device at a time, picked with the tabs, so each is shown large and alone */
@media (max-width: 760px) {
  .stage { margin-top: 64px; }
  .stage-tabs {
    display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 4px; border-radius: 99px;
    background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .stage-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 99px; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink-2); background: none; border: 0; cursor: pointer; }
  .stage-tabs button svg { width: 16px; height: 16px; }
  .stage-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
  .stage-tabs button.ping::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
  .stage .row > .dev { display: none; }
  .stage[data-show="mac"] .row { --span: 404; } .stage[data-show="mac"] .st-mac { display: block; }
  .stage[data-show="phone"] .row { --span: 150; } .stage[data-show="phone"] .st-phone { display: block; }
  .stage[data-show="watch"] .row { --span: 96; } .stage[data-show="watch"] .st-watch { display: block; }
  .stage-hint { top: -10px; font-size: 12.5px; white-space: normal; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); text-align: left; line-height: 1.3; }
  .stage .cloud-bank { width: 190%; left: -45%; bottom: 0; }
  .hero-cards { gap: 8px; }
  .sync-chip { padding: 7px 14px 7px 7px; gap: 9px; border-radius: 15px; }
  .sync-chip > i { width: 32px; height: 32px; border-radius: 9px; }
  .sync-chip b { font-size: 14px; } .sync-chip .st { font-size: 12.5px; }
  .sync-note { display: none !important; }
  .stage .row { min-height: calc(100cqw * 1.105); align-items: center; } /* the iPhone's height, so switching tabs doesn't jump */
  .hero > .drift { display: none; } /* white clouds behind white type */
}

/* ------------------------------------------------------------ devices */
/* Apple's own product bezels (tools/devices/export_bezels.sh), shown the way
   Apple's marketing guidelines ask: as is — no tilt, crop, shadow, glare or
   rotation, nothing laid over them — and, wherever several stand together, at
   their real relative size (.lineup). The live screen sits in the bezel's
   transparent hole and is sized in device points (--pt). */
.dev { position: relative; isolation: isolate; }
.dev > .frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.dev .screen { position: absolute; z-index: 1; overflow: hidden; background: #000; container-type: size; isolation: isolate; transform: translateZ(0); }
/* each hole is the device's native resolution; the corners are a touch tighter
   than Apple's so the screen always tucks under the bezel */
.dev-iphone > .frame { aspect-ratio: 735 / 1500; }
.dev-iphone .screen { left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; border-radius: 13.5% / 6.21%; --pt: calc(100cqw / 440); }
.dev-iphone-land > .frame { aspect-ratio: 1500 / 735; }
.dev-iphone-land .screen { left: 2.2%; top: 5.17%; width: 95.6%; height: 89.796%; border-radius: 6.21% / 13.5%; --pt: calc(100cqh / 440); }
.dev-macbook > .frame { aspect-ratio: 2000 / 1316; }
.dev-macbook .screen { left: 10.829%; top: 11.339%; width: 78.342%; height: 77.323%; border-radius: 1.18% 1.18% 0 0 / 1.82% 1.82% 0 0; --pt: calc(100cqw / 1512); }
.dev-watch > .frame { aspect-ratio: 600 / 960; }
.dev-watch .screen { left: 14.833%; top: 23.229%; width: 70.333%; height: 53.542%; border-radius: 26.1% / 21.4%; --pt: calc(100cqw / 211); }

/* Several devices together, at their real relative size. Each width is the
   bezel image's real width in mm; a lineup sets --span to the millimetres it
   shows (devices plus gaps), so one mm is 100cqw / --span. */
.lineup { container-type: inline-size; }
.lineup .row { --mm: calc(100cqw / var(--span)); display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--gap, 14) * var(--mm)); }
.lineup .dev, .lineup .row > * { flex: none; }
.lineup .dev-macbook { width: calc(386 * var(--mm)); }
.lineup .dev-iphone { width: calc(81.17 * var(--mm)); }
.lineup .dev-iphone-land { width: calc(165.65 * var(--mm)); }
.lineup .dev-watch { width: calc(45.09 * var(--mm)); }

.screen > img, .screen > video, .screen > .layer > img, .screen > .layer > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .layer { position: absolute; inset: 0; transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); }
.screen .layer[hidden] { display: block !important; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ iPhone UI */
.ios { position: absolute; inset: 0; font-family: var(--font); color: #1E1B2E; -webkit-font-smoothing: antialiased; }
.ios-status { position: absolute; top: 0; left: 0; right: 0; height: calc(58 * var(--pt)); display: flex; align-items: center; justify-content: space-between;
  padding: calc(4 * var(--pt)) calc(38 * var(--pt)) 0 calc(48 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 700; letter-spacing: -.01em; z-index: 5; }
.ios-status .icons { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.ios-status svg { height: calc(13 * var(--pt)); width: auto; }
.ios-status.light { color: #fff; }

.focus-run { background: linear-gradient(180deg, #EDECF7 0%, #F4F2F6 38%, #FAF8F5 60%, #F1EFEB 100%); }
.focus-run .tools { position: absolute; top: calc(69 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); display: flex; justify-content: space-between; }
.focus-run .tool { width: calc(41 * var(--pt)); height: calc(41 * var(--pt)); border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center;
  box-shadow: 0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgba(40, 30, 90, .06); font-size: calc(15 * var(--pt)); font-weight: 800; color: #2B2838; }
.focus-run .tool svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.focus-run .tool-r { display: flex; gap: calc(12 * var(--pt)); }
.ring-wrap { position: absolute; left: 50%; top: calc(402 * var(--pt)); width: calc(270 * var(--pt)); aspect-ratio: 1; translate: -50% -50%; }
.ring-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-wrap .track { fill: none; stroke: #DEE3ED; }
.ring-wrap .prog { fill: none; stroke-linecap: round; transition: stroke-dasharray .95s linear; }
.ring-wrap .glow { position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 calc(30 * var(--pt)) rgba(46, 189, 142, .16); }
.ring-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: calc(6 * var(--pt)); }
.ring-text .task { font-size: calc(16.5 * var(--pt)); font-weight: 600; color: #57536A; letter-spacing: -.005em; }
.ring-text .time { font-size: calc(72 * var(--pt)); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #24222F; font-variant-numeric: tabular-nums; }
.ring-text .mode { font-size: calc(14 * var(--pt)); font-weight: 600; color: #8C889B; }
.focus-run .companion { position: absolute; left: 0; right: 0; top: calc(562 * var(--pt)); text-align: center; font-size: calc(19 * var(--pt)); font-weight: 800; color: #4B4860; letter-spacing: -.01em; }
.ctl-row { position: absolute; left: 0; right: 0; bottom: calc(66 * var(--pt)); display: flex; justify-content: center; align-items: center; gap: calc(16.5 * var(--pt)); }
.ctl { display: grid; place-items: center; border-radius: 50%; transition: transform .3s var(--spring), background .3s; }
.ctl:hover { transform: scale(1.05); }
.ctl:active { transform: scale(.94); }
.ctl svg { width: 40%; height: 40%; }
.ctl-x { width: calc(57 * var(--pt)); height: calc(57 * var(--pt)); background: #E5E4E9; color: #4B505A; }
.ctl-main { width: calc(80 * var(--pt)); height: calc(80 * var(--pt)); background: #786CD2; color: #fff; box-shadow: 0 calc(10 * var(--pt)) calc(26 * var(--pt)) rgba(123,111,212,.35); }
.ctl-ok { width: calc(57 * var(--pt)); height: calc(57 * var(--pt)); background: #D0EADF; color: #1E5C4A; }
/* session complete — the 440 × 956 pt of 05_session_complete */
.done-ios { background: linear-gradient(180deg, #EEEDF8 0%, #F5F3F6 40%, #F7F5F1 100%); color: #26232F; }
.done-ios .dc-drop { position: absolute; left: 50%; top: calc(56 * var(--pt)); width: calc(210 * var(--pt)); height: calc(210 * var(--pt)); translate: -50% 0; }
.done-ios .dc-kick { position: absolute; top: calc(268 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(12 * var(--pt)); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #48445A; }
.done-ios .dc-mins { position: absolute; top: calc(292 * var(--pt)); left: 0; right: 0; display: flex; justify-content: center; align-items: baseline; gap: calc(8 * var(--pt)); }
.done-ios .dc-mins b { font-size: calc(80 * var(--pt)); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.done-ios .dc-mins span { font-size: calc(27 * var(--pt)); font-weight: 800; }
.done-ios .dc-line { position: absolute; top: calc(384 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(19.5 * var(--pt)); font-weight: 600; color: #4C4859; }
.done-ios .dc-chip { position: absolute; top: calc(424 * var(--pt)); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: calc(8 * var(--pt)); height: calc(36 * var(--pt)); padding: 0 calc(15 * var(--pt)) 0 calc(6 * var(--pt)); border-radius: 99px; background: #fff; font-size: calc(14.5 * var(--pt)); font-weight: 800; white-space: nowrap; box-shadow: 0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(40,30,90,.05); }
.done-ios .dc-chip i { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); border-radius: 50%; background: #FCE1E4; display: grid; place-items: center; color: #E4574E; }
.done-ios .dc-chip svg { width: 58%; height: 58%; }
.done-ios .dc-card { position: absolute; top: calc(484 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); height: calc(56 * var(--pt)); border-radius: calc(28 * var(--pt)); background: #fff; display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: 0 calc(18 * var(--pt)) 0 calc(20 * var(--pt)); font-size: calc(15.5 * var(--pt)); box-shadow: 0 calc(6 * var(--pt)) calc(18 * var(--pt)) rgba(40,30,90,.06); }
.done-ios .dc-card i { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: calc(9 * var(--pt)); background: #FFF6DD; display: grid; place-items: center; color: #B98A1C; }
.done-ios .dc-card i svg { width: 64%; height: 64%; }
.done-ios .dc-card b { flex: 1; font-weight: 800; }
.done-ios .dc-card span { font-weight: 600; font-size: calc(17 * var(--pt)); }
.done-ios .dc-card .chev { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.done-ios .dc-btn, .done-ios .dc-btn2 { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); height: calc(55 * var(--pt)); border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--pt)); font-size: calc(17.5 * var(--pt)); font-weight: 800; letter-spacing: -.01em; transition: transform .3s var(--spring); }
.done-ios .dc-btn:active, .done-ios .dc-btn2:active { transform: scale(.98); }
.done-ios .dc-btn { top: calc(663 * var(--pt)); background: #7064C8; color: #fff; box-shadow: 0 calc(8 * var(--pt)) calc(22 * var(--pt)) rgba(112, 100, 200, .3); }
.done-ios .dc-btn2 { top: calc(732 * var(--pt)); background: #E5E2EC; color: #2B2836; }
.done-ios .dc-btn svg, .done-ios .dc-btn2 svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.done-ios .dc-quiet { position: absolute; top: calc(812 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(17 * var(--pt)); font-weight: 800; color: #4C4859; }
.done-ios .dc-tabs { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(22 * var(--pt)); height: calc(60 * var(--pt)); border-radius: 99px; background: rgba(255,255,255,.88); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 calc(4 * var(--pt)); box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgba(40,30,90,.06); }
.done-ios .dc-tabs span { display: grid; justify-items: center; gap: calc(2 * var(--pt)); font-size: calc(11 * var(--pt)); font-weight: 600; color: #1E1B2E; height: calc(52 * var(--pt)); align-content: center; border-radius: 99px; }
.done-ios .dc-tabs span.on { background: #EFEDEB; color: #6B60B8; }
.done-ios .dc-tabs svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.drop-slot video, .drop-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* the deck demo, rebuilt on the 1.8 card */
.deck-ios { background: linear-gradient(180deg, #ECEAF7 0%, #F6F4F3 45%, #F6F3EF 100%); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.ios-home { position: absolute; left: 50%; bottom: calc(8 * var(--pt)); width: calc(140 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 9px; background: #1E1B2E; translate: -50% 0; opacity: .9; z-index: 6; }

/* ------------------------------------------------------------ Watch UI */
/* positions are the 211 × 257 pt of the 422 × 514 Watch captures */
.wos { position: absolute; inset: 0; background: #000; color: #fff; font-family: var(--font); overflow: hidden; }
.wos .clock { position: absolute; top: calc(18 * var(--pt)); right: calc(17 * var(--pt)); font-size: calc(16 * var(--pt)); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.wos .task { position: absolute; top: calc(42 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(12.5 * var(--pt)); font-weight: 600; color: #CFCBD9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 calc(14 * var(--pt)); }
.wos .wring { position: absolute; left: 50%; top: calc(119 * var(--pt)); width: calc(122 * var(--pt)); aspect-ratio: 1; translate: -50% -50%; }
.wos .wring svg { width: 100%; height: 100%; overflow: visible; }
.wos .wring .track { fill: none; stroke: #2B2645; }
.wos .wring .prog { fill: none; stroke: #8C7FE4; stroke-linecap: round; transition: stroke-dasharray .95s linear; }
.wos .wtime { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.wos .wtime b { font-size: calc(29 * var(--pt)); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.wos .wtime small { font-size: calc(8.5 * var(--pt)); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #A9A4B8; margin-top: calc(5 * var(--pt)); }
.wos .wctl { position: absolute; left: 0; right: 0; top: calc(207 * var(--pt)); translate: 0 -50%; display: flex; justify-content: center; align-items: center; gap: calc(11 * var(--pt)); }
.wos .wctl span { width: calc(39 * var(--pt)); height: calc(39 * var(--pt)); border-radius: 50%; display: grid; place-items: center; transition: transform .3s var(--spring); }
.wos .wctl button:hover span { transform: scale(1.06); }
.wos .wctl svg { width: 42%; height: 42%; }
.wos .wctl .x { background: #2A2724; color: #BDB8B2; }
.wos .wctl .p { width: calc(50 * var(--pt)); height: calc(50 * var(--pt)); background: var(--violet); }
.wos .wctl .ok { background: #2EBD8E; }
.wos-start .ws-kick { position: absolute; top: calc(57 * var(--pt)); left: calc(6 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9C90F0; }
.wos-start .ws-task { position: absolute; top: calc(80 * var(--pt)); left: calc(6 * var(--pt)); font-size: calc(12.5 * var(--pt)); font-weight: 600; color: #C9C5D2; white-space: nowrap; }
.wos-start .ws-row { position: absolute; left: calc(6 * var(--pt)); right: calc(6 * var(--pt)); height: calc(55 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #1C1A1A;
  display: flex; align-items: center; gap: calc(14 * var(--pt)); padding: 0 calc(16 * var(--pt)); text-align: left; transition: background .2s, transform .3s var(--spring); }
.wos-start .ws-row:hover { background: #2A2633; }
.wos-start .ws-row:active { transform: scale(.97); }
.wos-start .ws-row svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); color: #8F83EA; flex: none; }
.wos-start .ws-row b { display: block; font-size: calc(15.5 * var(--pt)); font-weight: 700; line-height: 1.15; }
.wos-start .ws-row small { display: block; font-size: calc(13 * var(--pt)); color: #9A96A2; font-weight: 600; }
.wos-start .ws-row:nth-of-type(1) { top: calc(106 * var(--pt)); }
.wos-start .ws-row:nth-of-type(2) { top: calc(169 * var(--pt)); }
.wos-start .ws-row:nth-of-type(3) { top: calc(232 * var(--pt)); }
.wos-done .wd-kick { position: absolute; top: calc(57 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(12.5 * var(--pt)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #F2C14E; }
.wos-done .wd-row { position: absolute; top: calc(82 * var(--pt)); left: 0; right: 0; height: calc(80 * var(--pt)); display: flex; justify-content: center; align-items: center; gap: calc(2 * var(--pt)); }
.wos-done .wd-row b { font-size: calc(36 * var(--pt)); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wos-done .drop-slot { position: relative; width: calc(78 * var(--pt)); height: calc(78 * var(--pt)); margin-top: calc(-8 * var(--pt)); }
.wos-done .wd-sub { position: absolute; top: calc(172 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(8.5 * var(--pt)); letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #A9A4B8; }
.wos-done .wd-btn { position: absolute; left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); top: calc(191 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 99px; background: var(--violet); font-size: calc(15 * var(--pt)); font-weight: 800; color: #fff; }
.wos-done .wd-btn2 { position: absolute; left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); top: calc(238 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 99px; background: #1F1B1A; color: #8F83EA; font-size: calc(15 * var(--pt)); font-weight: 800; display: grid; place-items: center; }

/* ------------------------------------------------------------- Mac UI */
.mac-desk {
  position: absolute; inset: 0; color: #fff; font-family: var(--font);
  background:
    radial-gradient(60% 60% at 18% 100%, rgba(108, 82, 214, .75), transparent 70%),
    radial-gradient(50% 50% at 92% 88%, rgba(204, 120, 170, .35), transparent 70%),
    radial-gradient(70% 60% at 60% 30%, rgba(60, 44, 130, .5), transparent 75%),
    linear-gradient(180deg, #120F26 0%, #1C1740 55%, #2A2160 100%);
}
.mac-desk .menubar { position: absolute; top: 0; left: 0; right: 0; height: calc(37 * var(--pt)); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(18 * var(--pt)); font-size: calc(13.5 * var(--pt)); font-weight: 600; background: rgba(20, 16, 40, .42);
  color: rgba(255,255,255,.92); z-index: 3; } /* no backdrop blur: at the screen's edge it samples the page behind the bezel */
.menubar .ml, .menubar .mr { display: flex; align-items: center; gap: calc(20 * var(--pt)); white-space: nowrap; }
.menubar .ml b { font-weight: 800; }
.menubar svg { height: calc(15 * var(--pt)); width: auto; }
.menubar .fd { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); font-variant-numeric: tabular-nums; font-weight: 700;
  padding: calc(2 * var(--pt)) calc(8 * var(--pt)); border-radius: calc(6 * var(--pt)); transition: background .4s; }
.menubar .fd.on { background: rgba(123, 111, 212, .45); }
.menubar .fd i { width: calc(9 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #A79CF0; }
.mac-desk .notch { position: absolute; z-index: 6; top: 0; left: 50%; translate: -50% 0; width: calc(185 * var(--pt)); height: calc(32 * var(--pt));
  background: #000; border-radius: 0 0 calc(10 * var(--pt)) calc(10 * var(--pt)); }
.mac-desk .win { /* a dimmed document window, so the island sits over "work" */
  position: absolute; left: 8%; top: 20%; width: 52%; height: 68%; border-radius: calc(14 * var(--pt));
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 calc(30 * var(--pt)) calc(60 * var(--pt)) rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); overflow: hidden; }
.mac-desk .win::before { content: ""; position: absolute; left: calc(16 * var(--pt)); top: calc(16 * var(--pt)); width: calc(52 * var(--pt)); height: calc(12 * var(--pt));
  background: radial-gradient(circle at calc(6 * var(--pt)) 50%, #FF6159 calc(6 * var(--pt)), transparent calc(6.5 * var(--pt))),
              radial-gradient(circle at calc(26 * var(--pt)) 50%, #FFBD2E calc(6 * var(--pt)), transparent calc(6.5 * var(--pt))),
              radial-gradient(circle at calc(46 * var(--pt)) 50%, #28C840 calc(6 * var(--pt)), transparent calc(6.5 * var(--pt))); opacity: .75; }
.mac-desk .win i { position: absolute; left: 12%; height: calc(11 * var(--pt)); border-radius: 6px; background: rgba(255,255,255,.14); }
/* the windows behind the island hold real work, not grey bars */
.mac-desk .doc::before { display: none; }
.mac-desk .doc .wbar { display: flex; align-items: center; justify-content: center; position: relative; height: calc(40 * var(--pt)); border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: calc(13 * var(--pt)); color: rgba(255,255,255,.75); font-weight: 700; }
.mac-desk .doc .lights { position: absolute; left: calc(16 * var(--pt)); top: 50%; translate: 0 -50%; width: calc(52 * var(--pt)); height: calc(12 * var(--pt));
  background: radial-gradient(circle at calc(6 * var(--pt)) 50%, #FF6159 calc(6 * var(--pt)), transparent calc(6.5 * var(--pt))),
              radial-gradient(circle at calc(26 * var(--pt)) 50%, #FFBD2E calc(6 * var(--pt)), transparent calc(6.5 * var(--pt))),
              radial-gradient(circle at calc(46 * var(--pt)) 50%, #28C840 calc(6 * var(--pt)), transparent calc(6.5 * var(--pt))); opacity: .8; }
.mac-desk .doc .wbody { padding: calc(30 * var(--pt)) calc(40 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: 1.55; color: rgba(255,255,255,.78); font-weight: 500; }
.mac-desk .doc .wbody p { margin: 0 0 calc(14 * var(--pt)); }
.mac-desk .doc .wbody .d-sub { font-size: calc(21 * var(--pt)); font-weight: 800; color: #fff; letter-spacing: -.01em; }
.mac-desk .doc .wbody ul { margin: 0; padding-left: calc(20 * var(--pt)); }
.mac-desk .doc .wbody li { margin-bottom: calc(6 * var(--pt)); }
.mac-desk .doc .caret { display: inline-block; width: calc(2 * var(--pt)); height: calc(20 * var(--pt)); margin-left: calc(2 * var(--pt)); vertical-align: middle; background: #A79CF0; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mac-desk .doc.win2 .wbody { padding: calc(18 * var(--pt)) calc(24 * var(--pt)); font-size: calc(15 * var(--pt)); }
.mac-desk .doc.win2 .wbody .d-sub { font-size: calc(17 * var(--pt)); }
.mac-desk .win2 { left: auto; right: 6%; top: 46%; width: 30%; height: 40%; }
.mac-desk .dock { position: absolute; bottom: calc(8 * var(--pt)); left: 50%; translate: -50% 0; display: flex; gap: calc(10 * var(--pt)); padding: calc(9 * var(--pt));
  border-radius: calc(22 * var(--pt)); background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.mac-desk .dock i { width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); border-radius: calc(13 * var(--pt)); background: rgba(255,255,255,.18); }
.mac-desk .dock i:nth-child(1) { background: linear-gradient(160deg, #6AB7FF, #2F6BE5); }
.mac-desk .dock i:nth-child(2) { background: linear-gradient(160deg, #FDFDFD, #D9D9DE); }
.mac-desk .dock i:nth-child(3) { background: linear-gradient(160deg, #FFD36A, #F59E27); }
.mac-desk .dock i:nth-child(4) { background: linear-gradient(160deg, #75E089, #26B44A); }
.mac-desk .dock i:nth-child(5) { background: linear-gradient(160deg, #F8F7F6, #E7E5E1); }
.mac-desk .dock i:nth-child(6) { background: linear-gradient(160deg, #A7A0F0, #6E61D0); }

/* the island: one black shape hanging from the notch (680 × 274 in the app,
   drawn larger here the way the app's own store shots do) */
.isl {
  --s: 1.32;
  position: absolute; z-index: 5; top: 0; left: 50%; translate: -50% 0;
  width: calc(680 * var(--s) * var(--pt)); height: calc(274 * var(--s) * var(--pt));
  background: linear-gradient(180deg, #000 0%, #06050A 45%, #0D0B14 100%);
  border-radius: 0 0 calc(30 * var(--s) * var(--pt)) calc(30 * var(--s) * var(--pt));
  box-shadow: 0 calc(24 * var(--pt)) calc(60 * var(--pt)) rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.08), inset 1px 0 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(255,255,255,.04);
  transition: width .6s var(--spring), height .6s var(--spring), border-radius .6s var(--spring);
  overflow: hidden; color: #fff;
  --u: calc(var(--s) * var(--pt));
}
.isl.wings { width: calc(300 * var(--s) * var(--pt)); height: calc(36 * var(--s) * var(--pt)); border-radius: 0 0 calc(14 * var(--s) * var(--pt)) calc(14 * var(--s) * var(--pt)); }
.isl .pane { position: absolute; inset: 0; padding: calc(22 * var(--u)) calc(28 * var(--u)); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.isl .pane.on { opacity: 1; pointer-events: auto; transition-delay: .18s; }
.isl.wings .pane { opacity: 0 !important; pointer-events: none !important; transition-delay: 0s; }
.isl .wing { position: absolute; top: 0; height: calc(36 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); opacity: 0; transition: opacity .3s; font-weight: 800; font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums; }
.isl .wing-l { left: calc(16 * var(--u)); }
.isl .wing-r { right: calc(16 * var(--u)); color: #CFC8FF; }
.isl.wings .wing { opacity: 1; transition-delay: .3s; }
.isl .wing-l i { width: calc(12 * var(--u)); height: calc(16 * var(--u)); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #A79CF0; }
.isl .wing-r svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }

.isl .tabs { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.isl .tab { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: 99px; font-size: calc(14 * var(--u)); font-weight: 800; color: rgba(255,255,255,.55); transition: background .25s, color .25s; }
.isl .tab svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.isl .tab small { font-size: calc(12 * var(--u)); color: rgba(255,255,255,.4); font-weight: 700; }
.isl .tab.on { background: rgba(255,255,255,.1); color: #fff; }
.isl .tab:hover { color: #fff; }
.isl .tabs .sp { flex: 1; }
.isl .ibtn { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.isl .ibtn svg { width: 50%; height: 50%; }
/* the Focus card is 244 pt wide in Mac 1.0 (5), about 1.4 : 1, with open space before the dial */
.isl .grid2 { display: grid; grid-template-columns: calc(244 * var(--u)) calc(190 * var(--u)); justify-content: space-between; gap: calc(18 * var(--u)); margin-top: calc(14 * var(--u)); }
.isl .card { position: relative; border-radius: calc(16 * var(--u)); background: linear-gradient(180deg, #24212C, #1D1A24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  padding: calc(16 * var(--u)) calc(18 * var(--u)); height: calc(160 * var(--u)); }
.isl .card::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: calc(-7 * var(--u)); height: calc(10 * var(--u)); border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u)); background: #16141C; z-index: -1; box-shadow: inset 0 -1px 0 rgba(255,255,255,.05); }
.isl .kick { font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.isl .ttl { font-size: calc(25 * var(--u)); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin-top: calc(6 * var(--u)); }
.isl .meta { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(9 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 700; color: rgba(255,255,255,.7); }
.isl .meta i { width: calc(3 * var(--u)); height: calc(13 * var(--u)); border-radius: 3px; background: var(--violet); }
.isl .acts { display: flex; gap: calc(22 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 800; color: rgba(255,255,255,.88); }
.isl .acts span { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
.isl .acts svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.isl .dialbox { display: grid; justify-items: center; align-content: start; gap: calc(8 * var(--u)); margin-top: calc(-6 * var(--u)); }
.isl .dial { position: relative; width: calc(124 * var(--u)); aspect-ratio: 1; touch-action: none; cursor: grab; }
.isl .dial:active { cursor: grabbing; }
.isl .dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.isl .dial .face { fill: #0F0D16; stroke: #1F1C29; }
.isl .dial .tick { stroke: rgba(255,255,255,.35); stroke-linecap: round; }
.isl .dial .arc { fill: none; stroke: url(#dialGrad); stroke-linecap: round; }
.isl .dial .knob { fill: #EDEAFB; filter: drop-shadow(0 0 4px rgba(167, 156, 240, .9)); }
.isl .dial .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.isl .dial .val b { font-size: calc(40 * var(--u)); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.isl .dial .val small { font-size: calc(11.5 * var(--u)); font-weight: 700; color: rgba(255,255,255,.7); margin-top: calc(2 * var(--u)); }
.isl .start { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); width: calc(176 * var(--u)); height: calc(36 * var(--u)); border-radius: 99px;
  background: var(--violet); font-size: calc(14.5 * var(--u)); font-weight: 800; color: #fff; box-shadow: 0 0 calc(22 * var(--u)) rgba(123, 111, 212, .55); transition: transform .3s var(--spring), background .2s; }
.isl .start:hover { background: #8578DB; transform: scale(1.03); }
.isl .start svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.isl .open { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 800; color: rgba(255,255,255,.8); }
.isl .open svg { width: calc(18 * var(--u)); height: calc(10 * var(--u)); }
/* running */
.isl .run { display: grid; grid-template-columns: 1fr calc(170 * var(--u)); height: 100%; align-items: center; }
/* while a session runs the task keeps the card's title size, with its category and effort under it */
.isl .run .rt { font-size: calc(25 * var(--u)); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: #fff; align-self: center; max-width: calc(330 * var(--u)); }
.isl .run .rmeta { margin-top: calc(10 * var(--u)); }
.isl .park { margin-top: calc(18 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 99px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(245, 201, 99, .55); font-size: calc(13 * var(--u)); font-weight: 700; color: rgba(255,255,255,.88); width: 92%; opacity: 0; translate: 0 6px; transition: opacity .4s, translate .5s var(--spring); }
.isl .park.on { opacity: 1; translate: 0 0; }
.isl .park svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--gold); }
.isl .park input { all: unset; flex: 1; font: inherit; color: #fff; min-width: 0; }
.isl .park input::placeholder { color: rgba(255,255,255,.45); }
.isl .rring { position: relative; width: calc(122 * var(--u)); aspect-ratio: 1; justify-self: center; }
.isl .rring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.isl .rring .track { fill: none; stroke: #1E1B2A; }
.isl .rring .prog { fill: none; stroke: var(--violet); stroke-linecap: round; transition: stroke-dasharray .95s linear; }
.isl .rring .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.isl .rring .val b { font-size: calc(32 * var(--u)); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.isl .rring .val small { font-size: calc(11.5 * var(--u)); font-weight: 700; color: rgba(255,255,255,.6); margin-top: calc(4 * var(--u)); }
.isl .rctl { display: flex; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.isl .rctl span { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.isl .rctl span svg { width: 46%; height: 46%; }
.isl .rctl .p { width: calc(40 * var(--u)); height: calc(40 * var(--u)); background: var(--violet); box-shadow: none; color: #fff; margin-top: calc(-5 * var(--u)); }
.isl .rctl .ok { color: #3FD3A0; box-shadow: inset 0 0 0 1px rgba(63, 211, 160, .4); }
.isl .rtop { position: absolute; top: calc(12 * var(--u)); right: calc(20 * var(--u)); display: flex; gap: calc(8 * var(--u)); }
/* done */
.isl .donep { display: grid; grid-template-columns: 1fr calc(190 * var(--u)); height: 100%; }
.isl .donep h4, .isl .donep .h4 { margin: calc(12 * var(--u)) 0 0; font-size: calc(19 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.isl .donep p { margin: calc(5 * var(--u)) 0 0; font-size: calc(13 * var(--u)); color: rgba(255,255,255,.7); font-weight: 600; }
.isl .donep .xp { margin-top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; color: rgba(255,255,255,.45); }
.isl .donep .xp s { text-decoration-thickness: 1.5px; }
.isl .donep .xp b { color: var(--gold); font-weight: 800; }
.isl .donep .xp svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #3FD3A0; }
.isl .donep .drop-slot { position: relative; justify-self: center; width: calc(150 * var(--u)); height: calc(150 * var(--u)); margin-top: calc(-24 * var(--u)); }
.isl .donep .drop-slot video, .isl .donep .drop-slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.isl .donep .breath { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); width: calc(176 * var(--u)); height: calc(34 * var(--u)); border-radius: 99px; background: var(--violet); font-size: calc(14 * var(--u)); font-weight: 800; justify-self: center; }
/* today lineup */
.isl .lineup { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.isl .lu { border-radius: calc(14 * var(--u)); background: #1E1B25; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: calc(10 * var(--u)) calc(12 * var(--u)); height: calc(124 * var(--u)); position: relative; }
.isl .lu.now { background: linear-gradient(180deg, #2A2547, #1F1B33); box-shadow: inset 0 0 0 1px rgba(123,111,212,.5); }
.isl .lu .k { display: flex; justify-content: space-between; font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.isl .lu.now .k { color: #A79CF0; }
.isl .lu .t { display: flex; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 800; line-height: 1.2; }
.isl .lu .t::before { content: ""; flex: none; width: calc(3 * var(--u)); border-radius: 3px; background: var(--c, var(--violet)); }
.isl .lu .m { position: absolute; left: calc(12 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: rgba(255,255,255,.65); }
.isl .lu .pl { position: absolute; right: calc(10 * var(--u)); bottom: calc(8 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: var(--violet); display: grid; place-items: center; }
.isl .lu .pl svg { width: 40%; height: 40%; }
.isl .lu.cal { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); border: 0; outline: 1px dashed rgba(255,255,255,.18); outline-offset: -1px; }
.isl .sec-h { display: flex; align-items: end; justify-content: space-between; margin-top: calc(14 * var(--u)); }
.isl .sec-h h4, .isl .sec-h .h4 { margin: 0; font-size: calc(18 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.isl .sec-h p { margin: calc(2 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: rgba(255,255,255,.6); font-weight: 700; }
.isl .chipbtn { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: calc(12.5 * var(--u)); font-weight: 800; }
.isl .chipbtn svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
/* habits */
.isl .habits { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.isl .hb { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #1C1A22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); cursor: pointer; }
.isl .hb .o { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); display: grid; place-items: center; margin-top: calc(1 * var(--u)); transition: background .25s, box-shadow .25s; }
.isl .hb .o svg { width: 70%; height: 70%; opacity: 0; color: #fff; }
.isl .hb b { display: block; font-size: calc(13.5 * var(--u)); font-weight: 800; }
.isl .hb small { display: block; font-size: calc(11.5 * var(--u)); color: rgba(255,255,255,.55); font-weight: 700; margin-top: calc(2 * var(--u)); }
.isl .hb.done .o { background: var(--mint); box-shadow: none; }
.isl .hb.done .o svg { opacity: 1; }
.isl .hb.done b { text-decoration: line-through; color: rgba(255,255,255,.5); }

/* ------------------------------------------------------------ sections */
.proof { padding: 6px 0 6px; }
.proof-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.proof-item { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-1); }
.proof-item svg { width: 22px; height: 22px; color: var(--violet); flex: none; }
.proof-item b { display: block; font-size: 15px; font-weight: 800; line-height: 1.1; }
.proof-item small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }

/* at a glance: what the product is, in one definition and a few facts, under the hero */
.glance { position: relative; padding-block: clamp(56px, 8vw, 104px); background: var(--paper); }
.glance-inner { max-width: 860px; display: grid; justify-items: center; gap: 18px; text-align: center; }
.glance-def { margin: 0; max-width: 60ch; font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.glance .facts { margin-top: 14px; }
.glance-note { margin: 6px 0 0; max-width: 68ch; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink-3); text-wrap: pretty; }
/* the facts: small cards, three across (two on tablets); on phones one card of rows */
.facts { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
.facts > div { display: grid; gap: 4px; align-content: start; padding: 16px 18px 17px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-1); }
.facts dt { font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600); }
.facts dd { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 700; color: var(--ink); text-wrap: pretty; }
.facts dd a { color: var(--violet-600); font-weight: 800; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
  .facts > div { grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 16px; border-radius: 0; background: none; box-shadow: none; }
  .facts > div + div { border-top: 1px solid var(--line); }
  .facts dt { font-size: 11.5px; letter-spacing: .1em; }
  .facts dd { font-size: 15px; }
}
/* on a dark band */
.band-night .glance-def { color: #fff; }
.band-night .glance-note { color: rgba(255,255,255,.66); }
.band-night .facts > div { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.band-night .facts dt { color: #B4AAF5; }
.band-night .facts dd { color: #fff; }
.band-night .facts dd a { color: #CFC8FF; }
@media (max-width: 520px) {
  .band-night .facts { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
  .band-night .facts > div { background: none; box-shadow: none; }
  .band-night .facts > div + div { border-top-color: rgba(255,255,255,.09); }
}

/* the day rail */
.day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 90px); align-items: center; margin-top: clamp(40px, 6vw, 72px); }
.day-list { display: grid; gap: 6px; }
.moment { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 6px 16px; text-align: left; padding: 18px 20px 18px 18px; border-radius: 22px; transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.moment:hover { background: rgba(255,255,255,.6); }
.moment .when { font-weight: 800; font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 3px; }
.moment .where { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.moment h3, .moment .h3 { grid-column: 2; font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink-2); transition: color .3s; }
.moment p { grid-column: 2; margin: 0; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.moment .bar { position: absolute; left: 18px; right: 20px; bottom: 8px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s; }
.moment .bar i { display: block; height: 100%; width: 0; background: var(--violet); border-radius: inherit; }
.moment[aria-selected="true"] { background: #fff; box-shadow: var(--shadow-1); }
.moment .h3 { line-height: inherit; } /* a <span class="h3"> (a heading can't sit in a tab button) keeps the button's line height, like the h3 did */
.moment[aria-selected="true"] h3, .moment[aria-selected="true"] .h3 { color: var(--ink); }
.moment[aria-selected="true"] .when { color: var(--violet-600); }
.moment[aria-selected="true"] p { max-height: 180px; opacity: 1; margin-top: 4px; }
.moment[aria-selected="true"] .bar { opacity: 1; }
.day-stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 40%, #fff 0%, rgba(255,255,255,0) 70%), linear-gradient(160deg, #E8E2FB, #F7E7EF); }
.day-stage .sky { position: absolute; inset: 0; transition: background 1s var(--ease); }
.day-stage .scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; }
.day-stage .scene.on { opacity: 1; transform: none; pointer-events: auto; }
.day-stage .scene .dev-iphone { width: 39%; }
.day-stage .scene .dev-watch { width: 34%; }
.day-stage .scene .dev-macbook { width: 92%; }
.day-stage .scene .dev-iphone-land { width: 88%; }
.day-stage .sun { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; left: 10%; top: 12%; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 236, 190, .95) 0%, rgba(250, 214, 150, .55) 22%, rgba(250, 214, 150, 0) 62%); transition: left 1.2s var(--ease), top 1.2s var(--ease); pointer-events: none; }

/* bento: what's new */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.tile { position: relative; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); padding: 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 340px; isolation: isolate; }
.tile .h3 { font-size: 23px; }
.tile .body { max-width: 46ch; }
.tile .media { margin-top: auto; position: relative; }
.tl-plan { grid-column: span 3; grid-row: span 2; background: linear-gradient(170deg, #fff 30%, #F1EDFC); }
.tl-land { grid-column: span 3; grid-row: span 2; background: linear-gradient(170deg, #fff 20%, #EEF7F6); }
.tl-dial { grid-column: span 2; }
.tl-cal { grid-column: span 2; }
.tl-streak { grid-column: span 2; }
.tl-drop { grid-column: span 3; background: linear-gradient(170deg, #fff 30%, #F8EEF5); }
.tl-sound { grid-column: span 3; }
.tl-plan .media { display: flex; justify-content: center; margin-bottom: -150px; }
.tl-plan .media .dev-iphone { width: min(62%, 330px); }
.tl-land .media { margin: 10px -10px -10px; }
.faces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.face-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 800; color: var(--ink-2); background: var(--violet-50); box-shadow: inset 0 0 0 1px var(--violet-100); transition: background .25s, color .25s, box-shadow .25s; }
.face-btn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.face-btn .pro, .face-btn .free { margin: 0; font-size: 10px; padding: 2px 6px; }
.face-btn[aria-pressed="true"] .free { background: rgba(255,255,255,.18); color: #A8F0D2; }
.face-btn[aria-pressed="true"] .pro { background: rgba(255,255,255,.18); color: #FFE29B; }
.mini-dial { position: relative; width: 210px; aspect-ratio: 1; margin: 6px auto 0; touch-action: none; cursor: grab; }
.mini-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-dial .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.mini-dial .val b { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mini-dial .val small { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.mini-dial .hint { position: absolute; left: 50%; bottom: -10px; translate: -50% 100%; font-size: 13px; font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.tl-cal .media img, .tl-streak .media img { border-radius: 18px; box-shadow: var(--shadow-1); }
.crop-shot { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(42, 36, 64, .35); aspect-ratio: 1 / .78; background: #F4F2F6; }
.crop-shot img { position: absolute; width: 100%; height: auto; left: 0; }
.tl-cal .media, .tl-streak .media { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
.tl-drop { flex-direction: row; align-items: center; gap: 20px; }
.tl-drop .txt { flex: 1; display: grid; gap: 10px; }
.tl-drop .drop-box { width: 46%; flex: none; aspect-ratio: 1; position: relative; margin: -20px -10px -30px 0; }
.tl-sound .waves { display: flex; align-items: center; gap: 4px; height: 70px; margin-top: auto; }
/* the bars grow with scale, not height: no layout every frame (the inline --h values are percentages, which scale accepts) */
.tl-sound .waves i { flex: 1; align-self: stretch; border-radius: 4px / 6px; background: linear-gradient(180deg, var(--violet), var(--pink)); scale: 1 .2; animation: wave 1.8s ease-in-out infinite; opacity: .85; }
@keyframes wave { 50% { scale: 1 var(--h, 80%); } }
.sound-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sound-chips span { padding: 6px 12px; border-radius: 99px; background: var(--violet-50); font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.also { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.also .item { display: flex; gap: 14px; padding: 20px 22px; border-radius: 22px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line); }
.also .item svg { flex: none; width: 22px; height: 22px; color: var(--violet); margin-top: 2px; }
.also b { font-weight: 800; }
.also p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* the Mac band */
.band-night { border-radius: 50% 50% 50% 50% / clamp(28px, 6vw, 96px) clamp(28px, 6vw, 96px) clamp(28px, 6vw, 96px) clamp(28px, 6vw, 96px); background: radial-gradient(70% 50% at 20% 0%, #2B2363 0%, transparent 70%), radial-gradient(60% 50% at 100% 100%, #3A2453 0%, transparent 70%), var(--night); color: #fff; }
.band-night .lede, .band-night .body { color: rgba(255,255,255,.72); }
.band-night .eyebrow { color: #B4AAF5; }
.mac-wrap { display: grid; gap: clamp(36px, 5vw, 60px); }
.mac-hero { position: relative; width: min(1060px, 100%); margin: 0 auto; }
.mac-hero .isl { --s: 1.5; }
.mac-tip { position: absolute; z-index: 10; top: -12px; left: 50%; translate: -50% -100%; font-size: 13.5px; font-weight: 800; color: #DCD6FF; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.mac-tip kbd { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.mac-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dark-card { border-radius: var(--r-lg); padding: 26px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); display: grid; gap: 10px; align-content: start; }
.dark-card .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(123, 111, 212, .22); color: #C9C1FF; }
.dark-card .ic svg { width: 22px; height: 22px; }
.dark-card p { margin: 0; color: rgba(255,255,255,.7); }
.dark-card kbd { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.honest { margin: 0; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: rgba(255,255,255,.66); font-size: 15px; }
.honest b { color: #fff; }

/* watch band */
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.watch-stage { position: relative; display: grid; place-items: center; padding: 20px 0; }
.watch-stage .dev-watch { width: min(300px, 64%); }
.watch-stage .halo { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(123, 111, 212, .32), transparent 65%); filter: blur(10px); }
.seg { display: inline-flex; padding: 5px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-1); gap: 2px; flex-wrap: wrap; }
.seg button { padding: 10px 16px; border-radius: 99px; font-size: 14.5px; font-weight: 800; color: var(--ink-2); transition: background .25s, color .25s; }
.seg button[aria-selected="true"] { background: var(--ink); color: #fff; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; color: var(--ink-2); }
.checks li svg { flex: none; width: 22px; height: 22px; color: var(--mint); margin-top: 1px; }
.checks b { color: var(--ink); }

/* Drop */
.meet { background: linear-gradient(180deg, var(--paper), #F2EDFC 40%, #F7E9F1 100%); overflow: clip; }
.meet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.drop-stage { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin: 0 auto; }
.drop-stage .platform { position: absolute; left: -12%; right: -12%; bottom: 0; }
.drop-stage .drop-player { position: absolute; left: 12%; right: 12%; top: 4%; bottom: 12%; cursor: pointer; }
.drop-player { position: relative; aspect-ratio: 1; }
.drop-player video, .drop-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.drop-player video { opacity: 0; }
.drop-player video.on { opacity: 1; }
.drop-player .still { transition: opacity .12s; }
.drop-player.playing .still { opacity: 0; }
.emotes { display: flex; flex-wrap: wrap; gap: 10px; }
.emote { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 8px; border-radius: 99px; background: #fff; box-shadow: var(--shadow-1); font-weight: 800; font-size: 15px; transition: transform .35s var(--spring), box-shadow .3s; }
.emote img { width: 34px; height: 34px; border-radius: 50%; background: var(--violet-50); object-fit: cover; object-position: 50% 30%; }
.emote:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.emote:active { transform: scale(.96); }
.emote[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--violet), var(--shadow-1); }
.drop-say { min-height: 3.2em; font-size: 15px; color: var(--ink-3); font-weight: 700; }

/* deck demo */
.deck-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.deck-phone { width: min(360px, 82%); margin: 0 auto; }
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.key { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-1); }
.key kbd { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; font-size: 15px; }
.key b { display: block; font-weight: 800; }
.key small { display: block; font-size: 13.5px; color: var(--ink-3); font-weight: 700; }
.deck-log { margin-top: 16px; min-height: 26px; font-size: 15px; font-weight: 700; color: var(--violet-600); }

/* features */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.feat { padding: 26px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); display: grid; gap: 10px; align-content: start; }
.feat .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet); }
.feat .ic svg { width: 22px; height: 22px; }
.feat .ic.mint { background: #E3F6EE; color: #1F9C72; }
.feat .ic.gold { background: #FFF4D6; color: #B7861B; }
.feat .ic.pink { background: #FCE8F0; color: #C4567F; }
.feat .ic.cyan { background: #E2F5F7; color: #2A98A3; }
.feat p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* compare */
.compare-h { margin-top: clamp(56px, 7vw, 88px); text-align: center; }
.compare { margin-top: 24px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.compare thead th { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.compare thead th.us { color: var(--violet-600); }
.compare td:first-child { font-weight: 800; color: var(--ink); width: 34%; }
.compare td { color: var(--ink-2); }
.compare td.us { background: var(--violet-50); color: var(--ink); font-weight: 700; }
.compare tr:last-child td { border-bottom: 0; }
.yes { color: #147A58; font-weight: 800; }
.no { color: var(--ink-3); }

/* privacy */
.privacy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 56px); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); align-items: stretch; }
.plan { position: relative; padding: 30px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 14px; }
.plan .name { font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.plan .price { font-weight: 800; font-size: 46px; letter-spacing: -.04em; line-height: 1; }
.plan .price small { font-size: 16px; color: var(--ink-3); letter-spacing: 0; font-weight: 700; }
.plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; color: var(--ink-2); font-size: 15.5px; }
.plan li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--violet-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B6FD4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan .btn { margin-top: auto; }
.plan-best { background: radial-gradient(60% 50% at 100% 0%, rgba(232, 140, 174, .35), transparent 70%), linear-gradient(165deg, #5B4EC2, #6A5BC8 55%, #7464C9); color: #fff; box-shadow: 0 30px 60px -24px rgba(110, 97, 208, .7); }
.plan-best .name, .plan-best .price small { color: rgba(255,255,255,.86); }
.plan-best li { color: rgba(255,255,255,.92); }
.plan-best li::before { background-color: rgba(255,255,255,.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.plan-best .btn { --bg: #fff; --fg: var(--violet-700); }
.ribbon { position: absolute; top: 18px; right: 18px; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plan-note { margin: 22px auto 0; max-width: 720px; text-align: center; font-size: 14px; color: var(--ink-3); }

/* faq */
.faq { max-width: 860px; margin: clamp(36px, 5vw, 56px) auto 0; display: grid; gap: 10px; }
.faq details { border-radius: 22px; background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 26px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
/* the question as a heading (<summary><h3 class="faq-q">…</h3></summary>) looks exactly like the summary text did */
.faq-q, summary > h3.faq-q { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-wrap: inherit; text-transform: inherit; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--violet-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B6FD4' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat; transition: rotate .35s var(--spring); }
.faq details[open] summary::after { rotate: 45deg; }
.faq .a { padding: 0 26px 22px; color: var(--ink-2); display: grid; gap: 12px; }
.faq .a p { margin: 0; }
.faq .a a { color: var(--violet-600); font-weight: 800; }

/* final */
.final { position: relative; overflow: clip; text-align: center; padding-top: clamp(90px, 12vw, 150px);
  background: linear-gradient(180deg, var(--paper) 0%, #EAE3FB 40%, var(--sky-1) 100%); }
.final .section-head { margin-inline: auto; justify-items: center; max-width: 1100px; }
.final-scene { position: relative; width: min(860px, 100% - 2 * var(--gutter)); margin: clamp(40px, 6vw, 70px) auto 0; padding-bottom: clamp(36px, 5vw, 64px); }
.final-scene .row { --span: 320; --gap: 16; position: relative; z-index: 2; }
.final-scene .f-drop { width: calc(64 * var(--mm)); margin-right: calc(4 * var(--mm)); }
.final-scene.final-mac { width: min(1000px, 100% - 2 * var(--gutter)); }
.final-scene.final-mac .row { --span: 500; }
.final-scene.final-mac .f-drop { width: calc(84 * var(--mm)); margin: 0; }
.final-scene .cloud-bank { position: absolute; z-index: 1; left: -40%; width: 180%; bottom: 0; pointer-events: none; }
.final-scene .f-puff { position: absolute; z-index: 0; width: 26%; right: -8%; top: 0; animation: drift 40s linear infinite alternate; }

/* footer */
.footer { background: var(--sky-1); padding: 0 0 36px; color: var(--ink); }
.footer-card { border-radius: var(--r-xl); background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.footer-card p { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; max-width: 34ch; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.footer-col a { font-weight: 700; color: var(--ink-2); font-size: 15px; }
.footer-col a:hover { color: var(--violet-600); }
.footer-legal { margin: 14px 0 0; padding: 0 8px; max-width: 980px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; padding: 0 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.footer-bottom a { font-weight: 800; }
.footer-bottom a:hover { color: var(--violet-600); }

/* 404: a calm sky, Drop puzzled, and the five places worth going */
.nf { padding-bottom: clamp(64px, 9vw, 120px); }
.nf-copy { display: grid; justify-items: center; text-align: center; gap: 16px; max-width: 720px; }
.nf-copy .nf-drop { width: clamp(120px, 14vw, 168px); height: auto; margin-bottom: -6px; }
.nf-copy .eyebrow { margin: 0; color: var(--violet-700); }
.nf-copy .lede { max-width: 56ch; }
.nf-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: clamp(36px, 5vw, 56px) auto 0; }
.nf-card { grid-column: span 2; display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1); transition: transform .35s var(--spring), box-shadow .3s var(--ease); }
.nf-card:nth-child(4) { grid-column: 2 / span 2; }
.nf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.nf-card .ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet); }
.nf-card .ic svg { width: 21px; height: 21px; }
.nf-card .ic.mint { background: #E3F6EE; color: #1F9C72; }
.nf-card .ic.pink { background: #FCE8F0; color: #C4567F; }
.nf-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
.nf-card b { font-size: 16.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.nf-card small { font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--ink-2); }
.nf-card .tag { display: inline-block; margin-left: 0; padding: 2px 8px; border-radius: 99px; vertical-align: .12em; background: var(--violet-100); color: var(--violet-700); font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.nf-store { display: grid; justify-items: center; gap: 10px; margin-top: clamp(36px, 5vw, 52px); text-align: center; }
.nf-store p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
@media (max-width: 900px) {
  .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-card, .nf-card:nth-child(4) { grid-column: auto; }
  .nf-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .nf-links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nf-card { padding: 16px 18px; }
}



/* deck demo — the 440 × 956 pt of 03_deck */
.deck-ios .dk-greet { position: absolute; top: calc(73 * var(--pt)); left: calc(21 * var(--pt)); font-size: calc(11.5 * var(--pt)); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #2E2B38; }
.deck-ios .dk-title { position: absolute; top: calc(92 * var(--pt)); left: calc(19 * var(--pt)); font-size: calc(39 * var(--pt)); font-weight: 800; letter-spacing: -.045em; color: #26232F; white-space: nowrap; }
.deck-ios .dk-rit { position: absolute; top: calc(166 * var(--pt)); left: calc(21 * var(--pt)); display: flex; align-items: center; gap: calc(4 * var(--pt)); font-size: calc(14.5 * var(--pt)); font-weight: 600; color: #3A3745; }
.deck-ios .dk-rit i { width: calc(6.5 * var(--pt)); height: calc(6.5 * var(--pt)); border-radius: 50%; background: #C9C6D0; }
.deck-ios .dk-rit i.on { background: #2E2B38; }
.deck-ios .dk-rit span { margin-left: calc(6 * var(--pt)); }
.deck-ios .dk-plan { position: absolute; top: calc(211 * var(--pt)); left: calc(20 * var(--pt)); height: calc(36 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: 99px; background: #fff; display: flex; align-items: center; gap: calc(9 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 800; color: #26232F; box-shadow: 0 calc(3 * var(--pt)) calc(12 * var(--pt)) rgba(40,30,90,.06); }
.deck-ios .dk-plan svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.deck-ios .dk-dice { position: absolute; top: calc(209 * var(--pt)); left: calc(177 * var(--pt)); width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 calc(3 * var(--pt)) calc(12 * var(--pt)) rgba(40,30,90,.06); }
.deck-ios .dk-dice i { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: calc(4 * var(--pt)); background: #2E2B38; box-shadow: inset 0 0 0 calc(4 * var(--pt)) #2E2B38; position: relative; }
.deck-ios .dk-filt { position: absolute; top: calc(270 * var(--pt)); left: calc(20 * var(--pt)); display: flex; gap: calc(8.5 * var(--pt)); }
.deck-ios .dk-filt span { height: calc(35 * var(--pt)); min-width: calc(45 * var(--pt)); padding: 0 calc(13 * var(--pt)); border-radius: 99px; background: #E3E0EC; display: grid; place-items: center; font-size: calc(14.5 * var(--pt)); font-weight: 800; color: #3A3745; }
.deck-ios .dk-filt span.on { background: #7A6ED3; color: #fff; }
.deck-ios .dk-stack { position: absolute; top: calc(330 * var(--pt)); left: calc(20.7 * var(--pt)); width: calc(398.6 * var(--pt)); height: calc(351 * var(--pt)); }
.dk-card { position: absolute; inset: 0; border-radius: calc(24 * var(--pt)); background: #fff; box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(40, 30, 90, .09), 0 0 0 1px rgba(40,30,90,.03);
  padding: calc(24 * var(--pt)) calc(24 * var(--pt)); transform-origin: 50% 110%; will-change: transform; touch-action: none; cursor: grab; }
.dk-card:active { cursor: grabbing; }
.dk-card.back1 { transform: translateY(calc(10 * var(--pt))) scale(.965); box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(40,30,90,.05); }
.dk-card.back2 { transform: translateY(calc(19 * var(--pt))) scale(.93); box-shadow: none; opacity: .7; }
.dk-card.back1 > *, .dk-card.back2 > * { opacity: 0; }
.dk-card .tp { display: flex; justify-content: space-between; align-items: center; }
.dk-card .cat { display: flex; align-items: center; gap: calc(10 * var(--pt)); font-size: calc(11.5 * var(--pt)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4A4757; }
.dk-card .cat i { width: calc(3.5 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 3px; background: var(--c); }
.dk-card .sz { min-width: calc(30 * var(--pt)); height: calc(22 * var(--pt)); padding: 0 calc(8 * var(--pt)); border-radius: 99px; display: grid; place-items: center; font-size: calc(12 * var(--pt)); font-weight: 800; color: #2E2B38; background: var(--sb); box-shadow: inset 0 0 0 1px var(--sl); }
.dk-card .tt { margin-top: calc(22 * var(--pt)); font-size: calc(25 * var(--pt)); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: #2A2D35; }
.dk-card .sm { display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); margin-top: calc(14 * var(--pt)); height: calc(24 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: 99px; background: #F2F0F8; font-size: calc(11 * var(--pt)); font-weight: 800; color: #2E2B38; }
.dk-card .sm svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); color: #7A6ED3; }
.dk-card .ft { position: absolute; left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); bottom: calc(22 * var(--pt)); display: flex; justify-content: space-between; align-items: center; }
.dk-card .ic { width: calc(31 * var(--pt)); height: calc(31 * var(--pt)); border-radius: calc(8 * var(--pt)); display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); }
.dk-card .ic svg { width: 55%; height: 55%; }
.dk-card .wh { display: flex; gap: calc(14 * var(--pt)); font-size: calc(12 * var(--pt)); color: #6E6B78; font-weight: 600; }
.dk-card .wh span { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); }
.dk-card .wh b { color: #3A3745; font-weight: 700; }
.dk-card .wh svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }
.dk-card .stamp { position: absolute; top: calc(20 * var(--pt)); padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: calc(10 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: 0; box-shadow: inset 0 0 0 calc(2.5 * var(--pt)) currentColor; }
.dk-card .stamp.r { left: calc(22 * var(--pt)); color: #6B60B8; rotate: -12deg; }
.dk-card .stamp.l { right: calc(22 * var(--pt)); color: #8B8794; rotate: 12deg; }
.dk-card .stamp.u { left: 50%; translate: -50% 0; top: auto; bottom: calc(70 * var(--pt)); color: #1F9C72; }
.dk-card .stamp.d { left: 50%; translate: -50% 0; color: #D4896E; }
.deck-ios .dk-hints { position: absolute; top: calc(721 * var(--pt)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(18 * var(--pt)); font-size: calc(14 * var(--pt)); font-weight: 600; color: #57536A; }
.deck-ios .dk-count { position: absolute; top: calc(751 * var(--pt)); right: calc(28 * var(--pt)); display: flex; align-items: center; gap: calc(14 * var(--pt)); font-size: calc(14 * var(--pt)); font-weight: 600; color: #6E6B78; }
.deck-ios .dk-count i { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; background: #6E6B78; color: #fff; font-style: normal; font-size: calc(10.5 * var(--pt)); font-weight: 800; display: grid; place-items: center; }
.deck-ios .dk-fab { position: absolute; top: calc(800 * var(--pt)); right: calc(20 * var(--pt)); width: calc(57 * var(--pt)); height: calc(57 * var(--pt)); border-radius: 50%; background: #7A6ED3; display: grid; place-items: center; color: #fff; box-shadow: 0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(122,110,211,.4); }
.deck-ios .dk-fab svg { width: 40%; height: 40%; }
.deck-ios .dk-tabs { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(22 * var(--pt)); height: calc(60 * var(--pt)); border-radius: 99px; background: rgba(255,255,255,.9); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 calc(4 * var(--pt)); box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgba(40,30,90,.06); }
.deck-ios .dk-tabs span { display: grid; justify-items: center; gap: calc(2 * var(--pt)); font-size: calc(11 * var(--pt)); font-weight: 600; color: #1E1B2E; height: calc(52 * var(--pt)); align-content: center; border-radius: 99px; }
.deck-ios .dk-tabs span.on { background: #EFEDEB; color: #5E52B5; }
.deck-ios .dk-tabs svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.deck-ios .dk-toast { position: absolute; left: 50%; top: calc(64 * var(--pt)); translate: -50% calc(-30 * var(--pt)); opacity: 0; padding: calc(10 * var(--pt)) calc(16 * var(--pt)); border-radius: 99px; background: #26232F; color: #fff; font-size: calc(14 * var(--pt)); font-weight: 800; white-space: nowrap; z-index: 8; transition: opacity .3s, translate .5s var(--spring); }
.deck-ios .dk-toast.on { opacity: 1; translate: -50% 0; }
.deck-ios .dk-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: calc(36 * var(--pt)) calc(36 * var(--pt)) 0 0; background: #fff; z-index: 9; translate: 0 105%; transition: translate .55s var(--spring); padding: calc(18 * var(--pt)) calc(24 * var(--pt)); box-shadow: 0 -10px 40px rgba(40,30,90,.15); }
.deck-ios .dk-sheet.on { translate: 0 0; }
.deck-ios .dk-sheet::before { content: ""; display: block; width: calc(40 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 9px; background: #DDDAE4; margin: 0 auto calc(16 * var(--pt)); }
.deck-ios .dk-sheet h5, .deck-ios .dk-sheet .h5 { margin: 0; font-size: calc(24 * var(--pt)); font-weight: 800; letter-spacing: -.02em; color: #26232F; }
.deck-ios .dk-sheet p { margin: calc(6 * var(--pt)) 0 calc(14 * var(--pt)); font-size: calc(14 * var(--pt)); color: #6E6B78; font-weight: 600; }
.deck-ios .dk-sheet ol { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(9 * var(--pt)); counter-reset: s; }
.deck-ios .dk-sheet li { counter-increment: s; display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: #F5F3FA; font-size: calc(15 * var(--pt)); font-weight: 700; color: #2E2B38; }
.deck-ios .dk-sheet li::before { content: counter(s); width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; background: #7A6ED3; color: #fff; display: grid; place-items: center; font-size: calc(12 * var(--pt)); font-weight: 800; flex: none; }
.deck-ios .dk-sheet .close { margin-top: calc(16 * var(--pt)); width: 100%; height: calc(50 * var(--pt)); border-radius: 99px; background: #7A6ED3; color: #fff; font-size: calc(16 * var(--pt)); font-weight: 800; }
.deck-ios .dk-empty { position: absolute; top: calc(330 * var(--pt)); left: 0; right: 0; display: grid; justify-items: center; gap: calc(8 * var(--pt)); opacity: 0; pointer-events: none; transition: opacity .4s; }
.deck-ios .dk-empty.on { opacity: 1; pointer-events: auto; }
.deck-ios .dk-empty .drop-slot { position: relative; width: calc(200 * var(--pt)); height: calc(200 * var(--pt)); }
.deck-ios .dk-empty b { font-size: calc(28 * var(--pt)); font-weight: 800; letter-spacing: -.03em; color: #26232F; }
.deck-ios .dk-empty small { font-size: calc(14 * var(--pt)); color: #6E6B78; font-weight: 600; }
.deck-ios .dk-empty button { margin-top: calc(8 * var(--pt)); height: calc(42 * var(--pt)); padding: 0 calc(20 * var(--pt)); border-radius: 99px; background: #7A6ED3; color: #fff; font-size: calc(15 * var(--pt)); font-weight: 800; }
.dk-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.dk-confetti i { position: absolute; width: calc(8 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 2px; }


/* Plan today — the 440 × 956 pt of 10_plan_today */
.plan-ios { background: #C7C5CC; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.plan-ios > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-ios .pl-sheet { position: absolute; left: 0; right: 0; top: calc(62 * var(--pt)); bottom: 0; background: #F7F6F3; border-radius: calc(36 * var(--pt)) calc(36 * var(--pt)) 0 0; }
.plan-ios .pl-grab { position: absolute; top: calc(6 * var(--pt)); left: 50%; translate: -50% 0; width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 9px; background: #C9C7CE; }
.plan-ios .pl-notnow { position: absolute; top: calc(21 * var(--pt)); left: calc(20 * var(--pt)); height: calc(42 * var(--pt)); padding: 0 calc(16 * var(--pt)); border-radius: 99px; background: #fff; display: grid; place-items: center; font-size: calc(15 * var(--pt)); font-weight: 600; color: #3A3745; box-shadow: 0 calc(3 * var(--pt)) calc(12 * var(--pt)) rgba(40,30,90,.06); }
.plan-ios .pl-sun { position: absolute; top: calc(98 * var(--pt)); left: 50%; translate: -50% 0; width: calc(46 * var(--pt)); }
.plan-ios .pl-h { position: absolute; top: calc(146 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(25 * var(--pt)); font-weight: 700; color: #26232F; letter-spacing: -.01em; }
.plan-ios .pl-sub { position: absolute; top: calc(186 * var(--pt)); left: 0; right: 0; text-align: center; font-size: calc(14 * var(--pt)); color: #57536A; font-weight: 500; }
.plan-ios .pl-rule { position: absolute; top: calc(222 * var(--pt)); left: 0; right: 0; height: 1px; background: #E2E0E4; }
.plan-ios .pl-rule2 { top: calc(785 * var(--pt)); }
.plan-ios .pl-stack { position: absolute; top: calc(239 * var(--pt)); left: calc(20.5 * var(--pt)); width: calc(399 * var(--pt)); height: calc(228 * var(--pt)); }
.plan-ios .pl-card .tt { margin-top: calc(26 * var(--pt)); }
.plan-ios .pl-card.back1 { transform: translateY(calc(9 * var(--pt))) scale(.97); }
.plan-ios .pl-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; border-radius: calc(24 * var(--pt)); border: 2px dashed #DAD7E2; font-size: calc(18 * var(--pt)); font-weight: 800; color: #3A3745; }
.plan-ios .pl-empty small { display: block; margin-top: calc(4 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 600; color: #6E6B78; }
.plan-ios .pl-b { position: absolute; top: calc(484 * var(--pt)); height: calc(55 * var(--pt)); width: calc(192.5 * var(--pt)); border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 800; color: #26232F; transition: transform .25s var(--spring); }
.plan-ios .pl-b:active { transform: scale(.96); }
.plan-ios .pl-b svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.plan-ios .pl-no { left: calc(20.5 * var(--pt)); background: #EAE9EB; }
.plan-ios .pl-yes { right: calc(20.5 * var(--pt)); background: #D6EFE3; }
.plan-ios .pl-stats { position: absolute; top: calc(556 * var(--pt)); left: calc(20.5 * var(--pt)); right: calc(20.5 * var(--pt)); height: calc(168 * var(--pt)); border-radius: calc(22 * var(--pt)); background: #fff; padding: calc(16 * var(--pt)) calc(16 * var(--pt)); display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.plan-ios .pl-stats > div + div { border-left: 1px solid #ECEAEE; padding-left: calc(16 * var(--pt)); }
.plan-ios .pl-stats small { display: block; font-size: calc(13 * var(--pt)); color: #57536A; font-weight: 500; }
.plan-ios .pl-stats b { display: block; font-size: calc(20 * var(--pt)); font-weight: 800; color: #26232F; margin-top: calc(2 * var(--pt)); font-variant-numeric: tabular-nums; }
.plan-ios .pl-stats p { grid-column: 1 / -1; margin: calc(14 * var(--pt)) 0 0; padding-top: calc(12 * var(--pt)); border-top: 1px solid #ECEAEE; font-size: calc(13 * var(--pt)); font-weight: 700; color: #1C8A5C; }
.plan-ios .pl-stats p.full { color: #B7861B; }
.plan-ios .pl-stats p.over { color: #C0573E; }
.plan-ios .pl-pick { grid-column: 1 / -1; justify-self: start; margin-top: calc(12 * var(--pt)); height: calc(30 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 99px; background: #F2F0F8; display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 700; color: #26232F; }
.plan-ios .pl-pick svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.plan-ios .pl-chips { position: absolute; top: calc(737 * var(--pt)); left: calc(20.5 * var(--pt)); right: 0; display: flex; gap: calc(8 * var(--pt)); overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.plan-ios .pl-chips span { flex: none; display: inline-flex; align-items: center; gap: calc(10 * var(--pt)); height: calc(34 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: 99px; background: #E9E7EF; font-size: calc(13.5 * var(--pt)); font-weight: 700; color: #26232F; cursor: pointer; }
.plan-ios .pl-chips svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); color: #57536A; }
.plan-ios .pl-done { position: absolute; top: calc(797 * var(--pt)); left: calc(20.5 * var(--pt)); right: calc(20.5 * var(--pt)); height: calc(53 * var(--pt)); border-radius: 99px; background: linear-gradient(90deg, #8077D6, #6C5EC7); color: #fff; font-size: calc(17 * var(--pt)); font-weight: 800; box-shadow: 0 calc(10 * var(--pt)) calc(24 * var(--pt)) rgba(108, 94, 199, .3); }
.plan-ios .pl-toast { position: absolute; left: 50%; top: calc(18 * var(--pt)); translate: -50% calc(-20 * var(--pt)); opacity: 0; padding: calc(9 * var(--pt)) calc(15 * var(--pt)); border-radius: 99px; background: #26232F; color: #fff; font-size: calc(13.5 * var(--pt)); font-weight: 800; white-space: nowrap; z-index: 8; transition: opacity .3s, translate .5s var(--spring); }
.plan-ios .pl-toast.on { opacity: 1; translate: -50% 0; }


/* ------------------------------------------------------------ inner pages */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.crumbs a:hover { color: var(--violet-600); }
.band-night .crumbs { color: rgba(255,255,255,.55); }
.band-night .crumbs a:hover { color: #fff; }
.release-pill.dark { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; }
.btn-ghost.on-dark { --bg: rgba(255,255,255,.08); --fg: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-ghost.on-dark:hover { --bg: rgba(255,255,255,.14); }
.btn[aria-disabled="true"] { cursor: default; opacity: .92; }
.btn[aria-disabled="true"]:hover { transform: none; }
.band-night .hero-note { color: rgba(255,255,255,.55); }

.mac-top { position: relative; padding: clamp(108px, 14vh, 150px) 0 clamp(30px, 5vw, 60px); overflow: clip; }
.mac-top-copy { display: grid; justify-items: center; text-align: center; gap: 22px; }
.mac-top-copy .display { max-width: 15ch; color: #fff; }
.mac-top-copy .lede { max-width: 740px; }
.mac-top .mac-hero { margin-top: clamp(50px, 6vw, 80px); width: min(1120px, 100% - 2 * var(--gutter)); }
.page-mac .nav-inner { background: rgba(30, 26, 59, .62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px -18px rgba(0,0,0,.6); }
.page-mac .nav .brand, .page-mac .nav-links a { color: rgba(255,255,255,.88); }
.page-mac .nav-links a:hover { background: rgba(255,255,255,.1); color: #fff; }
.page-mac .nav.scrolled .nav-inner { background: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1px var(--line), 0 14px 40px -20px rgba(42,36,64,.5); }
.page-mac .nav.scrolled .brand, .page-mac .nav.scrolled .nav-links a { color: var(--ink-2); }
.page-mac .nav.scrolled .brand { color: var(--ink); }
.page-mac .nav-toggle { color: #fff; }
.page-mac .nav.scrolled .nav-toggle { color: var(--ink); }
@media (max-width: 900px) { .page-mac .nav.open .nav-links a { color: var(--ink-2); } }

.states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.state { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.state img { width: 100%; height: auto; display: block; }
.state figcaption { padding: 18px 22px 22px; color: rgba(255,255,255,.7); font-size: 15.5px; }
.state figcaption b { color: #fff; }

.key-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.key-grid .h1 { font-variant-numeric: normal; }
.keycaps { display: grid; justify-items: center; gap: 22px; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl); background: linear-gradient(160deg, #EFEBFC, #F8EEF4); }
.caps { display: flex; gap: clamp(10px, 2vw, 18px); }
.cap { position: relative; width: clamp(84px, 11vw, 120px); aspect-ratio: 1; border-radius: 22px; background: linear-gradient(180deg, #fff, #F3F1F7); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -4px 0 #DCD7E8 inset, 0 10px 24px -10px rgba(60,46,140,.35); display: grid; place-items: center; transition: transform .12s, box-shadow .12s, background .2s; }
.cap b { font-size: clamp(30px, 4vw, 42px); font-weight: 800; color: var(--ink); line-height: 1; }
.cap small { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: .04em; }
.cap-f { background: linear-gradient(180deg, #8E83E0, #7064C8); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -4px 0 #5446AD inset, 0 14px 30px -12px rgba(110, 97, 208, .8); }
.cap-f b { color: #fff; }
.cap.down { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 #DCD7E8 inset, 0 4px 10px -6px rgba(60,46,140,.35); }
.cap-f.down { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -1px 0 #5446AD inset, 0 6px 14px -8px rgba(110, 97, 208, .8); }
.cap-hint { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink-3); text-align: center; }

.windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.mwin { margin: 0; display: grid; gap: 16px; }
/* Granola's move: the real window laid on an art panel, bleeding off its edge */
.mwin-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1.2; box-shadow: var(--shadow-1); padding: 13% 0 0 11%;
  background: radial-gradient(40% 55% at 12% 88%, rgba(245, 201, 99, .55), transparent 70%), radial-gradient(55% 60% at 95% 10%, rgba(232, 140, 174, .65), transparent 70%), linear-gradient(150deg, #8E80E6, #5B4EC2); }
.mwin:nth-child(2) .mwin-frame { background: radial-gradient(45% 55% at 90% 90%, rgba(109, 201, 212, .6), transparent 70%), radial-gradient(55% 55% at 8% 12%, rgba(181, 175, 240, .9), transparent 70%), linear-gradient(150deg, #F6CDE2, #B9AEEE); }
.mwin-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.mwin-frame img { width: 112%; max-width: none; height: auto; display: block; border-radius: 14px 0 0 0; box-shadow: 0 24px 60px -20px rgba(30, 20, 80, .55), 0 0 0 1px rgba(255,255,255,.4); }
.mwin figcaption { color: var(--ink-2); font-size: 16px; padding: 0 6px; }
.mwin figcaption b { color: var(--ink); }

/* Mac — iCloud — iPhone — Watch: one row at real relative size, dashed links between */
.sync-map { position: relative; margin: clamp(36px, 5vw, 60px) auto 0; width: min(1200px, 100%); }
.sync-map .row { --span: 680; --gap: 26; align-items: flex-end; }
.sync-map .node { position: relative; display: grid; justify-items: center; gap: 12px; color: rgba(255,255,255,.75); font-weight: 800; font-size: 14px; }
.sync-map .n-cloud { align-self: center; padding-bottom: 30px; }
.sync-map .n-cloud::before, .sync-map .n-cloud::after { content: ""; position: absolute; top: 38px; width: calc(26 * var(--mm) + 14px); border-top: 2.5px dashed rgba(167, 156, 240, .6); }
.sync-map .n-cloud::before { right: calc(100% + 4px); }
.sync-map .n-cloud::after { left: calc(100% + 4px); }
.sync-map .cloud-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #9C90F0, #6457C4); color: #fff; box-shadow: 0 0 0 10px rgba(123,111,212,.15), 0 0 60px rgba(123,111,212,.6); animation: pulse 3.2s ease-in-out infinite; }
.sync-map .cloud-ic svg { width: 38px; height: 38px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 18px rgba(123,111,212,.06), 0 0 80px rgba(123,111,212,.7); } }

@media (max-width: 900px) {
  .states, .windows, .key-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .sync-map { display: none; } } /* at phone width the Watch would be a thumbnail; the cards below say it */


/* ------------------------------------------------------------ the web timer */
.timer-hero { padding-bottom: clamp(50px, 7vw, 90px); }
.timer-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(30px, 5vw, 70px); align-items: center; }
.timer-copy { display: grid; gap: 22px; }
.timer { position: relative; border-radius: 44px; padding: 22px 22px 18px; background: linear-gradient(180deg, #EDECF7 0%, #F4F2F6 40%, #FAF8F5 70%, #F1EFEB 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 40px 80px -30px rgba(60, 46, 140, .45), 0 8px 20px -10px rgba(60, 46, 140, .2); display: grid; gap: 14px; }
.t-modes { display: flex; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
.t-modes button { flex: 1; height: 38px; border-radius: 99px; font-size: 14.5px; font-weight: 800; color: var(--ink-2); transition: background .25s, color .25s; }
.t-modes button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(42,36,64,.12); }
.timer:not([data-state="idle"]) .t-modes { opacity: .45; pointer-events: none; }
.t-face { position: relative; min-height: 560px; }
.t-face > div { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--ease); transform: scale(.98); }
.timer[data-state="idle"] .t-idle, .timer[data-state="run"] .t-run, .timer[data-state="paused"] .t-run, .timer[data-state="break"] .t-run,
.timer[data-state="done"] .t-done, .timer[data-state="breathe"] .t-breathe { opacity: 1; pointer-events: auto; transform: none; }
.t-task { width: 100%; }
.t-task input { width: 100%; height: 50px; border-radius: 18px; border: 0; padding: 0 18px; font: 700 17px/1 var(--font); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.t-task input::placeholder { color: var(--ink-3); font-weight: 600; }
.t-task input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--violet); }
.t-dial { position: relative; width: min(340px, 86%); aspect-ratio: 1; margin-top: 18px; touch-action: none; cursor: grab; }
.t-dial:active { cursor: grabbing; }
.t-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-dial .dot { fill: #C9C5D6; }
.t-dial .stop { fill: #9A8FE4; }
.t-dial [data-tknob] { filter: drop-shadow(0 2px 4px rgba(60,46,140,.3)); }
.t-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.t-val b { font-size: 88px; font-weight: 800; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; color: #26232F; }
.t-val small { font-size: 22px; font-weight: 700; color: #3A3745; margin-top: 2px; }
.t-val .t-kind { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.timer[data-mode="pomo"] .t-dial, .timer[data-mode="open"] .t-dial { opacity: .35; filter: saturate(.3); pointer-events: none; }
.timer[data-mode="pomo"] .t-val b::after { content: ""; }
.t-pro { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-3); text-align: center; }
.t-pomo-info, .t-open-info { display: none; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); text-align: center; max-width: 34ch; }
.timer[data-mode="pomo"] .t-pomo-info, .timer[data-mode="open"] .t-open-info { display: block; }
.timer[data-mode="pomo"] .t-pro, .timer[data-mode="open"] .t-pro { display: none; }
.t-start { margin-top: 18px; width: 100%; height: 58px; border-radius: 99px; background: linear-gradient(90deg, #6F62CC, #5E51C4); color: #fff; font-size: 19px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 14px 30px -12px rgba(108, 94, 199, .7); transition: transform .3s var(--spring); }
.t-start:hover { transform: translateY(-2px); }
.t-start:active { transform: scale(.98); }
.t-start svg { width: 20px; height: 20px; }
.t-openlink { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: #3A3745; }
.t-openlink svg { width: 26px; height: 15px; }
.timer[data-mode="open"] .t-openlink { display: none; }
.t-run { padding-top: 10px; }
.t-ringwrap { position: relative; width: min(360px, 88%); aspect-ratio: 1; margin-top: 16px; }
.t-ringwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.t-ringwrap [data-tring] { transition: stroke-dasharray .3s linear; }
.t-rtext { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; }
.t-rtext span { font-size: 17px; font-weight: 600; color: #57536A; max-width: 18ch; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-rtext b { font-size: 82px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: #24222F; }
.t-rtext small { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.timer[data-state="break"] [data-tring] { stroke: #7B6FD4; }
.timer[data-state="paused"] .t-rtext b { opacity: .55; }
.t-ctl { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.t-ctl .ctl-x, .t-ctl .ctl-ok { width: 62px; height: 62px; }
.t-ctl .ctl-main { width: 86px; height: 86px; }
.t-fin { position: absolute; top: 452px; left: 50%; translate: -50% 0; margin-top: 0; height: 42px; padding: 0 18px; border-radius: 99px; background: #26232F; color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; }
.t-fin:not([hidden]) { top: auto; bottom: -6px; }
.t-plus { position: absolute; top: 8px; left: 6px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.95); font-weight: 800; font-size: 15px; color: #2B2838; box-shadow: 0 4px 12px rgba(40,30,90,.08); }
.timer[data-mode="open"] .t-plus { display: none; }
.t-flash { position: absolute; top: 14px; left: 50%; translate: -50% -8px; opacity: 0; padding: 8px 14px; border-radius: 99px; background: #26232F; color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; transition: opacity .3s, translate .4s var(--spring); }
.t-flash.on { opacity: 1; translate: -50% 0; }
.t-done .drop-slot { position: relative; width: 210px; height: 210px; margin-top: 4px; }
.t-done .t-kick { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #48445A; }
.t-mins { display: flex; align-items: baseline; gap: 8px; }
.t-mins b { font-size: 92px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.t-mins span { font-size: 28px; font-weight: 800; }
.t-done p { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: #4C4859; text-align: center; max-width: 30ch; }
.t-row { display: flex; gap: 10px; margin-top: 12px; width: 100%; }
.t-row button { flex: 1; height: 50px; border-radius: 99px; background: #E5E2EC; font-weight: 800; font-size: 15.5px; color: #2B2836; }
.t-breathe { align-content: center !important; gap: 30px; }
.t-orb { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #C9F0DF, #4EC3A0 70%); box-shadow: 0 0 0 14px rgba(78,195,160,.12), 0 0 60px rgba(78,195,160,.45); transition: transform 4s ease-in-out; }
.t-orb.big { transform: scale(1.7); }
.t-breathe p { margin: 0; font-size: 22px; font-weight: 800; color: #3A3745; }
.t-sounds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.t-sounds span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--ink-3); margin-right: 4px; }
.t-sounds span svg { width: 16px; height: 16px; }
.t-sounds button { height: 32px; padding: 0 12px; border-radius: 99px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
.t-sounds button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.t-noscript { margin: 0; text-align: center; font-weight: 700; color: var(--ink-2); }
.take-it { position: relative; z-index: 3; margin-top: clamp(30px, 5vw, 50px); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 18px 18px 26px; border-radius: 26px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--shadow-1); }
.take-it b { display: block; font-size: 17px; font-weight: 800; }
.take-it span { color: var(--ink-2); font-size: 15.5px; }
.take-it .badge-store img { height: 48px; }

.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.way { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.way .way-media { display: grid; justify-items: center; } /* the whole phone: Apple's bezels are never cropped */
.way .way-media .dev { width: 150px; }
.way .h3 { margin-bottom: 8px; }
.surfaces { position: relative; width: min(1040px, 100%); margin: clamp(36px, 5vw, 60px) auto clamp(30px, 4vw, 50px); }
.surfaces .row { --span: 556; --gap: 22; }
.land { display: grid; gap: 24px; justify-items: center; margin-top: clamp(30px, 4vw, 50px); }
.land .dev-iphone-land { width: min(820px, 100%); }
.facegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 4vw, 50px); }
.facegrid .feat p { font-size: 15.5px; }
.end-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(30px, 6vw, 90px); align-items: center; }
.end-phone { width: min(320px, 80%); margin: 0 auto; }
@media (max-width: 900px) {
  .timer-grid, .end-grid { grid-template-columns: 1fr; }
  .ways, .facegrid { grid-template-columns: 1fr; }
  .take-it { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .surfaces .s-mac { display: none; } /* phones: the iPhone and the Watch, large enough to read */
  .surfaces .row { --span: 190; }
}
@media (max-width: 520px) {
  .timer { border-radius: 34px; padding: 16px 14px 14px; }
  .t-face { min-height: 520px; }
  .t-val b { font-size: 72px; }
  .t-rtext b { font-size: 64px; }
  .way { grid-template-columns: 1fr; }
  .way .way-media { margin-bottom: 4px; }
}


/* a session running on another device: read-only mirrors, as the app draws them
   (iPhone RemoteSessionPill, Watch WatchRemoteSessionCard, Mac CompactWingsView) */
.rpill { position: absolute; z-index: 15; top: calc(68 * var(--pt)); left: 50%; translate: -50% calc(-14 * var(--pt)); opacity: 0;
  display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(8 * var(--pt)) calc(14 * var(--pt)); border-radius: 99px; white-space: nowrap;
  background: #211E29; box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  color: rgba(255,255,255,.92); transition: opacity .4s var(--ease), translate .55s var(--spring); pointer-events: none; }
.rpill.on { opacity: 1; translate: -50% 0; }
.rpill .dv { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: #B5AFF0; flex: none; }
.rpill span { display: grid; line-height: 1.15; }
.rpill b { font-size: calc(12 * var(--pt)); font-weight: 700; }
.rpill small { font-size: calc(10 * var(--pt)); font-weight: 600; color: rgba(255,255,255,.55); }
.rpill em { font-style: normal; font-size: calc(13 * var(--pt)); font-weight: 800; font-variant-numeric: tabular-nums; margin-left: calc(2 * var(--pt)); }
.rpill.paused em, .wremote.paused em { color: var(--gold); }
.wremote { position: absolute; top: calc(42 * var(--pt)); left: calc(6 * var(--pt)); right: calc(6 * var(--pt)); display: flex; align-items: center; gap: calc(8 * var(--pt));
  padding: calc(7 * var(--pt)) calc(11 * var(--pt)); border-radius: calc(14 * var(--pt)); background: #2A2730; opacity: 0; translate: 0 calc(-8 * var(--pt)); transition: opacity .35s, translate .5s var(--spring); }
.wremote svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); color: #9C90F0; flex: none; }
.wremote span { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.wremote b { font-size: calc(11.5 * var(--pt)); font-weight: 700; color: #C9C5D2; white-space: nowrap; }
.wremote small { font-size: calc(10.5 * var(--pt)); color: #8E8A96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wremote em { font-style: normal; font-size: calc(14 * var(--pt)); font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.wos-start.remote .wremote { opacity: 1; translate: 0 0; }
.wos-start .ws-kick, .wos-start .ws-task, .wos-start .ws-row { transition: translate .5s var(--spring); }
.wos-start.remote .ws-kick, .wos-start.remote .ws-task, .wos-start.remote .ws-row { translate: 0 calc(50 * var(--pt)); }
.isl .wing-l .wdev { display: none; width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); color: #A79CF0; }
.isl.mirror .wing-l i { display: none; }
.isl.mirror .wing-l .wdev { display: block; }
.isl.mirror.paused .wing-r { color: var(--gold); }

/* the stage's helpers */
.ff .prog { transition: none !important; }
.screen [data-act], .screen [data-tab], .screen [data-habit] { cursor: pointer; }
[data-phone] [data-layer="idle"] { cursor: pointer; }
.fake-cursor { position: absolute; left: 0; top: 0; z-index: 40; width: 26px; height: 26px; pointer-events: none; opacity: 0;
  transition: transform 1s cubic-bezier(.45, .05, .2, 1), opacity .3s; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.fake-cursor.on { opacity: 1; }
.fake-cursor svg { width: 100%; height: 100%; transition: transform .15s; transform-origin: 20% 15%; }
.fake-cursor.press svg { transform: scale(.82); }
@media (pointer: coarse) {
  /* a fingertip, not a mouse pointer, on touch screens */
  .fake-cursor svg { display: none; }
  .fake-cursor::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(42, 36, 64, .28); box-shadow: 0 0 0 2px rgba(255,255,255,.85); transition: transform .15s; }
  .fake-cursor.press::before { transform: scale(.7); background: rgba(123, 111, 212, .55); }
}
.isl.closed { width: calc(190 * var(--pt)); height: calc(33 * var(--pt)); border-radius: 0 0 calc(10 * var(--pt)) calc(10 * var(--pt)); box-shadow: none; }
.isl.closed .pane, .isl.closed .wing { opacity: 0 !important; pointer-events: none !important; transition-delay: 0s; }
.mac-desk .notch { pointer-events: auto; }
[data-mac2] .notch { cursor: pointer; }

/* ------------------------------------------------------------ motion */
.reveal { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease), translate 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; translate: 0 0; }
/* The heroes rise on load instead of waiting for the observer. The headline, the lede and
   the devices only slide, never fade: Chrome doesn't count an element painted at opacity 0
   as the LCP, so a fade-in hides the real LCP (the h1 or the MacBook) behind whatever
   happens to paint first. The small pieces around them may still fade. */
.hero .reveal, .mac-top .reveal { opacity: 1; translate: none; transition: none; animation: rise .8s var(--ease) both; animation-delay: var(--d, 0s); }
:is(.hero, .mac-top) .reveal:is(.release-pill, .crumbs, .cta-wrap, .cta-row, .hero-note, .checks) { animation-name: rise-fade; }
@keyframes rise { from { translate: 0 18px; } }
@keyframes rise-fade { from { opacity: 0; translate: 0 18px; } }
.no-js .reveal { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; translate: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-plan, .tl-land, .tl-drop, .tl-sound { grid-column: span 2; grid-row: auto; }
  .tl-dial, .tl-cal, .tl-streak { grid-column: span 1; }
  .tl-streak { grid-column: span 2; }
  .tl-plan .media { margin-bottom: -120px; }
  .footer-card { grid-template-columns: 1fr 1fr 1fr; }
  .footer-card > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .day, .watch-grid, .meet-grid, .deck-grid { grid-template-columns: 1fr; }
  .day-stage { order: -1; max-width: 520px; width: 100%; margin: 0 auto; }
  .mac-feats, .feats, .privacy-grid, .plans, .also { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr 1fr; }
  .watch-stage { order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bento { grid-template-columns: 1fr; }
  .tl-plan, .tl-land, .tl-drop, .tl-sound, .tl-dial, .tl-cal, .tl-streak { grid-column: auto; }
  .tile { padding: 22px; min-height: 0; }
  .tl-drop { flex-direction: column; align-items: stretch; }
  .tl-drop .drop-box { width: 70%; margin: 0 auto -20px; }
  .feats { grid-template-columns: 1fr; }
  .keys { grid-template-columns: 1fr; }
  .moment { grid-template-columns: 58px 1fr; padding: 14px 14px 18px; }
  .footer-card { grid-template-columns: 1fr 1fr; }
  .faq summary { padding: 18px 18px; font-size: 16.5px; }
  .faq .a { padding: 0 18px 18px; }
  .final-scene .row { --span: 222; }
  .final-scene .f-phone2 { display: none; }
  .final-scene.final-mac .row { --span: 420; }
  .final-scene.final-mac .f-drop { display: none; }
}

/* dark bands that start a page, or follow another dark band, join flat */
.mac-top.band-night { border-radius: 0 0 0 0; }
.mac-top + .band-night { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
/* …and with one continuous sky: each keeps only the glow away from the seam */
.mac-top.band-night { background: radial-gradient(70% 50% at 20% 0%, #2B2363 0%, transparent 70%), var(--night); }
.mac-top + .band-night { background: radial-gradient(60% 50% at 100% 100%, #3A2453 0%, transparent 70%), var(--night); }

/* ---- home (SEO pass) ---- */
/* homepage: inline links inside feature and privacy cards (".feat p a") read as links, like .faq .a a and .facts dd a */
.feat p a { color: var(--violet-600); font-weight: 800; }
.feat p a:not(.link-arrow):hover { text-decoration: underline; text-underline-offset: 3px; }
/* shared nav: seven links now that Apple Watch joined. Between 901 and ~1000px each link wrapped onto two lines
   (checked at 920px); keep every link on one line and tighten the padding until the nav collapses at 900px */
.nav-links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1080px) { .nav-links { gap: 0; } .nav-links a { padding: 9px 9px; font-size: 14.5px; } }

/* ---- mac (SEO pass) ---- */
/* /mac sync band: a text link on a night band (violet-600 on --night is 2.92:1; this is 11.6:1) */
.band-night .link-arrow { color: #CFC8FF; }
.band-night .link-arrow:hover { color: #fff; }

/* ---- timer (SEO pass) ---- */
/* ------------------------------------------------------------ /focus-timer (SEO pass) */
/* Phones: the tool comes first. The DOM keeps the crumbs, the H1, the lede and the checklist
   before the timer, which is what crawlers and screen readers meet first (nothing in the lede
   or the list takes focus, so the tab order still matches what you see). Below 760px the copy
   column dissolves into the grid: the timer moves up under the H1, the lede and list follow. */
@media (max-width: 759px) {
  .page-timer .timer-hero { padding-top: 92px; }
  .page-timer .timer-grid { gap: 18px; }
  .page-timer .timer-copy { display: contents; }
  .page-timer .timer-copy > .crumbs { order: 1; }
  .page-timer .timer-copy > h1 { order: 2; }
  .page-timer .timer-grid > .timer { order: 3; }
  .page-timer .timer-copy > .lede { order: 4; margin-top: 10px; }
  .page-timer .timer-copy > .checks { order: 5; }
}
@media (max-width: 520px) { /* a smaller ring, so Start clears Safari's toolbar on a 390 x 844 iPhone (about 660px of page) */
  .page-timer .timer-hero { padding-top: 86px; }
  .page-timer .timer-grid { gap: 14px; }
  .page-timer .t-dial { width: min(250px, 74%); width: min(250px, 74%, 34svh); margin-top: 12px; }
  .page-timer .t-val b { font-size: 64px; }
  .page-timer .t-start { margin-top: 14px; }
}
/* Pomodoro: four pips under the time, the round you're in and the ones behind you */
.t-pips { display: none; justify-content: center; gap: 7px; margin-top: 2px; }
.timer[data-mode="pomo"] .t-pips { display: flex; }
.t-pips i { width: 8px; height: 8px; border-radius: 50%; background: #D9D4EA; transition: background .3s, box-shadow .3s; }
.t-pips i.done { background: #4EC3A0; }
.t-pips i.now { background: #7B6FD4; box-shadow: 0 0 0 3px rgba(123, 111, 212, .22); }
.timer[data-phase="break"] [data-tring] { stroke: #7B6FD4; } /* a paused break stays violet */
/* a "Coming soon" pill beside a heading, in the .pro pill's shape */
.pro.soon { background: var(--violet-100); color: var(--violet-700); }
.band-night .pro.soon { background: rgba(180, 170, 245, .18); color: #CFC8FF; }
/* How to use this focus timer: five numbered cards in a row, a single column below 1080px */
.t-how { padding-top: clamp(56px, 7vw, 96px); }
.t-steps { list-style: none; counter-reset: step; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.t-steps li { counter-increment: step; position: relative; padding: 64px 22px 24px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-1); color: var(--ink-2); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.t-steps li::before { content: counter(step); position: absolute; top: 22px; left: 22px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-600); font-size: 15px; font-weight: 800; }
.t-steps b { color: var(--ink); }
.t-flowtime { margin: clamp(26px, 4vw, 40px) auto 0; max-width: 46ch; text-align: center; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; font-weight: 700; color: var(--ink); text-wrap: balance; }
@media (max-width: 1080px) {
  .t-steps { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; gap: 10px; }
  .t-steps li { padding: 18px 20px 18px 64px; }
  .t-steps li::before { top: 16px; left: 18px; }
}
/* the landscape faces, in one line under the surfaces (the homepage has the full tile) */
.t-desk { margin: clamp(24px, 3vw, 36px) auto 0; max-width: 70ch; text-align: center; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.t-desk b { color: #fff; }
.t-desk a { color: #C9C1FF; font-weight: 800; white-space: nowrap; }
.t-desk a::after { content: " →"; }

/* ---- apple-watch (SEO pass) ---- */
/* ------------------------------------------------------------ /apple-watch */
.aw-hero { padding-bottom: clamp(56px, 8vw, 100px); }
.aw-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(30px, 5vw, 70px); align-items: center; }
.aw-copy { display: grid; gap: 22px; justify-items: start; }
.aw-copy .display { font-size: clamp(40px, 5.4vw, 74px); max-width: 15ch; }
.aw-note { margin: -4px 0 0; font-size: 14.5px; font-weight: 700; color: var(--ink-3); }
.aw-hero .watch-stage .dev-watch { width: min(320px, 72%); }
.aw-clip .dev-watch { width: min(184px, 62%); margin: 0 auto 8px; }
.aw-pair { width: min(440px, 100%); margin-inline: auto; }
.aw-pair .row { --span: 146; --gap: 14; }
.aw-center { max-width: 760px; margin: 16px auto 0; text-align: center; }
/* links inside running text: violet and underlined, so they read as links without relying on colour */
.page-watch main :is(p, li, td) a:not([class]) { color: var(--violet-600); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--violet-600) 45%, transparent); }
.page-watch main :is(p, li, td) a:not([class]):hover { text-decoration-color: currentColor; }
.final-scene.final-watch { width: min(600px, 100% - 2 * var(--gutter)); }
.final-scene.final-watch .row { --span: 112; --gap: 8; }
.final-scene.final-watch .f-drop { width: calc(46 * var(--mm)); margin: 0; }
.final-scene.final-watch .cloud-bank { left: -50%; width: 200%; max-width: none; }
@media (max-width: 900px) {
  .aw-grid { grid-template-columns: 1fr; }
  .aw-hero .watch-stage { order: 0; } /* the headline first on phones; the Watch follows the buttons */
}
@media (max-width: 640px) {
  .aw-hero .watch-stage .dev-watch { width: min(260px, 70%); }
  .final-scene.final-watch .row { --span: 108; }
  /* the comparison: one card per app instead of a table that scrolls sideways */
  .aw-compare table { min-width: 0; }
  .aw-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aw-compare tbody, .aw-compare tr, .aw-compare td { display: block; width: auto; }
  .aw-compare tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .aw-compare tr:last-child { border-bottom: 0; }
  .aw-compare td { padding: 0; border: 0; font-size: 15px; }
  .aw-compare td:first-child { width: auto; font-size: 17px; margin-bottom: 6px; }
  .aw-compare td + td { margin-top: 8px; }
  .aw-compare td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .aw-compare tr:has(td.us) { background: var(--violet-50); }
  .aw-compare td.us { background: none; }
}

/* ---- home (SEO verify) ---- */
/* homepage comparison: the row labels are now <th scope="row">, so they take over the td:first-child look */
.compare tbody th[scope="row"] { font-weight: 800; color: var(--ink); width: 34%; }
.compare tr:last-child th { border-bottom: 0; }
/* .compare-stack: on phones each row becomes a card (the row label, then one labelled line per column)
   instead of a 640px table that scrolls sideways and cuts cells off mid-word */
@media (max-width: 720px) {
  .compare-stack table { min-width: 0; }
  .compare-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-stack tbody, .compare-stack tr, .compare-stack tbody th, .compare-stack td { display: block; width: auto; }
  .compare-stack tr { padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
  .compare-stack tr:last-child { border-bottom: 0; }
  .compare-stack tbody th, .compare-stack td { padding: 0; border: 0; font-size: 15px; }
  .compare-stack tbody th[scope="row"] { width: auto; font-size: 17px; margin-bottom: 10px; }
  .compare-stack td + td { margin-top: 10px; }
  .compare-stack td.us { padding: 10px 12px; margin-inline: -12px; border-radius: 12px; }
  .compare-stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .compare-stack td.us[data-label]::before { color: var(--violet-600); }
}

/* ---- mac (SEO verify) ---- */
/* /mac hero tip: a touch screen can't hover or press ⌃⌥F, so it gets "Tap the notch"; the keycap hint is for keyboards */
.page-mac .mac-tip .tip-touch { display: none; }
@media (pointer: coarse) {
  .page-mac .mac-tip .tip-hover, .page-mac .mac-tip kbd { display: none; }
  .page-mac .mac-tip .tip-touch { display: inline; }
  .page-mac .cap-hint { display: none; }
  /* the closed notch is about 34 x 6 px on a phone: give a fingertip more to hit, below and beside it */
  .page-mac .isl.closed ~ .notch::before { content: ""; position: absolute; inset: 0 -14px -18px; }
}
/* /mac menu bar mock: as in the app, the menu bar shows the countdown only while a session runs; idle is just the drop */
.page-mac .menubar .fd:not(.on) [data-t] { display: none; }
/* /mac final CTA: a visible platform caption under the App Store badge (pending only; bake.py drops it) */
.page-mac .final .cta-row { align-items: flex-start; }
.badge-col { display: inline-grid; justify-items: center; gap: 8px; }
.badge-note { font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
/* /mac Quiet cards: three cards on the two-column step (641-900px) leave no orphan */
@media (min-width: 641px) and (max-width: 900px) {
  .page-mac .feats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- timer (SEO verify) ---- */
/* ------------------------------------------------------------ /focus-timer (fix pass) */
/* Tablets: the grid stacks at 900px, so the tool follows the H1 there too, not only below 760px */
@media (min-width: 760px) and (max-width: 900px) {
  .page-timer .timer-grid { gap: 22px; }
  .page-timer .timer-copy { display: contents; }
  .page-timer .timer-copy > .crumbs { order: 1; }
  .page-timer .timer-copy > h1 { order: 2; }
  .page-timer .timer-grid > .timer { order: 3; }
  .page-timer .timer-copy > .lede { order: 4; }
  .page-timer .timer-copy > .checks { order: 5; }
}
/* Pomodoro and Open focus: the dial is only a picture there, so it gives up room for the info
   line. Start stays on the first screen of a phone, and nothing spills out of the face. */
@media (min-width: 521px) {
  .page-timer .timer[data-mode="pomo"] .t-dial, .page-timer .timer[data-mode="open"] .t-dial { width: min(306px, 78%); }
}
@media (max-width: 520px) {
  .page-timer .t-dial { width: min(226px, 68%); width: min(226px, 68%, 31svh); }
  .page-timer .timer[data-mode="pomo"] .t-dial, .page-timer .timer[data-mode="open"] .t-dial { width: min(200px, 60%); width: min(200px, 60%, 27svh); }
  /* Flow keeps one line under the dial for the Pro note, so Start doesn't move while you drag */
  .page-timer .t-pro { margin-top: 2px; line-height: 1.25; }
  .page-timer .timer[data-mode="flow"] .t-pro[hidden] { display: block; visibility: hidden; }
  .page-timer .t-pomo-info, .page-timer .t-open-info { margin-top: 6px; font-size: 13.5px; line-height: 1.3; }
}
/* the phase-change note never takes a tap; on phones it wraps between +5 and the edge */
.t-flash { pointer-events: none; }
@media (max-width: 520px) {
  .page-timer .t-flash { left: 60px; right: 60px; width: fit-content; margin-inline: auto; translate: 0 -8px; white-space: normal; text-align: center; line-height: 1.3; border-radius: 18px; }
  .page-timer .t-flash.on { translate: 0 0; }
}
/* a swipe on the dial can scroll the page; timer.js keeps touches on the ring for dragging */
.page-timer .t-dial { touch-action: manipulation; }
/* links at the end of a card's text wrap like words, the arrow staying with the last one */
.page-timer :is(.way, .dark-card) .link-arrow { display: inline; }
.page-timer :is(.way, .dark-card) .link-arrow::after { content: "\00a0\2192"; }
/* every page: the nav marks the page you're on (currentColor, so it works on the dark Mac nav too) */
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---- apple-watch (SEO verify) ---- */
/* /apple-watch comparison: the App column holds only a name, so give its room to the other columns */
@media (min-width: 641px) {
  .aw-compare td:first-child { width: 22%; }
}
@media (min-width: 1000px) {
  .aw-compare thead th { white-space: nowrap; }
}