.ink {
  --ground: #161617;
  --ground-ink: #f5f5f7;
  --ground-muted: #a1a1a6;
  --hairline: #303033;
  --desk: #232326;
  --menubar: rgba(44,44,46,0.75);
  --window: #262626;
  --window-alt: #2f2f2f;
  --control: #3d3d3f;
  --control-border: rgba(255,255,255,0.16);
  --text: #f2f2f2;
  --text-secondary: #b9b9be;
  --text-tertiary: #9a9aa0;
  --separator: rgba(255,255,255,0.13);
  --menu: #2b2b2b;
  --pill: #2c2c2e;
  --pill-button: rgba(255,255,255,0.14);
  --track: rgba(255,255,255,0.16);
  --accent: #0071e3;
  --accent-text: #5aadff;
  --on-accent: #ffffff;
  --signal: #ff3ea5;
  --graphite: #1c1c1e;
  --on-graphite: #f5f5f7;
  --record: #ff453a;
  --danger-text: #ff6961;
  --success: #5ee07a;
  --warning: #ffb340;
  --warning-text: #ffb340;
  --ring: #ff2d95;
  --ring-black: #000000;
  --ring-white: #ffffff;
  --shadow-float: 0 16px 44px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.18);
}
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --radius-check: 3.5px;
  --radius-item: 5px;
  --radius-control: 6px;
  --radius-box: 8px;
  --radius-menu: 9px;
  --radius-window: 11px;
  --radius-alert: 12px;
  --radius-banner: 16px;
  --radius-pill: 18px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Layout and demo components derived from the supplied Ramble design. */

.lp { font-family: var(--font-sans); background: var(--ground); color: var(--ground-ink); -webkit-font-smoothing: antialiased; min-height: 100vh; }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.wrap { width: 100%; max-width: 1168px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 48px; } }

/* Nav */
.nav { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--ground-ink); text-decoration: none; margin-right: auto; min-height: 44px; }
.navlink { color: var(--ground-muted); text-decoration: none; font-size: 14px; padding: 12px 2px; }
.navlink:hover { color: var(--ground-ink); }

/* Type */
.h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.0; letter-spacing: -.04em; font-weight: 700; margin: 0; }
.lede { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.5; color: var(--ground-muted); margin: 0; max-width: 38em; }
.kicker { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ground-muted); margin: 0; }
.h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; margin: 0; }
.h3 { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -.01em; }
.p { font-size: 15px; line-height: 1.55; color: var(--ground-muted); margin: 0; }
.fine { font-size: 13px; line-height: 1.45; color: var(--ground-muted); margin: 0; }
.mono { font-family: var(--font-mono); }
.sig { color: var(--signal); }

/* Actions */
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent); font: 600 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.cta:hover { filter: brightness(1.08); }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--hairline); background: transparent; color: var(--ground-ink); font: 500 14px/1 var(--font-sans); cursor: pointer; }
.ghost:hover { border-color: var(--ground-muted); }
.cta:focus-visible, .ghost:focus-visible, .inp:focus-visible, .navlink:focus-visible, .brand:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.form { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 500px; }
.inp { flex: 1 1 220px; min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--hairline); background: transparent; color: var(--ground-ink); padding: 0 14px; font: 400 16px/1 var(--font-sans); }
.inp::placeholder { color: var(--ground-muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sections */
.sec { padding-block: 88px; border-top: 1px solid var(--hairline); }
@media (max-width: 719px) { .sec { padding-block: 64px; } }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 56px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-top: .62em; }
.keyl { display: inline-flex; min-width: 1.9em; height: 1.9em; padding: 0 .45em; border-radius: .35em; align-items: center; justify-content: center; background: var(--control); color: var(--text); box-shadow: 0 0 0 .5px var(--control-border), 0 1px 0 var(--control-border); font: 500 1em/1 var(--font-sans); }
.foot { padding: 32px 0 48px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Demo stage: everything inside scales with the stage width (cqw) */
.stage { position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden; border-radius: 16px; background: var(--desk); border: 1px solid var(--hairline); }
.scene { position: absolute; inset: 0; font-size: 1.15cqw; font-family: var(--font-sans); color: var(--text); line-height: 1.35; }
.scene * { box-sizing: border-box; }
.desktop-scene { position: absolute; inset: 0; }
.scene.paused, .scene.paused *, .scene.inactive, .scene.inactive * { animation-play-state: paused !important; }
/* Start motion only after JavaScript installs its pause control. */
.scene:not([data-animated]), .scene:not([data-animated]) * { animation-play-state: paused !important; animation-delay: var(--still, -8s) !important; }
@media (prefers-reduced-motion: reduce) {
  .scene, .scene * { animation-play-state: paused !important; animation-delay: var(--still, -8s) !important; }
}
.demo-stage { position: relative; }
.demo-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 10; width: 44px; height: 44px; padding: 0; justify-content: center; border-color: var(--control-border); background: var(--graphite); color: var(--on-graphite); }
.demo-toggle:hover { background: var(--control); }
.demo-toggle svg { flex: none; }
.demo-caption { margin-top: 12px; }

.sbar { position: absolute; left: 0; right: 0; top: 0; height: 3.6%; display: flex; align-items: center; justify-content: flex-end; gap: 1.5em; padding: 0 1.4em; background: var(--menubar); font-weight: 500; }
.sbar .left { margin-right: auto; display: flex; gap: 1.5em; }
.sglyph { position: relative; display: inline-flex; width: 1.5em; height: 1.5em; }
.sglyph svg { width: 100%; height: 100%; }
.sglyph .rec { position: absolute; left: 50%; top: 45%; width: .55em; height: .55em; margin: -.275em 0 0 -.275em; border-radius: 50%; background: var(--record); opacity: 0; }

.swin { position: absolute; background: var(--window); border-radius: .9em; box-shadow: var(--shadow-float); overflow: hidden; }
.tl3 { position: absolute; left: 1em; top: .9em; display: flex; gap: .55em; z-index: 1; }
.tl3 span { width: .9em; height: .9em; border-radius: 50%; background: #ff5f57; display: block; }
.tl3 span:nth-child(2) { background: #febc2e; } .tl3 span:nth-child(3) { background: #28c840; }

.scur { position: absolute; width: 1.7em; height: 2.3em; z-index: 6; pointer-events: none; }
.scur svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cur-path { fill: var(--ring-black); stroke: var(--ring-white); stroke-width: 1.3; stroke-linejoin: round; }

.sring { position: absolute; width: 6em; height: 6em; margin: -3em 0 0 -3em; z-index: 5; opacity: 0; pointer-events: none; }
.sring svg { width: 100%; height: 100%; overflow: visible; display: block; }
.rk { stroke: var(--ring-black); } .rw { stroke: var(--ring-white); } .rc { stroke: var(--ring); }
.rkf { fill: var(--ring-black); } .rwf { fill: var(--ring-white); } .rcf { fill: var(--ring); }

.spill { position: absolute; transform: translateX(-50%); display: flex; align-items: center; gap: .8em; height: 2.9em; padding: 0 .45em 0 1.1em; border-radius: 1.45em; background: var(--pill); box-shadow: var(--shadow-float); white-space: nowrap; opacity: 0; z-index: 4; }
.spill .dot { width: .75em; height: .75em; border-radius: 50%; background: var(--record); flex: none; }
.spbtn { height: 2em; padding: 0 .9em; border-radius: 1em; background: var(--pill-button); display: inline-flex; align-items: center; gap: .4em; }
.spbtn i { width: .6em; height: .6em; border-radius: .15em; background: currentColor; display: block; }
.smeter { display: inline-flex; gap: .2em; align-items: center; height: 1.5em; }
.smeter span { width: .22em; height: 100%; border-radius: .11em; background: currentColor; display: block; transform-origin: 50% 50%; animation: lp-meter .9s ease-in-out infinite; }
.smeter span:nth-child(2) { animation-delay: -.2s; } .smeter span:nth-child(3) { animation-delay: -.5s; } .smeter span:nth-child(4) { animation-delay: -.1s; } .smeter span:nth-child(5) { animation-delay: -.65s; } .smeter span:nth-child(6) { animation-delay: -.35s; }
@keyframes lp-meter { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.sstate { display: inline-flex; align-items: center; gap: .8em; }
.sspin { width: 1.1em; height: 1.1em; border-radius: 50%; border: .18em solid var(--track); border-top-color: var(--text); animation: lp-spin .8s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.scap { position: absolute; left: 50%; transform: translateX(-50%); max-width: 82%; background: var(--graphite); color: var(--on-graphite); font-size: 1.45em; line-height: 1.3; padding: .5em .9em; border-radius: .55em; display: flex; gap: .6em; align-items: center; opacity: 0; z-index: 7; white-space: nowrap; }
.scap b { font: 600 .62em/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.ink .scap b { color: var(--signal); }

.snote { position: absolute; background: var(--menu); border-radius: 1.2em; padding: .9em 1em; box-shadow: var(--shadow-float); display: flex; gap: .8em; align-items: flex-start; opacity: 0; z-index: 8; }
.sico { width: 2.9em; height: 2.9em; border-radius: 22.5%; background: var(--graphite); color: var(--on-graphite); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sico svg { width: 62%; height: 62%; }

.sterm { position: absolute; background: var(--graphite); color: var(--on-graphite); border-radius: .9em; box-shadow: var(--shadow-float); font: 400 clamp(10px, 1.2cqw, 14px)/1.6 var(--font-mono); padding: 2.8em 1.4em 1.2em; overflow: hidden; z-index: 7; }
.sterm .ttl { position: absolute; left: 0; right: 0; top: .75em; text-align: center; font: 500 .85em/1 var(--font-sans); color: #9a9aa0; }
.sterm .ln { display: block; overflow-wrap: anywhere; }
.sterm .dim { color: #9a9aa0; }
.sterm .ok { color: #5ee07a; }
.sterm .pr { color: #ff3ea5; }

.result-glow { position: absolute; border-radius: .9em; box-shadow: 0 10px 38px 10px rgba(255, 62, 165, .48); opacity: 0; pointer-events: none; }
.sfrost { position: absolute; inset: 0; z-index: 6; background: rgba(233, 237, 245, .58); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; }
.sreview { position: absolute; left: 6%; top: 17%; width: 50%; height: 72%; padding: 3.8cqw 2cqw 2cqw; border-radius: .9em; background: var(--window); color: var(--text); border: 1px solid var(--separator); box-shadow: var(--shadow-float); opacity: 0; z-index: 8; }
.sreview-title { position: absolute; top: 1.1cqw; left: 0; right: 0; text-align: center; font-size: clamp(12px, 1.5cqw, 17px); font-weight: 600; }
.sreview-content { display: flex; flex-direction: column; height: 100%; gap: 1cqw; }
.sreview-shot { width: 100%; min-height: 0; flex: 1; object-fit: contain; display: block; border-radius: .5em; }
.sreview-remark { min-width: 0; display: flex; flex-direction: column; gap: .8cqw; }
.sreview-time { font: 500 clamp(10px, 1.3cqw, 15px)/1.4 var(--font-mono); color: var(--text-secondary); }
.sreview-remark p { margin: 0; font-size: clamp(12px, 1.6cqw, 18px); line-height: 1.45; }
@media (max-width: 540px) {
  .stage { aspect-ratio: 4 / 5; min-height: 430px; }
  /* Keep the window and pointer in a 16:10 desktop; its 56%-wide window fills 92% of the phone. */
  .desktop-scene { right: auto; bottom: auto; left: -32.14285%; width: 164.2857%; aspect-ratio: 16 / 10; font-size: clamp(8px, 2.5cqw, 10px); }
  .desktop-scene .sbar { display: none; }
  .a-scene .skeys-layout-15 { top: 38%; font-size: clamp(18px, 5cqw, 26px); }
  .a-scene .spill-layout-16 { top: 76%; font-size: clamp(10px, 2.8cqw, 12px); }
  .a-scene .scap-layout-21 { top: 84%; left: calc(50% - 24px); max-width: calc(100% - 72px); font-size: 12px; white-space: normal; }
  .a-scene .snote-layout-22 { left: 8%; width: 84%; font-size: 12px; }
  .sreview { left: 5%; top: 8%; width: 90%; height: 42%; padding: 28px 10px 10px; }
  .sreview-title { top: 8px; }
  .sreview-content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: center; }
  .sreview-shot { height: auto; }
  .sreview .tl3 { top: 10px; left: 10px; }
  .sreview .tl3 span { width: 6px; height: 6px; }
  .a-scene .sterm-layout-26 { left: 5%; top: 54%; width: 90%; height: 36%; }
}

.skeys { position: absolute; display: flex; gap: .35em; font-size: 3.2em; transform: translate(-50%, -50%); opacity: 0; z-index: 9; }
.skeys .keyl { box-shadow: 0 0 0 .5px var(--control-border), 0 .12em .3em rgba(0,0,0,.25); }

/* Elapsed time in the demo pill: a column of times stepped by each variation's timeline */
.stime { display: inline-block; height: 1.35em; overflow: hidden; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.4em; }
.stime > span { display: flex; flex-direction: column; }
.stime > span > span { height: 1.35em; line-height: 1.35em; }

/* Hero bullets, feature cards, FAQ */
.list strong { color: var(--ground-ink); font-weight: 600; }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--ground-muted); }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.faq details p { margin: 0 0 18px; color: var(--ground-muted); font-size: 15px; line-height: 1.55; max-width: 44em; }

/* The quip above the headline */
.quip { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; line-height: 1.4; color: var(--ground-muted); }
.quip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }

/* Demo timeline: shared duration keeps every story beat synchronized. */

body{margin:0}
.feat{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--hairline);border-radius:14px}
.feat .show{min-height:96px;display:flex;align-items:center;justify-content:center;background:var(--desk);border-radius:10px;padding:16px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--hairline);border-radius:999px;font-size:15px;font-weight:500}
.a-scene{--demo-duration:22s;--still:-19s}
.d-wall{background-color:#e9edf5;background-image:radial-gradient(60% 80% at 12% 18%,rgba(197,214,247,.9),transparent 70%),radial-gradient(55% 70% at 88% 12%,rgba(214,206,245,.85),transparent 70%),radial-gradient(70% 80% at 80% 95%,rgba(202,233,232,.9),transparent 70%),radial-gradient(60% 60% at 25% 92%,rgba(236,228,214,.85),transparent 70%),linear-gradient(160deg,#eef1f7,#e4e9f2);border-color:transparent}
.d-wall::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 30% at 50% 50%,rgba(255,255,255,.55),transparent 70%);transform:rotate(-12deg);pointer-events:none}

.web .wbar{position:absolute;left:0;right:0;top:0;height:9%;background:var(--window-alt);border-bottom:1px solid var(--separator);display:flex;align-items:center;justify-content:center}
.web .wbar .tl3{top:50%;transform:translateY(-50%)}
.wnav{position:absolute;left:10%;color:var(--text-tertiary);font-size:1.2em}
.wurl{width:46%;height:62%;border-radius:.5em;background:var(--control);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.95em}
.web .wtop,.web .wh,.web .wsub,.web .wcard{position:absolute}
.web::after{content:"";position:absolute;left:0;right:0;top:9%;bottom:0;background:#ffffff;z-index:0}
.web > *{z-index:1}
.wtop{left:6%;right:6%;top:13%;height:6%;display:flex;align-items:center;gap:2em;color:#55555a;font-size:.95em}
.wtop b{color:#1d1d1f;font-size:1.15em;margin-right:auto}
.wsign{border:1px solid #d2d2d7;border-radius:.4em;padding:.2em .7em;color:#1d1d1f}
.wh{left:0;right:0;top:25%;text-align:center;font-size:2.3em;font-weight:700;letter-spacing:-.02em;color:#1d1d1f}
.wsub{left:0;right:0;top:35%;text-align:center;color:#6e6e73}
.wcard{top:44%;height:48%;width:37%;border:1px solid #e5e5ea;border-radius:.8em;background:#fbfbfd}
.wcard > span{position:absolute;left:8%}
.wname{top:7%;font-weight:600;color:#6e6e73}
.wprice{top:20%;font-size:1.8em;font-weight:700;color:#1d1d1f;letter-spacing:-.02em}
.wyear{top:37%;color:#6e6e73;font-size:.9em;opacity:0}
.wli{color:#55555a;font-size:.95em}
.wbtn{left:8%!important;right:8%;top:77%;height:13%;border-radius:.5em;display:flex;align-items:center;justify-content:center;font-weight:600}
.wbtn.solid{background:#1d1d1f;color:#fff}
.wbtn.faint{color:#b0b0b5;border:1px solid #e5e5ea;background:#fbfbfd}
.wfix{position:absolute;inset:-1px;border-radius:.5em;background:#1d1d1f;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0}

.a-cur{animation:a-cur var(--demo-duration) ease-in-out infinite}
.a-cur svg{animation:a-press var(--demo-duration) linear infinite;transform-origin:10% 5%}
.a-mb{animation:a-mb var(--demo-duration) linear infinite}
.a-keys{animation:a-keys var(--demo-duration) ease-out infinite}
.a-pill{animation:a-pill var(--demo-duration) linear infinite}
.a-prec{animation:a-prec var(--demo-duration) linear infinite}
.a-pproc{animation:a-pproc var(--demo-duration) linear infinite}
.a-cap1{animation:a-cap1 var(--demo-duration) ease-out infinite}
.a-cap2{animation:a-cap2 var(--demo-duration) ease-out infinite}
.a-r1{animation:a-r1 var(--demo-duration) ease-out infinite}
.a-r2{animation:a-r2 var(--demo-duration) ease-out infinite}
.a-note{animation:a-note var(--demo-duration) ease-out infinite}
.a-result-glow{animation:a-result-glow var(--demo-duration) ease-out infinite}
.a-frost{animation:a-frost var(--demo-duration) ease-out infinite}
.a-review,.a-term{animation:a-handoff var(--demo-duration) ease-out infinite}
.a-l1{animation:a-l1 var(--demo-duration) linear infinite}.a-l2{animation:a-l2 var(--demo-duration) linear infinite}.a-l3{animation:a-l3 var(--demo-duration) linear infinite}.a-l4{animation:a-l4 var(--demo-duration) linear infinite}.a-l5{animation:a-l5 var(--demo-duration) linear infinite}
.a-time{animation:a-time var(--demo-duration) steps(10,end) infinite}
@keyframes a-time{0%,10.91%{transform:translateY(0)}58.18%,100%{transform:translateY(-90.909%)}}
.a-fix1{animation:a-fix1 var(--demo-duration) linear infinite}
.a-new2{animation:a-new2 var(--demo-duration) linear infinite}
/* Recording keeps its original timing; the handoff clears at 19.7s to reveal the result. */
@keyframes a-cur{0%,10.91%{left:40%;top:40%;opacity:1}20.91%,32.72%{left:62%;top:67.5%}42.72%,54.54%{left:56.9%;top:50.2%}63.18%{left:74%;top:38%;opacity:1}69.09%,100%{left:74%;top:38%;opacity:0}}
@keyframes a-press{0%,26.82%{transform:scale(1)}27.28%{transform:scale(.8)}28.19%,50.45%{transform:scale(1)}50.91%{transform:scale(.8)}51.82%,100%{transform:scale(1)}}
@keyframes a-mb{0%,9.55%{opacity:0}10%,59.09%{opacity:1}59.54%,100%{opacity:0}}
@keyframes a-keys{0%,1.82%{opacity:0;transform:translate(-50%,-30%)}3.64%,8.18%{opacity:1;transform:translate(-50%,-50%)}10%,54.54%{opacity:0;transform:translate(-50%,-50%)}56.36%,60%{opacity:1;transform:translate(-50%,-50%)}61.82%,100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes a-pill{0%,9.09%{opacity:0}10.91%,68.18%{opacity:1}70%,100%{opacity:0}}
@keyframes a-prec{0%,58.64%{opacity:1}59.09%,100%{opacity:0}}
@keyframes a-pproc{0%,58.64%{opacity:0}59.09%,100%{opacity:1}}
@keyframes a-cap1{0%,12.73%{opacity:0;transform:translate(-50%,25%)}14.55%,29.99%{opacity:1;transform:translate(-50%,0)}31.81%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes a-cap2{0%,35.45%{opacity:0;transform:translate(-50%,25%)}37.27%,54.54%{opacity:1;transform:translate(-50%,0)}56.36%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes a-r1{0%,26.82%{opacity:0;transform:scale(.5)}28.19%{opacity:1;transform:scale(1.15)}29.99%,36.36%{opacity:1;transform:scale(1)}41.81%,100%{opacity:0;transform:scale(1)}}
@keyframes a-r2{0%,50.45%{opacity:0;transform:scale(.5)}51.82%{opacity:1;transform:scale(1.15)}53.63%,59.09%{opacity:1;transform:scale(1)}63.64%,100%{opacity:0;transform:scale(1)}}
@keyframes a-note{0%,66.36%{opacity:0;transform:translateX(8%)}68.18%,70%{opacity:1;transform:none}70.91%,100%{opacity:0;transform:none}}
@keyframes a-result-glow{0%,88.18%{opacity:0;transform:scale(.985)}89.55%{opacity:1;transform:scale(1.015)}92.27%{opacity:.55;transform:scale(1)}95%{opacity:.85;transform:scale(1.01)}97.73%{opacity:.55;transform:scale(1)}99.55%,100%{opacity:0;transform:scale(1)}}
@keyframes a-frost{0%,69.09%{opacity:0;visibility:hidden}70.45%,88.18%{opacity:1;visibility:visible}89.55%,100%{opacity:0;visibility:hidden}}
@keyframes a-handoff{0%,69.09%{opacity:0;transform:translateY(2%)}70.45%,88.18%{opacity:1;transform:none}89.55%,100%{opacity:0;transform:none}}
@keyframes a-l1{0%,71.36%{opacity:0}72.27%,100%{opacity:1}}
@keyframes a-l2{0%,73.18%{opacity:0}74.09%,100%{opacity:1}}
@keyframes a-l3{0%,76.82%{opacity:0}77.73%,100%{opacity:1}}
@keyframes a-l4{0%,81.36%{opacity:0}82.27%,100%{opacity:1}}
@keyframes a-l5{0%,83.18%{opacity:0}84.09%,100%{opacity:1}}
@keyframes a-fix1{0%,76.82%{opacity:0}77.73%,97.73%{opacity:1}99.55%,100%{opacity:0}}
@keyframes a-new2{0%,81.36%{opacity:0}82.27%,97.73%{opacity:1}99.55%,100%{opacity:0}}

/* Artboard geometry. */
.sico-layout-1 { font-size: 11px; }
.cta-layout-2 { min-height: 40px; padding: 0 16px; font-size: 14px; }
.header-layout-3 { padding: 64px 0 44px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; }
.h1-layout-4 { max-width: 13em; }
.form-layout-5 { justify-content: center; }
.demo-section-layout-6 { padding-bottom: 80px; }
.span-layout-7 { font-weight: 700; }
.swin-layout-8 { left: 22%; top: 12%; width: 56%; height: 66%; }
.wcard-layout-9 { left: 10%; }
.wli-layout-10 { top: 50%; }
.wli-layout-11 { top: 61%; }
.wcard-layout-12 { left: 53%; }
.sring-layout-13 { left: 62%; top: 67.5%; }
.sring-layout-14 { left: 56.9%; top: 50.2%; }
.skeys-layout-15 { left: 50%; top: 45%; }
.spill-layout-16 { left: 50%; top: 82%; }
.span-layout-17 { display: grid; align-items: center; }
.sstate-layout-18 { grid-area: 1 / 1; }
.sstate-layout-19 { grid-area: 1 / 1; padding-right: .7em; }
.span-layout-20 { font-weight: 500; }
.scap-layout-21 { top: 90%; }
.snote-layout-22 { left: 70.5%; top: 5.5%; width: 27.5%; }
.span-layout-23 { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.span-layout-24 { font-weight: 600; }
.span-layout-25 { color: var(--text-secondary); }
.sterm-layout-26 { left: 58%; top: 17%; width: 36%; height: 72%; }
.stack-layout-27 { margin-bottom: 40px; }
.mono-layout-28 { font-size: 14px; }
.grid2-layout-29 { align-items: start; margin-top: 48px; }
.stack-layout-31 { gap: 14px; }
.p-layout-32 { font-size: 17px; }
.div-layout-33 { display: flex; flex-wrap: wrap; gap: 10px; }
.grid2-layout-34 { align-items: start; }
.stack-layout-35 { gap: 16px; }
.sec-layout-36 { text-align: center; }
.stack-layout-37 { align-items: center; gap: 20px; }

/* Production states and responsive behavior. */
html { background: #161617; scroll-padding-top: 24px; color-scheme: dark; }
body { margin: 0; }
a { color: var(--ground-ink); text-underline-offset: .2em; }
::selection { background: #ff3ea5; color: #161617; }
.inp { caret-color: var(--signal); }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 20px; top: -80px; z-index: 20; padding: 12px 18px; background: var(--ground-ink); color: var(--ground); border-radius: 6px; }
.skip-link:focus { top: 12px; }
.signup-status { margin: 0; max-width: 38em; font-size: 15px; line-height: 1.5; }
.signup-status:empty { display: none; }
.signup-status[data-state="error"] { color: var(--danger-text); }
.signup-status[data-state="success"] { color: var(--ground-ink); }
.cta:disabled { opacity: .6; cursor: wait; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.signup-privacy { font-size: 12px; }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (max-width: 540px) {
  .nav { gap: 4px 16px; }
  .nav .brand { flex: 1 1 calc(100% - 190px); }
  .nav .cta { order: 0; }
  .navlink { order: 1; }
  .form { flex-direction: column; }
  .inp { flex: auto; width: 100%; }
  .form .cta { width: 100%; }
  .grid2, .grid3 { gap: 28px; }
  .quip { font-size: 12px; text-align: left; }
  .h1 { font-size: clamp(38px, 10vw, 54px); }
  .feat { padding: 20px; }
}