/* MacStick marketing site — dark by default, no frameworks, no external fonts, no tracking. */

:root {
  color-scheme: dark light;

  /* Brand: one blue, three weights. Everything else is neutral graphite. */
  --accent-deep: #0071E3;
  --accent-mid: #2997FF;
  --accent-light: #7CC0FF;
  --accent-pale: #E8F3FF;

  /* Dark theme (default) */
  --bg: #0A0A0C;
  --bg-elev: #141416;
  --bg-soft: #1C1C1F;
  --bg-tint: #0F0F12;
  --fg: #F5F5F7;
  --fg-muted: #A1A1A6;
  --fg-faint: #6E6E73;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #2997FF;
  --accent-strong: var(--accent-light);
  --accent-soft: rgba(41, 151, 255, 0.12);
  --accent-fill: var(--accent-deep);
  --on-accent: #FFFFFF;
  --ring-track: rgba(255, 255, 255, 0.1);
  --island: #000000;
  --island-card: #0A0A0A;
  --glow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.55);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 40px 90px rgba(0,0,0,.6);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Inter, Segoe UI, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --max: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 10vw, 140px);
}

/* Light variant: opt-in via data-theme="light", or system preference when no override is set. */
[data-theme="light"] {
  --bg: #FBFBFD;
  --bg-elev: #FFFFFF;
  --bg-soft: #F5F5F7;
  --bg-tint: #F5F5F7;
  --fg: #1D1D1F;
  --fg-muted: #515154;
  --fg-faint: #86868B;
  --line: #E5E5EA;
  --line-strong: #D2D2D7;
  --accent: #0066CC;
  --accent-strong: #004F9E;
  --accent-soft: #E8F1FB;
  --accent-fill: #0071E3;
  --on-accent: #FFFFFF;
  --ring-track: #E5E5EA;
  --glow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.10);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.05), 0 30px 70px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #FBFBFD;
    --bg-elev: #FFFFFF;
    --bg-soft: #F5F5F7;
    --bg-tint: #F5F5F7;
    --fg: #1D1D1F;
    --fg-muted: #515154;
    --fg-faint: #86868B;
    --line: #E5E5EA;
    --line-strong: #D2D2D7;
    --accent: #0066CC;
    --accent-strong: #004F9E;
    --accent-soft: #E8F1FB;
    --accent-fill: #0071E3;
    --on-accent: #FFFFFF;
    --ring-track: #E5E5EA;
    --glow: 0 1px 2px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.10);
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.05), 0 30px 70px rgba(0,0,0,.12);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; padding: 10px 14px;
  background: var(--accent-fill); color: #fff; border-radius: var(--radius-sm); z-index: 100; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; color: var(--fg); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.leaf-mark { width: 30px; height: 30px; border-radius: 0; flex: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { display: inline-block; padding: 8px 12px; border-radius: 999px; color: var(--fg-muted); font-size: 15px; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); background: var(--bg-soft); text-decoration: none; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--accent-fill); color: #fff !important; font-weight: 600; }
.nav-cta:hover { background: var(--accent-mid); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; padding: 0; place-items: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--fg); margin: 0 auto; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.theme-toggle {
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg-muted); border-radius: 999px; height: 36px;
  padding: 0 12px; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line-strong); }
@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px var(--gutter) 20px; background: var(--bg-elev); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 17px; border-radius: var(--radius-sm); }
  .nav-cta { justify-content: center; margin-top: 8px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 17px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease;
  text-decoration: none !important;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-fill); color: #fff; box-shadow: 0 8px 24px rgba(0,113,227,.35); }
.btn-primary:hover { background: var(--accent-mid); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(56px, 8vw, 100px) 0 0;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .01em; border: 1px solid var(--line);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-mid);  }
.hero h1 { margin: 22px auto 0; max-width: 14em; font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -0.035em; line-height: 1.0; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin: 22px auto 0; max-width: 36em; font-size: clamp(18px, 1.6vw, 21px); color: var(--fg-muted); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; align-items: center; justify-content: center; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 8px; }
.hero-note svg { width: 14px; height: 14px; flex: none; }
.hero-meta { margin: 24px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 14px; color: var(--fg-muted); }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- MacBook + island mockup (pure CSS) ---------- */
.stage { position: relative; margin: clamp(40px, 6vw, 72px) auto 0; width: min(100%, 960px); padding: 0 var(--gutter); }
.macbook {
  position: relative; z-index: 1; margin: 0 auto;
  border-radius: 22px 22px 0 0; padding: 12px 12px 0;
  background: linear-gradient(180deg, #232324, #101112 60%);
  border: 1px solid rgba(255,255,255,.12); border-bottom: 0;
  box-shadow: var(--shadow-lg);
}
.screen {
  position: relative; border-radius: 12px 12px 0 0; overflow: visible; min-height: 440px;
  background: linear-gradient(180deg, #121214 0%, #0A0A0C 100%);
}
.screen::after { /* fade at bottom edge, suggests the screen continues */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none;
}
.menubar {
  display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 14px;
  font-size: 11px; color: rgba(255,255,255,.75); font-weight: 600;
}
.menubar span + span { margin-left: 12px; }
.menubar .right { color: rgba(255,255,255,.6); font-weight: 500; }
.notch {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 172px; height: 26px; background: #000; border-radius: 0 0 12px 12px; z-index: 3;
}

/* Island: hugs the notch, expands downward */
.island {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px)); background: var(--island); color: #fff;
  border-radius: 0 0 30px 30px; z-index: 4; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.65), 0 0 60px rgba(41,151,255,.12);
}
.wings {
  position: relative; height: 40px; display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; padding: 0 16px;
  font-size: 12.5px; font-weight: 600;
}
.wing { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.wing-right { justify-content: flex-end; }
.wing .leaf-mark { width: 20px; height: 20px; }
.wing .sep { color: rgba(255,255,255,.3); }
.wing .ring-mini {
  --p: 67; width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(var(--accent-mid) calc(var(--p) * 1%), rgba(255,255,255,.14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.batt { display: inline-flex; align-items: center; gap: 6px; }
.batt-icon { position: relative; width: 22px; height: 11px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 3px; }
.batt-icon::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; background: rgba(255,255,255,.7); border-radius: 1px; }
.batt-icon i { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 82%; background: var(--accent-mid); border-radius: 1px; }

.island-body { padding: 8px 14px 16px; display: grid; gap: 10px; }
.icard { background: #111; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 14px 16px; }
.icard.flat { background: #0D0D0D; }

.focus-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.ring {
  --p: 67; position: relative; width: 88px; height: 88px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent-mid) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); display: grid; place-items: center;
}
.ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #111; }
.ring-inner { position: relative; text-align: center; }
.ring-time { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.ring-label { margin-top: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.focus-copy h3 { font-size: 16px; font-weight: 650; }
.focus-copy p { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.pills { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap; }
.pill svg { width: 10px; height: 10px; }
.pill-primary { background: var(--accent-fill); color: #fff; }
.pill-secondary { background: rgba(255,255,255,.1); color: #fff; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { min-width: 0; }
.tile-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
.tile-label svg { width: 12px; height: 12px; color: var(--accent-mid); flex: none; }
.tile-value { margin-top: 6px; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
.battery-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); margin-top: 8px; overflow: hidden; }
.battery-bar span { display: block; height: 100%; width: 82%; background: var(--accent-mid); border-radius: 999px; }
.usage-rows { margin-top: 6px; display: grid; gap: 5px; }
.usage-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 11.5px; line-height: 1.35; }
.usage-row .name { font-weight: 650; white-space: nowrap; }
.usage-row .num { color: rgba(255,255,255,.6); white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.usage-row .cost { color: #fff; font-weight: 650; }
.usage-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; width: 100%; margin-top: 3px; }
.usage-bar span { display: block; height: 100%; width: 11%; background: var(--accent-mid); border-radius: 999px; }
.join { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--accent-mid); color: #0a0a0b; font-size: 12px; font-weight: 700; }
.join svg { width: 11px; height: 11px; }

.strip { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.art { width: 36px; height: 36px; border-radius: 9px; background: var(--accent-deep); flex: none; }
.strip .track { font-size: 13px; font-weight: 650; }
.strip .artist { font-size: 11.5px; color: rgba(255,255,255,.55); }
.transport { display: flex; gap: 10px; align-items: center; color: #fff; }
.transport svg { width: 14px; height: 14px; }
.transport .play { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }

.bottom-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.shelf { display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; }
.shelf .label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 11.5px; white-space: nowrap; }
.file i { width: 10px; height: 12px; border-radius: 2px; background: var(--accent-light); display: inline-block; }
.file i.k { background: #D9B46A; } .file i.p { background: #619ee2; }
.mic { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 92, 92, .14); color: #FF9A9A; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mic::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF5C5C; box-shadow: 0 0 8px #FF5C5C; }

@media (max-width: 720px) {
  .screen { min-height: 520px; }
  .wings { grid-template-columns: 1fr 120px 1fr; font-size: 11px; padding: 0 10px; }
  .notch { width: 120px; height: 22px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles .tile:last-child { grid-column: 1 / -1; }
  .focus-row { grid-template-columns: auto 1fr; }
  .focus-row .pills { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .macbook { padding: 8px 8px 0; }
  .island { width: calc(100% - 12px); }
  .island-body { padding: 6px 8px 12px; }
  .icard { padding: 12px; }
  .tiles { grid-template-columns: 1fr; }
  .bottom-row { grid-template-columns: 1fr; }
  .shelf { flex-wrap: wrap; }
  .wing .hide-sm { display: none; }
  .screen { min-height: 640px; }
}

/* ---------- Sections ---------- */
.section { padding: var(--section) 0; }
.section-tint { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 42em; }
.section-head .kicker, .kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.section-head h2 { margin-top: 10px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em; }
.section-head p { margin-top: 14px; color: var(--fg-muted); font-size: 18px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Feature grid */
.features { margin-top: 48px; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, border-color .2s ease;
}
.feature:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.feature-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 17px; }
.feature p { color: var(--fg-muted); font-size: 14.5px; }
.feature .status { margin-top: auto; padding-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg-faint); }
.feature .status.ok::before { content: "● "; color: var(--accent-mid); }
.feature .status.soon::before { content: "○ "; color: var(--fg-faint); }
.feature.wide { grid-column: span 2; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } .feature.wide { grid-column: auto; } }

/* Professionals */
.pros { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pro { position: relative; padding: 28px 26px; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--line); overflow: hidden; }
.pro .who { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pro h3 { font-size: 22px; margin-top: 8px; letter-spacing: -0.02em; }
.pro p { margin-top: 10px; color: var(--fg-muted); font-size: 15px; }
.pro ul { margin-top: 14px; display: grid; gap: 8px; }
.pro li { display: flex; gap: 10px; font-size: 14.5px; color: var(--fg-muted); }
.pro li::before { content: "—"; color: var(--accent); flex: none; }
@media (max-width: 900px) { .pros { grid-template-columns: 1fr; } }

/* Split (why) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; margin-top: 48px; }
.split > * { min-width: 0; }
.split table.compare { min-width: 520px; }
.points { display: grid; gap: 22px; }
.point { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.point-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 15px; border: 1px solid var(--line); }
.point h3 { font-size: 18px; }
.point p { color: var(--fg-muted); font-size: 15px; margin-top: 4px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Comparison table */
.table-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.compare caption { text-align: left; padding: 18px 20px 6px; font-size: 14px; color: var(--fg-muted); caption-side: top; }
.compare th, .compare td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; font-weight: 650; font-size: 13.5px; color: var(--fg-muted); letter-spacing: .02em; background: var(--bg-soft); position: sticky; top: 0; }
.compare thead th.us { color: var(--accent); background: var(--accent-soft); }
.compare td.us { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); font-weight: 500; }
.compare th[scope="row"] { font-weight: 600; color: var(--fg); min-width: 180px; }
.compare .yes { color: var(--accent); font-weight: 700; }
.compare .no { color: var(--fg-faint); }
.compare .part { color: var(--fg-muted); }
.compare .unv { color: var(--fg-faint); font-style: italic; }
.compare small { display: block; color: var(--fg-faint); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.compare-note { margin-top: 14px; font-size: 14px; color: var(--fg-faint); max-width: 60em; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 13.5px; color: var(--fg-muted); }

/* Roadmap */
.roadmap { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.road { border-radius: var(--radius); padding: 20px 22px; border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--bg-elev) 60%, transparent); }
.road h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.road h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-mid); flex: none; }
.road p { margin-top: 8px; color: var(--fg-muted); font-size: 15px; }
@media (max-width: 900px) { .roadmap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roadmap { grid-template-columns: 1fr; } }

/* Privacy */
.privacy-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.privacy-item { padding: 24px; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.privacy-item .big { font-size: 40px; font-weight: 650; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.privacy-item h3 { font-size: 17px; margin-top: 10px; }
.privacy-item p { margin-top: 6px; color: var(--fg-muted); font-size: 15px; }
@media (max-width: 800px) { .privacy-grid { grid-template-columns: 1fr; } }

/* Requirements */
.req { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.req li { padding: 20px 22px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--line); }
.req strong { display: block; font-size: 17px; }
.req span { color: var(--fg-muted); font-size: 15px; }
@media (max-width: 720px) { .req { grid-template-columns: 1fr; } }

/* FAQ */
.faq { margin-top: 36px; max-width: 760px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: var(--radius); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding: 0 22px 20px; color: var(--fg-muted); }

/* Download CTA */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(36px, 6vw, 64px);
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--fg); text-align: center;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.025em; }
.cta-band p { margin-top: 12px; color: var(--fg-muted); font-size: 17px; max-width: 42em; margin-inline: auto; }
.cta-band .btn-primary { margin-top: 26px; }
.cta-band .fine { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.6); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 40px; font-size: 14px; color: var(--fg-muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.footer-grid h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); font-weight: 700; margin-bottom: 12px; }
.footer-grid li + li { margin-top: 8px; }
.footer-grid a { color: var(--fg-muted); }
.footer-grid a:hover { color: var(--fg); }
.footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--fg-faint); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Prose pages */
.page-hero { padding: clamp(48px, 7vw, 90px) 0 clamp(24px, 3vw, 40px); }
.page-hero h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.03em; margin-top: 10px; }
.page-hero p { margin-top: 14px; color: var(--fg-muted); font-size: 18px; max-width: 44em; }
.prose { max-width: 720px; }
.prose h2 { font-size: 26px; margin-top: 44px; letter-spacing: -0.02em; }
.prose h3 { font-size: 19px; margin-top: 28px; }
.prose p, .prose li { color: var(--fg-muted); margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose li { margin-top: 8px; }
.prose strong { color: var(--fg); }
.prose .callout { margin-top: 24px; padding: 18px 20px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-mid) 40%, transparent); color: var(--fg); }
.prose code { font-family: var(--mono); font-size: .92em; background: var(--bg-soft); padding: 2px 6px; border-radius: 6px; }

/* Visual feature tour: original vector illustrations, short captions. */
.hero .lede { max-width: 34em; }
.hero-visual-label { text-align:center; color:var(--fg-muted); font-size:12px; margin:0 20px 18px; }
.section-head .illustration-note { font-size:13px; color:var(--fg-muted); }
.picture-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:36px; }
.picture-card { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--bg-elev); }
.picture-card img { width:100%; height:auto; border-radius:0; }
.picture-copy { padding:24px 28px 28px; }
.picture-copy h3 { font-size:24px; letter-spacing:-.025em; }
.picture-copy p { margin-top:8px; font-size:16px; color:var(--fg-muted); }
.visual-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin-top:40px; }
.visual-flow li { position:relative; border-top:1px solid var(--line-strong); padding-top:24px; }
.visual-flow span { display:block; color:var(--accent); font-size:42px; font-weight:300; margin-bottom:16px; }
.visual-flow h3 { font-size:20px; }
.visual-flow p { font-size:15px; color:var(--fg-muted); margin-top:8px; }
.device-story,.privacy-story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.device-art { display:flex; align-items:center; gap:24px; min-height:260px; padding:30px 10px; }
.device { position:relative; width:48%; height:142px; background:#292a2e; border:7px solid #6e6e70; border-radius:12px; }
.device-panel { position:absolute; width:50%; height:22px; background:#0a0a0b; top:0; left:25%; border-radius:0 0 10px 10px; }
.device-panel::after { content:""; position:absolute; left:12px; top:9px; width:18px; height:4px; background:#2997FF; border-radius:3px; }
.laptop { transform:translateY(26px); }
.laptop::after { content:""; position:absolute; bottom:-17px; left:-10%; width:120%; height:9px; background:#8f8f91; border-radius:2px 2px 10px 10px; }
.desktop { height:180px; }
.desktop .device-panel { top:10px; border-radius:10px; }
.desktop::after { content:""; position:absolute; bottom:-44px; left:30%; width:40%; height:36px; border-bottom:6px solid #8f8f91; background:linear-gradient(90deg,transparent 35%,#6e6e70 35%,#6e6e70 65%,transparent 65%); }
.privacy-art { width:240px; justify-self:center; }
.compact-roadmap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
.compact-roadmap h2 { font-size:30px; margin-top:8px; }
.compact-roadmap > p { width:100%; color:var(--fg-muted); font-size:13px; }
.roadmap-chips { display:flex; flex-wrap:wrap; gap:10px; }
.roadmap-chips li { padding:10px 16px; border:1px dashed var(--line-strong); border-radius:100px; font-size:14px; }
.release-badge { display:inline-block; padding:12px 24px; margin-top:24px; border:1px solid #2997FF; border-radius:100px; color:#9CCFFF; }
@media(max-width:700px) {
 .picture-grid,.device-story,.privacy-story { grid-template-columns:1fr; gap:24px; }
 .picture-copy { padding:20px; }
 .picture-copy h3 { font-size:22px; }
 .visual-flow { grid-template-columns:1fr; gap:20px; }
 .visual-flow li { padding-left:62px; }
 .visual-flow span { position:absolute; left:0; top:15px; font-size:32px; }
 .device-art { min-height:230px; }
 .privacy-art { width:180px; }
}

/* Interactive preview: contained in the page, never over system controls. */
.demo-section { margin-top:64px; }
.demo-heading h2 { font-size:clamp(28px,4vw,40px); margin:8px 0; letter-spacing:-.03em; }
.demo-heading > p:last-child { color:var(--fg-muted); font-size:16px; }
.demo-controls { display:flex; justify-content:center; gap:8px; margin:24px 0; }
.demo-controls button { color:var(--fg-muted); background:var(--bg-elev); border:1px solid var(--line-strong); padding:10px 18px; border-radius:100px; cursor:pointer; }
.demo-controls button[aria-pressed="true"] { color:var(--fg); background:var(--accent-soft); border-color:var(--accent); }
.demo-desktop { min-height:580px; position:relative; overflow:hidden; border:8px solid #2e2f30; border-radius:28px; background:radial-gradient(ellipse at 0 100%,#58595c,transparent 65%),linear-gradient(130deg,#2c2c2f,#161617); padding:44px 16px 28px; }
.demo-menu { position:absolute; inset:0 0 auto; height:30px; display:flex; justify-content:space-between; padding:6px 18px; font-size:11px; color:#d8d8da; background:#ffffff08; }
.demo-housing { width:132px; height:26px; background:#060607; border-radius:0 0 12px 12px; position:absolute; top:0; left:50%; transform:translateX(-50%); }
[data-device="monitor"] .demo-housing { display:none; }
[data-device="monitor"] { border-radius:12px; }
.live-island { position:relative; z-index:1; width: min(100%,310px); margin:0 auto; border:1px solid #39393b; border-radius:22px; background:#0c0d0e; color:#f1f1f2; box-shadow:0 20px 50px #0005; transition:width .25s ease,border-radius .25s ease; text-align:left; }
.live-island.is-expanded { width:min(100%,460px); border-radius:26px; }
.island-trigger { width:100%; padding:15px 18px; display:flex; justify-content:space-between; align-items:center; border:0; background:none; color:inherit; border-radius:22px; cursor:pointer; font:600 14px var(--font); }
.island-trigger > span { display:flex; align-items:center; gap:10px; }
.island-trigger .leaf-mark { width:24px; height:24px; }
[data-compact-time] { font-variant-numeric:tabular-nums; color:#4BA6FF; }
.demo-tabs { display:flex; gap:4px; margin:0 14px; padding:5px; border-radius:13px; background:#1e1e1f; }
.demo-tabs button { flex:1; border:0; border-radius:9px; padding:10px 3px; font:500 13px var(--font); color:#bcbdbf; background:none; cursor:pointer; }
.demo-tabs button[aria-pressed="true"] { background:#0A4C99; color:#fff; }
.demo-scene { padding:20px; text-align:center; min-height:275px; }
.demo-scene h3 { font-size:22px; margin:12px 0 5px; }
.demo-scene p { color:#bdbec0; font-size:13px; margin:12px 0; }
.demo-timer { display:flex; justify-content:center; margin:0 0 18px; }
.demo-dial { --progress:0%; width:152px; height:152px; border-radius:50%; background:conic-gradient(#2997FF var(--progress),#343437 0); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.demo-dial::before { content:""; position:absolute; inset:7px; border-radius:50%; background:#0c0d0e; }
.demo-dial > * { position:relative; }
.demo-dial > span { font-size:34px; font-variant-numeric:tabular-nums; }
.demo-dial small { font-size:11px; color:#bdbdc0; margin-top:6px; }
.demo-actions { display:flex; justify-content:center; gap:10px; }
.demo-actions button { padding:10px 17px; border:1px solid #5c5c5f; background:#232426; color:#f0f1f2; border-radius:100px; cursor:pointer; font:600 13px var(--font); }
.demo-actions button:first-child { background:#2997FF; color:#0c0d0e; border-color:#2997FF; }
.demo-duration { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; font-size:12px; color:#bdbec0; }
.demo-duration select { color:#f1f1f2; background:#232426; padding:5px; border:1px solid #5c5c5f; border-radius:7px; }
.demo-feedback { margin:0 20px; min-height:36px; text-align:center; font-size:12px; color:#7CC0FF; }
.demo-close { display:block; margin:0 auto 16px; padding:8px 14px; background:transparent; color:#c0c1c3; border:0; text-decoration:underline; cursor:pointer; }
.desktop-caption { position:absolute; inset:auto 20px 35px; text-align:center; color:#c7c8cb; opacity:.65; pointer-events:none; }
.desktop-caption span,.desktop-caption strong { display:block; font-weight:400; font-size:22px; }
.demo-disclaimer { margin:16px auto 0; color:var(--fg-muted); font-size:12px; text-align:center; }
.demo-record { width:110px; height:110px; display:grid; place-items:center; margin:auto; border-radius:18px; background:#0A5CB8; }
.demo-record > div { width:84px; height:84px; background:repeating-radial-gradient(#1c1d1f 0 5px,#2b2c30 6px 7px); border-radius:50%; position:relative; }
.demo-record > div::after { content:""; width:22px; height:22px; background:#4BA6FF; border-radius:50%; position:absolute; left:31px; top:31px; }
.demo-file-list { display:grid; gap:8px; margin-bottom:18px; min-height:115px; align-content:center; }
.demo-file-row { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px 14px; border:1px solid #3d3e42; border-radius:12px; font-size:14px; }
.demo-file-row button { background:none; color:#bdbec0; border:0; padding:5px; cursor:pointer; }
.demo-calendar { margin:auto; width:82px; padding:10px; border-radius:14px; background:#0A4C99; color:#7CC0FF; font-size:12px; }
.demo-calendar strong { display:block; font-size:38px; color:#fff; }
.demo-section [hidden] { display:none!important; }
.demo-section button:focus-visible,.demo-section select:focus-visible { outline:3px solid #a0c9f4; outline-offset:3px; }
.footer-intro { display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; padding-bottom:32px; border-bottom:1px solid var(--line); }
.footer-status { margin-left:auto; font-size:12px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:100px; }
.footer-directory { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px; padding-top:36px; }
.footer-directory h3 { color:var(--fg); font-size:14px; margin-bottom:18px; }
.footer-directory li { margin:11px 0; }
.footer-directory a { color:var(--fg-muted); font-size:14px; }
.footer-directory a:hover { color:var(--accent); text-decoration:underline; }
.footer-note { color:var(--fg-muted); font-size:12px; margin-top:18px; }
@media(max-width:900px) { .footer-directory { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:560px) { .footer-directory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .footer-status { margin-left:0; } .demo-desktop { padding:44px 8px 24px; border-width:5px; min-height:600px; } .demo-menu { font-size:9px; padding-inline:10px; } .demo-housing { width:90px; } .demo-tabs { margin-inline:8px; } .demo-scene { padding:20px 12px; } .demo-heading h2 { font-size:28px; } }

/* Commerce pages share the native, quiet visual language. */
.commerce-page { padding-block:42px 80px; }
.commerce-page > .kicker { margin-top:48px; }
.commerce-page h1 { font-size:clamp(30px,5vw,52px); letter-spacing:-.035em; margin:12px 0; }
.commerce-lede { color:var(--fg-muted); max-width:42em; margin:16px 0 28px; }
.commerce-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.commerce-card { padding:clamp(24px,4vw,40px); border:1px solid var(--line-strong); border-radius:24px; background:var(--bg-elev); }
.commerce-card h2 { margin:20px 0 12px; font-size:30px; letter-spacing:-.03em; }
.commerce-card p { color:var(--fg-muted); }
.commerce-badge { color:var(--accent); font-size:13px; }
.commerce-list { display:grid; gap:14px; margin:28px 0; }
.commerce-list li::before { content:'✓'; color:var(--accent); padding-right:12px; }
.commerce-steps { list-style:decimal; padding-left:24px; display:grid; gap:24px; margin:24px 0; }
.commerce-steps p { font-size:15px; margin-top:6px; }
.commerce-fine { color:var(--fg-muted); font-size:13px; margin-top:20px; max-width:65em; }
.commerce-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:32px; font-size:14px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
@media(max-width:700px) { .commerce-grid { grid-template-columns:1fr; } }

/* Actual Apple hardware imagery alongside an accessible, full-size app close-up. */
.demo-desktop { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:center; min-height:560px; padding:36px; overflow:visible; border:1px solid var(--line-strong); border-radius:28px; background:var(--bg-soft); }
.demo-desktop[data-device="monitor"] { border-radius:28px; }
.hardware-preview { min-width:0; margin:0; text-align:left; }
.hardware-photo { overflow:hidden; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.hardware-photo-laptop { background:#000; }
.hardware-photo-monitor { background:#fff; }
.hardware-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.hardware-preview .hardware-photo { height:280px; padding:18px; }
.hardware-preview figcaption { padding:22px 4px 0; }
.hardware-kind { display:block; color:var(--accent); font-size:11px; font-weight:650; letter-spacing:.14em; }
.hardware-preview figcaption strong { display:block; margin-top:8px; font-size:26px; letter-spacing:-.025em; }
.hardware-preview figcaption p { margin-top:6px; color:var(--fg-muted); font-size:15px; }
.hardware-demo-detail { min-width:0; align-self:start; padding-top:8px; }
.hardware-detail-label { display:flex; justify-content:space-between; margin:0 8px 18px; font-size:10px; font-weight:650; letter-spacing:.14em; color:var(--fg-muted); }
.hardware-demo-detail .live-island,.hardware-demo-detail .live-island.is-expanded { width:100%; }
.hardware-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:40px; }
.hardware-card { margin:0; overflow:hidden; background:var(--bg-elev); border:1px solid var(--line); border-radius:24px; }
.hardware-card .hardware-photo { height:330px; border-radius:0; padding:36px; }
.hardware-card figcaption { padding:28px; }
.hardware-card h3 { font-size:26px; letter-spacing:-.025em; margin:12px 0 8px; }
.hardware-card p { font-size:16px; color:var(--fg-muted); }
.hardware-card a { display:inline-block; margin-top:20px; font-size:14px; }
.hardware-credit { font-size:12px; color:var(--fg-muted); text-align:center; margin-top:24px; }
@media(max-width:850px) { .demo-desktop { grid-template-columns:1fr; padding:24px; gap:32px; } .hardware-preview { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; } .hardware-preview .hardware-photo { height:190px; padding:12px; } .hardware-preview figcaption { padding:0; } .hardware-demo-detail { width:min(100%,460px); justify-self:center; } .hardware-card .hardware-photo { height:240px; padding:20px; } }
@media(max-width:560px) { .hardware-grid { grid-template-columns:1fr; } .demo-desktop { padding:18px 12px; } .hardware-preview { grid-template-columns:1fr; gap:16px; } .hardware-preview .hardware-photo { height:210px; } .hardware-preview figcaption { text-align:center; } .hardware-card .hardware-photo { height:270px; } .hardware-preview figcaption strong { font-size:23px; } }

/* Screen close-ups: wallpaper and live interface, without device product shots. */
.demo-desktop { display:block; position:relative; min-height:630px; padding:32px 20px 120px; overflow:hidden; border:5px solid #1b1b1d; border-radius:20px; background:#133353 url('assets/desktop-wallpaper.svg?v=f146801c53') center/cover; }
.demo-desktop[data-device="monitor"] { border-radius:16px; }
.screen-menubar,.study-menu { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:7px 18px; color:#fff; background:#ffffff16; backdrop-filter:blur(20px); font-size:11px; }
.screen-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:150px; height:34px; background:#0c0d0e; border-radius:0 0 12px 12px; }
[data-device="monitor"] .screen-notch { display:none; }
.hardware-demo-detail { width:100%; padding:0; position:relative; z-index:2; }
.hardware-demo-detail .live-island { width:min(100%,310px); border-radius:0 0 22px 22px; border-top:0; }
.hardware-demo-detail .live-island.is-expanded { width:min(100%,460px); }
[data-device="monitor"] .hardware-demo-detail { padding-top:26px; }
[data-device="monitor"] .live-island { border-radius:26px; }
.screen-caption { position:absolute; bottom:30px; left:20px; right:20px; color:white; text-align:center; text-shadow:0 2px 12px #0008; }
.screen-caption span { font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:650; }
.screen-caption p { margin-top:9px; font-size:17px; color:#dfe9f2; }
.screen-study { height:300px; position:relative; overflow:hidden; background:#133353 url('assets/desktop-wallpaper.svg?v=f146801c53') center/cover; border-top:5px solid #1b1b1d; }
.screen-study-monitor { background-position:bottom right; }
.study-menu { font-size:10px; padding:7px 12px; }
.study-menu span { margin-left:auto; }
.study-island { position:relative; z-index:1; margin:0 auto; width:220px; padding:26px 18px 16px; display:flex; justify-content:space-between; background:#0c0d0e; color:#eaeaeb; border-radius:0 0 20px 20px; box-shadow:0 15px 35px #0005; font-size:12px; }
.study-island strong { color:#4BA6FF; }
.screen-study-monitor .study-island { top:42px; padding:16px 18px; border-radius:24px; }
.study-window { width:62%; height:150px; position:absolute; left:19%; top:125px; padding:12px 18px; border:1px solid #ffffff4d; border-radius:12px; background:#f2f3f421; backdrop-filter:blur(18px); box-shadow:0 18px 40px #20212450; }
.study-window span { color:#ffffffa0; font-size:10px; letter-spacing:3px; }
.study-window i { display:block; height:7px; border-radius:4px; width:75%; background:#ffffff38; margin-top:17px; }
.study-window i:last-child { width:45%; }
@media(max-width:560px) { .demo-desktop { padding:32px 8px 115px; min-height:640px; } .screen-menubar { padding-inline:10px; font-size:9px; } .menu-extra { display:none; } .screen-notch { width:110px; } .screen-caption p { font-size:14px; } .screen-study { height:270px; } }

.usage-preview-stats { margin:24px 0; text-align:left; }
.usage-preview-stats > div { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid #ffffff18; gap:12px; }
.usage-preview-stats dt { color:#bcbdbf; font-size:14px; }
.usage-preview-stats dd { margin:0; font-size:24px; color:#F5F5F7; font-variant-numeric:tabular-nums; }
.usage-preview-stats small { font-size:12px; color:#bcbdbf; }
@media(max-width:560px) { .demo-tabs { flex-wrap:wrap; } .demo-tabs button { flex:1 1 25%; } }

/* Keep the island attached to the screen's top edge in both preview modes. */
.demo-desktop { padding:0 18px 110px; min-height:650px; overflow:clip; border-color:#26272a; box-shadow:0 24px 60px #142c4820; }
.hardware-demo-detail,[data-device="monitor"] .hardware-demo-detail { position:sticky; top:0; padding:0; margin:0 auto; z-index:3; }
.hardware-demo-detail .live-island,[data-device="monitor"] .live-island { border-radius:0 0 26px 26px; background:linear-gradient(145deg,#161719,#0e0e10); border:1px solid #ffffff20; border-top:0; box-shadow:0 20px 50px #16171960; }
.screen-notch { display:none; }
#demo-expanded { max-height:470px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#6b6c74 transparent; }
.demo-tabs { background:#2a2b2e; }
.demo-tabs button { transition:background .18s,color .18s; }
.demo-tabs button[data-scene="usage"][aria-pressed="true"] { background:#315f8d; color:#eeeef0; }
.demo-tabs button[data-scene="focus"][aria-pressed="true"] { background:#0A4C99; color:#D6EAFF; }
.demo-tabs button[data-scene="music"][aria-pressed="true"] { background:#2c4984; color:#efeff1; }
.demo-tabs button[data-scene="shelf"][aria-pressed="true"] { background:#28548a; color:#dbecff; }
.demo-tabs button[data-scene="meeting"][aria-pressed="true"] { background:#79572a; color:#ffedce; }
.demo-dial { border-color:#2997FF; box-shadow:0 0 32px #1285ff1a,inset 0 0 25px #1285ff0d; }
.usage-preview-stats > div:nth-child(1) dd { color:#b6dbff; }
.usage-preview-stats > div:nth-child(2) dd { color:#8ec5ff; }
.usage-preview-stats > div:nth-child(3) dd { color:#9CCFFF; }
.screen-study-monitor .study-island { top:0; padding:26px 18px 16px; border-radius:0 0 20px 20px; }
.screen-study-monitor { background-position:right bottom; }
.study-island { background:linear-gradient(135deg,#1f1f22,#0f0f10); }
.screen-study-monitor .study-island strong { color:#b9d0ff; }
@media(max-width:560px) { .demo-desktop { padding:0 8px 110px; min-height:650px; } .screen-menubar { display:none; } #demo-expanded { max-height:480px; } }
/* Editorial pages share the product's quiet, colorful visual language. */
.editorial-nav { display:flex; align-items:center; gap:24px; font-size:14px; }
.editorial-hero { padding-top:90px; padding-bottom:48px; }
.editorial-hero h1 { font-size:clamp(38px,5.7vw,72px); line-height:1.06; letter-spacing:-.055em; max-width:1000px; margin:20px 0; }
.editorial-lede { max-width:760px; color:var(--fg-muted); font-size:20px; line-height:1.6; }
.editorial-section { padding-top:24px; padding-bottom:64px; }
.editorial-section > h2 { margin-bottom:24px; font-size:32px; letter-spacing:-.035em; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.resource-card { position:relative; display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:22px; background:var(--bg-elev); text-decoration:none; min-height:235px; transition:transform .18s,border-color .18s; }
.resource-card:hover { transform:translateY(-3px); border-color:#78aad4; }
.resource-card h3 { font-size:23px; letter-spacing:-.025em; line-height:1.25; margin:16px 0 12px; color:var(--fg); }
.resource-card p { font-size:15px; line-height:1.65; color:var(--fg-muted); }
.resource-arrow { margin-top:auto; padding-top:20px; color:var(--accent); }
.research-disclosure,.article-callout { padding:24px 28px; border:1px solid var(--line); background:var(--bg-soft); border-radius:18px; margin-bottom:28px; }
.research-disclosure p { margin-top:8px; color:var(--fg-muted); line-height:1.7; max-width:900px; }
.research-table { width:100%; min-width:1120px; border-collapse:collapse; font-size:14px; }
.research-table caption { text-align:left; padding:16px; color:var(--fg-muted); }
.research-table th,.research-table td { padding:20px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
.research-table th:first-child { min-width:155px; }
.research-table th small { display:block; font-size:11px; font-weight:400; margin-top:6px; }
.research-table thead { background:var(--bg-soft); }
.research-table .own-product { background:color-mix(in srgb,var(--accent) 8%,var(--bg)); }
.comparison-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:18px; }
.prose { max-width:780px; }
.prose p,.prose li { line-height:1.85; font-size:17px; color:var(--fg-muted); }
.prose h2 { font-size:28px; line-height:1.25; letter-spacing:-.025em; margin:36px 0 16px; }
.prose p { margin-bottom:20px; }
.prose ul { padding-left:22px; margin:20px 0; }
.prose li { margin-bottom:10px; }
.prose a { text-decoration:underline; text-underline-offset:4px; }
.article-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:70px; }
.article-toc { align-self:start; position:sticky; top:90px; display:grid; gap:16px; font-size:14px; line-height:1.5; }
.article-toc a { color:var(--fg-muted); }
.article-illustration { width:100%; height:auto; aspect-ratio:640/380; object-fit:cover; border-radius:20px; margin:15px 0 20px; }
.breadcrumbs,.editorial-note { font-size:13px!important; line-height:1.7; color:var(--fg-muted); }
.editorial-footer { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:36px 0; }
.editorial-footer nav { display:flex; flex-direction:column; gap:12px; font-size:14px; }
.editorial-footer h3 { margin-bottom:6px; }
.brand-showcase { display:grid; justify-items:center; gap:20px; padding:64px 24px; border-radius:28px; margin-bottom:40px; background:#F5F5F7; color:#1D1D1F; }
.brand-showcase h2 { font-size:52px; letter-spacing:-.05em; }
.directory-list { columns:2; list-style:none; padding:0; }
.directory-list li { padding:12px 0; break-inside:avoid; }
:focus-visible { outline:3px solid #6fa6d6; outline-offset:4px; }
@media(max-width:850px) { .resource-grid { grid-template-columns:1fr 1fr; } .article-layout { grid-template-columns:1fr; gap:24px; } .article-toc { position:static; padding:20px; border:1px solid var(--line); border-radius:16px; } }
@media(max-width:560px) { .editorial-nav { gap:12px; font-size:12px; } .editorial-nav .nav-cta { display:none; } .editorial-hero { padding-top:54px; } .editorial-lede { font-size:17px; } .resource-grid { grid-template-columns:1fr; } .editorial-footer { grid-template-columns:1fr 1fr; } .directory-list { columns:1; } .resource-card { min-height:200px; } }
@media(prefers-reduced-motion:reduce) { .resource-card { transition:none; } }

/* ---------- Analytics consent ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin-inline: auto; max-width: 560px; padding: 16px 18px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 14px; color: var(--fg-muted); }
.consent p { flex: 1 1 260px; margin: 0; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }
.consent .btn { padding: 8px 16px; font-size: 14px; }

/* ---- Live hero stage: agent session on the desktop, reactive island, Mac hardware ---- */
.island-trigger.is-live [data-compact-time] { display:none; }
.island-trigger:not(.is-live) .live-value { display:none; }
[data-live-label] { max-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-value { display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; color:#7CC0FF; }
.live-island[data-tone="amber"] .live-value { color:#FFB340; }
.live-island[data-tone="amber"] .live-value::before { content:''; width:7px; height:7px; border-radius:50%; background:#FFB340; animation:ms-pulse 1.2s ease-in-out infinite; }
.live-island[data-tone="amber"] { border-color:#ffb34066 !important; }
.live-island.is-bump .island-trigger { animation:ms-bump .45s ease; }
.eq { display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.eq i { width:3px; height:100%; border-radius:2px; background:currentColor; transform-origin:bottom; animation:ms-eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay:.2s; } .eq i:nth-child(3) { animation-delay:.45s; }
@keyframes ms-pulse { 50% { opacity:.25; } }
@keyframes ms-bump { 40% { transform:scale(1.04); } }
@keyframes ms-eq { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
@keyframes ms-line { from { opacity:0; transform:translateY(4px); } }
.desk-window { position:absolute; z-index:1; top:96px; left:50%; transform:translateX(-50%); width:min(calc(100% - 36px),640px); border-radius:12px; background:#101113f5; border:1px solid #ffffff1f; box-shadow:0 30px 70px #0009; color:#d7d9de; text-align:left; }
.desk-window header { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #ffffff14; font:600 12px var(--font); color:#9a9ca3; }
.desk-window header i { width:11px; height:11px; border-radius:50%; background:#3a3b40; }
.desk-window header span { margin-left:8px; }
.term { padding:14px 16px 4px; min-height:176px; font:13px/1.75 var(--mono); }
.term p { margin:0; animation:ms-line .25s ease both; overflow-wrap:anywhere; }
.term .prompt { color:#fff; } .term .prompt::before { content:'› '; color:#2997FF; }
.term .step { color:#a9acb3; } .term .step::before { content:'● '; color:#2997FF; }
.term .ask { color:#FFB340; } .term .ask::before { content:'? '; }
.term .ok { color:#7CC0FF; } .term .ok::before { content:'✓ '; }
.term-actions { display:flex; align-items:center; gap:12px; padding:8px 16px 14px; font:12px var(--font); color:#74767d; min-height:52px; }
.term-actions button { padding:7px 16px; border:0; border-radius:999px; background:#FFB340; color:#1a1300; font:650 13px var(--font); cursor:pointer; }
.term-actions button[hidden] { display:none; }
.usage-budget { margin-top:14px; font-size:12px; color:#a9acb3; }
.usage-budget div { display:flex; justify-content:space-between; }
.usage-budget i { display:block; height:6px; margin-top:6px; border-radius:99px; background:#ffffff1a; overflow:hidden; }
.usage-budget b { display:block; height:100%; border-radius:99px; background:#2997FF; transition:width .4s ease; }
.demo-desktop[data-device="laptop"] { border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.mac-base { position:relative; height:16px; margin:0 -2.5%; border-radius:2px 2px 16px 16px; background:linear-gradient(#d6d8dc,#a2a5ab 55%,#74777c); box-shadow:0 18px 30px -14px #000a; }
.mac-base::before { content:''; position:absolute; left:50%; top:0; width:14%; height:6px; transform:translateX(-50%); border-radius:0 0 8px 8px; background:#7f8288; }
.demo-desktop[data-device="monitor"] + .mac-base { width:22%; height:52px; margin:0 auto; border-radius:0; background:linear-gradient(90deg,#8e9196,#d6d8dc 45%,#a4a7ac); box-shadow:none; }
.demo-desktop[data-device="monitor"] + .mac-base::before { top:auto; bottom:0; width:190%; height:8px; border-radius:6px 6px 2px 2px; background:linear-gradient(#d6d8dc,#8e9196); }
.demo-moments { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:28px; }
.demo-moments span { width:100%; text-align:center; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); }
.demo-moments button { padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; background:var(--bg-elev); color:var(--fg); font:600 14px var(--font); cursor:pointer; transition:border-color .15s, background .15s; }
.demo-moments button:hover { border-color:var(--accent); background:var(--accent-soft); }
.moment-note { margin-top:14px; min-height:1.6em; text-align:center; color:var(--fg-muted); font-size:15px; }
.why-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:48px; }
.why-grid article { padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); }
.why-num { font:600 12px var(--mono); color:var(--accent); letter-spacing:.08em; }
.why-grid h3 { margin-top:14px; font-size:19px; letter-spacing:-.01em; }
.why-grid p { margin-top:10px; color:var(--fg-muted); font-size:15px; line-height:1.55; }
.works-with { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:36px 0 0; padding:0; list-style:none; }
.works-with li { padding:6px 14px; border:1px solid var(--line); border-radius:999px; color:var(--fg-muted); font-size:13px; font-weight:600; }
.why-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
@media(max-width:1000px) { .why-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .why-grid { grid-template-columns:1fr; } .desk-window { top:74px; width:calc(100% - 16px); } .term { font-size:12px; } .term-actions span { display:none; } [data-live-label] { max-width:150px; } }
@media(prefers-reduced-motion:reduce) { .eq i, .term p, .live-island.is-bump .island-trigger, .live-island[data-tone="amber"] .live-value::before { animation:none; } }

/* ---- Comparison matrix: calm rows, MacStick row clearly marked ---- */
.comparison-scroll { margin-top:28px; border:1px solid var(--line); border-radius:18px; background:var(--bg-elev); box-shadow:var(--shadow); }
.research-table { min-width:1080px; font-size:14px; border-collapse:separate; border-spacing:0; }
.research-table caption { padding:16px 20px; font-size:13px; color:var(--fg-faint); caption-side:bottom; border-top:1px solid var(--line); }
.research-table thead { background:none; }
.research-table thead th { padding:14px 18px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); background:var(--bg-soft); border-bottom:1px solid var(--line-strong); }
.research-table tbody th,.research-table td { padding:18px; border-bottom:1px solid var(--line); color:var(--fg-muted); line-height:1.5; }
.research-table tbody tr:last-child th,.research-table tbody tr:last-child td { border-bottom:0; }
.research-table tbody th { position:sticky; left:0; z-index:1; min-width:170px; background:var(--bg-elev); color:var(--fg); font-size:15px; font-weight:650; }
.research-table thead th:first-child { position:sticky; left:0; z-index:2; }
.research-table tbody th a { color:var(--fg); text-decoration:none; } .research-table tbody th a:hover { color:var(--accent); }
.research-table th small,.research-table th small a { color:var(--fg-faint); font-weight:500; }
.research-table tbody tr:not(.own-product):hover td,.research-table tbody tr:not(.own-product):hover th { background:var(--bg-soft); }
.research-table td.na { color:var(--fg-faint); font-style:italic; }
.research-table .own-product { background:none; }
.research-table .own-product th,.research-table .own-product td { background:color-mix(in srgb,var(--accent) 11%,var(--bg-elev)); color:var(--fg); border-top:1px solid color-mix(in srgb,var(--accent) 45%,transparent); border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent); }
.research-table .own-product th { box-shadow:inset 3px 0 0 var(--accent); }
.research-table .own-product td strong { color:var(--accent); }
.own-name { font-size:17px; font-weight:700; }
.own-badge { margin-left:8px; padding:2px 8px; border-radius:999px; background:var(--accent-fill); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:2px; }
@media(max-width:560px) { .research-table tbody th { min-width:128px; } .research-table tbody th,.research-table td { padding:14px 12px; } }

/* ---- Pricing: two plans, one comparison ---- */
.pricing-hero { text-align:center; margin:56px auto 0; max-width:760px; }
.pricing-hero h1 { font-size:clamp(38px,6.4vw,68px); line-height:1.04; letter-spacing:-.04em; margin:14px 0 0; }
.pricing-hero h1 em { font-style:normal; color:var(--accent); }
.pricing-hero .commerce-lede { margin:22px auto 0; font-size:19px; line-height:1.5; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:880px; margin:52px auto 0; }
.plan-card { display:flex; flex-direction:column; padding:36px 32px 28px; border:1px solid var(--line); border-radius:28px; background:var(--bg-elev); }
.plan-pro { border:2px solid var(--accent); padding:35px 31px 27px; box-shadow:var(--shadow); }
.plan-name { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:650; }
.plan-tag { padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.plan-price { margin-top:18px; font-size:64px; font-weight:700; line-height:1; letter-spacing:-.045em; }
.plan-price small { font-size:18px; font-weight:500; letter-spacing:0; color:var(--fg-muted); }
.plan-sub { margin-top:10px; color:var(--fg-muted); font-size:15px; }
.plan-cta { margin-top:26px; } a.plan-cta, .plan-cta .btn { width:100%; justify-content:center; }
.plan-cta [role="status"] { margin-top:8px; min-height:0; } .plan-cta [role="status"]:empty { display:none; }
.plan-card .commerce-list { margin:26px 0 0; gap:12px; font-size:15px; flex:1; }
.plan-card .commerce-list li { display:flex; }
.plan-card > .commerce-fine { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.plan-compare, .plan-steps, .plan-faq { max-width:880px; margin:88px auto 0; }
.pricing-page h2 { font-size:clamp(26px,3.4vw,36px); letter-spacing:-.03em; text-align:center; }
.plan-table-wrap { margin-top:28px; overflow-x:auto; border:1px solid var(--line); border-radius:20px; background:var(--bg-elev); }
.plan-table { width:100%; border-collapse:collapse; font-size:15px; }
.plan-table th, .plan-table td { padding:16px 20px; border-bottom:1px solid var(--line); text-align:center; color:var(--fg-muted); }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom:0; }
.plan-table th[scope="row"] { text-align:left; font-weight:500; color:var(--fg); }
.plan-table thead th { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); }
.plan-table thead th:first-child { text-align:left; }
.plan-table .plan-col-pro { width:26%; background:var(--accent-soft); color:var(--fg); font-weight:600; }
.plan-table thead .plan-col-pro { color:var(--accent); }
.plan-table td:nth-child(2) { width:20%; }
.plan-yes { color:var(--accent); font-weight:700; } .plan-no { color:var(--fg-faint); }
.plan-steps ol { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 0; padding:0; list-style:none; }
.plan-steps li { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--bg-elev); }
.plan-steps li span { display:grid; place-items:center; width:30px; height:30px; margin-bottom:14px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px; }
.plan-steps p { margin-top:6px; color:var(--fg-muted); font-size:15px; }
.plan-faq details { border-bottom:1px solid var(--line); padding:18px 0; }
.plan-faq details:first-of-type { margin-top:20px; border-top:1px solid var(--line); }
.plan-faq summary { cursor:pointer; font-weight:600; font-size:17px; }
.plan-faq details p { margin-top:10px; color:var(--fg-muted); max-width:62em; }
.pricing-page .commerce-links { justify-content:center; margin-top:56px; }
@media(max-width:720px) { .plan-grid, .plan-steps ol { grid-template-columns:1fr; } .plan-pro { order:-1; } .plan-table th, .plan-table td { padding:13px 12px; font-size:14px; } .plan-compare, .plan-steps, .plan-faq { margin-top:64px; } }

/* ---- Demo scenes: calendar, files, music, overview ---- */
.scene[hidden] { display:none; }
.scene { min-height:240px; display:flex; flex-direction:column; }
.scene .term-actions { margin-top:auto; }
.scene h3 { font-size:17px; color:#fff; letter-spacing:-.01em; } .scene p { color:#9a9ca3; font-size:13px; margin-top:3px; }
.term-actions button { background:#2997FF; color:#fff; }
[data-win="agent"] .term-actions button { background:#FFB340; color:#1a1300; }
.cal-row { display:flex; gap:14px; align-items:center; padding:18px 16px 12px; }
.cal-date { width:52px; padding:6px 0; border-radius:12px; background:#fff; text-align:center; color:#1d1d1f; flex:none; }
.cal-date span { display:block; font-size:10px; font-weight:700; color:#e0483e; letter-spacing:.06em; } .cal-date strong { font-size:22px; line-height:1.1; }
.cal-list { margin:0; padding:0 16px; list-style:none; font-size:13px; color:#a9acb3; }
.cal-list li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #ffffff12; }
.cal-list i { width:4px; height:16px; border-radius:2px; background:#7CC0FF; } .cal-list li:last-child i { background:#b79cf5; }
.file-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 16px 8px; }
.file-grid button { display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 8px; border:1px solid #ffffff14; border-radius:12px; background:#ffffff08; color:#d7d9de; font:500 12px var(--font); cursor:pointer; transition:transform .25s ease, opacity .25s ease, border-color .15s; }
.file-grid button:hover { border-color:#2997FF; }
.file-grid i { display:grid; place-items:center; width:40px; height:50px; border-radius:6px; background:linear-gradient(#f4f5f7,#d5d8de); color:#3b3d44; font:700 10px var(--font); font-style:normal; }
.file-grid .is-dropped { transform:translateY(-10px) scale(.92); opacity:.45; border-color:#2997FF; border-style:dashed; }
.player { display:flex; gap:16px; align-items:center; padding:20px 16px 8px; }
.cover { width:84px; height:84px; flex:none; border-radius:14px; background:linear-gradient(135deg,#2997FF,#5b4bd6 60%,#1a1b3a); box-shadow:0 10px 24px #0007; }
.player > div:last-child { flex:1; min-width:0; }
.player-bar { height:4px; margin-top:14px; border-radius:9px; background:#ffffff1f; overflow:hidden; }
.player-bar b { display:block; height:100%; width:35%; border-radius:9px; background:#fff; animation:ms-track 14s linear infinite; }
.is-paused .player-bar b { animation-play-state:paused; }
@keyframes ms-track { from { width:4%; } to { width:100%; } }
[data-win="music"] .term-actions { justify-content:center; } [data-win="music"] .term-actions button { background:#ffffff1a; color:#fff; min-width:54px; }
.ov-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:20px 16px 8px; }
.ov-grid div { padding:14px 12px; border-radius:12px; background:#ffffff0a; border:1px solid #ffffff12; }
.ov-grid span { display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#74767d; }
.ov-grid strong { display:block; margin-top:8px; font-size:22px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
.ov-grid small { display:block; margin-top:4px; font-size:11px; color:#9a9ca3; }
.demo-moments button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
/* Studio Display: its own desktop colour and a slimmer, lighter bezel */
.demo-desktop[data-device="monitor"] { border-color:#3a3b40; background:linear-gradient(150deg,#3d2a7acc,#0c4a5acc 70%), #133353 url('assets/desktop-wallpaper.svg?v=f146801c53') center/cover; }
@media(max-width:560px) { .ov-grid { grid-template-columns:1fr 1fr; } .file-grid { gap:8px; } .file-grid button { padding:12px 4px; font-size:11px; } .cover { width:64px; height:64px; } .scene { min-height:250px; } }
@media(prefers-reduced-motion:reduce) { .player-bar b { animation:none; } }

/* ---- Who it is for ---- */
.persona-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:44px; }
.persona-grid article { padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); }
.persona-tag { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.04em; }
.persona-grid h3 { margin-top:16px; font-size:22px; letter-spacing:-.02em; }
.persona-grid ul { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; color:var(--fg-muted); font-size:15px; line-height:1.5; }
.persona-grid li { display:flex; gap:10px; } .persona-grid li::before { content:'✓'; color:var(--accent); font-weight:700; }
@media(max-width:760px) { .persona-grid { grid-template-columns:1fr; } }
.tb { display:inline-grid; place-items:center; width:15px; height:15px; margin-right:6px; border-radius:4px; color:#fff; font:700 9px/1 var(--font); font-style:normal; vertical-align:-2px; }
.tb-c { background:#D97757; } .tb-x { background:#10A37F; font-size:12px; }
.handheld-note { margin:14px auto 0; max-width:30em; padding:10px 14px; border:1px solid var(--line-strong); border-radius:14px; background:var(--accent-soft); color:var(--fg); font-size:14px; line-height:1.45; }

/* AI limits section */
.limits { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.limits h2 { margin-top:10px; }
.limits-lead { margin-top:16px; color:var(--fg-muted); font-size:18px; line-height:1.55; }
.limits-list { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:16px; }
.limits-list li { color:var(--fg-muted); font-size:16px; line-height:1.55; padding-left:18px; position:relative; }
.limits-list li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.limits-list strong { color:var(--fg); font-weight:600; }
.tier { display:inline-block; margin-left:4px; padding:1px 8px; border-radius:999px; font:600 11px var(--mono); letter-spacing:.04em; vertical-align:2px; white-space:nowrap; }
.tier-free { border:1px solid var(--line); color:var(--fg-muted); }
.tier-pro { background:var(--accent); color:#fff; }
.limits-note { margin-top:24px; color:var(--fg-muted); font-size:14px; line-height:1.55; }
.limits-mock { background:#0b0b0d; border-radius:26px; padding:20px; display:grid; gap:12px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); color:#f4f4f6; }
.lm-card { background:#17171a; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:14px 16px; }
.lm-title { display:flex; justify-content:space-between; align-items:baseline; font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#9a9aa3; margin:0 0 10px; }
.lm-title b { font:600 13px var(--font); letter-spacing:0; text-transform:none; color:#f4f4f6; }
.lm-row { display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; margin:6px 0 0; font-size:14px; font-weight:500; }
.lm-row em { font-style:normal; color:#9a9aa3; font-variant-numeric:tabular-nums; }
.lm-row b { min-width:64px; text-align:right; color:#5b9dff; font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }
.lm-bar { height:6px; border-radius:99px; background:#26262b; overflow:hidden; }
.lm-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#7fb2ff,#3b82f6); }
.lm-sub { margin:8px 0 0; font-size:12.5px; color:#9a9aa3; font-variant-numeric:tabular-nums; }
.lm-resets { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lm-resets .lm-title { margin:0; }
.lm-chips { display:flex; gap:14px; flex-wrap:wrap; margin:0; font-size:12.5px; color:#9a9aa3; }
.lm-chips > span { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.lm-chips b { color:#f4f4f6; font-weight:600; font-variant-numeric:tabular-nums; }
.lm-chips i { font-style:normal; color:#5b9dff; font-weight:600; }
.lm-caption { margin:0; text-align:center; font-size:12px; color:#6f6f78; }
.tb-g { background:#4a78ee; }
@media(max-width:900px) { .limits { grid-template-columns:1fr; gap:36px; } }

/* Secondary feature cards */
.also-head { margin-top:72px; }
.also-title { font-size:28px; letter-spacing:-.02em; margin-top:8px; }
.also-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:28px; }
.also-grid .picture-copy h3 { font-size:18px; }
.also-grid .picture-copy p { font-size:14.5px; }
@media(max-width:1000px) { .also-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .also-grid { grid-template-columns:1fr; } }

/* Hero screenshot */
.hero-shot { margin:44px auto 0; max-width:420px; }
.hero-shot img { width:100%; height:auto; border-radius:0 0 30px 30px; box-shadow:0 40px 80px -40px rgba(0,0,0,.55); }
.hero-shot figcaption { margin-top:14px; font-size:13px; line-height:1.5; color:var(--fg-muted); text-align:center; }

/* AI usage demo dashboard */
.dash { display:grid; gap:10px; padding:0 14px 6px; }
.dash .lm-card { transition:border-color .2s, box-shadow .2s; }
.dash .lm-card.is-focus { border-color:#2997ffaa; box-shadow:0 0 0 3px #2997ff26; }
.dash .lm-row b.is-hot { color:#FFB340; }
.dl-row { display:grid; grid-template-columns:auto 52px minmax(30px,1fr) 58px 96px; gap:8px; align-items:center; margin:7px 0 0; font-size:12.5px; font-weight:500; }
.dl-row .tb { margin-right:0; }
.dl-row em { font-style:normal; text-align:right; color:#5b9dff; font-weight:600; font-variant-numeric:tabular-nums; }
.dl-row small { text-align:right; color:#9a9aa3; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dl-row .lm-bar { display:block; height:5px; }
.dl-row .lm-bar i { transition:width .4s ease; }
.dl-row.is-hot em { color:#FFB340; }
.dl-row.is-hot .lm-bar i { background:#FFB340; }
.dl-row.is-estimate em { color:#9a9aa3; font-weight:500; }
#demo-expanded .demo-feedback { min-height:0; margin:8px 20px 4px; color:#8e8e93; }
#demo-expanded { max-height:none; }
@media(max-width:560px) { .dl-row { grid-template-columns:auto 46px minmax(20px,1fr) 52px; } .dl-row small { display:none; } }
@media(prefers-reduced-motion:reduce) { .dl-row .lm-bar i, .dash .lm-card { transition:none; } }

/* Demo: usage rows with a "% left" bar, agents card */
.du-row { display:grid; grid-template-columns:auto minmax(96px,1.1fr) minmax(30px,1fr) 58px 40px 48px; gap:8px; align-items:center; margin:7px 0 0; font-size:13px; font-weight:500; }
.du-row .tb, .da-row .tb { margin-right:0; }
.du-row .lm-bar { display:block; height:4px; }
.du-row .lm-bar i { transition:width .4s ease; }
.du-row small { text-align:right; color:#9a9aa3; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.du-row em { font-style:normal; text-align:right; color:#9a9aa3; font-variant-numeric:tabular-nums; }
.du-row b { text-align:right; color:#5b9dff; font-weight:600; font-variant-numeric:tabular-nums; }
.du-row.is-hot small { color:#FFB340; font-weight:600; } .du-row.is-hot .lm-bar i { background:#FFB340; }
.dl-row { grid-template-columns:auto 52px minmax(30px,1fr) 62px 96px; }
.da-row { display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; margin:7px 0 0; font-size:13px; font-weight:500; min-height:26px; }
.da-row em { font-style:normal; color:#5b9dff; font-weight:600; font-size:12.5px; }
.da-row em.is-hot { color:#FFB340; }
.da-row button { padding:4px 12px; border:0; border-radius:999px; background:#FFB340; color:#1a1300; font:650 12px var(--font); cursor:pointer; }
.da-row button[hidden] { display:none; }
.hardware-demo-detail .live-island.is-expanded, .live-island.is-expanded { width:min(100%,500px); }
.demo-desktop { min-height:720px; }
@media(max-width:560px) { .du-row { grid-template-columns:auto minmax(80px,1fr) 54px 36px 44px; } .du-row .lm-bar { display:none; } .demo-desktop { min-height:700px; } }

/* Explicit language choice; never redirect visitors based on their location. */
.language-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; padding:24px; font-size:14px; }
.language-links a[aria-current="page"] { font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.directory-listings{display:flex;align-items:flex-start;justify-content:center;gap:48px;flex-wrap:wrap;padding:40px 0;text-align:center;border-top:1px solid #8883}.directory-group{display:grid;justify-items:center;gap:16px}.directory-group h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0}.directory-card{display:grid;gap:8px;min-width:260px;padding:22px 28px;border:1px solid #8885;border-radius:16px;background:linear-gradient(135deg,#8881,#8882);text-decoration:none;transition:border-color .2s,transform .2s}.directory-card:hover{border-color:#2997ff;transform:translateY(-2px)}.directory-card strong{font-size:26px;letter-spacing:-.03em}.directory-card>span{font-size:12px;opacity:.75}.directory-card .directory-eyebrow{font-size:11px;letter-spacing:.06em;text-transform:uppercase}.directory-listings img{display:block;max-width:100%;height:auto}.directory-listings .footer-note{margin:0;font-size:12px;line-height:1.8}.directory-pending{opacity:.72}@media(max-width:560px){.directory-listings{gap:32px}.directory-card{min-width:0;width:100%;box-sizing:border-box}}

/* Site footer (shared by every page, see scripts/site-footer.mjs) */
.ft { padding:64px 0 28px; }
.ft-top { display:grid; grid-template-columns:minmax(220px,1.1fr) 3fr; gap:56px; }
.ft-brand .brand { font-size:19px; }
.ft-brand p { margin-top:14px; max-width:260px; color:var(--fg-muted); font-size:15px; line-height:1.5; }
.ft-cta { display:inline-block; margin-top:20px; padding:10px 18px; border-radius:999px; background:var(--accent); color:#fff; font-weight:600; font-size:14px; }
.ft-cta:hover { filter:brightness(1.08); text-decoration:none; }
.ft-ver { display:block; margin-top:12px; font-size:12.5px; color:var(--fg-faint); }
.ft-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.ft-cols h3 { font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:16px; }
.ft-cols ul { list-style:none; margin:0; padding:0; }
.ft-cols li { margin:11px 0; }
.ft-cols a { color:var(--fg); font-size:14.5px; }
.ft-cols a:hover { color:var(--accent); text-decoration:none; }
.ft-listed { display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 48px; margin-top:48px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; }
.ft-label { color:var(--fg-muted); font-weight:600; letter-spacing:.07em; text-transform:uppercase; font-size:11.5px; }
.ft-directory-group { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ft-directory-logos { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.ft-directory-logo { display:flex; align-items:center; justify-content:center; width:200px; height:80px; padding:10px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-elev); transition:border-color .15s,background .15s; }
.ft-directory-logo img { display:block; width:180px; height:58px; object-fit:contain; }
.ft-directory-logo:hover,.ft-badge:hover { border-color:var(--accent); text-decoration:none; }
.ft-directory-logo:focus-visible,.ft-badge:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ft-chip { padding:6px 12px; border:1px solid var(--accent); border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:600; }
.ft-wait { border:1px dashed var(--line-strong); background:transparent; color:var(--fg-muted); font-weight:500; }
.ft-directory-pending .ft-directory-logos { min-height:80px; }
.ft-badge { display:block; padding:9px 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--bg-elev); }
.ft-badge img { display:block; height:34px; width:116px; object-fit:contain; }
/* Preserve the full-colour brand marks; switch only the supplied dark text/white text artwork. */
.ft-listed .on-light { display:none; }
[data-theme="light"] .ft-listed .on-light { display:block; }
[data-theme="light"] .ft-listed .on-dark { display:none; }
@media (prefers-color-scheme: light) {
 :root:not([data-theme="dark"]) .ft-listed .on-light { display:block; }
 :root:not([data-theme="dark"]) .ft-listed .on-dark { display:none; }
}
@media (max-width:480px) {
 .ft-directory-logo { width:calc((100vw - 60px) / 2); max-width:200px; height:72px; padding:8px; }
 .ft-directory-logo img { width:100%; height:52px; }
}
.ft-pending { color:var(--fg-muted); }
.ft-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding-top:22px; font-size:13px; color:var(--fg-faint); }
.ft-lang { display:flex; align-items:center; gap:4px; }
.ft-lang svg { margin-right:6px; }
.ft-lang a { padding:5px 10px; border-radius:999px; color:var(--fg-muted); }
.ft-lang a:hover { color:var(--fg); text-decoration:none; }
.ft-lang a[aria-current="page"] { background:var(--bg-elev); border:1px solid var(--line-strong); color:var(--fg); font-weight:600; }
.ft-legal { flex:1 1 320px; margin:0; }
.ft-topl { color:var(--fg-muted); }
@media(max-width:900px) { .ft-top { grid-template-columns:1fr; gap:36px; } }
@media(max-width:560px) { .ft-cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; } .ft-sep { display:none; } .ft { padding-top:44px; } }

.ft-social { display:flex; align-items:center; gap:8px; margin-top:18px; }
.ft-social a { padding:5px 12px; border:1px solid var(--line-strong); border-radius:999px; color:var(--fg); font-size:13px; font-weight:600; }
.ft-social a:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }

/* Completed submissions remain visible without implying editorial publication. */
.ft-directory-scheduled,.ft-directory-pending { flex-basis:100%; }
.ft-scheduled-card { display:flex; flex-direction:column; gap:6px; min-width:180px; padding:14px 18px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-elev); color:var(--fg); }
.ft-scheduled-card strong { font-size:15px; font-weight:600; }
.ft-scheduled-card time { font-size:12px; color:var(--fg-muted); }
.ft-scheduled-card:hover { border-color:var(--accent); text-decoration:none; }
.ft-scheduled-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ft-directory-pending .ft-directory-logos { min-height:0; }

/* A slow, seamless directory strip. The second set is decorative and inert. */
.ft-marquee { display:block; position:relative; padding-top:18px; }
.ft-motion-control { display:inline-flex; align-items:center; gap:7px; margin:0 0 16px 6px; color:var(--fg-muted); font-size:12px; cursor:pointer; }
.ft-marquee-toggle { accent-color:var(--accent); cursor:pointer; }
.ft-marquee-window { overflow:hidden; padding:6px 0; mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent); }
.ft-marquee-track { display:flex; width:max-content; animation:footer-drift 95s linear infinite; }
.ft-marquee-set { display:flex; flex:none; gap:40px; align-items:flex-start; padding-right:40px; }
.ft-marquee .ft-directory-group { flex:none; }
.ft-marquee .ft-directory-logos { flex-wrap:nowrap; min-height:80px; }
.ft-marquee .ft-directory-logo { width:200px; height:80px; }
.ft-marquee .ft-directory-logo img { width:180px; height:58px; }
.ft-marquee:hover .ft-marquee-track { animation-play-state:paused; }
.ft-marquee:focus-within .ft-marquee-track,
.ft-marquee-toggle:checked ~ .ft-marquee-window .ft-marquee-track { animation:none; transform:none; }
.ft-marquee:focus-within .ft-marquee-window,
.ft-marquee-toggle:checked ~ .ft-marquee-window { overflow-x:auto; mask-image:none; }
.ft-marquee:focus-within .ft-marquee-copy,
.ft-marquee-toggle:checked ~ .ft-marquee-window .ft-marquee-copy { display:none; }
@keyframes footer-drift { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
 .ft-marquee-track { animation:none; width:auto; }
 .ft-marquee-set { flex-wrap:wrap; padding-right:0; gap:24px; max-width:100%; }
 .ft-marquee .ft-directory-logos { flex-wrap:wrap; }
 .ft-marquee .ft-directory-group { max-width:100%; }
 .ft-marquee-copy,.ft-marquee-toggle,.ft-motion-control { display:none; }
 .ft-marquee-window { overflow:visible; mask-image:none; }
}

/* Directory strip: every item is the same 200 × 80 card, and it always scrolls (pauses on hover or keyboard focus). */
.ft-marquee { padding-top:24px; }
.ft-marquee .ft-directory-logos { align-items:stretch; }
.ft-marquee .ft-directory-logo, .ft-marquee .ft-scheduled-card, .ft-marquee .ft-badge, .ft-marquee .ft-name-card { box-sizing:border-box; flex:none; display:flex; align-items:center; justify-content:center; width:200px; height:80px; min-width:0; padding:10px 14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-elev); }
.ft-marquee .ft-badge img { width:150px; height:44px; object-fit:contain; }
.ft-marquee .ft-scheduled-card { flex-direction:column; align-items:flex-start; gap:4px; padding-left:18px; }
.ft-name-card { gap:10px; color:var(--fg); }
.ft-name-card strong { font-size:15px; font-weight:600; white-space:nowrap; }
.ft-name-card:hover { border-color:var(--accent); text-decoration:none; }
.ft-name-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ft-marquee .ft-badge img { width:160px; height:48px; }   /* official badges, shown unmodified */

/* Pro button in the hero: the page's own surface with a blue-to-violet-to-amber edge, so it reads as premium without shouting. */
.btn-pro { position:relative; color:var(--fg); border:1.5px solid transparent; background:linear-gradient(var(--bg),var(--bg)) padding-box, linear-gradient(115deg,#2997FF 0%,#8B5CF6 55%,#F5A524 100%) border-box; transition:box-shadow .2s, transform .2s; }
.btn-pro svg { color:#8B5CF6; }
.btn-pro:hover { box-shadow:0 10px 30px rgba(139,92,246,.28); transform:translateY(-1px); text-decoration:none; }
.btn-pro-tag { margin-left:2px; padding:3px 9px; border-radius:999px; background:linear-gradient(115deg,rgba(41,151,255,.16),rgba(139,92,246,.18)); font-size:12px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { .btn-pro { transition:none; } .btn-pro:hover { transform:none; } }

/* Payment confirmed: details and the three-step activation guide */
.paid-card { position:relative; }
.paid-check { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:rgba(52,199,89,.16); color:#34C759; margin-bottom:6px; }
.paid-check svg { width:30px; height:30px; }
.paid-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:8px 0 28px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line); }
.paid-details div { padding:16px 18px; background:var(--bg); }
.paid-details dt { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint); }
.paid-details dd { margin:6px 0 0; font-size:15px; font-weight:600; color:var(--fg); overflow-wrap:anywhere; }
.paid-ref { font-family:var(--mono); font-size:13px !important; font-weight:500 !important; }
.paid-actions { display:flex; flex-wrap:wrap; gap:12px; }
.activate { margin-top:44px; }
.activate h2 { font-size:clamp(24px,3.4vw,34px); letter-spacing:-.03em; }
.activate-steps { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.activate-steps li { border:1px solid var(--line-strong); border-radius:20px; background:var(--bg-elev); overflow:hidden; display:flex; flex-direction:column; }
.activate-steps img { display:block; width:100%; height:190px; object-fit:cover; object-position:top center; background:#0b0b0d; border-bottom:1px solid var(--line); }
.activate-steps li:nth-child(2) img { object-fit:contain; object-position:center; }
.activate-steps li:nth-child(3) img { object-fit:contain; object-position:center; background:#efecef; }
.activate-steps p { margin:16px 18px 0; display:flex; align-items:center; gap:10px; font-size:17px; color:var(--fg); }
.activate-steps .activate-text { margin:6px 18px 18px; font-size:14.5px; line-height:1.45; color:var(--fg-muted); display:block; }
.activate-num { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; font-weight:700; }
.link-button { border:0; background:none; padding:0; color:var(--accent); font:inherit; cursor:pointer; }
.link-button:hover { text-decoration:underline; }
@media(max-width:860px) { .activate-steps { grid-template-columns:1fr; } .activate-steps img { height:auto; max-height:240px; } .paid-details { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .paid-details { grid-template-columns:1fr; } }

/* Guide extras: install note, help lists, connect steps */
.guide-first { margin:0 0 26px; padding:14px 18px; border:1px solid var(--line-strong); border-radius:14px; background:var(--bg-elev); font-size:15.5px; line-height:1.5; color:var(--fg); }
.guide-help { margin-top:18px; border:1px solid var(--line-strong); border-radius:14px; background:var(--bg-elev); padding:0 18px; }
.guide-help summary { cursor:pointer; padding:14px 0; font-weight:600; font-size:15.5px; color:var(--fg); }
.guide-help ul { margin:0 0 16px; padding-left:20px; display:grid; gap:8px; font-size:14.5px; line-height:1.5; color:var(--fg-muted); }
.guide-help strong { color:var(--fg); }
.activate-steps.connect-steps li:nth-child(1) img { object-fit:contain; object-position:center; }
.activate-steps.connect-steps li:nth-child(2) img { object-fit:contain; object-position:center; background:#efecef; }
.activate-steps.connect-steps li:nth-child(3) img { object-fit:cover; background:#0b0b0d; }