/* Cafe's marketing site: landing, features, roadmap, replaces, download and pricing.
   One dark editor world: Cafe's neon pink accent (#ff2e97, crates/cafe_ui/src/theme.rs), apricot from the
   logo's centre, violet for things in motion. Fonts are self-hosted (SIL OFL, see assets/fonts/).
   Strict CSP: no inline styles; JS sets custom properties through the CSSOM only. */

@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations"), url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --bg:#110e12; --surface:#1a161c; --surface-2:#231e26; --line:#342d38; --line-2:#453c4a;
  --fg:#f4eef3; --muted:#b3a8b5; --dim:#9a8f9c; --faint:#74697a;
  --pink:#ff2e97; --pink-soft:#ff7ab8; --apricot:#ffd9a8; --violet:#a58bff; --ok:#5fd38d; --warn:#ffc65c;
  --glow:rgba(255,46,151,.35); --tint-pink:rgba(255,46,151,.12); --tint-violet:rgba(165,139,255,.12);
  --code-kw:#ff7ab8; --code-fn:#ffd9a8; --code-ty:#a58bff; --code-str:#8fe3b4;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --step--1:.8125rem; --step-1:1.2rem;
  --step-2:clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
  --step-3:clamp(2.1rem, 1.35rem + 3.3vw, 3.5rem);
  --step-4:clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem);
  --r-sm:8px; --r:14px; --r-lg:20px; --ease:cubic-bezier(.2,.8,.2,1); --maxw:1200px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--fg); font:400 1rem/1.6 var(--body); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.site { margin:0; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
main { flex:1; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--fg); text-underline-offset:3px; text-decoration-color:rgba(255,122,184,.6); }
a:hover { color:var(--pink-soft); }
p { margin:0 0 1em; }
code, kbd, pre { font-family:var(--mono); }
code { font-size:.9em; background:var(--surface-2); padding:.08em .4em; border-radius:6px; }
pre { background:#0c0a0d; border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; overflow-x:auto; }
pre code { background:none; padding:0; }
kbd { font-size:.8em; padding:.1em .45em; border-radius:5px; border:1px solid var(--line); border-bottom-width:2px; background:var(--surface-2); color:var(--fg); white-space:nowrap; }
:focus-visible { outline:2px solid var(--pink); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--surface-2); padding:8px 16px; border-radius:var(--r-sm); }
.skip:focus { left:16px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--dim); }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width:700px) { .wrap { padding-left:24px; padding-right:24px; } }
.icon { width:1.25em; height:1.25em; flex:none; }

/* ---- type ---- */
h1, h2, h3, h4 { font-family:var(--display); line-height:1.05; letter-spacing:-.02em; margin:0 0 .4em; text-wrap:balance; }
h1 { font-size:var(--step-4); font-weight:800; line-height:.98; }
h2 { font-size:var(--step-3); font-weight:800; line-height:1.02; }
h3 { font-size:1.3rem; font-weight:700; line-height:1.2; }
.lede, .lead { color:var(--muted); font-size:var(--step-1); line-height:1.5; max-width:62ch; margin:0 0 1em; }
.lead.big { font-size:clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.eyebrow { font:500 var(--step--1)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pink-soft);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; }
.eyebrow::before { content:""; width:22px; height:1px; background:currentColor; }
.grad, .bloom { background:linear-gradient(100deg, var(--pink) 0%, var(--pink-soft) 40%, var(--apricot) 75%, var(--pink) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 7s ease-in-out infinite; }
@keyframes sheen { 50% { background-position:100% 0; } }
.fine { color:var(--dim); font-size:.9rem; max-width:70ch; }

/* ---- buttons (dark text on pink keeps AA contrast) ---- */
.button, button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px;
  font:600 .95rem/1 var(--body); text-decoration:none; cursor:pointer; color:var(--fg);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  transition:transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s; }
.button:hover, button:hover { border-color:var(--pink-soft); color:var(--fg); transform:translateY(-2px); }
.button.primary, button.primary { background:var(--pink); color:#160910; border-color:var(--pink); }
.button.primary:hover, button.primary:hover { color:#160910; box-shadow:0 10px 40px -6px var(--glow); }
.button.ghost { background:var(--surface); }
.button.big { min-height:52px; padding:0 26px; font-size:1rem; }
.button.small { min-height:38px; padding:0 16px; font-size:.9rem; }
.button.wide, button.wide { width:100%; }
.button.disabled, button:disabled { background:var(--surface-2); color:var(--muted); border-color:var(--line); cursor:default; transform:none; box-shadow:none; }
button:disabled { opacity:.6; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cta-row.center { justify-content:center; }
.cta-note { color:var(--dim); font-size:.9rem; margin:16px 0 0; }

/* ---- header ---- */
header.site-top { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
header.site-top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; }
.brand { display:inline-flex; align-items:center; gap:10px; font:800 1.25rem/1 var(--display); text-decoration:none; }
.brand .logo { border-radius:7px; }
.site-nav { display:flex; align-items:center; gap:4px; }
.site-nav a:not(.button), .site-menu nav a:not(.button) { color:var(--muted); text-decoration:none; padding:8px 11px; border-radius:999px; font-size:.92rem; font-weight:500; transition:color .2s; }
.site-nav a:not(.button):hover, .site-nav a[aria-current=page] { color:var(--fg); }
.site-nav a[aria-current=page] { box-shadow:inset 0 -2px 0 var(--pink); border-radius:4px; }
.site-nav .button { margin-left:8px; }
.site-menu { display:none; position:relative; }
.site-menu summary { list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); }
.site-menu summary::-webkit-details-marker { display:none; }
.bars { display:grid; gap:4px; }
.bars i { display:block; width:18px; height:2px; background:var(--fg); border-radius:2px; }
.site-menu nav { position:absolute; right:0; top:52px; min-width:230px; display:flex; flex-direction:column; gap:2px; padding:10px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 20px 60px -10px rgba(0,0,0,.8); }
.site-menu nav .button { margin-top:6px; }
.site-menu nav a[aria-current=page] { color:var(--fg); background:var(--tint-pink); }
@media (max-width:900px) { .site-nav { display:none; } .site-menu { display:block; } }

.flash-wrap { padding-top:16px; }
.flash { padding:12px 16px; border-radius:var(--r-sm); border:1px solid; }
.flash.ok { background:rgba(95,211,141,.1); border-color:#2f6b47; }
.flash.error { background:var(--tint-pink); border-color:#8a2560; }
.flash.info { background:var(--tint-violet); border-color:#5a3a99; }

/* ---- landing hero ---- */
.home-hero { position:relative; overflow:hidden; }
.home-hero::before { content:""; position:absolute; inset:-20% -10% auto auto; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(closest-side, rgba(255,46,151,.22), rgba(165,139,255,.08) 55%, transparent 72%); pointer-events:none; }
.home-hero .wrap { position:relative; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); align-items:center; gap:24px; padding-block:56px 40px; }
.home-hero h1 { margin:4px 0 22px; }
.hero-intro > * { animation:rise .9s var(--ease) both; }
.hero-intro > :nth-child(2) { animation-delay:.08s; } .hero-intro > :nth-child(3) { animation-delay:.16s; }
.hero-intro > :nth-child(4) { animation-delay:.24s; } .hero-intro > :nth-child(5) { animation-delay:.32s; }
@keyframes rise { from { opacity:.3; transform:translateY(24px); } }
.home-hero .cta-row { margin-top:30px; }
.home-hero .meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; color:var(--dim); font:400 var(--step--1)/1.4 var(--mono); }
.home-hero .meta span { display:inline-flex; align-items:center; gap:8px; }
.home-hero .meta span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.hero-visual { position:relative; height:clamp(380px, 46vw, 600px); max-width:100%; }
.hero-visual canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-visual .fallback { position:absolute; inset:0; margin:auto; width:60%; max-width:320px; height:auto;
  filter:drop-shadow(0 30px 60px rgba(255,46,151,.35)); animation:bob 6s ease-in-out infinite; }
.hero-visual.gl .fallback { display:none; }
@keyframes bob { 50% { transform:translateY(-12px) rotate(-3deg); } }
@media (max-width:860px) {
  .home-hero .wrap { grid-template-columns:minmax(0, 1fr); padding-block:8px 40px; gap:0; }
  .hero-visual { order:-1; height:300px; margin-inline:-16px; }
  .home-hero .cta-row .button { flex:1 1 140px; }
}

.promo { display:inline-flex; align-items:center; gap:10px; max-width:100%; margin:0 0 22px; padding:6px 14px 6px 6px; border-radius:999px;
  text-decoration:none; color:var(--fg); font-size:.9rem; background:linear-gradient(100deg, rgba(255,46,151,.18), rgba(255,217,168,.12));
  border:1px solid rgba(255,122,184,.45); box-shadow:0 10px 40px -14px var(--glow); }
.promo:hover { color:var(--fg); border-color:var(--pink-soft); }
.promo .promo-label { flex:none; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#160910; background:var(--apricot); padding:6px 9px; border-radius:999px; }
.promo .icon { color:var(--pink-soft); width:18px; height:18px; }

/* ---- marquee ---- */
.marquee { border-block:1px solid var(--line); background:var(--surface); overflow:hidden; }
.marquee-track { display:flex; width:max-content; animation:slide 46s linear infinite; padding-block:14px; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { font:600 1.05rem/1 var(--display); color:var(--muted); padding-inline:22px; display:inline-flex; align-items:center; gap:22px; white-space:nowrap; }
.marquee-track span::after { content:""; width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:var(--pink); opacity:.7; }
@keyframes slide { to { transform:translateX(-50%); } }

/* ---- sections ---- */
.band { position:relative; padding-block:clamp(64px, 9vw, 120px); }
.band.tight { padding-top:0; }
.section-head { display:grid; gap:16px; margin-bottom:44px; max-width:780px; }
.section-head .eyebrow, .section-head h2, .section-head .lede { margin:0; }
html.js .reveal { opacity:0; transform:translateY(32px) scale(.985); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.in { opacity:1; transform:none; }

/* ---- the workspace mock ---- */
.stage { perspective:1800px; }
.window { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#181519;
  box-shadow:0 50px 120px -40px rgba(255,46,151,.35), 0 30px 60px -30px rgba(0,0,0,.8);
  transform:rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition:transform .5s var(--ease); transform-style:preserve-3d; max-width:100%; }
.titlebar { display:flex; align-items:center; gap:14px; padding:9px 14px; background:#141115; border-bottom:1px solid var(--line); font-size:12px; color:var(--dim); }
.titlebar .tb-logo { border-radius:4px; flex:none; }
.titlebar .menus { display:flex; gap:14px; overflow:hidden; white-space:nowrap; min-width:0; }
.titlebar .title { margin-left:auto; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.win-body { display:grid; grid-template-columns:52px minmax(0, 1fr); height:clamp(420px, 44vw, 500px); }
.activity { background:#141115; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:8px; }
.activity button { position:relative; width:52px; height:48px; min-height:0; padding:0; display:grid; place-items:center; border:0; border-radius:0; background:none; color:var(--faint); transition:color .2s; }
.activity button:hover { color:var(--fg); transform:none; }
.activity button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.activity button[aria-selected="true"] { color:var(--fg); }
.activity button[aria-selected="true"]::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--pink); box-shadow:0 0 10px var(--pink); }
.activity .prog { position:absolute; left:10px; right:10px; bottom:4px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; opacity:0; }
.activity button[aria-selected="true"] .prog { opacity:1; }
.activity .prog i { display:block; height:100%; width:0; background:var(--pink-soft); }
.activity button[aria-selected="true"] .prog i { animation:fill var(--cycle, 6s) linear forwards; }
.stage.paused .activity .prog i { animation:none; width:0; }
@keyframes fill { to { width:100%; } }
.views { position:relative; overflow:hidden; min-width:0; }
.view { position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateX(18px);
  transition:opacity .35s, transform .45s var(--ease), visibility .35s; }
.view.is-active { opacity:1; visibility:visible; transform:none; }
.mtabs { display:flex; background:#141115; border-bottom:1px solid var(--line); font-size:12.5px; overflow:hidden; flex:none; }
.mtabs span { padding:9px 16px; color:var(--dim); border-right:1px solid var(--line); white-space:nowrap; display:inline-flex; gap:8px; align-items:center; }
.mtabs span.on { color:var(--fg); background:#181519; box-shadow:inset 0 2px 0 var(--pink); }
.mtabs span.on.dirty::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--fg); }
.statusbar { margin-top:auto; flex:none; display:flex; gap:16px; padding:5px 12px; font:11.5px/1.4 var(--mono); color:var(--muted); background:#141115; border-top:1px solid var(--line); white-space:nowrap; overflow:hidden; }
.statusbar .remote { background:var(--pink); color:#160910; margin:-5px 0 -5px -12px; padding:5px 10px; }
.statusbar .right { margin-left:auto; color:var(--apricot); }
.caption { display:flex; gap:14px; align-items:baseline; margin:22px 0 0; min-height:3.2em; color:var(--muted); max-width:70ch; }
.caption b { color:var(--fg); font-weight:600; white-space:nowrap; }
.code { font:13.5px/1.75 var(--mono); padding:14px 0; overflow:hidden; flex:1; }
.code .ln { display:flex; white-space:pre; }
.code .ln i { font-style:normal; width:44px; text-align:right; padding-right:18px; color:var(--faint); flex:none; }
.code .ln.cur { background:rgba(255,255,255,.035); }
.window .k { color:var(--code-kw); } .window .f { color:var(--code-fn); } .window .t { color:var(--code-ty); } .window .s { color:var(--code-str); } .window .c { color:var(--dim); font-style:italic; }
.gtext { display:inline-block; vertical-align:bottom; overflow:hidden; white-space:pre; color:var(--faint); max-width:0; }
.is-active .gtext { animation:type 1.4s steps(30, end) .8s forwards, solidify .2s 3.6s forwards; }
.is-active .gtext.g2 { animation:type 1s steps(20, end) 2s forwards, solidify .2s 3.6s forwards; }
@keyframes type { to { max-width:40ch; } }
@keyframes solidify { to { color:var(--fg); } }
.caret { display:inline-block; width:2px; height:1.1em; background:var(--pink); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.mhint { position:absolute; right:18px; top:190px; font:500 12px/1 var(--body); color:var(--fg); background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; display:flex; gap:8px; align-items:center; opacity:0; transform:translateY(6px); }
.is-active .mhint { animation:pop .4s 2.4s forwards, pop-out .3s 3.6s forwards; }
@keyframes pop { to { opacity:1; transform:none; } }
@keyframes pop-out { to { opacity:0; transform:translateY(-6px); } }
.graph { position:relative; flex:1; background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:22px 22px; }
.graph svg.links { position:absolute; inset:0; width:100%; height:100%; }
.graph svg.links path { fill:none; stroke:var(--pink); stroke-width:1.6; stroke-dasharray:5 7; opacity:.7; animation:flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset:-24; } }
.node { position:absolute; transform:translate(-50%, -50%); background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:12px; min-width:112px; box-shadow:0 10px 30px -12px rgba(0,0,0,.8); }
.node.n1 { left:18%; top:50%; } .node.n2 { left:46%; top:30%; } .node.n3 { left:46%; top:72%; } .node.n4 { left:78%; top:22%; } .node.n5 { left:78%; top:52%; }
.node b { display:flex; align-items:center; gap:7px; font-size:13px; }
.node b::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.node small { color:var(--dim); font-family:var(--mono); font-size:11px; }
.node .bar { height:3px; background:var(--line); border-radius:3px; margin-top:6px; overflow:hidden; }
.node .bar i { display:block; height:100%; background:var(--pink-soft); width:30%; animation:cpu 2.6s ease-in-out infinite alternate; }
.node.n2 .bar i { animation-duration:1.9s; } .node.n3 .bar i { animation-duration:3.3s; } .node.n4 .bar i { animation-duration:2.2s; }
@keyframes cpu { 0% { width:12%; } 50% { width:64%; } 100% { width:28%; } }
.is-active .node { animation:drop .6s cubic-bezier(.2,.9,.3,1.3) both; }
.is-active .node.n2 { animation-delay:.08s; } .is-active .node.n3 { animation-delay:.16s; } .is-active .node.n4 { animation-delay:.24s; } .is-active .node.n5 { animation-delay:.32s; }
@keyframes drop { from { opacity:0; transform:translate(-50%, -80%) scale(.85); } }
.node.warn b::before { background:var(--warn); box-shadow:0 0 8px var(--warn); }
.reqbar { display:flex; gap:8px; padding:12px; border-bottom:1px solid var(--line); font:13px/1 var(--mono); align-items:stretch; }
.reqbar .method { color:var(--ok); font-weight:500; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.reqbar .url { flex:1; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reqbar .url em { font-style:normal; color:var(--violet); }
.reqbar .send { background:var(--pink); color:#160910; border-radius:7px; padding:9px 14px; font-family:var(--body); font-weight:600; }
.is-active .reqbar .send { animation:press .3s .6s; }
@keyframes press { 50% { transform:scale(.92); } }
.api-split { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); flex:1; min-height:0; }
.api-split > div { padding:12px 14px; min-width:0; overflow:hidden; }
.api-split > div + div { border-left:1px solid var(--line); }
.resp-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; font:12px/1 var(--mono); }
.pill { padding:5px 8px; border-radius:6px; background:var(--surface-2); color:var(--muted); }
.pill.ok { background:rgba(95,211,141,.14); color:var(--ok); }
.json { font:12.5px/1.7 var(--mono); white-space:pre; color:var(--muted); }
.window .json .k { color:var(--apricot); }
.is-active .json { animation:fadein .5s .9s both; }
@keyframes fadein { from { opacity:0; transform:translateY(6px); } }
.mchecks { list-style:none; padding:0; margin:8px 0 0; display:grid; gap:9px; font-size:13px; }
.mchecks li { display:flex; gap:9px; align-items:center; }
.mchecks li::before { content:"✓"; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(95,211,141,.16); color:var(--ok); font-size:11px; flex:none; }
.is-active .mchecks li { animation:fadein .4s both; }
.is-active .mchecks li:nth-child(1) { animation-delay:1.3s; } .is-active .mchecks li:nth-child(2) { animation-delay:1.6s; }
.is-active .mchecks li:nth-child(3) { animation-delay:1.9s; } .is-active .mchecks li:nth-child(4) { animation-delay:2.2s; }
.mlabel { font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.notes { display:grid; grid-template-columns:minmax(0, 1fr) 210px; flex:1; min-height:0; }
.note { padding:18px 26px; overflow:hidden; font-size:14px; }
.note h4 { font:700 1.5rem/1.2 var(--display); margin:0 0 10px; }
.props { display:grid; grid-template-columns:80px 1fr; gap:4px 10px; font-size:12.5px; color:var(--dim); margin-bottom:14px; }
.props span:nth-child(even) { color:var(--muted); }
.mtag { color:var(--violet); }
.wl { color:var(--pink-soft); border-bottom:1px dashed var(--pink-soft); }
.callout { border-left:3px solid var(--apricot); background:rgba(255,217,168,.07); padding:10px 12px; border-radius:0 8px 8px 0; margin-top:12px; font-size:13px; }
.callout b { color:var(--apricot); }
.math { font-family:"Times New Roman", serif; font-style:italic; font-size:15px; color:var(--fg); }
.linkq { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:3px 8px; border-radius:999px; background:var(--tint-pink); color:var(--pink-soft); margin-left:6px; opacity:0; }
.is-active .linkq { animation:pop .4s 1.4s forwards; }
.side { border-left:1px solid var(--line); padding:16px 14px; font-size:13px; background:#161317; overflow:hidden; }
.side ul { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px; }
.side li { color:var(--muted); }
.side li small { display:block; color:var(--dim); font-size:11.5px; }
.fx { display:flex; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); font:12.5px/1 var(--mono); }
.fx b { font-family:var(--body); color:var(--dim); font-style:italic; }
.fx .cell { padding:5px 8px; border:1px solid var(--line); border-radius:5px; color:var(--muted); }
.fx code { color:var(--fg); background:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.sheet-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .8fr); flex:1; min-height:0; }
.clip { overflow:hidden; }
.mgrid { border-collapse:collapse; font:12.5px/1 var(--body); width:100%; font-variant-numeric:tabular-nums; }
.mgrid th, .mgrid td { border:1px solid var(--line); padding:8px 10px; text-align:right; white-space:nowrap; }
.mgrid th { background:#161317; color:var(--dim); font-weight:500; text-align:center; }
.mgrid td:first-child, .mgrid th:first-child { text-align:left; }
.mgrid td.sel { outline:2px solid var(--pink); outline-offset:-2px; background:rgba(255,46,151,.08); color:var(--fg); }
.chart { padding:16px 18px; display:flex; flex-direction:column; min-width:0; }
.mbars { flex:1; display:flex; align-items:flex-end; gap:12px; border-bottom:1px solid var(--line); padding-top:10px; }
.mbars div { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.mbars i { display:block; width:100%; border-radius:5px 5px 0 0; background:linear-gradient(var(--pink-soft), var(--pink)); transform-origin:bottom; }
.mbars i.h70 { height:70%; } .mbars i.h100 { height:100%; } .mbars i.h40 { height:40%; } .mbars i.h99 { height:99%; }
.is-active .mbars i { animation:grow .9s cubic-bezier(.2,.9,.3,1.2) both; }
.is-active .mbars div:nth-child(2) i { animation-delay:.1s; } .is-active .mbars div:nth-child(3) i { animation-delay:.2s; } .is-active .mbars div:nth-child(4) i { animation-delay:.3s; }
@keyframes grow { from { transform:scaleY(0); } }
.xlabels { display:flex; gap:12px; font:11px/1 var(--body); color:var(--dim); padding-top:6px; }
.xlabels span { flex:1; text-align:center; }
.agents { padding:14px; display:grid; gap:10px; align-content:start; flex:1; overflow:hidden; }
.agent { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.agent .name { font-weight:600; font-size:14px; display:flex; gap:10px; align-items:center; min-width:0; }
.agent .name code { font-size:11.5px; color:var(--dim); font-weight:400; background:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent .state { font:500 11.5px/1 var(--mono); padding:5px 8px; border-radius:6px; align-self:center; }
.st-run { background:rgba(165,139,255,.15); color:var(--violet); }
.st-ask { background:rgba(255,198,92,.14); color:var(--warn); }
.st-ready { background:rgba(95,211,141,.14); color:var(--ok); }
.agent .track { height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.agent .track i { display:block; height:100%; background:linear-gradient(90deg, var(--violet), var(--pink)); }
.agent .track.p100 i { width:100%; } .agent .track.p64 i { width:64%; } .agent .track.p38 i { width:38%; }
.is-active .agent .track i { animation:track 2.4s cubic-bezier(.3,.7,.2,1) both; }
@keyframes track { from { width:0; } }
.agent .cost { font:12px/1 var(--mono); color:var(--dim); align-self:center; }
.agent .acts { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; }
.agent .acts span { font-size:11.5px; padding:5px 9px; border-radius:6px; border:1px solid var(--line); color:var(--muted); }
.agent .acts span.go { background:var(--pink); border-color:var(--pink); color:#160910; }
.agent .line { grid-column:1 / -1; font:12px/1.4 var(--mono); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px) {
  .win-body { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); height:520px; }
  .activity { flex-direction:row; justify-content:space-between; padding:0 4px; border-right:0; border-bottom:1px solid var(--line); }
  .activity button { flex:1; width:auto; height:46px; }
  .activity button[aria-selected="true"]::before { left:10px; right:10px; top:auto; bottom:0; width:auto; height:2px; }
  .activity .prog { bottom:auto; top:4px; }
  .titlebar .menus { display:none; }
  .mtabs span { padding:8px 12px; } .mtabs span:not(.on) { display:none; }
  .statusbar span:not(.remote):not(.right) { display:none; }
  .code { font-size:11.5px; } .code .ln i { width:30px; padding-right:12px; }
  .mhint { top:auto; bottom:40px; right:12px; }
  .node { min-width:0; padding:6px 8px; font-size:11px; } .node b { font-size:12px; } .node small { display:none; }
  .reqbar { padding:10px; } .reqbar .send { padding:9px 10px; }
  .api-split { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto; align-content:start; }
  .api-split > div + div { border-left:0; border-top:1px solid var(--line); }
  .json { font-size:11.5px; line-height:1.55; } .mchecks { gap:6px; font-size:12.5px; }
  .resp-meta .pill:nth-child(4) { display:none; }
  .notes { grid-template-columns:minmax(0, 1fr); } .side { display:none; } .note { padding:16px; }
  .sheet-split { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); }
  .mgrid { font-size:11.5px; } .mgrid th, .mgrid td { padding:7px 6px; } .mgrid tr > :nth-child(4) { display:none; }
  .chart { padding:12px 14px; border-top:1px solid var(--line); }
  .agent .name code { display:none; } .agent .acts span:nth-child(n+3) { display:none; }
  .caption { flex-direction:column; gap:4px; }
}

/* ---- the real thing ---- */
.real-strip { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.real-strip a { display:block; text-decoration:none; color:var(--muted); font-size:.92rem; }
.real-strip a span { display:block; margin-top:10px; }
.real-strip a:hover { color:var(--fg); }
.frame { margin:0; border-radius:12px; overflow:hidden; background:#1f1f1f; border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(255,46,151,.35), 0 20px 40px -20px rgba(0,0,0,.8); }
.real-shot { transition:transform .4s var(--ease), border-color .3s; }
.real-strip a:hover .real-shot { transform:translateY(-4px) rotate(-.6deg); border-color:var(--pink-soft); }
@media (max-width:860px) { .real-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:480px) { .real-strip { grid-template-columns:minmax(0, 1fr); } }

/* ---- stats ---- */
.stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.stat { background:var(--bg); padding:26px 22px; display:grid; gap:6px; align-content:start; }
.stat b { font:800 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.stat b em { font-style:normal; color:var(--pink); }
.stat > span { color:var(--muted); font-size:.92rem; line-height:1.45; }
@media (max-width:760px) { .stats { grid-template-columns:repeat(2, minmax(0, 1fr)); } .stat { padding:20px 16px; } }

/* ---- Claude cards ---- */
.ai-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
@media (max-width:960px) { .ai-grid { grid-template-columns:minmax(0, 1fr); } }
.tcard { position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:22px; display:flex; flex-direction:column; gap:14px; min-width:0;
  transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .25s ease, border-color .25s, opacity .8s var(--ease); }
html.js .tcard.reveal:not(.in) { transform:perspective(900px) translateY(32px); }
.tcard::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,46,151,.14), transparent 45%); }
.tcard:hover { border-color:color-mix(in srgb, var(--pink) 50%, var(--line)); }
.tcard h3 { margin:0; } .tcard p { color:var(--muted); font-size:.95rem; margin:0; }
.screen { background:#141115; border:1px solid var(--line); border-radius:10px; padding:14px; font:12.5px/1.6 var(--mono); min-height:168px; overflow:hidden; position:relative; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:var(--tint-pink); color:var(--pink-soft); font-size:11.5px; }
.chip::after { content:"×"; color:var(--dim); }
.ask .chip { animation:fly 6s var(--ease) infinite; }
@keyframes fly { 0% { transform:translate(40px, -40px) scale(.8); opacity:0; } 12%, 100% { transform:none; opacity:1; } }
.ask .input { margin-top:10px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--fg); }
.reply { margin-top:10px; color:var(--muted); font-family:var(--body); font-size:13px; line-height:1.5; }
.reply span { display:block; animation:lines 6s infinite both; }
.reply span:nth-child(2) { animation-name:lines2; }
@keyframes lines { 0%, 30% { opacity:0; transform:translateY(4px); } 38%, 100% { opacity:1; transform:none; } }
@keyframes lines2 { 0%, 42% { opacity:0; transform:translateY(4px); } 50%, 100% { opacity:1; transform:none; } }
.term .prompt { color:var(--ok); }
.typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:0; animation:typeloop 7s steps(48) infinite; }
@keyframes typeloop { 0% { max-width:0; } 35%, 100% { max-width:52ch; } }
.term .out { display:block; margin-top:8px; color:var(--apricot); white-space:nowrap; overflow:hidden; animation:lines2b 7s infinite both; }
@keyframes lines2b { 0%, 45% { opacity:0; } 52%, 100% { opacity:1; } }
.term .tnote { display:block; margin-top:10px; color:var(--dim); font-family:var(--body); font-size:12px; animation:lines2b 7s infinite both; }
.commit .diff { color:var(--dim); } .commit .diff .add { color:var(--ok); } .commit .diff .del { color:#ff6b81; }
.commit .msg { margin-top:10px; border-top:1px dashed var(--line); padding-top:10px; color:var(--fg); }
.commit .msg .typed { animation:typeloop 7s steps(44) 1s infinite; }
.commit .msg small { display:block; color:var(--muted); font-size:11.5px; white-space:normal; animation:lines2b 7s infinite both; }
.ai-more { margin-top:18px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
@media (max-width:960px) { .ai-more { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .ai-more { grid-template-columns:minmax(0, 1fr); } }
.ai-more div { border-top:1px solid var(--line); padding-top:14px; }
.ai-more h3 { margin:0 0 6px; font:600 1rem/1.3 var(--body); letter-spacing:0; }
.ai-more p { color:var(--muted); font-size:.9rem; margin:0; }
@keyframes fadeloop { 0%, 5% { opacity:0; } 15%, 100% { opacity:1; } }
@media (max-width:700px) {
  .screen { font-size:11.5px; min-height:0; }
  .typed, .commit .msg .typed { white-space:normal; max-width:none; animation:fadeloop 7s infinite both; }
  .ask .chip, .reply span, .term .out, .term .tnote, .commit .msg small { animation:none; }
  .term .out { white-space:normal; word-break:break-word; }
  .tcard { padding:18px; }
  .section-head { margin-bottom:32px; }
}

/* ---- notes band ---- */
.notes-band { background:linear-gradient(180deg, var(--bg), #150f17 40%, var(--bg)); }
.split { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:40px; align-items:center; }
.split.rev { grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); }
.split h2 { margin-bottom:18px; }
@media (max-width:900px) { .split, .split.rev { grid-template-columns:minmax(0, 1fr); } }
.graph3d { position:relative; height:clamp(360px, 42vw, 520px); border-radius:20px; border:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%, #21162a, #120e14 70%); overflow:hidden; cursor:grab; touch-action:pan-y; }
.graph3d:active { cursor:grabbing; }
.graph3d canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.graph3d .graph-still { position:absolute; inset:0; border:0; border-radius:0; box-shadow:none; background:none; }
.graph3d .graph-still img { width:100%; height:100%; object-fit:cover; object-position:78% 40%; opacity:.9; }
.graph3d.gl .graph-still { display:none; }
.graph3d .hud { position:absolute; left:14px; bottom:12px; font:11.5px/1 var(--mono); color:var(--dim); pointer-events:none; display:none; }
.graph3d.gl .hud { display:block; }
.checklist { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.checklist li { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; color:var(--muted); }
.checklist li::before { content:""; width:14px; height:14px; margin-top:5px; border-radius:4px; border:1.5px solid var(--pink); background:linear-gradient(var(--pink), var(--pink)) center / 6px 6px no-repeat; }
.checklist b { color:var(--fg); font-weight:600; }

/* ---- the shelf ---- */
.index { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
@media (max-width:960px) { .index { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px) { .index { grid-template-columns:minmax(0, 1fr); } }
.group { border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--surface); display:flex; flex-direction:column; gap:12px; transition:transform .3s, border-color .3s, opacity .8s var(--ease); }
.group:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--pink) 45%, var(--line)); }
.group header { display:flex; align-items:center; gap:12px; }
.group header .tile-icon { margin:0; }
.group h3 { margin:0; }
.group ul { margin:0; padding:0; list-style:none; display:grid; gap:7px; font-size:.93rem; color:var(--muted); }
.group li { padding-left:16px; position:relative; }
.group li::before { content:""; position:absolute; left:0; top:.72em; width:6px; height:1.5px; background:var(--pink); }
.group li b { color:var(--fg); font-weight:500; }
.more { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }

/* ---- trio ---- */
.trio { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; }
@media (max-width:900px) { .trio { grid-template-columns:minmax(0, 1fr); gap:32px; } }
.trio h3 { font-size:var(--step-2); line-height:1.1; font-weight:800; margin-bottom:14px; }
.trio p { color:var(--muted); }
.trio ul { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; color:var(--muted); font-size:.93rem; }
.trio li { display:flex; gap:10px; }
.trio li::before { content:"›"; color:var(--pink); font-weight:700; }

/* ---- Cafe Cloud ---- */
.cloud-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cloud-list li { display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); color:var(--muted); }
.cloud-list li .icon { color:var(--violet); width:24px; height:24px; margin-top:2px; }
.cloud-list strong { display:block; color:var(--fg); }

/* ---- the CTA ---- */
.cta { position:relative; overflow:hidden; border-top:1px solid var(--line); }
.cta::before { content:""; position:absolute; left:50%; top:100%; width:1200px; height:1200px; transform:translate(-50%, -38%);
  background:conic-gradient(from 0deg, var(--pink), var(--violet), var(--apricot), var(--pink)); filter:blur(120px); opacity:.28;
  animation:spin 30s linear infinite; pointer-events:none; }
@keyframes spin { to { transform:translate(-50%, -38%) rotate(360deg); } }
.cta .wrap { position:relative; display:grid; gap:26px; justify-items:center; text-align:center; padding-block:clamp(80px, 11vw, 140px); }
.cta .wrap > * { margin:0; }
.cta h2 { font-size:var(--step-4); line-height:.98; }
.dl-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; width:min(940px, 100%); text-align:left; }
@media (max-width:800px) { .dl-cards { grid-template-columns:minmax(0, 1fr); width:min(460px, 100%); } }
.dl { border:1px solid var(--line); border-radius:var(--r); background:rgba(26,22,28,.88); padding:22px; display:flex; flex-direction:column; gap:12px; min-width:0; transition:border-color .3s, transform .3s, box-shadow .3s; }
.dl:hover { transform:translateY(-4px); }
.dl.mine { border-color:var(--pink); box-shadow:0 24px 70px -24px var(--glow); }
.dl header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dl header .tile-icon { margin:0; }
.dl h3 { margin:0; font-size:1.4rem; }
.dl p { color:var(--muted); font-size:.93rem; margin:0; }
.yours { display:none; margin-left:auto; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pink-soft); padding:5px 7px; border-radius:5px; background:var(--tint-pink); }
.dl.mine .yours { display:inline-block; }

/* ---- shared bits used across pages ---- */
.tile-icon { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--pink-soft); margin-bottom:10px; background:var(--tint-pink); flex:none; }
.tile-icon .icon { width:22px; height:22px; }
.tile-icon.lg { width:52px; height:52px; border-radius:14px; }
.tile-icon.lg .icon { width:26px; height:26px; }
.checks { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.checks li { display:flex; gap:12px; align-items:flex-start; color:var(--muted); }
.checks li .icon { color:var(--pink-soft); margin-top:3px; width:20px; height:20px; }
.checks strong { color:var(--fg); }
.aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora i { position:absolute; width:min(1000px, 140vw); height:min(1000px, 140vw); border-radius:50%; filter:blur(90px); opacity:.26; }
.aurora i:nth-child(1) { background:radial-gradient(circle, #ff2e97 0%, transparent 62%); top:-560px; left:-220px; animation:drift1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background:radial-gradient(circle, #a58bff 0%, transparent 62%); top:-520px; right:-320px; animation:drift2 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(160px, 90px) scale(1.1); } }
@keyframes drift2 { to { transform:translate(-130px, 120px) scale(.92); } }

/* ---- inner page hero ---- */
.page-hero { position:relative; overflow:hidden; padding:80px 0 44px; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.toc a { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--muted); font-size:.88rem; font-weight:500; }
.toc a .icon { color:var(--pink-soft); width:18px; height:18px; }
.toc a:hover { color:var(--fg); border-color:var(--pink-soft); }

/* ---- features page ---- */
.feature-group { padding-block:72px; border-top:1px solid var(--line); scroll-margin-top:72px; }
.fg { display:grid; gap:48px; }
.fg h2 { font-size:var(--step-2); }
.fg.with-shot { grid-template-columns:1fr 1.15fr; align-items:start; }
.fg.with-shot.flip .fg-copy { order:2; }
.fg:not(.with-shot) .checks { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:32px; }
.fg-shot { position:sticky; top:96px; perspective:1400px; }
.fg-shot .frame { transform:rotateY(-5deg) rotateX(2deg); transition:transform .5s var(--ease); }
.fg.flip .fg-shot .frame { transform:rotateY(5deg) rotateX(2deg); }
.fg-shot .frame:hover { transform:none; }
@media (max-width:900px) { .fg.with-shot { grid-template-columns:1fr; } .fg.with-shot.flip .fg-copy { order:0; } .fg-shot { position:static; } .fg:not(.with-shot) .checks { grid-template-columns:1fr; } }
.final-cta { position:relative; overflow:hidden; text-align:center; padding-block:110px; border-top:1px solid var(--line); }
.final-cta::before { content:""; position:absolute; left:50%; top:100%; width:1000px; height:1000px; transform:translate(-50%, -38%);
  background:conic-gradient(from 0deg, var(--pink), var(--violet), var(--apricot), var(--pink)); filter:blur(120px); opacity:.22; pointer-events:none; }
.final-cta .wrap { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.final-cta .lead { margin-left:auto; margin-right:auto; }
.final-cta .cta-row { justify-content:center; }

/* ---- replaces ---- */
.rp-group { padding-block:56px; border-top:1px solid var(--line); scroll-margin-top:72px; }
.rp-group > h2 { display:flex; align-items:center; gap:14px; font-size:var(--step-2); margin-bottom:24px; }
.rp-group > h2 .tile-icon { margin:0; }
.rp-table { width:100%; border-collapse:separate; border-spacing:0; }
.rp-table th, .rp-table td { text-align:left; vertical-align:top; padding:16px 14px; border-bottom:1px solid var(--line); }
.rp-table thead th { font:500 var(--step--1)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding-top:0; }
.rp-table th[scope=row] { color:var(--fg); font-weight:600; width:24%; }
.rp-table td.feat { color:var(--pink-soft); font-weight:600; width:20%; }
.rp-table td.what { color:var(--muted); }
.rp-table td.st { width:1%; white-space:nowrap; }
.status { display:inline-flex; align-items:center; gap:7px; font:500 12px/1 var(--mono); padding:6px 9px; border-radius:6px; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.today { color:var(--ok); background:rgba(95,211,141,.12); }
.status.coming { color:var(--violet); background:var(--tint-violet); }
@media (max-width:760px) {
  .rp-table thead { display:none; }
  .rp-table, .rp-table tbody, .rp-table tr, .rp-table td, .rp-table th { display:block; width:auto !important; }
  .rp-table tr { border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:12px; background:var(--surface); }
  .rp-table th, .rp-table td { border:0; padding:3px 0; }
  .rp-table td.st { margin-top:8px; }
}
.rp-mini-h { margin:44px 0 14px; font-size:1.3rem; }
.rp-mini { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 32px; margin:0 0 8px; padding:0; list-style:none; }
.rp-mini li { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.95rem; }
.rp-mini li b { color:var(--fg); font-weight:500; }
.rp-mini li span { color:var(--pink-soft); text-align:right; }
@media (max-width:700px) { .rp-mini { grid-template-columns:minmax(0, 1fr); } }

/* ---- roadmap ---- */
.roadmap { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; align-items:start; }
.road-col h2 { display:flex; align-items:center; gap:12px; font-size:1.9rem; margin-bottom:4px; }
.road-col > p { margin:0 0 20px; }
.road-col ol { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.road-dot { width:12px; height:12px; border-radius:50%; background:var(--pink); box-shadow:0 0 14px var(--pink); }
.later .road-dot { background:var(--violet); box-shadow:0 0 14px var(--violet); }
.exploring .road-dot { background:var(--apricot); box-shadow:0 0 14px rgba(255,217,168,.7); }
.road-card { display:flex; gap:14px; padding:20px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
.road-card .tile-icon { margin:0; }
.road-card h3 { font-size:1.1rem; margin-bottom:4px; }
.road-card p { margin:0; color:var(--muted); font-size:.95rem; }
.next .road-card { border-color:rgba(255,46,151,.4); background:linear-gradient(160deg, rgba(255,46,151,.08), var(--surface) 60%); }
@media (max-width:960px) { .roadmap { grid-template-columns:minmax(0, 1fr); } }

/* ---- download ---- */
.downloads { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; align-items:start; }
.dl-card { position:relative; padding:28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; min-width:0; }
.dl-card h2 { font-size:1.8rem; margin:6px 0 0; }
.dl-card .muted { margin:0 0 12px; }
.dl-card.now { border-color:rgba(255,46,151,.5); box-shadow:0 30px 80px -40px var(--glow); }
.dl-card.mine { border-color:var(--pink); }
.dl-buttons { display:grid; gap:10px; margin:6px 0 10px; }
.dl-pending { padding:12px 14px; border-radius:var(--r-sm); background:var(--tint-violet); border:1px solid #5a3a99; color:var(--muted); margin:6px 0 10px; }
.dl-help summary { cursor:pointer; color:var(--muted); min-height:44px; display:flex; align-items:center; font-weight:600; }
.dl-help p { color:var(--muted); font-size:.95rem; }
.soon-badge { align-self:flex-start; font:500 12px/1 var(--mono); padding:6px 10px; border-radius:999px; color:var(--violet); background:var(--tint-violet); }
.notify { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; padding:22px 26px;
  border-radius:var(--r-lg); background:linear-gradient(120deg, rgba(165,139,255,.12), rgba(255,46,151,.1)); border:1px solid var(--line); }
.notify p { margin:0; display:flex; gap:10px; align-items:center; color:var(--muted); }
.notify p .icon { color:var(--ok); }
@media (max-width:900px) { .downloads { grid-template-columns:minmax(0, 1fr); } }

/* ---- pricing ---- */
.toggle { display:inline-flex; padding:4px; border-radius:999px; background:var(--surface); border:1px solid var(--line); gap:4px; margin:8px 0; }
.toggle a { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border-radius:999px; text-decoration:none; color:var(--muted); font-weight:600; font-size:.95rem; }
.toggle a[aria-current=true] { background:var(--fg); color:var(--bg); }
.toggle .save { font:500 11px/1 var(--mono); padding:4px 7px; border-radius:999px; background:var(--tint-pink); color:var(--pink-soft); }
.toggle a[aria-current=true] .save { background:var(--pink); color:#160910; }
.plans { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin:32px 0 0; align-items:stretch; }
.plans.two { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:940px; margin-left:auto; margin-right:auto; }
.plan { position:relative; display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); transition:transform .3s, border-color .3s; }
.plan:hover { transform:translateY(-4px); }
.plan.featured { background:linear-gradient(170deg, rgba(255,46,151,.12), var(--surface) 55%); border-color:rgba(255,46,151,.55); box-shadow:0 40px 100px -40px var(--glow); }
.plan.chosen { outline:2px solid var(--pink-soft); outline-offset:4px; }
.plan .tag { position:absolute; top:-12px; left:28px; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border-radius:999px; color:#160910; background:var(--pink); }
.plan .tag.alt { background:var(--violet); }
.plan .tag.early { background:var(--apricot); }
.plan .price s.was { font:600 1.4rem/1 var(--display); color:var(--dim); text-decoration-thickness:2px; text-decoration-color:var(--pink); }
.eb-ends { margin:6px 0 0; font-size:.85rem; color:var(--apricot); }
.eb-price .per-note { margin-top:8px; color:var(--muted); }
.plans[data-interval=month] .year-only, .plans[data-interval=year] .eb-only { display:none; }
.plan h2 { font-size:2rem; margin:0; }
.plan .for { color:var(--dim); margin:-8px 0 0; }
.plan .price { font:800 3.2rem/1 var(--display); letter-spacing:-.03em; margin:0; }
.plan .price span { font:500 .95rem/1 var(--body); color:var(--dim); letter-spacing:0; }
.plan .price span.amt { font:inherit; color:var(--fg); letter-spacing:-.03em; }
.plan .per-note { color:var(--dim); font-size:.88rem; margin:-6px 0 0; min-height:1.4em; }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; flex:1; align-content:start; }
.plan li { display:flex; gap:10px; color:var(--muted); }
.plan li .icon { color:var(--pink-soft); width:20px; height:20px; margin-top:2px; }
.plan form { margin:0; display:grid; gap:10px; }
.plan .hint { color:var(--dim); font-size:.85rem; margin:0; }
.plan label { font-weight:600; font-size:.9rem; display:block; margin-bottom:4px; }
.plan select { width:100%; min-height:44px; padding:0 12px; font:inherit; color:var(--fg); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); }
.plan .on-plan { padding:12px 14px; border-radius:var(--r-sm); background:rgba(95,211,141,.1); border:1px solid #2f6b47; margin:0; }
.continue { margin-bottom:28px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding:20px 24px;
  border-radius:var(--r-lg); background:linear-gradient(120deg, rgba(255,46,151,.16), rgba(165,139,255,.12)); border:1px solid rgba(255,122,184,.4); }
.continue p { margin:0; }
.continue form { margin:0; }
@media (max-width:860px) { .plans, .plans.two { grid-template-columns:minmax(0, 1fr); max-width:520px; } }
.compare { width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem; }
.compare th, .compare td { text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); }
.compare thead th { font:500 var(--step--1)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.compare td { color:var(--muted); }
.compare td.y { color:var(--pink-soft); font-weight:600; }
.table-scroll { overflow-x:auto; }
.sep { margin-top:20px; }
.sep[data-show=solo] .team, .sep[data-show=team] .solo { display:none; }
.sep-table caption { caption-side:top; }
.sep-table tbody th { font-weight:600; color:var(--fg); }
.ai-note { margin:20px 0 10px; padding:14px 18px; border-radius:var(--r); background:var(--tint-violet); color:var(--muted); }
.ai-note strong { color:var(--fg); }
.sep-table .num { text-align:right; white-space:nowrap; }
.sep-table .src { margin-left:4px; font:500 11px/1 var(--mono); color:var(--dim); }
.sep-table .src:hover { color:var(--pink-soft); }
.sep-table .partial { color:var(--dim); }
.sep-table .free { color:var(--dim); }
.sep-table tfoot th, .sep-table tfoot td { font-weight:700; color:var(--fg); border-bottom:0; }
.sep-table tr.total td { font:800 1.6rem/1 var(--display); color:var(--muted); }
.sep-table tr.total .strike { text-decoration:line-through; text-decoration-color:var(--pink); text-decoration-thickness:2px; }
.sep-table tfoot small { font:500 .85rem/1.6 var(--body); color:var(--dim); }
.sep-table tr.cafe th, .sep-table tr.cafe td { background:var(--tint-pink); }
.sep-table tr.cafe td { font:800 2rem/1 var(--display); color:var(--fg); }
.sep-table tr.cafe small { font:500 .85rem/1.4 var(--body); color:var(--apricot); }
.faq { display:grid; gap:12px; max-width:820px; }
.faq details { border-radius:var(--r); background:var(--surface); border:1px solid var(--line); padding:0 20px; }
.faq details[open] { border-color:var(--line-2); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:60px; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:24px; color:var(--pink-soft); transition:transform .2s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); margin:0 0 18px; }

/* ---- footer ---- */
footer.site-foot { border-top:1px solid var(--line); background:#0d0b0e; padding:56px 0 28px; margin-top:auto; }
footer.site-foot > .wrap:first-child { display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.foot-brand p { color:var(--dim); max-width:38ch; margin-top:12px; }
footer nav { display:flex; flex-direction:column; gap:8px; }
footer nav h2 { font:500 var(--step--1)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:6px 0; }
footer nav a { color:var(--muted); text-decoration:none; }
footer nav a:hover { color:var(--pink-soft); }
footer nav.foot-soon p { color:var(--dim); margin:0; max-width:32ch; }
.nav-soon { margin-left:10px; align-self:center; white-space:nowrap; }
.site-menu .nav-soon { margin:8px 11px; }
.foot-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.05); color:var(--dim); font-size:.85rem; }
@media (max-width:700px) { footer.site-foot > .wrap:first-child { grid-template-columns:1fr 1fr; } .foot-brand { grid-column:1 / -1; } }

@media (max-width:480px) {
  .band { padding-block:56px; }
  .band.tight { padding-top:0; }
  .plan, .dl-card, .dl { padding:22px; }
  .plan .price { font-size:2.6rem; }
  .cta-row .button.big { width:100%; }
}

/* ---- reduced motion: everything still, everything visible ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html.js .reveal, html.js .tcard.reveal:not(.in) { opacity:1; transform:none; }
  .gtext, .typed { max-width:none !important; color:var(--muted); }
  .mhint, .linkq, .term .out, .term .tnote, .reply span, .commit .msg small { opacity:1 !important; }
  .marquee-track { flex-wrap:wrap; width:auto; justify-content:center; }
  .marquee-track span:nth-child(n+20) { display:none; }
  .button:hover, .group:hover, .plan:hover, .dl:hover { transform:none; }
}

/* "What you'd pay separately" on phones: one card per app, totals full width. */
@media (max-width:760px) {
  .sep .table-scroll { overflow:visible; }
  .sep-table thead { display:none; }
  .sep-table, .sep-table tbody, .sep-table tfoot, .sep-table tr, .sep-table th, .sep-table td { display:block; width:auto; }
  .sep-table tbody tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; padding:12px 0; border-bottom:1px solid var(--line); }
  .sep-table tbody th, .sep-table tbody td { border:0; padding:0; }
  .sep-table tbody th { grid-column:1; }
  .sep-table tbody td.num { grid-column:2; grid-row:1; font-weight:600; color:var(--fg); }
  .sep-table tbody td:not(.num) { grid-column:1 / -1; font-size:.88rem; }
  .sep-table tfoot tr { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 12px; }
  .sep-table tfoot th, .sep-table tfoot td { padding:0; }
  .sep-table tr.total td { font-size:1.3rem; }
  .sep-table tr.cafe td { font-size:1.6rem; }
}