/* ==========================================================================
   Larkin — 2026 site. One light design system taken straight from the app:
   DM Sans, white canvas, #151515 ink and feature cards, #F0F0F0 cards, lime
   #D2ED28 for the one thing to press. The old styles.css still serves the
   audience pages until they move over.
   ========================================================================== */

/* DM Sans (SIL Open Font License), variable weight and optical size, self-hosted. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg: #FFFFFF;
  --ink: #151515;
  --ink-2: #61615C;
  --ink-3: #8E8E88;
  --card: #F0F0F0;
  --card-2: #E6E6E3;
  --feature: #151515;
  --on-feature: #FFFFFF;
  --on-feature-2: #A3A39D;
  --chip-dark: rgba(255, 255, 255, 0.12);
  --lime: #D2ED28;
  --on-lime: #151515;
  --hair: rgba(21, 21, 21, 0.10);
  --hair-dark: rgba(255, 255, 255, 0.12);
  --ring: #46E26A;

  --clarity: #3B8F7B;
  --listening: #00A6D8;
  --framing: #7B5CD6;
  --assert: #D9486B;

  --r-xl: clamp(24px, 2.4vw, 34px);
  --r-lg: clamp(20px, 2vw, 28px);
  --r-md: 18px;

  --shell: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
  --section: clamp(72px, 10vw, 144px);

  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 900px) { :root { --header-h: 72px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Never let the page pan sideways on a phone. Body clips (clip, not hidden,
   so position: sticky keeps working); the root guard stops body's value
   propagating to the viewport. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--listening); outline-offset: 3px; border-radius: 6px; }
section[id], [id^="app-"] { scroll-margin-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.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-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow--lime { color: var(--lime); }
.h2 {
  font-size: clamp(2.125rem, 4.6vw, 4rem);                 /* 34 → 64 */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Headline tracking is about half what DM Sans would take without its
   optical sizes: at headline sizes the browser switches to the display cut
   (font-optical-sizing: auto), which already sets type ~8% tighter than the
   text cut, so heavy negative tracking made letters touch. DM Sans also
   draws "r" so its arm meets the next diagonal: before a v or y, that r
   gets a hair of room (.kern), whatever the size. Below headline sizes the
   tracking is 0: the font's own spacing. */
.kern { margin-right: 0.03em; }
.h2__soft { color: var(--ink-3); }
.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38ch;
}
.section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head--center { justify-items: center; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Buttons and pills
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--lime { background: var(--lime); color: var(--on-lime); }
.btn--lime:hover { box-shadow: 0 10px 24px -12px rgba(21, 21, 21, 0.45); } /* lifts; the lime itself never shifts */
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000; }
.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 32%, transparent);
}
.btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; padding-inline: 1rem; white-space: normal; text-align: center; } /* full width already; wrapping beats widening the page on 320px phones */

.spark { width: 18px; height: 18px; flex: none; fill: currentColor; }


/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
/* A floating bar. At the very top of the page it's clear over the hero film
   (larkin.js adds .over-hero there, and marks each word .on-dark while the
   film behind it is dark, see below). Once the page has scrolled it's a
   frosted white pill inset from the
   edges (.is-floating). Scrolling down hides it (.is-hidden: it fades, lifts
   and blurs away) and any scroll up brings it back. Without JS it simply
   stays a frosted pill at the top. Below 900px it holds just the wordmark
   and the Reserve button. */
.site-header {
  --pill-pad: 14px;
  --pill-h: 54px;
  --float-top: 10px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--float-top) max(10px, calc(var(--gutter) - var(--pill-pad))) 0;
  color: var(--ink);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), filter 0.4s var(--ease), color 0.35s var(--ease);
}
@media (min-width: 900px) { .site-header { --pill-pad: 24px; --pill-h: 58px; --float-top: 14px; } }
.site-header.is-hidden { opacity: 0; transform: translateY(-14px); filter: blur(7px); }
.site-header.is-hidden .site-header__inner { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: opacity 0.2s linear, color 0.35s var(--ease); }
  .site-header.is-hidden { transform: none; filter: none; }
}
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: calc(var(--shell) + var(--pill-pad) * 2);
  height: var(--pill-h);
  padding-inline: var(--pill-pad);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.03), 0 10px 34px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.035);
  pointer-events: auto;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.brand { grid-column: 1; justify-self: start; font-size: 1.5rem; }

/* The wordmark, from the logo file and inlined: its letters take the text
   colour (ink on light, white on dark), its full stop is always lime.
   0.75em sets its "l" as tall as the font's own at that size. */
.logo { display: block; width: auto; height: 0.75em; fill: currentColor; }
.logo__dot { fill: var(--lime); }
@media (min-width: 900px) { .brand { font-size: 1.625rem; } }
/* Nav links are pills; the one for the section on screen is lit. */
.nav { grid-column: 2; display: none; gap: 2px; }
.nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0.72;
  transition: opacity 0.2s var(--ease), background-color 0.25s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a.is-active { opacity: 1; background: rgba(21, 21, 21, 0.06); }
.header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

@media (min-width: 900px) {
  .nav { display: flex; }
}

/* Clear over the film, at the very top. Each word of the bar takes the colour
   that reads best against the frame right behind it: larkin.js samples the
   film behind the wordmark and behind each nav link and marks the ones over a
   dark patch .on-dark. The Reserve button is a solid shape, so it reads
   either way. Keyed off html.js (set in the head) rather than .over-hero, so
   the clear bar is there from the first paint, before larkin.js has run. */
html.js .site-header:not(.is-floating) .site-header__inner {
  border-color: transparent;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.over-hero .nav a { opacity: 0.92; }
.site-header.over-hero :is(.brand, .nav a) { transition: opacity 0.2s var(--ease); } /* colour switches with the cut, unfaded */
.site-header.over-hero :is(.brand, .nav a).on-dark { color: #fff; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: max(600px, 100svh);
  overflow: hidden;
  background: #E8E8E6;
  color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
}
/* Short fade: the film must be fully up before its first dark frame at 0.7 s. */
.hero__video { opacity: 0; transition: opacity 0.45s var(--ease); }
.hero.is-playing .hero__video { opacity: 1; }

/* Phones and narrow frames: copy sits low over a soft ink scrim. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72%;
  z-index: -1;
  background: linear-gradient(to top, rgba(12, 12, 12, 0.78) 0%, rgba(12, 12, 12, 0.5) 45%, rgba(12, 12, 12, 0) 100%);
  pointer-events: none;
}
.hero__inner {
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(36px, 7vh, 72px);
}
.hero__copy { display: grid; gap: 18px; max-width: 36rem; }
.hero__title {
  font-size: clamp(3rem, 13vw, 4.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
/* The headline's three lines are set, never left to the column width:
   "Everyone's met you." on one line would need ~900px at full size. */
.hero__title .block { display: block; }
.hero__lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: balance;
  opacity: 0.88;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__fine { font-size: 0.875rem; font-weight: 600; opacity: 0.7; }

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--header-h) + 16px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 20, 20, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.hero__toggle[hidden] { display: none; }
.hero__toggle svg { width: 20px; height: 20px; fill: currentColor; display: none; }
.hero__toggle[data-state="playing"] .i-pause,
.hero__toggle[data-state="paused"] .i-play,
.hero__toggle[data-state="ended"] .i-replay { display: block; }
.hero__toggle[data-state="ended"] .i-replay { fill: none; }

/* Portrait screens load a portrait crop of the film and poster, already
   framed on the wrist. */
@media (max-aspect-ratio: 4/5) {
  .hero__media img, .hero__video { object-position: 50% 50%; }
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero { color: var(--ink); transition: color 0.3s var(--ease); }
  .hero.is-dark { color: #fff; }
  .hero::after { display: none; }
  .hero__media img, .hero__video { object-position: 50% 50%; }
  .hero__inner { align-items: center; padding-top: var(--header-h); padding-bottom: 0; }
  .hero__copy { gap: 22px; max-width: 40rem; transform: translateY(10vh); } /* headline starts just below 35% of the screen */
  .hero__title { font-size: clamp(4rem, 7.4vw, 6.5rem); }
  .hero.is-dark .hero__copy { text-shadow: 0 1px 30px rgba(0, 0, 0, 0.35); }
  .hero__toggle {
    top: auto;
    bottom: 32px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
  }
  .hero.is-dark .hero__toggle { color: #fff; background: rgba(20, 20, 20, 0.38); }
}

/* --------------------------------------------------------------------------
   7. Statement — read-along
   -------------------------------------------------------------------------- */
.statement {
  display: grid;
  place-items: center;
  padding-block: clamp(96px, 15vw, 200px);
  text-align: center;
}
.statement p {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.625rem, 3.5vw, 3.25rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.statement p + p { margin-top: 0.6em; }
.statement p:first-child { color: var(--ink-2); }
.statement .w { transition: opacity 0.12s linear; }

/* The key phrase gets a lime highlighter. Inline backgrounds are painted as
   one strip across line breaks, so growing the strip's width sweeps the
   marker along the phrase in reading order, line after line. It rests fully
   drawn; the read-along (larkin.js) starts it at zero and sweeps it in when
   the reading reaches the phrase. */
.marker {
  --mark: 100%;
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: var(--mark) 0.82em;
  padding-inline: 0.08em;
  margin-inline: -0.08em;
  border-radius: 0.14em;
  transition: background-size 1.5s cubic-bezier(0.55, 0.05, 0.3, 1);
}
.stmt-scrub .marker { --mark: 0%; }
.stmt-scrub .marker.is-on { --mark: 100%; }
/* Each marked word comes up to full ink as the marker passes over it
   (--d is its place along the sweep, set by larkin.js). */
.stmt-scrub .marker.is-on .w { opacity: 1 !important; transition: opacity 0.25s linear var(--d, 0s); }

.stmt-scrub .statement-pin { height: 220vh; }
.stmt-scrub .statement-pin .statement {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  /* Even top and bottom, so the reading sits in the middle of the screen
     (the header slides away while scrolling down), with room for the
     floating bar if it comes back. */
  padding-block: calc(var(--header-h) + 16px);
}

/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
/* The film: an arm slides in from the left and rests on white, the
   headline above it. It runs the full width of the screen at every size, so
   the arm always comes in from beyond the left edge. The film's own top third is empty white, so it tucks up
   under the copy; its background is levelled to #FFFFFF at export so the
   edges vanish into the page. The poster is the film's last frame. */
.how { padding-top: 0; }
.how-film { display: grid; }
.how-film__head {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.how-film__line { display: block; }
.how-film__lead { margin-inline: auto; text-wrap: balance; }
.how-film__media {
  --tag-x: 41%;
  position: relative;
  width: 100%;
  margin: 8px auto 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}
.how-film__media :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}
.how-film__video { opacity: 0; transition: opacity 0.3s linear; }
.how-film.is-playing .how-film__video { opacity: 1; }
/* A small ink pill just above the module (its place in the film's last
   frame): on ink, lime is allowed. */
.how-film__tag {
  position: absolute;
  left: var(--tag-x);
  bottom: var(--tag-bottom, 63%);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 28px -14px rgba(21, 21, 21, 0.5);
}
.how-film__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(210, 237, 40, 0.18);
}
/* Wide screens show only the strip of the film the arm rests in, 26% to
   92% of its height (the rest is empty white), so the headline, the lead
   and the whole band fit on one screen together. While the arm swings in,
   its hand rises higher than where it comes to rest (to 14% of the frame),
   so the strip starts higher and drifts down with the arm as it settles:
   the hand is never cut and the arm stays level on screen. */
@media (min-width: 700px) {
  .how-film__media {
    --tag-x: 38.3%;
    --tag-bottom: 83.3%;
    aspect-ratio: 16 / 5.94;
    margin-top: 0;
  }
  .how-film__media :is(img, video) { object-position: 50% 76.5%; }
  .how-film.is-playing .how-film__video { animation: how-frame 3.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
}
@keyframes how-frame {
  0%, 30% { object-position: 50% 35%; }
  100% { object-position: 50% 76.5%; }
}

/* The day: a dark card, the copy beside a line from morning to night.
   Lime is only ever on this dark ground. --D is how long the dot takes to
   cross the day; each moment, its time of day beside it, lights as the dot
   reaches it. */
.day {
  --D: 6.5s;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--r-xl);
  background: var(--feature);
  color: var(--on-feature);
}
.day__copy { display: grid; align-content: start; gap: 16px; }
.day__title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.day__copy p:last-child { max-width: 40ch; color: var(--on-feature-2); font-size: 1.0625rem; }

.day__line {
  display: grid;
  grid-template-columns: auto 2px 1fr;
  column-gap: clamp(16px, 2vw, 24px);
  height: clamp(340px, 32vw, 420px);
}
.day__marks { position: relative; }
/* Each time of day sits level with the first line of its moment. */
.day__marks li {
  position: absolute;
  right: 0;
  top: calc(var(--s) * 100%);
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  line-height: 1;
}
/* An invisible copy of the longest word holds the column's width. */
.day__marks::before {
  content: "Afternoon";
  visibility: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.day__track { position: relative; border-radius: 2px; background: var(--hair-dark); }
.day__seg {
  position: absolute;
  left: -1px;
  width: 4px;
  top: calc(var(--s) * 100%);
  height: calc((var(--e) - var(--s)) * 100%);
  border-radius: 2px;
  background: var(--lime);
  transform-origin: 50% 0;
}
.day__dot {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lime);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 7px rgba(210, 237, 40, 0.16), 0 0 22px rgba(210, 237, 40, 0.45);
}
.day__convos { position: relative; }
.day__convos li {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 100%);
  display: grid;
  gap: 2px;
  margin-top: -3px;
}
.day__convos p { max-width: 32ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.day__when { display: none; }
/* Narrow screens: no room for a label column, so each moment carries its
   own time of day and the line takes the full width. */
@media (max-width: 599px) {
  .day__line { grid-template-columns: 2px 1fr; height: 440px; }
  .day__marks { display: none; }
  .day__when {
    display: block;
    margin-bottom: 2px;
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
  }
}
@media (min-width: 900px) {
  .day { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* --------------------------------------------------------------------------
   9. Phone frame
   -------------------------------------------------------------------------- */
.phone {
  --w: 260px;
  width: max-content;
  padding: calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.165);
  background: #0B0B0B;
  box-shadow: inset 0 0 0 1.5px #2C2C2C, 0 40px 80px -30px rgba(0, 0, 0, 0.45);
}
.phone__screen {
  position: relative;
  width: var(--w);
  aspect-ratio: 720 / 1560;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.13);
  background: #fff;
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.phone--peek { --w: min(56vw, 230px); box-shadow: inset 0 0 0 1.5px #2C2C2C, 0 30px 60px -20px rgba(0, 0, 0, 0.35); }

/* --------------------------------------------------------------------------
   10. The app — three chapters: rows, a swipeable row on phones, one held
       tile on wide screens
   -------------------------------------------------------------------------- */
.app {
  --ui-ink: #151515;
  --ui-2: #61615C;
  --ui-3: #A3A39D;
  --ui-line: rgba(21, 21, 21, 0.07);
  --ui-track: #E8E8E6;
  --ui-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  background: var(--feature);
  color: var(--on-feature);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.app + .section { position: relative; }
.app { margin-bottom: calc(var(--r-xl) * -1); padding-bottom: calc(var(--section) + var(--r-xl)); }
#use-cases { position: relative; z-index: 1; background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tour { display: grid; gap: clamp(88px, 12vw, 160px); margin-top: clamp(48px, 7vw, 88px); }
.chap { scroll-margin-top: calc(var(--header-h) + 72px); }

/* A chapter: copy, then its phone. Side by side once there's room for
   both, the middle chapter mirrored. */
.feat { display: grid; gap: 28px; align-items: center; }
.feat__copy { display: grid; gap: 14px; align-content: center; }
.feat__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-feature-2);
}
.feat__label span { color: var(--lime); font-variant-numeric: tabular-nums; }
.feat__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.feat__text { max-width: 36ch; color: var(--on-feature-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; }
@media (min-width: 1280px) {
  .feat { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: clamp(48px, 5vw, 80px); }
  .feat--flip { grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); }
  .feat--flip .feat__copy { order: 2; }
  .feat .stage { --rv-d: 120ms; }
}

/* Mirror's three parts. Wide: a list beside the phone, the chosen part
   opening its line of explanation. Phones: a small switch above the phone.
   A lime line fills beside the chosen part: with scroll on wide screens,
   over its time on screen while the parts advance on their own on phones. */
.mtab {
  position: relative;
  display: grid;
  width: 100%;
  padding: 14px 18px 14px 26px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--on-feature-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.mtab b { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.mtab:hover { color: #fff; }
.mtab.is-on { color: #fff; background: rgba(255, 255, 255, 0.06); }
.mtab::before, .mtab__time {
  content: "";
  position: absolute;
  left: 12px;
  top: 17px;
  bottom: 17px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.mtab.is-on::before { background: var(--lime); }
.mtab__time { background: var(--lime); transform: scaleY(0); transform-origin: top; }
/* While the parts play (.is-playing), the chosen part's line waits empty
   until the phone is in view, then fills. */
.mtabs.is-playing .mtab.is-on::before { background: rgba(255, 255, 255, 0.14); }
.mtabs.is-auto .mtab.is-on .mtab__time { animation: mtab-fill var(--dwell, 6s) linear forwards; }
/* Wide screens: scroll moves through the parts, and the line fills with it. */
.mtabs.is-scrolled .mtab.is-on::before { background: rgba(255, 255, 255, 0.14); }
.mtabs.is-scrolled .mtab.is-on .mtab__time { transform: scaleY(var(--fill, 0)); }
@keyframes mtab-fill { to { transform: none; } }
.mtab__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.mtab.is-on .mtab__more { grid-template-rows: 1fr; }
.mtab__text { display: block; min-height: 0; overflow: hidden; color: var(--on-feature-2); font-size: 0.9375rem; line-height: 1.5; }
.mtab__text::before { content: ""; display: block; height: 4px; }
@media (min-width: 700px) {
  .mtabs { display: grid; gap: 2px; max-width: 30rem; margin-top: 10px; }
}
@media (max-width: 699px) {
  .mtabs {
    display: flex;
    gap: 2px;
    margin-top: 10px;
    padding: 4px;
    border-radius: 999px;
    background: #222222;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .mtab { flex: 1; justify-items: center; align-content: center; min-height: 40px; padding: 0 8px; border-radius: 999px; text-align: center; }
  .mtab b { font-size: 0.875rem; white-space: nowrap; }
  .mtab.is-on { background: rgba(255, 255, 255, 0.12); }
  .mtab::before, .mtab__more { display: none; }
  .mtab__time { left: 16px; right: 16px; top: auto; bottom: 5px; width: auto; height: 2px; transform: scaleX(0); transform-origin: left; }
}

/* --- The stage: a raised tile the phone rises from ----------------------- */
/* The phone's foot hangs below the tile and is clipped, so it reads as cut
   flush. Its width follows the tile's own (container query). */
.stage {
  container: stage / inline-size;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 32px 16px 0;
  border-radius: var(--r-xl);
  background: #222222;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (min-width: 700px) { .stage { padding-top: 44px; } }

/* Mirror's tile holds a phone per screen, fanned like a hand of cards: the
   chosen one upright in front, the other two smaller, tilted and barely
   there on either side, a hint there's more. As the parts advance the fan
   turns one place; the phone at the far end wraps round, passing behind.
   The phones keep a small gap so they never cross mid-turn. On a phone's
   screen the tile only has room for the one in front, so there the screens
   fade through in place: out goes the last, then in comes the next. */
.stage--deck { display: grid; justify-items: center; }
.mphone {
  --side-s: 0.96;
  --side-x: 0%;
  --side-r: 0deg;
  --side-o: 0;
  grid-area: 1 / 1;
  z-index: 1;
  transform-origin: 50% 100%;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}
.mphone.is-on { transition-delay: 0.2s; }
@container stage (min-width: 520px) {
  .mphone {
    --side-s: 0.86;
    --side-x: calc(93% + 14px);
    --side-r: 4deg;
    --side-o: 0.1;
    transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.9s cubic-bezier(0.6, 0, 0.3, 1);
  }
  .mphone.is-on { transition-delay: 0s; }
}
.mphone.is-on { z-index: 2; }
.mphone.is-wrap { z-index: 0; animation: mphone-wrap 0.9s linear; }
@keyframes mphone-wrap { 20%, 80% { opacity: 0; } }
.mphone:is(.is-next, .is-prev) { opacity: var(--side-o); cursor: pointer; }
.mphone.is-next { transform: translateX(var(--side-x)) rotate(var(--side-r)) scale(var(--side-s)); }
.mphone.is-prev { transform: translateX(calc(var(--side-x) * -1)) rotate(calc(var(--side-r) * -1)) scale(var(--side-s)); }
@media (hover: hover) {
  .mphone:is(.is-next, .is-prev):hover { opacity: calc(var(--side-o) + 0.14); }
}

/* Phones: the three chapters become a swipeable row of tiles. A tile is
   sized so the next one shows only as a clean card edge; its copy comes
   first and its phone rises from the tile's bottom edge, cut flush, so a
   chapter's words and its screen fit on one screen together. The dots
   follow the swipe (larkin.js). */
.tour-dots { display: none; }
@media (max-width: 699px) {
  .tour {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden; /* else a swipe can latch onto a vertical scroller */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .tour::-webkit-scrollbar { display: none; }
  .chap {
    /* the next tile's visible edge: gutter + 16px - 12px gap, under its
       20px side padding, so no stray text peeks in */
    flex: 0 0 min(calc(100vw - 2 * var(--gutter) - 16px), 400px);
    display: flex;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: #222222;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .feat { display: flex; flex-direction: column; align-items: stretch; gap: 22px; width: 100%; }
  .feat__copy { gap: 10px; padding: 26px 20px 0; }
  .feat__title { font-size: 1.625rem; }
  .feat__text { font-size: 1rem; }
  .chap .stage {
    flex: 1 0 min(46vh, 400px);
    flex: 1 0 min(46svh, 400px);
    padding: 0 20px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* The row slides; its tiles don't also rise in as they arrive. */
  .js-anim .tour .rv { opacity: 1; translate: none; }
  .tour-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
  .tour-dots i { width: 7px; height: 7px; border-radius: 999px; background: #3A3A3A; transition: width 0.3s var(--ease), background-color 0.3s var(--ease); }
  .tour-dots i.is-on { width: 22px; background: var(--lime); }
}

/* Wide screens (larkin.js adds .is-held from 960px): the chapters' words
   scroll past on the left while their screens share one tile on the right,
   held in place. The chapter whose words reach the middle of the screen is
   marked .is-at: its screen fades in over the last one, which stays put
   underneath until it's covered. The chapters and their rows step aside
   (display: contents) so the words and the tiles sit in one grid: words in
   the left column, a row each; the tiles stacked in the right column across
   all three rows, so they stay in reach while it scrolls. Without the
   script the chapters stay rows, each beside its own tile. */
@media (min-width: 960px) {
  .tour.is-held {
    --held-ph: clamp(440px, calc(100vh - 250px), 600px);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 104px);
    row-gap: 0;
  }
  .tour.is-held :is(.chap, .feat) { display: contents; }
  .tour.is-held .feat__copy { grid-column: 1; min-height: 80vh; padding-block: 6vh; }
  .tour.is-held .chap:nth-child(1) .feat__copy { grid-row: 1; }
  .tour.is-held .chap:nth-child(2) .feat__copy { grid-row: 2; }
  .tour.is-held .chap:nth-child(3) .feat__copy { grid-row: 3; }
  /* Mirror's row runs two screens longer: its words hold in the middle
     while scroll takes its three parts in turn (larkin.js). */
  .tour.is-held { grid-template-rows: auto auto calc(80vh + 2 * var(--mirror-step)); --mirror-step: 70vh; }
  .tour.is-held .chap:nth-child(3) .feat__copy {
    align-self: start;
    position: sticky;
    top: 10vh;
  }
  .app .tour.is-held .chap .stage {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
    position: sticky;
    top: max(calc(var(--header-h) + 16px), calc(50vh - var(--held-ph) / 2));
    z-index: 1;
    opacity: 0;
    translate: none;
    pointer-events: none;
    transition: opacity 0s linear 0.5s;
  }
  .app .tour.is-held .chap.is-at .stage {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s var(--ease);
  }
  .tour.is-held .ui-phone { --ph: var(--held-ph); }
}

/* --- App UI, rebuilt ----------------------------------------------------- */
/* Sizes follow the app (DM Sans, 15–17 px body) and stay put at every width:
   only the line lengths change, so the screens read at full size on a phone. */
.ui-phone {
  --pw: 330px;
  --ph: 540px;
  position: relative;
  width: min(var(--pw), 100%);
  height: var(--ph);
  margin-bottom: -40px;
  padding: 9px 9px 0;
  border-radius: 50px 50px 0 0;
  background: #0B0B0B;
  box-shadow: inset 0 0 0 1.5px #2C2C2C, 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
@container stage (min-width: 520px) { .ui-phone { --pw: 360px; --ph: 600px; } }
.ui-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 41px 41px 0 0;
  background: #fff;
  color: var(--ui-ink);
  font-size: 15px;
  line-height: 21px;
}
.ui-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 2px 22px 0 30px;
}
.ui-status b { font-size: 15px; font-weight: 600; }
.ui-status svg { width: 62px; height: 11px; fill: currentColor; }
.ui-island { position: absolute; left: 50%; top: 9px; width: 92px; height: 27px; margin-left: -46px; border-radius: 14px; background: #000; }
@container stage (max-width: 300px) { .ui-island { width: 64px; margin-left: -32px; } }
.ui-bar { display: flex; align-items: center; justify-content: flex-end; height: 46px; padding: 0 14px; }
.ui-bar--split { justify-content: space-between; }
.ui-capsule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07), 0 6px 14px -6px rgba(0, 0, 0, 0.14);
}
.ui-capsule svg, .ui-round svg { width: 16px; height: 16px; fill: currentColor; }
.ui-capsule i { width: 5px; height: 5px; border-radius: 50%; background: var(--ui-3); }
.ui-capsule__sep { width: 1px; height: 16px; background: rgba(21, 21, 21, 0.1); }
.ui-round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07), 0 6px 14px -6px rgba(0, 0, 0, 0.14);
}

.ui-body { display: grid; gap: 14px; align-content: start; padding: 4px 18px 0; }
.ui-body--top { padding-top: 14px; }
.ui-group { display: grid; gap: 6px; }
.ui-h1 { font-size: 26px; line-height: 31px; font-weight: 700; }
.ui-h2 { font-size: 19px; line-height: 25px; font-weight: 700; }
.ui-h2--section { margin-top: 8px; }
.ui-p { font-size: 15px; line-height: 22px; }
.ui-sub { font-size: 14px; line-height: 20px; color: var(--ui-2); }
.ui-lede { font-size: 16px; line-height: 24px; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-eyebrow { font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-2); }
.ui-link { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 600; }
.ui-link svg { width: 16px; height: 16px; }
.ui-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
}
.ui-tile {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow);
}

/* Chronicles: a date rail and a card per day. */
.ui-days { display: grid; gap: 12px; margin-top: 2px; }
.ui-day { display: flex; gap: 10px; }
.ui-day__date { flex: none; display: flex; flex-direction: column; align-items: center; width: 34px; }
.ui-day__date small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-2); }
.ui-day__date b { font-size: 20px; line-height: 26px; font-weight: 600; }
.ui-day__date::after { content: ""; flex: 1; width: 1px; margin-top: 8px; background: var(--ui-track); }
.ui-day__card {
  container: daycard / inline-size;
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow);
}
.ui-day__title { font-size: 16.5px; line-height: 21px; font-weight: 600; }
.ui-day__sum { font-size: 14.5px; line-height: 20px; color: var(--ui-2); }
.ui-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px; font-size: 12.5px; line-height: 17px; color: var(--ui-2); white-space: nowrap; }
.ui-meta svg, .ui-facts svg { flex: none; width: 15px; height: 15px; color: var(--ui-3); }
@container daycard (max-width: 248px) { .ui-meta__more { display: none; } }
@container daycard (max-width: 199px) { .ui-meta { white-space: normal; } }

/* Conversations: the insights, skill by skill. */
.ui-insights { display: grid; gap: 10px; }
.ui-insight {
  display: grid;
  gap: 8px;
  padding: 18px 18px 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow);
}
.ui-insight__name { display: flex; align-items: center; gap: 10px; font-size: 16.5px; line-height: 22px; font-weight: 600; }
.ui-insight__name::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--c); }
.ui-point { position: relative; padding-left: 16px; font-size: 15px; line-height: 22px; }
.ui-point::before { content: ""; position: absolute; left: 1px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-3); }

/* Mirror: a screen per phone, filling it. */
.mphone .ui-screen { display: grid; grid-template-columns: minmax(0, 1fr); }
.mpanel { min-height: 100%; background: #fff; color: var(--ui-ink); }
.mpanel--dark { background: #151515; color: #fff; }
.mpanel > [role="img"] { display: flex; flex-direction: column; min-height: 100%; }
.ui-hero { display: grid; justify-items: start; padding: 14px 20px 0; }
.ui-who { display: flex; align-items: center; gap: 12px; }
.ui-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 19px;
  line-height: 1;
  font-weight: 600;
}
.ui-who p { display: grid; }
.ui-who b { font-size: 22px; line-height: 27px; font-weight: 700; }
.ui-who p > span { font-size: 13.5px; line-height: 19px; color: var(--ui-3); }
.ui-portrait { margin-top: 18px; font-size: 21px; line-height: 28px; text-wrap: pretty; }
.ui-sheet { flex: 1; display: grid; gap: 4px; align-content: start; margin-top: 26px; padding: 22px 0 0; border-radius: 26px 26px 0 0; background: #fff; color: var(--ui-ink); }
.ui-sheet > .ui-h2 { padding: 0 20px 6px; font-size: 18px; }
.ui-area { display: grid; gap: 9px; padding: 14px 20px 15px; }
.ui-area + .ui-area { box-shadow: inset 0 1px 0 var(--ui-line); }
.ui-area__name { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 600; }
.ui-area__name::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--c); }
.ui-track { position: relative; height: 12px; }
.ui-track::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: var(--ui-track); }
.ui-track__dot { position: absolute; top: 0; left: calc((100% - 12px) * var(--p)); width: 12px; height: 12px; border-radius: 50%; background: var(--ui-ink); }
.ui-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-2); }

.ui-goal { display: flex; align-items: center; gap: 10px; font-size: 17px; line-height: 22px; font-weight: 600; }
.ui-goal svg { flex: none; width: 18px; height: 18px; }
.ui-progress { gap: 14px; padding: 20px 20px 18px; }
.ui-move { display: grid; gap: 7px; }
.ui-track--move { height: 16px; }
.ui-track--move::before { top: 7px; }
.ui-track__moved {
  position: absolute;
  top: 7px;
  left: calc((100% - 16px) * var(--from) + 8px);
  width: calc((100% - 16px) * (var(--to) - var(--from)));
  height: 2px;
  background: var(--ui-ink);
  transform-origin: left;
}
.ui-track__was { position: absolute; top: 0; left: calc((100% - 16px) * var(--from)); width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(21, 21, 21, 0.45); }
.ui-track--move .ui-track__dot { width: 16px; height: 16px; left: calc((100% - 16px) * var(--to)); }
.ui-legend { display: flex; gap: 14px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ui-2); }
.ui-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-ink); }
.ui-legend i.o { background: none; box-shadow: inset 0 0 0 1.5px rgba(21, 21, 21, 0.4); }

.ui-ask { gap: 16px; padding: 20px; }
.ui-ask__q { display: grid; gap: 8px; }
.ui-ask__fact { font-size: 19px; line-height: 25px; font-weight: 600; text-wrap: balance; }
.ui-ask__quote { font-size: 14.5px; line-height: 20px; color: var(--ui-2); }
.ui-ask__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-answer {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #F0F0F0;
  color: var(--ui-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.ui-answer svg { flex: none; width: 14px; height: 14px; }
.ui-answer--yes { background: var(--lime); }
.ui-facts { gap: 0; padding: 2px 0; }
.ui-facts li { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 18px; font-size: 14.5px; line-height: 20px; }
.ui-facts li + li { box-shadow: inset 0 1px 0 var(--ui-line); }
.ui-facts .ui-chip { flex: none; }
.ui-facts svg { margin-left: auto; }

/* Answering (larkin.js adds .is-live): the card swaps to the next fact. */
.ui-ask [hidden] { display: none; }
.is-live .ui-answer { cursor: pointer; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.is-live .ui-answer:hover { background: #E6E6E3; }
.is-live .ui-answer--yes:hover { background: var(--lime); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(21, 21, 21, 0.5); }
.is-live .ui-answer:active { transform: scale(0.97); }
.ui-ask__q, .ui-ask__actions { transition: opacity 0.3s var(--ease), translate 0.3s var(--ease); }
.ui-ask.is-swapping .ui-ask__q { opacity: 0; translate: 0 -8px; }
.ui-ask__note { font-size: 15px; line-height: 21px; color: var(--ui-2); }
.ui-ask__again {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   11. Use cases
   -------------------------------------------------------------------------- */
.uc-grid { display: grid; gap: 16px; }
.uc {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--card);
  color: #fff;
}
.uc picture, .uc img { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc img { object-fit: cover; object-position: 50% 30%; z-index: -2; }
.uc::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0));
}
.uc__copy { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 6px; }
.uc__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.uc__title { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 700; line-height: 1.1; text-wrap: balance; }
@media (min-width: 800px) {
  .uc-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .uc { aspect-ratio: 16 / 11; }
  .uc__copy { left: 32px; right: 32px; bottom: 32px; }
}

/* --------------------------------------------------------------------------
   12. Privacy
   -------------------------------------------------------------------------- */
.privacy { padding-top: 0; }
.section-head--split { align-items: end; }
.section-head--split .lead { max-width: 30ch; text-wrap: balance; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 48px; }
  .section-head--split .lead { justify-self: end; text-align: right; }
}
.privacy__grid { display: grid; gap: 16px; }
.pcard {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  background: var(--card);
}
.pcard h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.pcard p { color: var(--ink-2); }
.pcard__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
}
@media (min-width: 700px) { .privacy__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .privacy__grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   13. Reserve
   -------------------------------------------------------------------------- */
.reserve { padding-top: 0; }
.preorder {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(12px, 1.6vw, 20px);
  border-radius: var(--r-xl);
  background: var(--feature);
  color: #fff;
}
.pgal { display: grid; gap: 12px; }
.pgal__main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 8px);
  background: #222;
}
.pgal__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease); }
.pgal__frame.is-active { opacity: 1; }
.pgal__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pgal__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pgal__thumbs button {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #222;
  cursor: pointer;
  opacity: 0.55;
  box-shadow: inset 0 0 0 2px transparent;
  transition: opacity 0.25s var(--ease);
}
.pgal__thumbs button img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pgal__thumbs button:hover { opacity: 0.85; }
.pgal__thumbs button.is-active { opacity: 1; outline: 2px solid var(--lime); outline-offset: 2px; }

.preorder__copy { display: grid; gap: 18px; align-content: center; padding: clamp(12px, 3vw, 40px); }
.preorder__actions { display: grid; gap: 10px; }
.preorder__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.preorder__title { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.preorder__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: -4px; color: var(--on-feature-2); font-size: 1rem; }
.preorder__price b { color: #fff; font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.1; }
.preorder__points { display: grid; gap: 10px; margin-block: 4px 8px; }
.preorder__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.preorder__points li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23151515' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
@media (min-width: 900px) {
  .preorder { grid-template-columns: 1.05fr 1fr; }
}

/* --------------------------------------------------------------------------
   14. Compare
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   13b. Try the app
   -------------------------------------------------------------------------- */
/* A light card under the pre-order card, so it reads second: copy and an
   email field on one side, an iPhone with the watch in front of it rising
   from the card's bottom edge on the other. On #F0F0F0 the button is ink
   (lime never fills on light grey). */
.beta { padding-top: 0; }
.beta-card {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--card);
}
.beta__copy { display: grid; gap: 18px; align-content: center; padding: clamp(28px, 5vw, 72px) clamp(24px, 5vw, 72px) 8px; }
.beta__title { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.beta__lead { max-width: 42ch; color: var(--ink-2); font-size: 1.0625rem; }
.beta__form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 30rem; margin-top: 6px; }
.beta__input {
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.beta__input::placeholder { color: var(--ink-3); }
.beta__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.beta__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.beta__form .btn { flex: 0 0 auto; }
.beta__msg { flex-basis: 100%; padding-inline: 4px; font-size: 0.9375rem; font-weight: 600; }
.beta__msg:empty { display: none; }
.beta__form.is-done :is(.beta__input, .btn) { display: none; }
.beta__form.is-done .beta__msg { padding: 16px 22px; border-radius: 20px; background: #fff; font-size: 1rem; }
.beta__note { max-width: 44ch; color: var(--ink-2); font-size: 0.9375rem; }
.beta__note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.beta__devices {
  --ww: clamp(150px, 15vw, 200px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 36px 16px 0;
}
.beta__devices .ui-phone { --pw: 290px; --ph: 470px; flex: none; }
/* The watch stands in front of the phone's lower left, its band cut by
   the card's edge like the phone's foot. The screen sits behind the bezel,
   a little larger than its transparent opening (72-487 x 192-687 in the
   560 x 880 PNG), so the bezel's own rounded edge frames it exactly. */
.watch {
  position: relative;
  z-index: 1;
  flex: none;
  order: -1;
  width: var(--ww);
  aspect-ratio: 560 / 880;
  margin: 0 calc(var(--ww) * -0.42) calc(var(--ww) * -0.17) 0;
  filter: drop-shadow(0 24px 30px rgba(21, 21, 21, 0.28));
}
.watch__bezel { position: relative; display: block; width: 100%; height: 100%; }
.watch__screen {
  position: absolute;
  left: 11.6%;
  top: 21%;
  width: 76.6%;
  height: 57.9%;
  overflow: hidden;
  border-radius: 22%;
  background: #000;
}
.watch__screen :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Once the film is up, the lime still underneath goes, so no sliver of
   it shows at an edge. */
.watch__video { opacity: 0; transition: opacity 0.4s var(--ease); }
.watch.is-playing .watch__video { opacity: 1; }
.watch.is-playing .watch__still { opacity: 0; transition: opacity 0s linear 0.4s; }
@media (min-width: 900px) {
  .beta-card { grid-template-columns: 1fr 1fr; }
  .beta__copy { padding-bottom: clamp(28px, 5vw, 72px); }
  .beta__devices { padding-top: 56px; }
  .beta__devices .ui-phone { --pw: 320px; --ph: 520px; }
}
@media (max-width: 599px) {
  .beta__form .btn { width: 100%; }
  .beta__devices { --ww: min(124px, 32vw); padding: 28px 8px 0; }
  .beta__devices .ui-phone { --pw: min(252px, 66vw); --ph: 430px; }
  .beta__devices .ui-island { width: 64px; margin-left: -32px; }
}

.compare-sec { padding-top: 0; }
.compare-hint { font-size: 0.875rem; color: var(--ink-3); text-align: center; margin-bottom: 12px; }
.compare-scroll {
  /* position: relative makes this the containing block of the absolutely
     positioned .sr-only labels in the table; without it they escape the
     scroller's clip and widen the whole page on phones. */
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.compare {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}
.compare th, .compare td { padding: 18px 16px; text-align: center; border-bottom: 1px solid var(--hair); }
.compare tbody th { text-align: left; font-weight: 600; padding-left: 0; width: 30%; }
.compare thead th { vertical-align: bottom; border-bottom: 0; padding-bottom: 20px; }
.col-name { display: block; font-size: 1.0625rem; font-weight: 700; }
.col-note { display: block; margin-top: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); line-height: 1.35; }
.compare .col-us { background: var(--feature); color: #fff; border-bottom-color: var(--hair-dark); }
.compare thead .col-us { border-radius: 22px 22px 0 0; padding-top: 24px; }
.compare thead .col-us .col-note { color: var(--on-feature-2); }
.compare tbody tr:last-child .col-us { border-radius: 0 0 22px 22px; border-bottom: 0; }
.yes, .half {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9375rem;
}
.yes { background: var(--lime); color: var(--ink); }
.half { background: var(--card); color: var(--ink-2); }
.no { color: #C4C4BF; font-weight: 700; }
.qual { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }
.compare__foot { margin-top: 20px; font-size: 0.8125rem; color: var(--ink-3); text-align: center; }
@media (min-width: 840px) { .compare-hint { display: none; } }

/* --------------------------------------------------------------------------
   15. Device + specs
   -------------------------------------------------------------------------- */
.device { padding-top: 0; }
.device__hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #EEEDEB;
}
.device__hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 26% 50%; }
.device__line { display: grid; gap: 12px; padding: 28px 24px 32px; }
.device__line p:last-child { color: var(--ink-2); font-size: 1.0625rem; max-width: 32ch; }
@media (min-width: 900px) {
  .device__hero img { aspect-ratio: 16 / 8.2; object-position: 50% 50%; }
  .device__line {
    position: absolute;
    top: 50%;
    right: clamp(32px, 6vw, 96px);
    width: min(40%, 30rem);
    padding: 0;
    transform: translateY(-50%);
  }
}

.specs { display: grid; gap: 16px; margin-top: 16px; }
.specs__media { overflow: hidden; border-radius: var(--r-xl); background: var(--card); }
.specs__media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 58%; }
.specs__sheet {
  display: grid;
  align-content: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--card);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  border-top: 1px solid var(--hair);
}
.spec-row dt { color: var(--ink-2); }
.spec-row dd { font-weight: 600; text-align: right; }
@media (min-width: 900px) {
  .specs { grid-template-columns: 0.85fr 1fr; }
  .specs__media img { aspect-ratio: auto; min-height: 100%; }
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq-sec { padding-top: 0; }
.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq__item { border-radius: var(--r-md); background: var(--card); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 22px 72px 22px 26px;
  font-size: 1.125rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item p { padding: 0 26px 24px; color: var(--ink-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   17. Closing
   -------------------------------------------------------------------------- */
/* The hero's headline style at about 70% of its size, its CTA and footnote
   again, centred. On a phone the headline keeps the section headlines' size
   rather than dropping below them. */
.closing { padding-block: clamp(96px, 11vw, 160px); background: var(--bg); text-align: center; }
.closing__inner { display: grid; justify-items: center; gap: 22px; }
.closing__title {
  font-size: clamp(2.125rem, 4.3vw, 3.875rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.closing__body { max-width: 40ch; font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.closing__actions { display: flex; justify-content: center; margin-top: 6px; }
.closing__fine { font-size: 0.875rem; font-weight: 600; color: var(--ink); opacity: 0.7; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--feature); color: #fff; padding-block: 56px; }
.site-footer__inner { display: grid; gap: 28px; }
.site-footer__mark { font-size: 1.75rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.site-footer__links a { color: var(--on-feature-2); font-weight: 500; transition: color 0.2s var(--ease); }
.site-footer__links a:hover { color: #fff; }
.site-footer__copy { font-size: 0.875rem; color: #6E6E69; }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; }
  .site-footer__links { justify-content: center; }
}

/* --------------------------------------------------------------------------
   19. Motion
   -------------------------------------------------------------------------- */
/* Hidden states exist only under .js-anim, which larkin.js adds itself: if the
   script never runs, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .rv {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.8s var(--ease) var(--rv-d, 0ms), translate 0.8s var(--ease) var(--rv-d, 0ms);
  }
  .js-anim .rv.in { opacity: 1; translate: none; }

  .hero__copy > * { animation: rise 0.9s var(--ease) backwards; }
  .hero__copy > :nth-child(2) { animation-delay: 80ms; }
  .hero__copy > :nth-child(3) { animation-delay: 160ms; }
  .hero__copy > :nth-child(4) { animation-delay: 240ms; }
  .hero__copy > :nth-child(5) { animation-delay: 300ms; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  :is(.uc-grid, .privacy__grid) > .rv:nth-child(2) { --rv-d: 90ms; }
  :is(.uc-grid, .privacy__grid) > .rv:nth-child(3) { --rv-d: 180ms; }
  .uc-grid > .rv:nth-child(4) { --rv-d: 120ms; }
  .privacy__grid > .rv:nth-child(4) { --rv-d: 0ms; }
  .privacy__grid > .rv:nth-child(5) { --rv-d: 90ms; }
  .privacy__grid > .rv:nth-child(6) { --rv-d: 180ms; }
}
/* How it works: the headline rises with the arm, the pill appears once the
   arm has settled, and the day plays out along its line. Until the film
   plays, its frame is empty white (the poster would give the ending away);
   .is-still brings the poster back if the film can't play. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .how-film :is(.eyebrow, .how-film__line, .how-film__lead) {
    opacity: 0;
    translate: 0 0.35em;
    filter: blur(6px);
    transition: opacity 0.9s var(--ease), translate 1s var(--ease), filter 0.9s var(--ease);
  }
  .js-anim .how-film.is-on :is(.eyebrow, .how-film__line, .how-film__lead) { opacity: 1; translate: none; filter: none; }
  .js-anim .how-film.is-on .how-film__line:nth-child(2) { transition-delay: 0.9s; }
  .js-anim .how-film.is-on .how-film__lead { transition-delay: 1.7s; }
  .js-anim .how-film__poster { opacity: 0; transition: opacity 0.6s linear; }
  .js-anim .how-film.is-still .how-film__poster { opacity: 1; }
  .js-anim .how-film__tag { opacity: 0; translate: 0 8px; scale: 0.92; transition: opacity 0.5s var(--ease), translate 0.6s var(--ease), scale 0.6s var(--ease); }
  .js-anim .how-film.is-settled .how-film__tag { opacity: 1; translate: none; scale: 1; }

  .js-anim .day__dot { top: 0; }
  .js-anim .day.is-live .day__dot { top: 100%; transition: top var(--D) linear 0.5s; }
  .js-anim .day__seg { transform: scaleY(0); }
  .js-anim .day.is-live .day__seg {
    transform: none;
    transition: transform calc((var(--e) - var(--s)) * var(--D)) linear calc(0.5s + var(--s) * var(--D));
  }
  .js-anim :is(.day__convos li, .day__marks li) { opacity: 0; translate: 0 8px; }
  .js-anim .day.is-live :is(.day__convos li, .day__marks li) {
    opacity: 1;
    translate: none;
    transition: opacity 0.6s var(--ease), translate 0.7s var(--ease);
    transition-delay: calc(0.5s + var(--s) * var(--D));
  }
}
/* The app's screens come alive once their tile is in view: the days and
   the insights file in, Mirror's dots find their places and the goal's dot
   travels from October to November, each time its screen is shown. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim :is(.ui-day, .ui-insight) { opacity: 0; translate: 0 16px; transition: opacity 0.6s var(--ease), translate 0.7s var(--ease); }
  .js-anim .stage.in :is(.ui-day, .ui-insight) { opacity: 1; translate: none; }
  .js-anim .beta-card.in .ui-day { opacity: 1; translate: none; }
  .js-anim .ui-area .ui-track__dot { left: calc((100% - 12px) * 0.5); transition: left 1.1s var(--ease) 0.3s; }
  .js-anim .stage.in .mpanel.is-on .ui-area .ui-track__dot { left: calc((100% - 12px) * var(--p)); }
  .js-anim .ui-track__moved { transform: scaleX(0); transition: transform 1s var(--ease) 0.4s; }
  .js-anim .ui-track--move .ui-track__dot { left: calc((100% - 16px) * var(--from)); transition: left 1s var(--ease) 0.4s; }
  .js-anim .stage.in .mpanel.is-on .ui-track__moved { transform: none; }
  .js-anim .stage.in .mpanel.is-on .ui-track--move .ui-track__dot { left: calc((100% - 16px) * var(--to)); }
  .ui-facts li.is-new { animation: fact-in 0.6s var(--ease) both; }
  .ui-answer--yes.is-hint { animation: nudge 1.4s var(--ease) 0.2s 2; }
}
:is(.ui-day, .ui-insight):nth-child(1) { transition-delay: 0.3s; }
:is(.ui-day, .ui-insight):nth-child(2) { transition-delay: 0.42s; }
:is(.ui-day, .ui-insight):nth-child(3) { transition-delay: 0.54s; }
.ui-day:nth-child(4) { transition-delay: 0.66s; }
.ui-area:nth-child(2) .ui-track__dot { transition-delay: 0.4s; }
.ui-area:nth-child(3) .ui-track__dot { transition-delay: 0.5s; }
.ui-area:nth-child(4) .ui-track__dot { transition-delay: 0.6s; }
@keyframes fact-in { from { opacity: 0; translate: 0 -10px; } }
@keyframes nudge { 0%, 55%, 100% { transform: none; } 25% { transform: scale(1.05); } }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}