:root { --bg:#000; --surface:#1c1c1e; --raised:#2c2c2e; --text:#f5f5f7; --muted:#98989f; --coral:#d97757; --allow:#30d158; --hair:rgba(255,255,255,.08); }
* { box-sizing:border-box } html { color-scheme:dark }
body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--coral); text-decoration:none } a:hover { text-decoration:underline }
.wrap { max-width:960px; margin:0 auto; padding:0 24px }
header.top { display:flex; align-items:center; gap:12px; padding:22px 0 }
header.top img { width:36px; height:36px; border-radius:9px } header.top strong { font-size:17px } header.top nav { margin-left:auto; display:flex; gap:22px; font-size:15px } header.top nav a { color:var(--muted) }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:56px 0 40px }
h1 { font-size:clamp(34px,5vw,54px); line-height:1.08; letter-spacing:-.02em; margin:0 0 18px } h1 em { font-style:normal; color:var(--coral) }
.lede { font-size:19px; color:var(--muted); margin:0 0 28px; max-width:34em }
.cta { display:inline-flex; align-items:center; gap:10px; background:var(--coral); color:#1a0d07; font-weight:600; padding:13px 20px; border-radius:12px } .cta:hover { text-decoration:none; filter:brightness(1.06) }
.cta.quiet { background:var(--raised); color:var(--text); margin-left:10px }
.watch { justify-self:center; width:min(100%,300px); aspect-ratio:416/496; border-radius:56px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6) } .watch img { width:100%; height:100%; display:block }
section { padding:40px 0; border-top:1px solid var(--hair) } h2 { font-size:26px; letter-spacing:-.01em; margin:0 0 8px } .sub { color:var(--muted); margin:0 0 24px; max-width:40em }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.card { background:var(--surface); border-radius:16px; padding:20px; min-width:0 } .card h3 { margin:0 0 6px; font-size:17px } .card p { margin:0; color:var(--muted); font-size:15px }
.card .n { display:inline-block; width:26px; height:26px; border-radius:50%; background:var(--coral); color:#1a0d07; font-weight:700; text-align:center; line-height:26px; margin-bottom:12px; font-size:14px }
.shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px } .shots figure { margin:0; text-align:center; min-width:0 } .shots img { width:100%; max-width:260px; border-radius:44px; box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 0 0 8px #111 } .shots figcaption { color:var(--muted); font-size:14px; margin-top:12px }
code, pre { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:14px } pre { background:var(--raised); padding:14px 16px; border-radius:12px; margin:0; white-space:pre-wrap; word-break:break-word } .say { color:var(--muted); font-size:14px; margin:8px 0 0 }
.price { display:flex; gap:16px; flex-wrap:wrap } .price .card { flex:1 1 240px } .price strong { font-size:28px; display:block; margin-bottom:4px }
footer { padding:36px 0 56px; border-top:1px solid var(--hair); color:var(--muted); font-size:14px } footer p { margin:6px 0 }
.policy h1 { font-size:34px } .policy h2 { margin-top:36px } .policy h3 { margin-top:24px } .policy table { border-collapse:collapse; width:100%; margin:16px 0 } .policy th, .policy td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--hair); vertical-align:top; font-size:15px } .policy th { color:var(--muted); font-weight:600 } .policy blockquote { border-left:3px solid var(--coral); margin:0; padding:2px 16px; color:var(--muted) } .policy hr { border:0; border-top:1px solid var(--hair); margin:32px 0 }
@media (max-width:720px) { .hero { grid-template-columns:1fr; padding-top:24px } .watch { order:-1; width:min(70%,240px) } header.top nav { display:none } .cta.quiet { margin:10px 0 0 } }