/* ==========================================================================
   Leapdeck. leapdeck.app. The home page's showcase sections.

   site.css holds the tokens, the nav, the hero and the pieces every page
   shares. This file holds what only the home page has: the product shots, the
   Mac and iPhone showcases, the Pro band and the Free or Pro table. It is
   loaded after site.css, from index.astro, so it can lean on the same tokens.

   Nothing here may use an inline style, because the Content-Security-Policy
   refuses them: every variation is a class or an attribute selector, and the
   few values the script has to set go through the CSSOM (setProperty), which
   the policy allows.

   Everything that moves stops under prefers-reduced-motion, by the rule at
   the end of site.css that switches animation and transition off. The things
   that start hidden (the scroll reveals) only start hidden when motion is
   allowed and the script runs, so with either off the page is simply there.
   ========================================================================== */

:root {
  --r-card: clamp(22px, 19px + 0.9vw, 30px);
  --r-stage: clamp(28px, 24px + 1.2vw, 40px);
  /* The two hues of the demo Space wallpaper in the iPhone screenshots, which
     is the only colour the product itself has. Used for light, never for ink. */
  --hue-a: #6C7BD8;
  --hue-b: #B084C6;
  --hue-c: #F29BB6;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(0, 0, 0, 0.10);
}

/* --------------------------------------------------------------------------
   Reveal on scroll. The script adds .is-in as a block enters the screen.
   -------------------------------------------------------------------------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 720ms var(--ease), transform 720ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal--scale { transform: translateY(26px) scale(0.97); }
  .reveal--left  { transform: translateX(-26px); }
  .reveal--right { transform: translateX(26px); }
}

/* Staggered children: a class per position, since a style attribute is out. */
.stagger > .reveal:nth-child(2) { --reveal-delay: 60ms; }
.stagger > .reveal:nth-child(3) { --reveal-delay: 120ms; }
.stagger > .reveal:nth-child(4) { --reveal-delay: 180ms; }
.stagger > .reveal:nth-child(5) { --reveal-delay: 60ms; }
.stagger > .reveal:nth-child(6) { --reveal-delay: 120ms; }
.stagger > .reveal:nth-child(7) { --reveal-delay: 180ms; }
.stagger > .reveal:nth-child(8) { --reveal-delay: 240ms; }
.stagger > .reveal:nth-child(n+9) { --reveal-delay: 100ms; }

/* --------------------------------------------------------------------------
   Product shots
   -------------------------------------------------------------------------- */
/* A window captured with its own rounded corners and no shadow: the shadow is
   drawn here, around the shape, so it sits right on white, grey and black. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.20)) drop-shadow(0 3px 9px rgba(0, 0, 0, 0.10));
}
.shot--soft { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.16)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)); }

/* The iPhone. Everything is sized in em from one width, so a phone at any size
   keeps its proportions. The bezel is drawn, the screen is a real capture. */
.phone {
  --w: 300;
  font-size: calc(var(--w) * 1px / 20);
  position: relative;
  width: 20em;
  flex: none;
  padding: 0.62em;
  border-radius: 3.5em;
  background: linear-gradient(150deg, #3a3a3f 0%, #121214 38%, #232327 100%);
  box-shadow:
    0 0 0 0.07em rgba(255, 255, 255, 0.14) inset,
    0 0 0 0.14em #050506,
    0 2.2em 4.4em -0.6em rgba(0, 0, 0, 0.42),
    0 0.6em 1.6em rgba(0, 0, 0, 0.20);
}
.phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.9em;
  background: #fff;
  aspect-ratio: 1320 / 2868;
  isolation: isolate;
}
.phone__screen > img,
.phone__screen > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The Dynamic Island. The capture leaves that spot clear. */
.phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 1.22em;
  left: 50%;
  width: 4.1em;
  height: 1.58em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: #000;
}
/* Side buttons: action and volume on the left, power on the right. */
.phone::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -0.16em;
  top: 5.6em;
  width: 0.16em;
  height: 1.5em;
  border-radius: 0.1em 0 0 0.1em;
  background: #2b2b2f;
  box-shadow: 0 2.4em 0 #2b2b2f, 0 4.5em 0 0.0em #2b2b2f, 20.32em 3.6em 0 0.0em #2b2b2f;
}
.phone--sm  { --w: 220; }
.phone--md  { --w: 260; }
.phone--lg  { --w: 320; }
.phone--xl  { --w: 360; }

/* On its side. The island moves to the left edge. */
.phone--land {
  width: auto;
  height: 20em;
  aspect-ratio: 2868 / 1320;
}
.phone--land .phone__screen { aspect-ratio: 2868 / 1320; height: 100%; width: 100%; }
.phone--land::before {
  top: 50%;
  left: 1.22em;
  width: 1.58em;
  height: 4.1em;
  transform: translateY(-50%);
}
.phone--land::after { display: none; }

/* A phone frame holding a drawn scene (a Home Screen, a Lock Screen) instead
   of a capture. Same 1320 x 2868 box, so the two are interchangeable. */
.phone__screen--scene { font-size: 1em; }

/* --------------------------------------------------------------------------
   The stage: a soft surface a product shot sits on
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  width: 100%;
  border-radius: var(--r-stage);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(108, 123, 216, 0.16), transparent 58%),
    radial-gradient(110% 90% at 100% 100%, rgba(242, 155, 182, 0.16), transparent 56%),
    var(--surface-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}
.stage--white { background: radial-gradient(120% 90% at 50% 0%, rgba(108, 123, 216, 0.10), transparent 60%), var(--surface); }

/* --------------------------------------------------------------------------
   Hero stage: the Settings window, the right-click menu, an iPhone and the key
   that did it, on one surface. Everything is placed in container units (1cqw
   is 1% of the stage), so the composition scales as one piece.
   -------------------------------------------------------------------------- */
.hstage {
  --px: 0;
  --py: 0;
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: var(--shell);
  margin-top: clamp(40px, 26px + 3.6vw, 64px);
  aspect-ratio: 1180 / 660;
  border-radius: var(--r-stage);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(90% 80% at 20% 0%, rgba(108, 123, 216, 0.20), transparent 60%),
    radial-gradient(80% 80% at 100% 100%, rgba(242, 155, 182, 0.22), transparent 60%),
    var(--surface-2);
  overflow: hidden;
  isolation: isolate;
}
.hstage__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 50% at 50% 50%, rgba(255, 255, 255, 0.7), transparent 70%); }
.hstage > * { position: absolute; margin: 0; }
.hstage__win {
  left: 22.5cqw;
  top: 6cqw;
  width: 39cqw;
  transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -5px), 0);
  transition: transform 300ms var(--ease);
}
.hstage__menu {
  left: 3.6cqw;
  top: 17cqw;
  width: 16.6cqw;
  transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -9px), 0);
  transition: transform 300ms var(--ease);
}
.hstage .phone {
  --w: 330;
  font-size: 1.5cqw;
  right: 5cqw;
  top: 8cqw;
  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 7px), 0);
  transition: transform 300ms var(--ease);
}
.hstage__key {
  left: 4.5cqw;
  top: 6cqw;
  font-size: 1.5cqw;
  transform: translate3d(calc(var(--px) * -20px), calc(var(--py) * 12px), 0);
  transition: transform 300ms var(--ease);
}
.hstage__key .keycap { font-size: 2.1cqw; }
@media (max-width: 719px) {
  .hstage { aspect-ratio: 5 / 6; }
  .hstage__win { left: 4cqw; top: 6cqw; width: 66cqw; }
  .hstage__menu { display: none; }
  .hstage .phone { font-size: 2.35cqw; right: 4cqw; top: 22cqw; }
  .hstage__key { left: 6cqw; top: 76cqw; }
  .hstage__key .keycap { font-size: 5cqw; }
}

/* A keycap, drawn the way the hero's are. */
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.7em;
  border-radius: 0.7em;
  background: linear-gradient(#fff, #F1F1F4);
  border: 1px solid var(--line-mid);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 3px 0 rgba(0, 0, 0, 0.10), 0 10px 18px rgba(0, 0, 0, 0.10);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.keycap svg { width: 1.05em; height: 1.05em; }
.keycap--dark {
  background: linear-gradient(#3a3a3f, #1f1f23);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 3px 0 rgba(0, 0, 0, 0.45), 0 10px 18px rgba(0, 0, 0, 0.30);
}
.keys { display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   The strip of facts under the hero
   -------------------------------------------------------------------------- */
.facts {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--line-soft);
  overflow: hidden;
}
@media (min-width: 840px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact {
  background: var(--surface);
  padding: clamp(18px, 14px + 1vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fact__n {
  font-size: clamp(30px, 24px + 1.6vw, 44px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.fact__n small { font-size: 0.5em; letter-spacing: 0; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.fact__t { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Showcase: a list of tabs and the stage they drive
   -------------------------------------------------------------------------- */
.showcase {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; }
}
.showcase__tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.showcase__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 960px) {
  .showcase__tabs { flex-direction: column; overflow: visible; margin-inline: 0; padding: 0; gap: 10px; }
}
.stab {
  flex: none;
  scroll-snap-align: start;
  width: min(78vw, 300px);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease), transform 280ms var(--ease), background-color 280ms var(--ease);
}
@media (min-width: 960px) { .stab { width: auto; padding: 16px 18px; } }
.stab:hover { transform: translateY(-2px); }
.stab[aria-selected="true"] {
  border-color: var(--line-active);
  box-shadow: var(--shadow-2);
}
.stab__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 280ms var(--ease), color 280ms var(--ease);
}
.stab[aria-selected="true"] .stab__icon { background: var(--ink); color: var(--surface); }
.stab__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stab__title { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.stab__body { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* Only the open tab spells itself out, so a long list stays short. */
@media (min-width: 960px) {
  .stab__body { display: none; }
  .stab[aria-selected="true"] .stab__body { display: block; }
}

.showcase__stage {
  position: relative;
  min-height: clamp(360px, 200px + 34vw, 700px);
  border-radius: var(--r-stage);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(108, 123, 216, 0.14), transparent 58%),
    radial-gradient(100% 80% at 100% 100%, rgba(242, 155, 182, 0.14), transparent 56%),
    var(--surface);
  overflow: hidden;
}
.showcase__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 10px + 2.4vw, 44px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity 420ms var(--ease), transform 520ms var(--ease), visibility 0s linear 420ms;
}
.showcase__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* Without the script every panel would stack; show only the first. */
@media (scripting: none) {
  .showcase__panel { display: none; }
  .showcase__panel:first-child { display: flex; position: relative; opacity: 1; visibility: visible; transform: none; }
}
.showcase__panel > .shot { max-height: 100%; width: auto; max-width: 100%; }

/* Settings windows are tall and narrow; pair them in the stage. */
.pane { width: min(100%, 440px); }
.pane--wide { width: min(100%, 520px); }
.panel-duo { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 36px); width: 100%; }
.panel-duo .pane { width: min(46%, 300px); }

/* --------------------------------------------------------------------------
   A drawn menu bar, with the row, the hover tip and a display's pill
   -------------------------------------------------------------------------- */
.mbar {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.mbar__bar {
  width: 100%;
  height: 30px;
  border-radius: 12px;
  background: linear-gradient(100deg, #5D6FC9, #8B79C4 55%, #C88BB6);
  box-shadow: 0 14px 30px rgba(60, 50, 120, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
}
.mbar__menu { margin-right: auto; display: flex; gap: 14px; opacity: 0.85; }
.mbar__dot { width: 13px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.55); }
.mbar__dot--round { border-radius: 50%; }
.mbar__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.20);
}
.mbar__n {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, 0.95);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mbar__n.is-on { background: #fff; color: #3b3a63; }
.mbar__tip {
  align-self: flex-end;
  margin-right: 70px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  font-size: 12px;
  color: #222;
  white-space: nowrap;
}

/* A display, and the pill that sits at its top edge. */
.mon {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 5px solid #19191c;
  background: linear-gradient(135deg, #6C7BD8, #B084C6 60%, #F29BB6);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.22);
}
.mon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 28%;
  height: 8px;
  transform: translateX(-50%);
  background: #19191c;
  border-radius: 0 0 8px 8px;
}
.mon__pill {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 8px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 9.5px;
  white-space: nowrap;
}
.mon__pill b {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.9);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 700;
}
.mon__pill b.is-on { background: #fff; color: #333; }
.mon__win { position: absolute; border-radius: 5px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18); }
.mons { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(16px, 4vw, 40px); width: min(100%, 560px); align-items: center; }
/* The two displays and the line under them about which one the keys switch. */
.monsv { width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vw, 30px); }
.monsv .mons { width: 100%; }

/* --------------------------------------------------------------------------
   Send a window: Option, Shift and 3, and the window flies to Desktop 3
   One 6.4s loop. The row is a container, so the flight is measured in its own
   width: four columns 3% apart are 22.75cqw wide and 25.75cqw from one to the
   next, so Desktop 1 to Desktop 3 is 51.5cqw. The base styles are the landed
   frame (the window on 3, the ring on 3, the HUD up), which is what reduced
   motion is left with; the keyframes start from Desktop 1.
   -------------------------------------------------------------------------- */
.sendv { width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3vw, 26px); }
.sendv__row {
  container-type: inline-size;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 3%;
}
.sendv__sp { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.sendv__sp small { font-size: clamp(10px, 2.5cqw, 13px); color: var(--ink-2); white-space: nowrap; }
.sendv__th {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: linear-gradient(135deg, #6C7BD8, #B084C6 60%, #F29BB6);
  box-shadow: 0 10px 22px rgba(40, 40, 80, 0.18);
  overflow: hidden;
}
.sendv__th::before { content: ""; position: absolute; inset: 0 0 auto; height: 9%; background: rgba(255, 255, 255, 0.35); }
.sendv__th b { position: absolute; right: 7%; bottom: 6%; font-size: clamp(10px, 2.3cqw, 13px); font-weight: 700; color: #fff; }
/* Windows that live on 2 and 4 already, so the one arriving is the news. */
.sendv__sp--2 .sendv__th::after,
.sendv__sp--4 .sendv__th::after { content: ""; position: absolute; left: 12%; top: 24%; width: 48%; height: 54%; border-radius: 4px; background: rgba(255, 255, 255, 0.5); }
.sendv__sp--3 .sendv__th { box-shadow: 0 0 0 2.5px var(--ink), 0 10px 22px rgba(40, 40, 80, 0.18); }
.sendv__win {
  position: absolute;
  z-index: 2;
  left: 5.375cqw;
  top: 3.7cqw;
  width: 12cqw;
  height: 8cqw;
  border-radius: 1.1cqw;
  background: #fff;
  box-shadow: 0 1.2cqw 2.4cqw rgba(20, 20, 50, 0.28);
  overflow: hidden;
  transform: translate(51.5cqw, 0);
}
.sendv__win::before { content: ""; position: absolute; inset: 0 0 auto; height: 1.8cqw; background: #ECECF1; }
.sendv__win::after { content: ""; position: absolute; left: 1.4cqw; right: 3cqw; top: 3.2cqw; height: 0.7cqw; border-radius: 1cqw; background: #DADAE3; box-shadow: 0 1.5cqw 0 #E6E6EC, 0 3cqw 0 #E6E6EC; }
.sendv__win i { position: absolute; z-index: 1; left: 1cqw; top: 0.55cqw; width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: #FF5F57; box-shadow: 1.1cqw 0 0 #FEBC2E, 2.2cqw 0 0 #28C840; }
.sendv__keys { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; min-height: 44px; }
.sendv__keys .keycap { font-size: 16px; }
.sendv__hud { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 12px; background: rgba(30, 30, 36, 0.86); color: #fff; font-size: 13.5px; font-weight: 600; }
.sendv__cap { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); text-align: center; }

.sendv__win { animation: lk-send-win 6.4s var(--ease) infinite; }
.sendv__sp--1 .sendv__th { animation: lk-send-from 6.4s var(--ease) infinite; }
.sendv__sp--3 .sendv__th { animation: lk-send-to 6.4s var(--ease) infinite; }
.sendv__keys .keycap { animation: lk-send-key 6.4s var(--ease) infinite; }
.sendv__hud { animation: lk-send-hud 6.4s var(--ease) infinite; }
/* The reset runs in order: the window fades on 3 (82 to 86%), the ring goes
   back to 1 (84 to 88%), and only then does the window come back on 1, so no
   frame shows the window on one Space and the display on another. */
@keyframes lk-send-win {
  0%, 16%   { transform: translate(0, 0); opacity: 1; }
  22%       { transform: translate(0, -1.6cqw) scale(1.04); }
  34%       { transform: translate(25.75cqw, -7cqw) scale(0.9); }
  46%, 82%  { transform: translate(51.5cqw, 0); opacity: 1; }
  86%       { transform: translate(51.5cqw, 0); opacity: 0; }
  87%, 89%  { transform: translate(0, 0); opacity: 0; }
  95%, 100% { transform: translate(0, 0); opacity: 1; }
}
/* Going with the window: the display follows once it has landed. */
@keyframes lk-send-from {
  0%, 48%   { box-shadow: 0 0 0 2.5px var(--ink), 0 10px 22px rgba(40, 40, 80, 0.18); }
  54%, 84%  { box-shadow: 0 0 0 0 transparent, 0 10px 22px rgba(40, 40, 80, 0.18); }
  88%, 100% { box-shadow: 0 0 0 2.5px var(--ink), 0 10px 22px rgba(40, 40, 80, 0.18); }
}
@keyframes lk-send-to {
  0%, 48%   { box-shadow: 0 0 0 0 transparent, 0 10px 22px rgba(40, 40, 80, 0.18); }
  54%, 84%  { box-shadow: 0 0 0 2.5px var(--ink), 0 10px 22px rgba(40, 40, 80, 0.18); }
  88%, 100% { box-shadow: 0 0 0 0 transparent, 0 10px 22px rgba(40, 40, 80, 0.18); }
}
@keyframes lk-send-key {
  0%, 9%    { transform: none; }
  12%, 18%  { transform: translateY(2px); background: linear-gradient(#ECECF1, #E2E2E8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.08); }
  22%, 100% { transform: none; }
}
@keyframes lk-send-hud {
  0%, 48%   { opacity: 0; transform: translateY(4px); }
  54%, 78%  { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: none; }
}

/* --------------------------------------------------------------------------
   The swipe strip: a black strip grows out of the notch while the fingers are
   down, a tile per Space, and a ring that steps with the swipe
   Drawn from SwipeStrip.swift: 64 by 46 tiles 12 apart, 16 at the sides, 8
   under the notch, 10pt labels, a white ring 3 outside the tile, the target at
   full strength and the rest at half, a desktop with no windows shown as a
   faint desktop. Every length is a multiple of --u, a point of the app's
   strip, so the drawing keeps the app's proportions at any width. One 7.2s
   loop: the strip grows (6 to 18%), the ring steps at 30% and 46%, the
   fingers lift at 66%, and the strip tucks back 0.7s later. The base styles
   are the strip open on its last step.
   -------------------------------------------------------------------------- */
.notchv { --u: 0.152cqw; container-type: inline-size; width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.notchv__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.4;
  border: 6px solid #141416;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, #6C7BD8, #B084C6 60%, #F29BB6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.notchv__bar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(32 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
  font-size: max(7px, calc(12 * var(--u)));
  font-weight: 500;
}
.notchv__menu { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.notchv__menu i { font-style: normal; }
.notchv__menu i:first-of-type { font-weight: 700; }
.notchv__menu b { width: calc(11 * var(--u)); height: calc(13 * var(--u)); border-radius: 40% 40% 45% 45%; background: rgba(255, 255, 255, 0.95); }
/* The notch, always there; the strip grows from it and tucks back into it. */
.notchv__screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(200 * var(--u));
  height: calc(32 * var(--u));
  margin-left: calc(-100 * var(--u));
  border-radius: 0 0 calc(12 * var(--u)) calc(12 * var(--u));
  background: #000;
}
.notchv__win { position: absolute; border-radius: calc(8 * var(--u)); background: rgba(255, 255, 255, 0.82); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.18); }
.notchv__win--a { left: 7%; top: 44%; width: 36%; height: 70%; }
.notchv__win--b { left: 52%; top: 58%; width: 40%; height: 60%; background: rgba(255, 255, 255, 0.6); }
.notchv__strip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: calc(400 * var(--u));
  height: calc(113 * var(--u));
  margin-left: calc(-200 * var(--u));
  border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u));
  background: #000;
  transform-origin: 50% 0;
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.25);
}
.notchv__tiles { position: absolute; left: calc(16 * var(--u)); top: calc(40 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.notchv__t { width: calc(64 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); opacity: 0.5; }
.notchv__t:nth-child(3) { opacity: 1; }
.notchv__tile {
  width: 100%;
  height: calc(46 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notchv__t--full .notchv__tile { background: rgba(255, 255, 255, 0.06); }
.notchv__t small { font-size: max(6px, calc(10 * var(--u))); line-height: calc(13 * var(--u)); font-weight: 600; color: #fff; white-space: nowrap; }
/* App icons, front to back and overlapping by 9, as the strip stacks them. */
.notchv__ic { position: relative; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(6 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.4); }
.notchv__ic:only-child { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(7.5 * var(--u)); }
.notchv__ic + .notchv__ic { margin-left: calc(-9 * var(--u)); }
.notchv__ic--1 { z-index: 3; background: linear-gradient(160deg, #6FB7FF, #2F6BEA); }
.notchv__ic--2 { z-index: 2; background: linear-gradient(160deg, #FFC56B, #F2803A); }
.notchv__ic--3 { z-index: 1; background: linear-gradient(160deg, #7EE29B, #2FAE5B); }
/* An empty desktop: a desktop with its menu bar and Dock, drawn faintly. */
.notchv__t--empty .notchv__tile::before {
  content: "";
  width: calc(24 * var(--u));
  height: calc(17 * var(--u));
  border: max(1px, calc(1.6 * var(--u))) solid rgba(255, 255, 255, 0.55);
  border-radius: calc(3 * var(--u));
  box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.35);
}
.notchv__ring {
  position: absolute;
  left: calc(-3 * var(--u));
  top: calc(-3 * var(--u));
  width: calc(70 * var(--u));
  height: calc(52 * var(--u));
  border: max(1.5px, calc(2 * var(--u))) solid #fff;
  border-radius: calc(10 * var(--u));
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(calc(152 * var(--u)));
}
/* On a phone the strip at the app's own scale leaves 10pt labels too small to
   tell apart, so the screen is drawn closer: the strip takes 80% of it. */
@container (max-width: 440px) {
  .notchv__screen { --u: 0.2cqw; }
}
.notchv__pad { position: relative; width: min(64%, 300px); height: 62px; border-radius: 16px; border: 1px solid var(--line-mid); background: var(--surface-2); }
.notchv__dots { position: absolute; top: 50%; left: 34%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); opacity: 0.8; }
.notchv__dots::before,
.notchv__dots::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: inherit; }
.notchv__dots::before { left: -22px; top: 4px; }
.notchv__dots::after { left: 22px; top: -2px; }

.notchv__strip { animation: lk-strip 7.2s var(--ease) infinite; }
.notchv__tiles { animation: lk-strip-tiles 7.2s linear infinite; }
.notchv__ring { animation: lk-strip-ring 7.2s var(--ease) infinite; }
.notchv__t:nth-child(1) { animation: lk-strip-t1 7.2s linear infinite; }
.notchv__t:nth-child(2) { animation: lk-strip-t2 7.2s linear infinite; }
.notchv__t:nth-child(3) { animation: lk-strip-t3 7.2s linear infinite; }
.notchv__dots { animation: lk-strip-fingers 7.2s linear infinite; }
@keyframes lk-strip {
  0%, 6%    { transform: scale(0.5, 0.283); }
  14%       { transform: scale(1.025, 1.04); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  18%, 76%  { transform: scale(1); }
  84%, 100% { transform: scale(0.5, 0.283); }
}
@keyframes lk-strip-tiles {
  0%, 9%    { opacity: 0; }
  15%, 75%  { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes lk-strip-ring {
  0%, 27%   { transform: translateX(0); }
  30%, 43%  { transform: translateX(calc(76 * var(--u))); }
  46%, 100% { transform: translateX(calc(152 * var(--u))); }
}
@keyframes lk-strip-t1 { 0%, 28% { opacity: 1; } 30%, 100% { opacity: 0.5; } }
@keyframes lk-strip-t2 { 0%, 28% { opacity: 0.5; } 30%, 44% { opacity: 1; } 46%, 100% { opacity: 0.5; } }
@keyframes lk-strip-t3 { 0%, 44% { opacity: 0.5; } 46%, 100% { opacity: 1; } }
@keyframes lk-strip-fingers {
  0%, 4%    { left: 72%; opacity: 0; }
  9%        { left: 72%; opacity: 0.8; }
  46%, 62%  { left: 34%; opacity: 0.8; }
  66%, 100% { left: 34%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   The grid of small feature cards
   -------------------------------------------------------------------------- */
.fgrid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.fcard {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
  overflow: hidden;
}
.fcard::before {
  /* A soft light that follows the pointer. The script sets --mx and --my. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(108, 123, 216, 0.13), transparent 70%);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.fcard:hover { transform: translateY(-3px); border-color: rgba(0, 0, 0, 0.16); box-shadow: var(--shadow-2); }
.fcard:hover::before { opacity: 1; }
.fcard__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.fcard h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.fcard p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.section--tint .fcard { background: var(--surface); }

.subhead {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.subhead h3 {
  margin: 0;
  font-size: clamp(24px, 20px + 1.2vw, 34px);
  letter-spacing: -0.024em;
  line-height: 1.12;
  font-weight: 600;
}
.subhead p { margin: 0; max-width: 560px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }

/* ==========================================================================
   The Pro band: one dark sheet on the light page
   ========================================================================== */
.pro-wrap { padding-inline: clamp(8px, 0.5rem + 1.6vw, 28px); }
.pro {
  --ink: #F5F5F7;
  --ink-2: #C9C9CF;
  --ink-3: #9C9CA6;
  --surface: #0A0A0D;
  --surface-2: #15151A;
  --tile: #222228;
  --line-faint: rgba(255, 255, 255, 0.05);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.13);
  --rule: rgba(255, 255, 255, 0.14);
  --line-mid: rgba(255, 255, 255, 0.17);
  --line-strong: rgba(255, 255, 255, 0.26);
  --line-hard: rgba(255, 255, 255, 0.34);
  --line-active: rgba(255, 255, 255, 0.55);
  --accent: #F5F5F7;
  --on-accent: #0A0A0D;
  --signal: #F5F5F7;
  --signal-06: rgba(255, 255, 255, 0.07);
  position: relative;
  border-radius: var(--r-stage);
  background:
    radial-gradient(70% 38% at 12% 0%, rgba(108, 123, 216, 0.30), transparent 70%),
    radial-gradient(60% 34% at 92% 8%, rgba(242, 155, 182, 0.20), transparent 70%),
    radial-gradient(70% 30% at 50% 100%, rgba(176, 132, 198, 0.20), transparent 70%),
    #08080B;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.pro a { color: var(--ink); }
.pro a:hover { color: #fff; }
.pro .btn--fill, .pro .btn--fill:hover { color: var(--on-accent); }
.pro :focus-visible { outline-color: #fff; }
.pro::before {
  /* A fine grid that fades out, so the black has some surface. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
}
.pro__in {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 44px + 5vw, 120px);
  padding-block: clamp(64px, 48px + 4.2vw, 116px) clamp(60px, 44px + 4vw, 108px);
}

.pro__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 13px + 0.8vw, 24px);
}
.probadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.probadge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: lk-shimmer 4.8s ease-in-out 1.2s infinite;
}
@keyframes lk-shimmer { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.pro h2.title { color: #fff; max-width: 16ch; }
.pro .lead { color: var(--ink-2); }
.pro__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: 4px;
}
.pro__price { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-2); }
.pro__price b { font-size: 30px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.pro__price s { color: var(--ink-3); }
.assure {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 14px;
  color: var(--ink-2);
}
.assure li { display: inline-flex; align-items: center; gap: 8px; }
.assure svg { color: #fff; opacity: 0.9; }

.pro__block { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 20px + 2vw, 44px); }
.pro .subhead p { color: var(--ink-2); }
.pro .subhead h3 { color: #fff; }
.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   iPhone surfaces: ten ways in (eight before iPhone 1.1), one phone that
   shows the one you chose
   -------------------------------------------------------------------------- */
.surfaces {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}
@media (min-width: 960px) {
  .surfaces { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; }
}
.surfaces__tabs { display: flex; gap: 10px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.surfaces__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 960px) {
  .surfaces__tabs { flex-direction: column; overflow: visible; margin-inline: 0; padding: 0; gap: 8px; }
}
.pro .stab {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.pro .stab:hover { background: rgba(255, 255, 255, 0.06); }
.pro .stab[aria-selected="true"] { background: rgba(255, 255, 255, 0.09); border-color: var(--line-active); box-shadow: none; }
.pro .stab__icon { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pro .stab[aria-selected="true"] .stab__icon { background: #fff; color: #0A0A0D; }
/* A thin bar that fills while a tab is open, then hands over to the next. */
.stab__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}
.surfaces.is-auto .stab[aria-selected="true"] .stab__timer { animation: lk-timer var(--auto, 6500ms) linear forwards; }
@keyframes lk-timer { to { transform: scaleX(1); } }

.surfaces__stage {
  position: relative;
  min-height: clamp(560px, 480px + 16vw, 680px);
  border-radius: var(--r-stage);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(108, 123, 216, 0.30), transparent 70%),
    radial-gradient(40% 40% at 78% 80%, rgba(242, 155, 182, 0.22), transparent 70%),
    rgba(255, 255, 255, 0.025);
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 22px 12px;
  container-type: inline-size;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97) translateY(10px);
  transition: opacity 460ms var(--ease), transform 560ms var(--ease), visibility 0s linear 460ms;
}
.scene.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (scripting: none) {
  .scene { display: none; }
  .scene:first-child { display: flex; position: relative; opacity: 1; visibility: visible; transform: none; }
}
.scene .phone { --w: 250; }
@media (min-width: 1100px) { .scene .phone { --w: 262; } }
@media (max-width: 480px) { .scene .phone { --w: 232; } }
/* On its side a phone is 43.46em wide (20em tall at 2868 by 1320), so the
   scene's width caps it. Without the cap it was cut off on both sides: 413px
   in a 281px scene on a 375px phone, and 543px in a 477px scene in a window
   1024px wide (2026-10-22). */
.scene .phone--land { --w: 250; font-size: min(calc(var(--w) * 1px / 20), 100cqw / 43.46); }
@media (max-width: 640px) { .scene .phone--land { --w: 190; } }
.scene__cap {
  max-width: 34ch;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- the drawn phone screens ---- */
.wall {
  background:
    radial-gradient(90% 55% at 15% 8%, #7C8CE6 0%, transparent 60%),
    radial-gradient(80% 50% at 95% 45%, #F29BB6 0%, transparent 62%),
    radial-gradient(90% 50% at 25% 100%, #B084C6 0%, transparent 60%),
    #4B58B5;
  color: #fff;
}
.wall--b {
  background:
    radial-gradient(90% 60% at 80% 10%, #F6B28F 0%, transparent 60%),
    radial-gradient(90% 55% at 10% 55%, #8E7BD6 0%, transparent 62%),
    radial-gradient(80% 50% at 70% 100%, #5E8BE0 0%, transparent 60%),
    #6A4FB0;
}
.sb {
  position: absolute;
  inset: 1.5em 2.2em auto 2.2em;
  display: flex;
  justify-content: space-between;
  font-size: 1.04em;
  font-weight: 600;
  letter-spacing: 0.01em;
  z-index: 2;
}
.sb i { display: inline-block; width: 1.9em; height: 0.9em; border-radius: 0.3em; border: 0.09em solid rgba(255,255,255,.9); position: relative; margin-left: .4em; vertical-align: -0.1em; }
.sb i::after { content: ""; position: absolute; inset: 0.1em; border-radius: 0.14em; background: #fff; }

/* Widgets, drawn the way SpacesWidget lays them out: a quaternary fill for the
   widget, a tertiary fill for each button, the slot number small and above the
   name. */
.wdg {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(1.4em) saturate(1.3);
  -webkit-backdrop-filter: blur(1.4em) saturate(1.3);
  border-radius: 1.5em;
  padding: 0.7em;
  box-shadow: 0 0 0 0.05em rgba(255, 255, 255, 0.22) inset, 0 0.8em 1.8em rgba(0, 0, 0, 0.14);
  display: grid;
  gap: 0.45em;
}
.wdg--medium { width: 100%; height: 7.3em; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.wdg--small  { width: 7.3em; height: 7.3em; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.wdg--large  { width: 100%; height: 15.6em; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.wbtn {
  border-radius: 0.8em;
  background: rgba(255, 255, 255, 0.24);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.1em;
  padding: 0.5em 0.6em;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  min-width: 0;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), color 200ms var(--ease);
}
.wbtn small { font-size: 0.8em; font-weight: 600; opacity: 0.75; }
.wbtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdg--small .wbtn { font-size: 0.7em; padding: 0.4em 0.5em; }
.wdg--one {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  align-content: center;
  justify-items: start;
  padding: 1em;
  gap: 0.6em;
}
.wdg--one svg { width: 1.9em; height: 1.9em; }
.wdg--one b { font-size: 1.15em; letter-spacing: -0.01em; }
.wdg--one small { font-size: 0.8em; opacity: 0.8; }
.scene--widgets .phone__screen { padding: 5.4em 1.6em 0; display: flex; flex-direction: column; gap: 0.9em; }
.wrow { display: flex; gap: 0.9em; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em 0.6em; margin-top: 0.4em; }
.app { aspect-ratio: 1; border-radius: 22%; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0.3em 0.8em rgba(0,0,0,.14); }
.app:nth-child(3n) { background: rgba(255, 255, 255, 0.34); }
.app:nth-child(4n+2) { background: rgba(255, 255, 255, 0.62); }
.dock {
  position: absolute;
  left: 1em; right: 1em; bottom: 1em;
  height: 6.2em;
  border-radius: 2em;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0.8em;
  padding: 0.9em;
}
.dock .app { background: rgba(255, 255, 255, 0.7); }

/* A tap: the button lights up, and the Mac says where it went. */
@keyframes lk-hit {
  0%, 12%   { background: rgba(255, 255, 255, 0.24); transform: none; }
  18%       { background: rgba(255, 255, 255, 0.95); color: #2b2f66; transform: scale(0.94); }
  24%, 80%  { background: rgba(255, 255, 255, 0.95); color: #2b2f66; transform: none; }
  90%, 100% { background: rgba(255, 255, 255, 0.24); transform: none; }
}
.is-open .wbtn.is-hit, .is-open .lw.is-hit { animation: lk-hit 5s var(--ease) infinite; }
.toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
}
.toast svg { width: 15px; height: 15px; }
@keyframes lk-toast {
  0%, 20%   { opacity: 0; transform: translateY(8px); }
  28%, 78%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-4px); }
}
.is-open .toast { animation: lk-toast 5s var(--ease) infinite; }

/* ---- Lock Screen ---- */
.lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 4.4em; }
.lock__date { font-size: 1.15em; font-weight: 600; opacity: 0.9; }
.lock__time { font-size: 6.2em; line-height: 1; font-weight: 600; letter-spacing: -0.03em; margin-top: 0.1em; font-variant-numeric: tabular-nums; }
.lock__row { display: flex; gap: 0.8em; margin-top: 1.4em; }
.lw {
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lw--circle { width: 4.4em; height: 4.4em; border-radius: 50%; font-weight: 600; flex-direction: column; font-variant-numeric: tabular-nums; }
.lw--circle span { font-size: 1.9em; line-height: 1; }
.lw--circle small { font-size: 0.72em; opacity: 0.8; font-weight: 600; margin-top: 0.1em; }
.lw--circle svg { width: 1em; height: 1em; }
.lw--rect { width: 16.4em; height: 3.9em; border-radius: 1.1em; justify-content: flex-start; gap: 0.8em; padding: 0 1.1em; margin-top: 0.8em; font-size: 1em; }
.lw--rect svg { width: 1.7em; height: 1.7em; flex: none; }
.lw--rect b { display: block; font-size: 1.1em; letter-spacing: -0.01em; }
.lw--rect small { display: block; opacity: 0.8; font-size: 0.85em; }
.lock__foot { position: absolute; left: 2.6em; right: 2.6em; bottom: 2.6em; display: flex; justify-content: space-between; }
.lock__foot span { width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(20, 20, 24, 0.35); }

/* ---- Control Center and the Action Button ---- */
.cc { position: absolute; inset: 0; padding: 5.2em 1.5em 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 4.3em; gap: 0.8em; align-content: start; }
.cc__t { border-radius: 1.5em; background: rgba(30, 30, 36, 0.38); backdrop-filter: blur(1.4em); -webkit-backdrop-filter: blur(1.4em); display: flex; align-items: center; justify-content: center; color: #fff; }
.cc__t svg { width: 1.7em; height: 1.7em; opacity: 0.9; }
.cc__t--w2 { grid-column: span 2; }
.cc__t--h2 { grid-row: span 2; }
.cc__t--leap {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.92);
  color: #20233f;
  justify-content: flex-start;
  gap: 0.8em;
  padding: 0 1em;
  box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.25);
}
.cc__t--leap svg { width: 2em; height: 2em; opacity: 1; flex: none; }
.cc__t--leap b { display: block; font-size: 0.95em; letter-spacing: -0.01em; line-height: 1.15; }
.cc__t--leap small { display: block; font-size: 0.74em; opacity: 0.65; font-weight: 600; }
.is-open .cc__t--leap { animation: lk-leap-ring 5s var(--ease) infinite; }
@keyframes lk-leap-ring {
  0%, 15%  { box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.25); }
  22%      { box-shadow: 0 0 0 0.9em rgba(255, 255, 255, 0.0); transform: scale(0.97); }
  30%, 100% { box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.25); transform: none; }
}
.phone--action .abtn {
  position: absolute;
  left: -0.5em;
  top: 5.7em;
  width: 0.34em;
  height: 1.7em;
  border-radius: 0.2em 0 0 0.2em;
  background: #ff9f43;
  box-shadow: 0 0 1.2em rgba(255, 159, 67, 0.75);
  z-index: 4;
}
.is-open .phone--action .abtn { animation: lk-abtn 5s var(--ease) infinite; }
@keyframes lk-abtn { 0%, 15% { transform: none; } 20%, 26% { transform: translateX(0.18em); } 34%, 100% { transform: none; } }

/* ---- Siri and Shortcuts ---- */
.sc { position: absolute; inset: 0; background: #F2F2F7; color: #111; padding: 4.4em 1.4em 0; display: flex; flex-direction: column; gap: 1em; }
.sc__head { display: flex; align-items: center; gap: 0.9em; }
.sc__icon { width: 3.2em; height: 3.2em; border-radius: 0.9em; background: linear-gradient(140deg, #6C7BD8, #B084C6); color: #fff; display: flex; align-items: center; justify-content: center; }
.sc__icon svg { width: 1.8em; height: 1.8em; }
.sc__title { font-size: 1.55em; font-weight: 700; letter-spacing: -0.02em; }
.sc__card { background: #fff; border-radius: 1.2em; padding: 0.9em 1em; display: flex; align-items: center; gap: 0.8em; box-shadow: 0 0.1em 0.4em rgba(0,0,0,.05); }
.sc__card .sc__icon { width: 2.4em; height: 2.4em; border-radius: 0.65em; background: #111; }
.sc__card .sc__icon svg { width: 1.4em; height: 1.4em; }
.sc__card b { font-size: 1.05em; letter-spacing: -0.01em; }
.sc__card small { display: block; color: #6b6b72; font-size: 0.9em; }
.sc__pill { margin-left: auto; padding: 0.25em 0.8em; border-radius: 99em; background: #E9E9EE; color: #3a3a40; font-size: 0.95em; font-weight: 600; }
.sc__add { background: #fff; border-radius: 99em; text-align: center; padding: 0.8em; font-weight: 600; color: #3a56d6; font-size: 1em; }
.siri {
  position: absolute;
  left: 1.2em; right: 1.2em; bottom: 1.6em;
  border-radius: 2em;
  padding: 1.2em 1.4em;
  background: rgba(20, 20, 26, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1em;
  box-shadow: 0 1.6em 3em rgba(0, 0, 0, 0.35), 0 0 0 0.12em rgba(255, 255, 255, 0.12) inset;
  overflow: hidden;
}
.siri::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 100%;
  background: radial-gradient(closest-side, rgba(108, 123, 216, 0.6), transparent), radial-gradient(closest-side at 70% 60%, rgba(242, 155, 182, 0.5), transparent);
  filter: blur(1.4em);
  opacity: 0.8;
}
.siri__orb { position: relative; width: 2.8em; height: 2.8em; border-radius: 50%; flex: none; background: conic-gradient(from 0deg, #6C7BD8, #F29BB6, #B084C6, #6C7BD8); box-shadow: 0 0 1.4em rgba(176, 132, 198, 0.9); }
.is-open .siri__orb { animation: lk-spin 6s linear infinite; }
@keyframes lk-spin { to { transform: rotate(360deg); } }
.siri__q { position: relative; font-size: 1.3em; font-weight: 600; letter-spacing: -0.01em; }
.siri__q small { display: block; font-size: 0.62em; opacity: 0.7; font-weight: 500; letter-spacing: 0; }

/* ---- Mac Shortcuts on the deck ---- */
.deck { position: absolute; inset: 0; background: #F2F2F7; color: #111; padding: 4.6em 1.3em 0; display: flex; flex-direction: column; gap: 0.9em; }
.deck__title { font-size: 2.1em; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 0.2em; }
.deck__meta { font-size: 0.95em; color: #6b6b72; margin-top: -0.4em; }
.deck__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }
.deck__tile { border-radius: 1.3em; background: #fff; padding: 0.7em; min-height: 6.6em; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4em; font-weight: 600; font-size: 0.95em; box-shadow: 0 0 0 0.06em rgba(0,0,0,.06) inset; }
.deck__tile i { flex: 1; border-radius: 0.8em; background: linear-gradient(135deg, #7C8CE6, #B98BCB); display: block; min-height: 3em; }
.deck__tile.is-on { background: #000; color: #fff; }
.deck__h { font-size: 0.9em; font-weight: 600; color: #6b6b72; margin-top: 0.4em; }
.deck__row { border-radius: 1.2em; background: #fff; padding: 0.95em 1.1em; display: flex; align-items: center; gap: 0.7em; font-weight: 600; font-size: 1.02em; box-shadow: 0 0 0 0.06em rgba(0,0,0,.06) inset; }
.deck__row svg { width: 1.2em; height: 1.2em; }
.deck__row.is-hit { animation: none; }
.is-open .deck__row.is-hit { animation: lk-row 5s var(--ease) infinite; }
@keyframes lk-row { 0%, 14% { background: #fff; } 20%, 70% { background: #E5E7FF; } 90%, 100% { background: #fff; } }
.deck__row small { margin-left: auto; font-weight: 500; color: #8a8a92; font-size: 0.85em; }

/* Panic: the real deck screenshot with the red button painted over the locked row. */
.panic-over {
  position: absolute;
  z-index: 2;
  left: 3.7%;
  width: 92.4%;
  top: 72%;
  height: 5%;
  border-radius: 1.5em;
  background: #E5453D;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0 1em;
  font-size: 1.05em;
  font-weight: 700;
  box-shadow: 0 0.6em 1.4em rgba(229, 69, 61, 0.45);
}
.panic-over svg { width: 1.25em; height: 1.25em; }
.is-open .panic-over { animation: lk-panic 5s var(--ease) infinite; }
@keyframes lk-panic { 0%, 14% { transform: none; filter: none; } 20% { transform: scale(0.97); filter: brightness(1.15); } 28%, 100% { transform: none; filter: none; } }
.panic-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 360px; }
.step {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-strong);
  font-size: 13px; color: #fff; opacity: 0.35;
}
.step svg { width: 15px; height: 15px; }
.is-open .step { animation: lk-step 5s var(--ease) infinite; }
.is-open .step:nth-child(3) { animation-delay: 0.5s; }
@keyframes lk-step { 0%, 18% { opacity: 0.35; } 30%, 80% { opacity: 1; } 95%, 100% { opacity: 0.35; } }
.panic-flow > svg { width: 16px; height: 16px; opacity: 0.6; }

/* ---- Every Mac ---- */
.macs { position: absolute; inset: 0; background: #F2F2F7; color: #111; padding: 4.2em 1.2em 0; display: flex; flex-direction: column; gap: 1em; }
.macs__bar { display: flex; justify-content: center; align-items: center; position: relative; font-weight: 700; font-size: 1.15em; }
.macs__done { position: absolute; right: 0; top: -0.2em; background: #fff; border-radius: 99em; padding: 0.45em 1em; font-size: 0.8em; font-weight: 600; box-shadow: 0 0.1em 0.5em rgba(0,0,0,.12); }
.macs__list { background: #fff; border-radius: 1.6em; overflow: hidden; }
.macs__row { display: flex; align-items: center; gap: 0.9em; padding: 0.9em 1em; font-size: 1.05em; }
.macs__row + .macs__row { border-top: 0.05em solid rgba(0,0,0,.08); }
.macs__tile { width: 2.4em; height: 2.4em; border-radius: 0.7em; background: #E7E7EC; display: flex; align-items: center; justify-content: center; flex: none; }
.macs__row.is-on .macs__tile { background: #000; color: #fff; }
.macs__tile svg { width: 1.4em; height: 1.4em; }
.macs__row b { display: block; letter-spacing: -0.01em; }
.macs__row small { display: block; color: #6b6b72; font-size: 0.85em; }
.macs__row .tick { margin-left: auto; }
.macs__note { color: #6b6b72; font-size: 0.85em; padding: 0 0.6em; line-height: 1.4; }
.pillpro { margin-left: auto; font-size: 0.7em; font-weight: 700; letter-spacing: 0.04em; background: #000; color: #fff; border-radius: 99em; padding: 0.25em 0.7em; }

/* ==========================================================================
   Pro on the Mac: ten cards, each with a small loop that shows the thing
   ========================================================================== */
.bento {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.bcard {
  grid-column: span 12;
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 320ms var(--ease), transform 320ms var(--ease);
}
.bcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(176, 132, 198, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.bcard:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.bcard:hover::before { opacity: 1; }
@media (min-width: 760px) {
  .bcard--6 { grid-column: span 6; }
  .bcard--4 { grid-column: span 4; }
  .bcard--7 { grid-column: span 7; }
  .bcard--5 { grid-column: span 5; }
}
@media (min-width: 760px) and (max-width: 1019px) {
  .bcard--4 { grid-column: span 6; }
  .bcard--7, .bcard--5 { grid-column: span 12; }
}
.bcard__vis {
  height: 236px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--line-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.bcard__t { display: flex; flex-direction: column; gap: 8px; }
.bcard h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.bcard h3 svg { color: var(--ink-2); }
.bcard p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---- Names: a field that types the new name ---- */
.vn { display: flex; flex-direction: column; gap: 10px; width: min(86%, 340px); }
.vn__row { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 14px; color: #fff; }
.vn__ico { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #7C8CE6, #B98BCB); }
.vn__old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); white-space: nowrap; }
.vn__row svg { color: var(--ink-3); width: 14px; height: 14px; }
.vn__new { font-weight: 600; white-space: nowrap; display: inline-flex; }
.vn__typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid #fff; animation: lk-type 7s steps(9, end) infinite; }
.vn__row:nth-child(2) .vn__typed { animation-delay: 0.6s; }
@keyframes lk-type {
  0%, 6%   { width: 0; border-right-color: #fff; }
  34%, 84% { width: 9ch; border-right-color: transparent; }
  95%, 100% { width: 0; border-right-color: #fff; }
}
.vn__note { font-size: 12.5px; color: var(--ink-3); text-align: center; padding-top: 2px; }

/* ---- Quick Switcher ---- */
.qs {
  width: min(86%, 300px);
  border-radius: 18px;
  background: rgba(60, 60, 68, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 22px 40px rgba(0, 0, 0, 0.45);
  padding: 12px;
  color: #fff;
  font-size: 14px;
}
.qs__field { height: 30px; display: flex; align-items: center; gap: 2px; padding: 0 6px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); margin-bottom: 6px; position: relative; font-size: 15px; }
.qs__ph { position: absolute; left: 6px; color: rgba(255, 255, 255, 0.5); animation: lk-qs-ph 7s linear infinite; }
.qs__typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: lk-qs-type 7s steps(2, end) infinite; }
.qs__caret { width: 2px; height: 16px; background: #6C8BFF; animation: lk-blink 1s steps(2, start) infinite; }
.qs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.qs__row { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; border-radius: 9px; overflow: hidden; }
.qs__row i { width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.22); flex: none; }
.qs__row b { margin-left: auto; font-weight: 500; color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.qs__row:not(.is-match) { animation: lk-qs-out 7s var(--ease) infinite; }
.qs__row.is-match { animation: lk-qs-on 7s var(--ease) infinite; }
.qs__row:nth-child(1) { animation-delay: 0s; }
@keyframes lk-blink { 50% { opacity: 0; } }
@keyframes lk-qs-ph { 0%, 8% { opacity: 1; } 12%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes lk-qs-type { 0%, 8% { width: 0; } 24%, 90% { width: 2ch; } 96%, 100% { width: 0; } }
@keyframes lk-qs-out {
  0%, 26%   { opacity: 1; height: 30px; }
  36%, 90%  { opacity: 0; height: 0; margin: 0; }
  98%, 100% { opacity: 1; height: 30px; }
}
@keyframes lk-qs-on {
  0%, 26%   { background: transparent; }
  36%, 72%  { background: rgba(108, 139, 255, 0.85); }
  80%, 90%  { background: rgba(108, 139, 255, 0.85); transform: scale(0.98); }
  98%, 100% { background: transparent; transform: none; }
}
.qs-keys { position: absolute; right: 12px; bottom: 10px; }

/* ---- Jump Back ---- */
.vb { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 28px); width: 100%; padding: 0 14px; }
.vb__th {
  position: relative;
  width: 36%;
  max-width: 130px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: linear-gradient(135deg, #5D6FC9, #B084C6 70%, #E996B7);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  display: flex; align-items: flex-end; padding: 7px 9px;
  font-size: 12px; font-weight: 600; color: #fff;
  opacity: 0.45; filter: saturate(0.6);
  transition: opacity 300ms, filter 300ms;
}
.vb__th.is-a { animation: lk-vb-a 4s var(--ease) infinite; }
.vb__th.is-b { animation: lk-vb-b 4s var(--ease) infinite; }
@keyframes lk-vb-a { 0%, 42% { opacity: 1; filter: none; transform: scale(1.05); } 50%, 92% { opacity: .45; filter: saturate(.6); transform: none; } 100% { opacity: 1; filter: none; transform: scale(1.05); } }
@keyframes lk-vb-b { 0%, 42% { opacity: .45; filter: saturate(.6); transform: none; } 50%, 92% { opacity: 1; filter: none; transform: scale(1.05); } 100% { opacity: .45; filter: saturate(.6); transform: none; } }
.vb__arrows { color: #fff; opacity: 0.9; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vb__arrows svg { width: 34px; height: 34px; }
.vb__arrows .keycap { font-size: 12px; height: 2.1em; white-space: nowrap; }

/* ---- Links and Shortcuts ---- */
.vl { width: min(92%, 420px); display: flex; flex-direction: column; gap: 12px; }
.code {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  font: 500 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #D6D6DC;
  white-space: pre;
  overflow: hidden;
}
.code span { display: block; padding: 0 6px; margin: 0 -6px; border-radius: 6px; }
.code .k { display: inline; padding: 0; margin: 0; color: #8FA2FF; }
.code .s { display: inline; padding: 0; margin: 0; color: #F2A8C2; }
.code span:nth-child(1) { animation: lk-code 8s var(--ease) infinite; }
.code span:nth-child(2) { animation: lk-code 8s var(--ease) 2s infinite; }
.code span:nth-child(3) { animation: lk-code 8s var(--ease) 4s infinite; }
.code span:nth-child(4) { animation: lk-code 8s var(--ease) 6s infinite; }
@keyframes lk-code { 0%, 4% { background: transparent; } 8%, 22% { background: rgba(143, 162, 255, 0.22); } 28%, 100% { background: transparent; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { list-style: none; }
.chip2 { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 12.5px; color: #E7E7EC; background: rgba(255,255,255,.05); }
.chips { margin: 0; padding: 0; }

/* ---- Long swipe: the selection keeps going while the fingers do ---- */
.vs { width: min(90%, 380px); display: flex; flex-direction: column; gap: 18px; }
.vs__row { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px var(--line-soft) inset; }
.vs__th { aspect-ratio: 16 / 11; display: flex; align-items: flex-end; justify-content: flex-end; padding: 5px 7px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); border-right: 1px solid var(--line-faint); }
.vs__th:last-of-type { border-right: 0; }
.vs__sel { position: absolute; top: 0; left: 0; width: calc(100% / 6); height: 100%; border-radius: 10px; background: linear-gradient(135deg, #7C8CE6, #B98BCB); box-shadow: 0 0 0 2px #fff inset, 0 8px 20px rgba(124,140,230,.5); animation: lk-sweep 7s linear infinite; }
@keyframes lk-sweep {
  0%, 6%   { transform: translateX(0); animation-timing-function: var(--e, cubic-bezier(0.2, 0.8, 0.2, 1)); }
  14%      { transform: translateX(100%); }
  24%      { transform: translateX(200%); }
  34%      { transform: translateX(300%); }
  44%, 52% { transform: translateX(400%); }
  60%      { transform: translateX(300%); }
  70%, 92% { transform: translateX(200%); }
  100%     { transform: translateX(0); }
}
.vs__pad { position: relative; height: 54px; border-radius: 14px; border: 1px solid var(--line-mid); background: rgba(255,255,255,.04); }
.vs__dot { position: absolute; top: 50%; left: 8%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.18); animation: lk-finger 7s linear infinite; }
.vs__dot::after { content: ""; position: absolute; left: 24px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: .55; }
@keyframes lk-finger {
  0%, 6%   { transform: translateX(0); }
  44%, 52% { transform: translateX(calc(var(--pad, 300px))); }
  70%, 92% { transform: translateX(calc(var(--pad, 300px) * 0.62)); }
  100%     { transform: translateX(0); }
}

/* ---- Reverse swipe ---- */
.vr { width: min(88%, 330px); display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.vr__sw { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.06); font-size: 14px; color: #fff; }
.sw { width: 44px; height: 26px; border-radius: 99px; background: rgba(255,255,255,.22); position: relative; animation: lk-sw-bg 6s var(--ease) infinite; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; animation: lk-sw-knob 6s var(--ease) infinite; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
@keyframes lk-sw-bg   { 0%, 40% { background: rgba(255,255,255,.22); } 50%, 92% { background: #34C759; } 100% { background: rgba(255,255,255,.22); } }
@keyframes lk-sw-knob { 0%, 40% { transform: none; } 50%, 92% { transform: translateX(18px); } 100% { transform: none; } }
.vr__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vr__th { aspect-ratio: 16 / 11; border-radius: 10px; background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px var(--line-soft) inset; display: flex; align-items: flex-end; padding: 4px 7px; font-size: 11px; color: rgba(255,255,255,.55); font-weight: 700; }
.vr__th:nth-child(2) { box-shadow: 0 0 0 1.5px rgba(255,255,255,.5) inset; color: #fff; }
.vr__th.t-left { animation: lk-vr-l 6s var(--ease) infinite; }
.vr__th.t-right { animation: lk-vr-r 6s var(--ease) infinite; }
@keyframes lk-vr-r { 0%, 40% { background: linear-gradient(135deg, #7C8CE6, #B98BCB); color: #fff; } 50%, 100% { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); } }
@keyframes lk-vr-l { 0%, 40% { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); } 50%, 92% { background: linear-gradient(135deg, #7C8CE6, #B98BCB); color: #fff; } 100% { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); } }
.vr__cap { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; justify-content: center; }
.vr__cap svg { width: 18px; height: 18px; }

/* ---- Panic ---- */
.vp { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 0 12px; }
.vp__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vp__safe { width: 92px; aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(135deg, #5D6FC9, #B084C6 70%, #E996B7); box-shadow: 0 10px 22px rgba(0,0,0,.35); display: flex; align-items: flex-end; padding: 6px 8px; font-size: 11px; font-weight: 600; color: #fff; }
.is-vis .vp__safe { animation: lk-vp 5s var(--ease) infinite; }
@keyframes lk-vp { 0%, 20% { box-shadow: 0 10px 22px rgba(0,0,0,.35); } 30%, 80% { box-shadow: 0 0 0 2px #fff, 0 10px 26px rgba(176,132,198,.6); } 100% { box-shadow: 0 10px 22px rgba(0,0,0,.35); } }
.pbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; background: #E5453D; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 8px 20px rgba(229,69,61,.4); }
.pbtn svg { width: 17px; height: 17px; }

/* ---- Windows stay on their Spaces: a sleep piles them up, and back they go ----
   One 8s loop, measured in the row's own width like the send in the Mac
   section: three columns 4% apart are 30.67cqw wide and 34.67cqw from one to
   the next. The Mac sleeps (16 to 30%), wakes with Code's and Notes' windows
   on Mail, the HUD says so, and they fly home. The base styles are every
   window at home with the HUD up. */
.vpb { width: min(90%, 440px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vpb__row { container-type: inline-size; position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4%; }
.vpb__sp { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.vpb__sp small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.vpb__th { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(135deg, #5D6FC9, #B084C6 70%, #E996B7); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); overflow: hidden; }
.vpb__th::before { content: ""; position: absolute; inset: 0 0 auto; height: 9%; background: rgba(255, 255, 255, 0.3); }
.vpb__win { position: absolute; z-index: 1; top: 5cqw; width: 16cqw; height: 10cqw; border-radius: 1.1cqw; background: #fff; box-shadow: 0 1cqw 2.2cqw rgba(0, 0, 0, 0.4); overflow: hidden; }
.vpb__win::before { content: ""; position: absolute; inset: 0 0 auto; height: 2cqw; background: #E8E8EE; }
.vpb__win::after { content: ""; position: absolute; left: 1.6cqw; top: 3.6cqw; width: 7cqw; height: 4.4cqw; border-radius: 0.8cqw; }
.vpb__win--a { left: 7.33cqw; }
.vpb__win--b { left: 42cqw; }
.vpb__win--c { left: 76.67cqw; }
.vpb__win--a::after { background: linear-gradient(160deg, #6FB7FF, #2F6BEA); }
.vpb__win--b::after { background: linear-gradient(160deg, #7EE29B, #2FAE5B); }
.vpb__win--c::after { background: linear-gradient(160deg, #FFC56B, #F2803A); }
.vpb__dim { position: absolute; z-index: 2; inset: -8px -8px -26px; border-radius: 14px; background: rgba(4, 4, 8, 0.86); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; }
.vpb__hud { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.10); border: 1px solid var(--line-soft); color: #fff; font-size: 13.5px; font-weight: 600; }
.vpb__win--b { animation: lk-pb-b 8s var(--ease) infinite; }
.vpb__win--c { animation: lk-pb-c 8s var(--ease) infinite; }
.vpb__dim { animation: lk-pb-dim 8s var(--ease) infinite; }
.vpb__hud { animation: lk-pb-hud 8s var(--ease) infinite; }
@keyframes lk-pb-b {
  0%, 24%   { transform: none; }
  25%, 44%  { transform: translate(-32.17cqw, 2cqw); }
  52%       { transform: translate(-15cqw, -5cqw) scale(0.92); }
  60%, 100% { transform: none; }
}
@keyframes lk-pb-c {
  0%, 24%   { transform: none; }
  25%, 47%  { transform: translate(-64.33cqw, 3.6cqw); }
  56%       { transform: translate(-31cqw, -6cqw) scale(0.92); }
  65%, 100% { transform: none; }
}
@keyframes lk-pb-dim { 0%, 14% { opacity: 0; } 19%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes lk-pb-hud { 0%, 37% { opacity: 0; transform: translateY(6px); } 42%, 82% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: none; } }

/* ---- A Shortcut for each Space: Meetings comes up, stays, and its Shortcut starts ----
   One 8s loop, the Spaces measured in their row's own width as the put back
   card's are: three columns 4% apart, 30.67cqw wide, 34.67cqw from one to the
   next. The ring leaps from Code to Meetings at 15%, the bar under Meetings
   fills for the half second a Space has to stay up (16 to 30%), the Shortcut
   lights at 32% and what it did shows at 36% and 40%, until 86%. The base
   styles are that last state, so reduced motion keeps a still that says it
   all. The rows on the left are the Hotkeys tab's, shown where there is room. */
.varr { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 6vw, 72px); width: 100%; padding: 0 18px; }
.varr__list { display: none; flex-direction: column; gap: 6px; width: 268px; flex: none; }
@media (min-width: 760px) { .varr__list { display: flex; } }
.varr__row { display: grid; grid-template-columns: 20px 20px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 13.5px; color: #fff; }
.varr__row .keycap { font-size: 11.5px; height: 2.3em; min-width: 2.9em; }
.varr__n { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.varr__row--on .varr__n { background: #fff; border-color: #fff; color: #0A0A0D; }
.varr__ico { width: 20px; height: 20px; border-radius: 6px; }
.varr__ico--a { background: linear-gradient(135deg, #7C8CE6, #B98BCB); }
.varr__ico--b { background: linear-gradient(160deg, #6FB7FF, #2F6BEA); }
.varr__ico--c { background: linear-gradient(160deg, #7EE29B, #2FAE5B); }
.varr__bolt { display: inline-flex; color: rgba(255, 255, 255, 0.32); }
.varr__bolt.is-set { color: #5B95FF; }
.varr__bolt.is-set svg path { fill: currentColor; }
.varr__flow { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(100%, 400px); }
.varr__spaces { container-type: inline-size; position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4%; }
.varr__sp { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.varr__sp small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.varr__th { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(135deg, #5D6FC9, #B084C6 70%, #E996B7); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); overflow: hidden; }
.varr__th::before { content: ""; position: absolute; inset: 0 0 auto; height: 9%; background: rgba(255, 255, 255, 0.3); }
.varr__settle { position: absolute; left: 10%; right: 10%; bottom: 12%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; opacity: 0; }
.varr__settle::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; }
.varr__ring { position: absolute; top: -1.2cqw; left: 33.47cqw; width: 33.07cqw; height: 21.57cqw; border: 2px solid #fff; border-radius: 13px; box-shadow: 0 0 22px rgba(176, 132, 198, 0.55); pointer-events: none; }
.varr__run { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.varr__sc { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.10); border: 1px solid var(--line-soft); color: #fff; font-size: 13.5px; font-weight: 600; }
.varr__scicon { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FF6F91, #F2803A); color: #fff; }
.varr__scicon svg path { fill: currentColor; }
.varr__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.varr__ring { animation: lk-arr-ring 8s var(--ease) infinite; }
.varr__settle { animation: lk-arr-settle 8s linear infinite; }
.varr__settle::after { animation: lk-arr-fill 8s linear infinite; }
.varr__sc { animation: lk-arr-sc 8s var(--ease) infinite; }
.varr__scicon { animation: lk-arr-scicon 8s var(--ease) infinite; }
.varr__chip--a { animation: lk-arr-chip-a 8s var(--ease) infinite; }
.varr__chip--b { animation: lk-arr-chip-b 8s var(--ease) infinite; }
.varr__row--on .varr__bolt { animation: lk-arr-bolt 8s var(--ease) infinite; }
@keyframes lk-arr-ring {
  0%, 14.5% { transform: translateX(-34.67cqw); opacity: 1; }
  15%, 86%  { transform: none; opacity: 1; }
  91%, 94%  { transform: none; opacity: 0; }
  95%       { transform: translateX(-34.67cqw); opacity: 0; }
  99%, 100% { transform: translateX(-34.67cqw); opacity: 1; }
}
@keyframes lk-arr-settle { 0%, 15% { opacity: 0; } 16%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes lk-arr-fill { 0%, 16% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
@keyframes lk-arr-sc {
  0%, 30%   { opacity: 0.45; box-shadow: none; }
  32%       { opacity: 1; box-shadow: 0 0 0 4px rgba(255, 111, 145, 0.25), 0 0 26px rgba(242, 128, 58, 0.45); }
  40%, 86%  { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 111, 145, 0); }
  92%, 100% { opacity: 0.45; box-shadow: none; }
}
@keyframes lk-arr-scicon { 0%, 30% { filter: grayscale(1) brightness(0.8); } 32%, 86% { filter: none; } 92%, 100% { filter: grayscale(1) brightness(0.8); } }
@keyframes lk-arr-chip-a { 0%, 34% { opacity: 0; transform: translateY(6px); } 38%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes lk-arr-chip-b { 0%, 38% { opacity: 0; transform: translateY(6px); } 42%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes lk-arr-bolt { 0%, 30% { transform: none; filter: none; } 32% { transform: scale(1.3); filter: drop-shadow(0 0 6px #5B95FF); } 38%, 100% { transform: none; filter: none; } }

/* ---- Send windows from anywhere: the links, and Shift and Return ---- */
.vsend { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.vsend .keycap { font-size: 13px; }

/* ==========================================================================
   Free or Pro: the whole table
   ========================================================================== */
.cmp {
  width: 100%;
  max-width: 940px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
}
.cmp__head, .cmp__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  align-items: center;
  column-gap: 6px;
  padding-inline: clamp(14px, 8px + 1.6vw, 26px);
}
@media (min-width: 640px) {
  .cmp__head, .cmp__r { grid-template-columns: minmax(0, 1fr) 110px 110px; }
}
.cmp__head {
  position: sticky;
  top: 92px;
  z-index: 4;
  height: 52px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: rgba(14, 14, 18, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cmp__head span:nth-child(n+2) { text-align: center; }
.cmp__head span:last-child { color: #fff; }
.cmp__g { padding: 22px clamp(14px, 8px + 1.6vw, 26px) 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.cmp__g--pro { color: #fff; }
.cmp__g--pro::after { content: "PRO"; font-size: 10.5px; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 99px; background: #fff; color: #0A0A0D; }
.cmp__r { min-height: 56px; padding-block: 10px; border-top: 1px solid var(--line-faint); position: relative; }
.cmp__l { font-size: 15px; line-height: 1.4; color: var(--ink); }
.cmp__l small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.cmp__c { text-align: center; font-size: 13.5px; color: var(--ink-2); display: flex; justify-content: center; }
.cmp__c svg { width: 18px; height: 18px; }
.cmp__c .no { width: 12px; height: 2px; border-radius: 2px; background: var(--line-strong); display: block; margin-top: 8px; }
.cmp__c .yes { color: #fff; }
.cmp__c--free .yes { color: var(--ink-2); }
.cmp__r:hover { background: rgba(255, 255, 255, 0.03); }
.cmp__foot { padding: 18px clamp(14px, 8px + 1.6vw, 26px) 22px; border-top: 1px solid var(--line-faint); font-size: 13.5px; color: var(--ink-3); line-height: 1.6; }

/* ==========================================================================
   Buy
   ========================================================================== */
.buy {
  position: relative;
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 860px) { .buy { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; } }
.bplan {
  border-radius: var(--r-card);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04);
  padding: clamp(24px, 18px + 1.6vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bplan h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.bplan__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bplan__price b { font-size: clamp(44px, 38px + 2vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: #fff; }
.bplan__price s { font-size: 19px; color: var(--ink-3); }
.bplan__price span { font-size: 15px; color: var(--ink-3); }
.bplan p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.bplan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.bplan li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.bplan li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
.bplan--pro li { color: var(--ink); }
.bplan--pro li svg { color: #fff; }
.bplan .btn { margin-top: auto; width: 100%; padding: 0; }
.badge-launch {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 99px;
  background: #fff; color: #0A0A0D; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
/* The Pro plan's edge: a slow light that travels round it. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bplan--pro {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(24, 24, 32, 0.96), rgba(12, 12, 16, 0.96)) padding-box,
    conic-gradient(from var(--ang), rgba(255,255,255,0.10), #8FA2FF 12%, #F2A8C2 26%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.10) 60%, #B084C6 78%, rgba(255,255,255,0.10)) border-box;
  border: 1.5px solid transparent;
  animation: lk-ang 9s linear infinite;
  box-shadow: 0 30px 80px -20px rgba(108, 123, 216, 0.45);
}
@keyframes lk-ang { to { --ang: 360deg; } }
.buy__fine { margin: 0; text-align: center; max-width: 760px; font-size: 14px; line-height: 1.75; color: var(--ink-3); }

/* ==========================================================================
   Download extras
   ========================================================================== */
.reqs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-3); }
.reqs li { display: inline-flex; align-items: center; gap: 7px; }
.reqs svg { width: 15px; height: 15px; }
.brew {
  width: 100%;
  max-width: 860px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}
.brew__k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.brew code { flex: 1; min-width: 0; font: 500 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.brew code::-webkit-scrollbar { display: none; }
.brew button { flex: none; height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color 200ms; }
.brew button:hover { background: var(--tile); }
@media (max-width: 560px) { .brew { flex-wrap: wrap; } .brew__k { width: 100%; } }

/* The iPhone block's three phones, cropped where the deck ends so the screens
   are not mostly white, and faded out at the bottom. */
.trio {
  position: relative;
  width: 100%;
  height: clamp(360px, 150px + 32vw, 600px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 3vw, 44px);
  padding-top: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 74%, transparent 100%);
  mask-image: linear-gradient(#000 74%, transparent 100%);
}
.trio .phone--side { --w: 200; margin-top: 40px; }
.trio .phone--mid { --w: 280; z-index: 2; }
@media (min-width: 860px) { .trio .phone--side { --w: 250; } .trio .phone--mid { --w: 330; } }
@media (max-width: 640px) { .trio .phone--side { --w: 128; margin-top: 24px; } .trio .phone--mid { --w: 200; } }
.trio__glow { position: absolute; inset: 8% 8% 0; z-index: -1; background: radial-gradient(50% 50% at 50% 45%, rgba(108, 123, 216, 0.28), transparent 70%), radial-gradient(34% 40% at 78% 60%, rgba(242, 155, 182, 0.24), transparent 70%); filter: blur(10px); }

/* ==========================================================================
   Odds and ends the markup uses
   ========================================================================== */
/* The menu bar row with the real menu hanging under it. */
.pstack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(100%, 560px); }
.pstack__menu { width: min(46%, 220px); align-self: flex-end; margin-right: 7%; }

.mon--sm { transform: scale(0.82); transform-origin: 50% 100%; }
.mon__win--a { left: 14%; top: 24%; width: 52%; height: 50%; }
.mon__win--b { left: 10%; top: 26%; width: 46%; height: 46%; }
.mon__win--b::after { content: ""; position: absolute; left: 112%; top: 14%; width: 88%; height: 98%; border-radius: 5px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18); }
.mon__cursor { position: absolute; right: 16%; bottom: 14%; color: #fff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); animation: lk-cursor 5s var(--ease) infinite; }
@keyframes lk-cursor { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-22px, -10px); } }

/* The note between the iPhone's free cards and the Pro band. */
.bridge {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: clamp(24px, 18px + 1.8vw, 40px);
  border-radius: var(--r-card);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(108, 123, 216, 0.16), transparent 60%),
    var(--surface-2);
}
@media (min-width: 800px) { .bridge { flex-direction: row; align-items: center; justify-content: space-between; } }
.bridge h3 { margin: 0 0 8px; font-size: clamp(22px, 19px + 1vw, 30px); letter-spacing: -0.022em; line-height: 1.15; }
.bridge p { margin: 0; max-width: 56ch; color: var(--ink-2); line-height: 1.55; font-size: 16px; }
.bridge .btn { flex: none; }

.actions { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.actions li { font-size: 12.5px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #E3E3E8; border: 1px solid var(--line-faint); }

.faq code, .prose code { font: 500 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-soft); }

.hero__facts { margin-top: clamp(20px, 14px + 1.4vw, 32px); text-align: left; }

/* Off screen, the loops hold still. The script adds .is-offscreen. */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* Phones: the hero stage gives the window more room, and the Pro offer stacks. */
@media (max-width: 719px) {
  .hstage .phone { font-size: 2.05cqw; right: 3cqw; top: 26cqw; }
  .hstage__win { width: 70cqw; }
  .hstage__key { top: 70cqw; left: 5cqw; }
}
@media (max-width: 599px) {
  .pro__buy { flex-direction: column; }
  .pro__buy .btn { width: 100%; max-width: 340px; }
}

/* The Pro windows, as the app draws them. */
.shots3 { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(22px, 14px + 2vw, 44px); }
.shots3__f { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.shots3__f--wide { flex: 1 1 280px; max-width: 360px; }
.shots3__f--narrow { flex: 0 1 200px; }
.shots3 figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; max-width: 34ch; margin-inline: auto; }

/* How the purchase turns into Pro: three steps beside the tab you land on. */
.how { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 860px) { .how { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 56px; } }
.how__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; counter-reset: step; }
.how__steps li { position: relative; padding-left: 52px; display: flex; flex-direction: column; gap: 4px; counter-increment: step; }
.how__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; color: #fff;
}
.how__steps b { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; color: #fff; }
.how__steps span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.how .shot { max-width: 400px; width: 100%; justify-self: center; }

/* The strip under the hero facts: what Pro adds, drifting past. */
.ticker {
  width: 100%;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.ticker:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); color: var(--ink); }
.ticker__label { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; }
.ticker__mask { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; gap: 10px; width: max-content; animation: lk-ticker 56s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__i { flex: none; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ticker__go { flex: none; display: none; padding-right: 12px; font-size: 14px; font-weight: 600; }
@media (min-width: 720px) { .ticker__go { display: inline; } }
@keyframes lk-ticker { to { transform: translateX(-50%); } }