/* ===== SM DESIGN SYSTEM v2 — tokens (calibrated to the app) ===== */
:root{
  /* color — calibrated: canvas/ink/lime measured from the app; forest/sage from brief */
  --canvas:#F5F3EC; --surface:#FAF9F5; --surface-raised:#FFFFFF;
  --ink:#20231F; --ink-muted:#6E7169;
  --forest:#1E2B22; --forest-deep:#202820;
  --lime:#C8F43D; --lime-deep:#A8D94F; --lime-text:#5C761D; --lime-soft:#E9F7C0; --sage:#E2EADF;
  --line:rgba(25,38,27,.12); --line-strong:rgba(25,38,27,.22);
  /* legacy aliases (existing rules keep working) */
  --charcoal:#262A24; --offwhite:var(--canvas); --white:var(--surface-raised); --muted:var(--ink-muted);
  /* type */
  --font-ui:'Instrument Sans','Space Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace; --font-hand:'Caveat',cursive;
  --fs-display:clamp(40px,5.4vw,72px); --fs-h2:clamp(28px,3.4vw,44px); --fs-h3:clamp(18px,2vw,22px);
  --fs-body:clamp(15px,1.15vw,17px); --fs-small:13.5px; --fs-meta:11.5px;
  /* space & shape */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --radius:20px;
  --shadow-sm:0 2px 8px -4px rgba(32,35,31,.16);
  --shadow-soft:0 10px 30px -12px rgba(32,35,31,.14);
  --shadow:0 24px 60px -20px rgba(32,35,31,.18);
  /* layout: breakpoints designed at 1600/1440/1280/1024/768/430/390/360 */
  --maxw:1180px;
  /* layers */
  --z-nav:100; --z-menu:99; --z-modal:200; --z-toast:210;
  /* motion */
  --dur-1:.25s; --dur-2:.45s; --dur-3:.7s; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans','Space Grotesk',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap,
[data-y~="wrap"]{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:'Space Mono',monospace}
.marker{font-family:'Caveat',cursive}
.eyebrow,
[data-y~="eyebrow"]{
  display:block;margin-bottom:14px;
  font-family:'Space Mono',monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime-text);font-weight:700;
}
h1,h2,h3{letter-spacing:-.02em;line-height:1.05;font-weight:700}
section{position:relative}
.lime-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--lime);vertical-align:-.05em;margin-left:-.34em;position:relative;z-index:-1}

/* ---------- buttons ---------- */
.btn,
[data-y~="btn"]{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;
  will-change:transform;white-space:nowrap;
}
.btn-primary,
[data-y~="btn-primary"]{background:var(--ink);color:#fff;box-shadow:0 10px 26px -10px rgba(32,35,31,.55),0 0 0 1px rgba(32,35,31,.9) inset}
.btn-primary::before,
[data-y~="btn-primary"]::before{content:"";width:13px;height:13px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D1F349' d='m12 2-2 6-6 2 6 2 2 6 2-6 6-2-6-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-primary:hover,
[data-y~="btn-primary"]:hover{box-shadow:0 14px 32px -10px rgba(32,35,31,.6),0 0 0 3px rgba(200,244,61,.45)}
.btn-primary:hover,
[data-y~="btn-primary"]:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(168,201,59,.85)}
.btn-ghost,
[data-y~="btn-ghost"]{background:transparent;color:var(--ink);border-color:rgba(20,20,20,.18)}
.btn-ghost:hover,
[data-y~="btn-ghost"]:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost.on-dark,
[data-y~="btn-ghost"][data-y~="on-dark"]{color:var(--white);border-color:rgba(255,255,255,.28)}
.btn-ghost.on-dark:hover,
[data-y~="btn-ghost"][data-y~="on-dark"]:hover{border-color:var(--white)}
.btn-lg,
[data-y~="btn-lg"]{font-size:18px;padding:17px 34px}
.cta-note,
[data-y~="cta-note"]{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--muted);margin-top:12px}
.cta-note.on-dark,
[data-y~="cta-note"][data-y~="on-dark"]{color:rgba(255,255,255,.6)}

/* ---------- nav ---------- */
.nav,
[data-y~="nav"]{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  width:calc(100% - 32px);max-width:1220px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 14px 11px 24px;border-radius:20px;
  background:rgba(250,249,245,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(32,35,31,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 32px -16px rgba(20,20,20,.24);
  transition:box-shadow .3s var(--ease),background .3s var(--ease),top .3s var(--ease);
}
.nav.scrolled,
[data-y~="nav"].scrolled{
  background:rgba(250,249,245,.97);top:10px;
  padding-top:8px;padding-bottom:8px;
  box-shadow:0 16px 38px -18px rgba(20,20,20,.4);
}
.logo,
[data-y~="logo"]{position:relative;display:inline-flex;align-items:center;font-weight:700;font-size:22px;letter-spacing:-.03em}
.logo img,
[data-y~="logo"] img{height:40px;width:auto;display:block}
.logo .brandmark,
[data-y~="logo"] [data-y~="brandmark"]{height:40px;width:auto;display:block}
.nav-links,
[data-y~="nav-links"]{display:flex;gap:22px;align-items:center;flex-wrap:nowrap}
.nav-links a,
[data-y~="nav-links"] a{position:relative;font-size:14.5px;color:var(--ink);opacity:.82;transition:opacity .2s,color .2s;white-space:nowrap}
.nav-links a::after,
[data-y~="nav-links"] a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--lime-deep);transform:scaleX(0);transform-origin:left center;transition:transform .28s var(--ease);box-shadow:0 0 8px rgba(200,244,61,.85)}
.nav-links a:hover,
[data-y~="nav-links"] a:hover{opacity:1}
.nav-links a:hover::after,
[data-y~="nav-links"] a:hover::after{transform:scaleX(1)}
.nav-links a.active,
[data-y~="nav-links"] a.active{opacity:1}.nav-links a.active::after,
[data-y~="nav-links"] a.active::after{transform:scaleX(1)}
.nav-login,
[data-y~="nav-login"]{display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--ink);padding:9px 16px;border-radius:999px;border:1.5px solid rgba(20,20,20,.16);transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s;white-space:nowrap}
.nav-login:hover,
[data-y~="nav-login"]:hover{border-color:var(--ink);background:rgba(20,20,20,.05);transform:translateY(-1px);box-shadow:0 7px 16px -10px rgba(20,20,20,.55)}
@media(max-width:1120px){.nav-links,
[data-y~="nav-links"]{gap:16px}.nav-links a,
[data-y~="nav-links"] a{font-size:14px}}
@media(max-width:860px){.nav-login,
[data-y~="nav-login"]{display:none}}
.nav-start:hover,
[data-y~="nav-start"]:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 4px rgba(200,244,61,.28),0 14px 30px -8px rgba(168,201,59,1);animation:none}
.nav-cta,
[data-y~="nav-cta"]{display:flex;gap:12px;align-items:center}
.nav .btn,
[data-y~="nav"] [data-y~="btn"]{padding:10px 18px;font-size:14.5px;white-space:nowrap}
.nav-start,
[data-y~="nav-start"]{opacity:0;max-width:0;padding-left:0;padding-right:0;margin-left:-12px;border:0;overflow:hidden;white-space:nowrap;pointer-events:none;transform:translateX(10px);transition:all .4s var(--ease)}
.nav.scrolled .nav-start,
[data-y~="nav"].scrolled [data-y~="nav-start"]{opacity:1;max-width:280px;padding-left:18px;padding-right:18px;margin-left:0;transform:none;pointer-events:auto}
.menu-toggle{display:none}
/* ---------- mobile menu ---------- */
.nav-burger,
[data-y~="nav-burger"]{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;border-radius:12px;flex:none}
.nav-burger span,
[data-y~="nav-burger"] span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav-burger.open span:nth-child(1),
[data-y~="nav-burger"].open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2),
[data-y~="nav-burger"].open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3),
[data-y~="nav-burger"].open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu,
[data-y~="mobile-menu"]{position:fixed;top:82px;left:16px;right:16px;z-index:99;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(20,20,20,.08);border-radius:20px;box-shadow:0 24px 60px -18px rgba(20,20,20,.35);padding:10px;display:none;flex-direction:column}
.mobile-menu.open,
[data-y~="mobile-menu"].open{display:flex}
.mobile-menu>a,
[data-y~="mobile-menu"]>a{padding:13px 16px;font-size:16px;font-weight:600;border-radius:12px}
.mobile-menu>a:hover,.mobile-menu>a:active,
[data-y~="mobile-menu"]>a:hover,[data-y~="mobile-menu"]>a:active{background:rgba(200,244,61,.25)}
.mm-cta,
[data-y~="mm-cta"]{display:flex;flex-direction:column;gap:10px;padding:12px 6px 6px;border-top:1px solid var(--line);margin-top:8px}
.mm-cta .btn,
[data-y~="mm-cta"] [data-y~="btn"]{width:100%;justify-content:center}
@media(max-width:980px){
  .nav-links,
[data-y~="nav-links"]{display:none}
  .nav-start,
[data-y~="nav-start"]{opacity:1;max-width:none;padding-left:18px;padding-right:18px;margin-left:0;transform:none;pointer-events:auto}
  .nav-burger,
[data-y~="nav-burger"]{display:flex}
}
@media(max-width:600px){.nav .nav-start,
[data-y~="nav"] [data-y~="nav-start"]{display:none}}

/* ---------- hero ---------- */
.hero,
[data-y~="hero"]{
  background:
    linear-gradient(135deg,#FAFBEE 0%,#F5F6E9 42%,#F0EFE7 100%);
  color:var(--ink);
  padding:160px 0 90px;overflow:hidden;position:relative;
}
.hero::before,
[data-y~="hero"]::before{
  content:"";position:absolute;top:-140px;right:-90px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,244,61,.6),rgba(200,244,61,0) 62%);
  filter:blur(10px);z-index:0;pointer-events:none;opacity:.7;
}
.grid-bg,
[data-y~="grid-bg"]{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.3px,transparent 1.3px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 40%,transparent 100%);
  z-index:0;
}
.hero .grid-bg,
[data-y~="hero"] [data-y~="grid-bg"]{background-image:radial-gradient(rgba(20,20,20,.09) 1.3px,transparent 1.3px);animation:griddrift 22s linear infinite}
.hero .wrap,
[data-y~="hero"] [data-y~="wrap"]{position:relative;z-index:2}
.hero-grid,
[data-y~="hero-grid"]{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(28px,3.5vw,48px);align-items:center}
.hero h1,
[data-y~="hero"] h1{font-size:clamp(40px,5.4vw,68px);color:var(--ink)}
.hero h1 .hl,
[data-y~="hero"] h1 [data-y~="hl"]{position:relative;white-space:nowrap;z-index:1}
.hero h1 .hl::after,
[data-y~="hero"] h1 [data-y~="hl"]::after{
  content:"";position:absolute;left:-5px;right:-5px;bottom:.06em;height:.34em;
  background:var(--lime);z-index:-1;border-radius:4px;transform:rotate(-1.2deg);
}
.hero-sub,
[data-y~="hero-sub"]{font-size:clamp(17px,2vw,21px);color:var(--muted);margin:24px 0 14px;max-width:520px}
.hero-eyebrow,
[data-y~="hero-eyebrow"]{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:24px}
.hero-eyebrow i,
[data-y~="hero-eyebrow"] i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(200,244,61,.28);flex:none}
.hero-actions,
[data-y~="hero-actions"]{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-actions .btn-lg,
[data-y~="hero-actions"] [data-y~="btn-lg"]{padding:15px 24px;font-size:16px;white-space:nowrap}
.hero-badges,
[data-y~="hero-badges"]{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
.hero-badge,
[data-y~="hero-badge"]{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);font-family:'Space Mono',monospace}
.hero-badge svg,
[data-y~="hero-badge"] svg{flex:none}
@keyframes griddrift{from{background-position:0 0}to{background-position:30px 30px}}

/* ---------- live app demo ---------- */
.demo,
[data-y~="demo"]{
  background:var(--white);border-radius:16px;border:1px solid rgba(20,20,20,.12);
  box-shadow:0 44px 90px -32px rgba(0,0,0,.5),0 0 90px -8px rgba(200,244,61,.55),0 0 0 1px rgba(255,255,255,.6) inset;
  overflow:hidden;position:relative;
  transform:perspective(1700px) rotateY(-7deg) rotateX(3deg);
  transition:transform .6s var(--ease);
}
.demo:hover,
[data-y~="demo"]:hover{transform:perspective(1700px) rotateY(-2deg) rotateX(1deg)}
.app,
[data-y~="app"]{position:relative;font-size:11px;color:var(--ink);line-height:1.25}
.app .cursor,
[data-y~="app"] .cursor{position:absolute;left:50%;top:62%;width:19px;height:19px;z-index:20;opacity:0;pointer-events:none;transition:left .55s var(--ease),top .55s var(--ease),opacity .3s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.app .cursor svg,
[data-y~="app"] .cursor svg{display:block;width:100%;height:100%}
.app .cursor.press,
[data-y~="app"] .cursor.press{transform:scale(.8)}
.app .cursor::after,
[data-y~="app"] .cursor::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:5px;border-radius:50%;border:2px solid var(--lime-deep);opacity:0;transform:translate(-50%,-50%)}
.app .cursor.click::after,
[data-y~="app"] .cursor.click::after{animation:curripple .45s ease-out}
@keyframes curripple{from{width:5px;height:5px;opacity:.9}to{width:26px;height:26px;opacity:0}}
.app-top,
[data-y~="app-top"]{position:relative;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#F5F4EF;border-bottom:1px solid #E9E6DC}
.app-top .left,
[data-y~="app-top"] [data-y~="left"]{background:#fff;border:1px solid #E7E4DA;border-radius:10px;padding:5px 9px;box-shadow:0 2px 8px -4px rgba(32,35,31,.18)}
.t-doc,
[data-y~="t-doc"]{display:inline-flex;align-items:center;gap:4px;background:var(--ink);color:#fff;font-weight:600;font-size:8.5px;border-radius:8px;padding:5px 9px;margin-left:8px;white-space:nowrap}
.app-top .t-title,
[data-y~="app-top"] .t-title{position:absolute;left:50%;transform:translateX(-50%);color:#9a9a9a;font-size:9.5px;display:flex;gap:5px;align-items:center}
.app-top .left,.app-top .right,
[data-y~="app-top"] [data-y~="left"],[data-y~="app-top"] [data-y~="right"]{display:flex;align-items:center;gap:10px}
.app-top .t-search,
[data-y~="app-top"] .t-search{color:#a3a3a3;display:flex;align-items:center;gap:5px}
.app-top .t-name,
[data-y~="app-top"] [data-y~="t-name"]{font-weight:700;display:flex;align-items:center;gap:3px;letter-spacing:-.02em}
.app-top .t-name .dot,
[data-y~="app-top"] [data-y~="t-name"] .dot{width:5px;height:5px;border-radius:50%;background:var(--lime-deep);display:inline-block}
.app-top .share,
[data-y~="app-top"] [data-y~="share"]{background:var(--ink);color:#fff;border-radius:999px;padding:5px 11px;font-weight:600;display:flex;gap:5px;align-items:center}
.app-top .ava,
[data-y~="app-top"] [data-y~="ava"]{width:18px;height:18px;border-radius:50%;background:var(--lime);border:1px solid var(--lime-deep)}
.app-top .ico,
[data-y~="app-top"] [data-y~="ico"]{color:#c2c2c2}
.app-body,
[data-y~="app-body"]{display:flex;align-items:stretch;height:315px;background:#F2F1EC}
.app-tools,
[data-y~="app-tools"]{width:40px;flex:none;margin:8px 0 8px 8px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid #E7E4DA;border-radius:12px;box-shadow:0 6px 18px -10px rgba(32,35,31,.25);align-self:flex-start;max-height:calc(100% - 16px);overflow:hidden}
.app-tools .tool,
[data-y~="app-tools"] [data-y~="tool"]{position:relative;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#8d8d8d}
.app-tools .tool.dark,
[data-y~="app-tools"] [data-y~="tool"][data-y~="dark"]{background:var(--ink);color:#fff}
.app-tools .tool.act,
[data-y~="app-tools"] [data-y~="tool"][data-y~="act"]{background:#ececec;color:var(--ink)}
.app-tools .tool .sc,
[data-y~="app-tools"] [data-y~="tool"] [data-y~="sc"]{position:absolute;right:2px;bottom:-1px;font-size:6px;font-weight:700;color:#c6c6c6;font-family:'Space Mono',monospace}
.app-tools .tool.dark .sc,
[data-y~="app-tools"] [data-y~="tool"][data-y~="dark"] [data-y~="sc"]{display:none}
.app-tools .sep,
[data-y~="app-tools"] [data-y~="sep"]{width:18px;height:1px;background:var(--line)}
.app-canvas,
[data-y~="app-canvas"]{flex:1;position:relative;overflow:hidden;background:#F2F1EC;
  background-image:radial-gradient(rgba(20,20,20,.07) 1px,transparent 1px);background-size:16px 16px}
.app-panel,
[data-y~="app-panel"]{width:118px;flex:none;margin:8px 8px 8px 0;padding:11px 10px;background:#fff;border:1px solid #E7E4DA;border-radius:12px;box-shadow:0 6px 18px -10px rgba(32,35,31,.25);display:flex;flex-direction:column;gap:11px;overflow:hidden;align-self:flex-start;max-height:calc(100% - 16px)}
.app-panel .p-head,
[data-y~="app-panel"] [data-y~="p-head"]{display:flex;justify-content:space-between;align-items:center;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:#8d8d8d;text-transform:uppercase}
.app-panel .plabel,
[data-y~="app-panel"] [data-y~="plabel"]{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.09em;color:#a3a3a3;text-transform:uppercase;margin-bottom:5px}
.swatches,
[data-y~="swatches"]{display:flex;flex-wrap:wrap;gap:5px}
.swatches i,
[data-y~="swatches"] i{width:13px;height:13px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.08)}
.swatches.fill i,
[data-y~="swatches"][data-y~="fill"] i{border-radius:50%}
.rainbow,
[data-y~="rainbow"]{background:conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#3b82f6,#8b5cf6,#ec4899,#ef4444)}
.hexrow,
[data-y~="hexrow"]{display:flex;align-items:center;gap:5px;margin-top:6px}
.hexrow .hex,
[data-y~="hexrow"] [data-y~="hex"]{flex:1;border:1px solid var(--line);border-radius:5px;padding:3px 5px;font-family:'Space Mono',monospace;font-size:8px;color:#777}
.hexrow .hexsw,
[data-y~="hexrow"] [data-y~="hexsw"]{width:16px;height:16px;border-radius:4px;background:#141414}
.chips,
[data-y~="chips"]{display:flex;gap:4px}
.chips .chip,
[data-y~="chips"] [data-y~="chip"]{flex:1;text-align:center;font-size:7.5px;padding:4px 0;border-radius:5px;background:#f0f0f0;color:#9a9a9a}
.chips .chip.act,
[data-y~="chips"] [data-y~="chip"][data-y~="act"]{background:var(--ink);color:#fff}
.app-panel .slider,
[data-y~="app-panel"] [data-y~="slider"]{margin-top:7px;height:3px;border-radius:2px;background:#e6e6e6;position:relative}
.app-panel .slider i,
[data-y~="app-panel"] [data-y~="slider"] i{position:absolute;left:10%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--ink)}
.wbars,
[data-y~="wbars"]{display:flex;gap:5px}
.wbars i,
[data-y~="wbars"] i{flex:1;height:16px;border-radius:5px;background:#f0f0f0;display:grid;place-items:center}
.wbars i.act,
[data-y~="wbars"] i[data-y~="act"]{background:var(--ink)}
.wbars .ln,
[data-y~="wbars"] [data-y~="ln"]{height:0;border-top:1.5px solid #9a9a9a;width:11px}
.wbars i.act .ln,
[data-y~="wbars"] i[data-y~="act"] [data-y~="ln"]{border-top-color:#fff}
.ai-pill,
[data-y~="ai-pill"]{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--lime);color:var(--ink);
  font-weight:700;border-radius:999px;padding:7px 14px;display:flex;gap:6px;align-items:center;
  box-shadow:0 6px 16px -6px rgba(168,201,59,.85);z-index:4;font-size:11px}
.zoomlvl{display:none}


#board{position:absolute;inset:0}
.node{position:absolute;background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:6px 9px;font-size:10px;font-weight:600;
  box-shadow:0 4px 10px -6px rgba(0,0,0,.28);opacity:0;transform:scale(.55);
  transition:opacity .45s var(--ease),transform .45s var(--ease);white-space:nowrap}
.node.sticky{background:#fdf6c8;border-color:#ecdf93;font-weight:500;transform:scale(.55) rotate(-3deg)}
.node.lime{background:var(--lime);border-color:var(--lime-deep)}
.node.show{opacity:1;transform:scale(1)}
.node.sticky.show{transform:scale(1) rotate(-3deg)}
.edge{position:absolute;height:1.5px;background:#bcbcbc;transform-origin:left center;opacity:0;
  transition:opacity .4s,width .5s var(--ease);z-index:1}
.edge.show{opacity:1}
.caret,
[data-y~="caret"]{display:inline-block;width:1.5px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
/* create-with-AI modal */
.ai-modal,
[data-y~="ai-modal"]{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scale(1);
  width:78%;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.45);padding:13px;z-index:6;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ai-modal.hidden,
[data-y~="ai-modal"][data-y~="hidden"]{opacity:0;transform:translate(-50%,-50%) scale(.92);pointer-events:none}
.ai-modal .m-head,
[data-y~="ai-modal"] [data-y~="m-head"]{display:flex;align-items:flex-start;gap:7px;margin-bottom:9px}
.ai-modal .m-spark,
[data-y~="ai-modal"] [data-y~="m-spark"]{width:18px;height:18px;border-radius:6px;background:var(--lime);color:var(--ink);display:grid;place-items:center;flex:none}
.ai-modal .m-title,
[data-y~="ai-modal"] [data-y~="m-title"]{font-weight:700;font-size:11px}
.ai-modal .m-sub,
[data-y~="ai-modal"] [data-y~="m-sub"]{color:#a3a3a3;font-size:9px}
.ai-modal .m-x,
[data-y~="ai-modal"] [data-y~="m-x"]{margin-left:auto;color:#c2c2c2}
.ai-modal .m-field,
[data-y~="ai-modal"] [data-y~="m-field"]{position:relative;background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:9px;min-height:46px;font-size:10px;color:var(--ink)}
.ai-modal .m-ph,
[data-y~="ai-modal"] [data-y~="m-ph"]{color:#b7b7b7}
.ai-modal .m-count,
[data-y~="ai-modal"] [data-y~="m-count"]{position:absolute;right:8px;bottom:6px;font-size:8px;color:#bcbcbc}
.ai-modal .m-pdf,
[data-y~="ai-modal"] [data-y~="m-pdf"]{display:flex;align-items:center;gap:5px;margin-top:8px;color:#9a9a9a;font-size:9px}
.ai-modal .m-ctx,
[data-y~="ai-modal"] [data-y~="m-ctx"]{position:relative;margin-top:9px;background:#f5f6f1;border:1px solid #e7e9df;border-radius:8px;padding:8px 9px}
.ai-modal .m-ctx-t,
[data-y~="ai-modal"] [data-y~="m-ctx-t"]{font-weight:700;font-size:9.5px}
.ai-modal .m-ctx-s,
[data-y~="ai-modal"] [data-y~="m-ctx-s"]{color:#9a9a9a;font-size:8.5px;margin-top:2px;max-width:80%}
.ai-modal .m-toggle,
[data-y~="ai-modal"] [data-y~="m-toggle"]{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:24px;height:13px;border-radius:999px;background:#dfe0da;flex:none}
.ai-modal .m-toggle i,
[data-y~="ai-modal"] [data-y~="m-toggle"] i{position:absolute;top:1.5px;left:1.5px;width:10px;height:10px;border-radius:50%;background:#fff}
.ai-modal .m-tip,
[data-y~="ai-modal"] [data-y~="m-tip"]{margin-top:8px;color:#a8a8a8;font-size:8.5px;line-height:1.35}
.ai-modal .m-actions,
[data-y~="ai-modal"] [data-y~="m-actions"]{display:flex;justify-content:flex-end;gap:9px;margin-top:11px;align-items:center}
.ai-modal .m-cancel,
[data-y~="ai-modal"] [data-y~="m-cancel"]{color:#9a9a9a;font-size:10px}
.ai-modal .m-gen,
[data-y~="ai-modal"] [data-y~="m-gen"]{background:var(--lime);color:var(--ink);font-weight:700;border-radius:7px;padding:6px 12px;font-size:10px;display:flex;gap:5px;align-items:center;cursor:pointer}
.ai-modal .m-gen .spin,
[data-y~="ai-modal"] [data-y~="m-gen"] [data-y~="spin"]{width:9px;height:9px;border:2px solid rgba(20,20,20,.3);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;display:none}
.ai-modal .m-gen.loading .spin,
[data-y~="ai-modal"] [data-y~="m-gen"].loading [data-y~="spin"]{display:block}
/* welcome dialog (step 1 of the AI flow) */
.wa-modal .wa-spark,
[data-y~="wa-modal"] [data-y~="wa-spark"]{background:var(--lime);color:var(--ink)}
.wa-modal .wa-title,
[data-y~="wa-modal"] [data-y~="wa-title"]{font-weight:700;font-size:10.5px;line-height:1.35;max-width:176px}
.wa-modal .wa-review,
[data-y~="wa-modal"] [data-y~="wa-review"]{display:none}
.wa-modal.review .wa-input,
[data-y~="wa-modal"].review [data-y~="wa-input"]{display:none}
.wa-modal.review .wa-review,
[data-y~="wa-modal"].review [data-y~="wa-review"]{display:block}
.wa-rev-t{font-weight:700;font-size:10px;margin-bottom:7px}
.wa-secs,
[data-y~="wa-secs"]{background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-height:100px;overflow:hidden}
.wa-sec{margin-bottom:7px;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.wa-sec:last-child{margin-bottom:0}
.wa-sec.show{opacity:1;transform:none}
.wa-sec b{display:block;font-size:9.5px;color:var(--ink)}
.wa-sec p{font-size:8.5px;color:#8a8a8a;line-height:1.35;margin:2px 0 0}
.wa-ghost,
[data-y~="wa-ghost"]{font-size:10px;font-weight:600;border:1px solid rgba(20,20,20,.35);border-radius:999px;padding:5px 11px;color:var(--ink)}
.ai-modal .m-gen,
[data-y~="ai-modal"] [data-y~="m-gen"]{border-radius:999px}
.wa-tabs,
[data-y~="wa-tabs"]{display:flex;background:#f2f2ef;border-radius:999px;padding:3px;margin-bottom:9px}
.wt,
[data-y~="wt"]{flex:1;text-align:center;font-size:8.5px;font-weight:600;color:#8a8a8a;padding:5px 6px;border-radius:999px;white-space:nowrap}
.wt.on,
[data-y~="wt"][data-y~="on"]{background:var(--ink);color:#fff}
.wa-sp-l,
[data-y~="wa-sp-l"]{font-family:'Space Mono',monospace;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--lime-deep);margin-bottom:6px}
.wa-roles,
[data-y~="wa-roles"]{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;margin-bottom:8px}
.wr,
[data-y~="wr"]{flex:none;font-size:8px;font-weight:600;color:var(--ink);border:1px solid #e0e0dc;border-radius:999px;padding:4px 9px;background:#fff;transition:background .25s,color .25s}
.wr.on,
[data-y~="wr"][data-y~="on"]{background:var(--lime);border-color:var(--lime-deep)}
.wa-ideas,
[data-y~="wa-ideas"]{display:flex;flex-direction:column;margin-bottom:8px}
.wa-idea{display:flex;align-items:center;gap:7px;font-size:8.5px;color:#3a3a3a;padding:5px 4px;border-bottom:1px solid #f0f0ee;opacity:0;transform:translateY(3px);transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.wa-idea.show{opacity:1;transform:none}
.wa-idea.sel,
.wa-idea[data-y~="sel"]{background:rgba(200,244,61,.25);border-radius:6px}
.wa-idea i{font-style:normal;font-family:'Space Mono',monospace;font-size:7px;color:#b5b5b5}
/* doc scene: board → finished PDF document */
.docov{position:absolute;inset:0;background:rgba(251,251,250,.96);display:flex;align-items:center;justify-content:center;z-index:8;opacity:0;transition:opacity .35s var(--ease)}
.docov.show{opacity:1}
.doc-card{width:152px;background:#fff;border:1px solid #e2e2e2;border-radius:6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);padding:14px 13px}
.doc-brand{font-family:'Space Mono',monospace;font-size:6.5px;color:#9a9a9a;text-transform:uppercase;letter-spacing:.08em}
.doc-title{font-weight:700;font-size:10.5px;margin:4px 0 9px;color:var(--ink)}
.doc-line{height:4px;border-radius:2px;background:#ececec;margin-bottom:5px;opacity:0;transition:opacity .4s}
.docov.write .doc-line{opacity:1}
.doc-prog{height:3px;background:#f0f0f0;border-radius:99px;margin:9px 0 7px;overflow:hidden}
.doc-prog i{display:block;height:100%;width:0;background:var(--lime-deep);transition:width 2.6s linear}
.docov.show .doc-prog i{width:100%}
.doc-status{font-size:7.5px;color:#8a8a8a}
/* hero demo caption chip */
.demo-cap,
[data-y~="demo-cap"]{position:absolute;left:10px;top:46px;bottom:auto;z-index:30;background:rgba(20,20,20,.86);color:#fff;font-size:10px;font-weight:600;letter-spacing:.01em;padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;max-width:78%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-cap.show,
[data-y~="demo-cap"].show{opacity:1;transform:none}
/* board payoff pop */
.zboard{animation:boardPop .5s var(--ease)}
@keyframes boardPop{from{transform:scale(.965);opacity:.6}to{transform:scale(1);opacity:1}}
/* app re-skin: navigator + chrome */
.minimap,
[data-y~="minimap"]{position:absolute;right:10px;bottom:10px;z-index:5;background:#fff;border:1px solid #E7E4DA;border-radius:10px;box-shadow:0 8px 20px -10px rgba(32,35,31,.3);padding:7px 8px;display:flex;flex-direction:column;gap:4px;width:96px}
.mm-top,
[data-y~="mm-top"]{display:flex;align-items:center;gap:4px}
.mm-label,
[data-y~="mm-label"]{font-family:'Space Mono',monospace;font-size:5.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9A595}
.mm-zoom,
[data-y~="mm-zoom"]{margin-left:auto;font-family:'Space Mono',monospace;font-size:6px;color:#8a877a;background:#F2F1EC;border-radius:5px;padding:1px 4px}
.mm-btn,
[data-y~="mm-btn"]{width:11px;height:11px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:7px;line-height:11px;text-align:center}
.mm-name,
[data-y~="mm-name"]{font-size:8px;font-weight:700;color:var(--ink)}
.mm-map,
[data-y~="mm-map"]{display:flex;gap:2px;background:#F5F4ED;border:1px solid #E7E4DA;border-radius:5px;padding:4px}
.mm-map i,
[data-y~="mm-map"] i{flex:1;height:12px;border:1px solid #9DB56F;border-radius:1.5px;background:rgba(200,244,61,.18)}
.ai-pill,
[data-y~="ai-pill"]{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:#fff;font-weight:700;font-size:9px;border-radius:999px;padding:6px 13px;box-shadow:0 8px 20px -8px rgba(32,35,31,.5)}
.ai-pill svg,
[data-y~="ai-pill"] svg{color:var(--lime)}
.ava-js,
[data-y~="ava-js"]{background:var(--lime)!important;color:var(--ink)!important}
.app-tools .tool .sc,
[data-y~="app-tools"] [data-y~="tool"] [data-y~="sc"]{color:#B8B4A4}
.app-tools .tool.act,
[data-y~="app-tools"] [data-y~="tool"][data-y~="act"]{background:#EFEEE6;color:var(--ink)}
.wa-again,
[data-y~="wa-again"]{display:block;margin-top:7px;font-size:8.5px;color:#b5b5b5}
.ai-modal .m-count,
[data-y~="ai-modal"] [data-y~="m-count"]{bottom:-13px;right:2px}
/* in-dialog generating state (mirrors GeneratingState.jsx) */
.m-genstate,
[data-y~="m-genstate"]{display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px 14px 14px;text-align:center}
.ai-modal.generating>*:not(.m-genstate),
[data-y~="ai-modal"].generating>*:not([data-y~="m-genstate"]){display:none!important}
.ai-modal.generating .m-genstate,
[data-y~="ai-modal"].generating [data-y~="m-genstate"]{display:flex}
.gs-spin,
[data-y~="gs-spin"]{position:relative;width:30px;height:30px;border-radius:50%;border:3px solid #f0f0f0;border-top-color:var(--ink);animation:spin 1s linear infinite}
.gs-spin b,
[data-y~="gs-spin"] b{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:var(--ink);animation:spin 1s linear infinite reverse}
.gs-label,
[data-y~="gs-label"]{font-size:10px;font-weight:600;color:#2a2a2a}
.gs-sub,
[data-y~="gs-sub"]{font-size:8.5px;color:#b0b0b0}
.gs-bar,
[data-y~="gs-bar"]{width:82%;height:3px;background:#f0f0f0;border-radius:99px;overflow:hidden;margin-top:3px}
.gs-bar i,
[data-y~="gs-bar"] i{display:block;height:100%;width:0;background:#2a2a2a;border-radius:99px;transition:width .5s linear}
.gs-dots,
[data-y~="gs-dots"]{display:flex;gap:5px;margin-top:2px}
.gs-dots i,
[data-y~="gs-dots"] i{width:4px;height:4px;border-radius:50%;background:#e2e2e2;transition:background .3s}
.gs-dots i.on,
[data-y~="gs-dots"] i[data-y~="on"]{background:#5a5a5a}
.cu-title,
[data-y~="cu-title"]{font-family:'Caveat',cursive;font-size:15px;font-weight:700;line-height:1.1;padding-top:1px}
.cu-body,
[data-y~="cu-body"]{font-size:9.5px;color:#4a4a4a;line-height:1.5;margin:1px 0 9px}
.cu-check,
[data-y~="cu-check"]{display:flex;align-items:center;gap:6px;font-size:9px;color:#7a7a7a}
.cu-box,
[data-y~="cu-box"]{width:10px;height:10px;border:1px solid #c9c9c9;border-radius:3px;flex:none}
.ai-modal .m-field,
[data-y~="ai-modal"] [data-y~="m-field"]{max-height:76px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.ai-modal .m-field.filled,
[data-y~="ai-modal"] [data-y~="m-field"].filled{border-color:var(--lime-deep);box-shadow:0 0 0 2px rgba(200,244,61,.5)}
.wa-secs,
[data-y~="wa-secs"]{position:relative}
.wa-secs::after,
[data-y~="wa-secs"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(180deg,transparent,#fafafa)}
.zframe.pob{grid-column:1/-1}
.pob-card{border:1px solid #1e1e1e;padding:5px 6px;margin-top:4px}
.pob-h{font-family:'Caveat',cursive;font-weight:700;font-size:9.5px;color:#1e1e1e;line-height:1.2}
.present .pob-card{margin-top:6px;padding:7px 9px}
.present .pob-h{font-size:12px}
.present .pob-p{font-size:10px}
.pob-p{font-family:'Caveat',cursive;font-size:8px;color:#1e1e1e;line-height:1.35;margin-top:1px}
.board-replay,
[data-y~="board-replay"]{position:absolute;top:9px;right:9px;font-size:9px;font-family:'Space Mono',monospace;
  background:rgba(255,255,255,.92);border:1px solid var(--line);padding:4px 9px;border-radius:999px;cursor:pointer;
  display:flex;gap:5px;align-items:center;color:#9a9a9a;z-index:5}
.board-replay:hover,
[data-y~="board-replay"]:hover{color:var(--ink)}
/* top bar */
.app-top .t-back,
[data-y~="app-top"] [data-y~="t-back"]{display:flex;align-items:center;gap:3px;color:#777;font-weight:600}
.app-top .t-div,
[data-y~="app-top"] [data-y~="t-div"]{width:1px;height:12px;background:var(--line)}
.app-top .t-name,
[data-y~="app-top"] [data-y~="t-name"]{font-weight:700;display:flex;align-items:center;gap:5px;letter-spacing:-.02em;color:var(--ink)}
.app-top .t-spark,
[data-y~="app-top"] [data-y~="t-spark"]{width:15px;height:15px;border-radius:5px;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex:none}
.app-top .t-pen,
[data-y~="app-top"] [data-y~="t-pen"]{color:#bcbcbc}
.app-top .bell,
[data-y~="app-top"] [data-y~="bell"]{color:#c2c2c2;display:grid;place-items:center}
.app-top .ava,
[data-y~="app-top"] [data-y~="ava"]{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700;border:none}
.app-top .ava-j,
[data-y~="app-top"] [data-y~="ava-j"]{background:#f1b24a;color:#fff}
.app-top .ava-js,
[data-y~="app-top"] [data-y~="ava-js"]{background:var(--lime);color:var(--ink)}
.app-top .ico,
[data-y~="app-top"] [data-y~="ico"]{color:#c2c2c2}
/* minimap label */

/* context toggle on */
.ai-modal .m-toggle i,
[data-y~="ai-modal"] [data-y~="m-toggle"] i{transition:left .3s var(--ease)}
.ai-modal .m-toggle.on,
[data-y~="ai-modal"] [data-y~="m-toggle"][data-y~="on"]{background:var(--lime-deep)}
.ai-modal .m-toggle.on i,
[data-y~="ai-modal"] [data-y~="m-toggle"][data-y~="on"] i{left:13px}
/* pdf upload chip */
.ai-modal .m-file,
[data-y~="ai-modal"] [data-y~="m-file"]{display:none;align-items:center;gap:6px;margin-top:7px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:9px;color:var(--ink)}
.ai-modal .m-file.show,
[data-y~="ai-modal"] [data-y~="m-file"].show{display:flex}
.ai-modal .m-file .ficon,
[data-y~="ai-modal"] [data-y~="m-file"] [data-y~="ficon"]{color:#e0524a;flex:none}
.ai-modal .m-file .fn,
[data-y~="ai-modal"] [data-y~="m-file"] [data-y~="fn"]{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.ai-modal .m-file .fbar,
[data-y~="ai-modal"] [data-y~="m-file"] [data-y~="fbar"]{flex:1;height:3px;background:#eee;border-radius:2px;overflow:hidden}
.ai-modal .m-file .fbar i,
[data-y~="ai-modal"] [data-y~="m-file"] [data-y~="fbar"] i{display:block;height:100%;width:6%;background:var(--lime-deep);transition:width .85s linear}
.ai-modal .m-file.uploading .fbar i,
[data-y~="ai-modal"] [data-y~="m-file"].uploading [data-y~="fbar"] i{width:100%}
.ai-modal .m-file .fchk,
[data-y~="ai-modal"] [data-y~="m-file"] [data-y~="fchk"]{display:none;color:var(--lime-deep)}
.ai-modal .m-file.done .fbar,
[data-y~="ai-modal"] [data-y~="m-file"].done [data-y~="fbar"]{display:none}
.ai-modal .m-file.done .fchk,
[data-y~="ai-modal"] [data-y~="m-file"].done [data-y~="fchk"]{display:inline-grid;place-items:center}
/* generated frame + cards + notes */
.frame{position:absolute;inset:6px;background:#fff;border:1px solid #e6e6e6;border-radius:10px;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.3);opacity:0;transform:scale(.985);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.frame.show{opacity:1;transform:none}
.frame-label{position:absolute;top:6px;left:10px;font-family:'Space Mono',monospace;font-size:7px;color:#bcbcbc;letter-spacing:.04em}
.frame-title{position:absolute;top:13px;left:12px;font-family:'Caveat',cursive;font-size:17px;color:var(--ink);font-weight:700}
.node.blue,
.node[data-y~="blue"]{background:#e9f1ff;border-color:#cfe0fb}
.node.green,
.node[data-y~="green"]{background:#e4f6e6;border-color:#bfe3c4}
.node.gray,
.node[data-y~="gray"]{background:#f1f1f1;border-color:#dedede}
.fnote{white-space:normal !important;line-height:1.3;font-weight:500;font-size:8px;border-radius:6px;box-shadow:none;width:auto;max-width:300px;padding:5px 7px}
.fnote.pink,
.fnote[data-y~="pink"]{background:#fde2ea;border-color:#f5c6d6}
.fnote.green,
.fnote[data-y~="green"]{background:#e4f6e6;border-color:#bfe3c4}
/* multi-frame generated board (zoomed-out, like the real app) */
.zboard{position:absolute;inset:8px;display:flex;gap:8px;align-items:center;justify-content:center}
.zframe{flex:1;min-width:0;display:flex;flex-direction:column;background:#FBFAF5;border:1px solid #E3E0D3;border-radius:8px;position:relative;padding:16px 7px 8px;
  box-shadow:0 6px 16px -12px rgba(0,0,0,.3);opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .5s var(--ease),transform .5s var(--ease);overflow:hidden}
.zframe.show{opacity:1;transform:none}
.zlabel,
[data-y~="zlabel"]{position:absolute;top:5px;left:7px;font-family:'Space Mono',monospace;font-size:5.5px;color:#B3AF9F;letter-spacing:.03em;white-space:nowrap;overflow:hidden;max-width:88%;text-overflow:ellipsis}
.ztitle,
[data-y~="ztitle"]{font-family:'Caveat',cursive;font-weight:700;font-size:10px;line-height:1.05;color:var(--ink);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zcard,
[data-y~="zcard"]{border-radius:5px;border:1px solid #e0e0e0;padding:4px;margin-bottom:5px;opacity:0;transform:scale(.92);transition:opacity .4s var(--ease) .15s,transform .4s var(--ease) .15s}
.zcard + .zcard,
[data-y~="zcard"] + [data-y~="zcard"]{transition-delay:.28s}
.zframe.show .zcard,
.zframe.show [data-y~="zcard"]{opacity:1;transform:none}
.zcard .zhead,
[data-y~="zcard"] [data-y~="zhead"]{height:5px;border-radius:3px;margin-bottom:4px;width:62%}
.zcard .zln,
[data-y~="zcard"] [data-y~="zln"]{height:3px;border-radius:2px;background:#e6e6e6;margin-bottom:3px}
.zcard .zln.s,
[data-y~="zcard"] [data-y~="zln"][data-y~="s"]{width:78%;margin-bottom:0}
.zcard.blue,
[data-y~="zcard"][data-y~="blue"]{background:#eef4ff;border-color:#d7e6ff}.zcard.blue .zhead,
[data-y~="zcard"][data-y~="blue"] [data-y~="zhead"]{background:#9cc0ff}
.zcard.yellow,
[data-y~="zcard"][data-y~="yellow"]{background:#fdf8d6;border-color:#efe6a6}.zcard.yellow .zhead,
[data-y~="zcard"][data-y~="yellow"] [data-y~="zhead"]{background:#e8d36a}
.zcard.green,
[data-y~="zcard"][data-y~="green"]{background:#e7f7e9;border-color:#c6e7cb}.zcard.green .zhead,
[data-y~="zcard"][data-y~="green"] [data-y~="zhead"]{background:#86cf93}
.znote,
[data-y~="znote"]{border-radius:5px;padding:4px 5px;margin-top:6px;opacity:0;transform:scale(.95);transition:opacity .4s var(--ease) .34s,transform .4s var(--ease) .34s}
.zframe.show .znote,
.zframe.show [data-y~="znote"]{opacity:1;transform:none}
.znote.pink,
[data-y~="znote"][data-y~="pink"]{background:#fde2ea;border:1px solid #f5c6d6}
.znote.green,
[data-y~="znote"][data-y~="green"]{background:#e7f7e9;border:1px solid #c6e7cb}
.znote .zln,
[data-y~="znote"] [data-y~="zln"]{height:3px;border-radius:2px;background:rgba(0,0,0,.09);margin:2px 0}
.zflow,
[data-y~="zflow"]{position:relative;height:44px;margin:2px 0 4px}
.zflow .zn,
[data-y~="zflow"] [data-y~="zn"]{position:absolute;width:14px;height:10px;border-radius:3px;border:1px solid #d8d8d8;background:#fff}
.zflow .zn.gray,
[data-y~="zflow"] [data-y~="zn"][data-y~="gray"]{background:#f1f1f1}.zflow .zn.blue,
[data-y~="zflow"] [data-y~="zn"][data-y~="blue"]{background:#e9f1ff;border-color:#cfe0fb}.zflow .zn.yellow,
[data-y~="zflow"] [data-y~="zn"][data-y~="yellow"]{background:#fdf6c8;border-color:#ecdf93}.zflow .zn.green,
[data-y~="zflow"] [data-y~="zn"][data-y~="green"]{background:#e4f6e6;border-color:#bfe3c4}
.zflow .ze,
[data-y~="zflow"] [data-y~="ze"]{position:absolute;height:1.5px;background:#cfcfcf;transform-origin:left center}
@media(max-width:560px){.app-panel,
[data-y~="app-panel"]{display:none}.app-tools,
[data-y~="app-tools"]{width:40px}.ztitle,
[data-y~="ztitle"]{font-size:8px}}

/* ---------- generic section ---------- */
.section,
[data-y~="section"]{padding:96px 0}
.section-head,
[data-y~="section-head"]{max-width:660px;margin-bottom:54px}
.section-head.center,
[data-y~="section-head"][data-y~="center"]{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2,
[data-y~="section-head"] h2{font-size:clamp(30px,3.6vw,46px);margin:16px 0 14px}
.section-head p,
[data-y~="section-head"] p{font-size:18px;color:var(--muted)}
.bg-off,
[data-y~="bg-off"]{background:var(--offwhite)}
.bg-ink,
[data-y~="bg-ink"]{background:linear-gradient(180deg,#20231F 0%,#262B23 100%);color:#fff}
.bg-ink .section-head p,
[data-y~="bg-ink"] [data-y~="section-head"] p{color:rgba(255,255,255,.7)}
.bg-ink h2,
[data-y~="bg-ink"] h2{color:var(--white)}

/* reveal */
.reveal,
[data-y~="reveal"]{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in,
[data-y~="reveal"].in{opacity:1;transform:none}
.reveal.d1,
[data-y~="reveal"][data-y~="d1"]{transition-delay:.08s}.reveal.d2,
[data-y~="reveal"][data-y~="d2"]{transition-delay:.16s}.reveal.d3,
[data-y~="reveal"][data-y~="d3"]{transition-delay:.24s}.reveal.d4,
[data-y~="reveal"].d4{transition-delay:.32s}

/* ---------- social proof strip ---------- */
.proof,
[data-y~="proof"]{padding:54px 0;background:linear-gradient(180deg,#FDFCF8 0%,#F0EFE7 100%)}
.proof-grid,
[data-y~="proof-grid"]{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.stat,
[data-y~="stat"]{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;padding:10px 12px;transition:transform .35s var(--ease)}
.stat:hover,
[data-y~="stat"]:hover{transform:translateY(-3px)}
.stat b,
[data-y~="stat"] b{font-size:clamp(38px,4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
.stat b em,
[data-y~="stat"] b em{font-style:normal;font-size:.5em;font-weight:700;color:var(--muted);margin-left:6px;letter-spacing:-.01em}
.stat b.st-lime span,
[data-y~="stat"] b[data-y~="st-lime"] span{color:var(--lime-text)}
.st-label,
[data-y~="st-label"]{font-size:14.5px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.live-dot,
[data-y~="live-dot"]{width:7px;height:7px;border-radius:50%;background:var(--lime-deep);display:inline-block;margin-right:7px;flex-shrink:0;animation:livePulse 2s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(168,201,59,.55)}70%{box-shadow:0 0 0 7px rgba(168,201,59,0)}100%{box-shadow:0 0 0 0 rgba(168,201,59,0)}}
@media(prefers-reduced-motion:reduce){.live-dot,
[data-y~="live-dot"]{animation:none}.hero .grid-bg,
[data-y~="hero"] [data-y~="grid-bg"]{animation:none}.hero::before,
[data-y~="hero"]::before{animation:none}}

/* ---------- problem ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare .col{border-radius:var(--radius);padding:30px;border:1px solid var(--line)}
.compare .old{background:var(--white)}
.compare .new{background:var(--ink);color:var(--white);border-color:var(--ink)}
.compare h3{font-size:20px;margin-bottom:18px}
.compare .new h3{color:var(--lime)}
.compare ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.compare li{display:flex;gap:12px;font-size:16px;align-items:flex-start}
.compare li .mk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}
.compare .old .mk{background:#f3dada;color:#c0392b}
.compare .new .mk{background:var(--lime);color:var(--ink)}
.compare .new li{color:rgba(255,255,255,.85)}

/* ---------- how it works ---------- */

/* ---------- AI explainer showcase ---------- */
.showcase,
[data-y~="showcase"]{display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:center}
.showcase .copy h2,
[data-y~="showcase"] [data-y~="copy"] h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 18px;color:var(--white)}
.showcase .copy p,
[data-y~="showcase"] [data-y~="copy"] p{color:rgba(255,255,255,.72);font-size:17px;margin-bottom:22px}
.feat-list,
[data-y~="feat-list"]{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.feat-list li,
[data-y~="feat-list"] li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.88);font-size:16px}
.feat-list .tick,
[data-y~="feat-list"] [data-y~="tick"]{flex:none;width:24px;height:24px;border-radius:7px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.showcase .media,
[data-y~="showcase"] [data-y~="media"]{position:relative}
.showcase .media img,
[data-y~="showcase"] [data-y~="media"] img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);display:block}

/* ---------- differentiation table ---------- */
.cmp-table,
[data-y~="cmp-table"]{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--line)}
.cmp-table th,.cmp-table td,
[data-y~="cmp-table"] th,[data-y~="cmp-table"] td{padding:18px 20px;text-align:left;font-size:15.5px;border-bottom:1px solid var(--line)}
.cmp-table thead th,
[data-y~="cmp-table"] thead th{font-size:14px;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--offwhite)}
.cmp-table .feature,
[data-y~="cmp-table"] [data-y~="feature"]{font-weight:600}
.cmp-table .sm-col,
[data-y~="cmp-table"] [data-y~="sm-col"]{background:rgba(200,244,61,.16);font-weight:600;position:relative}
.cmp-table thead .sm-col,
[data-y~="cmp-table"] thead [data-y~="sm-col"]{background:var(--lime);color:var(--ink)}
.cmp-table tr:last-child td,
[data-y~="cmp-table"] tr:last-child td{border-bottom:none}
.cmp-yes,
[data-y~="cmp-yes"]{color:var(--lime-text);font-weight:700}
.cmp-no,
[data-y~="cmp-no"]{color:#c0392b;opacity:.7}
.cmp-meh,
[data-y~="cmp-meh"]{color:var(--muted)}

/* ---------- use cases ---------- */


/* ---------- secondary features ---------- */


/* ---------- pricing ---------- */
/* what we are not */
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.notcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px;transition:transform .35s var(--ease),border-color .3s}
.notcard:hover{transform:translateY(-4px);border-color:var(--lime)}
.notcard .nothead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.notcard .x{flex:none;width:26px;height:26px;border-radius:8px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.notcard h3{font-size:18px;color:#fff}
.notcard p{color:rgba(255,255,255,.72);font-size:15px}
@media(max-width:980px){.nots{grid-template-columns:1fr}}
.toggle,
[data-y~="toggle"]{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:40px;font-size:15px}
.switch,
[data-y~="switch"]{width:52px;height:30px;border-radius:999px;background:var(--ink);position:relative;cursor:pointer;transition:background .3s}
.switch i,
[data-y~="switch"] i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--lime);transition:left .3s var(--ease)}
.switch.on i,
[data-y~="switch"][data-y~="on"] i{left:25px}
.save-badge,
[data-y~="save-badge"]{font-family:'Space Mono',monospace;font-size:12px;background:var(--lime);color:var(--ink);padding:4px 9px;border-radius:999px;font-weight:700}
.tiers,
[data-y~="tiers"]{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier,
[data-y~="tier"]{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tier:hover,
[data-y~="tier"]:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tier.pop,
[data-y~="tier"][data-y~="pop"]{background:var(--ink);color:var(--white);border-color:var(--ink);position:relative}
.tier.pop .price small,.tier.pop .tdesc,
[data-y~="tier"][data-y~="pop"] [data-y~="price"] small,[data-y~="tier"][data-y~="pop"] [data-y~="tdesc"]{color:rgba(255,255,255,.7)}
.pop-badge,
[data-y~="pop-badge"]{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--lime);color:var(--ink);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;padding:6px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.tier .tname,
[data-y~="tier"] [data-y~="tname"]{font-size:18px;font-weight:600}
.tier .price,
[data-y~="tier"] [data-y~="price"]{font-size:46px;font-weight:700;letter-spacing:-.03em;margin:14px 0 4px}
.tiers-foot,
[data-y~="tiers-foot"]{text-align:center;font-size:12.5px;color:var(--muted);margin:18px 0 6px}
/* ===== outcome / artefacts ===== */
.arte-grid,
[data-y~="arte-grid"]{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.arte,
[data-y~="arte"]{background:#fff;border:1px solid rgba(20,20,20,.09);border-radius:18px;padding:24px 20px;box-shadow:var(--shadow-soft);transition:transform .35s var(--ease),border-color .35s}
.arte:hover,
[data-y~="arte"]:hover{transform:translateY(-4px);border-color:rgba(168,201,59,.55)}
.a-num,
[data-y~="a-num"]{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--lime-text);letter-spacing:.08em}
.arte h3,
[data-y~="arte"] h3{font-size:16.5px;margin:10px 0 8px}
.arte p,
[data-y~="arte"] p{font-size:13.5px;color:#5f5f5f;line-height:1.55}
@media(max-width:900px){.arte-grid,
[data-y~="arte-grid"]{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.arte-grid,
[data-y~="arte-grid"]{grid-template-columns:1fr}}
/* ===== workspace strip (included on every plan) ===== */
.ws-strip{margin:26px auto 6px;max-width:980px;background:#fff;border:1px solid rgba(20,20,20,.09);border-radius:18px;padding:20px 24px;text-align:center;box-shadow:var(--shadow-soft)}
.ws-tag,
[data-y~="ws-tag"]{display:inline-block;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;background:rgba(200,244,61,.35);color:var(--ink);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.ws-items{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}
.ws-items span{font-size:12.5px;color:var(--muted);line-height:1.4}
.ws-items b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.ws-line,
[data-y~="ws-line"]{margin:16px 0 0;font-size:13px;color:var(--muted);font-style:italic}
@media(max-width:720px){.ws-items{grid-template-columns:1fr 1fr;gap:14px 10px}}
/* ===== role marquee ===== */


.billed-note,
[data-y~="billed-note"]{font-size:12.5px;line-height:1.35;color:var(--muted);margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s ease,margin .3s var(--ease)}
.tier.pop .billed-note,
[data-y~="tier"][data-y~="pop"] [data-y~="billed-note"]{color:rgba(255,255,255,.62)}
.tiers.annual .billed-note,
[data-y~="tiers"].annual [data-y~="billed-note"]{max-height:40px;opacity:1;margin:-2px 0 4px}
.tier .price small,
[data-y~="tier"] [data-y~="price"] small{font-size:15px;font-weight:400;color:var(--muted)}
.tier .tdesc,
[data-y~="tier"] [data-y~="tdesc"]{color:var(--muted);font-size:14.5px;margin-bottom:20px;min-height:40px}
.tier ul,
[data-y~="tier"] ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.tier li,
[data-y~="tier"] li{display:flex;gap:10px;font-size:15px;align-items:flex-start}
.tier li .ck,
[data-y~="tier"] li [data-y~="ck"]{color:var(--lime-text);flex:none;font-weight:700}
.tier.pop li .ck,
[data-y~="tier"][data-y~="pop"] li [data-y~="ck"]{color:var(--lime)}
.tier .btn,
[data-y~="tier"] [data-y~="btn"]{justify-content:center;width:100%}
.tier.pop .btn-ghost,
[data-y~="tier"][data-y~="pop"] [data-y~="btn-ghost"]{color:#fff;border-color:rgba(255,255,255,.3)}
.tier.pop .btn-primary,
[data-y~="tier"][data-y~="pop"] [data-y~="btn-primary"]{box-shadow:0 0 0 3px rgba(200,244,61,.4),0 14px 30px -10px rgba(0,0,0,.55)}
.tier-alt,
[data-y~="tier-alt"]{display:block;text-align:center;margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px}
.tier-alt:hover,
[data-y~="tier-alt"]:hover{color:#fff}
.price-note,
[data-y~="price-note"]{text-align:center;margin-top:24px;font-family:'Space Mono',monospace;font-size:13px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq,
[data-y~="faq"]{max-width:780px;margin:0 auto}
.qa,
[data-y~="qa"]{border-bottom:1px solid var(--line)}
.qa summary,
[data-y~="qa"] summary{list-style:none;cursor:pointer;padding:22px 0;font-size:18px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:20px}
.qa summary::-webkit-details-marker,
[data-y~="qa"] summary::-webkit-details-marker{display:none}
.qa summary .pm,
[data-y~="qa"] summary [data-y~="pm"]{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:transform .3s,background .3s}
.qa[open] summary .pm,
[data-y~="qa"][open] summary [data-y~="pm"]{background:var(--lime);border-color:var(--lime);transform:rotate(45deg)}
.qa .ans,
[data-y~="qa"] [data-y~="ans"]{padding:0 0 22px;color:var(--muted);font-size:16px;max-width:660px}

/* ---------- final CTA ---------- */
.final,
[data-y~="final"]{background:var(--ink);color:var(--white);text-align:center;padding:110px 0;position:relative;overflow:hidden}
.final h2,
[data-y~="final"] h2{font-size:clamp(34px,4.6vw,60px);color:var(--white);position:relative;z-index:2}
.final .tag,
[data-y~="final"] [data-y~="tag"]{font-family:'Caveat',cursive;font-size:32px;color:var(--lime);margin-bottom:10px;position:relative;z-index:2}
.final .actions,
[data-y~="final"] [data-y~="actions"]{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}

/* ---------- footer ---------- */
.footer,
[data-y~="footer"]{background:var(--canvas);padding:26px 16px 20px;color:rgba(245,242,233,.66)}
.footer .wrap,
[data-y~="footer"] [data-y~="wrap"]{position:relative;overflow:hidden;max-width:min(1500px,calc(100% - 0px));width:100%;background:radial-gradient(circle at 92% 0%,rgba(204,255,63,.12),transparent 30%),linear-gradient(145deg,#1C2921 0%,#26372D 60%,#2C3830 100%);border:1px solid rgba(250,251,248,.14);border-radius:28px;box-shadow:0 2px 6px rgba(18,28,22,.08),0 18px 44px rgba(18,28,22,.16),inset 0 1px 0 rgba(255,255,255,.10);padding:46px 46px 26px}
.footer .wrap::before,
[data-y~="footer"] [data-y~="wrap"]::before{content:"";position:absolute;top:0;left:1px;right:1px;height:2px;border-radius:27px 27px 0 0;background:linear-gradient(90deg,#CCFF3F,#CFE9DD 58%,rgba(207,233,221,0));z-index:2}
@media(max-width:640px){.footer,
[data-y~="footer"]{padding:16px 10px 14px}.footer .wrap,
[data-y~="footer"] [data-y~="wrap"]{padding:34px 24px 20px}}
.footer-grid,
[data-y~="footer-grid"]{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:40px}
.footer .logo,
[data-y~="footer"] [data-y~="logo"]{color:#F5F2E9;margin-bottom:14px}
.footer p,
[data-y~="footer"] p{font-size:14.5px;max-width:280px;color:rgba(245,242,233,.66)}
.footer h4,
[data-y~="footer"] h4{color:rgba(245,242,233,.55);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;font-family:'Space Mono',monospace}
.footer ul,
[data-y~="footer"] ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer a,
[data-y~="footer"] a{font-size:14.5px;color:rgba(245,242,233,.78);transition:color .2s}
.footer a:hover,
[data-y~="footer"] a:hover{color:#CCFF3F}
.footer-bot,
[data-y~="footer-bot"]{max-width:1180px;margin-left:auto;margin-right:auto;border-top:1px solid rgba(245,242,233,.14);color:rgba(245,242,233,.5);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;font-family:'Space Mono',monospace}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid,.showcase,
[data-y~="hero-grid"],[data-y~="showcase"]{grid-template-columns:1fr;gap:40px}
  .demo,
[data-y~="demo"]{transform:none}.demo:hover,
[data-y~="demo"]:hover{transform:none}
  .steps,.cases,.feats,.tiers,
.steps,.cases,.feats,[data-y~="tiers"]{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .footer-grid,
[data-y~="footer-grid"]{grid-template-columns:1fr 1fr}
  .showcase .media,
[data-y~="showcase"] [data-y~="media"]{order:-1}
  /* hero: demo sits between subtext and CTA buttons on mobile */
  .hero-grid,
[data-y~="hero-grid"]{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-copy,
[data-y~="hero-copy"]{display:contents}
  .hero-eyebrow,
[data-y~="hero-eyebrow"]{order:1}
  .hero-copy h1,
[data-y~="hero-copy"] h1{order:2}
  .hero-sub,
[data-y~="hero-sub"]{order:3}
  #demo{order:4;margin:12px 0 26px}
  .hero-actions,
[data-y~="hero-actions"]{order:5}
  .hero-badges,
[data-y~="hero-badges"]{order:6}
}
@media(max-width:560px){
  .section,
[data-y~="section"]{padding:68px 0}
  .hero,
[data-y~="hero"]{padding:120px 0 70px}
  
  .cmp-hint,
[data-y~="cmp-hint"]{display:none}
  .footer-grid,
[data-y~="footer-grid"]{grid-template-columns:1fr}
}
/* ===== polish pass ===== */
.section,
[data-y~="section"]{padding:112px 0}
.section-head,
[data-y~="section-head"]{margin-bottom:64px}
.section-head p,
[data-y~="section-head"] p{line-height:1.6}
.section-head h2,
[data-y~="section-head"] h2{position:relative;display:inline-block;padding-bottom:8px}
.section-head h2::after,
[data-y~="section-head"] h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--lime);border-radius:2px;transition:width .85s var(--ease) .2s}
.section-head.center h2::after,
[data-y~="section-head"][data-y~="center"] h2::after{left:50%;transform:translateX(-50%)}
.section-head.in h2::after,
[data-y~="section-head"].in h2::after{width:64px}
.feat-list li,
[data-y~="feat-list"] li{margin-bottom:2px}
.cmp-table tbody tr,
[data-y~="cmp-table"] tbody tr{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in .cmp-table tbody tr,
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr{opacity:1;transform:none}
.reveal.in .cmp-table tbody tr:nth-child(1),
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr:nth-child(1){transition-delay:.06s}
.reveal.in .cmp-table tbody tr:nth-child(2),
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr:nth-child(2){transition-delay:.12s}
.reveal.in .cmp-table tbody tr:nth-child(3),
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr:nth-child(3){transition-delay:.18s}
.reveal.in .cmp-table tbody tr:nth-child(4),
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr:nth-child(4){transition-delay:.24s}
.reveal.in .cmp-table tbody tr:nth-child(5),
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr:nth-child(5){transition-delay:.30s}
.reveal.in .cmp-table tbody tr:nth-child(6),
[data-y~="reveal"].in [data-y~="cmp-table"] tbody tr:nth-child(6){transition-delay:.36s}
.btn-primary,
[data-y~="btn-primary"]{position:relative;overflow:hidden}
/* testimonials / UGC */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:560px){.mq-track .tcard{width:288px;margin-right:16px}}
@media(max-width:980px){.tcards{grid-template-columns:1fr}}
@media(max-width:560px){.section,
[data-y~="section"]{padding:74px 0}.section-head,
[data-y~="section-head"]{margin-bottom:44px}}
/* mobile compare cards (table hidden ≤700px) */
.cmp-cards{display:none}
.cmp-wrap,
[data-y~="cmp-wrap"]{position:relative}
@media(max-width:700px){
  .cmp-scroll,
[data-y~="cmp-scroll"]{display:none}
  .cmp-hint,
[data-y~="cmp-hint"]{display:none!important}
  .cmp-cards{display:flex;flex-direction:column;gap:10px}
  .cmp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow-soft)}
  .cmp-card h4{font-size:14px;margin:0 0 9px;letter-spacing:-.01em}
  .cmp-vals{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;align-items:stretch}
  .cmp-val{font-size:11.5px;line-height:1.35;display:flex;flex-direction:column;justify-content:flex-start}
  .cmp-val b{font-family:'Space Mono',monospace;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
  .cmp-val.sm,
.cmp-val[data-y~="sm"]{background:rgba(200,244,61,.22);border:1px solid rgba(168,201,59,.5);border-radius:8px;padding:6px 8px;font-weight:600;color:var(--ink)}
  .cmp-val.sm b,
.cmp-val[data-y~="sm"] b{color:#7a8c33}
  .cmp-val.other{padding:6px 0 6px 2px;color:#6a6a6a}
}
/* ---------- mobile polish ---------- */
@media(max-width:860px){
  .proof-grid,
[data-y~="proof-grid"]{grid-template-columns:1fr 1fr;gap:26px 10px}
  .stat b,
[data-y~="stat"] b{font-size:clamp(30px,8vw,38px)}
  .st-label,
[data-y~="st-label"]{font-size:13px}
}
@media(max-width:560px){
  .hero,
[data-y~="hero"]{padding:104px 0 64px}
  .hero-actions,
[data-y~="hero-actions"]{flex-direction:column;align-items:stretch}
  .hero-actions .btn-lg,
[data-y~="hero-actions"] [data-y~="btn-lg"]{width:100%;justify-content:center;white-space:normal}
  .demo,
[data-y~="demo"]{box-shadow:0 24px 50px -22px rgba(0,0,0,.45),0 0 50px -10px rgba(200,244,61,.4)}
  .oc-meta,
[data-y~="oc-meta"]{flex-wrap:wrap;justify-content:center;gap:8px 16px;text-align:center}
  .founding-banner,
[data-y~="founding-banner"]{padding:18px 20px}
  .open-counter .btn-lg,
[data-y~="open-counter"] [data-y~="btn-lg"]{width:100%;justify-content:center}
}
/* ===== building in the open ===== */
.open-philosophy{position:relative;background:linear-gradient(180deg,rgba(200,244,61,.2),rgba(200,244,61,.07));border:1px solid rgba(168,201,59,.55);border-radius:20px;padding:clamp(28px,4vw,40px);max-width:840px;margin:0 auto 44px;overflow:hidden}
.open-philosophy::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--lime),var(--lime-deep))}
.open-philosophy h3{font-size:clamp(20px,2.8vw,28px);margin-bottom:14px;max-width:640px}
.open-philosophy p{color:#3a3a3a;font-size:16px;line-height:1.6;max-width:680px}
.open-philosophy .price,
.open-philosophy [data-y~="price"]{color:var(--ink);font-weight:700}
.open-counter,
[data-y~="open-counter"]{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.oc-num,
[data-y~="oc-num"]{font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.oc-num b,
[data-y~="oc-num"] b{color:var(--lime-text)}
.oc-num .lbl,
[data-y~="oc-num"] [data-y~="lbl"]{display:block;font-family:'Space Mono',monospace;font-size:13px;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:10px}
/* ===== founder note ===== */
.founder-note,
[data-y~="founder-note"]{display:flex;gap:30px;align-items:center;background:#fff;border:1px solid rgba(20,20,20,.1);border-radius:20px;padding:26px;max-width:840px;margin:0 auto 44px;box-shadow:var(--shadow-soft)}
.founder-note img,
[data-y~="founder-note"] img{width:200px;height:auto;border-radius:14px;display:block;flex:none}
.fn-body p,
[data-y~="fn-body"] p{font-size:16.5px;color:#3a3a3a;line-height:1.65;margin:0 0 18px}
.fn-row,
[data-y~="fn-row"]{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fn-link,
[data-y~="fn-link"]{font-weight:600;font-size:14px;color:var(--ink);border-bottom:2px solid var(--lime);white-space:nowrap}
.fn-link:hover,
[data-y~="fn-link"]:hover{border-bottom-color:var(--lime-deep)}
.fn-who b,
[data-y~="fn-who"] b{display:block;font-size:16px;color:var(--ink)}
.fn-who span,
[data-y~="fn-who"] span{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
@media(max-width:640px){.founder-note,
[data-y~="founder-note"]{flex-direction:column;align-items:stretch}.founder-note img,
[data-y~="founder-note"] img{width:100%;max-width:320px;margin:0 auto}}
.ic-line,
[data-y~="ic-line"]{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:2px 0 6px;text-align:center}
/* ===== roadmap teaser ===== */
.rm-tease,
[data-y~="rm-tease"]{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rt-left h2,
[data-y~="rt-left"] h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.01em}
.rt-left .eyebrow,
[data-y~="rt-left"] [data-y~="eyebrow"]{margin-bottom:8px}
.rt-chips,
[data-y~="rt-chips"]{display:flex;flex-direction:column;gap:10px}
.rt-chip,
[data-y~="rt-chip"]{display:flex;align-items:center;gap:10px;font-size:14px;color:#3a3a3a}
.rt-chip i,
[data-y~="rt-chip"] i{font-style:normal}
#roadmap-teaser{padding:64px 0}
#roadmap-teaser h2{color:#fff}
#roadmap-teaser .rt-chip,
#roadmap-teaser [data-y~="rt-chip"]{color:rgba(255,255,255,.78)}
#roadmap-teaser .rtag.building,
#roadmap-teaser [data-y~="rtag"][data-y~="building"]{background:rgba(255,255,255,.14);color:#fff}
#roadmap-teaser .rtag.vote,
#roadmap-teaser [data-y~="rtag"][data-y~="vote"]{background:#fff;color:var(--ink)}
#roadmap-teaser .btn-ghost,
#roadmap-teaser [data-y~="btn-ghost"]{color:#fff;border-color:rgba(255,255,255,.35)}
#roadmap-teaser .btn-ghost:hover,
#roadmap-teaser [data-y~="btn-ghost"]:hover{border-color:var(--lime);color:var(--lime)}
@media(max-width:900px){.rm-tease,
[data-y~="rm-tease"]{flex-direction:column;align-items:flex-start}}
/* ===== what-we're-not strip ===== */
.nots-strip,
[data-y~="nots-strip"]{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ns-item,
[data-y~="ns-item"]{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:#5f5f5f;font-size:13.5px;line-height:1.5;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),border-color .3s}
.ns-item:hover,
[data-y~="ns-item"]:hover{transform:translateY(-3px);border-color:rgba(168,201,59,.55)}
.ns-item b,
[data-y~="ns-item"] b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px}
.ns-item i,
[data-y~="ns-item"] i{font-style:normal;color:var(--lime-text);margin-right:8px;font-weight:700}
@media(max-width:700px){.nots-strip,
[data-y~="nots-strip"]{grid-template-columns:1fr;gap:8px}.ns-item,
[data-y~="ns-item"]{padding:13px 15px}}



/* ===== founding two-layer structure ===== */
.ie-tag,
[data-y~="ie-tag"]{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;background:var(--ink);color:var(--lime);padding:5px 11px;border-radius:99px;white-space:nowrap}
.founding-banner,
[data-y~="founding-banner"]{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(200,244,61,.22),rgba(200,244,61,.08));border:1px solid rgba(168,201,59,.55);border-radius:18px;padding:20px 26px;margin:-24px 0 30px}
.founding-banner .fb-tag,
[data-y~="founding-banner"] [data-y~="fb-tag"]{display:inline-block;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;background:var(--lime);color:var(--ink);padding:5px 11px;border-radius:99px;margin-bottom:8px}
.founding-banner p,
[data-y~="founding-banner"] p{font-size:14.5px;color:#3a3a3a;line-height:1.55;max-width:640px;margin:0}
.founding-banner p b,
[data-y~="founding-banner"] p b{color:var(--ink)}
.fb-count,
[data-y~="fb-count"]{text-align:center;flex:none}
.fb-count b,
[data-y~="fb-count"] b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.fb-count span,
[data-y~="fb-count"] span{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.lock-note,
[data-y~="lock-note"]{font-size:12.5px;color:var(--lime);font-weight:600;margin:0 0 18px}
@media(max-width:720px){.founding-banner,
[data-y~="founding-banner"]{flex-direction:column;align-items:flex-start}}

/* ===== founding progress + milestones ===== */
.oc-progress,
[data-y~="oc-progress"]{width:100%;max-width:460px}
.oc-bar,
[data-y~="oc-bar"]{height:12px;border-radius:99px;background:rgba(20,20,20,.08);border:1px solid rgba(20,20,20,.06);overflow:hidden}
.oc-bar>span,
[data-y~="oc-bar"]>span{display:block;height:100%;min-width:8px;border-radius:99px;background:linear-gradient(90deg,var(--lime),var(--lime-deep));transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.oc-meta,
[data-y~="oc-meta"]{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.oc-meta b,
[data-y~="oc-meta"] b{color:var(--ink)}

/* ===== roadmap / vote ===== */
#roadmap{padding-top:clamp(14px,2.4vw,30px)}
.rtag,
[data-y~="rtag"]{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.09em;padding:5px 10px;border-radius:99px;white-space:nowrap}
.rtag.now,
[data-y~="rtag"][data-y~="now"]{background:var(--lime);color:var(--ink)}
.rtag.building,
[data-y~="rtag"][data-y~="building"]{background:rgba(20,20,20,.08);color:var(--ink)}
.rtag.vote,
[data-y~="rtag"][data-y~="vote"]{background:var(--ink);color:#fff}

/* ===== follow the build ===== */
@media(max-width:860px){.road{grid-template-columns:1fr}.followbuild{flex-direction:column;align-items:flex-start}}

/* ===== recently shipped (build log) ===== */
@media(max-width:860px){.bl-list{grid-template-columns:1fr}}

@media(max-width:900px){.open-perks{grid-template-columns:1fr}}
/* ===== Watch-it-work lightbox ===== */
.lightbox,
[data-y~="lightbox"]{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open,
[data-y~="lightbox"].open{display:flex}
.lb-backdrop,
[data-y~="lb-backdrop"]{position:absolute;inset:0;background:rgba(18,18,18,.8);backdrop-filter:blur(6px)}
.lb-dialog,
[data-y~="lb-dialog"]{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:94vw}
.lb-close,
[data-y~="lb-close"]{position:absolute;top:-52px;right:0;background:rgba(255,255,255,.15);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:14px}
.lb-close:hover,
[data-y~="lb-close"]:hover{background:rgba(255,255,255,.28)}
.lb-stage,
[data-y~="lb-stage"]{transform:scale(1.28);transform-origin:top center;margin-bottom:70px}
.lb-stage .app,
[data-y~="lb-stage"] [data-y~="app"]{width:520px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -30px rgba(0,0,0,.7);background:#fff}
.lb-stage .app-body,
[data-y~="lb-stage"] [data-y~="app-body"]{height:300px}
.lb-foot,
[data-y~="lb-foot"]{position:relative;z-index:3;text-align:center;color:#fff;width:min(520px,82vw)}
.lb-cap,
[data-y~="lb-cap"]{font-size:16px;font-weight:600;margin-bottom:12px;min-height:22px}
.lb-prog,
[data-y~="lb-prog"]{height:4px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.lb-prog i,
[data-y~="lb-prog"] i{display:block;height:100%;width:0;background:var(--lime)}
@media(max-width:680px){.lb-stage,
[data-y~="lb-stage"]{transform:scale(.92);margin-bottom:30px}.lb-stage .app,
[data-y~="lb-stage"] [data-y~="app"]{width:420px}}
/* presentation mode overlay */
.present{position:absolute;inset:0;background:#1c1c1c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:7;opacity:0;transition:opacity .4s var(--ease)}
.present.show{opacity:1}
.present .pslide{width:80%;max-width:320px;min-height:150px;background:#fff;border-radius:10px;box-shadow:0 24px 60px -22px rgba(0,0,0,.7);padding:16px;display:flex;flex-direction:column;opacity:0;transform:translateY(8px)}
.present .pslide.in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.present .ptitle{font-family:'Caveat',cursive;font-weight:700;font-size:19px;margin-bottom:10px;color:var(--ink)}
.present .pbody{position:relative;flex:1}
.present .pbody .zflow,
.present .pbody [data-y~="zflow"]{height:48px}
.present .pbody .zcard,.present .pbody .znote,
.present .pbody [data-y~="zcard"],.present .pbody [data-y~="znote"]{opacity:1 !important;transform:none !important}
.present .pfoot{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.85);font-family:'Space Mono',monospace;font-size:11px}
.present .pnav{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
/* handwriting -> text overlay */
.hw{position:absolute;inset:0;background:#fbfbfb;background-image:radial-gradient(rgba(20,20,20,.06) 1px,transparent 1px);background-size:16px 16px;display:flex;align-items:center;justify-content:center;z-index:7;opacity:0;transition:opacity .4s var(--ease)}
.hw.show{opacity:1}
.hw-card{text-align:center}
.hw-cap{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#a8a8a8;margin-bottom:16px}
.hw-stage{position:relative;display:inline-block;height:48px}
.hw-ink{display:inline-block;font-family:'Caveat',cursive;font-weight:700;font-size:40px;line-height:1;color:#2b2b2b;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.hw.writing .hw-ink{transition:clip-path 1.4s linear;clip-path:inset(0 0 0 0)}
.hw.done .hw-ink{opacity:0;transition:opacity .35s}
.hw-pen{position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--lime-deep);opacity:0}
.hw.writing .hw-pen{opacity:1;left:100%;transition:left 1.4s linear,opacity .3s}
.hw.done .hw-pen{opacity:0}
.hw-text{position:absolute;left:0;top:4px;width:100%;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;line-height:1;color:var(--ink);opacity:0;transform:translateY(6px)}
.hw.done .hw-text{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hw-chip{display:inline-flex;gap:6px;align-items:center;margin-top:20px;background:var(--lime);color:var(--ink);font-weight:700;font-size:11px;padding:7px 13px;border-radius:999px;opacity:0;transform:translateY(6px)}
.hw.chip .hw-chip,
.hw[data-y~="chip"] .hw-chip{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hw.done .hw-chip{opacity:.55}
/* realistic handwriting scene */
.hw-sel{position:absolute;inset:-12px -16px;border:1.5px dashed var(--lime-deep);border-radius:6px;background:rgba(200,244,61,.06);opacity:0;transition:opacity .3s}
.hw.selected .hw-sel{opacity:1}
.hw.done .hw-sel{opacity:0}
.hw-tb{position:absolute;left:50%;top:-46px;transform:translateX(-50%) translateY(6px);display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:10px;font-weight:600;color:var(--ink);box-shadow:0 6px 18px -8px rgba(20,20,20,.35);opacity:0;white-space:nowrap;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hw.selected .hw-tb{opacity:1;transform:translateX(-50%) translateY(0)}
.hw.converting .hw-tb,.hw.done .hw-tb{opacity:0}
.hw-conv{position:absolute;left:50%;top:-46px;transform:translateX(-50%);display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:10px;color:#6a6a6a;box-shadow:0 6px 18px -8px rgba(20,20,20,.35);opacity:0;white-space:nowrap;transition:opacity .3s}
.hw-conv i{width:9px;height:9px;border:2px solid rgba(20,20,20,.25);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
.hw.converting .hw-conv{opacity:1}
.hw.done .hw-conv{opacity:0}
.hw-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:999px;padding:7px 12px;box-shadow:0 4px 20px rgba(0,0,0,.12);opacity:0;white-space:nowrap;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hw.toast .hw-toast{opacity:1;transform:translateX(-50%) translateY(0)}
.hw.kept .hw-toast{opacity:0}
.hw-toast .tl{font-size:9.5px;color:#7a7a7a}
.hw-toast .tk{display:inline-flex;gap:4px;align-items:center;background:#1f1f1f;color:#fff;font-size:9.5px;font-weight:700;border-radius:999px;padding:4px 10px}
.hw-toast .tu{display:inline-flex;gap:4px;align-items:center;background:#fff;color:#404040;font-size:9.5px;border:1px solid #e0e0e0;border-radius:999px;padding:4px 10px}

/* ===== Yieldfund-signature motion ===== */
.btn .bl,
[data-y~="btn"] .bl{display:inline-flex;overflow:hidden}
.btn .ch,
[data-y~="btn"] .ch{display:inline-block;overflow:hidden;height:1.25em}
.btn .ch i,
[data-y~="btn"] .ch i{display:block;font-style:normal;line-height:1.25;transition:transform .55s var(--ease);transition-delay:calc(var(--i,0)*12ms)}
.btn:hover .ch i,
[data-y~="btn"]:hover .ch i{transform:translateY(-100%)}
.btn-primary::after,
[data-y~="btn-primary"]::after{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1/1;border-radius:50%;background:var(--lime);transform:translate(-50%,-50%) scale(0);transition:transform .7s cubic-bezier(.4,0,0,1);pointer-events:none;z-index:0}
.btn-primary:hover::after,
[data-y~="btn-primary"]:hover::after{transform:translate(-50%,-50%) scale(1)}
.btn-primary:hover,
[data-y~="btn-primary"]:hover{color:var(--ink)}
.btn-primary::before,
[data-y~="btn-primary"]::before{position:relative;z-index:1}
.btn-primary .bl,.btn-primary>span,.btn-primary>svg,
[data-y~="btn-primary"] .bl,[data-y~="btn-primary"]>span,[data-y~="btn-primary"]>svg{position:relative;z-index:1}
.btn-primary:hover::before,
[data-y~="btn-primary"]:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2320231F' d='m12 2-2 6-6 2 6 2 2 6 2-6 6-2-6-2z'/%3E%3C/svg%3E")}
h1 .hl::after,
h1 [data-y~="hl"]::after{transform:rotate(-1.2deg) scaleX(0);transform-origin:0 100%;transition:transform .85s var(--ease) .35s}
body.ld h1 .hl::after,
body.ld h1 [data-y~="hl"]::after{transform:rotate(-1.2deg) scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .btn-primary::after,
[data-y~="btn-primary"]::after{display:none}
  .btn .ch i,
[data-y~="btn"] .ch i{transition:none}
  h1 .hl::after,
h1 [data-y~="hl"]::after{transform:rotate(-1.2deg) scaleX(1);transition:none}
}

/* ===== SM DESIGN SYSTEM v2 — foundation components ===== */
.skip-link,
[data-y~="skip-link"]{position:absolute;left:12px;top:-48px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 12px 12px;font-weight:600;font-size:14px;transition:top .2s}
.skip-link:focus,
[data-y~="skip-link"]:focus{top:0}
.bg-ink .eyebrow,
[data-y~="bg-ink"] [data-y~="eyebrow"]{color:var(--lime)}
.sr-only,
[data-y~="sr-only"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2.5px solid var(--lime-deep);outline-offset:3px;border-radius:4px}
.btn:focus-visible,a.btn:focus-visible,
[data-y~="btn"]:focus-visible,a[data-y~="btn"]:focus-visible{outline-offset:2px}
.btn:active,
[data-y~="btn"]:active{transform:translateY(1px) scale(.985)}
.btn[disabled],.btn.is-disabled,
[data-y~="btn"][disabled],[data-y~="btn"].is-disabled{opacity:.45;pointer-events:none}
.btn.is-loading,
[data-y~="btn"].is-loading{pointer-events:none;position:relative;color:transparent!important}
.btn.is-loading::after,
[data-y~="btn"].is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:smSpin .7s linear infinite;transform:none;background:none}
@keyframes smSpin{to{rotate:360deg}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);cursor:pointer;transition:border-color var(--dur-1),transform var(--dur-1)}
.icon-btn:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.text-link{font-weight:600;color:var(--ink);border-bottom:2px solid var(--lime);transition:border-color var(--dur-1)}
.text-link:hover{border-bottom-color:var(--lime-deep)}
.chip,
[data-y~="chip"]{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--surface-raised);border:1px solid var(--line);border-radius:999px;padding:8px 16px;transition:background var(--dur-1),border-color var(--dur-1)}
.chip:hover,
[data-y~="chip"]:hover{border-color:var(--line-strong)}
.chip.is-active,
[data-y~="chip"].is-active{background:var(--lime);border-color:var(--lime-deep)}
.meta-label{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.panel{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.panel-dark{background:linear-gradient(180deg,var(--ink) 0%,var(--charcoal) 100%);color:#fff;border-radius:var(--r-lg)}
.app-window{background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.app-window .aw-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F5F4EF;border-bottom:1px solid #E9E6DC}
.app-window .aw-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.dotgrid{background-image:radial-gradient(rgba(32,35,31,.08) 1.2px,transparent 1.2px);background-size:26px 26px}
.divider{border:0;height:1px;background:var(--line);margin:var(--s6) 0}
.media-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.media-frame img,.media-frame video{display:block;width:100%;height:auto}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:50}
body{font-family:var(--font-ui)}
h1{font-size:var(--fs-display);letter-spacing:-.025em;line-height:1.02}
h2{letter-spacing:-.02em}
@supports(padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}
@media(prefers-reduced-motion:reduce){.btn:active,
[data-y~="btn"]:active{transform:none}}

/* ===== P6 — ch.1 problem: editorial resolve ===== */
.prob-ed,
[data-y~="prob-ed"]{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.prob-copy h2,
[data-y~="prob-copy"] h2{font-size:clamp(28px,3.6vw,46px);margin:12px 0 18px}
.prob-copy p,
[data-y~="prob-copy"] p{color:var(--muted);font-size:17px;line-height:1.65;max-width:46ch;margin-bottom:14px}
.prob-copy p b,
[data-y~="prob-copy"] p b{color:var(--ink)}
.pv-window,.st-window,
[data-y~="pv-window"],[data-y~="st-window"]{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.pv-bar,
[data-y~="pv-bar"]{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.pv-bar i,
[data-y~="pv-bar"] i{width:8px;height:8px;border-radius:50%;background:#E4E2DA}
.pv-bar span,
[data-y~="pv-bar"] span{margin-left:8px;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted)}
.pv-canvas,.st-canvas,
[data-y~="pv-canvas"],[data-y~="st-canvas"]{position:relative;background-image:radial-gradient(rgba(20,20,20,.07) 1.2px,transparent 1.2px);background-size:22px 22px}
.pv-canvas,
[data-y~="pv-canvas"]{height:340px}
.pv-board,
[data-y~="pv-board"]{position:absolute;inset:0;padding:18px 22px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s}
.pv-title,
[data-y~="pv-title"]{font-family:var(--font-hand);font-size:22px;color:var(--ink)}
.pv-frame,.st-frame,
[data-y~="pv-frame"],[data-y~="st-frame"]{position:absolute;background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-soft);padding:11px}
.pv-frame,
[data-y~="pv-frame"]{opacity:0;transform:scale(.94);transition:opacity .45s var(--ease) .5s,transform .45s var(--ease) .5s}
.pv-frame b,.st-skel b,.st-frame b,.st-pres b,.tf-fr b,
[data-y~="pv-frame"] b,[data-y~="st-skel"] b,[data-y~="st-frame"] b,.st-pres b,[data-y~="tf-fr"] b{display:block;height:8px;width:60%;border-radius:4px;background:var(--sage)}
.pv-frame i,.st-skel i,.st-frame i,.st-pres i,.st-doc i,.tf-fr i,
[data-y~="pv-frame"] i,[data-y~="st-skel"] i,[data-y~="st-frame"] i,.st-pres i,.st-doc i,[data-y~="tf-fr"] i{display:block;height:5px;border-radius:3px;background:#EDEBE3;margin-top:7px}
.pv-frame.f1,
[data-y~="pv-frame"][data-y~="f1"]{width:31%;top:64px;left:22px}
.pv-frame.f2,
[data-y~="pv-frame"][data-y~="f2"]{width:33%;top:52px;left:41%;transition-delay:.65s}
.pv-frame.f3,
[data-y~="pv-frame"][data-y~="f3"]{width:30%;bottom:34px;left:26%;transition-delay:.8s}
.pv-links,
[data-y~="pv-links"]{position:absolute;inset:0;width:100%;height:100%}
.pv-links path,
[data-y~="pv-links"] path{stroke:var(--line-strong);stroke-width:1.6;fill:none;stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset .8s var(--ease) 1s}
@media(max-width:900px){.prob-ed,
[data-y~="prob-ed"]{grid-template-columns:1fr}.pv-canvas,
[data-y~="pv-canvas"]{height:270px}}
@media(prefers-reduced-motion:reduce){
  
  .pv-board,.pv-frame,
[data-y~="pv-board"],[data-y~="pv-frame"]{opacity:1;transform:none;transition:none}
  .pv-links path,
[data-y~="pv-links"] path{stroke-dashoffset:0;transition:none}
}

/* ===== P6 — ch.2 sticky product story ===== */
.story,
[data-y~="story"]{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,60px);align-items:start}
.story-stage,
[data-y~="story-stage"]{position:sticky;top:104px;order:-1}
.story-steps,
[data-y~="story-steps"]{list-style:none;position:relative;margin:0;padding:0 0 0 30px}
.story-steps::before,
[data-y~="story-steps"]::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.story-steps::after,
[data-y~="story-steps"]::after{content:"";position:absolute;left:6px;top:10px;width:2px;background:var(--lime-deep);border-radius:2px;height:var(--fillh,26px);transition:height .4s var(--ease)}
.story-step,
[data-y~="story-step"]{position:relative;padding:24px 0;opacity:.45;transition:opacity .35s var(--ease)}
.story-step::before,
[data-y~="story-step"]::before{content:"";position:absolute;left:-30px;top:31px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);transition:background .3s,border-color .3s;z-index:1}
.story-step.is-on,
[data-y~="story-step"][data-y~="is-on"]{opacity:1}
.story-step.is-on::before,
[data-y~="story-step"][data-y~="is-on"]::before{background:var(--lime);border-color:var(--ink)}
.story-step .num,
[data-y~="story-step"] [data-y~="num"]{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--lime-text);font-weight:700}
.story-step.is-on .num,
[data-y~="story-step"][data-y~="is-on"] [data-y~="num"]{color:var(--ink)}
.story-step h3,
[data-y~="story-step"] h3{font-size:22px;margin:8px 0}
.story-step p,
[data-y~="story-step"] p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:46ch}
.st-mini,
[data-y~="st-mini"]{display:none}
.st-canvas,
[data-y~="st-canvas"]{height:410px}
.st-scene,
[data-y~="st-scene"]{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.st-scene.on,
[data-y~="st-scene"][data-y~="on"]{opacity:1;transform:none}
.stq,
[data-y~="stq"]{background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft)}
.st-chips,
[data-y~="st-chips"]{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.st-chip,
[data-y~="st-chip"]{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink);background:var(--surface-raised)}
.st-chip.att,
[data-y~="st-chip"][data-y~="att"]{background:var(--sage);border-color:transparent}
.st-chip.cv,
[data-y~="st-chip"][data-y~="cv"]{background:var(--ink);color:#fff;border-color:transparent}
.st-chip.q,
[data-y~="st-chip"][data-y~="q"]{font-style:italic;background:var(--surface)}
.st-gen,
[data-y~="st-gen"]{display:inline-flex;align-items:center;gap:5px;margin-top:12px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;padding:7px 14px;border-radius:999px}
.st-gen,.tf-ai .spark,
[data-y~="st-gen"],[data-y~="tf-ai"] [data-y~="spark"]{letter-spacing:.01em}
.st-skel,
[data-y~="st-skel"]{flex:1;padding:11px}
.st-skel.m,
[data-y~="st-skel"][data-y~="m"]{flex:1 1 0;padding:9px;display:inline-block}
.st-frame.e1,
[data-y~="st-frame"][data-y~="e1"]{width:38%;top:36px;left:24px}
.st-frame.e2,
[data-y~="st-frame"][data-y~="e2"]{width:30%;top:52px;right:26px}
.st-sel,
[data-y~="st-sel"]{position:absolute;left:26%;bottom:96px;padding:10px 16px;border:1.5px dashed var(--lime-deep);border-radius:10px;background:rgba(200,244,61,.08)}
.st-hand,
[data-y~="st-hand"]{font-family:var(--font-hand);font-size:19px;color:var(--ink)}
.st-chip.fl3,
[data-y~="st-chip"][data-y~="fl3"]{position:absolute;left:26%;bottom:64px}
@media(max-width:1020px){
  .story,
[data-y~="story"]{display:block}
  .story-stage,
[data-y~="story-stage"]{display:none}
  .story-steps,
[data-y~="story-steps"]{padding:0}
  .story-steps::before,.story-steps::after,
[data-y~="story-steps"]::before,[data-y~="story-steps"]::after{display:none}
  .story-step,
[data-y~="story-step"]{opacity:1;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:20px;margin-bottom:16px}
  .story-step::before,
[data-y~="story-step"]::before{display:none}
  .st-mini,
[data-y~="st-mini"]{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
  .st-mini .st-skel.m,
[data-y~="st-mini"] [data-y~="st-skel"][data-y~="m"]{min-width:80px;min-height:44px;flex:1}
}
@media(prefers-reduced-motion:reduce){
  .story-step,.story-steps::after,
[data-y~="story-step"],[data-y~="story-steps"]::after{transition:none}
  .story-step,
[data-y~="story-step"]{opacity:1}
  .st-scene,
[data-y~="st-scene"]{transition:none;transform:none}
}

/* ===== P6 — ch.3 input→output ===== */
.tf-flow,
[data-y~="tf-flow"]{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,14px);margin-bottom:48px}
.tf-col,
[data-y~="tf-col"]{display:flex;flex-direction:column;gap:8px}
.tf-chip,
[data-y~="tf-chip"]{display:inline-flex;align-items:center;gap:7px;background:var(--surface-raised);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-soft);white-space:nowrap}
.tf-chip svg,
[data-y~="tf-chip"] svg{flex:none;color:var(--ink-muted)}
.tf-ai,
[data-y~="tf-ai"]{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--ink);color:#fff;border-radius:16px;padding:14px 18px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow);white-space:nowrap}
.tf-ai .spark,
[data-y~="tf-ai"] [data-y~="spark"]{color:var(--lime);font-size:16px}
.tf-board,
[data-y~="tf-board"]{width:158px;padding:11px;background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft)}
.tf-bt,
[data-y~="tf-bt"]{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-muted);margin-bottom:8px}
.tf-fr,
[data-y~="tf-fr"]{display:inline-block;width:46%;padding:7px;border:1px solid var(--line);border-radius:8px;margin:1.5%;vertical-align:top;background:var(--surface)}
.tf-fr.wide,
[data-y~="tf-fr"][data-y~="wide"]{width:95%}
.tf-arr,
[data-y~="tf-arr"]{flex:none;width:clamp(24px,3.2vw,46px);height:14px}
.tf-arr svg,
[data-y~="tf-arr"] svg{width:100%;height:100%;overflow:visible}
.tf-arr path,
[data-y~="tf-arr"] path{stroke:var(--line-strong);stroke-width:1.6;fill:none;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .7s var(--ease)}
.tf-arr path.hd,
[data-y~="tf-arr"] path[data-y~="hd"]{stroke-dasharray:20;stroke-dashoffset:20;transition-delay:.5s}
.tf-flow.in .tf-arr path,
[data-y~="tf-flow"].in [data-y~="tf-arr"] path{stroke-dashoffset:0}
.tf-flow.in .tf-arr:nth-of-type(2) path,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(2) path{transition-delay:.35s}
.tf-flow.in .tf-arr:nth-of-type(2) path.hd,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(2) path[data-y~="hd"]{transition-delay:.85s}
.tf-flow.in .tf-arr:nth-of-type(3) path,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(3) path{transition-delay:.7s}
.tf-flow.in .tf-arr:nth-of-type(3) path.hd,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(3) path[data-y~="hd"]{transition-delay:1.2s}
.tf-lead,
[data-y~="tf-lead"]{text-align:center;font-family:var(--font-hand);font-size:24px;color:var(--ink);margin-bottom:22px}
@media(max-width:980px){
  .tf-flow,
[data-y~="tf-flow"]{flex-direction:column;gap:14px}
  .tf-col,
[data-y~="tf-col"]{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .tf-arr,
[data-y~="tf-arr"]{transform:rotate(90deg);height:14px}
}
@media(prefers-reduced-motion:reduce){.tf-arr path,.tf-arr path.hd,
[data-y~="tf-arr"] path,[data-y~="tf-arr"] path[data-y~="hd"]{stroke-dashoffset:0;transition:none}}


/* ===== ITER-1 — workspace-replica (Home-layout 1:1) ===== */
.eco-app,
[data-y~="eco-app"]{display:flex;gap:12px;background:var(--canvas);border:1px solid rgba(32,35,31,.09);border-radius:26px;box-shadow:0 1px 2px rgba(32,35,31,.03),0 18px 46px rgba(32,35,31,.07);padding:12px;max-width:980px;margin:0 auto}
.ea-rail,
[data-y~="ea-rail"]{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 8px;border-radius:20px;background:rgba(250,249,245,.96);border:1px solid rgba(32,35,31,.10);box-shadow:0 12px 30px rgba(32,35,31,.07),inset 0 1px 0 rgba(255,255,255,.88);flex:none}
.ea-rail img,
[data-y~="ea-rail"] img{border-radius:9px}
.ea-div,
[data-y~="ea-div"]{width:22px;height:1px;background:rgba(39,45,25,.14)}
.ea-nb,
[data-y~="ea-nb"]{width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted)}
.ea-nb.on,
[data-y~="ea-nb"][data-y~="on"]{background:var(--lime);color:var(--ink)}
.ea-last,
[data-y~="ea-last"]{margin-top:auto}
.ea-main,
[data-y~="ea-main"]{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ea-studio,
[data-y~="ea-studio"]{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(32,35,31,.11);padding:14px 16px;background:radial-gradient(circle at 88% 12%,rgba(200,244,61,.22),transparent 34%),linear-gradient(145deg,#FFFDF8 0%,#EEF0E7 100%)}
.ea-h,
[data-y~="ea-h"]{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:4px 0 10px}
.ea-h b,
[data-y~="ea-h"] b{color:var(--lime)}
.ea-bar,
[data-y~="ea-bar"]{display:flex;align-items:center;gap:10px;background:#F8F9F6;border:1px solid rgba(30,43,34,.12);border-radius:12px;padding:9px 12px}
.ea-ph,
[data-y~="ea-ph"]{flex:1;font-size:11px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ea-gen,
[data-y~="ea-gen"]{flex:none;display:inline-flex;align-items:center;gap:4px;background:#1E2B22;color:#fff;font-size:10px;font-weight:700;padding:6px 12px;border-radius:999px}
.ea-row,
[data-y~="ea-row"]{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.ea-hub,.ea-recent,.ea-folders,.ea-focus,
[data-y~="ea-hub"],[data-y~="ea-recent"],[data-y~="ea-folders"],[data-y~="ea-focus"]{background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 26%,transparent 52%),var(--surface-raised);border:1px solid rgba(32,35,31,.11);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 2px 4px rgba(30,43,34,.05),0 8px 18px rgba(30,43,34,.06);padding:12px}
.ea-hub-top,
[data-y~="ea-hub-top"]{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.ea-hub-top>b,
[data-y~="ea-hub-top"]>b{font-size:12.5px}
.ea-tabs,
[data-y~="ea-tabs"]{display:inline-flex;gap:3px;padding:3px;border-radius:11px;background:rgba(248,250,247,.42);border:1px solid rgba(30,43,34,.10)}
.ea-tabs u,
[data-y~="ea-tabs"] u{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-size:9.5px;font-weight:600;padding:4px 8px;border-radius:8px;color:var(--ink)}
.ea-tabs u.on,
[data-y~="ea-tabs"] u[data-y~="on"]{background:#1E2B22;color:#F8FAF7;box-shadow:0 4px 10px rgba(30,43,34,.13)}
.ea-count,
[data-y~="ea-count"]{min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:var(--lime);color:#1C2921;font-family:var(--font-mono);font-size:7.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.ea-ag,
[data-y~="ea-ag"]{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-top:6px;font-size:11.5px;font-weight:600}
.ea-ag em,
[data-y~="ea-ag"] em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:8.5px;color:var(--ink-muted);flex:none}
.ea-ag-t,
[data-y~="ea-ag-t"]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ea-chk,
[data-y~="ea-chk"]{width:16px;height:16px;border-radius:5px;background:var(--lime);color:var(--ink);font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ea-chk.o,
[data-y~="ea-chk"][data-y~="o"]{background:transparent;border:1.5px solid var(--line-strong)}
.ea-col,
[data-y~="ea-col"]{display:flex;flex-direction:column;gap:10px}
.ea-focus,
[data-y~="ea-focus"]{display:flex;align-items:center;gap:10px}
.et-ring2{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--lime-deep);flex:none}
.ea-f-t b,
[data-y~="ea-f-t"] b{display:block;font-size:11.5px}
.ea-f-t em,
[data-y~="ea-f-t"] em{font-style:normal;font-family:var(--font-mono);font-size:8.5px;color:var(--ink-muted)}
.ea-play,
[data-y~="ea-play"]{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.ea-dock,
[data-y~="ea-dock"]{flex:1;border-radius:16px;padding:12px;color:#fff}
.ea-dock>b,
[data-y~="ea-dock"]>b{font-size:11.5px;color:#F5F2E9}
.ea-doc,
[data-y~="ea-doc"]{display:block;background:#fff;border-radius:8px;padding:9px;width:64%;margin-top:8px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.ea-doc i,
[data-y~="ea-doc"] i{display:block;height:4px;border-radius:2px;background:#EDEBE3;margin-top:5px}
.ea-doc i:first-child,
[data-y~="ea-doc"] i:first-child{width:60%;background:var(--sage);height:6px;margin-top:0}
.ea-doc u,
[data-y~="ea-doc"] u{display:inline-block;margin-top:7px;text-decoration:none;font-family:var(--font-mono);font-size:8px;font-weight:700;background:#1E2B22;color:#fff;padding:2px 6px;border-radius:5px}
.ea-row2,
[data-y~="ea-row2"]{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.ea-recent>b,.ea-folders>b,
[data-y~="ea-recent"]>b,[data-y~="ea-folders"]>b{display:block;font-size:12.5px;margin-bottom:8px}
.ea-boards,
[data-y~="ea-boards"]{display:flex;gap:8px}
.ea-board,
[data-y~="ea-board"]{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:56px;border-radius:12px;padding:8px 10px;font-size:10.5px;font-weight:600;color:var(--ink)}
.ea-board i,
[data-y~="ea-board"] i{width:8px;height:8px;border-radius:50%;flex:none;margin-bottom:2px}
.ea-board.t1,
[data-y~="ea-board"][data-y~="t1"]{background:#DFEAE1;border:1px solid rgba(92,139,108,.30)}.ea-board.t1 i,
[data-y~="ea-board"][data-y~="t1"] i{background:#71815B}
.ea-board.t2,
[data-y~="ea-board"][data-y~="t2"]{background:#E5EDD6;border:1px solid rgba(140,168,84,.30)}.ea-board.t2 i,
[data-y~="ea-board"][data-y~="t2"] i{background:#8CA854}
.ea-folders .ef-row,
[data-y~="ea-folders"] [data-y~="ef-row"]{margin-top:6px;font-size:11px}
.ea-folders .ef-row:first-of-type,
[data-y~="ea-folders"] [data-y~="ef-row"]:first-of-type{margin-top:0}
.ef-row,
[data-y~="ef-row"]{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;color:var(--ink)}
.ef-row svg,
[data-y~="ef-row"] svg{color:var(--ink-muted);flex:none}
.eco-cap,
[data-y~="eco-cap"]{text-align:center;font-family:var(--font-hand);font-size:22px;color:var(--ink);margin:22px 0 18px}
.eco-dets,
[data-y~="eco-dets"]{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:880px;margin:0 auto}
.eco-det,
[data-y~="eco-det"]{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 26%,transparent 52%),var(--surface-raised);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 2px 4px rgba(30,43,34,.05),0 8px 18px rgba(30,43,34,.06)}
.eco-det i,
[data-y~="eco-det"] i{grid-row:1/3;width:32px;height:32px;border-radius:10px;background:rgba(200,244,61,.35);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.eco-det b,
[data-y~="eco-det"] b{font-size:13px}
.eco-det em,
[data-y~="eco-det"] em{font-style:normal;font-size:11px;color:var(--ink-muted)}
.eco-cta,
[data-y~="eco-cta"]{text-align:center;margin-top:30px}
@media(max-width:900px){.ea-row,.ea-row2,
[data-y~="ea-row"],[data-y~="ea-row2"]{grid-template-columns:1fr}.eco-dets,
[data-y~="eco-dets"]{grid-template-columns:1fr;max-width:420px}}
@media(max-width:640px){.ea-rail,
[data-y~="ea-rail"]{display:none}.eco-app,
[data-y~="eco-app"]{padding:10px}}

/* ===== P7 — role browser ===== */
.rb-controls,
[data-y~="rb-controls"]{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.rb-btn,
[data-y~="rb-btn"]{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.rb-btn:hover,
[data-y~="rb-btn"]:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rb-btn[disabled],
[data-y~="rb-btn"][disabled]{opacity:.35;pointer-events:none}
.rb-more,
[data-y~="rb-more"]{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s}
.rb-more:hover,
[data-y~="rb-more"]:hover{border-color:var(--ink);background:rgba(20,20,20,.04)}
.rb-more-n,
[data-y~="rb-more-n"]{font-family:var(--font-mono);font-size:11px;background:var(--lime);border-radius:999px;padding:2px 8px}
.rb-track,
[data-y~="rb-track"]{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rb-track::-webkit-scrollbar,
[data-y~="rb-track"]::-webkit-scrollbar{display:none}
.rcard,
[data-y~="rcard"]{flex:0 0 330px;scroll-snap-align:center;background:var(--surface-raised);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.rcard[hidden],
[data-y~="rcard"][hidden]{display:none}
.rcard.is-sel,
[data-y~="rcard"].is-sel{border-color:var(--ink);box-shadow:var(--shadow);transform:translateY(-3px)}
.rcard h3,
[data-y~="rcard"] h3{font-size:19px}
.r-outcome,
[data-y~="r-outcome"]{font-size:14.5px;font-weight:600;color:var(--ink)}
.r-prompt,
[data-y~="r-prompt"]{font-size:13px;line-height:1.55;color:var(--ink-muted);border:1.5px dashed var(--line-strong);border-radius:12px;padding:10px 12px;background:var(--surface)}
.r-prompt em,
[data-y~="r-prompt"] em{font-style:normal;background:rgba(200,244,61,.35);border-radius:4px;padding:0 3px}
.r-cap,
[data-y~="r-cap"]{align-self:flex-start;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.r-prev,
[data-y~="r-prev"]{display:flex;align-items:center;gap:10px;min-height:52px}
.r-prev .st-skel.m,
[data-y~="r-prev"] [data-y~="st-skel"][data-y~="m"]{flex:0 1 110px;min-height:46px;padding:8px}
.r-dots,
[data-y~="r-dots"]{display:inline-flex;gap:4px}
.r-dots u,
[data-y~="r-dots"] u{width:7px;height:7px;border-radius:50%;background:var(--line);text-decoration:none}
.r-dots u.on,
[data-y~="r-dots"] u[data-y~="on"]{background:var(--lime-deep)}
.r-cta,
[data-y~="r-cta"]{margin-top:auto;font-weight:700;font-size:14px;color:var(--ink)}
.r-cta:hover,
[data-y~="r-cta"]:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.rcard,
[data-y~="rcard"]{flex-basis:82%}}
@media(prefers-reduced-motion:reduce){.rb-track,
[data-y~="rb-track"]{scroll-behavior:auto}.rcard,
[data-y~="rcard"]{transition:none}}

/* ===== P7 — differentiation editorial ===== */
.cmp-ed,
[data-y~="cmp-ed"]{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:44px}
.ced,
[data-y~="ced"]{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.ced-n,
[data-y~="ced-n"]{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);background:var(--lime);border-radius:999px;padding:5px 10px;flex:none}
.ced h3,
[data-y~="ced"] h3{font-size:18px;margin-bottom:7px}
.ced p,
[data-y~="ced"] p{color:var(--muted);font-size:14px;line-height:1.55}
.cmp-lead,
[data-y~="cmp-lead"]{text-align:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px}
@media(max-width:900px){.cmp-ed,
[data-y~="cmp-ed"]{grid-template-columns:1fr}}


/* ===== P8 — switch als echte button + final-CTA composer ===== */
button.switch,
button[data-y~="switch"]{appearance:none;-webkit-appearance:none;border:none;padding:0;font:inherit}
.fc,
[data-y~="fc"]{position:relative;max-width:430px;margin:26px auto 6px}
.fc-frame,
[data-y~="fc-frame"]{position:absolute;border:1.5px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.04)}
.fc-frame.a,
[data-y~="fc-frame"][data-y~="a"]{width:120px;height:74px;left:-64px;top:-26px;transform:rotate(-5deg)}
.fc-frame.b,
[data-y~="fc-frame"][data-y~="b"]{width:100px;height:64px;right:-56px;top:-14px;transform:rotate(4deg)}
.fc-composer,
[data-y~="fc-composer"]{position:relative;display:flex;align-items:center;gap:11px;background:#fff;border-radius:999px;padding:9px 10px 9px 12px;box-shadow:0 18px 44px -16px rgba(0,0,0,.55)}
.fc-composer img,
[data-y~="fc-composer"] img{border-radius:8px;flex:none}
.fc-text,
[data-y~="fc-text"]{flex:1;text-align:left;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-gen,
[data-y~="fc-gen"]{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;padding:8px 15px;border-radius:999px}
@media(max-width:560px){.fc,
[data-y~="fc"]{max-width:88%}.fc-frame,
[data-y~="fc-frame"]{display:none}}


/* ===== ITER-1 — app-gloss materiaal (GlossSurface 1:1 vertaald) ===== */
.stq,.pv-window,.st-window,.eco,.rcard,.ced,.tf-board,.tf-chip,.eco-goal,.eco-timer,.ef-row,
[data-y~="stq"],[data-y~="pv-window"],[data-y~="st-window"],.eco,[data-y~="rcard"],[data-y~="ced"],[data-y~="tf-board"],[data-y~="tf-chip"],.eco-goal,.eco-timer,[data-y~="ef-row"]{
  background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 26%,transparent 52%),var(--surface-raised);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76),inset 0 -1px 0 rgba(30,43,34,.07),0 2px 4px rgba(30,43,34,.05),0 10px 24px rgba(30,43,34,.07);
}
.eco:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(30,43,34,.10),0 3px 6px rgba(30,43,34,.08),0 16px 32px rgba(30,43,34,.11)}
.rcard.is-sel,
[data-y~="rcard"].is-sel{box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 3px 6px rgba(30,43,34,.08),0 16px 32px rgba(30,43,34,.12)}
.glass-dark,
[data-y~="glass-dark"]{background:radial-gradient(circle at 92% 0%,rgba(204,255,63,.12),transparent 30%),linear-gradient(145deg,#1C2921 0%,#26372D 60%,#3C3430 100%);border:1px solid rgba(250,251,248,.14);box-shadow:0 12px 30px rgba(18,28,22,.24),inset 0 1px 0 rgba(255,255,255,.10)}

/* ITER-1: demo-bar onder het app-venster — niets overlapt de UI nog */
.demo,
[data-y~="demo"]{margin-bottom:34px}
.demo-bar,
[data-y~="demo-bar"]{position:absolute;left:4px;right:4px;bottom:-34px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.demo-cap,
[data-y~="demo-cap"]{position:static;top:auto;left:auto;bottom:auto;max-width:75%}
.board-replay,
[data-y~="board-replay"]{position:static;top:auto;right:auto;display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);cursor:pointer}
.board-replay:hover,
[data-y~="board-replay"]:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:1020px){.demo,
[data-y~="demo"]{margin-bottom:40px}}

/* ITER-2: Create-with-AI dialog — exact naar CreateWithAIDialog.jsx */
.cwa,
[data-y~="cwa"]{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(rgba(255,255,255,.10) 1.2px,transparent 1.2px);background-size:22px 22px;border-radius:var(--r-lg)}
.cwa-gf,
[data-y~="cwa-gf"]{position:absolute;border:1.5px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04)}
.cwa-gf.a,
[data-y~="cwa-gf"][data-y~="a"]{width:150px;height:96px;left:2%;top:8%;transform:rotate(-4deg)}
.cwa-gf.b,
[data-y~="cwa-gf"][data-y~="b"]{width:120px;height:80px;right:3%;bottom:10%;transform:rotate(3deg)}
.cwa-dlg,
[data-y~="cwa-dlg"]{position:relative;width:min(90%,400px);border-radius:24px;background:#F8F9F6;border:1px solid rgba(30,43,34,.12);box-shadow:0 28px 80px rgba(18,28,22,.55),inset 0 1px 0 rgba(255,255,255,.84);padding:20px;font-family:'Space Grotesk',sans-serif;overflow:hidden}
.cwa-tick,
[data-y~="cwa-tick"]{position:absolute;top:0;left:24px;width:54px;height:2px;border-radius:999px;background:#CCFF3F}
.cwa-head,
[data-y~="cwa-head"]{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.cwa-ico,
[data-y~="cwa-ico"]{width:36px;height:36px;border-radius:12px;background:#1C2921;color:#CCFF3F;border:1px solid rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.cwa-head>div,
[data-y~="cwa-head"]>div{flex:1;min-width:0}
.cwa-head b,
[data-y~="cwa-head"] b{display:block;font-size:15.5px;color:#141414}
.cwa-head span,
[data-y~="cwa-head"] span{font-size:11.5px;color:#6B7280}
.cwa-x,
[data-y~="cwa-x"]{width:36px;height:36px;border-radius:12px;background:#E9EDE7;border:1px solid rgba(30,43,34,.10);color:#6B6D62;font-style:normal;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cwa-field,
[data-y~="cwa-field"]{background:#FCFDFB;border:1px solid rgba(30,43,34,.13);border-radius:16px;padding:13px 14px;font-size:12.5px;line-height:1.6;color:#9CA3AF;min-height:110px}
.cwa-count{text-align:right;margin-top:4px;font-family:'Space Mono',monospace;font-size:10px;color:#9CA3AF;font-variant-numeric:tabular-nums}
.cwa-attach{display:flex;align-items:center;gap:9px;margin-top:10px;background:#E9EDE7;border:1px solid rgba(30,43,34,.10);border-radius:12px;padding:10px 13px;font-size:11.5px;font-weight:600;color:#141414}
.cwa-attach svg{color:#6B7280;flex:none}
.cwa-tip{margin-top:10px;font-size:10.5px;color:#9CA3AF}
.cwa-foot,
[data-y~="cwa-foot"]{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:16px}
.cwa-cancel{font-size:12px;font-weight:600;color:#141414;padding:9px 14px;border-radius:999px}
.cwa-gen,
[data-y~="cwa-gen"]{display:inline-flex;align-items:center;gap:6px;background:#1C2921;color:#F8F9F6;font-size:12px;font-weight:700;padding:9px 18px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(18,28,22,.6)}
.cwa-gen b,
[data-y~="cwa-gen"] b{color:#CCFF3F;font-weight:400}
@media(max-width:900px){.cwa,
[data-y~="cwa"]{min-height:360px}}

/* ITER-1: workspace-strip → geanimeerde gloss-band met iconen */
.ws-band,
[data-y~="ws-band"]{margin:22px auto 8px;max-width:1000px;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px 16px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 26%,transparent 52%),var(--surface-raised);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 2px 4px rgba(30,43,34,.05),0 12px 26px rgba(30,43,34,.07)}
.ws-band .ws-tag,
[data-y~="ws-band"] [data-y~="ws-tag"]{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--lime);border-radius:999px;padding:5px 13px;margin-bottom:16px;font-weight:700}
.ws-items2,
[data-y~="ws-items2"]{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:left}
.ws-it,
[data-y~="ws-it"]{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ws-band.in .ws-it,
[data-y~="ws-band"].in [data-y~="ws-it"]{opacity:1;transform:none}
.ws-band.in .ws-it:nth-child(2),
[data-y~="ws-band"].in [data-y~="ws-it"]:nth-child(2){transition-delay:.1s}
.ws-band.in .ws-it:nth-child(3),
[data-y~="ws-band"].in [data-y~="ws-it"]:nth-child(3){transition-delay:.2s}
.ws-band.in .ws-it:nth-child(4),
[data-y~="ws-band"].in [data-y~="ws-it"]:nth-child(4){transition-delay:.3s}
.ws-it i,
[data-y~="ws-it"] i{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:rgba(200,244,61,.35);color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.ws-it b,
[data-y~="ws-it"] b{font-size:13.5px;color:var(--ink)}
.ws-it em,
[data-y~="ws-it"] em{font-style:normal;font-size:11.5px;color:var(--ink-muted)}
.ws-band .ws-line,
[data-y~="ws-band"] [data-y~="ws-line"]{margin-top:14px;font-family:var(--font-hand);font-size:19px;color:var(--ink)}
@media(max-width:980px){.ws-items2,
[data-y~="ws-items2"]{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ws-items2,
[data-y~="ws-items2"]{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ws-it,
[data-y~="ws-it"]{opacity:1;transform:none;transition:none}}

/* ITER-1: story-scenes 1:1 met de app (AI Studio + GenerationNarration) */
.st-studio,
[data-y~="st-studio"]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,380px);padding:18px;border-radius:20px;overflow:hidden}
.sts-edge,
[data-y~="sts-edge"]{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#CCFF3F,#CFE9DD 58%,rgba(207,233,221,0))}
.sts-eyebrow,
[data-y~="sts-eyebrow"]{font-family:var(--font-ui);font-size:10.5px;font-weight:600;color:#526257}
.sts-h,
[data-y~="sts-h"]{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:5px 0 12px;line-height:1.1}
.sts-h b,
[data-y~="sts-h"] b{color:var(--lime)}
.sts-field,
[data-y~="sts-field"]{position:relative;background:#F8F9F6;border:1px solid rgba(30,43,34,.12);box-shadow:inset 0 1px 2px rgba(30,43,34,.05);border-radius:12px;padding:11px 11px 22px;font-size:11.5px;color:var(--ink);min-height:74px}
.sts-count,
[data-y~="sts-count"]{position:absolute;right:8px;bottom:5px;font-family:var(--font-mono);font-size:8.5px;color:#8A8D85}
.st-chip svg,
[data-y~="st-chip"] svg{flex:none}
.st-narr,
[data-y~="st-narr"]{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(84%,360px);padding:22px 18px;text-align:center;border-radius:20px}
.st-mfs,
[data-y~="st-mfs"]{display:flex;justify-content:center;gap:7px;margin-bottom:16px}
.st-mf,
[data-y~="st-mf"]{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:52px;height:30px;border-radius:6px;border:1px solid rgba(20,20,20,.15);background:#fff;padding:0 5px;position:relative}
.st-mf i,
[data-y~="st-mf"] i{position:absolute;left:5px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:2px;background:var(--lime)}
.st-mf u,
[data-y~="st-mf"] u{display:block;height:3px;border-radius:2px;background:rgba(20,20,20,.16);margin-left:14px;text-decoration:none}
.st-mf u.w7,
[data-y~="st-mf"] u[data-y~="w7"]{width:70%;background:rgba(20,20,20,.10)}
.st-nline,
[data-y~="st-nline"]{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600;color:#141414;text-align:left}
.st-nline.sm,
[data-y~="st-nline"][data-y~="sm"]{font-size:11px;justify-content:flex-start}
.st-spin2,
[data-y~="st-spin2"]{width:14px;height:14px;border-radius:50%;border:2px solid rgba(20,20,20,.12);border-top-color:var(--lime);animation:spin 1s linear infinite;flex:none}
.st-nfoot,
[data-y~="st-nfoot"]{margin-top:12px;font-size:10.5px;color:var(--ink-muted);line-height:1.5}
.st-ghosts{position:absolute;left:8%;right:8%;bottom:22px;display:flex;gap:12px}
.st-ghosts span{flex:1;height:44px;border:1.5px dashed var(--line-strong);border-radius:10px;background:rgba(255,255,255,.4)}
@media(prefers-reduced-motion:reduce){.st-spin2,
[data-y~="st-spin2"]{animation:none}}

/* ITER-1: rol-iconen (app persona-iconen) */
.rcard h3,
[data-y~="rcard"] h3{display:flex;align-items:center;gap:10px}
.r-ic,
[data-y~="r-ic"]{width:34px;height:34px;border-radius:10px;background:rgba(200,244,61,.35);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none;font-style:normal;border:1px solid rgba(32,35,31,.10)}

/* ITER-1: input→output stapsgewijs opgebouwd */
.tf-col .tf-chip,
[data-y~="tf-col"] [data-y~="tf-chip"]{opacity:0;transform:translateY(7px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.tf-flow.in .tf-col .tf-chip,
[data-y~="tf-flow"].in [data-y~="tf-col"] [data-y~="tf-chip"]{opacity:1;transform:none}
.tf-flow.in .tf-in .tf-chip:nth-child(2),
[data-y~="tf-flow"].in [data-y~="tf-in"] [data-y~="tf-chip"]:nth-child(2){transition-delay:.1s}
.tf-flow.in .tf-in .tf-chip:nth-child(3),
[data-y~="tf-flow"].in [data-y~="tf-in"] [data-y~="tf-chip"]:nth-child(3){transition-delay:.2s}
.tf-ai,
[data-y~="tf-ai"]{opacity:0;transform:scale(.88);transition:opacity .45s var(--ease) .45s,transform .45s var(--ease) .45s}
.tf-flow.in .tf-ai,
[data-y~="tf-flow"].in [data-y~="tf-ai"]{opacity:1;transform:none}
.tf-board,
[data-y~="tf-board"]{opacity:0;transition:opacity .4s var(--ease) .85s}
.tf-flow.in .tf-board,
[data-y~="tf-flow"].in [data-y~="tf-board"]{opacity:1}
.tf-flow .tf-fr b,
[data-y~="tf-flow"] [data-y~="tf-fr"] b{width:0;transition:width .5s var(--ease)}
.tf-flow.in .tf-fr b,
[data-y~="tf-flow"].in [data-y~="tf-fr"] b{width:60%}
.tf-flow.in .tf-fr:nth-of-type(1) b,
[data-y~="tf-flow"].in [data-y~="tf-fr"]:nth-of-type(1) b{transition-delay:1s}
.tf-flow.in .tf-fr:nth-of-type(2) b,
[data-y~="tf-flow"].in [data-y~="tf-fr"]:nth-of-type(2) b{transition-delay:1.15s}
.tf-flow.in .tf-fr:nth-of-type(3) b,
[data-y~="tf-flow"].in [data-y~="tf-fr"]:nth-of-type(3) b{transition-delay:1.3s}
.tf-flow .tf-out .tf-chip,
[data-y~="tf-flow"] [data-y~="tf-out"] [data-y~="tf-chip"]{transition-delay:0s}
.tf-flow.in .tf-out .tf-chip:nth-child(1),
[data-y~="tf-flow"].in [data-y~="tf-out"] [data-y~="tf-chip"]:nth-child(1){transition-delay:1.55s}
.tf-flow.in .tf-out .tf-chip:nth-child(2),
[data-y~="tf-flow"].in [data-y~="tf-out"] [data-y~="tf-chip"]:nth-child(2){transition-delay:1.65s}
.tf-flow.in .tf-out .tf-chip:nth-child(3),
[data-y~="tf-flow"].in [data-y~="tf-out"] [data-y~="tf-chip"]:nth-child(3){transition-delay:1.75s}
.tf-flow.in .tf-arr:nth-of-type(1) path,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(1) path{transition-delay:.3s}
.tf-flow.in .tf-arr:nth-of-type(1) path.hd,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(1) path[data-y~="hd"]{transition-delay:.6s}
.tf-flow.in .tf-arr:nth-of-type(2) path,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(2) path{transition-delay:.7s}
.tf-flow.in .tf-arr:nth-of-type(2) path.hd,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(2) path[data-y~="hd"]{transition-delay:1s}
.tf-flow.in .tf-arr:nth-of-type(3) path,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(3) path{transition-delay:1.4s}
.tf-flow.in .tf-arr:nth-of-type(3) path.hd,
[data-y~="tf-flow"].in [data-y~="tf-arr"]:nth-of-type(3) path[data-y~="hd"]{transition-delay:1.7s}
@media(prefers-reduced-motion:reduce){
  .tf-col .tf-chip,.tf-ai,.tf-board,
[data-y~="tf-col"] [data-y~="tf-chip"],[data-y~="tf-ai"],[data-y~="tf-board"]{opacity:1;transform:none;transition:none}
  .tf-flow .tf-fr b,
[data-y~="tf-flow"] [data-y~="tf-fr"] b{width:60%;transition:none}
}

/* ITER-2: probleem-scène — meerfasen frictie → resolve (app-true chrome) */
.pv-dock,
[data-y~="pv-dock"]{position:absolute;left:10px;bottom:12px;display:flex;flex-direction:column;gap:5px;padding:7px 6px;border-radius:13px;background:rgba(250,249,245,.96);border:1px solid rgba(32,35,31,.11);box-shadow:0 10px 24px rgba(32,35,31,.09),inset 0 1px 0 rgba(255,255,255,.88);z-index:3}
.pv-dock u,
[data-y~="pv-dock"] u{width:26px;height:26px;border-radius:9px;background:rgba(32,35,31,.06);text-decoration:none}
.pv-dock u:first-child,
[data-y~="pv-dock"] u:first-child{background:var(--lime)}
.pv-aibtn,
[data-y~="pv-aibtn"]{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;background:#1C2921;color:#CCFF3F;font-size:9.5px;font-weight:700;padding:7px 13px;border-radius:999px;box-shadow:0 10px 22px -8px rgba(18,28,22,.6);z-index:3;white-space:nowrap}
.pv-cursor{opacity:0;transition:opacity .3s}
.pv-box.b1{opacity:0;transform:rotate(-3deg) scale(.85);transition:opacity .4s var(--ease),transform .4s var(--ease)}
/* fase 1: worstel-beats */
/* fase 2: resolve */
.prob-stage.p2 .pv-board,
[data-y~="prob-stage"].p2 [data-y~="pv-board"]{opacity:1;transform:none}
.prob-stage.p2 .pv-frame,
[data-y~="prob-stage"].p2 [data-y~="pv-frame"]{opacity:1;transform:none}
.prob-stage.p2 .pv-links path,
[data-y~="prob-stage"].p2 [data-y~="pv-links"] path{stroke-dashoffset:0}
.pv-chip,
[data-y~="pv-chip"]{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:5px;background:rgba(30,30,30,.92);color:#fff;font-size:9px;font-weight:600;padding:6px 11px;border-radius:999px;opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease) 1.4s,transform .4s var(--ease) 1.4s}
.prob-stage.p2 .pv-chip,
[data-y~="prob-stage"].p2 [data-y~="pv-chip"]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pv-dock,.pv-aibtn,
[data-y~="pv-dock"],[data-y~="pv-aibtn"]{transition:none}
  .pv-chip,
[data-y~="pv-chip"]{transition:none}
  .prob-stage .pv-chip,
[data-y~="prob-stage"] [data-y~="pv-chip"]{opacity:1;transform:none}
}

/* ITER-2: sc4 = PresentationOverlay 1:1 + Final-documents kaart */
.st-mask,
[data-y~="st-mask"]{position:absolute;inset:0;background:rgba(22,24,21,.60)}
.st-esc,
[data-y~="st-esc"]{position:absolute;top:10px;right:12px;font-size:9px;color:rgba(255,255,255,.6)}
.st-esc em,
[data-y~="st-esc"] em{font-style:normal;color:#CCFF3F}
.st-slide,
[data-y~="st-slide"]{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(62%,270px);background:#fff;border-radius:14px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.st-slide b,
[data-y~="st-slide"] b{display:block;height:9px;width:58%;border-radius:4px;background:var(--sage)}
.st-slide i,
[data-y~="st-slide"] i{display:block;height:5px;border-radius:3px;background:#EDEBE3;margin-top:8px}
.st-rvs,
[data-y~="st-rvs"]{display:flex;gap:6px;margin-top:12px}
.st-rvs u,
[data-y~="st-rvs"] u{flex:1;height:22px;border-radius:7px;border:1.5px dashed rgba(32,35,31,.25);text-decoration:none}
.st-pbar,
[data-y~="st-pbar"]{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:14px;background:rgba(30,30,30,.92);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);white-space:nowrap}
.st-pnav,
[data-y~="st-pnav"]{width:22px;height:22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.st-pcount,
[data-y~="st-pcount"]{color:#fff;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.st-pcount em,
[data-y~="st-pcount"] em{font-style:normal;color:hsl(72 88% 62%);font-size:9px}
.st-pdiv,
[data-y~="st-pdiv"]{width:1px;height:16px;background:rgba(255,255,255,.2)}
.st-pdots,
[data-y~="st-pdots"]{display:inline-flex;align-items:center;gap:4px}
.st-pdots u,
[data-y~="st-pdots"] u{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.35);text-decoration:none;transition:width .2s}
.st-pdots u.on,
[data-y~="st-pdots"] u[data-y~="on"]{width:16px;background:#fff}
.st-pend,
[data-y~="st-pend"]{color:#fff;font-size:9.5px;font-weight:600;background:hsl(0 0% 20%);border-radius:999px;padding:5px 10px}
@media(max-width:1240px){.st-pdiv,.st-pdots,
[data-y~="st-pdiv"],[data-y~="st-pdots"]{display:none}}

/* ITER-2: workspace-replica exacter (HomeHeader, ticks, widget-headers) */
.ea-head,
[data-y~="ea-head"]{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:2px 4px}
.ea-head-l b,
[data-y~="ea-head-l"] b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1}
.ea-head-l em,
[data-y~="ea-head-l"] em{display:block;font-style:normal;font-size:9.5px;color:#73776F;margin-top:4px}
.ea-head-r,
[data-y~="ea-head-r"]{display:flex;align-items:center;gap:8px}
.ea-newbtn,
[data-y~="ea-newbtn"]{display:inline-flex;align-items:center;gap:5px;background:#1C2921;color:#F8F9F6;font-size:9.5px;font-weight:700;padding:7px 12px;border-radius:999px}
.ea-newbtn b,
[data-y~="ea-newbtn"] b{color:#C8F43D;display:inline-flex}
.ea-bell,
[data-y~="ea-bell"]{width:26px;height:26px;border-radius:50%;border:1px solid rgba(38,45,25,.14);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted)}
.ea-ava,
[data-y~="ea-ava"]{width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ea-hub,.ea-focus,.ea-dock,.ea-recent,.ea-folders,
[data-y~="ea-hub"],[data-y~="ea-focus"],[data-y~="ea-dock"],[data-y~="ea-recent"],[data-y~="ea-folders"]{position:relative;overflow:hidden}
.ea-tick,
[data-y~="ea-tick"]{position:absolute;top:0;left:16px;width:44px;height:2px;border-radius:999px;background:var(--lime)}
.ea-tick.moss,
[data-y~="ea-tick"][data-y~="moss"]{background:#8EAE99}
.ea-fico,
[data-y~="ea-fico"]{width:28px;height:28px;border-radius:9px;background:#1C2921;color:#C8F43D;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-style:normal;flex:none}
.ea-dock-h,
[data-y~="ea-dock-h"]{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ea-dock-h b,
[data-y~="ea-dock-h"] b{display:block;font-size:11.5px;color:#F5F2E9}
.ea-dock-h em,
[data-y~="ea-dock-h"] em{display:block;font-style:normal;font-size:8.5px;color:rgba(245,242,233,.66);margin-top:2px}
.ea-dock-n,
[data-y~="ea-dock-n"]{text-align:right;font-size:17px;font-weight:600;color:#C8F43D;line-height:1}
.ea-dock-n u,
[data-y~="ea-dock-n"] u{display:block;text-decoration:none;font-size:7.5px;color:rgba(245,242,233,.66);margin-top:3px}
.ea-board,
[data-y~="ea-board"]{flex-direction:column;align-items:stretch;gap:6px}
.ea-bprev,
[data-y~="ea-bprev"]{display:flex;gap:4px}
.ea-bprev u,
[data-y~="ea-bprev"] u{flex:1;height:14px;border-radius:4px;background:rgba(255,255,255,.55);border:1px solid rgba(32,35,31,.10);text-decoration:none}
.ea-bt,
[data-y~="ea-bt"]{display:flex;align-items:center;gap:6px}

/* ITER-3: echte founder-foto's als enige gezichten op de site */
.fnd-line,
[data-y~="fnd-line"]{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 26%,transparent 52%),var(--surface-raised);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 2px 4px rgba(30,43,34,.05),0 8px 18px rgba(30,43,34,.06);max-width:46ch}
.fnd-line img,
[data-y~="fnd-line"] img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 42%;flex:none}
.fnd-line span,
[data-y~="fnd-line"] span{font-size:13.5px;font-style:italic;color:var(--ink);line-height:1.45}
.fnd-line b,
[data-y~="fnd-line"] b{display:block;font-style:normal;font-size:11px;color:var(--ink-muted);margin-top:3px;font-weight:600}
.fnd-band,
[data-y~="fnd-band"]{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;max-width:720px;margin:46px auto 0;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 26%,transparent 52%),var(--surface-raised);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 2px 4px rgba(30,43,34,.05),0 12px 26px rgba(30,43,34,.08)}
.fnd-band img,
[data-y~="fnd-band"] img{width:100%;height:220px;object-fit:cover;object-position:50% 62%;border-radius:14px}
.fnd-band-t h3,
[data-y~="fnd-band-t"] h3{font-size:21px;margin:8px 0 8px}
.fnd-band-t p,
[data-y~="fnd-band-t"] p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
@media(max-width:640px){.fnd-band,
[data-y~="fnd-band"]{grid-template-columns:1fr}.fnd-band img,
[data-y~="fnd-band"] img{height:auto;aspect-ratio:4/3;object-position:50% 56%}}
.cta-sign,
[data-y~="cta-sign"]{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.cta-sign img,
[data-y~="cta-sign"] img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 42%;border:2px solid rgba(255,255,255,.25)}
.cta-sign span,
[data-y~="cta-sign"] span{font-family:var(--font-hand);font-size:19px;color:rgba(255,255,255,.85)}

/* ===== ITER-4 — app-exacte scène-animaties (replayen bij activatie, RM-safe) ===== */
/* sc1: caret in het veld (app-textarea heeft focus) */
.st-caret,
[data-y~="st-caret"]{display:inline-block;width:1.5px;height:12px;background:#141414;vertical-align:-2px;margin-left:1px;text-decoration:none;animation:blink 1s steps(1) infinite}
/* sc2: MiniFrameStrip — de ECHTE app-keyframes (8s loop, 0.35s stagger) */
@keyframes mfsCard{0%,4%{opacity:0;transform:translateY(3px)}14%,92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(3px)}}
@keyframes mfsFill{0%,34%{opacity:0}46%,92%{opacity:1}100%{opacity:0}}
.st-scene.on .st-mf,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-mf"]{animation:mfsCard 8s ease-in-out infinite}
.st-scene.on .st-mf i,.st-scene.on .st-mf u,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-mf"] i,[data-y~="st-scene"][data-y~="on"] [data-y~="st-mf"] u{animation:mfsFill 8s ease-in-out infinite}
.st-mfs .st-mf:nth-child(2),.st-mfs .st-mf:nth-child(2) i,.st-mfs .st-mf:nth-child(2) u,
[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(2),[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(2) i,[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(2) u{animation-delay:.35s}
.st-mfs .st-mf:nth-child(3),.st-mfs .st-mf:nth-child(3) i,.st-mfs .st-mf:nth-child(3) u,
[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(3),[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(3) i,[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(3) u{animation-delay:.7s}
.st-mfs .st-mf:nth-child(4),.st-mfs .st-mf:nth-child(4) i,.st-mfs .st-mf:nth-child(4) u,
[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(4),[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(4) i,[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(4) u{animation-delay:1.05s}
.st-mfs .st-mf:nth-child(5),.st-mfs .st-mf:nth-child(5) i,.st-mfs .st-mf:nth-child(5) u,
[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(5),[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(5) i,[data-y~="st-mfs"] [data-y~="st-mf"]:nth-child(5) u{animation-delay:1.4s}
.st-ghosts span{opacity:0;transform:translateY(4px)}
@keyframes ghostIn{to{opacity:1;transform:none}}
.st-scene.on .st-ghosts span,
[data-y~="st-scene"][data-y~="on"] .st-ghosts span{animation:ghostIn .5s var(--ease) both}
.st-scene.on .st-ghosts span:nth-child(2),
[data-y~="st-scene"][data-y~="on"] .st-ghosts span:nth-child(2){animation-delay:.6s}
.st-scene.on .st-ghosts span:nth-child(3),
[data-y~="st-scene"][data-y~="on"] .st-ghosts span:nth-child(3){animation-delay:1.2s}
/* sc3: selectie → convert-chip volgorde */
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.st-scene.on .st-sel,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-sel"]{animation:popIn .35s var(--ease) .3s both}
.st-scene.on .st-chip.fl3,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-chip"][data-y~="fl3"]{animation:popIn .35s var(--ease) .95s both}
/* sc4: reveals verschijnen zoals bij een Space-druk; teller telt mee */
.st-rvs u.r1,
[data-y~="st-rvs"] u[data-y~="r1"]{border-style:solid;border-color:var(--lime-deep);background:rgba(200,244,61,.25)}
@keyframes rvIn{from{border-style:dashed;border-color:rgba(32,35,31,.25);background:transparent}to{border-style:solid;border-color:var(--lime-deep);background:rgba(200,244,61,.25)}}
.st-scene.on .st-rvs u.r2,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-rvs"] u[data-y~="r2"]{animation:rvIn .3s ease 1.4s both}
.st-pstep,
[data-y~="st-pstep"]{position:relative;display:inline-block;min-width:86px;text-align:left}
.st-pstep em,
[data-y~="st-pstep"] em{font-style:normal;color:hsl(72 88% 62%);font-size:9px}
.st-pstep .e2,
[data-y~="st-pstep"] [data-y~="e2"]{position:absolute;left:0;top:0;opacity:0}
@keyframes stepSwap{to{opacity:1}}
@keyframes stepSwapOut{to{opacity:0}}
.st-scene.on .st-pstep .e2,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-pstep"] [data-y~="e2"]{animation:stepSwap .2s ease 1.4s both}
.st-scene.on .st-pstep .e1,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-pstep"] [data-y~="e1"]{animation:stepSwapOut .2s ease 1.4s both}
/* sc5: document-statement — exact DocumentReadyStage */
.st-mask.dk,
[data-y~="st-mask"][data-y~="dk"]{background:rgba(18,22,18,.78)}
.st-stmt,
[data-y~="st-stmt"]{position:absolute;left:0;right:0;top:26px;text-align:center;padding:0 14px}
.st-stmt b,
[data-y~="st-stmt"] b{position:relative;display:inline-block;font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:#F7F7F2}
.st-ul,
[data-y~="st-ul"]{position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:999px;background:#CCFF3F;transform-origin:left center;transform:scaleX(0)}
@keyframes docUl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st-scene.on .st-ul,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-ul"]{animation:docUl .62s cubic-bezier(.22,.9,.3,1) .5s both}
.st-meta,
[data-y~="st-meta"]{display:block;margin-top:9px;font-family:var(--font-mono);font-size:8px;color:rgba(247,247,242,.56)}
.st-meta em,
[data-y~="st-meta"] em{font-style:normal;color:#DDF48F;border-bottom:1px solid rgba(204,255,63,.45)}
.st-dl,
[data-y~="st-dl"]{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:30px;padding:0 15px;border-radius:999px;background:#CCFF3F;color:#1C2921;font-size:11px;font-weight:700;box-shadow:0 10px 26px rgba(204,255,63,.20)}
.st-rail,
[data-y~="st-rail"]{position:absolute;left:14px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.st-rail u,
[data-y~="st-rail"] u{display:flex;align-items:center;gap:6px;text-decoration:none;font-size:8.5px;color:rgba(247,247,242,.55)}
.st-rail u i,
[data-y~="st-rail"] u i{font-style:normal;font-family:var(--font-mono);font-size:7.5px}
.st-rail u.on,
[data-y~="st-rail"] u[data-y~="on"]{color:#F7F7F2}
.st-rail u.on::before,
[data-y~="st-rail"] u[data-y~="on"]::before{content:"";width:3px;height:10px;border-radius:2px;background:#CCFF3F}
.st-a4,
[data-y~="st-a4"]{position:absolute;right:18px;bottom:14px;width:120px;background:#FFFDF8;border-radius:6px;padding:10px 10px 12px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.st-a4-wm,
[data-y~="st-a4-wm"]{display:block;font-size:6.5px;font-weight:800;letter-spacing:.02em;color:#20231F;border-bottom:1px solid rgba(32,35,31,.12);padding-bottom:4px;margin-bottom:6px}
.st-a4 b,
[data-y~="st-a4"] b{display:block;height:6px;width:64%;border-radius:3px;background:var(--sage)}
.st-a4 i,
[data-y~="st-a4"] i{display:block;height:3.5px;border-radius:2px;background:#EDEBE3;margin-top:5px;transform-origin:left;transform:scaleX(0)}
@keyframes lineIn{to{transform:scaleX(1)}}
.st-scene.on .st-a4 i.l1,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-a4"] i[data-y~="l1"]{animation:lineIn .4s var(--ease) .7s both}
.st-scene.on .st-a4 i.l2,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-a4"] i[data-y~="l2"]{animation:lineIn .4s var(--ease) .95s both}
.st-scene.on .st-a4 i.l3,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-a4"] i[data-y~="l3"]{animation:lineIn .4s var(--ease) 1.2s both}
.st-scene.on .st-a4 i.l4,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-a4"] i[data-y~="l4"]{animation:lineIn .4s var(--ease) 1.45s both;width:72%}
@media(prefers-reduced-motion:reduce){
  .st-caret,
[data-y~="st-caret"]{animation:none}
  .st-scene.on .st-mf,.st-scene.on .st-mf i,.st-scene.on .st-mf u,.st-scene.on .st-ghosts span,.st-scene.on .st-sel,.st-scene.on .st-chip.fl3,.st-scene.on .st-rvs u.r2,.st-scene.on .st-pstep .e1,.st-scene.on .st-pstep .e2,.st-scene.on .st-ul,.st-scene.on .st-a4 i,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-mf"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-mf"] i,[data-y~="st-scene"][data-y~="on"] [data-y~="st-mf"] u,[data-y~="st-scene"][data-y~="on"] .st-ghosts span,[data-y~="st-scene"][data-y~="on"] [data-y~="st-sel"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-chip"][data-y~="fl3"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-rvs"] u[data-y~="r2"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-pstep"] [data-y~="e1"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-pstep"] [data-y~="e2"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-ul"],[data-y~="st-scene"][data-y~="on"] [data-y~="st-a4"] i{animation:none}
  .st-ghosts span,.st-sel,.st-chip.fl3,
.st-ghosts span,[data-y~="st-sel"],[data-y~="st-chip"][data-y~="fl3"]{opacity:1;transform:none}
  .st-rvs u.r2,
[data-y~="st-rvs"] u[data-y~="r2"]{border-style:solid;border-color:var(--lime-deep);background:rgba(200,244,61,.25)}
  .st-pstep .e1,
[data-y~="st-pstep"] [data-y~="e1"]{opacity:0}.st-pstep .e2,
[data-y~="st-pstep"] [data-y~="e2"]{opacity:1}
  .st-ul,
[data-y~="st-ul"]{transform:scaleX(1)}
  .st-a4 i,
[data-y~="st-a4"] i{transform:scaleX(1)}
}

/* ===== SketchMind assistant-widget (app FLOATING_DIALOG-materiaal) ===== */
.smc-fab,
[data-y~="smc-fab"]{position:fixed;right:18px;bottom:18px;z-index:180;width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;box-shadow:0 14px 34px -10px rgba(18,28,22,.5)}
.smc-fab::before,
[data-y~="smc-fab"]::before{display:none}
.smc-fab svg,
[data-y~="smc-fab"] svg{position:relative;z-index:1;color:#CCFF3F;transition:color .3s}
.smc-fab:hover svg,
[data-y~="smc-fab"]:hover svg{color:var(--ink)}
.smc-fab[hidden],
[data-y~="smc-fab"][hidden]{display:none}
.smc-panel,
[data-y~="smc-panel"]{position:fixed;right:16px;bottom:78px;z-index:181;width:min(380px,calc(100vw - 24px));height:min(560px,72svh);display:flex;flex-direction:column;background:#F8F9F6;border:1px solid rgba(30,43,34,.12);border-radius:24px;box-shadow:0 28px 80px rgba(18,28,22,.28),inset 0 1px 0 rgba(255,255,255,.84);overflow:hidden;font-family:var(--font-ui)}
.smc-panel[hidden],
[data-y~="smc-panel"][hidden]{display:none}
.smc-tick,
[data-y~="smc-tick"]{position:absolute;top:0;left:24px;width:54px;height:2px;border-radius:999px;background:#CCFF3F}
.smc-head,
[data-y~="smc-head"]{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid rgba(30,43,34,.10);flex:none}
.smc-head img,
[data-y~="smc-head"] img{border-radius:9px;flex:none}
.smc-head-t,
[data-y~="smc-head-t"]{flex:1;min-width:0}
.smc-head-t b,
[data-y~="smc-head-t"] b{display:block;font-size:14px;color:#141414}
.smc-head-t span,
[data-y~="smc-head-t"] span{font-size:10.5px;color:var(--ink-muted)}
.smc-x,
[data-y~="smc-x"]{width:34px;height:34px;border-radius:12px;background:#E9EDE7;border:1px solid rgba(30,43,34,.10);color:#6B6D62;font-size:12px;cursor:pointer;flex:none}
.smc-msgs,
[data-y~="smc-msgs"]{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(rgba(38,45,25,.05) 1px,transparent 1px);background-size:14px 14px}
.smc-m,
[data-y~="smc-m"]{max-width:86%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.55;color:#141414;white-space:pre-line;overflow-wrap:break-word}
.smc-m.a,
[data-y~="smc-m"][data-y~="a"]{align-self:flex-start;background:#fff;border:1px solid rgba(30,43,34,.11);border-bottom-left-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(30,43,34,.05)}
.smc-m.u,
[data-y~="smc-m"].u{align-self:flex-end;background:#1C2921;color:#F8F9F6;border-bottom-right-radius:6px}
.smc-m a,
[data-y~="smc-m"] a{color:#141414;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.smc-m.a ul,
[data-y~="smc-m"][data-y~="a"] ul{margin:4px 0 4px 16px;padding:0}
.smc-m.a li,
[data-y~="smc-m"][data-y~="a"] li{margin:2px 0}
.smc-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid rgba(30,43,34,.11);border-radius:16px;border-bottom-left-radius:6px}
.smc-typing i{width:6px;height:6px;border-radius:50%;background:rgba(30,43,34,.4);animation:smcB 1.2s ease-in-out infinite}
.smc-typing i:nth-child(2){animation-delay:.15s}
.smc-typing i:nth-child(3){animation-delay:.3s}
@keyframes smcB{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.smc-sugs,
[data-y~="smc-sugs"]{display:flex;flex-wrap:wrap;gap:7px}
.smc-sugs button,
[data-y~="smc-sugs"] button{border:1px solid rgba(30,43,34,.16);background:#fff;color:#141414;font-family:var(--font-ui);font-size:12px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
.smc-sugs button:hover,
[data-y~="smc-sugs"] button:hover{background:#E9EDE7;border-color:rgba(30,43,34,.3)}
.smc-in,
[data-y~="smc-in"]{display:flex;gap:8px;padding:12px 14px 6px;flex:none}
.smc-in input,
[data-y~="smc-in"] input{flex:1;min-width:0;background:#FCFDFB;border:1px solid rgba(30,43,34,.13);border-radius:999px;padding:11px 16px;font-family:var(--font-ui);font-size:13.5px;color:#141414;outline:none}
.smc-in input:focus,
[data-y~="smc-in"] input:focus{border-color:rgba(30,43,34,.3);box-shadow:0 0 0 3px rgba(200,244,61,.35)}
.smc-send,
[data-y~="smc-send"]{width:42px;height:42px;border-radius:50%;background:#1C2921;color:#CCFF3F;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background .15s}
.smc-send:hover,
[data-y~="smc-send"]:hover{background:#26382C}
.smc-send[disabled],
[data-y~="smc-send"][disabled]{opacity:.5;pointer-events:none}
.smc-foot,
[data-y~="smc-foot"]{text-align:center;font-size:10.5px;color:var(--ink-muted);padding:4px 12px 12px;flex:none}
.smc-foot a,
[data-y~="smc-foot"] a{font-weight:700;color:var(--ink)}
.smc-cursor{display:inline-block;width:1.5px;height:1em;background:#141414;vertical-align:-2px;margin-left:1px;text-decoration:none;animation:blink 1s steps(1) infinite}
@media(max-width:480px){.smc-panel,
[data-y~="smc-panel"]{right:8px;left:8px;width:auto;bottom:72px;height:min(560px,70svh)}.smc-fab,
[data-y~="smc-fab"]{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.smc-typing i{animation:none}.smc-fab:hover,
[data-y~="smc-fab"]:hover{transform:none}}

/* chat: de knop-flow ademt op hover; de chat "borrelt" open vanuit de knop */
.smc-fab:hover::after,
[data-y~="smc-fab"]:hover::after{animation:smcBreath 2.4s ease-in-out .55s infinite}
@keyframes smcBreath{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}
@keyframes smcBubbleIn{
  0%{opacity:0;transform:scale(.12)}
  45%{opacity:1}
  74%{transform:scale(1.014)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes smcBubbleOut{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.14)}
}
.smc-panel,
[data-y~="smc-panel"]{transform-origin:calc(100% - 46px) calc(100% + 36px);will-change:transform,opacity;animation:smcBubbleIn .72s cubic-bezier(.22,.9,.3,1) both}
.smc-panel.closing,
[data-y~="smc-panel"].closing{animation:smcBubbleOut .34s cubic-bezier(.5,0,.75,.35) both}
/* inhoud valt gelaagd binnen — nooit alles tegelijk */
@keyframes smcRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.smc-panel:not(.closing) .smc-head,
[data-y~="smc-panel"]:not(.closing) [data-y~="smc-head"]{animation:smcRise .5s cubic-bezier(.22,.9,.3,1) .24s both}
.smc-panel:not(.closing) .smc-msgs,
[data-y~="smc-panel"]:not(.closing) [data-y~="smc-msgs"]{animation:smcRise .5s cubic-bezier(.22,.9,.3,1) .32s both}
.smc-panel:not(.closing) .smc-in,
[data-y~="smc-panel"]:not(.closing) [data-y~="smc-in"]{animation:smcRise .5s cubic-bezier(.22,.9,.3,1) .4s both}
.smc-panel:not(.closing) .smc-foot,
[data-y~="smc-panel"]:not(.closing) [data-y~="smc-foot"]{animation:smcRise .5s cubic-bezier(.22,.9,.3,1) .46s both}
/* twee-drie lime belletjes die even opstijgen uit de knop */
.smc-bubbles,
[data-y~="smc-bubbles"]{position:fixed;right:38px;bottom:32px;z-index:182;pointer-events:none}
.smc-bubbles i,
[data-y~="smc-bubbles"] i{position:absolute;bottom:0;border-radius:50%;background:var(--lime);opacity:0;box-shadow:0 0 0 1px rgba(30,43,34,.08)}
.smc-bubbles i:nth-child(1),
[data-y~="smc-bubbles"] i:nth-child(1){width:9px;height:9px;right:0}
.smc-bubbles i:nth-child(2),
[data-y~="smc-bubbles"] i:nth-child(2){width:6px;height:6px;right:20px}
.smc-bubbles i:nth-child(3),
[data-y~="smc-bubbles"] i:nth-child(3){width:4px;height:4px;right:-12px}
@keyframes smcFloat{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translateY(-56px) scale(1)}}
.smc-bubbles.play i:nth-child(1),
[data-y~="smc-bubbles"].play i:nth-child(1){animation:smcFloat .9s ease-out both}
.smc-bubbles.play i:nth-child(2),
[data-y~="smc-bubbles"].play i:nth-child(2){animation:smcFloat 1s ease-out .12s both}
.smc-bubbles.play i:nth-child(3),
[data-y~="smc-bubbles"].play i:nth-child(3){animation:smcFloat .85s ease-out .22s both}
@media(prefers-reduced-motion:reduce){
  .smc-panel,.smc-panel.closing,.smc-panel .smc-head,.smc-panel .smc-msgs,.smc-panel .smc-in,.smc-panel .smc-foot,
[data-y~="smc-panel"],[data-y~="smc-panel"].closing,[data-y~="smc-panel"] [data-y~="smc-head"],[data-y~="smc-panel"] [data-y~="smc-msgs"],[data-y~="smc-panel"] [data-y~="smc-in"],[data-y~="smc-panel"] [data-y~="smc-foot"]{animation:none}
  .smc-fab:hover::after,
[data-y~="smc-fab"]:hover::after{animation:none}
  .smc-bubbles,
[data-y~="smc-bubbles"]{display:none}
}

/* ===== ITER-6 — footer met body + warme header ===== */
.footer .wrap::after,
[data-y~="footer"] [data-y~="wrap"]::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:15px 15px;pointer-events:none;z-index:0;border-radius:28px}
.footer .wrap>*,
[data-y~="footer"] [data-y~="wrap"]>*{position:relative;z-index:1}
.f-cta,
[data-y~="f-cta"]{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.f-cta .btn-primary,
[data-y~="f-cta"] [data-y~="btn-primary"]{background:var(--lime);color:var(--ink);padding:11px 19px;font-size:14px}
.f-cta .btn-primary::before,
[data-y~="f-cta"] [data-y~="btn-primary"]::before{display:none}
.f-cta .btn-primary::after,
[data-y~="f-cta"] [data-y~="btn-primary"]::after{background:#F5F2E9}
.f-cta .btn-primary:hover,
[data-y~="f-cta"] [data-y~="btn-primary"]:hover{color:var(--ink)}
.f-mail,
[data-y~="f-mail"]{font-family:var(--font-mono);font-size:12.5px;color:rgba(245,242,233,.78);border-bottom:1px solid rgba(204,255,63,.45);padding-bottom:1px}
.f-mail:hover,
[data-y~="f-mail"]:hover{color:#CCFF3F}
.footer .wrap>.f-script,
[data-y~="footer"] [data-y~="wrap"]>[data-y~="f-script"]{position:absolute;left:46px;bottom:96px;font-family:var(--font-hand);font-size:clamp(34px,4.2vw,60px);color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;z-index:0}
.footer-bot,
[data-y~="footer-bot"]{align-items:center}
.f-top,
[data-y~="f-top"]{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid rgba(250,251,248,.30);color:#F5F2E9;font-size:15px;cursor:pointer;flex:none;transition:border-color .2s,color .2s,transform .25s var(--ease)}
.f-top:hover,
[data-y~="f-top"]:hover{border-color:#CCFF3F;color:#CCFF3F;transform:translateY(-2px)}
@media(max-width:900px){.f-script,
[data-y~="f-script"]{display:none}}
@media(max-width:640px){.f-cta,
[data-y~="f-cta"]{gap:10px}}

/* ===== ITER-7 — probleem v3: generiek whiteboard, tijd als boodschap ===== */
.pv-gen,
[data-y~="pv-gen"]{position:absolute;inset:0;background:#F6F7F9;transition:opacity .5s var(--ease)}
.pvg-top,
[data-y~="pvg-top"]{position:absolute;top:0;left:0;right:0;height:30px;background:#fff;border-bottom:1px solid #E2E5EA;display:flex;align-items:center;gap:5px;padding:0 10px}
.pvg-top i,
[data-y~="pvg-top"] i{width:7px;height:7px;border-radius:50%;background:#E2E5EA}
.pvg-top em,
[data-y~="pvg-top"] em{font-style:normal;font-size:9.5px;color:#8A93A3;margin-left:6px}
.pvg-timer,
[data-y~="pvg-timer"]{margin-left:auto;font-family:var(--font-mono);font-size:10px;font-weight:700;color:#5B6B8C;background:#EEF1F5;border-radius:6px;padding:2px 7px;text-decoration:none;font-variant-numeric:tabular-nums}
.pvg-left,
[data-y~="pvg-left"]{position:absolute;left:8px;top:42px;display:flex;flex-direction:column;gap:5px;padding:6px;background:#fff;border:1px solid #E2E5EA;border-radius:8px}
.pvg-left u,
[data-y~="pvg-left"] u{width:22px;height:22px;border-radius:5px;background:#EEF1F5}
.pvg-cursor,
[data-y~="pvg-cursor"]{position:absolute;top:0;left:0;color:#1f2733;z-index:5;opacity:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.pvg-box,
[data-y~="pvg-box"]{position:absolute;border:1.5px solid #9AA6BA;border-radius:4px;background:#fff;opacity:0}
.pvg-box.a,
[data-y~="pvg-box"][data-y~="a"]{width:90px;height:54px;top:24%;left:22%}
.pvg-box.b,
[data-y~="pvg-box"][data-y~="b"]{width:74px;height:48px;top:20%;left:58%}
.pvg-box.c,
[data-y~="pvg-box"][data-y~="c"]{width:64px;height:44px;top:56%;left:48%}
.pvg-arrow,
[data-y~="pvg-arrow"]{position:absolute;top:30%;left:34%;width:130px;height:64px;overflow:visible}
.pvg-arrow path,
[data-y~="pvg-arrow"] path{stroke:#9AA6BA;stroke-width:1.6;fill:none;stroke-dasharray:220;stroke-dashoffset:220}
.pvg-sticky,
[data-y~="pvg-sticky"]{position:absolute;bottom:18%;left:20%;width:52px;height:48px;background:#FFF3B0;border:1px solid #EAD97A;border-radius:2px;transform:rotate(-4deg);opacity:0}
.pvg-note,
[data-y~="pvg-note"]{position:absolute;bottom:12%;right:12%;font-size:10.5px;font-style:italic;color:#8A93A3;opacity:0}
/* beats onder .p1 */
@keyframes pvgIn{to{opacity:1}}
@keyframes pvgOut{to{opacity:0;transform:scale(.85)}}
@keyframes pvgShift{to{transform:translate(-46px,34px)}}
@keyframes pvgCur{
  0%{transform:translate(44px,180px);opacity:0}
  4%{opacity:1}
  12%{transform:translate(150px,96px)}
  22%{transform:translate(168px,112px)}
  34%{transform:translate(330px,86px)}
  46%{transform:translate(250px,120px)}
  58%{transform:translate(320px,180px)}
  70%{transform:translate(292px,196px)}
  82%{transform:translate(140px,220px)}
  94%{transform:translate(236px,150px)}
  100%{transform:translate(236px,150px);opacity:1}
}
.prob-stage.p1 .pvg-cursor,
[data-y~="prob-stage"].p1 [data-y~="pvg-cursor"]{animation:pvgCur 6.4s ease-in-out both}
.prob-stage.p1 .pvg-box.a,
[data-y~="prob-stage"].p1 [data-y~="pvg-box"][data-y~="a"]{animation:pvgIn .3s .8s both}
.prob-stage.p1 .pvg-box.b,
[data-y~="prob-stage"].p1 [data-y~="pvg-box"][data-y~="b"]{animation:pvgIn .3s 2s both,pvgShift .5s var(--ease) 3s both}
.prob-stage.p1 .pvg-arrow path,
[data-y~="prob-stage"].p1 [data-y~="pvg-arrow"] path{transition:stroke-dashoffset .8s var(--ease) 2.5s;stroke-dashoffset:0}
.prob-stage.p1 .pvg-box.c,
[data-y~="prob-stage"].p1 [data-y~="pvg-box"][data-y~="c"]{animation:pvgIn .3s 3.7s both,pvgOut .35s 4.5s forwards}
.prob-stage.p1 .pvg-sticky,
[data-y~="prob-stage"].p1 [data-y~="pvg-sticky"]{animation:pvgIn .3s 5.1s both}
.prob-stage.p1 .pvg-note,
[data-y~="prob-stage"].p1 [data-y~="pvg-note"]{animation:pvgIn .4s 5.7s both}
/* resolve: generiek weg, SketchMind erin (bestaande p2-regels) + tijdcontrast */
.prob-stage.p2 .pv-gen,
[data-y~="prob-stage"].p2 [data-y~="pv-gen"]{opacity:0;pointer-events:none}
.pv-fast,
[data-y~="pv-fast"]{position:absolute;top:16px;right:18px;font-family:var(--font-hand);font-size:19px;color:var(--lime-text);opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease) 1.1s,transform .4s var(--ease) 1.1s}
.prob-stage.p2 .pv-fast,
[data-y~="prob-stage"].p2 [data-y~="pv-fast"]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pv-gen,
[data-y~="pv-gen"]{display:none}
  .pvg-cursor,.pvg-box,.pvg-sticky,.pvg-note,
[data-y~="pvg-cursor"],[data-y~="pvg-box"],[data-y~="pvg-sticky"],[data-y~="pvg-note"]{animation:none}
  .pv-fast,
[data-y~="pv-fast"]{opacity:1;transform:none;transition:none}
}

/* ===== ITER-7 — sc3: echte canvas-chrome (Toolbar/SelectionToolbar/Zoom/AI) ===== */
.st-tb,
[data-y~="st-tb"]{position:absolute;left:10px;bottom:12px;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:13px;background:rgba(250,249,245,.96);border:1px solid rgba(32,35,31,.11);box-shadow:0 10px 24px rgba(32,35,31,.09),inset 0 1px 0 rgba(255,255,255,.88);z-index:3}
.st-tb u,
[data-y~="st-tb"] u{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-muted);text-decoration:none}
.st-tb u.on,
[data-y~="st-tb"] u[data-y~="on"]{background:#1E2B22;color:#F8FAF7;border:1px solid rgba(204,255,63,.2);box-shadow:0 3px 8px rgba(18,28,22,.14),inset 0 1px 0 rgba(255,255,255,.10)}
.st-selbar,
[data-y~="st-selbar"]{position:absolute;left:0;top:-32px;display:flex;gap:4px;padding:5px 7px;border-radius:10px;background:rgba(30,30,30,.92);border:1px solid rgba(255,255,255,.1)}
.st-selbar u,
[data-y~="st-selbar"] u{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.16);text-decoration:none}
.st-aibtn,
[data-y~="st-aibtn"]{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;background:#1C2921;color:#CCFF3F;font-size:9.5px;font-weight:700;padding:7px 13px;border-radius:999px;box-shadow:0 10px 22px -8px rgba(18,28,22,.6);z-index:3;white-space:nowrap}
.st-zoom,
[data-y~="st-zoom"]{position:absolute;right:12px;bottom:16px;font-family:var(--font-mono);font-size:9px;color:var(--ink-muted);background:rgba(250,249,245,.96);border:1px solid rgba(32,35,31,.11);border-radius:8px;padding:4px 8px}
.st-scene.on .st-selbar,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-selbar"]{animation:popIn .3s var(--ease) .55s both}

/* ===== ITER-7 — story: echte scrollafstand per stap ===== */
@media(min-width:1021px){
  .story-step,
[data-y~="story-step"]{min-height:52vh;display:flex;flex-direction:column;justify-content:center;padding:12px 0 12px 6px}
  .story-step::before,
[data-y~="story-step"]::before{top:50%;margin-top:-7px}
  .story-steps::after,
[data-y~="story-steps"]::after{transition:height .1s linear}
}

/* ===== ITER-8 — echte boardvisuals overal (hero-taal statisch) ===== */
.pv-frame,.st-frame,.sb-f,
[data-y~="pv-frame"],[data-y~="st-frame"],[data-y~="sb-f"]{padding:16px 8px 8px}
.pv-frame .zcard,.pv-frame .znote,.st-frame .zcard,.st-frame .znote,.sb-f .zcard,.sb-f .znote,
[data-y~="pv-frame"] [data-y~="zcard"],[data-y~="pv-frame"] [data-y~="znote"],[data-y~="st-frame"] [data-y~="zcard"],[data-y~="st-frame"] [data-y~="znote"],[data-y~="sb-f"] [data-y~="zcard"],[data-y~="sb-f"] [data-y~="znote"]{opacity:1;transform:none;transition:none}
.pv-frame .ztitle,.st-frame .ztitle,.sb-f .ztitle,
[data-y~="pv-frame"] [data-y~="ztitle"],[data-y~="st-frame"] [data-y~="ztitle"],[data-y~="sb-f"] [data-y~="ztitle"]{font-size:11px}
.pv-frame .zlabel,.st-frame .zlabel,.sb-f .zlabel,
[data-y~="pv-frame"] [data-y~="zlabel"],[data-y~="st-frame"] [data-y~="zlabel"],[data-y~="sb-f"] [data-y~="zlabel"]{font-size:5.5px}
.pv-frame .zflow,
[data-y~="pv-frame"] [data-y~="zflow"]{height:40px}
/* sc2: narration maakt plaats voor het gebouwde resultaat */
@keyframes narrOut{to{opacity:0;transform:translate(-50%,-58%) scale(.97)}}
.st-scene.on .st-narr,
[data-y~="st-scene"][data-y~="on"] [data-y~="st-narr"]{animation:narrOut .5s var(--ease) 2.7s both}
.st-built,
[data-y~="st-built"]{position:absolute;left:6%;right:6%;bottom:18px;display:flex;gap:10px}
.sb-f,
[data-y~="sb-f"]{flex:1;background:#FBFAF5;border:1px solid #E3E0D3;border-radius:8px;position:relative;opacity:0;transform:translateY(8px) scale(.96)}
@keyframes sbIn{to{opacity:1;transform:none}}
.st-scene.on .sb-f:nth-child(1),
[data-y~="st-scene"][data-y~="on"] [data-y~="sb-f"]:nth-child(1){animation:sbIn .45s var(--ease) 3s both}
.st-scene.on .sb-f:nth-child(2),
[data-y~="st-scene"][data-y~="on"] [data-y~="sb-f"]:nth-child(2){animation:sbIn .45s var(--ease) 3.35s both}
.st-scene.on .sb-f:nth-child(3),
[data-y~="st-scene"][data-y~="on"] [data-y~="sb-f"]:nth-child(3){animation:sbIn .45s var(--ease) 3.7s both}
/* sc3: selectie = app-echt (SEL_STROKE 12% zwart, subtiele fill) */
.st-sel,
[data-y~="st-sel"]{border:1.5px dashed hsl(0 0% 12%);background:rgba(0,0,0,.04);border-radius:4px}
.st-frame.e1,
[data-y~="st-frame"][data-y~="e1"]{width:41%;top:30px}
.st-frame.e2,
[data-y~="st-frame"][data-y~="e2"]{width:33%;top:48px}
/* sc5: rijker A4-blad met stapel */
.st-a4,
[data-y~="st-a4"]{width:132px;padding:11px 11px 13px}
.st-a4::before,
[data-y~="st-a4"]::before{content:"";position:absolute;inset:6px -7px -7px 7px;background:#F1EEE6;border-radius:6px;z-index:-1;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.st-a4-ch,
[data-y~="st-a4-ch"]{display:block;font-style:normal;font-family:var(--font-mono);font-size:6px;letter-spacing:.06em;color:#8A8D85;margin:7px 0 4px}
.st-a4-fig,
[data-y~="st-a4-fig"]{display:block;padding:5px;margin:5px 0 2px}
.st-a4-fig .zhead,
[data-y~="st-a4-fig"] [data-y~="zhead"]{display:block;height:4px;width:55%}
.st-a4-fig .zln,
[data-y~="st-a4-fig"] [data-y~="zln"]{display:block;height:3px;margin-top:3px}
.st-a4-pg,
[data-y~="st-a4-pg"]{position:absolute;bottom:4px;right:9px;font-family:var(--font-mono);font-size:5.5px;color:#B3AF9F;text-decoration:none}
/* Welcome-dialog replica */
.cwa-tabs,
[data-y~="cwa-tabs"]{display:flex;gap:5px;background:#E9EDE7;border:1px solid rgba(30,43,34,.08);border-radius:14px;padding:4px;margin-bottom:12px}
.cwa-tabs u,
[data-y~="cwa-tabs"] u{flex:1;text-align:center;font-size:11px;font-weight:600;color:#6B7280;padding:6px 8px;border-radius:999px;text-decoration:none}
.cwa-tabs u.on,
[data-y~="cwa-tabs"] u[data-y~="on"]{background:#1C2921;color:#F8F9F6}
.cwa-sp,
[data-y~="cwa-sp"]{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;color:#9CA3AF;margin-bottom:7px}
.cwa-roles,
[data-y~="cwa-roles"]{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cwa-roles u,
[data-y~="cwa-roles"] u{font-size:10.5px;font-weight:600;color:#141414;background:#fff;border:1px solid rgba(30,43,34,.16);border-radius:999px;padding:5px 11px;text-decoration:none}
.cwa-roles u.on,
[data-y~="cwa-roles"] u[data-y~="on"]{background:#C8F43D;border-color:#A8D94F}
.cwa-ideas,
[data-y~="cwa-ideas"]{display:flex;flex-direction:column;margin-bottom:12px}
.cwa-ideas span,
[data-y~="cwa-ideas"] span{display:flex;align-items:center;gap:8px;font-size:11px;color:#3a3a3a;padding:7px 6px;border-bottom:1px solid #EDEFEA}
.cwa-ideas span.sel,
[data-y~="cwa-ideas"] span[data-y~="sel"]{background:rgba(200,244,61,.25);border-radius:8px;border-bottom-color:transparent}
.cwa-ideas i,
[data-y~="cwa-ideas"] i{font-style:normal;font-family:var(--font-mono);font-size:8.5px;color:#B5B5B5}
.cwa-field.sm,
[data-y~="cwa-field"][data-y~="sm"]{min-height:64px;color:#9CA3AF}