/* ============================================================
   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));
  /* 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 rgba(79,140,255,.35);
  /* 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 rgba(79,140,255,.28);
    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:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(60% 38% at 50% -4%, rgba(79,140,255,.12), transparent 70%),
    radial-gradient(40% 30% at 85% 8%, rgba(124,92,255,.08), 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);
}
.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}
}
/* ≤380px (360px Androids, 320px SE-class): only brand + Download fit.
   Hide the remaining text links; nowrap above guarantees a single row. */
@media(max-width:380px){
  .nav-links 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;
  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 rgba(79,140,255,.45)}
.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}

/* ---------- 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;
  font-size:13px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;margin-bottom:var(--sp-xl);
  background:color-mix(in srgb,var(--card) 55%,transparent);
}
.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 10px}
  .pill-optional{display:none} /* keeps the pill on one line */
}
h1{
  font-size:clamp(36px,6.4vw,62px);line-height:1.04;letter-spacing:-.03em;
  font-weight:800;margin-bottom:var(--sp-l);text-wrap:balance;
}
.grad{
  background:var(--grad);
  -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 rgba(79,140,255,.5));
  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-weight:800;
  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}
.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%, rgba(124,92,255,.16), 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)}

/* ---------- 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 rgba(79,140,255,.25);
  --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:.45;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 ----- */
.grid-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-l)}
.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; }