:root { color-scheme:light; --ink:#151713; --paper:#fff; --acid:#c8ff38; --muted:#62655c; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
a { color:inherit; }
footer { max-width:1320px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 32px; }
.hero { text-align:center; padding:24px 24px 36px; }
h1 { margin:0; font-size:0; }
.wordmark { position:relative; display:block; width:270px; height:180px; margin:0 auto 8px; }
.wordmark img,.wordmark canvas { display:block; width:100%; height:100%; object-fit:contain; }
.wordmark canvas { position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; }
.stage { position:relative; max-width:1020px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:60px; }
.margin-note { text-align:right; padding-bottom:45px; }
.margin-note,.feature-note { opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .45s ease,transform .65s ease,visibility 0s .45s; }
.feature-note:not([aria-hidden]),.caption-visible { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.margin-note p { font-size:24px; line-height:1.15; font-weight:750; margin:0; }
.margin-note em { font-family:Georgia,serif; font-weight:400; }
.margin-note small { display:block; max-width:250px; margin:14px 0 0 auto; font-size:10px; line-height:1.6; font-weight:400; color:var(--muted); }
.founder-story .ink-arrow { visibility:hidden; }
.ink-arrow { display:block; font-size:52px; line-height:1; margin:4px 5px 0 0; }
.caption-visible .ink-arrow { animation:point 2.4s ease-in-out infinite; }
.motion-paused .ink-arrow { animation-play-state:paused; }
@keyframes point { 0%,100% { transform:translate(0,0); } 50% { transform:translate(5px,5px); } }
.demo { margin:0; min-width:0; }
.phone { height:min(58svh,calc(100svh - 400px),570px); aspect-ratio:1284/2778; box-sizing:content-box; padding:7px; background:#10110f; border:2px solid #151713; outline:1px solid #aaa; outline-offset:-4px; border-radius:32px; box-shadow:7px 9px 0 #e6e8e1; }
.screen-deck { position:relative; width:100%; height:100%; overflow:hidden; border-radius:23px; background:#090a09; touch-action:pan-x; }
.shot { position:absolute; inset:0; }
.shot img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
[hidden] { display:none!important; }
.playback { display:flex; justify-content:center; align-items:center; gap:3px; height:42px; margin-top:3px; }
button { display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
button:hover { background:#eef0e9; }
.feature-note { text-align:left; padding-bottom:45px; max-width:230px; }
.feature-note>span { font:10px ui-monospace,monospace; }
.feature-note p { font-size:29px; line-height:1.1; font-weight:750; min-height:64px; margin:14px 0; }
#feature-count { color:var(--muted); }
.conversion { margin-top:10px; }
.conversion>p { font-size:16px; line-height:1.45; margin:0 0 15px; }
.conversion strong { font-weight:400; }
.download { display:inline-flex; align-items:center; gap:12px; min-height:54px; padding:0 24px; border:2px solid var(--ink); border-radius:7px; box-shadow:4px 4px 0 var(--ink); background:var(--acid); font-size:15px; font-weight:800; text-decoration:none; transition:transform .15s,box-shadow .15s; }
.download:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
footer { padding-block:20px; font-size:10px; color:var(--muted); }
footer nav { display:flex; gap:22px; }
.skip { position:absolute; top:-70px; padding:12px; background:var(--acid); z-index:10; }
.skip:focus { top:0; }
a:focus-visible,button:focus-visible,.screen-deck:focus-visible { outline:2px solid #507000; outline-offset:5px; }
@media(min-width:1600px) { .stage { max-width:1200px; gap:100px; } .phone { height:min(56svh,calc(100svh - 520px),610px); } .wordmark { width:300px; height:200px; } }
@media(max-width:760px) {
  footer { padding:14px 18px; }
  .hero { padding:18px 18px 28px; }
  .wordmark { width:210px; height:140px; margin-bottom:8px; }
  .stage { display:grid; grid-template-columns:1fr; gap:0; }
  .demo { grid-area:1/1; justify-self:center; }
  .margin-note,.feature-note { grid-area:2/1; height:90px; padding:0; margin:0; align-self:center; justify-self:center; }
  .margin-note small { margin:5px auto 0; font-size:9px; line-height:1.4; }
  .founder-story .ink-arrow { display:none; }
  .margin-note { display:flex; align-items:center; gap:12px; text-align:center; }
  .margin-note p { font-size:15px; }
  .margin-note br { display:none; }
  .margin-note em::before { content:' '; }
  .ink-arrow { font-size:26px; margin:0; }
  .phone { height:min(46svh,430px); padding:6px; border-radius:29px; }
  .screen-deck { border-radius:21px; }
  .feature-note { max-width:none; text-align:center; display:flex; align-items:center; justify-content:center; gap:12px; }
  .feature-note>span:first-child { display:none; }
  .feature-note p { min-height:0; margin:0; font-size:15px; }
  .feature-note>span { font-size:9px; }
  .playback { height:36px; margin-top:5px; }
  .conversion { margin-top:12px; }
  .conversion>p { font-size:14px; max-width:280px; margin:0 auto 13px; }
}
@media(max-height:740px) {
  .wordmark { width:165px; height:110px; }
  .phone { height:43svh; }
  .conversion { margin-top:10px; }
}
@media(max-height:620px) and (max-width:760px) {
  .wordmark { width:135px; height:90px; }
  .feature-note,.margin-note { height:80px; }
  .conversion { margin-top:4px; }
}
@media(prefers-reduced-motion:reduce) { .download,.margin-note,.feature-note { transition:none; } .ink-arrow { animation:none!important; } }