/* igggy.ai — page styles. Tokens live in tokens.css only. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,canvas{max-width:100%}
a{color:inherit}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* header */
header.site{padding:26px 0 0}
header.site .wrap{display:flex;align-items:center;gap:16px}
.wordmark{font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none}
.wordmark i{font-style:normal;color:var(--ember-live);font-size:.72em}
header.site .spacer{flex:1}

/* CTA — the app's record-capsule grammar: ink capsule, ember dot */
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font:15px/1 var(--sans);font-weight:600;border:0;border-radius:99px;padding:14px 26px;cursor:pointer;text-decoration:none}
.cta .d{width:7px;height:7px;border-radius:50%;background:var(--ember-live);flex:none}
.cta.small{font-size:13px;padding:10px 18px}
.cta:focus-visible{outline:2px solid var(--ember-live);outline-offset:2px}

/* hero */
.hero{padding:88px 0 40px;text-align:center}
.hero .eyebrow{font-size:13.5px;font-weight:600;color:var(--ember-text);margin:0 0 14px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(44px,7vw,64px);line-height:1.06;margin:0 auto 18px;max-width:14ch;text-wrap:balance}
.hero .sub{font-size:17.5px;color:var(--ink-2);max-width:56ch;margin:0 auto 30px}
.hero .mech{font-size:13px;color:var(--ink-3);margin:16px auto 0;max-width:60ch}
.hero .mech .mono{font-family:var(--mono);font-size:12px}
.wavestage{max-width:720px;margin:44px auto 0}
.wavestage canvas{width:100%;height:110px;display:block}

/* section scaffolding */
section.beat{padding:64px 0}
section.beat .wrap{max-width:760px}
.beat h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.beat h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,34px);line-height:1.14;margin:0 0 14px;text-wrap:balance}
.beat .sub{font-size:16.5px;color:var(--ink-2);max-width:58ch;margin:0 0 12px}
.beat .quiet{font-size:13.5px;color:var(--ink-3);max-width:58ch}
.beat ol.steps{margin:0 0 18px;padding-left:22px;font-size:15.5px;color:var(--ink-2)}
.beat ol.steps li{margin-bottom:7px}
.stage{margin-top:30px}

/* ——— beat 2: the animated menu-bar mini-preview ——— */
.screen{background:linear-gradient(165deg,#ECECEC,#E0E0E0);border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;height:340px}
.menubar{display:flex;align-items:center;gap:16px;background:rgba(250,250,250,.92);border-bottom:1px solid var(--hairline-2);padding:6px 14px;font-size:12px;color:var(--ink-2)}
.menubar .appname{font-weight:700}
.menubar .mspacer{flex:1}
.menubar .clock{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.mb-mark{width:22px;height:14px;border-radius:4px;padding:1px 2px}
.mb-markwrap{display:flex;align-items:center;border-radius:5px;padding:2px 3px}
.screen.s1 .mb-markwrap,.screen.s2 .mb-markwrap{background:rgba(var(--ink-rgb),.12)}

/* popover */
.popover{position:absolute;top:38px;right:34px;width:230px;background:rgba(255,255,255,.97);border:1px solid rgba(var(--ink-rgb),.09);border-radius:12px;box-shadow:var(--shadow-hud);padding:14px 16px;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.screen.s1 .popover{opacity:1;transform:none}
.popover .line{font-size:13px;color:var(--ink);margin-bottom:10px}
.popover .rec{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;border-radius:99px;padding:7px 14px}
.popover .rec .d{width:6px;height:6px;border-radius:50%;background:var(--ember-live)}

/* floating HUD */
.hud{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(.96);width:330px;background:rgba(255,255,255,.94);border:1px solid rgba(var(--ink-rgb),.09);border-radius:20px;box-shadow:var(--shadow-hud);padding:12px 14px 10px;opacity:0;transition:opacity .25s ease,transform .25s ease}
.screen.s2 .hud{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hud .row{display:flex;align-items:center;gap:9px}
.hud .lbl{font-size:12.5px;font-weight:600}
.hud .timer{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.hud .hspacer{flex:1}
.hud .stop{width:24px;height:24px;border-radius:50%;border:1px solid var(--hairline);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ember-text)}
.hud canvas{width:100%;height:38px;display:block;margin-top:8px}
.hud .reddot{width:8px;height:8px;border-radius:50%;background:var(--ember-live);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}

/* the note the preview morphs into */
.minicard{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) translateY(12px);width:340px;background:#fff;border:1px solid rgba(var(--ink-rgb),.09);border-radius:14px;box-shadow:var(--shadow-hud);padding:16px 20px;opacity:0;transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.18,.35,1)}
.screen.s3 .minicard{opacity:1;transform:translate(-50%,-50%)}
.minicard .t{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 2px}
.minicard .m{font-size:10.5px;color:var(--ink-3);margin-bottom:10px}
.minicard h5{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 5px}
.minicard ul{margin:0;padding-left:15px;font-size:11.5px;color:var(--ink-2)}
.minicard li{margin-bottom:3px}

/* fake cursor */
.cursor{position:absolute;width:15px;height:15px;z-index:5;transition:left 1s cubic-bezier(.4,.1,.3,1),top 1s cubic-bezier(.4,.1,.3,1);left:34%;top:70%}
.cursor svg{display:block;filter:drop-shadow(0 1px 2px rgba(var(--ink-rgb),.35))}
.cursor.click{animation:click .28s ease}
@keyframes click{40%{transform:scale(.78)}}

.stagecap{font-size:12.5px;color:var(--ink-3);margin-top:12px;max-width:66ch}

/* ——— beat 3: two-lane diagram ——— */
.lanes{display:grid;gap:12px}
.lane{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:16px 18px;flex-wrap:wrap}
.lane .who{flex:none;width:86px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lane .node{font-family:var(--mono);font-size:12px;color:var(--ink-2);border:1px solid var(--hairline);border-radius:8px;padding:6px 11px;background:var(--paper);white-space:nowrap}
.lane .arrow{color:var(--ink-3);font-size:12px}
.lane.theirs .node{color:var(--ink-3);border-style:dashed}
.lane.ours .who{color:var(--ember-text)}
.lane .node.mac{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.lane .node canvas{width:18px;height:11px}

/* ——— beat 4: stop→note morph ——— */
.morphstage{background:linear-gradient(160deg,#EFEFEF,#E6E6E6);border-radius:14px;min-height:400px;display:flex;align-items:center;justify-content:center;padding:32px;position:relative}
.morph{background:rgba(255,255,255,.96);border:1px solid rgba(var(--ink-rgb),.09);box-shadow:var(--shadow-hud);overflow:hidden;width:300px;height:60px;border-radius:30px;transition:width .55s cubic-bezier(.3,1.18,.35,1),height .55s cubic-bezier(.3,1.18,.35,1),border-radius .55s cubic-bezier(.3,1.18,.35,1)}
.morph.note{width:min(520px,86vw);height:380px;border-radius:16px}
.morph .pillrow{display:flex;align-items:center;gap:12px;height:60px;padding:0 16px;transition:opacity .22s ease}
.morph.note .pillrow{opacity:0;pointer-events:none;height:0;padding:0;overflow:hidden}
.morph .reddot{width:9px;height:9px;border-radius:50%;background:var(--ember-live);animation:pulse 1.6s ease-in-out infinite;flex:none}
.morph time{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.morph .stopbtn{margin-left:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--hairline);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;color:var(--ember-text)}
.morph .stopbtn:focus-visible{outline:2px solid var(--ember-live);outline-offset:1px}
.morph canvas{width:140px;height:30px;flex:1}
.morph .notebody{opacity:0;padding:24px 28px;transition:opacity .3s ease .18s}
.morph.note .notebody{opacity:1}
.morph .ntitle{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 0 5px;transform:translateY(10px);opacity:0;transition:all .4s cubic-bezier(.3,1.18,.35,1) .12s}
.morph.note .ntitle{transform:none;opacity:1}
.morph .nmeta{font-size:12px;color:var(--ink-3);margin-bottom:16px;transform:translateY(8px);opacity:0;transition:all .4s ease .2s}
.morph.note .nmeta{transform:none;opacity:1}
.morph .sect{transform:translateY(10px);opacity:0;transition:all .42s cubic-bezier(.3,1.18,.35,1)}
.morph.note .sect{transform:none;opacity:1}
.morph.note .sect:nth-of-type(3){transition-delay:.26s}
.morph.note .sect:nth-of-type(4){transition-delay:.34s}
.morph.note .sect:nth-of-type(5){transition-delay:.42s}
.sect h5{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.sect ul{margin:0 0 16px;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.sect li{margin-bottom:4px}
.sect .tq{color:var(--ink-3);font-size:13px}
.replay{position:absolute;bottom:14px;right:16px;font:12px/1 var(--sans);font-weight:600;color:var(--ember-text);background:rgba(255,255,255,.85);border:1px solid var(--hairline);border-radius:99px;padding:7px 14px;cursor:pointer}
.replay:hover{border-color:var(--ember-live)}
.samplecap{font-size:11.5px;color:var(--ink-3);position:absolute;bottom:16px;left:18px}

/* ——— beat 5: file footer mock ——— */
.filecard{background:var(--card);border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}
.filecard .body{padding:20px 24px 8px}
.filecard .t{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 3px}
.filecard .m{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.filecard .foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--hairline-2);padding:12px 24px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.filecard .foot .path{font-family:var(--mono);font-size:11.5px}
.filecard .ghost{margin-left:auto;font:12px/1 var(--sans);font-weight:600;color:var(--ember-text);background:none;border:1px solid var(--hairline);border-radius:99px;padding:6px 12px}

/* ——— beat 6: ask ——— */
.askcard{background:var(--card);border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-card);padding:24px 28px}
.askrow{display:flex;gap:10px;margin-bottom:18px}
.askfield{flex:1;border:1px solid var(--hairline);border-radius:9px;padding:10px 14px;font-size:14px;color:var(--ink);background:#fff}
.askgo{font:13px/1 var(--sans);font-weight:600;color:#fff;background:var(--ink);border:0;border-radius:9px;padding:0 18px;cursor:pointer}
.fetchtrack{position:relative;height:26px;margin:18px 2px;background-image:radial-gradient(circle,rgba(var(--ink-rgb),.16) 1.4px,transparent 1.6px);background-size:12px 12px;background-position:0 center;background-repeat:repeat-x;display:none}
.fetchtrack.on{display:block}
.fetchdot{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--ember-live)}
.fetchtrack.on .fetchdot{animation:fetch 1.7s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes fetch{0%{left:2%;transform:scale(1)}38%{left:92%;transform:scale(1)}46%{left:88%;transform:scale(1.35)}54%{left:92%;transform:scale(1)}100%{left:2%;transform:scale(1)}}
.fetchlbl{font-size:12.5px;color:var(--ink-3);display:none}
.answer{display:none}
.answer.on{display:block;animation:arrive .45s cubic-bezier(.3,1.18,.35,1)}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.answer p{font-size:14.5px;color:var(--ink);max-width:58ch;margin:0 0 14px}
.cite{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);border:1px solid var(--hairline);border-radius:8px;padding:6px 11px;margin:0 8px 8px 0;background:#fff}
.cite b{font-weight:600}

/* ——— beat 7: three doors ——— */
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px}
.use{border:1px solid var(--hairline);border-radius:14px;padding:20px;background:var(--card)}
.use b{display:block;font-size:15px;margin-bottom:7px}
.use p{font-size:13.5px;color:var(--ink-2);margin:0}

/* ——— close + footer ——— */
.close-beat{text-align:center;padding-bottom:96px}
.close-beat .sub{margin:0 auto 28px}
.close-beat .mech{font-size:13px;color:var(--ink-3);margin:18px auto 0;max-width:52ch}
footer.site{border-top:1px solid var(--hairline-2);padding:26px 0 48px}
footer.site .wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;font-size:12.5px;color:var(--ink-3)}
footer.site a{color:var(--ink-3)}

@media(max-width:640px){
  .hero{padding:56px 0 24px}
  section.beat{padding:44px 0}
  .screen{height:300px}
  .hud{width:280px}
  .minicard{width:290px}
  .lane .who{width:100%}
  .menubar .mi{display:none}
  .popover{right:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor,.morph,.morph *,.popover,.hud,.minicard,.fetchtrack.on .fetchdot,.answer.on,.reddot,.morph .reddot{animation:none!important;transition:none!important}
}