:root {
  --blue: #0071e3;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --page: #f5f5f7;
  --white: #fff;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; }
.scroll-progress { height: 3px; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 40; }
.scroll-progress span { background: linear-gradient(90deg, #007aff, #5e5ce6, #bf5af2); display: block; height: 100%; transform: scaleX(0); transform-origin: left; will-change: transform; }
.pointer-glow { background: radial-gradient(circle, rgba(58, 153, 255, .12), transparent 68%); border-radius: 50%; height: 520px; left: -260px; opacity: 0; pointer-events: none; position: fixed; top: -260px; transform: translate3d(var(--pointer-x, 50vw), var(--pointer-y, 30vh), 0); transition: opacity .35s; width: 520px; z-index: 0; }
body.pointer-active .pointer-glow { opacity: 1; }

.nav-wrap {
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(250, 250, 252, .78);
  border-bottom: 1px solid rgba(0, 0, 0, .055);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}
.nav { align-items: center; display: flex; height: 62px; justify-content: space-between; margin: 0 auto; max-width: 1120px; padding: 0 24px; }
.brand { align-items: center; display: flex; font-size: 17px; font-weight: 650; gap: 10px; letter-spacing: -.02em; text-decoration: none; }
.brand img, .footer-brand img, .final-cta img { border-radius: 22.5%; box-shadow: 0 7px 20px rgba(7, 20, 37, .16); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: #424245; font-size: 13px; text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--blue); }
.nav-cta { background: var(--blue); border-radius: 980px; color: white; font-size: 13px; font-weight: 600; padding: 9px 16px; text-decoration: none; }
.menu-toggle { background: transparent; border: 0; cursor: pointer; display: none; height: 38px; padding: 8px; width: 40px; }.menu-toggle span { background: var(--ink); display: block; height: 1.5px; margin: 6px auto; transition: transform .25s, opacity .25s; width: 19px; }.nav-wrap.menu-open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }.nav-wrap.menu-open .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.hero { min-height: 980px; overflow: hidden; padding: 155px 24px 0; position: relative; text-align: center; }
.eyebrow, .section-kicker, .card-kicker { color: var(--blue); font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 18px; }
.hero h1 { font-size: clamp(64px, 9vw, 112px); letter-spacing: -.068em; line-height: .89; margin: 0 auto; max-width: 1180px; }
.hero h1 span { background: linear-gradient(110deg, #0066cc 5%, #5e5ce6 48%, #bf5af2 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .hero-brand { background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.hero h1 .hero-promise { display: inline-block; font-size: .72em; letter-spacing: -.055em; margin-top: .2em; }
.hero-copy { color: var(--muted); font-size: clamp(20px, 2.5vw, 27px); letter-spacing: -.025em; line-height: 1.35; margin: 34px auto 0; max-width: 760px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
.button { border-radius: 980px; display: inline-flex; font-size: 17px; font-weight: 600; justify-content: center; padding: 14px 23px; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); box-shadow: 0 10px 30px rgba(0, 113, 227, .22); color: white; }
.button-primary:hover { background: #0077ed; box-shadow: 0 14px 34px rgba(0, 113, 227, .3); }
.button-secondary { background: rgba(0, 113, 227, .09); color: var(--blue); }
.hero-note { color: #86868b; font-size: 13px; margin: 16px 0 0; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin: 22px auto 0; }.hero-proof span { align-items: center; color: #4b4b50; display: inline-flex; font-size: 14px; font-weight: 600; gap: 8px; }.hero-proof i { background: #34c759; border-radius: 50%; box-shadow: 0 0 0 4px rgba(52, 199, 89, .1); height: 6px; width: 6px; }
.orb { border-radius: 50%; filter: blur(2px); opacity: .42; pointer-events: none; position: absolute; }
.orb-one { background: radial-gradient(circle at 35% 35%, rgba(92, 214, 255, .9), rgba(94, 92, 230, .16) 52%, transparent 70%); height: 560px; left: -270px; top: 120px; width: 560px; }
.orb-two { background: radial-gradient(circle at 50% 50%, rgba(191, 90, 242, .45), rgba(0, 113, 227, .08) 55%, transparent 70%); height: 600px; right: -350px; top: 200px; width: 600px; }

.product-stage { margin: 76px auto 0; max-width: 1120px; padding-bottom: 72px; position: relative; }
.stage-glow { background: radial-gradient(ellipse, rgba(57, 137, 255, .26), transparent 68%); bottom: -80px; filter: blur(10px); height: 420px; left: 5%; position: absolute; right: 5%; }
.browser-frame { background: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .94); border-radius: 24px; box-shadow: 0 60px 130px rgba(34, 47, 79, .2), 0 16px 45px rgba(35, 44, 70, .1); overflow: hidden; position: relative; text-align: left; transform: perspective(1400px) rotateX(calc(2deg + var(--stage-rx, 0deg))) rotateY(var(--stage-ry, 0deg)) translateY(var(--stage-y, 0px)); transition: transform .18s ease-out; will-change: transform; }
.browser-bar { align-items: center; background: rgba(248, 248, 250, .92); border-bottom: 1px solid rgba(0, 0, 0, .06); display: grid; grid-template-columns: 1fr 2fr 1fr; height: 54px; padding: 0 18px; }
.traffic { display: flex; gap: 7px; }.traffic i { background: #d2d2d7; border-radius: 50%; height: 10px; width: 10px; }.traffic i:first-child { background: #ff5f57; }.traffic i:nth-child(2) { background: #febc2e; }.traffic i:nth-child(3) { background: #28c840; }
.address { background: rgba(0, 0, 0, .045); border-radius: 9px; color: #6e6e73; font-size: 11px; justify-self: center; padding: 7px 38px; text-align: center; width: 100%; }.lock { color: #34c759; font-size: 7px; }.bar-dot { background: #d2d2d7; border-radius: 50%; height: 16px; justify-self: end; width: 16px; }
.app-preview { background: #080d17; display: grid; grid-template-columns: 210px 1fr; min-height: 520px; }
.script-rail { background: rgba(255, 255, 255, .04); border-right: 1px solid rgba(255, 255, 255, .08); color: white; padding: 30px 16px; }
.rail-brand { align-items: center; display: flex; font-size: 15px; font-weight: 650; gap: 9px; margin: 0 8px 34px; }.mini-mark { background: #50e3c2; border-radius: 4px; height: 13px; transform: skew(-18deg); width: 18px; }
.rail-item { align-items: center; border-radius: 12px; color: #747b87; display: flex; font-size: 13px; gap: 12px; margin: 8px 0; padding: 12px; }.rail-item small { font-size: 10px; font-weight: 700; }.rail-item.active { background: rgba(10, 132, 255, .15); color: #f5f5f7; }.rail-item.active small { color: #64d2ff; }
.prompt-view { color: white; display: flex; flex-direction: column; min-width: 0; padding: 32px 54px 28px; }
.prompt-top { align-items: center; color: #8e96a3; display: flex; font-size: 12px; justify-content: space-between; }.preview-mode { font-weight: 650; }.preview-status { align-items: center; display: flex; gap: 8px; }.live-pill { align-items: center; background: rgba(52, 199, 89, .12); border-radius: 980px; color: #65d981; display: flex; gap: 7px; padding: 7px 11px; }.live-pill i { animation: pulse 1.6s infinite; background: #34c759; border-radius: 50%; height: 6px; width: 6px; }.capture-pill { align-items: center; background: rgba(255, 69, 58, .12); border-radius: 980px; color: #ff8179; display: flex; gap: 6px; padding: 7px 10px; }.capture-pill i { animation: blink 1s infinite; background: #ff453a; border-radius: 50%; height: 6px; width: 6px; }.capture-pill b { font-size: 10px; letter-spacing: .08em; }.capture-pill em { color: #c4c9d1; font-style: normal; }
.prompt-view p { color: #545d6b; font-size: clamp(32px, 4.2vw, 58px); font-weight: 650; letter-spacing: -.047em; line-height: 1.15; margin: auto 0; }.prompt-word { color: #545d6b; transition: color .35s, text-shadow .35s; }.prompt-word.spoken { color: #78d8df; }.prompt-word.current { color: #8bc8ff; text-shadow: 0 0 24px rgba(100, 210, 255, .35); }
.voice-track { align-items: center; display: flex; gap: 5px; height: 30px; justify-content: center; }.voice-track span { animation: wave 1.4s ease-in-out infinite; background: #0a84ff; border-radius: 4px; height: 8px; width: 3px; }.voice-track span:nth-child(2n) { animation-delay: -.35s; }.voice-track span:nth-child(3n) { animation-delay: -.7s; }
.controls { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }.controls button { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; color: white; cursor: pointer; font-size: 18px; height: 40px; transition: transform .2s, background .2s; width: 40px; }.controls button:hover { background: rgba(255, 255, 255, .16); transform: scale(1.08); }.controls .main-control { background: #0a84ff; border: 0; box-shadow: 0 8px 24px rgba(10, 132, 255, .3); }.prompt-view.demo-paused .voice-track span { animation-play-state: paused; opacity: .35; }.prompt-view.demo-paused .live-pill { background: rgba(255, 159, 10, .12); color: #ffb340; }.prompt-view.demo-paused .live-pill i { animation: none; background: #ff9f0a; }
.capture-note { color: #737d8b; display: flex; font-size: 10px; gap: 18px; justify-content: center; margin-top: 14px; }.capture-note span:before { color: #34c759; content: "✓"; margin-right: 6px; }

.record-story { align-items: center; background: #05070b; border-radius: 44px; color: white; display: grid; gap: 70px; grid-template-columns: .82fr 1.18fr; margin: 120px auto 40px; max-width: 1180px; overflow: hidden; padding: 82px 70px; position: relative; }.record-story:before { background: radial-gradient(circle, rgba(10,132,255,.28), transparent 68%); content: ""; height: 560px; pointer-events: none; position: absolute; right: -220px; top: -260px; width: 560px; }.record-story-copy { position: relative; z-index: 1; }.record-story .section-kicker { color: #64d2ff; }.record-story h2 { font-size: clamp(46px, 5.8vw, 72px); letter-spacing: -.058em; line-height: .96; margin: 0; }.record-story-copy > p:last-of-type { color: #a6adb8; font-size: 19px; line-height: 1.55; margin: 28px 0 0; }.record-story-copy > a { color: #2997ff; display: inline-block; font-size: 17px; font-weight: 600; margin-top: 28px; text-decoration: none; }.record-flow { align-items: center; display: grid; gap: 10px; grid-template-columns: 1fr 32px 1fr 32px 1fr; position: relative; z-index: 1; }.flow-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; min-height: 250px; padding: 20px; position: relative; transition: background .3s, transform .3s; }.flow-card:hover { background: rgba(255,255,255,.11); transform: translateY(-6px); }.flow-number { color: #737d8b; font-size: 10px; font-weight: 700; }.flow-card strong, .flow-card small { display: block; }.flow-card strong { font-size: 16px; letter-spacing: -.025em; margin-top: 24px; }.flow-card small { color: #89919e; font-size: 11px; line-height: 1.45; margin-top: 7px; }.lens { background: radial-gradient(circle at 38% 34%, #637f8f, #182733 40%, #07101a 70%); border: 2px solid #59616c; border-radius: 50%; box-shadow: 0 0 0 8px rgba(255,255,255,.04); height: 76px; margin: 30px auto 0; position: relative; width: 76px; }.lens i { background: rgba(255,255,255,.38); border-radius: 50%; height: 12px; left: 17px; position: absolute; top: 14px; width: 12px; }.mini-script { margin: 40px 0 50px; }.mini-script i { background: #515a69; border-radius: 5px; display: block; height: 10px; margin: 10px 0; width: 100%; }.mini-script i:first-child { background: #7fc5ff; width: 74%; }.mini-script i:last-child { width: 58%; }.take-ready { align-items: center; background: rgba(52,199,89,.13); border: 1px solid rgba(52,199,89,.25); border-radius: 22px; display: flex; height: 82px; justify-content: center; margin: 28px auto 0; width: 82px; }.take-ready i { align-items: center; background: #34c759; border-radius: 50%; color: white; display: flex; font-size: 20px; font-style: normal; height: 36px; justify-content: center; width: 36px; }.flow-connector { display: flex; gap: 3px; justify-content: center; }.flow-connector i { animation: flow-dot 1.6s infinite; background: #2997ff; border-radius: 50%; height: 4px; opacity: .25; width: 4px; }.flow-connector i:nth-child(2) { animation-delay: .18s; }.flow-connector i:nth-child(3) { animation-delay: .36s; }

.statement { margin: 0 auto; max-width: 1000px; padding: 160px 24px; text-align: center; }
.statement h2, .privacy h2, .languages h2, .final-cta h2 { font-size: clamp(48px, 7vw, 82px); letter-spacing: -.058em; line-height: .98; margin: 0; }
.statement > p:last-child, .privacy > p, .final-cta > p { color: var(--muted); font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -.02em; line-height: 1.45; margin: 28px auto 0; max-width: 760px; }

.bento { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 auto; max-width: 1180px; padding: 0 24px 160px; }
.card { border-radius: 38px; min-height: 620px; overflow: hidden; position: relative; }
.interactive-card { transform: perspective(1000px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translateY(var(--card-y, 0px)); transition: box-shadow .35s, transform .18s ease-out; will-change: transform; }.interactive-card:hover { box-shadow: 0 28px 60px rgba(29, 29, 31, .12); --card-y: -7px; }
.card-copy { padding: 50px 50px 0; position: relative; z-index: 2; }.card-copy h3 { font-size: clamp(35px, 4.5vw, 54px); letter-spacing: -.05em; line-height: 1.02; margin: 0; }.card-copy > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.5; max-width: 520px; }
.card-voice { background: linear-gradient(145deg, #eaf7ff, #eef0ff); }.word-demo { bottom: 80px; display: flex; flex-wrap: wrap; font-size: clamp(47px, 6vw, 78px); font-weight: 650; gap: 0 .22em; left: 50px; letter-spacing: -.055em; line-height: .95; position: absolute; right: 30px; }.word-demo span { color: #adb4c2; }.word-demo span:nth-child(-n+2) { color: #1d1d1f; }.word-demo .current { color: #007aff; position: relative; }.word-demo .current:after { background: #007aff; border-radius: 2px; bottom: -13px; content: ""; height: 4px; left: 5%; position: absolute; right: 5%; }
.card-camera { background: #090b12; color: white; }.camera-ui { height: 100%; position: absolute; width: 100%; }.camera-gradient { background: radial-gradient(circle at 56% 42%, #425e68 0, #192934 26%, #0b111a 60%); inset: 0; position: absolute; transition: filter .35s, transform .5s; }.camera-ui:after { background: linear-gradient(90deg, transparent 49.8%, rgba(255, 255, 255, .08) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(255, 255, 255, .08) 50%, transparent 50.2%); content: ""; inset: 0; pointer-events: none; position: absolute; }.recording { background: rgba(0, 0, 0, .28); border-radius: 980px; font-size: 12px; padding: 8px 12px; position: absolute; right: 28px; top: 28px; z-index: 2; }.recording i { background: #ff453a; border-radius: 50%; display: inline-block; height: 7px; margin-right: 6px; opacity: .35; width: 7px; }.camera-ui > p { bottom: 130px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 650; left: 50px; letter-spacing: -.04em; line-height: 1.08; position: absolute; right: 50px; z-index: 2; }.camera-ui > p span { color: #8e96a3; }.record-button { background: #ff453a; border: 5px solid #090b12; border-radius: 50%; bottom: 42px; box-shadow: 0 0 0 3px white; cursor: pointer; height: 52px; left: calc(50% - 26px); position: absolute; transition: border-radius .25s, transform .25s; width: 52px; z-index: 2; }.record-button:hover { transform: scale(1.08); }.camera-ui.recording-active .record-button { border-radius: 16px; transform: scale(.68); }.camera-ui.recording-active .recording i { animation: blink 1s infinite; opacity: 1; }.camera-ui.recording-active .camera-gradient { filter: saturate(1.25); transform: scale(1.03); }.overlay-copy { padding-top: 50px; pointer-events: none; }.overlay-copy .card-kicker { color: #64d2ff; }
.card-modes { background: #fff; }.mode-stack { bottom: 38px; left: 38px; position: absolute; right: 38px; }.mode { align-items: center; background: #f5f5f7; border: 1px solid transparent; border-radius: 20px; color: var(--ink); cursor: pointer; display: flex; gap: 16px; margin-top: 12px; padding: 18px; text-align: left; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; width: 100%; }.mode:hover { transform: translateX(4px); }.mode.selected { background: #eff7ff; border-color: rgba(0, 113, 227, .16); box-shadow: 0 12px 32px rgba(0, 113, 227, .08); }.mode-icon { align-items: center; background: white; border-radius: 13px; color: var(--blue); display: flex; flex: 0 0 auto; font-size: 23px; height: 46px; justify-content: center; width: 46px; }.mode b, .mode small { display: block; }.mode b { font-size: 15px; }.mode small { color: #86868b; margin-top: 4px; }.mode i { background: transparent; border: 1px solid #c7c7cc; border-radius: 50%; height: 14px; margin-left: auto; width: 14px; }.mode.selected i { background: var(--blue); border: 4px solid white; box-shadow: 0 0 0 1px var(--blue); }
.card-captions { background: linear-gradient(145deg, #161923, #080a10); color: white; }.card-captions .card-kicker { color: #64d2ff; }.card-captions .card-copy > p:last-child { color: #a1a8b3; }.timeline { background: rgba(255, 255, 255, .065); border: 1px solid rgba(255, 255, 255, .09); border-radius: 24px; bottom: 42px; left: 38px; padding: 22px; position: absolute; right: 38px; }.timeline-head { color: #a1a8b3; display: flex; font-size: 12px; justify-content: space-between; }.wave { align-items: center; display: flex; gap: 7px; height: 80px; }.wave i { background: linear-gradient(#64d2ff, #0a84ff); border-radius: 4px; height: 24%; width: 100%; }.wave i:nth-child(2n) { height: 60%; }.wave i:nth-child(3n) { height: 88%; }.wave i:nth-child(4n) { height: 42%; }.caption-chip { background: rgba(10, 132, 255, .18); border-left: 3px solid #0a84ff; border-radius: 8px; color: #d9ecff; font-size: 13px; padding: 10px 13px; }

.privacy { background: #000; color: white; padding: 170px 24px; text-align: center; }.privacy .section-kicker { color: #64d2ff; }.privacy > p { color: #a1a1a6; }.privacy > a { color: #2997ff; display: inline-block; font-size: 18px; margin-top: 28px; text-decoration: none; }.privacy-mark { height: 100px; margin: 0 auto 34px; position: relative; width: 86px; }.lock-body { background: linear-gradient(145deg, #5ac8fa, #007aff); border-radius: 20px; bottom: 0; height: 68px; position: absolute; width: 86px; }.lock-loop { border: 9px solid #64d2ff; border-bottom: 0; border-radius: 34px 34px 0 0; height: 50px; left: 18px; position: absolute; top: 0; width: 50px; }
.languages { padding: 170px 24px; text-align: center; }.language-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 52px auto 0; max-width: 1000px; }.language-row span { background: white; border: 1px solid rgba(0, 0, 0, .05); border-radius: 980px; box-shadow: 0 8px 30px rgba(0, 0, 0, .045); font-size: 18px; padding: 15px 22px; }
.how { display: grid; gap: 80px; grid-template-columns: .8fr 1.2fr; margin: 0 auto; max-width: 1160px; padding: 20px 24px 170px; }.how-heading { position: sticky; top: 130px; align-self: start; }.how h2, .resources h2, .faq h2 { font-size: clamp(44px, 6vw, 72px); letter-spacing: -.055em; line-height: 1; margin: 0; }.steps { list-style: none; margin: 0; padding: 0; }.steps li { border-top: 1px solid rgba(0, 0, 0, .1); display: grid; gap: 24px; grid-template-columns: 54px 1fr; padding: 34px 0 46px; }.steps li > span { color: var(--blue); font-size: 13px; font-weight: 700; }.steps h3 { font-size: 30px; letter-spacing: -.035em; margin: 0 0 12px; }.steps p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }
.resources { margin: 0 auto; max-width: 1180px; padding: 0 24px 160px; }.resources-heading { max-width: 800px; }.resources-heading > p:last-child { color: var(--muted); font-size: 20px; line-height: 1.5; }.resource-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 54px; }.resource-card { background: white; border: 1px solid rgba(0, 0, 0, .05); border-radius: 28px; min-height: 330px; padding: 30px; text-decoration: none; transition: box-shadow .3s, transform .3s; }.resource-card:hover { box-shadow: 0 24px 55px rgba(0, 0, 0, .09); transform: translateY(-8px); }.resource-card > span { color: var(--blue); font-size: 13px; font-weight: 700; }.resource-card h3 { font-size: 30px; letter-spacing: -.04em; line-height: 1.06; margin: 48px 0 14px; }.resource-card p { color: var(--muted); line-height: 1.5; }.resource-card b { color: var(--blue); display: inline-block; font-size: 14px; margin-top: 16px; }
.faq { display: grid; gap: 80px; grid-template-columns: .7fr 1.3fr; margin: 0 auto; max-width: 1160px; padding: 0 24px 170px; }.faq-heading { align-self: start; position: sticky; top: 130px; }.faq-list details { border-top: 1px solid rgba(0, 0, 0, .11); }.faq-list details:last-child { border-bottom: 1px solid rgba(0, 0, 0, .11); }.faq-list summary { cursor: pointer; font-size: 22px; font-weight: 650; letter-spacing: -.025em; list-style: none; padding: 28px 46px 28px 0; position: relative; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--blue); font-size: 28px; font-weight: 300; position: absolute; right: 8px; top: 23px; transition: transform .25s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { color: var(--muted); font-size: 17px; line-height: 1.65; margin: -6px 48px 30px 0; }
.final-cta { background: white; border-radius: 42px; margin: 0 auto 140px; max-width: 1132px; padding: 110px 24px; text-align: center; }.final-cta img { margin-bottom: 34px; }.final-cta .button { margin-top: 34px; }
footer { border-top: 1px solid rgba(0, 0, 0, .07); color: #6e6e73; padding: 42px 24px; }.footer-inner { margin: 0 auto; max-width: 1080px; }.footer-brand { align-items: center; color: var(--ink); display: flex; gap: 10px; }.footer-inner > p { font-size: 13px; }.footer-inner nav { display: flex; gap: 22px; margin: 28px 0; }.footer-inner nav a { font-size: 13px; text-decoration: none; }.footer-inner small { font-size: 12px; }

.resource-hero { background: linear-gradient(180deg, #f5f5f7, #fff); padding: 150px 24px 100px; text-align: center; }.resource-hero .breadcrumb { color: var(--blue); font-size: 14px; font-weight: 650; text-decoration: none; }.resource-hero h1 { font-size: clamp(52px, 8vw, 92px); letter-spacing: -.065em; line-height: .94; margin: 24px auto; max-width: 1050px; }.resource-hero > p { color: var(--muted); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; margin: 0 auto; max-width: 780px; }.article-layout { display: grid; gap: 70px; grid-template-columns: 240px minmax(0, 760px); justify-content: center; margin: 0 auto; max-width: 1160px; padding: 90px 24px 150px; }.article-toc { align-self: start; position: sticky; top: 110px; }.article-toc strong { display: block; font-size: 13px; margin-bottom: 12px; }.article-toc a { color: var(--muted); display: block; font-size: 14px; line-height: 1.4; padding: 8px 0; text-decoration: none; }.article-toc a:hover { color: var(--blue); }.article-content { min-width: 0; }.article-content .answer-box { background: #eef7ff; border-radius: 24px; font-size: 19px; line-height: 1.55; margin-bottom: 58px; padding: 28px; }.article-content h2 { font-size: clamp(34px, 5vw, 50px); letter-spacing: -.045em; line-height: 1.05; margin: 70px 0 20px; scroll-margin-top: 100px; }.article-content h3 { font-size: 25px; letter-spacing: -.025em; margin: 40px 0 12px; }.article-content p, .article-content li { color: #4b4b50; font-size: 18px; line-height: 1.75; }.article-content ul, .article-content ol { padding-left: 24px; }.article-content li { margin: 8px 0; }.article-callout { background: #0b101a; border-radius: 28px; color: white; margin-top: 70px; padding: 42px; }.article-callout h2 { margin-top: 0; }.article-callout p { color: #aab2bf; }.article-callout .button { margin-top: 12px; }.related-guides { border-top: 1px solid rgba(0,0,0,.08); margin-top: 70px; padding-top: 34px; }.related-guides a { color: var(--blue); display: block; font-size: 17px; margin: 12px 0; }.resource-footer { margin-top: 0; }

.reveal { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }.reveal-delay-1 { animation-delay: .08s; }.reveal-delay-2 { animation-delay: .16s; }.reveal-delay-3 { animation-delay: .24s; }
.js .scroll-reveal { opacity: 0; transform: translateY(36px); transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); }.js .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }.js .scroll-reveal[data-stagger="1"] { transition-delay: .08s; }.js .scroll-reveal[data-stagger="2"] { transition-delay: .16s; }.js .scroll-reveal[data-stagger="3"] { transition-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); } from { box-shadow: 0 0 0 0 rgba(52, 199, 89, .45); } }
@keyframes wave { 0%, 100% { height: 7px; } 50% { height: 26px; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes flow-dot { 50% { opacity: 1; transform: translateX(2px); } }

@media (max-width: 820px) {
  .menu-toggle { display: block; margin-left: auto; margin-right: 8px; }.nav-links { background: rgba(250, 250, 252, .97); border-bottom: 1px solid rgba(0, 0, 0, .06); display: flex; flex-direction: column; gap: 0; left: 0; opacity: 0; padding: 8px 24px 20px; pointer-events: none; position: absolute; right: 0; top: 62px; transform: translateY(-12px); transition: opacity .25s, transform .25s; }.nav-links a { font-size: 17px; padding: 13px 0; }.nav-wrap.menu-open .nav-links { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .hero { min-height: auto; padding-top: 130px; }
  .product-stage { margin-top: 56px; }
  .browser-frame { border-radius: 18px; }
  .app-preview { grid-template-columns: 1fr; min-height: 430px; }.script-rail { display: none; }.prompt-view { padding: 28px; }
  .record-story { border-radius: 32px; gap: 54px; grid-template-columns: 1fr; margin-left: 20px; margin-right: 20px; padding: 64px 44px; }
  .bento { grid-template-columns: 1fr; }.card { min-height: 570px; }
  .how, .faq { gap: 48px; grid-template-columns: 1fr; }.how-heading, .faq-heading { position: static; }.resource-grid { grid-template-columns: 1fr; }.resource-card { min-height: 270px; }
  .final-cta { border-radius: 0; margin-bottom: 80px; }
  .article-layout { gap: 30px; grid-template-columns: 1fr; }.article-toc { position: static; }.article-toc a { display: inline-block; margin-right: 16px; }.resource-hero { padding-top: 125px; }
}

@media (max-width: 520px) {
  .nav { height: 58px; padding: 0 16px; }.brand span { display: none; }.nav-cta { padding: 9px 13px; }
  .hero { padding-left: 18px; padding-right: 18px; }.hero h1 { font-size: 56px; }.hero h1 .hero-promise { font-size: .68em; line-height: .98; }.hero-copy { font-size: 19px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-proof { gap: 10px 16px; }.hero-proof span { font-size: 12px; }.button { width: 100%; }
  .browser-bar { grid-template-columns: 50px 1fr 30px; padding: 0 12px; }.address { padding: 7px 8px; }.prompt-view p { font-size: 31px; }.preview-status { gap: 5px; }.live-pill { display: none; }.capture-note { gap: 9px; }
  .record-story { border-radius: 28px; margin: 70px 12px 20px; padding: 52px 24px; }.record-story h2 { font-size: 46px; }.record-flow { gap: 10px; grid-template-columns: 1fr; }.flow-card { min-height: 210px; }.flow-connector { transform: rotate(90deg); }.lens { margin-top: 18px; }.mini-script { margin-bottom: 30px; margin-top: 26px; }
  .statement, .languages { padding: 110px 20px; }.statement h2, .privacy h2, .languages h2, .final-cta h2 { font-size: 47px; }
  .bento { padding: 0 12px 110px; }.card { border-radius: 28px; min-height: 530px; }.card-copy { padding: 34px 28px 0; }.word-demo { bottom: 60px; left: 28px; }.mode-stack, .timeline { left: 20px; right: 20px; }.camera-ui > p { left: 28px; right: 28px; }
  .privacy { padding: 120px 20px; }.final-cta { padding: 90px 20px; }
  .how, .faq, .resources { padding-left: 20px; padding-right: 20px; }.resource-card h3 { margin-top: 34px; }.pointer-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }