/* Winq website. Design system: brand/BRAND.md + brand/tokens.css.
   Apple × Notion × Linear: system type, neutral surfaces, 1px hairlines,
   one accent. Lime (iris) only means "gaze": the logo's eye, the focus glow,
   small dots. Dark is the marketing default; .paper is the Notion-light band. */
:root {
  --surface: #08090a; --surface-raised: #101113; --surface-sunken: #050506; --line: #1f2023; --line-strong: #5f6168;
  --ink: #f7f8f8; --ink-muted: #8a8f98; --action: #f7f8f8; --on-action: #08090a;
  --iris: #c8f03c; --iris-soft: #1a2208; --iris-text: #d4f55e; --on-iris: #191919;
  --spark: #ff7a55; --spark-text: #ff9877; --success: #6cb8f5; --danger: #ff8a7a; --focus: var(--iris-text);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-raised: 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 40px rgba(0, 0, 0, .6);
  --shadow-gaze: 0 0 0 2px #c8f03c, 0 0 32px 6px rgba(200, 240, 60, .28);
  --font-display: -apple-system, "SF Pro Display", "Geist", system-ui, sans-serif;
  --font-sans: -apple-system, "SF Pro Text", "Geist", system-ui, sans-serif;
  --font-mono: "SF Mono", "Geist Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
.paper {
  --surface: #ffffff; --surface-raised: #fbfbfa; --surface-sunken: #f7f7f5; --line: #ebebea; --line-strong: #8f8e8a;
  --ink: #191919; --ink-muted: #6b6a66; --action: #191919; --on-action: #ffffff;
  --iris-soft: #f1fadb; --iris-text: #4a6300; --spark-text: #b33a14;
  --shadow-raised: 0 0 0 1px rgba(15, 15, 15, .04), 0 2px 4px rgba(15, 15, 15, .04), 0 12px 32px rgba(15, 15, 15, .08);
  background: var(--surface); color: var(--ink); color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 15px/24px var(--font-sans); letter-spacing: -.003em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: var(--iris-text); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-8); }
section { padding: var(--space-24) 0; }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--iris); flex: none; }
.eyebrow b { color: var(--ink); font-weight: 600; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
.display-xl { font-size: clamp(46px, 7.4vw, 84px); line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.display-l { font-size: clamp(34px, 4.6vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
.heading { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: 19px; line-height: 29px; letter-spacing: -.01em; color: var(--ink-muted); max-width: 56ch; margin: var(--space-6) 0 0; }
.muted { color: var(--ink-muted); }
.sec-head { max-width: 720px; margin-bottom: var(--space-12); }
.sec-head .lead { margin-top: var(--space-4); }
.center { text-align: center; }
.center .sec-head, .center .lead { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* Components */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; font: 500 15px/20px var(--font-sans); letter-spacing: -.005em; border-radius: var(--radius-md); padding: var(--space-3) 18px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: opacity .15s ease, background .15s ease; white-space: nowrap; color: var(--ink); background: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: 16px; line-height: 22px; padding: 13px 22px; min-height: 48px; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { opacity: .88; }
.btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--line-strong); }
.btn svg { width: 18px; height: 18px; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; font: 500 12px/1 var(--font-sans); color: var(--ink-muted); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: 0 1px 0 var(--line); border-radius: var(--radius-sm); vertical-align: middle; }
.kbd + .kbd { margin-left: 3px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-sans); padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-muted); background: var(--surface-raised); white-space: nowrap; }
.badge-iris { background: var(--iris-soft); border-color: transparent; color: var(--iris-text); }
.badge-live { color: var(--spark-text); }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
code, .code-inline { font: 400 12.5px/1 var(--font-mono); padding: 3px 6px; border-radius: 5px; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 10, .72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: var(--space-6); height: 60px; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand svg, .brand img { height: 26px; width: auto; }
.nav-links { display: flex; gap: var(--space-6); margin-left: auto; }
.nav-links a { color: var(--ink-muted); text-decoration: none; font-size: 14px; padding: var(--space-2) 0; }
.nav-links a:hover { color: var(--ink); }
.nav .btn { min-height: 34px; padding: 6px 14px; font-size: 14px; border-radius: var(--radius-pill); }
.nav-cta { display: flex; gap: var(--space-2); align-items: center; }

/* Hero */
.hero { padding: var(--space-16) 0 var(--space-24); position: relative; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-12); align-items: center; }
.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.fine { margin-top: var(--space-3); font-size: 14px; color: var(--ink-muted); }

/* Hero demo */
.demo { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-raised); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.cam { display: flex; align-items: center; gap: var(--space-3); padding: 6px 12px 6px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line); }
.cam svg { width: 56px; height: 28px; }
.cam span { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.face-pupil { transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.face-lid-open, .face-lid-closed { transition: opacity .08s; }
.face.wink .face-lid-open { opacity: 0; } .face .face-lid-closed { opacity: 0; } .face.wink .face-lid-closed { opacity: 1; }
.face-brows { opacity: 0; transition: transform .15s, opacity .15s; }
.face.brow .face-brows { opacity: 1; transform: translateY(-2px); }
.face.nod { animation: nod .5s ease-in-out; } .face.tilt { animation: tilt .6s ease-in-out; } .face.shake { animation: shake .55s ease-in-out; }
@keyframes nod { 30% { transform: translateY(3px); } 60% { transform: translateY(-1px); } }
@keyframes tilt { 40% { transform: rotate(-12deg); } }
@keyframes smile { 40% { transform: scale(1.12); } }
.face.smile { animation: smile .5s ease-in-out; }
@keyframes shake { 20% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 80% { transform: translateX(-2px); } }
.desk { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
.display { position: relative; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.screen { position: relative; aspect-ratio: 16/10; border-radius: 14px; background: var(--surface-sunken); border: 1.5px solid var(--line); padding: 10px; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
.display.is-focused .screen { box-shadow: var(--shadow-gaze); border-color: transparent; }
.stand { width: 22%; height: 16px; margin: 0 auto; background: linear-gradient(var(--line), var(--surface-raised)); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.foot { width: 36%; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--line); }
.win { position: absolute; border-radius: 7px; background: var(--surface-raised); border: 1px solid var(--line); overflow: hidden; transition: opacity .2s; }
.win::before { content: ""; position: absolute; left: 6px; top: 5px; width: 18px; height: 5px; border-radius: 3px; background: radial-gradient(circle at 2.5px 2.5px, var(--line-strong) 2px, transparent 2.5px) 0 0/7px 5px repeat-x; }
.win i { position: absolute; left: 8px; right: 22%; height: 5px; border-radius: 3px; background: var(--line); }
.win i:nth-of-type(1) { top: 20px; } .win i:nth-of-type(2) { top: 31px; right: 40%; } .win i:nth-of-type(3) { top: 42px; right: 30%; }
.display:not(.is-focused) .win { opacity: .55; }
.display.is-focused .win.front { border-color: #5d6b2a; }
.screen-label { position: absolute; left: 10px; bottom: 9px; font: 500 11px/14px var(--font-sans); color: var(--ink-muted); }
.display.is-focused .screen-label { color: var(--iris-text); }
.cursor { position: absolute; width: 18px; height: 22px; left: calc(50% - 4px); top: calc(50% - 4px); opacity: 0; transition: opacity .1s, left .25s cubic-bezier(.3, .7, .2, 1), top .25s cubic-bezier(.3, .7, .2, 1); }
.display.is-focused .cursor { opacity: 1; }
.ring { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; transform: rotate(-90deg); opacity: 0; pointer-events: none; }
.ring circle { fill: none; stroke: var(--iris); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; }
.display.dwelling .ring { opacity: 1; }
.display.dwelling .ring circle { animation: dwell 350ms linear forwards; }
@keyframes dwell { to { stroke-dashoffset: 0; } }
.ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid var(--iris); pointer-events: none; animation: ripple 420ms ease-out forwards; }
.ripple.right { border-color: var(--spark); }
@keyframes ripple { to { transform: scale(5); opacity: 0; } }
.demo-hud { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font: 400 12px/18px var(--font-mono); color: var(--ink-muted); flex-wrap: wrap; }
.demo-hud output { color: var(--ink); }
.demo-hint { font-family: var(--font-sans); font-size: 13px; }
.pad { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); align-items: center; }
.pad-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px 5px 6px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink); font: 500 13px/18px var(--font-sans); cursor: pointer; }
.pad-btn:hover { border-color: var(--line-strong); }
.pad-btn svg { width: 22px; height: 22px; color: var(--ink-muted); }
.pad-btn.hot { border-color: var(--iris); }
.toggle { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); cursor: pointer; margin-left: auto; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track { position: relative; width: 32px; height: 18px; border-radius: var(--radius-pill); background: var(--line-strong); transition: background .2s; flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle input:checked + .track { background: var(--iris); }
.toggle input:checked + .track::after { transform: translateX(14px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Facts strip */
.strip { padding: 0 0 var(--space-24); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: var(--space-8) var(--space-6) var(--space-8) 0; }
.stat + .stat { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.stat strong { display: block; font: 600 30px/1.1 var(--font-display); letter-spacing: -.035em; margin-bottom: var(--space-2); }
.stat > span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.stat [data-count] { font-variant-numeric: tabular-nums; }

/* Features */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: center; padding: var(--space-12) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip .feature-art { order: -1; }
.feature h3 { margin-bottom: var(--space-4); }
.feature p { color: var(--ink-muted); font-size: 16px; line-height: 26px; margin: 0; max-width: 52ch; }
.ticks { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.ticks li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 22px; }
.ticks svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--iris-text); }
.feature-art { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); min-height: 320px; display: flex; align-items: center; justify-content: center; }
.zones { width: 100%; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: var(--space-3); align-items: end; }
.zone { aspect-ratio: 16/10; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-sunken); position: relative; animation: zone 6s infinite; }
.zone:nth-child(1) { aspect-ratio: 10/14; }
.zone:nth-child(2) { animation-delay: -4s; } .zone:nth-child(3) { animation-delay: -2s; }
@keyframes zone { 0%, 30% { box-shadow: var(--shadow-gaze); border-color: transparent; } 34%, 100% { box-shadow: none; border-color: var(--line); } }
.zone span { position: absolute; left: 8px; bottom: 6px; font: 500 11px/12px var(--font-sans); color: var(--ink-muted); }
.scrollart { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 12px; border: 1.5px solid var(--iris); background: var(--surface-sunken); overflow: hidden; }
.scrollart-page { position: absolute; inset: 0 16px; animation: scrollpage 2.4s linear infinite; }
.scrollart-page i { display: block; height: 7px; margin: 18px 0; border-radius: 4px; background: var(--line); }
.scrollart-page i:nth-child(3n) { margin-right: 30%; } .scrollart-page i:nth-child(3n+1) { margin-right: 12%; }
.scrollart-band { position: absolute; left: 0; right: 0; height: 22%; pointer-events: none; }
.scrollart-band.top { top: 0; background: linear-gradient(to bottom, rgba(200, 240, 60, .08), transparent); }
.scrollart-band.bottom { bottom: 0; background: linear-gradient(to top, rgba(200, 240, 60, .24), transparent); display: flex; align-items: flex-end; padding: 10px 12px; }
.scrollart-band b, .scrollart-tag { font: 500 12px/16px var(--font-sans); }
.scrollart-band b { color: var(--iris-text); }
.scrollart-tag { position: absolute; right: 10px; top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink-muted); }
@keyframes scrollpage { from { transform: translateY(0); } to { transform: translateY(-50px); } }
.display.scrolling .win.front { border-color: var(--iris); }
.display.scrolling .win.front::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(to top, rgba(200, 240, 60, .25), transparent); }
.display.scrolling .win.front i { animation: scrolllines 1.1s linear infinite; }
@keyframes scrolllines { from { transform: translateY(0); } to { transform: translateY(-11px); } }
@media (prefers-reduced-motion: reduce) { .scrollart-page, .display.scrolling .win.front i { animation: none; } }
.calib { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface-sunken); }
.calib i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--line-strong); }
.calib i.on { background: var(--iris); box-shadow: 0 0 0 6px rgba(200, 240, 60, .18); animation: dotmove 7s infinite steps(1); }
.calib b { position: absolute; left: 12px; bottom: 10px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
@keyframes dotmove {
  0% { left: 50%; top: 50%; } 14% { left: 12%; top: 14%; } 28% { left: 88%; top: 14%; } 42% { left: 88%; top: 86%; }
  57% { left: 12%; top: 86%; } 71% { left: 50%; top: 14%; } 85% { left: 50%; top: 86%; } 100% { left: 50%; top: 50%; }
}
.ear { width: 100%; display: grid; gap: var(--space-6); }
.ear-row { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items: center; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.ear-track { position: relative; height: 40px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; }
.ear-track svg { width: 100%; height: 100%; }
.ear-track line { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.ear-track path { fill: none; stroke: var(--ink); stroke-width: 2; }
.ear-track .hot { stroke: var(--iris); stroke-width: 3; }
.ear-legend { display: flex; justify-content: space-between; padding-left: 88px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.binds { width: 100%; display: grid; gap: var(--space-3); }
.bind { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.bind svg { width: 40px; height: 40px; }
.bind b { font-weight: 500; font-size: 15px; }
.bind small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }

/* Everything else in 1.0 */
.all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-16); }
.all > div { background: var(--surface); padding: var(--space-6); }
.all svg { width: 22px; height: 22px; color: var(--ink); margin-bottom: var(--space-4); }
.all b { display: block; font: 600 16px/22px var(--font-sans); letter-spacing: -.01em; margin-bottom: 6px; }
.all p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 21px; }

/* Gestures (paper band) */
.gestures-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.g-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-height: 210px; }
.g-card svg { width: 56px; height: 56px; color: var(--ink); }
.g-card h3 { font: 600 17px/24px var(--font-sans); letter-spacing: -.01em; margin-top: var(--space-2); }
.g-card .g-bind { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 14px; color: var(--ink-muted); }
.g-card .g-time { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.g-card.soft { background: var(--iris-soft); border-color: transparent; }
.actions-row { margin-top: var(--space-12); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.actions-row .label { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); margin-right: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 14px; line-height: 20px; background: var(--surface-raised); }

/* Config */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: center; }
.code { margin: 0; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); font: 400 13px/22px var(--font-mono); color: var(--ink-muted); overflow-x: auto; tab-size: 2; }
.code .k { color: var(--ink); } .code .s { color: var(--iris-text); } .code .c { color: #7d8088; } .code .h { color: var(--ink); font-weight: 600; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }

/* Privacy */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-bottom: var(--space-12); }
.node { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-right: var(--space-8); }
.node:last-child { margin-right: 0; border-color: #5d6b2a; }
.node:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--space-8)); top: 50%; width: var(--space-8); height: 2px; background: repeating-linear-gradient(90deg, var(--iris) 0 6px, transparent 6px 11px); }
.node .eyebrow { margin-bottom: var(--space-2); }
.node b { display: block; font: 600 17px/24px var(--font-sans); letter-spacing: -.01em; margin-bottom: var(--space-2); }
.node p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.never { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(-1 * var(--space-6)); margin-bottom: var(--space-12); }
.never span { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.never svg { width: 16px; height: 16px; color: var(--danger); }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.promise svg { width: 24px; height: 24px; color: var(--iris-text); margin-bottom: var(--space-4); }
.promise b { display: block; font: 600 17px/24px var(--font-sans); letter-spacing: -.01em; margin-bottom: var(--space-2); }
.promise p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 23px; }

/* Audience */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.who-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); background: var(--surface-raised); }
.who-card svg { width: 28px; height: 28px; color: var(--ink); margin-bottom: var(--space-6); }
.who-card h3 { font: 600 20px/26px var(--font-display); letter-spacing: -.02em; margin-bottom: var(--space-3); }
.who-card p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 23px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 880px; margin: 0 auto; text-align: left; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); background: var(--surface-raised); display: flex; flex-direction: column; }
.plan.main { border-color: #5d6b2a; box-shadow: var(--shadow-gaze); }
.plan h3 { font: 600 20px/26px var(--font-display); letter-spacing: -.02em; }
.plan .price-line { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-2); min-height: 52px; }
.plan .price { font: 600 46px/1 var(--font-display); letter-spacing: -.04em; }
.plan .price-line small { color: var(--ink-muted); font-size: 15px; }
.plan .was { color: var(--ink-muted); font-size: 18px; }
.plan .save { color: var(--iris-text); font-size: 13px; font-weight: 500; flex-basis: 100%; }
.plan .ticks { margin: var(--space-4) 0 var(--space-8); }
.plan .btn { margin-top: auto; width: 100%; }
.plan .after { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 13px; text-align: center; }
.plans-note { margin-top: var(--space-6); color: var(--ink-muted); font-size: 14px; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; padding: var(--space-6) 0; font: 500 17px/24px var(--font-sans); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; color: var(--ink-muted); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--space-6); color: var(--ink-muted); max-width: 62ch; }

/* Final CTA + footer */
.final { text-align: center; padding: var(--space-24) 0; }
.final .app-icon { width: 112px; height: 112px; margin: 0 auto var(--space-8); }
.final .lead { margin-left: auto; margin-right: auto; }
.final .cta { justify-content: center; }
footer { border-top: 1px solid var(--line); padding: var(--space-8) 0; font-size: 14px; color: var(--ink-muted); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
footer nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
footer a { color: var(--ink-muted); text-decoration: none; } footer a:hover { color: var(--ink); }
footer .brand svg, footer .brand img { height: 22px; }
footer .featured img { display: block; height: 40px; width: auto; }
footer .featured-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* Noonlaunch: a smaller badge beside TryMacApps. */
footer .featured-sm img { height: 30px; }

/* Simple pages: thanks, privacy, support, changelog */
.page { padding: var(--space-16) 0 var(--space-24); }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; margin: 0 0 var(--space-6); }
.page h2 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; margin: var(--space-12) 0 var(--space-3); }
.page p, .page li { color: var(--ink-muted); }
.page li { margin: 6px 0; }
.page b, .page strong { color: var(--ink); }
.callout { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); margin: var(--space-6) 0; color: var(--ink-muted); }
.big-steps { counter-reset: s; list-style: none; padding: 0; margin: var(--space-8) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.big-steps li { counter-increment: s; display: flex; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); margin: 0; }
.big-steps li::before { content: counter(s); flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--action); color: var(--on-action); }
.big-steps p { margin: 4px 0 12px; }
.big-steps li > div { min-width: 0; flex: 1; }
.grad { color: var(--ink); }
.btn.small { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.btn.primary { background: var(--action); color: var(--on-action); }
.btn:not(.primary):not(.btn-primary) { border-color: var(--line); background: var(--surface-raised); }

/* Install command + dialog */
.cmd { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); padding: 8px 8px 8px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: none; border: 0; padding: 0; font-size: 13px; line-height: 20px; user-select: all; }
.fine-left { color: var(--ink-muted); font-size: 13px; margin: 6px 0 0; }
dialog.install { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised); }
dialog.install::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
dialog.install h3 { margin: 0 0 6px; font: 600 24px/30px var(--font-display); letter-spacing: -.02em; }
dialog.install .sub { margin: 0 0 var(--space-6); color: var(--ink-muted); font-size: 14px; }
dialog.install .x { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--ink-muted); font-size: 26px; cursor: pointer; line-height: 1; }
dialog.install .opt { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); margin-bottom: var(--space-3); }
dialog.install .opt p, dialog.install .opt li { color: var(--ink-muted); font-size: 14px; margin: 6px 0; }
dialog.install ol { padding-left: 20px; margin: 8px 0 14px; }
.opt-head { display: flex; align-items: center; gap: 10px; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--iris-soft); color: var(--iris-text); }

/* Motion (1.5): Apple-style, calm, nothing bounces. All of it switches
   off under prefers-reduced-motion (the rule at the end of this file). */
html .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
html .reveal.in { opacity: 1; transform: none; }
.rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both; }
span.rise { display: inline-block; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero-title .shine { background: linear-gradient(100deg, var(--ink) 40%, #ffffff 50%, var(--ink) 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rise .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both, shine 5s ease-in-out 1.6s infinite; }
@keyframes shine { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }

/* Hero: a soft light that follows your pointer, like gaze. */
.hero { overflow: hidden; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(200, 240, 60, .07), transparent 60%), radial-gradient(900px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, .035), transparent 70%); transition: background-position .2s; }
.hero .wrap { position: relative; }
.new-pill { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); padding: 5px 14px 5px 5px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(16, 17, 19, .7); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; transition: border-color .2s ease; width: fit-content; max-width: 100%; }
.new-pill:hover { border-color: var(--line-strong); }
.new-pill svg { width: 16px; height: 16px; flex: none; color: var(--ink-muted); transition: transform .2s ease; }
.new-pill:hover svg { transform: translateX(3px); }
.demo { transition: box-shadow .3s ease, border-color .3s ease; }
.demo:hover { border-color: var(--line-strong); }

/* Hero, alive: a grid floor drifting toward a horizon glow, a gaze ring
   that trails the pointer, eyes in "Look." that follow it, a period that
   winks, and the demo leaning toward the pointer with an orbiting edge. */
.hero-floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 62%; pointer-events: none; perspective: 520px; -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%); }
.hero-floor div { position: absolute; inset: -40% 0 0; transform: rotateX(68deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(200, 240, 60, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 64px 64px; animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 64px, 0 0; } }
.hero::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: 140%; height: 220px; margin-left: -70%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(200, 240, 60, .10), rgba(108, 184, 245, .05) 45%, transparent 70%); filter: blur(20px); animation: horizon 8s ease-in-out infinite; }
@keyframes horizon { 50% { opacity: .55; transform: scaleX(.9); } }
.hero-reticle { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1.5px solid rgba(200, 240, 60, .55); box-shadow: 0 0 24px rgba(200, 240, 60, .18), inset 0 0 12px rgba(200, 240, 60, .12); pointer-events: none; opacity: 0; transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0) scale(var(--rs, 1)); transition: opacity .3s ease; z-index: 1; }
.hero-reticle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--iris); }
.hero.gazing .hero-reticle { opacity: 1; }
.hero.gazing a, .hero.gazing button { cursor: pointer; }

.hero-title .eye { position: relative; display: inline-block; }
.hero-title .eye i { position: absolute; left: 50%; top: 62%; width: .15em; height: .15em; margin: -.075em 0 0 -.075em; border-radius: 50%; background: var(--iris); box-shadow: 0 0 .18em rgba(200, 240, 60, .6); transform: translate(var(--px, 0), var(--py, 0)); transition: transform .12s ease-out; }
.hero-title .eye i::after { content: ""; position: absolute; inset: -.2em -.12em; background: var(--surface); transform: scaleY(0); transform-origin: 50% 0; animation: lid 5.5s infinite; }
.hero-title .eye + .eye i::after { animation-delay: .04s; }
@keyframes lid { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.hero-title .wink { display: inline-block; color: var(--iris); text-shadow: 0 0 .3em rgba(200, 240, 60, .5); transform-origin: 50% 85%; animation: wink 4.2s ease-in-out 2s infinite; }
@keyframes wink { 0%, 86%, 100% { transform: none; } 90% { transform: scaleY(.12) scaleX(1.25); } 94% { transform: none; } }

.demo-stage { perspective: 1400px; transform-style: preserve-3d; }
.demo-stage > .demo { transform-origin: 50% 50%; }
.demo-stage { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.demo::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--orb, 0deg), transparent 0 70%, rgba(200, 240, 60, .9) 82%, rgba(108, 184, 245, .6) 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: orbit 7s linear infinite; }
.demo::after { content: ""; position: absolute; inset: 10% 6% -8%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 60%, rgba(200, 240, 60, .16), transparent 70%); filter: blur(40px); pointer-events: none; }
@property --orb { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --orb: 360deg; } }

/* Statement: words light up as it scrolls by (Apple-style). */
.statement { padding: var(--space-16) 0 var(--space-24); }
.statement-text { margin: 0; max-width: 22ch; font: 600 clamp(34px, 5.4vw, 64px)/1.08 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.statement-text .w { color: var(--ink); opacity: .16; transition: opacity .25s ease; }
.statement-text .w.lit { opacity: 1; }

/* Head or eyes: try it. */
.lookfit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-8); margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.lookfit-stage { display: grid; gap: var(--space-4); }
.lookfit-svg { width: 100%; height: auto; }
.lf-screen { fill: var(--surface-sunken); stroke: var(--line-strong); stroke-width: 1.5; }
.lf-dot { fill: var(--iris); }
.lf-face { fill: var(--surface-sunken); stroke: var(--ink); stroke-width: 2.5; }
.lf-eye { fill: none; stroke: var(--ink-muted); stroke-width: 2; }
.lf-pupil { fill: var(--ink); }
.lf-mouth { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.lf-dot, .lf-head, .lf-feat, .lf-pupil { transition: transform .7s cubic-bezier(.3, .7, .2, 1); transform-box: view-box; }
.lf-bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.lf-bars span { display: grid; gap: 6px; }
.lf-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lf-bar b { display: block; height: 100%; width: 50%; background: var(--ink); border-radius: 3px; transition: width .3s ease; }
.lookfit-q { display: block; font: 600 20px/26px var(--font-display); letter-spacing: -.02em; margin-bottom: var(--space-6); }
.lookfit input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ink) var(--fill, 20%), var(--line) var(--fill, 20%)); outline-offset: 6px; cursor: pointer; }
.lookfit input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.lookfit input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.lookfit-scale { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); font-size: 13px; color: var(--ink-muted); }
.lookfit-read { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-8) 0 var(--space-2); font-size: 15px; }
.lookfit-read span { color: var(--ink-muted); }
.lf-pick { color: var(--iris-text); font-size: 17px; }
.lookfit-why { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 21px; min-height: 42px; }

/* Cards lift a little on hover. */
.g-card, .who-card, .node, .plan { transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .3s ease, opacity .25s ease; }
.g-card:hover, .who-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.g-card:hover svg { animation: nudge .6s ease-in-out; }
@keyframes nudge { 40% { transform: translateY(-3px) rotate(-4deg); } }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid, .feature, .split, .faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .feature.flip .feature-art { order: 0; }
  .gestures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
  .node:nth-child(2) { margin-right: 0; } .node:nth-child(2)::after { display: none; }
  .promises, .who { grid-template-columns: minmax(0, 1fr); }
  .all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .lookfit { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-4); }
  section { padding: var(--space-16) 0; }
  .hero { padding: var(--space-8) 0 var(--space-16); }
  .gestures-grid, .pipe, .all, .plans { grid-template-columns: minmax(0, 1fr); }
  .node { margin-right: 0; } .node::after { display: none; }
  .demo { padding: var(--space-4); }
  .stat strong { font-size: 24px; }
  .stat { padding-right: var(--space-3); } .stat + .stat { padding-left: var(--space-4); }
  .feature-art { padding: var(--space-6); min-height: 0; }
  .nav-cta .btn-secondary { display: none; }
  .code { padding: var(--space-4); }
  .toggle { margin-left: 0; }
  .lookfit { padding: var(--space-4); }
  .next { padding: var(--space-24) 0; }
  .statement { padding: var(--space-8) 0 var(--space-16); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html .reveal { opacity: 1; transform: none; }
  .statement-text .w { opacity: 1; }
  .hero-title .shine { color: var(--ink); background: none; }
  .hero-reticle { display: none; }
}

/* Analytics consent (analytics.js), EU/EEA, UK and Switzerland only. */
.consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--surface-raised); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); font-size: 14px; line-height: 20px; color: var(--ink); }
.consent p { margin: 0; flex: 1 1 260px; }
.consent a { color: var(--ink-muted); }
.consent div { display: flex; gap: var(--space-2); }