/* ============================================================
   Site kit copy of controlmymac.com assets/site.css (commit c15ee24).
   Unchanged except: the brand colours, glows and fonts are tokens
   (see :root and the "Site kit" block at the end); each app's
   assets/theme.css overrides them. Don't edit per app: edit theme.css.
   ------------------------------------------------------------
   Control My Mac — shared design system
   Emulates Apple Liquid Glass in plain CSS.
   Tokens per DESIGN-SYSTEM.md: 4pt spacing grid, continuous
   radii (12/16/24), accent #4F8CFF → #7C5CFF, system font
   stack, glass chrome, light/dark via prefers-color-scheme,
   reduced-motion / reduced-transparency fallbacks.
   ============================================================ */

:root{
  /* Spacing — 4pt grid */
  --sp-xs:4px; --sp-s:8px; --sp-m:12px; --sp-l:16px; --sp-xl:24px;
  --sp-2xl:32px; --sp-3xl:40px; --sp-4xl:56px;
  /* Radii — continuous-corner approximation */
  --r-control:12px; --r-card:16px; --r-sheet:24px;
  /* Accent (the only brand colour) */
  --accent:#4F8CFF; --accent-2:#7C5CFF;
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  /* Site kit brand hooks (theme.css overrides them per app) */
  --grad-text:var(--grad);                 /* gradient used as text colour (.grad); fills keep --grad */
  --ink-1:#7FAEFF; --ink-2:#A38BFF;        /* eyebrow ink, AA on the dark canvas */
  --glow-1:color-mix(in srgb,var(--accent) 12%,transparent);   /* the two page glows */
  --glow-2:color-mix(in srgb,var(--accent-2) 8%,transparent);
  --logo-img:url("/img/icon-192.png");    /* the app icon in the nav */
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font-body);         /* h1 and section titles */
  --font-display-weight:800;
  /* Surfaces — dark is the default scheme */
  --bg:#0b0d12; --bg-2:#11141b; --card:#161a23; --line:#232838;
  --text:#eef1f7; --muted:#9aa3b5;
  --glass-bg:rgba(17,20,27,.62);
  --glass-line:rgba(110,125,160,.22);
  --glass-blur:saturate(180%) blur(20px);
  --shadow-float:0 12px 32px rgba(0,0,0,.38);
  --shadow-btn:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent);
  /* Motion */
  --motion-micro:180ms cubic-bezier(.2,.6,.2,1);
  --motion:300ms cubic-bezier(.2,.6,.2,1);
  --maxw:1080px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fb; --bg-2:#ffffff; --card:#ffffff; --line:#e6e9f0;
    --text:#0d1220; --muted:#5b6577;
    --glass-bg:rgba(255,255,255,.62);
    --glass-line:rgba(13,18,32,.10);
    --shadow-float:0 12px 32px rgba(13,18,32,.10);
    --shadow-btn:0 6px 20px color-mix(in srgb,var(--accent) 28%,transparent);
    --ink-1:#2159E0; --ink-2:#6242E6;      /* AA (5:1+) on the tinted light hero */
    color-scheme:light;
  }
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(60% 38% at 50% -4%, var(--glow-1), transparent 70%),
    radial-gradient(40% 30% at 85% 8%, var(--glow-2), transparent 70%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important} /* .btn{display:inline-flex} must not beat the hidden attribute */
a{color:inherit;text-decoration:none}
p a,li a{color:var(--accent);text-underline-offset:3px}
p a:hover,li a:hover{text-decoration:underline}
strong{color:var(--text)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-xl)}

/* Focus — always visible, never removed */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip-link{
  position:absolute;left:var(--sp-l);top:-48px;z-index:100;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  padding:var(--sp-s) var(--sp-l);border-radius:var(--r-control);
  transition:top var(--motion-micro);
}
.skip-link:focus{top:var(--sp-l)}

/* ---------- Glass chrome ---------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
}
.site-header{position:sticky;top:var(--sp-m);z-index:50;padding:0 var(--sp-l)}
.nav{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-l);
  padding:var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
  border-radius:999px;box-shadow:var(--shadow-float);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;border-radius:999px}
.logo{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:
    radial-gradient(circle at 50% 52%, #fff 0 5px, transparent 6px),
    var(--grad);
}
/* The app icon in the nav (every page, every language) */
.brand .logo{
  background-image:var(--logo-img);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.nav-links{display:flex;align-items:center;gap:var(--sp-xs);flex-wrap:nowrap;justify-content:flex-end}
.nav-links > a:not(.btn){
  color:var(--muted);font-size:14px;font-weight:500;
  padding:var(--sp-s) var(--sp-m);border-radius:999px;
  transition:color var(--motion-micro),background var(--motion-micro);
}
.nav-links > a:not(.btn):hover{color:var(--text);background:rgba(127,140,170,.12)}
@media(max-width:640px){.nav-links a.nav-optional{display:none}}
@media(max-width:460px){
  .nav{gap:var(--sp-s)}
  .brand{font-size:15px;gap:7px}
  .logo{width:26px;height:26px;border-radius:8px}
  .nav-links > a:not(.btn){padding:8px 6px;font-size:13.5px}
  .btn-small{padding:8px 11px;font-size:13.5px}
}
@media(max-width:430px){
  .site-header{top:8px;padding:0 10px}
  .nav{padding:6px 6px 6px 10px}
  .brand{font-size:14px;gap:6px}
  .logo{width:24px;height:24px;border-radius:7px}
  .nav-links{gap:4px}
  .nav-links > a:not(.btn){font-size:13px;padding:7px 5px}
  .btn-small{min-height:36px;padding:7px 10px;border-radius:11px;font-size:13px}
}
/* On phones only the brand + Download (and the globe) fit on one row.
   Hide the secondary text links well before they overflow and clip the
   Download CTA — they remain reachable in the footer. nowrap above keeps
   everything on a single row. */
@media(max-width:520px){
  .nav-links > a:not(.btn){display:none}
}
/* The homepage nav (the only one with the #how link) is the longest: with
   all five links it needs ~970px in fr, ru and de. On tablets and narrow
   laptops drop the three in-page links first, then For you / Support —
   the sections are one scroll away and the rest sits in the footer. */
@media(max-width:1080px){.nav-links:has(> a[href="#how"]) > a.nav-optional{display:none}}
@media(max-width:720px){.nav-links:has(> a[href="#how"]) > a:not(.btn){display:none}}

/* ---------- Buttons (≥44px targets) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 22px;border-radius:var(--r-control);
  font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
  transition:transform var(--motion-micro),box-shadow var(--motion-micro),background var(--motion-micro);
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn-quiet{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-line);color:var(--text);
}
.btn-quiet:hover{transform:translateY(-1px);background:var(--card)}
.btn-ghost{
  background:transparent;border:1px dashed var(--line);color:var(--muted);
  font-weight:500;font-size:13.5px;min-height:40px;padding:8px 16px;
}
.btn-ghost:hover{color:var(--text)}
.btn[aria-disabled="true"]{cursor:default;pointer-events:none}
.btn-small{min-height:40px;padding:8px 16px;font-size:14px}

/* App Store CTA — auto-inverts with the theme (light badge on dark, dark on light) */
.btn-appstore{background:var(--text);color:var(--bg);gap:9px;padding:8px 18px}
.btn-appstore:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.btn-appstore svg{width:21px;height:21px;fill:currentColor;flex:0 0 auto}
.btn-appstore .as-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.04;text-align:left}
.btn-appstore .as-txt small{font-size:10px;font-weight:500;letter-spacing:.01em;opacity:.9}
.btn-appstore .as-txt b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.btn-appstore.btn-small{padding:6px 13px}
.btn-appstore.btn-small svg{width:18px;height:18px}
.btn-appstore.btn-small .as-txt b{font-size:14px}
.btn-appstore.btn-small .as-txt small{font-size:9px}
/* hero secondary store CTA — centered below the primary Mac CTA */
.hero-store{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:var(--sp-l)}
.hero-store .hs-label{color:var(--muted);font-size:14px}

/* ---------- Hero ---------- */
/* inline padding kept: .hero shares the element with .wrap, so a 0 here
   would erase .wrap's gutter and let hero text touch the screen edges */
.hero{padding:var(--sp-4xl) var(--sp-xl) var(--sp-3xl);text-align:center}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  max-width:min(100%,760px);
  font-size:13px;font-weight:500;line-height:1.35;
  color:color-mix(in srgb,var(--text) 72%,var(--muted));
  border:1px solid var(--glass-line);border-radius:24px;
  padding:6px 15px 6px 13px;margin-bottom:var(--sp-xl);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 28px -16px color-mix(in srgb,var(--accent) 55%,transparent);
  /* balanced rows, never a one-word orphan — works in every language */
  text-wrap:balance;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none}
@media(max-width:430px){
  .pill{font-size:12px;padding:5px 11px}
}

/* Homepage eyebrow (above the H1): editorial, no box.
   Row 1  the kicker ("Your iPhone or iPad") in gradient ink, between two
          hairlines that fade outward.
   Row 2  what it becomes, in soft body ink, then "Free Mac app" as a quiet
          companion after a small gradient dot.
   The dot is painted on a real space (.eb-sep), so when the line breaks
   there the space is dropped and no line ever starts with a dot. */
.eyebrow{
  --eb-ink-1:var(--ink-1); --eb-ink-2:var(--ink-2);  /* tokens: AA in both schemes */
  display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:780px;margin:0 auto 28px;
  line-height:1.4;
}
.eb-kicker{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:13.5px;font-weight:600;letter-spacing:.015em;
}
.eb-kicker::before,.eb-kicker::after{
  content:"";flex:none;width:48px;height:1px;
  background:linear-gradient(90deg,transparent,var(--eb-ink-1) 72%);
  transform-origin:right center;
  animation:eb-rule 900ms cubic-bezier(.2,.6,.2,1) 150ms both;
}
.eb-kicker::after{
  background:linear-gradient(270deg,transparent,var(--eb-ink-2) 72%);
  transform-origin:left center;
}
@keyframes eb-rule{from{transform:scaleX(0);opacity:0}}
.eb-kicker-text{
  background:linear-gradient(90deg,var(--eb-ink-1),var(--eb-ink-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.eb-kicker-text::selection{color:var(--text);background:color-mix(in srgb,var(--accent) 32%,transparent)}
.eb-text{
  display:block;max-width:100%;
  font-size:15px;font-weight:400;letter-spacing:-.01em;
  color:color-mix(in srgb,var(--text) 70%,var(--muted));
  text-wrap:balance;
}
.eb-text::first-letter{text-transform:uppercase} /* row 2 starts a line now */
.eb-nw,.eb-free{white-space:nowrap}
.eb-nw{display:inline-block} /* inline-block, not just nowrap: Chrome won't break at the space after a nowrap span */
.eb-free{font-weight:500;color:var(--muted)}
.eb-sep{
  word-spacing:18px;                               /* the space becomes a ~22px gap */
  background:radial-gradient(circle at 50% 57%,var(--eb-ink-1) 0,var(--eb-ink-2) 2px,transparent 2.6px);
}
/* CJK: no negative tracking, proportional punctuation, never break mid-word
   (ja/zh markup also groups each phrase, for browsers without auto-phrase) */
.eyebrow:lang(ja) .eb-text,.eyebrow:lang(zh) .eb-text,.eyebrow:lang(ko) .eb-text{letter-spacing:0;word-break:keep-all}
.eyebrow:lang(ja) .eb-text,.eyebrow:lang(zh) .eb-text{font-feature-settings:"palt"}
/* Tablet / narrow laptop (the H1 wraps there): "Free Mac app" takes its own
   centred line, so row 2 never grows wider than the headline under it.
   ru and pt keep a two-line H1 even at full width, so they stack above phone width.
   Phones (to 520px) keep one flowing, balanced block: two lines, not three. */
@media (520px < width <= 1080px){
  .eb-sep{display:none}
  .eb-free{display:block}
}
@media (width > 520px){
  .eyebrow:lang(ru) .eb-sep,.eyebrow:lang(pt) .eb-sep{display:none}
  .eyebrow:lang(ru) .eb-free,.eyebrow:lang(pt) .eb-free{display:block}
}
/* uk and sl: row 2 needs three lines on a phone anyway, so "Free Mac app" always takes its own line
   (otherwise the last line starts with an orphaned "Mac ·"). */
.eyebrow:lang(uk) .eb-sep,.eyebrow:lang(sl) .eb-sep{display:none}
.eyebrow:lang(uk) .eb-free,.eyebrow:lang(sl) .eb-free{display:block}
@media(max-width:430px){
  .eyebrow{gap:6px;margin-bottom:22px}
  .eb-kicker{font-size:13px;gap:10px}
  .eb-kicker::before,.eb-kicker::after{width:28px}
  .eb-text{font-size:14px;max-width:340px}
}
@media (prefers-contrast: more){
  .eb-kicker-text{background:none;color:var(--text)}
  .eb-kicker::before,.eb-kicker::after{background:color-mix(in srgb,var(--text) 75%,transparent)}
  .eb-text,.eb-free{color:var(--text)}
  .eb-sep{background:radial-gradient(circle at 50% 57%,var(--text) 2px,transparent 2.6px)}
}
@media (forced-colors: active){
  .eb-kicker-text{background:none;color:CanvasText}
  .eb-kicker::before,.eb-kicker::after{background:CanvasText}
  .eb-sep{background:radial-gradient(circle at 50% 57%,CanvasText 2px,transparent 2.6px)}
}
h1{
  font-size:clamp(36px,6.4vw,62px);line-height:1.04;letter-spacing:-.03em;
  font-family:var(--font-display);font-weight:var(--font-display-weight);margin-bottom:var(--sp-l);text-wrap:balance;
}
.grad{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{
  font-size:clamp(16px,2.3vw,19px);color:var(--muted);
  max-width:660px;margin:0 auto var(--sp-2xl);text-wrap:pretty;
}
.cta{display:flex;gap:var(--sp-m);justify-content:center;align-items:center;flex-wrap:wrap}
.cta-note{color:var(--muted);font-size:12.5px;margin-top:var(--sp-m)}

/* ---------- Hero illustration ---------- */
.stage{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,56px);
  margin:var(--sp-4xl) auto 0;flex-wrap:wrap;
}
.stage-phone{
  width:170px;height:330px;border-radius:32px;flex:none;
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 88%,var(--accent) 12%),var(--card));
  box-shadow:var(--shadow-float);
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.stage-notch{width:56px;height:8px;border-radius:999px;background:var(--line);margin:0 auto;flex:none}
.stage-pad{
  flex:1;border-radius:18px;position:relative;overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
}
.stage-dot{
  position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;background:var(--grad);
  animation:tap 2.4s ease-in-out infinite;
}
.stage-dot::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--accent);opacity:.45;
  animation:tap-ring 2.4s ease-in-out infinite;
}
@keyframes tap{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.86)}
}
@keyframes tap-ring{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(2.4);opacity:0}
}
.stage-row{display:flex;gap:8px;flex:none}
.stage-row span{flex:1;height:34px;border-radius:10px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.stage-row span:first-child{background:var(--grad);opacity:.85}
.stage-link{flex:none;color:var(--muted)}
.stage-mac{
  width:min(420px,86vw);height:264px;border-radius:18px;flex:none;
  border:1px solid var(--glass-line);background:var(--bg-2);
  box-shadow:var(--shadow-float);overflow:hidden;position:relative;
}
.stage-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.stage-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.stage-win{
  position:absolute;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 80%,transparent);
}
.stage-cursor{
  position:absolute;left:46%;top:46%;width:22px;height:22px;color:var(--accent);
  filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--accent) 50%,transparent));
  animation:drift 4.8s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(54px,-30px)}
  66%{transform:translate(-38px,34px)}
}

/* ---------- Sections ---------- */
section{padding:var(--sp-4xl) 0}
.h2{
  font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;font-family:var(--font-display);font-weight:var(--font-display-weight);
  text-align:center;margin-bottom:var(--sp-m);text-wrap:balance;
}
.lead{color:var(--muted);text-align:center;max-width:640px;margin:0 auto var(--sp-3xl);text-wrap:pretty}
/* Keep body copy tidy on phones in every language — no one-word orphan last lines,
   and short display lines stay balanced rather than ragged. */
.card p,.step p,.use p,.choice p,.cta-note,.price-note,.price-mac .mac-note,.doc p,.doc li{text-wrap:pretty}
.card h3,.step h3,.use h3,.choice h2,.how-cta-line,.price h3{text-wrap:balance}
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Feature cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-l)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-l)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-l)}
@media(max-width:880px){.grid,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid,.grid-2,.grid-4{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-xl);position:relative;
  transition:transform var(--motion-micro),border-color var(--motion-micro);
}
a.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card h3{font-size:17px;font-weight:650;letter-spacing:-.01em;margin-bottom:6px}
.card p{color:var(--muted);font-size:14.5px}
.ico{
  width:42px;height:42px;border-radius:var(--r-control);flex:none;
  display:grid;place-items:center;margin-bottom:var(--sp-l);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
}
.ico svg{width:22px;height:22px}
.tag{
  position:absolute;top:var(--sp-l);right:var(--sp-l);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:999px;padding:3px 10px;
}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-l);counter-reset:s}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-xl);
}
.step::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--grad);color:#fff;font-weight:700;font-size:15px;
  margin-bottom:var(--sp-m);
}
.step h3{font-size:16.5px;margin-bottom:6px;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:14.5px}

/* Inline CTA after the pairing steps */
.how-cta{text-align:center;margin-top:var(--sp-2xl)}
.how-cta-line{font-size:17px;font-weight:650;letter-spacing:-.01em;margin-bottom:var(--sp-l)}

/* Pricing */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-l);max-width:780px;margin:0 auto}
@media(max-width:680px){.pricing{grid-template-columns:1fr}}
.price{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-2xl) var(--sp-xl);text-align:center;
}
.price.feat{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);
}
.price h3{font-size:17px;letter-spacing:-.01em}
.price .amt{font-size:36px;font-weight:800;letter-spacing:-.02em;margin:var(--sp-s) 0;font-variant-numeric:tabular-nums}
.price .amt span{font-size:15px;color:var(--muted);font-weight:500}
.price .per{color:var(--muted);font-size:13.5px}
.price ul{list-style:none;text-align:left;margin-top:var(--sp-l);color:var(--muted);font-size:14.5px}
.price li{padding:8px 0 8px 26px;border-top:1px solid var(--line);position:relative}
.price li::before{content:"✓";position:absolute;left:4px;color:var(--accent);font-weight:700}
.price-note{
  text-align:center;color:var(--muted);font-size:13.5px;
  max-width:560px;margin:var(--sp-xl) auto 0;
}

/* Final CTA panel */
.final{
  text-align:center;border:1px solid var(--line);border-radius:var(--r-sheet);
  padding:var(--sp-4xl) var(--sp-xl);
  background:
    radial-gradient(110% 130% at 50% -10%, color-mix(in srgb,var(--accent-2) 16%,transparent), transparent 60%),
    var(--bg-2);
}
.final .h2{margin-bottom:var(--sp-m)}
.final .lead{margin-bottom:var(--sp-xl)}

/* ---------- Doc pages (privacy / support) ---------- */
.doc-main{padding:var(--sp-4xl) 0 calc(var(--sp-4xl) + var(--sp-l))}
.doc{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-sheet);padding:var(--sp-3xl);
  max-width:860px;margin:0 auto;
}
@media(max-width:620px){.doc{padding:var(--sp-xl)}}
.doc h1{font-size:clamp(30px,5vw,44px);margin-bottom:var(--sp-m)}
.doc h2{font-size:21px;letter-spacing:-.02em;margin:var(--sp-2xl) 0 var(--sp-s)}
.doc h3{font-size:16.5px;letter-spacing:-.01em;margin:var(--sp-xl) 0 var(--sp-xs)}
.doc p,.doc li{color:var(--muted);font-size:15.5px}
.doc p{margin:var(--sp-s) 0}
.doc ul,.doc ol{padding-left:22px;margin:var(--sp-m) 0}
.doc li{margin:4px 0}
.doc .meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-l) 0;margin:var(--sp-xl) 0}

/* ---------- Start page (audience selector) ---------- */
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-l);max-width:780px;margin:0 auto}
@media(max-width:600px){.choices{grid-template-columns:1fr}}
.choice{
  display:flex;flex-direction:column;gap:6px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-xl);text-align:left;
  transition:transform var(--motion-micro),border-color var(--motion-micro);
}
.choice:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.choice .ico{margin-bottom:var(--sp-s)}
.choice h2{font-size:18px;letter-spacing:-.01em}
.choice p{color:var(--muted);font-size:14px}
.choice .go{color:var(--accent);font-size:14px;font-weight:600;margin-top:var(--sp-xs)}
.resume{
  display:none;max-width:780px;margin:0 auto var(--sp-xl);
  padding:var(--sp-m) var(--sp-l);border-radius:var(--r-control);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:14px;color:var(--muted);text-align:center;
}
.resume.show{display:block}
.resume a{color:var(--accent);font-weight:600}
.everything{display:block;text-align:center;margin-top:var(--sp-2xl)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:var(--sp-2xl) 0;margin-top:var(--sp-2xl);color:var(--muted);font-size:13.5px}
.frow{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--sp-l)}
.flinks{display:flex;flex-wrap:wrap;gap:4px var(--sp-l)}
.flinks a{color:var(--muted);padding:4px 0}
.flinks a:hover{color:var(--text)}
.fnote{margin-top:var(--sp-l);font-size:12.5px;color:color-mix(in srgb,var(--muted) 80%,transparent)}
.fsupport{margin-top:var(--sp-l)}
.footer-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-m)}
.footer-grid nav{display:flex;flex-wrap:wrap;gap:var(--sp-l);justify-content:center}
/* footer extras: language links, guides, maker line (plain HTML so crawlers can follow them) */
.fextra{margin-top:var(--sp-l);display:flex;flex-direction:column;gap:var(--sp-s,8px);font-size:12.5px}
.flangs,.fguides{display:flex;flex-wrap:wrap;gap:2px 14px}
.flangs a,.fguides a,.fmade a{color:var(--muted);padding:3px 0}
.flangs a:hover,.fguides a:hover,.fmade a:hover{color:var(--text)}
.flangs a[aria-current="page"]{color:var(--text)}
.fmade{margin:0;color:color-mix(in srgb,var(--muted) 80%,transparent)}
.footer-grid + .fextra,.site-footer > .fextra:only-of-type{align-items:flex-start}

/* ---------- Newsletter signup (hidden until /api/subscribe is configured) ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.signup{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-l) var(--sp-xl);
}
.signup-card{
  max-width:560px;margin:var(--sp-l) auto 0;text-align:left;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:var(--shadow-float);
}
.signup-card .signup-title{padding-right:44px}
/* card dropped below the sticky header (nav CTA case) needs side gutters */
.site-header + .signup-card{margin-left:var(--sp-xl);margin-right:var(--sp-xl)}
@media(min-width:620px){.site-header + .signup-card{margin-left:auto;margin-right:auto}}
.signup-row{margin-top:var(--sp-xl)}
.signup-title{font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:var(--text);margin-bottom:var(--sp-m)}
.signup-form{display:flex;gap:var(--sp-s);flex-wrap:wrap}
.signup-input{
  flex:1;min-width:200px;min-height:44px;padding:10px 14px;
  border-radius:var(--r-control);border:1px solid var(--line);
  background:var(--bg-2);color:var(--text);font-size:15px;font-family:inherit;
}
.signup-input::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.signup-btn{flex:none}
.signup-consent{margin-top:var(--sp-s);font-size:12.5px;color:var(--muted);max-width:520px}
.signup-msg{margin-top:var(--sp-s);font-size:13.5px;color:var(--muted)}
.signup-msg.is-error{color:#e0556d}
/* Honeypot: parked off-screen, unreachable by keyboard or screen reader */
.signup-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.signup-close{
  position:absolute;top:2px;right:2px;width:44px;height:44px;
  display:grid;place-items:center;background:transparent;border:0;
  color:var(--muted);font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
}
.signup-close:hover{color:var(--text)}

/* ---------- Pricing: free Mac app + tip seam ---------- */
.price-mac{grid-column:1/-1}
.price-mac .mac-note{color:var(--muted);font-size:14px;max-width:560px;margin:var(--sp-l) auto 0}
.price-mac .btn{margin-top:var(--sp-l)}

/* ============================================================
   Reusable pure-CSS demos
   Demos animate transform/opacity only. Base (non-animated)
   styles double as the static "first frame" so the global
   reduced-motion rule below degrades them gracefully.
   ============================================================ */

/* ----- Demo stage (shared) ----- */
.demo{
  position:relative;display:flex;gap:10px;height:128px;padding:10px;
  border-radius:var(--r-control);border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 55%,var(--card));
  overflow:hidden;user-select:none;-webkit-user-select:none;
}
.demo span,.demo i,.demo kbd{display:block}
.d-mac{position:relative;flex:1;min-width:0;border-radius:8px;border:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.d-tb{position:relative;height:14px;border-bottom:1px solid var(--line)}
.d-tb::before{
  content:"";position:absolute;left:7px;top:5px;width:5px;height:5px;border-radius:50%;
  background:#ff5f57;box-shadow:9px 0 0 #febc2e,18px 0 0 #28c840;
}
.d-phone{
  position:relative;width:58px;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 86%,var(--accent) 14%),var(--card));
}
.d-win{position:absolute;border-radius:6px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 85%,transparent)}
.d-cur{
  position:absolute;width:11px;height:14px;background:var(--text);
  clip-path:polygon(0 0,84% 52%,42% 60%,30% 100%);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));z-index:4;
}

/* ----- 1 · Trackpad: finger dot + cursor move in sync ----- */
.demo-trackpad .d-dot{
  position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
  --m:1;animation:d-drag 5s ease-in-out infinite;
}
.demo-trackpad .d-win.w1{left:14%;top:30%;width:56%;height:48%}
.demo-trackpad .d-cur{left:44%;top:44%;--m:3.2;animation:d-drag 5s ease-in-out infinite}
@keyframes d-drag{
  0%,100%{transform:translate(calc(-9px*var(--m)),calc(-4px*var(--m)))}
  30%{transform:translate(calc(9px*var(--m)),calc(-8px*var(--m)))}
  60%{transform:translate(calc(7px*var(--m)),calc(8px*var(--m)))}
  80%{transform:translate(calc(-5px*var(--m)),calc(5px*var(--m)))}
}

/* ----- 2 · Click & double-click: ripple + button highlight ----- */
.demo-click .d-win.w2{left:18%;top:26%;width:64%;height:56%}
.demo-click .d-btn{
  position:absolute;left:38%;top:48%;width:36px;height:13px;border-radius:4px;
  background:var(--accent);opacity:.35;animation:d-btnhl 3.6s infinite;
}
.demo-click .d-cur{left:50%;top:54%}
.demo-click .d-ripple{
  position:absolute;left:46%;top:46%;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;animation:d-rip 3.6s infinite;
}
@keyframes d-btnhl{0%,16%,58%,100%{opacity:.35;transform:scale(1)}20%,48%{opacity:1;transform:scale(1.08)}}
@keyframes d-rip{
  0%,16%{transform:scale(.3);opacity:0}
  19%{transform:scale(.4);opacity:.9}
  30%{transform:scale(1);opacity:0}
  33%{transform:scale(.4);opacity:.9}
  44%{transform:scale(1);opacity:0}
  45%,100%{opacity:0}
}

/* ----- 3 · Scroll: lines sliding under a fixed frame ----- */
.demo-scroll .d-feed{position:absolute;left:14%;right:14%;top:24px;animation:d-scroll 7s linear infinite}
.demo-scroll .d-feed i{height:8px;border-radius:4px;background:var(--line);margin-bottom:8px}
.demo-scroll .d-feed i:nth-child(4n+1){width:88%}
.demo-scroll .d-feed i:nth-child(4n+2){width:62%}
.demo-scroll .d-feed i:nth-child(4n+3){width:76%;background:color-mix(in srgb,var(--accent) 40%,var(--line))}
.demo-scroll .d-feed i:nth-child(4n){width:44%}
@keyframes d-scroll{to{transform:translateY(-64px)}}

/* ----- 4 · Composer: type on phone, then it lands on the Mac ----- */
.demo-composer .d-phone{display:flex;align-items:flex-end;padding:6px}
.d-bubble{
  position:relative;width:100%;border-radius:8px 8px 3px 8px;overflow:hidden;
  background:var(--accent);padding:4px 6px;
}
.d-bubble .d-text{font-size:8.5px;line-height:1.3;font-weight:600;color:#fff;white-space:nowrap}
.d-bubble .d-covr{position:absolute;inset:0;background:var(--accent);transform:translateX(101%);animation:d-type 6s steps(11) infinite}
@keyframes d-type{0%,6%{transform:translateX(0)}52%,100%{transform:translateX(101%)}}
.demo-composer .d-sent{
  position:absolute;left:12%;top:36%;max-width:76%;font-size:9px;font-weight:600;color:var(--text);
  background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid var(--line);
  border-radius:6px;padding:3px 7px;animation:d-sent 6s infinite;
}
@keyframes d-sent{0%,60%{opacity:0;transform:translateY(5px)}70%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* ----- 5 · Live keyboard: characters keystroke-by-keystroke ----- */
.demo-livekeys .d-line{
  position:absolute;left:10%;top:38%;right:12%;overflow:hidden;
  font:600 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);
}
.demo-livekeys .d-text{white-space:nowrap}
.demo-livekeys .d-covr{position:absolute;inset:0;background:var(--bg-2);transform:translateX(101%);animation:d-type2 5.5s steps(16) infinite}
.demo-livekeys .d-covr::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:2px;background:var(--accent);animation:d-blink 1.1s steps(1) infinite}
@keyframes d-type2{0%,8%{transform:translateX(0)}72%,100%{transform:translateX(101%)}}
@keyframes d-blink{0%,100%{opacity:1}50%{opacity:.15}}

/* ----- 6 · App launcher: a tile pops, a window opens ----- */
.demo-launcher .d-apps{position:absolute;inset:22px 14% 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.demo-launcher .d-apps i{border-radius:5px;background:color-mix(in srgb,var(--line) 85%,transparent)}
.demo-launcher .d-apps i:nth-child(6){background:var(--grad);animation:d-pop 4.5s infinite}
@keyframes d-pop{0%,6%{transform:scale(1)}10%{transform:scale(.78)}15%{transform:scale(1.18)}20%,100%{transform:scale(1)}}
.demo-launcher .d-win.wl{
  left:20%;top:28%;width:60%;height:54%;transform-origin:62% 70%;
  background:var(--card);box-shadow:0 6px 16px rgba(0,0,0,.25);
  animation:d-launch 4.5s infinite;
}
@keyframes d-launch{0%,14%{opacity:0;transform:scale(.4)}26%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.96)}}

/* ----- 7 · Window switching: two windows swap depth ----- */
.demo-windows .d-win.wa{left:10%;top:24%;width:54%;height:54%;animation:d-swapA 3.2s ease-in-out infinite alternate}
.demo-windows .d-win.wb{left:38%;top:34%;width:52%;height:50%;animation:d-swapB 3.2s ease-in-out infinite alternate}
.demo-windows .d-win::after{content:"";position:absolute;left:12%;top:18%;width:50%;height:6px;border-radius:3px;background:var(--line);opacity:.8}
@keyframes d-swapA{0%,40%{transform:none;opacity:1}60%,100%{transform:translate(12px,9px) scale(.93);opacity:.5}}
@keyframes d-swapB{0%,40%{transform:translate(-8px,7px) scale(.93);opacity:.5}60%,100%{transform:none;opacity:1}}

/* ----- 8 · Mac shortcuts: keycaps press in sequence ----- */
.demo-shortcuts .d-keys{position:absolute;left:0;right:0;top:50%;margin-top:-12px;display:flex;gap:8px;justify-content:center}
.demo-shortcuts kbd{
  display:grid;place-items:center;width:30px;height:28px;border-radius:7px;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  font:600 12px/1 -apple-system,BlinkMacSystemFont,sans-serif;
  box-shadow:0 2px 0 var(--line);animation:d-press 3.6s infinite;
}
.demo-shortcuts kbd:nth-child(2){animation-delay:.25s}
.demo-shortcuts kbd:nth-child(3){animation-delay:.5s}
@keyframes d-press{0%,6%{transform:none}10%,30%{transform:translateY(2px) scale(.94)}36%,100%{transform:none}}
.demo-shortcuts .d-flash{position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 55%,#fff);opacity:0;animation:d-flashx 3.6s infinite .5s}
@keyframes d-flashx{0%,15%{opacity:0}19%{opacity:.4}32%,100%{opacity:0}}

/* ----- Feature cards: demo dimmed/paused until hover/focus/tap ----- */
.demo-card{cursor:pointer}
.demo-card .demo{margin-top:var(--sp-l);opacity:.85;transition:opacity var(--motion)}
.demo-card .demo *,
.demo-card .demo *::before,
.demo-card .demo *::after{animation-play-state:paused}
.demo-card:focus-visible .demo,
.demo-card.is-playing .demo{opacity:1}
.demo-card:focus-visible .demo *,
.demo-card:focus-visible .demo *::before,
.demo-card:focus-visible .demo *::after,
.demo-card.is-playing .demo *,
.demo-card.is-playing .demo *::before,
.demo-card.is-playing .demo *::after{animation-play-state:running}
@media (hover:hover){
  .demo-card:hover .demo{opacity:1}
  .demo-card:hover .demo *,
  .demo-card:hover .demo *::before,
  .demo-card:hover .demo *::after{animation-play-state:running}
}
.demo-card::after{content:"Tap to play";display:block;margin-top:var(--sp-s);font-size:11.5px;color:var(--muted);text-align:center}
.demo-card.is-playing::after{content:"Tap to pause"}
@media (hover:hover){.demo-card::after{display:none}}

/* ----- "Made for anyone" use-case grid ----- */
/* four cards: one row of four, 2 × 2 on tablets, one column on phones
   (never a 3 + 1 row with an orphan card) */
.grid-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-l)}
@media(max-width:880px){.grid-uses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-uses{grid-template-columns:1fr}}
.use .ico{width:38px;height:38px;margin-bottom:var(--sp-m)}
.use h3{font-size:15.5px}
.use p{font-size:13.5px}
.uses-more{text-align:center;margin-top:var(--sp-xl)}
/* a section-level CTA link needs a ≥44px tap target; negative margin
   keeps the visual layout unchanged */
.uses-more a{display:inline-block;padding:14px 8px;margin:-10px 0}

/* ---------- Accessibility fallbacks ---------- */
@media (prefers-reduced-transparency: reduce){
  :root{--glass-blur:none}
  .glass,.btn-quiet,.stage-pad{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--card);
  }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* The single switch: kills every demo animation.
     Demo base styles are designed as sensible static first frames. */
  *,*::before,*::after{animation:none !important;transition:none !important}
  .demo-card .demo{opacity:1}        /* static frames shown undimmed */
  .demo-card::after{display:none}
}
@media (prefers-contrast: more){
  :root{--line:color-mix(in srgb,var(--text) 35%,transparent)}
  .card,.step,.price,.choice{border-width:1.5px}
}

/* anchored sections clear the sticky nav */
html { scroll-padding-top: 84px; }


/* Language switcher (i18n) */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13.5px;font-weight:600;line-height:1;color:var(--muted);background:transparent;border:1px solid var(--glass-line);padding:8px 12px;min-height:36px;border-radius:999px;cursor:pointer;transition:color var(--motion-micro),background var(--motion-micro),border-color var(--motion-micro)}
.lang-btn:hover{color:var(--text);background:rgba(127,140,170,.12)}
.lang-btn[aria-expanded="true"]{color:var(--text);background:rgba(127,140,170,.14);border-color:color-mix(in srgb,var(--accent) 40%,var(--glass-line))}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:50;margin:0;padding:8px;list-style:none;
  min-width:200px;max-width:calc(100vw - 24px);max-height:min(64vh,432px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-float);
}
.lang-menu li{margin:0}
.lang-menu a{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:12px;
  color:var(--text);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:background var(--motion-micro);
}
.lang-menu a:hover{background:rgba(127,140,170,.14)}
.lang-menu li.is-active a{color:var(--accent);font-weight:650;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.lang-menu li.is-active a::after{content:"✓";margin-left:auto;font-weight:800;font-size:13px}
/* On phones, dim the busy hero behind the open menu so it reads as a real menu. */
@media(max-width:640px){
  .lang-switch:has(.lang-menu:not([hidden]))::before{
    content:"";position:fixed;inset:0;z-index:40;
    background:rgba(8,10,16,.34);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  }
}
@media(max-width:460px){.lang-btn .lang-cur{display:none}.lang-btn{padding:8px 10px}}

/* ---------- Free-month subscriber gift (assets/offer.js) ---------- */
.offer-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:var(--sp-l);
  padding:8px 4px;background:none;border:0;cursor:pointer;
  color:var(--accent);font:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;
  text-underline-offset:4px;
}
.offer-link svg{width:22px;height:22px;flex:0 0 auto}
.offer-link svg:last-child{width:17px;height:17px;transition:transform var(--motion-micro)}
.offer-link:hover span{text-decoration:underline}
.offer-link:hover svg:last-child{transform:translateX(3px)}
.offer-note{color:var(--muted);font-size:12.5px;margin-top:2px}
.offer-scrim{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-l);background:rgba(8,10,16,.52);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.offer-panel{
  position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;
  padding:var(--sp-2xl) var(--sp-2xl) var(--sp-xl);border-radius:var(--r-sheet);
  background:var(--card);box-shadow:0 24px 64px rgba(0,0,0,.35);text-align:left;
}
.offer-close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line);
  color:var(--muted);cursor:pointer;
}
.offer-close svg{width:18px;height:18px}
.offer-close:hover{color:var(--text)}
.offer-eyebrow{
  display:flex;align-items:center;gap:8px;margin:0 0 var(--sp-s);
  color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.01em;
}
.offer-eyebrow svg{width:17px;height:17px}
.offer-panel h2{font-size:23px;line-height:1.22;letter-spacing:-.02em;margin:0 44px var(--sp-l) 0;text-wrap:balance}
.offer-form{display:flex;flex-direction:column;gap:var(--sp-s)}
.offer-label{font-size:13px;font-weight:600}
.offer-input{
  min-height:46px;padding:10px 14px;border-radius:var(--r-control);font:inherit;font-size:16px;
  color:var(--text);background:var(--bg-2);border:1px solid var(--line);
}
.offer-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.offer-choice{margin:0 0 var(--sp-s);padding:0;border:0;display:grid;gap:8px}
.offer-choice legend{margin-bottom:6px}
.offer-option{
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer;
  border-radius:var(--r-control);background:var(--bg-2);border:1px solid var(--line);
}
.offer-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.offer-option input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.offer-option strong{display:block;font-size:14.5px}
.offer-option small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.offer-consent{
  margin-top:var(--sp-s);padding:var(--sp-m);border-radius:var(--r-control);
  background:var(--bg-2);border:1px solid var(--line);
}
.offer-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;cursor:pointer}
.offer-check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.offer-required{
  display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;vertical-align:1px;
  font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.offer-detail{margin:6px 0 0 28px;color:var(--muted);font-size:12.5px;line-height:1.45;text-wrap:pretty}
.offer-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.offer-turnstile:empty{display:none}
.offer-turnstile{margin-top:var(--sp-s);min-height:65px}
.offer-preparing{color:var(--muted);font-size:12.5px;margin:0}
.offer-error{color:#e5484d;font-size:13.5px;font-weight:600;margin:0}
.offer-submit{margin-top:var(--sp-s);width:100%}
.offer-submit[disabled]{opacity:.7;cursor:progress;transform:none}
.offer-fine{color:var(--muted);font-size:12px;text-align:center;margin:2px 0 0}
.offer-copy{color:var(--muted);line-height:1.5;margin:0 0 var(--sp-l)}
.offer-preview-note{
  margin:0 0 var(--sp-l);padding:var(--sp-s) var(--sp-m);border-radius:var(--r-control);
  font-size:13px;color:var(--muted);background:var(--bg-2);border:1px dashed var(--line);
}
@media (max-width:520px){
  .offer-panel{padding:var(--sp-xl) var(--sp-l) var(--sp-l)}
  .offer-panel h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.offer-link svg:last-child{transition:none}}

/* guide pages */
.prose{max-width:720px;margin:0 auto}
.prose > * + *{margin-top:var(--sp-m)}
.prose h3{font-size:18px;letter-spacing:-.01em;margin-top:var(--sp-2xl);text-wrap:balance}
.prose p,.prose li{color:var(--muted);font-size:16px;text-wrap:pretty}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:6px}
.prose kbd,.cmp kbd{font:inherit;font-size:.92em;padding:1px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text);white-space:nowrap}
.prose + .grid-2,.prose + .shot-row,.grid-2 + .prose,.table-wrap + .prose,.cmp-note + .prose{margin-top:var(--sp-2xl)}
.shot-row{display:flex;gap:var(--sp-xl);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-2xl)}
.shot{margin:0;width:330px;max-width:100%;text-align:center}
.shot img{width:100%;height:auto;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow-float)}
.shot figcaption{color:var(--muted);font-size:13px;margin-top:var(--sp-s);text-wrap:pretty}
.table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px}
.cmp th,.cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:13.5px;color:var(--text);background:var(--bg-2)}
.cmp tbody th{color:var(--text);font-weight:650;width:18%}
.cmp td{color:var(--muted)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-note{color:var(--muted);font-size:13px;max-width:720px;margin:var(--sp-m) auto 0;text-wrap:pretty}
.faq details{border-top:1px solid var(--line);padding:var(--sp-m) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:650;color:var(--text)}
.faq details p{margin-top:var(--sp-s)}
.cmp-wide{min-width:860px}
.card .falls-short{margin-top:var(--sp-s)}

/* homepage screenshots */
.home-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-xl);align-items:start}
.home-shots img{width:100%;max-width:100%;height:auto;border-radius:28px;border:1px solid var(--line)}
@media (width < 600px){
  .home-shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--sp-l);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--sp-s)}
  .home-shots img{scroll-snap-align:center}
}
/* ---------- Video-first hero: cover + play button; YouTube loads only after a press ---------- */
.hero-v{padding-top:var(--sp-xl)}
.hero-video{position:relative;max-width:860px;margin:0 auto var(--sp-xl);aspect-ratio:16/9;border-radius:var(--r-sheet);overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:var(--shadow-float);container-type:inline-size}
.hero-video iframe,.hv-play,.hv-play img{position:absolute;inset:0;width:100%;height:100%;border:0}
.hv-play{display:block;padding:0;margin:0;background:none;cursor:pointer;font:inherit;color:#fff}
.hv-play img{object-fit:cover;transition:transform var(--motion)}
.hv-play::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(8,9,13,.86),rgba(8,9,13,.5) 42%,transparent);pointer-events:none}
.hv-cap,.hv-btn,.hv-label{z-index:1}
.hv-cap{position:absolute;left:5.2%;right:14%;bottom:8.5%;display:flex;flex-direction:column;gap:.12em;text-align:left;font-weight:700;letter-spacing:-.012em;line-height:1.2;font-size:clamp(12.5px,2.3vw,24px);font-size:clamp(12.5px,3cqw,25px);text-shadow:0 1px 2px rgba(0,0,0,.55);text-wrap:balance}
.hv-cap-2{color:color-mix(in srgb,var(--accent) 55%,#fff)}
.hv-cap:lang(ja),.hv-cap:lang(zh),.hv-cap:lang(ko){letter-spacing:0;word-break:keep-all}
.hv-btn{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(56px,9vw,88px);aspect-ratio:1;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform var(--motion-micro)}
.hv-btn svg{width:42%;height:42%;fill:#fff;margin-left:6%}
.hv-label{position:absolute;right:14px;top:14px;padding:6px 12px;border-radius:999px;background:rgba(11,13,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:600;letter-spacing:.01em}
@media (hover:hover){.hv-play:hover .hv-btn{transform:scale(1.06)}.hv-play:hover img{transform:scale(1.015)}}
.hv-play:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.hero-v .eyebrow{margin-top:var(--sp-4xl)}
@media (max-width:520px){.hero-v{padding-top:var(--sp-m)}.hero-video{border-radius:var(--r-card);margin-bottom:var(--sp-l)}.hv-label{font-size:12px;right:10px;top:10px;padding:5px 10px}.hv-cap{bottom:7%}}
@media (prefers-reduced-motion:reduce){.hv-play img,.hv-btn{transition:none}}

/* ============================================================
   Visual overhaul (Oct 2026): real app screenshots in device
   frames next to a drawn Mac screen, in the look of the launch
   video. Everything inside .mac is sized in cqw, so a scene
   scales with its frame. Animations move transform/opacity only;
   base styles are the static frame for reduced motion.
   ============================================================ */

/* ----- iPhone frame around a real screenshot ----- */
.phone{
  position:relative;aspect-ratio:1320/2868;border-radius:17%/7.8%;
  background:#07080b;padding:2.4%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px #262a36,0 18px 44px rgba(0,0,0,.5);
}
.phone img{
  position:absolute;left:2.4%;top:1.1%;width:95.2%;height:97.8%;
  object-fit:cover;border-radius:14.6%/6.7%;background:#15171c;
}
.phone::after{ /* Dynamic Island (simulator screenshots leave it out) */
  content:"";position:absolute;left:50%;top:2.7%;width:29%;height:3.2%;
  translate:-50% 0;border-radius:999px;background:#000;z-index:2;
}
.phone .alt{opacity:0;animation:v-swap 9s infinite}
@keyframes v-swap{0%,44%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
.tap{ /* fingertip */
  position:absolute;left:var(--x,50%);top:var(--y,50%);width:22%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:3;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,.16) 62%,transparent 64%);
  opacity:0;animation:v-tap var(--dur,4.5s) infinite var(--delay,0s);
}
@keyframes v-tap{0%,8%{opacity:0;transform:scale(1.5)}14%{opacity:1;transform:scale(1)}22%{opacity:1;transform:scale(.82)}34%,100%{opacity:0;transform:scale(1.2)}}

/* ----- iPad frame ----- */
.pad{
  position:relative;border-radius:5.2%/7%;background:#07080b;padding:1.6%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px #262a36,0 18px 44px rgba(0,0,0,.5);
}
.pad img{display:block;width:100%;height:auto;border-radius:3.4%/4.6%;background:#15171c}

/* ----- Drawn Mac screen ----- */
.mac{
  position:relative;aspect-ratio:16/10;container-type:inline-size;
  border-radius:3%/4.8%;background:#0b0c11;padding:1.3%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1px #262a36,0 22px 54px rgba(0,0,0,.5);
}
.mac span,.mac i,.mac b{display:block}
.mac-screen{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:1.9%/3.1%;
  background:
    radial-gradient(90% 70% at 85% 20%,rgba(120,110,255,.55),transparent 70%),
    linear-gradient(172deg,#3a3fc9 0%,#5b46cf 30%,#a84db6 62%,#e3607c 100%);
  color:#fff;font-size:2.6cqw;line-height:1.2;
}
.mac-menu{
  position:absolute;inset:0 0 auto 0;height:4.4cqw;display:flex;align-items:center;gap:2.2cqw;
  padding:0 2.4cqw;background:rgba(18,16,48,.34);
}
.mac-menu i{height:1.1cqw;width:5cqw;border-radius:1cqw;background:rgba(255,255,255,.62)}
.mac-menu i:first-child{width:7cqw;background:#fff}
.mac-menu i:last-child{margin-left:auto;width:11cqw}
.mac-dock{
  position:absolute;left:50%;bottom:2cqw;translate:-50% 0;display:flex;gap:1.5cqw;
  padding:1.2cqw 1.6cqw;border-radius:2.6cqw;background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.mac-dock i{width:4.6cqw;height:4.6cqw;border-radius:1.3cqw;background:#3d8bff}
.mac-dock i:nth-child(2){background:#f2a93b}
.mac-dock i:nth-child(3){background:#35b55f}
.mac-dock i:nth-child(4){background:#e0484f}
.mac-dock i:nth-child(5){background:#7b5cf0}
.mac-dock i:nth-child(6){background:#b9bfca}
.mac-dock i:nth-child(7){background:#ee6aa5}
.mw{ /* a window */
  position:absolute;left:12%;top:13%;width:76%;height:66%;overflow:hidden;
  border-radius:1.7cqw;background:#1b1c21;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 3cqw 7cqw rgba(10,6,40,.5);
}
.mw-bar{height:5cqw;background:#26272d;position:relative}
.mw-bar::before{
  content:"";position:absolute;left:2cqw;top:1.8cqw;width:1.4cqw;height:1.4cqw;border-radius:50%;
  background:#ff5f57;box-shadow:2.3cqw 0 0 #febc2e,4.6cqw 0 0 #28c840;
}
.mw-body{position:absolute;inset:5cqw 0 0 0}
.mc{ /* pointer */
  position:absolute;left:var(--x,50%);top:var(--y,50%);width:3.2cqw;height:4.1cqw;z-index:6;
  background:#fff;clip-path:polygon(0 0,84% 52%,42% 60%,30% 100%);
  filter:drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.6));
}
.hud{ /* keystroke read-out, as in the launch video */
  position:absolute;left:50%;bottom:11.5cqw;translate:-50% 0;z-index:5;display:flex;align-items:center;gap:1.2cqw;
  padding:1.3cqw 2.4cqw;border-radius:1.8cqw;background:rgba(16,17,24,.92);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2cqw 5cqw rgba(0,0,0,.4);
  font:700 3.1cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:nowrap;
}
.hud kbd{font:inherit;color:#8fb2ff}

/* Scene: picks (a media browser) */
.sc-picks .hero-tile{position:absolute;left:5%;right:5%;top:8%;height:44%;border-radius:1.4cqw;background:linear-gradient(100deg,#c93a8c,#e2688a 45%,#f0b064)}
.sc-picks .hero-tile::after{content:"";position:absolute;left:50%;top:50%;width:11cqw;height:4.2cqw;translate:-50% -50%;border-radius:3cqw;background:#fff;opacity:.92}
.sc-picks .tiles{position:absolute;left:5%;right:5%;bottom:8%;height:30%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.sc-picks .tiles i{border-radius:1.2cqw;background:linear-gradient(140deg,#ff7a59,#f04e6e)}
.sc-picks .tiles i:nth-child(2){background:linear-gradient(140deg,#3fa2ff,#2a6ff0)}
.sc-picks .tiles i:nth-child(3){background:linear-gradient(140deg,#43c56e,#1f9a58)}
.sc-picks .tiles i:nth-child(4){background:linear-gradient(140deg,#a875ff,#6c4be8)}
.sc-picks .tiles i:nth-child(2){animation:v-pick 6s infinite}
@keyframes v-pick{0%,38%{transform:none;box-shadow:none}46%,70%{transform:scale(1.09);box-shadow:0 0 0 .5cqw #fff}80%,100%{transform:none;box-shadow:none}}
.sc-picks .mc{--x:62%;--y:38%;animation:v-roam 6s ease-in-out infinite}
@keyframes v-roam{0%,8%{transform:none}40%,74%{transform:translate(-19cqw,22cqw)}100%{transform:none}}

/* Scene: editor (timeline) */
.sc-edit .view{position:absolute;left:5%;top:7%;width:52%;height:46%;border-radius:1.2cqw;background:linear-gradient(135deg,#1e3a8a,#7c3aed 55%,#f472b6)}
.sc-edit .bins{position:absolute;right:5%;top:7%;width:34%;height:46%;display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw}
.sc-edit .bins i{border-radius:1cqw;background:#2d2f38}
.sc-edit .tl{position:absolute;left:5%;right:5%;bottom:7%;height:33%;display:grid;grid-template-rows:repeat(3,1fr);gap:1cqw}
.sc-edit .tl span{display:flex;gap:.8cqw}
.sc-edit .tl i{border-radius:.8cqw;background:#3b82f6;flex:3}
.sc-edit .tl i:nth-child(2){background:#8b5cf6;flex:5}
.sc-edit .tl i:nth-child(3){background:#ec4899;flex:2}
.sc-edit .tl span:nth-child(2) i{background:#22c55e;flex:6}
.sc-edit .tl span:nth-child(2) i:nth-child(2){background:#14b8a6;flex:3}
.sc-edit .tl span:nth-child(3) i{background:#f59e0b;flex:2}
.sc-edit .tl span:nth-child(3) i:nth-child(2){background:#f97316;flex:7}
.sc-edit .head{position:absolute;left:5%;bottom:5%;width:.5cqw;height:38%;background:#fff;border-radius:1cqw;z-index:2;animation:v-play 6s linear infinite}
@keyframes v-play{0%{transform:translateX(8cqw)}100%{transform:translateX(52cqw)}}
.sc-edit .cut{position:absolute;left:47%;bottom:7%;width:.9cqw;height:33%;background:#1b1c21;z-index:1;opacity:0;animation:v-cut 6s infinite}
@keyframes v-cut{0%,40%{opacity:0}44%,96%{opacity:1}100%{opacity:0}}
.sc-edit .hud{opacity:0;animation:v-hud 6s infinite}
@keyframes v-hud{0%,38%{opacity:0;transform:translateY(1cqw)}44%,72%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}

/* Scene: video call */
.sc-call .mw-body{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;padding:2.2cqw 2.2cqw 9cqw}
.sc-call .mw-body > i{position:relative;border-radius:1.2cqw;background:linear-gradient(150deg,#31405f,#1f2a44)}
.sc-call .mw-body > i:nth-child(2){background:linear-gradient(150deg,#5a3d6e,#33254a)}
.sc-call .mw-body > i:nth-child(3){background:linear-gradient(150deg,#2f5a55,#1d3a3a)}
.sc-call .mw-body > i:nth-child(4){background:linear-gradient(150deg,#6a4a3a,#40291f)}
.sc-call .mw-body > i::after{content:"";position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:rgba(255,255,255,.26)}
.sc-call .bar{position:absolute;left:50%;bottom:2.2cqw;translate:-50% 0;display:flex;gap:1.6cqw}
.sc-call .bar i{width:4.6cqw;height:4.6cqw;border-radius:50%;background:#3a3c46}
.sc-call .bar i:first-child{animation:v-mute 9s infinite}
.sc-call .bar i:last-child{background:#e5484d;width:8cqw;border-radius:3cqw}
@keyframes v-mute{0%,10%{background:#3a3c46;transform:none}14%{transform:scale(1.25)}18%,44%{background:#e5484d;transform:none}50%,100%{background:#3a3c46}}

/* Grid slide: the call window gives way to a browser, the phone follows */
.sc-auto .mw.two{opacity:0;animation:v-swap 9s infinite}
.sc-auto .mw.two .mw-bar::after{content:"";position:absolute;left:12cqw;right:8cqw;top:1.3cqw;height:2.4cqw;border-radius:1.2cqw;background:#3a3c46}

/* Scene: messages (Draft keyboard) */
.sc-chat .side{position:absolute;left:0;top:0;bottom:0;width:27%;background:#222329;padding:2cqw 1.6cqw;display:grid;gap:1.4cqw;align-content:start}
.sc-chat .side i{height:5.4cqw;border-radius:1.2cqw;background:#2e3038}
.sc-chat .side i:first-child{background:#2f6cf0}
.sc-chat .thread{position:absolute;left:31%;right:4%;top:6%;bottom:6%;display:flex;flex-direction:column;gap:1.4cqw;justify-content:flex-end}
.sc-chat .thread > i{width:44%;height:4.6cqw;border-radius:2.3cqw;background:#33353e}
.sc-chat .thread i:nth-child(2){width:30%}
.sc-chat .sent{
  align-self:flex-end;max-width:92%;padding:1.2cqw 2.2cqw;border-radius:2.6cqw 2.6cqw .8cqw 2.6cqw;
  background:#2f6cf0;font-weight:600;font-size:2.9cqw;transform-origin:100% 100%;
  animation:v-send 6s infinite;
}
@keyframes v-send{0%,34%{opacity:0;transform:translateY(3cqw) scale(.7)}42%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}

/* Scene: notes (Live keyboard, Shortcuts) */
.sc-note .side{position:absolute;left:0;top:0;bottom:0;width:27%;background:#222329;padding:2cqw 1.6cqw;display:grid;gap:1.4cqw;align-content:start}
.sc-note .side i{height:5.4cqw;border-radius:1.2cqw;background:#2e3038}
.sc-note .side i:first-child{background:#b98a1e}
.sc-note .page{position:absolute;left:31%;right:4%;top:9%;display:grid;gap:1.6cqw}
.sc-note .typed{position:relative;justify-self:start;max-width:100%;overflow:hidden;font-weight:700;font-size:3.6cqw;white-space:nowrap;padding-right:.8cqw}
.sc-note .typed .cover{position:absolute;inset:0;background:#1b1c21;transform:translateX(101%);animation:v-type 6s steps(16) infinite}
.sc-note .typed .cover::before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:.5cqw;background:#8fb2ff}
@keyframes v-type{0%,8%{transform:translateX(0)}70%,100%{transform:translateX(101%)}}
.sc-note .page > i{height:1.6cqw;border-radius:1cqw;background:#33353e;width:86%}
.sc-note .page > i:nth-of-type(2){width:64%}
.sc-note .page > i:nth-of-type(3){width:74%}
.sc-keys .hud{opacity:1}
.sc-keys .hud b{
  display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:1.3cqw;background:#2d2f38;
  box-shadow:0 .5cqw 0 #121318;font-weight:700;animation:v-key 5s infinite;
}
.sc-keys .hud b:nth-child(2){animation-delay:.2s}
.sc-keys .hud b:nth-child(3){animation-delay:.4s}
@keyframes v-key{0%,10%{transform:none}15%,32%{transform:translateY(.5cqw) scale(.93);background:#3d6df0}40%,100%{transform:none}}
.sc-keys .marquee{
  position:absolute;left:40%;top:22%;width:34%;height:34%;z-index:4;border:.4cqw dashed #fff;border-radius:.6cqw;
  background:rgba(255,255,255,.14);transform-origin:0 0;opacity:0;animation:v-marquee 5s infinite;
}
@keyframes v-marquee{0%,34%{opacity:0;transform:scale(.1)}40%{opacity:1;transform:scale(.1)}66%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}

/* Scene: launcher and windows */
.sc-launch .mw{left:9%;top:12%;width:56%;height:56%;transform-origin:50% 120%;animation:v-open 8s infinite}
.sc-launch .mw.two{left:36%;top:24%;transform-origin:50% 100%;animation:v-open2 8s infinite}
.sc-launch .mw .mw-body{background:linear-gradient(150deg,#243352,#191d2b)}
.sc-launch .mw.two .mw-body{background:linear-gradient(150deg,#4a2f5c,#231a30)}
@keyframes v-open{0%,6%{opacity:0;transform:scale(.3)}16%,54%{opacity:1;transform:none;z-index:1}62%,92%{opacity:1;transform:none;z-index:3}100%{opacity:0;transform:none}}
@keyframes v-open2{0%,26%{opacity:0;transform:scale(.3)}36%,54%{opacity:1;transform:none;z-index:2}62%,92%{opacity:.75;transform:scale(.96);z-index:2}100%{opacity:0}}
.sc-launch .mac-dock i:nth-child(1){animation:v-bounce 8s infinite}
.sc-launch .mac-dock i:nth-child(5){animation:v-bounce 8s infinite 1.6s}
@keyframes v-bounce{0%,2%{transform:none}5%{transform:translateY(-2.4cqw)}8%{transform:none}11%{transform:translateY(-1.2cqw)}14%,100%{transform:none}}

/* ----- Phone + Mac pair ----- */
.duo{position:relative;aspect-ratio:100/66;container-type:inline-size}
.duo::before{ /* glow */
  content:"";position:absolute;inset:6% 4% 2%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,var(--glow,color-mix(in srgb,var(--accent-2) 50%,transparent)),transparent);filter:blur(28px);opacity:.75;
}
.duo .mac{position:absolute;left:0;top:0;width:83%;z-index:1}
.duo .phone{position:absolute;right:0;bottom:0;width:26.5%;z-index:2}
.duo-solo{aspect-ratio:100/66;display:flex;align-items:flex-end;justify-content:center;gap:5%}
.duo-solo .pad{position:relative;width:66%;z-index:1;margin-bottom:6%}
.duo-solo .phone{position:relative;right:auto;bottom:auto;width:25%;margin-left:-14%}

/* ----- Hero stage ----- */
.stage-v{max-width:820px;margin:var(--sp-4xl) auto 0}
.stage-v .tap{--x:80%;--y:30%;--dur:6s;--delay:2.1s}

/* ----- Feature rail (side-scrolling) ----- */
.rail{position:relative}
.rail-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-s);margin:0 auto var(--sp-l);padding:0 var(--sp-l)}
.rail-dots{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-line)}
.rail-dot,.rail-arrow{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  transition:background var(--motion-micro),color var(--motion-micro),transform var(--motion-micro);
}
.rail-dot svg{width:19px;height:19px}
.rail-dot:hover{color:var(--text);background:rgba(127,140,170,.14)}
.rail-dot[aria-current="true"]{background:var(--grad);color:#fff}
.rail-arrow{border:1px solid var(--glass-line);background:var(--glass-bg);color:var(--text)}
.rail-arrow svg{width:18px;height:18px}
.rail-arrow:hover{background:var(--card)}
.rail-arrow:active,.rail-dot:active{transform:scale(.94)}
.rail-arrow[disabled]{opacity:.35;cursor:default}
.rail:not(.rail-js) .rail-nav{display:none}
.rail-track{
  --edge:max(var(--sp-xl),calc((100vw - var(--maxw))/2 + var(--sp-xl)));
  display:flex;gap:var(--sp-l);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);
  padding:6px var(--edge) var(--sp-xl);scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.slide{
  flex:none;width:min(calc(var(--maxw) - 2*var(--sp-xl)),88vw);scroll-snap-align:center;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:var(--sp-2xl);align-items:center;
  padding:var(--sp-2xl);border-radius:var(--r-sheet);border:1px solid var(--line);
  background:
    radial-gradient(70% 90% at 78% 40%,color-mix(in srgb,var(--glow,var(--accent-2)) 16%,transparent),transparent 70%),
    var(--card);
  transition:opacity var(--motion);
}
.slide-copy{text-align:left}
.slide-copy .ico{margin-bottom:var(--sp-l)}
.slide-copy .tag{position:static;display:inline-block;margin-bottom:var(--sp-m)}
.slide-copy h3{font-size:clamp(21px,2.6vw,27px);font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-bottom:var(--sp-s);text-wrap:balance}
.slide-more{margin-top:var(--sp-xl)}
.slide-copy p{color:var(--muted);font-size:15.5px;text-wrap:pretty}
.rail-js .slide:not(.is-active){opacity:.5}
.rail-js .slide:not(.is-active) *,
.rail-js .slide:not(.is-active) *::before,
.rail-js .slide:not(.is-active) *::after{animation-play-state:paused}
@media(max-width:820px){
  .slide .duo:not(.duo-solo) .phone{width:30%}
  .slide .duo:not(.duo-solo) .mac{width:80%}
  .slide{grid-template-columns:1fr;gap:var(--sp-xl);padding:var(--sp-xl);align-items:start;align-content:start}
  .slide-art{order:-1}
  .slide-copy .ico{display:none}
}
@media(max-width:520px){
  .rail-dot,.rail-arrow{width:36px;height:36px}
  .rail-dots{gap:2px;padding:4px}
  .rail-arrow{display:none}
  .slide{width:86vw;padding:var(--sp-l)}
}

/* ----- "Made for anyone": a picture per card ----- */
.use{overflow:hidden}
.use-img{
  display:block;width:calc(100% + 2*var(--sp-xl));max-width:none;height:auto;aspect-ratio:16/10;object-fit:cover;
  margin:calc(-1*var(--sp-xl)) calc(-1*var(--sp-xl)) 0;background:var(--bg-2);
}
.use .use-img + .ico{position:relative;margin-top:-19px;box-shadow:0 0 0 4px var(--card);background:var(--grad);color:#fff}

/* ----- Pairing steps: a picture per step ----- */
.step:has(.step-art){overflow:hidden;display:flex;flex-direction:column;align-items:flex-start}
.step-art{
  order:-1;align-self:stretch;position:relative;height:190px;margin:calc(-1*var(--sp-xl)) calc(-1*var(--sp-xl)) var(--sp-l);overflow:hidden;
  background:
    radial-gradient(80% 90% at 50% 110%,color-mix(in srgb,var(--accent-2) 34%,transparent),transparent 70%),
    color-mix(in srgb,var(--bg) 60%,var(--card));
  border-bottom:1px solid var(--line);
}
.step-art .mac{position:absolute;left:50%;top:26px;width:270px;translate:-50% 0}
.step-art .phone{position:absolute;left:50%;top:22px;width:118px;translate:-50% 0}
.pop{ /* menu bar window with the pairing code */
  position:absolute;right:6%;top:6.4cqw;width:36%;padding:2.4cqw;border-radius:2cqw;z-index:3;
  background:rgba(24,25,32,.94);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 3cqw 7cqw rgba(10,6,40,.5);
  display:grid;gap:1.6cqw;justify-items:center;
}
.pop i{width:70%;height:1.5cqw;border-radius:1cqw;background:#3a3c46}
.qr{display:block;width:100%;aspect-ratio:1;border-radius:1.2cqw;background:#fff;padding:7%}
.qr svg{width:100%;height:100%;fill:#0b0d12}
.mac-menu b{width:2.4cqw;height:2.4cqw;border-radius:.7cqw;background:var(--grad);margin-left:auto}
.mac-menu b + i:last-child{margin-left:0}
.app-home{position:absolute;left:2.4%;top:1.1%;width:95.2%;height:97.8%;border-radius:14.6%/6.7%;display:grid;place-items:center;align-content:center;gap:8%;
  background:radial-gradient(90% 60% at 50% 30%,#4a47c9,#1a1b3a 70%)}
.app-home img{position:static;width:44%;height:auto;inset:auto;border-radius:22%;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.app-home i{display:block;width:34%;height:9px;border-radius:9px;background:rgba(255,255,255,.9)}
.step-art .qr-side{position:absolute;left:calc(50% - 150px);top:54px;width:74px;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.step-art .qr-side ~ .phone{left:calc(50% + 34px)}
.scan{position:absolute;left:calc(50% - 150px);top:54px;width:74px;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:v-scan 2.6s ease-in-out infinite alternate}
@keyframes v-scan{to{transform:translateY(71px)}}

/* ----- A little more depth and colour ----- */
#features{background:radial-gradient(60% 46% at 50% 0%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 72%)}
#how{background:radial-gradient(50% 40% at 18% 30%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
#pricing{background:radial-gradient(56% 44% at 80% 30%,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 72%)}
.price.feat{background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 70%),var(--card)}
#privacy .ico{background:var(--grad);color:#fff}
/* hero: the phone app needs the Mac companion */
.pair-note{max-width:440px;margin:var(--sp-m) auto 0;color:color-mix(in srgb,var(--text) 78%,var(--muted));font-size:13.5px;text-wrap:balance}
@media(max-width:520px){.btn-primary[data-dl-cta]:not(.btn-small){white-space:normal;text-align:center}}

/* Grid slide: two apps on the Mac; a click brings the other one forward and the phone's Grid follows */
.sc-switch .mw.one{left:5%;top:12%;width:56%;height:60%;animation:v-front-one 9s infinite}
.sc-switch .mw.two{left:36%;top:22%;width:59%;height:60%;animation:v-front-two 9s infinite}
@keyframes v-front-one{0%,46%{z-index:3;opacity:1;transform:none}50%,96%{z-index:1;opacity:.62;transform:scale(.97)}100%{z-index:3;opacity:1;transform:none}}
@keyframes v-front-two{0%,46%{z-index:1;opacity:.62;transform:scale(.97)}50%,96%{z-index:3;opacity:1;transform:none}100%{z-index:1;opacity:.62;transform:scale(.97)}}
.sc-switch .mw.two .head,.sc-switch .mw.two .cut{animation:none}
.sc-switch .mw.two .head{transform:translateX(26cqw)}
.sc-switch > .mc{--x:24%;--y:58%;animation:v-hop 9s ease-in-out infinite}
@keyframes v-hop{0%,30%{transform:none}44%,82%{transform:translate(54cqw,-4cqw)}96%,100%{transform:none}}
.clk{position:absolute;width:7cqw;height:7cqw;margin:-3.5cqw 0 0 -3.5cqw;border-radius:50%;border:.5cqw solid #fff;z-index:5;opacity:0}
.clk.two{left:78.6%;top:51.6%;animation:v-click 9s infinite}
.clk.one{left:24.6%;top:58.6%;animation:v-click 9s infinite 4.5s}
@keyframes v-click{0%,44%{opacity:0;transform:scale(.2)}46%{opacity:1;transform:scale(.4)}52%{opacity:0;transform:scale(1.2)}100%{opacity:0;transform:scale(1.2)}}

/* Pairing step 3: the phone's camera reading the code */
.cam{position:absolute;left:2.4%;top:1.1%;width:95.2%;height:97.8%;border-radius:14.6%/6.7%;overflow:hidden;background:radial-gradient(90% 60% at 50% 34%,#2a2d3c,#0e0f15 72%)}
.cam .qr{position:absolute;left:21%;top:21%;width:58%;border-radius:8%}
.cam .frame{position:absolute;left:12%;top:16.8%;width:76%;aspect-ratio:1;border-radius:14%;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/26% 3px,linear-gradient(var(--accent),var(--accent)) 0 0/3px 26%,
    linear-gradient(var(--accent),var(--accent)) 100% 0/26% 3px,linear-gradient(var(--accent),var(--accent)) 100% 0/3px 26%,
    linear-gradient(var(--accent),var(--accent)) 0 100%/26% 3px,linear-gradient(var(--accent),var(--accent)) 0 100%/3px 26%,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/26% 3px,linear-gradient(var(--accent),var(--accent)) 100% 100%/3px 26%;
  background-repeat:no-repeat;border-radius:0}
.cam .beam{position:absolute;left:14%;top:18%;width:72%;height:2px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px 1px var(--accent);animation:v-beam 2.4s ease-in-out infinite alternate}
@keyframes v-beam{to{transform:translateY(82px)}}

/* Pairing steps: swipe sideways on phones */
@media(max-width:880px){
  .steps:has(.step-art){
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,340px);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1*var(--sp-xl));padding:0 var(--sp-xl) var(--sp-s);scroll-padding-inline:var(--sp-xl);
  }
  .steps:has(.step-art)::-webkit-scrollbar{display:none}
  .steps:has(.step-art) .step{scroll-snap-align:start}
}

/* ---------- Windows and Android waiting list (assets/waitlist.js) ---------- */
#platforms .lead{margin-bottom:var(--sp-xl)}
.wl{max-width:480px;margin:0 auto;text-align:left}
.wl-form{display:flex;flex-direction:column;gap:var(--sp-s);padding:var(--sp-xl);border-radius:var(--r-sheet);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-float)}
.wl-picks{border:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s);margin-top:var(--sp-s)}
.wl-picks legend{padding:0;margin-bottom:var(--sp-s)}
.wl-pick{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;cursor:pointer;
  font-size:15px;font-weight:600;border:1px solid var(--line);background:var(--bg-2);
  transition:border-color var(--motion-micro),background var(--motion-micro);
}
.wl-pick input{width:18px;height:18px;accent-color:var(--accent)}
.wl-pick:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}
.wl-news{margin-top:var(--sp-s);font-weight:500;color:var(--muted)}
.wl-terms{margin:var(--sp-xs) 0 0}
.wl-done{
  padding:var(--sp-xl);border-radius:var(--r-sheet);text-align:left;
  background:color-mix(in srgb,var(--accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
}
.wl-done-main{font-weight:600;font-size:16px;text-wrap:pretty}
.wl-done-main strong{overflow-wrap:anywhere}
.wl-done-typo{margin-top:var(--sp-m);color:var(--muted);font-size:14px}
.wl-again{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ----- "Featured on" strip (side-scrolling when the names don't fit) ----- */
section.featured{margin:var(--sp-l) auto var(--sp-xl);padding:0;max-width:1100px;text-align:center}
.hero section.featured{margin:var(--sp-2xl) auto 0}
.ft-label{margin:0 0 10px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ft-row{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 24px 10px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ft-row::-webkit-scrollbar{display:none}
.ft-row>:first-child{margin-left:auto}
.ft-row>:last-child{margin-right:auto}
.ft-chip{flex:none;scroll-snap-align:center;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.ft-chip:hover{border-color:var(--muted)}
.ft-chip small{color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em}

/* ----- Download area: one tile per device (Mac, Windows, iPhone and iPad, Android), built by scripts/store-buttons.py.
   Live buttons sit in two columns (one on phones), each under its device icon and name. A device without a link yet
   is a quiet "Coming soon" pill under the grid; assets/waitlist.js turns the pill into a link to the waiting list. ----- */
.price-short{max-width:620px;margin:var(--sp-m) auto 0;text-align:center;color:var(--muted);text-wrap:pretty}
.price-cta{margin-top:var(--sp-xl)}
.get{max-width:780px;margin:0 auto}
.get-grid{display:grid;gap:var(--sp-xl)}
.get-tile{display:flex;flex-direction:column;align-items:center;gap:var(--sp-m);min-width:0}
.get-cap{display:inline-flex;align-items:center;gap:var(--sp-s);color:var(--text);font-size:15px;font-weight:600;letter-spacing:-.01em}
.get-cap svg{flex:none;width:24px;height:24px}
.get-soon svg{flex:none;width:20px;height:20px}
.get-cap svg{color:var(--accent)}
.get-cap span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.get-cap small{color:var(--muted);font-size:12px;font-weight:500}
/* A device whose app has its own name (two-line caption) must not push its button lower than its neighbour's */
.get-grid:has(.get-cap small) .get-cap{min-height:34px}
.get-tile>.cta{flex-direction:column}
.get-tile .cta-note,.get-tile .pair-note{margin-top:0}
.get-tile .cta-note+.cta-note{margin-top:-6px}
.get-tile .cta-note a{color:var(--accent);font-weight:600}
.get-tile .pair-note{max-width:340px}
/* Official store badges: the artwork is never restyled, only sized (same height for both) and given its clear space by the grid gap */
.store-badge{display:inline-flex;border-radius:8px;transition:transform var(--motion-micro)}
.store-badge:hover{transform:translateY(-1px)}
.store-badge img{max-width:none}
.get-soon-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-m);margin-top:var(--sp-xl)}
.get-soon{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 10px;
  min-height:44px;padding:8px 18px;border-radius:22px;border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);
  color:var(--muted);font-size:14px;line-height:1.3;
}
.get-soon b{color:var(--text);font-weight:600}
.get-soon .get-notify{color:var(--accent);font-weight:600}
a.get-soon[href]{transition:border-color var(--motion-micro),background var(--motion-micro)}
a.get-soon[href]:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.get-other{margin-top:var(--sp-2xl)}
.get-head{margin-bottom:var(--sp-l);color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ftm{text-wrap:pretty}
@media (min-width:760px){
  .get-grid{grid-template-columns:1fr 1fr;align-items:start}
  .get-grid>.get-tile:last-child:nth-child(odd){grid-column:1/-1}
}
/* Narrow two-column widths: a long button label (Ukrainian, Russian, Greek) wraps inside its tile instead of running off the screen edge */
@media (min-width:760px) and (max-width:1023px){.get-tile .btn{max-width:100%;white-space:normal;text-align:center}}
@media (prefers-reduced-motion:reduce){.store-badge,a.get-soon[href]{transition:none}}

/* ============================================================
   Site kit additions (not on controlmymac.com): device frames
   for apps without a Mac half. Same look as .phone above.
   ============================================================ */
/* Apple Watch frame around a real screenshot (416 x 496) */
.watch{
  position:relative;aspect-ratio:416/496;border-radius:27%/23%;
  background:#07080b;padding:6%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px #262a36,0 18px 44px rgba(0,0,0,.5);
}
.watch img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20%/17%;background:#000}
/* Feature slide with no Mac: the phone (and a Watch) stand on their own */
.duo-phone{display:flex;align-items:center;justify-content:center;gap:4%}
.duo-phone .phone{position:relative;right:auto;bottom:auto;width:30%;z-index:1}
.duo-phone .watch{position:relative;width:22%;z-index:2;align-self:flex-end;margin:0 0 6% -10%}
.step-art .watch{position:absolute;left:50%;top:34px;width:128px;translate:-50% 0}
/* Hero without a video: CMM's 16:9 frame with a still picture (app.json hero.image), or the app's
   phone and Watch on the theme glow, with CMM's two caption lines and no play button */
.hero-still{color:#fff;background:
    radial-gradient(52% 88% at 72% 42%,color-mix(in srgb,var(--accent-2) 34%,transparent),transparent 72%),
    radial-gradient(58% 72% at 10% 108%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%),
    #08070d}
.hero-still>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-still-img::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(8,9,13,.86),rgba(8,9,13,.5) 42%,transparent);pointer-events:none}
.hs-stage{position:absolute;inset:0}
.hs-stage .phone{position:absolute;right:21%;top:7%;width:23%}
.hs-stage .watch{position:absolute;right:6%;bottom:11%;width:17%;z-index:3}
.hero-still .hv-cap{right:50%;bottom:10%}
.hero-still-img .hv-cap{right:14%;bottom:8.5%}
/* Landscape apps: the iPhone on its side (screenshots 2868 x 1320), Dynamic Island on the left edge.
   Every size is a share of its column, so it scales down to a 390 px phone with no sideways scroll. */
.phone.land{aspect-ratio:2868/1320;border-radius:7.8%/17%}
.phone.land img{left:1.1%;top:2.4%;width:97.8%;height:95.2%;border-radius:6.7%/14.6%}
.phone.land::after{left:2.7%;top:50%;width:3.2%;height:29%;translate:0 -50%}
.duo.duo-phone .phone.land{width:84%}
.duo.duo-phone:has(.watch) .phone.land{width:70%}
.duo.duo-phone .phone.land + .watch{width:20%;margin:0 0 4% -12%}
.duo.duo-solo .phone.land{width:46%;margin-left:-22%;margin-bottom:2%}
.hs-stage .phone.land{right:5%;top:10%;width:58%}
.hs-stage .phone.land + .watch{right:4%;bottom:7%;width:15%}
.step-art .phone.land{top:38px;width:76%;max-width:250px}
/* TV and big screens (16:9 screenshots, e.g. an Android TV app): thin bezel, small foot, same device-art
   style. The screen itself is 16:9, so a 16:9 screenshot is never cropped. Sizes are shares of the column. */
.tv{position:relative;padding:1.4%;border-radius:2.6%/4.6%;background:#07080b;margin-bottom:5.5%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px #262a36,0 18px 44px rgba(0,0,0,.5)}
.tv img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1.4%/2.5%;background:#15171c}
.tv::before{content:"";position:absolute;left:50%;top:100%;width:5%;height:6%;translate:-50% 0;background:linear-gradient(#1b1c21,#262a36)}
.tv::after{content:"";position:absolute;left:50%;top:106%;width:28%;height:2.6%;translate:-50% 0;border-radius:999px;background:#262a36;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.duo-tv{display:flex;align-items:center;justify-content:center}
.duo-tv .tv{width:90%;z-index:1}
.duo-tv:has(.phone){display:block}
.duo-tv:has(.phone) .tv{position:absolute;left:0;top:3%;width:80%}
.step-art .tv{position:absolute;left:50%;top:24px;width:min(240px,84%);translate:-50% 0;margin:0}
/* How-step art "frame": "none": a plain rounded landscape picture */
.step-art .step-img{position:absolute;left:50%;top:24px;width:min(250px,84%);height:auto;aspect-ratio:16/9;object-fit:cover;
  translate:-50% 0;border-radius:var(--r-control);border:1px solid var(--line);box-shadow:var(--shadow-float)}
/* Hero caption placement (app.json hero.caption): "below" puts CMM's two lines under the frame, "none" leaves
   them out; both centre the devices in the frame. "over" (the default) is the rule above. */
.hv-cap-below{position:static;align-items:center;text-align:center;max-width:860px;margin:calc(-1*var(--sp-s)) auto var(--sp-xl);text-shadow:none;color:var(--text)}
.hv-cap-below .hv-cap-2{color:var(--accent)}
.hero-cap-below .hs-stage .phone,.hero-cap-none .hs-stage .phone{right:auto;left:50%;translate:-50% 0}
.hero-cap-below .hs-stage .watch,.hero-cap-none .hs-stage .watch{right:auto;left:calc(50% + 8%)}
.hero-cap-below .hs-stage .phone.land + .watch,.hero-cap-none .hs-stage .phone.land + .watch{left:calc(50% + 21%)}