:root { color-scheme: dark; --bg:#101114; --surface:#191a1e; --ink:#f4f1eb; --muted:#a9a9b1; --line:#303136; --accent:#ff8176; font-size:clamp(1rem, .7rem + .35vw, 1.5rem); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible { outline:0.125rem solid var(--accent); outline-offset:0.3125rem; }
a:hover { color:var(--accent); }
img { max-width:100%; }
p { line-height:1.65; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { text-wrap:balance; }
h2 { font-size:clamp(1.875rem,3.3vw,2.75rem); line-height:1.13; letter-spacing:-0.09375rem; font-weight:600; }
h3 { font-size:1.1875rem; line-height:1.35; font-weight:600; letter-spacing:-0.021875rem; }
.wrap { width:92%; margin-inline:auto; }
.skip-link { position:fixed; top:0.5rem; left:0.5rem; z-index:100; padding:0.75rem; background:var(--ink); color:var(--bg); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.header { min-height:5.75rem; padding-block:1.25rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; border-bottom:0.0625rem solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:0.625rem; font-weight:650; font-size:1.3125rem; letter-spacing:-0.04375rem; }
.brand img { flex:none; }
.header nav { display:flex; gap:1.875rem; font-size:0.875rem; color:#c7c7cd; }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,5vw,6rem); padding-block:4.5rem 4.75rem; }
.eyebrow { display:flex; align-items:center; gap:0.625rem; font-size:0.625rem; line-height:1.5; letter-spacing:0.10625rem; font-weight:650; color:var(--muted); }
.tiny-dot { display:inline-block; width:0.375rem; height:0.375rem; border-radius:50%; background:var(--accent); flex:none; }
h1 { font-size:clamp(3.625rem,5vw,6rem); line-height:1.02; font-weight:600; letter-spacing:-0.28125rem; margin-top:1.75rem; }
h1 em { font-style:normal; color:var(--accent); }
.hero-copy { max-width:44ch; color:#c4c4ca; font-size:1.125rem; line-height:1.7; margin-top:1.75rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:1.375rem; border:0.0625rem solid var(--line); padding:0.9375rem 1.25rem; border-radius:0.4375rem; font-size:0.875rem; font-weight:600; }
.button.primary { color:#251411; background:var(--accent); border-color:var(--accent); }
a.button.primary:hover { background:#ffa398; border-color:#ffa398; }
.coming-soon { color:var(--muted); font-size:0.8125rem; white-space:nowrap; }
.hero-note { color:#82848d; font-size:0.75rem; margin-top:1.25rem; }
.hero-product { min-width:0; }
.product-stage { position:relative; padding:0 1.75rem 1.5625rem; border:0.0625rem solid #34343c; border-radius:1rem; overflow:hidden; background:radial-gradient(ellipse at 60% 40%,#49424b 0%,#26262e 60%,#212229 100%); box-shadow:0 1.5rem 3.75rem #0003; }
.menu-context { display:flex; align-items:center; justify-content:flex-end; gap:0.9375rem; width:16.875rem; max-width:100%; margin-inline:auto; padding:0.625rem 0; color:#c0bdc6; font-size:0.6875rem; }
.menu-icon { width:2.125rem; height:1.875rem; border-radius:0.375rem; display:grid; place-items:center; background:#ffffff12; }
.menu-icon img { object-fit:contain; filter:invert(1); }
.capture-wrap { width:16.875rem; max-width:100%; margin:0 auto; filter:drop-shadow(0 0.75rem 1.125rem #0005); }
/* Clip inside the old JPEG's pale edge pixels, at its native corner radius.
   Keep the capture small; never stretch the source beyond its own resolution. */
.app-capture { display:block; width:100%; height:auto; clip-path:inset(0.0625rem round 0.9375rem); }
.product-caption { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-top:1.125rem; color:#d1cbd2; font-size:0.6875rem; }
.hero-product figcaption { margin-top:0.75rem; text-align:center; font-size:0.6875rem; color:#82848d; }
.section { padding-block:5rem; border-top:0.0625rem solid var(--line); }
.section-heading { display:grid; grid-template-columns:1fr 1fr; column-gap:5rem; }
.section-heading .eyebrow { grid-column:1 / -1; margin-bottom:1.375rem; }
.section-heading > p:last-child { max-width:48ch; font-size:1.0625rem; color:var(--muted); align-self:center; }
.steps { margin:3rem 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:2.125rem; }
.steps li { border-top:0.0625rem solid #48484f; padding-top:1.375rem; }
.step-number { color:var(--accent); font-size:0.75rem; font-variant-numeric:tabular-nums; }
.steps h3 { margin-top:1.5625rem; }
.steps p,.benefit-grid p { max-width:48ch; color:var(--muted); font-size:0.9375rem; margin-top:0.75rem; }
.benefits { padding:3.5rem; border:0.0625rem solid var(--line); border-radius:0.875rem; background:#191a1e; margin-bottom:5rem; }
.benefits-intro .eyebrow { margin-bottom:1.375rem; }
.benefits h2 { max-width:45rem; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.125rem; margin-top:2.625rem; }
.benefit-mark { display:block; color:var(--accent); font-size:1.5rem; margin-bottom:1.375rem; }
.purchase-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(2rem,5vw,6rem); }
.purchase-intro h2 { margin:1.375rem 0 1.25rem; }
.purchase-intro > p:last-child { color:var(--muted); font-size:1rem; }
.purchase-card { min-width:0; }
.purchase-card-top { display:flex; align-items:center; justify-content:space-between; border-bottom:0.0625rem solid var(--line); padding-bottom:1.25rem; }
.purchase-card-top .brand { font-size:1.0625rem; }
.release-label { color:var(--accent); font-size:0.6875rem; letter-spacing:0.0625rem; }
.tiers { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.tier { padding-top:1.5rem; }
.tier-name { font-size:1.0625rem; }
.price { display:flex; align-items:baseline; gap:0.375rem; margin:0.75rem 0 1rem; }
.price-amount { font-size:3rem; line-height:1; font-weight:600; letter-spacing:-0.125rem; }
.price-unit { color:var(--muted); font-size:0.8125rem; }
.purchase-detail { max-width:48ch; color:var(--muted); font-size:0.8125rem; line-height:1.6; }
.includes { padding:0; margin:1.5rem 0 0; list-style:none; }
.includes li { position:relative; padding-left:1.0625rem; color:#cbcad0; font-size:0.8125rem; line-height:1.6; margin-top:0.75rem; }
.includes li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-size:0.6875rem; }
.platform-picker { display:flex; gap:0.5rem; margin-top:1.75rem; }
.platform-picker button { border:0.0625rem solid var(--line); border-radius:0.3125rem; background:transparent; color:var(--muted); padding:0.625rem 1.125rem; cursor:pointer; }
.platform-picker button[aria-pressed=true] { color:var(--ink); background:#33343c; }
.platform-status,.purchase-footnote { font-size:0.75rem; color:var(--muted); margin-top:1rem; }
.purchase-button { margin-top:1.125rem; }
.streaming-button { margin-left:0.5rem; }
.purchase-links { display:flex; flex-wrap:wrap; gap:1rem; font-size:0.75rem; margin-top:1.125rem; text-decoration:underline; }
.license-access,.upgrade-form { margin-top:1.5rem; padding-top:1.5rem; border-top:0.0625rem solid var(--line); font-size:0.8125rem; }
.license-access a { text-decoration:underline; }
.upgrade-row { display:flex; gap:0.75rem; margin-top:0.375rem; }
.upgrade-form label { display:block; margin-top:0.875rem; }
.upgrade-row input { min-width:0; flex:1; background:var(--bg); color:var(--ink); border:0.0625rem solid var(--line); border-radius:0.375rem; padding:0.75rem; }
.upgrade-row button { color:var(--ink); background:var(--surface); cursor:pointer; }
.faq-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(2rem,5vw,6rem); }
.faq-section h2 { margin-top:1.375rem; }
.faqs details { border-bottom:0.0625rem solid var(--line); }
.faqs details:first-child { border-top:0.0625rem solid var(--line); }
.faqs summary { list-style:none; cursor:pointer; padding:1.375rem 1.875rem 1.375rem 0; position:relative; font-size:1rem; font-weight:500; }
.faqs summary::-webkit-details-marker { display:none; }
.faqs summary::after { content:"+"; position:absolute; right:0.25rem; color:var(--muted); font-size:1.25rem; top:1.125rem; }
.faqs details[open] summary::after { content:"−"; }
.faqs p { max-width:65ch; color:var(--muted); margin:0 1.5625rem 1.375rem 0; font-size:0.875rem; }
.closing { text-align:center; border-top:0.0625rem solid var(--line); padding-block:4.5rem; }
.closing .eyebrow { justify-content:center; }
.closing h2 { margin:1.375rem 0 1.625rem; }
.text-link { display:inline-flex; align-items:center; gap:1.125rem; font-size:0.875rem; }
.footer { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; border-top:0.0625rem solid var(--line); padding-block:1.75rem 2.5rem; color:var(--muted); font-size:0.75rem; }
.footer .brand { font-size:1.0625rem; color:var(--ink); }
.footer > span { flex:1; }
.analytics-settings { color:inherit; background:none; border:0; padding:0; cursor:pointer; font-size:inherit; text-decoration:underline; }
.analytics-choice { position:fixed; z-index:20; bottom:1rem; right:1rem; width:min(28.75rem,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; padding:1.375rem; border:0.0625rem solid #54545b; border-radius:0.75rem; background:#202127; box-shadow:0 0.5rem 2.5rem #0008; font-size:0.8125rem; }
.analytics-choice h2 { font-size:1.1875rem; letter-spacing:-0.025rem; margin-bottom:0.75rem; }
.analytics-choice p { margin-bottom:0.75rem; color:#cbcbd1; }
.analytics-choice a { text-decoration:underline; }
.analytics-actions { display:flex; flex-wrap:wrap; gap:0.75rem; }
.analytics-actions button { color:var(--ink); background:#30333e; border:0.0625rem solid #666b7b; border-radius:0.375rem; padding:0.625rem 0.875rem; cursor:pointer; }
.privacy-page { max-width:47.5rem; padding-block:4.5rem; }
.privacy-page h1 { font-size:2.875rem; letter-spacing:-0.125rem; margin:1.25rem 0 1.75rem; }
.privacy-page h2 { font-size:1.5rem; letter-spacing:-0.03125rem; margin:2.125rem 0 0.875rem; }
.privacy-page p { color:var(--muted); margin-top:0.875rem; }
.privacy-page a { text-decoration:underline; }
@media (max-width:62.5rem) {
  .hero { gap:2.25rem; }
  h1 { font-size:4rem; letter-spacing:-0.21875rem; }
  .hero-copy { font-size:1rem; }
  .hero-actions { gap:1rem; }
  .purchase-section,.faq-section { grid-template-columns:13.75rem 1fr; gap:2.25rem; }
  .benefits { padding:2.25rem; }
  .product-stage { padding-inline:1.25rem; }
}
@media (max-width:47.5rem) {
  .wrap { width:90%; }
  .header { min-height:4.75rem; }
  .header nav { gap:1.125rem; font-size:0.75rem; }
  .header nav a:last-child { display:none; }
  .brand { font-size:1.1875rem; }
  .hero { grid-template-columns:1fr; padding-block:3rem; gap:2.25rem; }
  h1 { font-size:clamp(2.75rem,12vw,4rem); letter-spacing:-0.1875rem; }
  .hero-copy { max-width:48ch; }
  .hero-product { width:min(27.5rem,100%); justify-self:center; }
  .product-stage { padding-inline:1.5rem; }
  .capture-wrap { width:15.625rem; }
  .section { padding-block:3rem; }
  .section-heading { grid-template-columns:1fr; gap:1.25rem; }
  .section-heading .eyebrow { margin-bottom:0; }
  .steps,.benefit-grid { grid-template-columns:1fr; gap:1.625rem; margin-top:2rem; }
  .steps h3 { margin-top:0.75rem; }
  .steps p { max-width:50ch; }
  .benefits { padding:1.875rem 1.5rem; margin-bottom:3rem; }
  .benefit-grid article + article { border-top:0.0625rem solid var(--line); padding-top:1.625rem; }
  .benefit-mark { margin-bottom:0.875rem; }
  .purchase-section,.faq-section { grid-template-columns:1fr; gap:2rem; }
  .tiers { gap:1.5rem; }
  .closing { padding-block:3rem; }
  .footer { gap:1.125rem; }
  .footer > span { flex-basis:calc(100% - 8.75rem); }
}
@media (max-width:26.25rem) {
  .tiers { grid-template-columns:1fr; }
  .tier-live { margin-top:0.625rem; border-top:0.0625rem solid var(--line); }
  .hero-actions { gap:1.125rem; }
  .button { padding:0.875rem 1rem; gap:1rem; }
  .eyebrow { font-size:0.5625rem; letter-spacing:0.08125rem; }
  .product-caption { font-size:0.625rem; }
  .upgrade-row { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }