@charset "UTF-8";
:root {
  --yellow:#ffd500; --ink:#161618; --muted:#66666e; --bg:#f7f7f8; --line:#e0e0e4;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg); color-scheme:light; font-synthesis:none;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:104px }
body { margin:0 }
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit; cursor:pointer }
a,button { touch-action:manipulation; -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #806c00; outline-offset:5px }
::selection { background:var(--yellow); color:var(--ink) }
h1,h2,h3,p { margin-top:0 }
h1,h2,h3 { font-weight:620 }
h1 { font-size:clamp(48px,6.1vw,78px); line-height:1.05; letter-spacing:-.055em; text-wrap:balance }
h2 { font-size:34px; line-height:1.2; letter-spacing:-.035em; margin-bottom:24px }
h3 { font-size:16px; line-height:1.4; letter-spacing:-.015em; margin-bottom:7px }
p { color:var(--muted); line-height:1.65 }
img { display:block; max-width:100% }
.container { width:calc(100% - 80px); max-width:1080px; margin-inline:auto }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip { position:fixed; top:-100px; left:20px; padding:14px 18px; background:var(--yellow); z-index:100 }
.skip:focus { top:12px }
.arrow { width:18px; height:18px; stroke:currentColor; stroke-width:1.5; flex-shrink:0 }
.text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:550 }
.text-link:hover { text-decoration:underline; text-underline-offset:5px }
.site-header { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:rgba(247,247,248,.97); backdrop-filter:blur(12px) }
.nav-wrap { height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:25px; font-weight:700; letter-spacing:-1px; flex-shrink:0 }
.brand img { width:40px; height:40px; border-radius:10px }
.nav { display:flex; align-items:center; gap:27px; font-size:12px; font-weight:500 }
.nav a { padding-block:12px }
.nav a:hover { text-decoration:underline; text-underline-offset:5px }
.menu-toggle { display:none; padding:10px; border:1px solid var(--line); background:#fff; border-radius:10px }
.menu-toggle svg { display:block; width:22px; height:22px; stroke:var(--ink); stroke-width:1.5 }
.hero { padding-block:61px 48px; text-align:center }
.hero h1 { max-width:none; margin:0 0 24px }
.hero-intro { font-size:17px; max-width:650px; margin:0 auto 13px; text-wrap:balance }
.brand-message { font-size:13px; margin-bottom:25px; color:var(--muted) }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap }
.availability { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted) }
.availability:before { content:""; width:6px; height:6px; background:var(--yellow); border-radius:50%; margin-right:3px }
.platform { color:var(--muted) }
.strategy-section { padding-bottom:72px }
.strategy-heading { display:flex; align-items:baseline; justify-content:space-between; gap:25px; margin-bottom:23px }
.strategy-heading h2 { font-size:27px; margin-bottom:0; letter-spacing:-.03em }
.strategy-heading>p { font-size:12px; margin-bottom:0 }
.demo { background:#fff; border:1px solid var(--line); border-radius:25px; padding:22px 35px 24px }
.demo-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:11px; color:var(--muted); margin-bottom:23px }
.demo-topline span:last-child { font-size:10px; color:var(--muted) }
.demo-label { font-size:14px; font-weight:550; text-align:center; margin-bottom:5px }
.demo-value { display:block; font-size:100px; line-height:1.13; font-weight:630; letter-spacing:-.065em; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap }
.benchmark-label { font-size:13px; text-align:center; margin:9px 0 26px }
.strategy-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:#f0f0f2; padding:4px; border-radius:11px; max-width:506px; margin-inline:auto }
.strategy-controls button { border:0; min-height:45px; padding:11px 10px; border-radius:8px; background:transparent; font-size:12px; font-weight:550; transition:background .14s ease }
.strategy-controls button[aria-pressed="true"] { background:var(--yellow) }
.strategy-controls button:hover:not([aria-pressed="true"]) { background:#e6e6e8 }
.strategy-description { font-size:13px; text-align:center; margin:17px 0 0; min-height:26px; display:flex; align-items:center; justify-content:center }
.strategy-note { max-width:870px; margin:22px auto 0; text-align:center }
.strategy-note p { font-size:12px; line-height:1.7; margin-bottom:7px }
.strategy-note p:last-child { font-size:11px; color:var(--muted); margin-bottom:0 }
.strategy-note strong { font-weight:550; color:#55555c }
.screens-section { border-top:1px solid var(--line); padding-block:64px 63px }
.screens-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:25px }
.screens-heading h2 { margin-bottom:7px }
.screens-heading p { font-size:13px; margin-bottom:0 }
.screen-arrows { display:flex; gap:9px; flex-shrink:0 }
.screen-arrow { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid #d7d7dd; background:#fff; transition:background .15s ease }
.screen-arrow span { font-size:29px; line-height:1; position:relative; top:-2px }
.screen-arrow:hover:not(:disabled) { background:var(--yellow); border-color:var(--yellow) }
.screen-arrow:disabled { opacity:.3; cursor:default }
.screens-track { display:flex; gap:28px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:8px 3px 28px }
.screens-track::-webkit-scrollbar { display:none }
.screens-track:focus-visible { outline:3px solid #806c00; outline-offset:-2px; border-radius:8px }
.screen-tile { flex:0 0 280px; margin:0; min-width:0; scroll-snap-align:start }
.phone-frame { position:relative; padding:7px; background:#161618; border:1px solid #3a3a3e; border-radius:40px; overflow:hidden; box-shadow:0 17px 33px rgba(10,10,12,.16),0 2px 6px rgba(10,10,12,.09) }
.phone-frame::before { content:""; position:absolute; z-index:1; top:7px; left:50%; transform:translateX(-50%); width:34%; height:19px; background:#161618; border-radius:0 0 14px 14px; pointer-events:none }
.phone-frame img { display:block; width:100%; height:auto; border-radius:32px; background:#f7f7f8 }
.screen-tile figcaption { padding:19px 4px 0 }
.screen-index { display:block; font-size:10px; letter-spacing:.075em; color:#8c8c91; margin-bottom:9px; font-variant-numeric:tabular-nums }
.screen-tile h3 { font-size:16px; margin-bottom:6px }
.screen-tile figcaption p { font-size:12px; line-height:1.6; margin:0 }
.screens-note { font-size:11px; margin:0; color:#85858b }
.product-section { padding-block:66px 72px; border-top:1px solid var(--line) }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:25px; margin-bottom:35px }
.section-heading h2 { margin-bottom:0 }
.section-heading>p { font-size:12px; margin-bottom:0 }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px }
.product-grid>* { min-width:0 }
.steps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:27px }
.steps li { display:flex; align-items:start; gap:20px }
.step-number { font-size:11px; color:#919197; padding-top:4px; min-width:18px; font-variant-numeric:tabular-nums }
.steps p { font-size:14px; margin-bottom:0 }
.features { margin:0; border-left:1px solid var(--line); padding-left:36px }
.features>div { padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid var(--line) }
.features>div:last-child { padding-bottom:0; margin-bottom:0; border-bottom:0 }
.features dt { font-size:16px; font-weight:600; letter-spacing:-.02em; margin-bottom:9px }
.features dd { font-size:14px; line-height:1.7; color:var(--muted); margin:0 }
.pro-section { border-top:1px solid var(--line); padding-block:66px 72px }
.pro-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:85px }
.pro-intro h2 { margin-bottom:18px }
.pro-intro>p { font-size:15px; max-width:350px; margin-bottom:18px }
.pro-intro .pro-clarification { font-size:11px; color:var(--muted); max-width:300px }
.pro-list { list-style:none; padding:0; margin:0 }
.pro-list li { font-size:14px; line-height:1.6; padding:10px 0 10px 23px; border-bottom:1px solid var(--line); position:relative }
.pro-list li:first-child { padding-top:0 }
.pro-list li:before { content:"✓"; position:absolute; left:0; color:#8b7700; font-size:12px }
.pro-list li:last-child { border-bottom:0 }
.pro-note { font-size:11px; margin:18px 0 0; color:var(--muted) }
.faq-section { display:grid; grid-template-columns:.45fr 1.55fr; gap:80px; padding-block:62px 70px; border-top:1px solid var(--line) }
.faq-section h2 { margin-bottom:0 }
.faq-list { border-top:1px solid var(--line) }
details { border-bottom:1px solid var(--line) }
summary { cursor:pointer; list-style:none; position:relative; padding:19px 30px 19px 0; font-size:14px; line-height:1.5; font-weight:550 }
summary::-webkit-details-marker { display:none }
summary:after { content:"+"; position:absolute; right:2px; top:18px; font-size:20px; font-weight:400; line-height:1.1; color:var(--muted) }
details[open] summary:after { content:"−" }
details p { font-size:12px; line-height:1.8; padding-right:25px; margin-bottom:21px }
.support { display:flex; align-items:center; justify-content:space-between; gap:25px; padding-block:30px 47px }
.support h2 { font-size:22px; margin-bottom:0 }
.support .text-link { font-size:15px }
.site-footer { padding-block:30px 25px; border-top:1px solid var(--line) }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:25px }
.footer-top .brand { font-size:21px }
.footer-top .brand img { width:33px; height:33px; border-radius:8px }
.footer-links { display:flex; flex-wrap:wrap; gap:24px; font-size:11px; color:var(--muted) }
.footer-links a:hover { text-decoration:underline; text-underline-offset:4px }
.footer-bottom { display:flex; align-items:start; justify-content:space-between; gap:30px; color:var(--muted); font-size:10px; line-height:1.7 }
.footer-bottom p { max-width:700px; font-size:10px; color:var(--muted); margin-bottom:0 }
.footer-bottom>span { white-space:nowrap }
.review-link { font-size:10px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; display:inline-block; margin-top:12px }
.legal { max-width:810px; margin-inline:auto; padding-block:60px 90px }
.legal .back-link { display:inline-block; margin-bottom:37px; font-size:12px; color:var(--muted) }
.legal h1 { font-size:44px; margin-bottom:24px; text-wrap:initial }
.legal h2 { font-size:22px; line-height:1.4; margin-top:38px; margin-bottom:18px; letter-spacing:-.02em }
.legal h3 { font-size:17px; margin-top:25px }
.legal p,.legal li { font-size:14px; line-height:1.8; color:#626268 }
.legal strong { color:#343439; font-weight:600 }
.legal a { text-decoration:underline; text-underline-offset:3px }
.legal ul { padding-left:22px }
.legal hr { border:0; border-top:1px solid var(--line); margin-block:34px }
.eyebrow { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:23px }
.review-banner { border:1px solid #e9d986; background:#fff7d1; padding:18px 22px; border-radius:12px; color:#605520; font-size:12px; line-height:1.7; margin-bottom:33px }
.review-banner strong { color:#463d16 }
.confirmation { padding:21px 23px; border:1px solid var(--line); background:#fff; border-radius:12px; margin-bottom:14px }
.confirmation h2 { margin-top:0; font-size:18px }
.confirmation p { margin-bottom:0 }
.confirmation code { font-size:12px; background:#f1f1f2; border-radius:4px; padding:2px 5px }
.review-status { display:inline-block; padding:4px 8px; background:#fff3bb; border-radius:4px; color:#776511; font-size:10px; margin-bottom:10px }
@media(min-width:1500px) { .hero { padding-top:72px } }
@media(max-width:1000px) {
 .container { width:calc(100% - 56px) }
 .nav { gap:20px; font-size:11px }
 .hero h1 { font-size:68px }
 .product-grid,.pro-panel { gap:55px }
 .features { padding-left:28px }
 .faq-section { gap:50px }
}
@media(max-width:850px) {
 .nav-wrap { height:70px }
 .brand { font-size:23px }
 .brand img { width:37px; height:37px }
 .menu-toggle { display:block }
 .nav { display:none; position:absolute; top:70px; left:0; right:0; padding:16px 28px 22px; border-bottom:1px solid var(--line); background:var(--bg); flex-direction:column; align-items:stretch; gap:0 }
 .nav.open { display:flex }
 .nav a { padding:13px 5px; font-size:14px }
 .hero { padding-block:48px 40px }
 .hero h1 { font-size:60px }
 .hero-intro { font-size:16px; max-width:570px }
 .brand-message { font-size:12px }
 .strategy-heading h2 { font-size:25px }
 .strategy-heading>p { font-size:11px }
 .demo-value { font-size:90px }
 .product-grid,.pro-panel { gap:40px }
 .features { padding-left:25px }
 .product-section,.pro-section { padding-block:52px 58px }
 .faq-section { padding-block:52px 58px; gap:35px }
 .section-heading h2,.pro-intro h2,.faq-section h2 { font-size:30px }
 .pro-intro>p { font-size:14px }
}
@media(max-width:600px) {
 html { scroll-padding-top:90px }
 .container { width:calc(100% - 40px) }
 .nav-wrap { height:66px }
 .brand { font-size:23px }
 .brand img { width:36px; height:36px }
 .nav { top:66px; padding-inline:20px }
 .hero { padding-block:42px 36px }
 .hero h1 { font-size:48px; line-height:1.06; letter-spacing:-.055em; margin-bottom:22px }
 .hero-intro { font-size:15px; max-width:390px; margin-bottom:13px; text-wrap:initial }
 .brand-message { max-width:320px; margin:0 auto 22px; font-size:11px; line-height:1.7; text-wrap:balance }
 .hero-actions { gap:14px 22px }
 .availability { font-size:10px }
 .hero-actions .text-link { font-size:11px }
 .strategy-section { padding-bottom:44px }
 .strategy-heading { display:block; text-align:center; margin-bottom:19px }
 .strategy-heading h2 { font-size:23px; letter-spacing:-.035em; margin-bottom:8px }
 .strategy-heading>p { font-size:11px }
 .demo { padding:18px 18px 19px; border-radius:20px }
 .demo-topline { font-size:9px; margin-bottom:25px; gap:15px }
 .demo-topline span:last-child { font-size:8px }
 .demo-label { font-size:13px }
 .demo-value { font-size:76px }
 .benchmark-label { font-size:11px; margin:9px 0 25px }
 .strategy-controls { gap:3px; padding:3px; border-radius:10px }
 .strategy-controls button { font-size:10px; padding-inline:4px; min-height:44px }
 .strategy-description { font-size:10px; margin-top:15px; min-height:33px; line-height:1.65 }
 .strategy-note { text-align:left; margin-top:18px }
 .strategy-note p { font-size:10px }
 .strategy-note p:last-child { font-size:10px }
 .screens-section { padding-block:42px 39px }
 .screens-heading { align-items:center; gap:12px; margin-bottom:17px }
 .screens-heading h2 { font-size:27px; margin-bottom:7px }
 .screens-heading p { font-size:11px }
 .screen-arrow { width:38px; height:38px }
 .screens-track { gap:20px; padding-bottom:24px }
 .screen-tile { flex-basis:242px }
 .screen-tile figcaption { padding-top:16px }
 .screen-tile h3 { font-size:15px }
 .screen-tile figcaption p { font-size:11px }
 .screens-note { font-size:10px }
 .product-section,.pro-section { padding-block:42px 45px }
 .section-heading { display:block; margin-bottom:28px }
 .section-heading h2 { font-size:28px; margin-bottom:9px }
 .section-heading>p { font-size:11px }
 .product-grid,.pro-panel { grid-template-columns:1fr; gap:33px }
 .steps { gap:23px }
 .steps li { gap:17px }
 .step-number { font-size:10px }
 .steps h3 { font-size:15px }
 .steps p { font-size:12px }
 .features { border-left:0; border-top:1px solid var(--line); padding:27px 0 0 }
 .features>div { padding-bottom:20px; margin-bottom:20px; border-bottom:0 }
 .features>div:last-child { margin-bottom:0 }
 .features dt { font-size:15px; margin-bottom:7px }
 .features dd { font-size:12px }
 .pro-intro h2 { font-size:28px; margin-bottom:14px }
 .pro-intro>p { font-size:14px; max-width:none; margin-bottom:13px }
 .pro-intro .pro-clarification { font-size:11px; max-width:none; margin-bottom:0 }
 .pro-list li { font-size:13px; padding-block:12px }
 .pro-note { font-size:10px }
 .faq-section { grid-template-columns:1fr; gap:24px; padding-block:42px 40px }
 .faq-section h2 { font-size:28px }
 summary { font-size:13px; padding-block:18px }
 details p { font-size:12px }
 .support { align-items:flex-start; flex-direction:column; gap:15px; padding-block:10px 35px }
 .support h2 { font-size:21px }
 .support .text-link { font-size:14px }
 .footer-top { align-items:flex-start; flex-direction:column; gap:22px; margin-bottom:22px }
 .footer-top .brand { font-size:20px }
 .footer-links { gap:18px; font-size:10px }
 .footer-bottom { flex-direction:column; gap:14px }
 .legal { padding-block:38px 60px }
 .legal h1 { font-size:35px }
 .legal h2 { font-size:21px }
 .legal p,.legal li { font-size:13px }
 .legal .back-link { margin-bottom:28px }
 .review-banner { padding:16px 18px }
 .confirmation { padding:18px }
}
@media(max-width:370px) {
 .hero h1 { font-size:40px }
 .hero-actions { flex-direction:column; gap:14px }
 .strategy-heading h2 { font-size:21px }
 .demo { padding-inline:14px }
 .demo-value { font-size:65px }
 .demo-topline { font-size:8px }
 .strategy-controls button { font-size:9px }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto }
 *,*:before,*:after { transition:none!important; animation:none!important }
}