:root {
  color-scheme: dark;
  --bg: #050d18;
  --surface: #0a1a2b;
  --text: #e8f0f7;
  --muted: #8aa0b4;
  --accent-a: #2fd4c8;
  --accent-b: #3b8cff;
  --warn: #ff8a3d;
  --border: rgba(255,255,255,.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 104px;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(circle at 5% 0%, rgba(47,212,200,.14), transparent 34%), radial-gradient(circle at 95% 60%, rgba(59,140,255,.12), transparent 36%), url("assets/noise.svg");
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.topbar { position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 24px 40px; }
.wordmark, .text-link { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; font-weight: 700; }
.wordmark img { border-radius: 7px; }
.text-link { font-size: 14px; color: var(--text); }
.text-link span, .button span { color: var(--accent-a); }
:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 4px; }
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: var(--surface); }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,13,24,.94) 0%, rgba(5,13,24,.62) 42%, rgba(5,13,24,.1) 78%), linear-gradient(0deg, rgba(5,13,24,.95) 0%, transparent 58%); }
.hero-content { width: min(640px, calc(100% - 48px)); margin: 0 0 104px 7vw; }
.brand { margin: 0 0 12px; font-family: var(--display); font-size: clamp(88px, 13vw, 168px); font-weight: 800; letter-spacing: -.075em; line-height: .8; background: linear-gradient(110deg, var(--accent-a), var(--accent-b)); background-clip: text; -webkit-background-clip: text; color: transparent; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.045em; line-height: .98; }
h1 { max-width: 600px; font-size: clamp(40px, 5vw, 72px); }
h2 { max-width: 780px; font-size: clamp(40px, 5vw, 68px); }
.hero-copy { max-width: 590px; margin: 24px 0 0; color: var(--text); font-size: clamp(17px, 1.7vw, 21px); }
.hero-actions { margin-top: 32px; }
.hero-actions p { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.button { --sheen: rgba(255,255,255,.5); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; text-decoration: none; transition: transform .2s ease, box-shadow .3s ease, background-position .5s ease; }
.button svg { flex: none; width: 18px; height: 18px; transition: transform .25s ease; }
/* A band of light sweeps across on hover and keyboard focus, under the label. */
.button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 32%, var(--sheen) 50%, transparent 68%); transform: translateX(-120%); transition: transform .65s ease; pointer-events: none; }
.button:hover::after, .button:focus-visible::after { transform: translateX(120%); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
.button-primary { background: linear-gradient(105deg, var(--accent-a), var(--accent-b) 55%, var(--accent-a)) 0 0 / 200% 100%; color: #03111b; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px -12px rgba(47,212,200,.7); }
.button-primary:hover { background-position: 100% 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 16px 38px -12px rgba(59,140,255,.8); }
.button-primary:hover svg { transform: translateY(2px); }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.button-secondary { --sheen: rgba(47,212,200,.2); background: linear-gradient(#071423, #071423) padding-box, conic-gradient(from var(--spin), rgba(47,212,200,.3), var(--accent-a), var(--accent-b), rgba(59,140,255,.3), rgba(47,212,200,.3)) border-box; color: var(--text); }
.button-secondary:hover { background: linear-gradient(rgba(47,212,200,.08), rgba(47,212,200,.08)) padding-box, linear-gradient(#071423, #071423) padding-box, conic-gradient(from var(--spin), rgba(47,212,200,.3), var(--accent-a), var(--accent-b), rgba(59,140,255,.3), rgba(47,212,200,.3)) border-box; box-shadow: 0 12px 32px -14px rgba(47,212,200,.65); animation: spin-border 2.4s linear infinite; }
@keyframes spin-border { to { --spin: 360deg; } }
.button-small { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.action-row .text-link { padding-bottom: 2px; background: linear-gradient(var(--accent-a), var(--accent-a)) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; }
.action-row .text-link:hover, .action-row .text-link:focus-visible { background-size: 100% 1px; }
/* Canvas UI Flame Wrap (assets/buttons.js) around the Download buttons. The canvas reaches
   FLARE.height x 1.5 + 40 = 136px above the button and spread x 3 + 16 = 40px around it. */
.flame { position: relative; isolation: isolate; display: inline-flex; }
/* Canvas UI effects behind a section's text (assets/ambient.js); the mask fades out the edges. */
[data-fx] { position: relative; isolation: isolate; }
.fx-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 35%, transparent 100%); }
.flame-output { position: absolute; z-index: -1; top: -136px; right: -40px; bottom: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 176px); pointer-events: none; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.small-line { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.launch-note { max-width: 650px; margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.thanks-main { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - 64px); padding: 112px 24px 64px; }
.thanks-content { width: min(100%, 560px); text-align: center; }
.thanks-content [hidden] { display: none !important; }
.thanks-content p { text-wrap: balance; }
.thanks-content a:not(.button) { color: var(--text); text-decoration-color: rgba(47,212,200,.6); text-underline-offset: 3px; }
.thanks-badge { position: relative; width: 76px; height: 76px; margin: 0 auto 24px; animation: hero-up .7s ease both; }
.thanks-badge img { display: block; width: 76px; height: 76px; filter: drop-shadow(0 18px 36px rgba(47,212,200,.35)); }
.thanks-check { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: #03111b; box-shadow: 0 0 0 4px var(--bg); animation: check-pop .5s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.thanks-check svg { width: 16px; height: 16px; }
@keyframes check-pop { from { transform: scale(0); } to { transform: scale(1); } }
.thanks-eyebrow { margin: 0 0 12px; color: var(--accent-a); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.thanks-content h1 { max-width: none; font-size: clamp(36px, 5vw, 52px); }
.thanks-lead { max-width: 420px; margin: 16px auto 32px; color: var(--muted); font-size: 17px; }
.key-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), var(--surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -32px rgba(0,0,0,.7); text-align: left; transition: border-color .5s ease, box-shadow .5s ease; }
.key-card[data-state="ready"] { border-color: rgba(47,212,200,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px rgba(47,212,200,.06), 0 30px 60px -32px rgba(47,212,200,.4); }
.key-label { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.key-row { display: flex; align-items: center; gap: 10px; }
.key-value { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius-md); background: rgba(0,0,0,.32); color: var(--text); font: 500 clamp(13px, 3.6vw, 15px) / 1.45 "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; user-select: all; animation: hero-up .5s ease both; }
.key-value:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; }
.key-copy { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255,255,255,.04); color: var(--text); font: 500 14px var(--body); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.key-copy:hover { background: rgba(255,255,255,.08); }
.key-copy:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; }
.key-copy[data-copied] { border-color: rgba(47,212,200,.5); color: var(--accent-a); }
.key-copy svg { width: 16px; height: 16px; }
.key-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.key-skeleton { height: 48px; border-radius: var(--radius-md); background: linear-gradient(100deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.035) 70%) 0 0 / 300% 100%; animation: key-shimmer 1.4s linear infinite; }
@keyframes key-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.key-fallback { margin: 0 0 16px; font-size: 16px; }
.key-fallback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.link-button { padding: 0; border: 0; background: none; color: var(--text); font: 500 14px var(--body); text-decoration: underline; text-decoration-color: rgba(47,212,200,.6); text-underline-offset: 3px; cursor: pointer; }
.thanks-actions { justify-content: center; margin-top: 28px; }
.thanks-hint { margin: 16px 0 0; color: var(--warn); font-size: 14px; }
.thanks-manual, .thanks-foot { color: var(--muted); font-size: 14px; }
.thanks-manual { margin: 36px 0 0; }
.thanks-foot { margin: 6px 0 0; }
.thanks-footer { text-align: center; }
.section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: var(--space-7) 0; }
.section-heading { max-width: 780px; margin-bottom: var(--space-6); }
.section-heading > p:last-child { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 18px; }
.product-shot { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,.28); background: var(--surface); }
.media-pair { display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: var(--space-5); }
.shot-panel { width: 100%; }
.cleanup-list { margin-top: var(--space-5); }
.plain-list { display: grid; padding: 0; list-style: none; }
.cleanup-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--border); }
.cleanup-list li { padding: 18px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
/* The first forecast alert, styled like a macOS notification over the overview screenshot. */
.shot-with-notice { position: relative; }
.notice { position: absolute; top: -28px; right: -20px; z-index: 1; display: flex; gap: 12px; width: min(380px, 80%); padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(30,38,52,.8); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 18px 50px rgba(0,0,0,.45); font-size: 13px; line-height: 1.4; }
.notice img { flex: none; width: 38px; height: 38px; border-radius: 9px; }
.notice p { margin: 0; }
.notice-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.notice-head strong { color: var(--text); font-weight: 500; }
.notice-title { margin-top: 1px; font-weight: 600; }
.notice-body { margin-top: 2px; color: #c9d4de; }
.js .reveal .notice { opacity: 0; transform: translateX(24px); }
.js .reveal.is-visible .notice { opacity: 1; transform: none; transition: opacity .6s ease .5s, transform .6s cubic-bezier(.2,.8,.2,1) .5s; }
/* Interactive demo (assets/demo.js): real screenshots, with the app's own buttons as targets. */
.demo { margin: 0; }
.demo-stage { position: relative; aspect-ratio: 16 / 10; }
.demo-shot { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 26px 50px rgba(0,0,0,.5)); transition: opacity .25s ease; }
.demo-shot.is-entering { opacity: 0; }
.demo-ripple { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.demo-hotspots { position: absolute; inset: 0; z-index: 2; }
.demo-hot { position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease; }
.demo-hot:hover, .demo-hot:focus-visible, .demo.is-revealing .demo-hot { background: rgba(47,212,200,.12); box-shadow: inset 0 0 0 1.5px rgba(47,212,200,.85), 0 0 18px rgba(47,212,200,.3); outline: none; }
.demo-hot.is-hinting::after { content: ""; position: absolute; inset: -4px; border-radius: 9px; box-shadow: 0 0 0 2px var(--accent-a); animation: demo-pulse 1.6s ease-out infinite; pointer-events: none; }
@keyframes demo-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.15); } }
.demo-caption { min-height: 1.5em; margin-top: 22px; color: var(--muted); font-size: 15px; }
.demo-actions { display: none; }
.demo-chip { min-height: 36px; padding: 6px 14px; border: 1px solid rgba(47,212,200,.4); border-radius: 999px; background: #071423; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.trust-list { max-width: 900px; margin: 0; gap: 0; border-top: 1px solid var(--border); }
.trust-list li { padding: 22px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.trust-list strong { margin-right: 6px; color: var(--text); font-family: var(--display); font-weight: 700; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); }
.faq-group h3 { margin: 0 0 8px; color: var(--accent-a); font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; transition: color .2s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 6px 4px 0 0; border-right: 1.5px solid var(--accent-a); border-bottom: 1.5px solid var(--accent-a); transform: rotate(45deg); transition: transform .25s ease; }
.faq-item[open] summary::after { transform: translateY(4px) rotate(225deg); }
.faq-item summary:hover { color: var(--accent-a); }
.faq-item summary:focus-visible { outline-offset: 2px; }
.faq-answer { padding: 0 0 22px; color: var(--muted); }
.faq-answer p, .faq-answer ul { margin: 0 0 12px; }
.faq-answer ul { padding-left: 20px; }
.faq-answer li { margin: 6px 0; }
.faq-answer strong, .faq-answer code { color: var(--text); font-weight: 500; }
.faq-answer code { font-size: .92em; }
.faq-answer > :last-child { margin-bottom: 0; }
.final-cta { padding-bottom: 80px; }
.footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 40px; color: var(--muted); font-size: 13px; }
/* Content stays visible unless script.js runs and marks the page with .js. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }
.reveal-hero { animation: hero-up .7s ease both; }
.js .product-shot { transform: scale(.97); }
.js .product-shot.is-visible { transform: scale(1); transition: transform .8s ease; }
@keyframes hero-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .topbar { padding: 16px; }
  .hero-content { width: calc(100% - 32px); margin: 0 16px 48px; }
  .brand { margin-bottom: 18px; font-size: clamp(88px, 27vw, 132px); }
  h1 { font-size: clamp(38px, 11vw, 56px); }
  .hero-copy { margin-top: 18px; font-size: 16px; }
  .section { width: calc(100% - 32px); padding: 72px 0; }
  .section-heading { margin-bottom: 40px; }
  .section-heading > p:last-child { font-size: 16px; }
  .media-pair { grid-template-columns: 1fr; gap: 16px; }
  .shot-panel { width: min(100%, 360px); margin: 0 auto; }
  .cleanup-list { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .notice { position: static; width: 100%; margin: 0 0 16px; }
  /* The app's buttons get too small to tap on a phone; the same actions appear as chips below. */
  .demo.is-live .demo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .faq-item summary { font-size: 17px; }
  .thanks-main { padding: 96px 16px 48px; }
  .key-card { padding: 16px; }
  .footer { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .hero { background: center / cover no-repeat url("assets/promo-poster.jpg"), var(--surface); }
  .reveal, .reveal.is-visible, .reveal-hero, .product-shot, .product-shot.is-visible { opacity: 1; transform: none; animation: none; transition: none; }
  .button, .button::after, .button svg, .action-row .text-link { transition: none; }
  .button:hover, .button:active, .button-primary:hover svg { transform: none; }
  .button:hover::after, .button:focus-visible::after { transform: translateX(-120%); }
  .button-secondary:hover { animation: none; }
  .faq-item summary, .faq-item summary::after { transition: none; }
  .demo-shot, .demo-hot { transition: none; }
  .js .reveal .notice, .js .reveal.is-visible .notice { opacity: 1; transform: none; transition: none; }
  .demo-hot.is-hinting::after { animation: none; opacity: 1; }
  .thanks-badge, .thanks-check, .key-value, .key-skeleton { animation: none; }
}