/* =========================================================
   EisenFrame · site styles: monochrome paper (light) / black (dark), ink, no colour accent.
   Type: Sora for headings, hero, wordmark and big statements; Inter for body, UI, buttons, nav and forms.
   ========================================================= */
@font-face{font-family:"Sora";src:url(/fonts/Sora-Latin.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap;size-adjust:86%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";src:url(/fonts/Sora-LatinExt.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap;size-adjust:86%;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(/ef/landing/fonts/Inter-Var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/ef/landing/fonts/GeistMono-Var.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --paper:#F6F6F5;
  --paper-2:#EDEDEC;
  --paper-3:#E2E2E0;
  --card:#FFFFFF;
  --ink:#0F0F0F;
  --ink-2:#333333;
  --muted:#686868;
  --faint:#A0A0A0;
  --line:rgba(15,15,15,.09);
  --line-2:rgba(15,15,15,.15);
  /* the old record-light red is now ink: accents are monochrome. Errors and destructive actions use --danger. */
  --red:#0F0F0F;
  --red-soft:rgba(15,15,15,.07);
  --red-ink:#0F0F0F;
  /* colour lives in the footage and the edit itself: playheads, cuts, live states. The UI chrome stays ink. */
  --acc:#E1432B;
  --acc-soft:rgba(225,67,43,.10);
  --acc-ink:#B8331F;
  --cut:225,67,43;
  --danger:#C8321F;
  --danger-soft:rgba(200,50,31,.09);
  --danger-ink:#A8291A;
  --display:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--display);
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:72px;
  --shadow-win:0 0 0 1px rgba(0,0,0,.07),0 1px 1px rgba(0,0,0,.04),0 12px 24px -8px rgba(0,0,0,.08),0 40px 80px -24px rgba(0,0,0,.14),0 90px 140px -60px rgba(0,0,0,.16);
  --shadow-card:0 0 0 1px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04),0 10px 30px -10px rgba(0,0,0,.12);
  --shadow-prompt:0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04),0 8px 20px -8px rgba(0,0,0,.10),0 24px 48px -24px rgba(0,0,0,.14);
  --ink-3:#4A4A4A;
  --hl:rgba(15,15,15,.075);
  --nav-bg:rgba(246,246,245,.86);
  --ink-hover:#262626;
  --monitor-bg:#F5F5F4;
  --wave:#3E9C7D;
  --wave-k:#1F7A5C;
  --aud:#DCEEE6;
  --vid:#DDE3F0;
  --hatch-veil:rgba(246,246,245,.6);
  --keep-a:#E0E0DE;
  --frame-ring:0 0 0 1px rgba(0,0,0,.12),0 12px 28px -12px rgba(0,0,0,.3);
  color-scheme:light;
}
/* Dark (default): true black, neutral greys. Shadows become depth + a faint light rim. */
[data-theme="dark"]{
  --paper:#0B0B0B;
  --paper-2:#1C1C1C;
  --paper-3:#2A2A2A;
  --card:#141414;
  --ink:#EDEDED;
  --ink-2:#CFCFCF;
  --ink-3:#ADADAD;
  --muted:#A3A3A3;
  --faint:#7A7A7A;
  --line:rgba(237,237,237,.10);
  --line-2:rgba(237,237,237,.17);
  --red:#EDEDED;
  --red-soft:rgba(237,237,237,.12);
  --red-ink:#FFFFFF;
  --acc:#EC5A40;
  --acc-soft:rgba(236,90,64,.15);
  --acc-ink:#FF8E78;
  --cut:236,90,64;
  --danger:#F0654D;
  --danger-soft:rgba(240,101,77,.14);
  --danger-ink:#FF8E78;
  --hl:rgba(237,237,237,.11);
  --nav-bg:rgba(11,11,11,.8);
  --ink-hover:#FFFFFF;
  --monitor-bg:#121212;
  --wave:#3A8F73;
  --wave-k:#5CC9A2;
  --aud:#10221B;
  --vid:#171E2E;
  --hatch-veil:rgba(11,11,11,.58);
  --keep-a:#2A2A2A;
  --frame-ring:0 0 0 1px rgba(255,255,255,.08),0 14px 30px -12px rgba(0,0,0,.7);
  --shadow-win:0 0 0 1px rgba(237,237,237,.085),inset 0 1px 0 rgba(255,255,255,.045),0 18px 40px -16px rgba(0,0,0,.75),0 60px 120px -50px rgba(0,0,0,.8);
  --shadow-card:0 0 0 1px rgba(237,237,237,.08),inset 0 1px 0 rgba(255,255,255,.035),0 12px 30px -14px rgba(0,0,0,.7);
  --shadow-prompt:0 0 0 1px rgba(237,237,237,.10),inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -14px rgba(0,0,0,.75);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
.ef-landing{-webkit-text-size-adjust:100%;overflow-x:clip}
.ef-landing.lenis,.ef-landing.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.ef-landing{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
em{font-style:italic}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- shared ---------- */
.tally{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--red);vertical-align:.12em;margin-left:.06em}
.eyebrow{font-size:14px;color:var(--muted);letter-spacing:-.005em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:500;letter-spacing:-.01em;text-decoration:none;color:inherit;transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-ink{background:var(--ink);color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(22,21,19,.2)}
.btn-ink:hover{background:var(--ink-hover)}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.caret{display:inline-block;width:2px;height:1.15em;background:var(--acc);vertical-align:-.2em;margin-left:1px;border-radius:1px;animation:blink 1.05s steps(1) infinite}
.caret.sm{height:14px;vertical-align:-2px}
@keyframes blink{50%{opacity:0}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(24px,3.4vw);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.nav.scrolled{background:var(--nav-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{font-family:var(--serif);font-size:32px;line-height:1;letter-spacing:-.02em;justify-self:start}
.brand.sm{font-size:24px}
.nav-links{display:flex;gap:34px;font-size:14px;color:var(--muted)}
.nav-links a{color:var(--muted);transition:color .25s var(--ease);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:22px}
.link-quiet{font-size:14px;color:var(--muted)}
.link-quiet:hover{color:var(--ink)}
.nav-links a,.nav-cta>.link-quiet,.nav-cta>.btn,.na-btn{white-space:nowrap}
/* tablet / small laptop: six top-nav links + CTAs must stay on one line. Links sit in a flexible middle
   column (centred) instead of the symmetric 1fr|auto|1fr grid, and spacing/type tighten a little. */
@media (min-width:768px) and (max-width:1179px){
  .nav:not(.app-nav){grid-template-columns:auto 1fr auto;column-gap:clamp(16px,2.4vw,32px);padding:0 clamp(20px,2.6vw,32px)}
  .nav-links{justify-self:center;gap:clamp(14px,2.3vw,30px)}
  .nav:not(.app-nav) .nav-cta{gap:clamp(12px,1.6vw,22px)}
}
@media (min-width:768px) and (max-width:959px){
  .nav:not(.app-nav){column-gap:14px}
  .nav-links{font-size:13px;gap:14px}
  .nav:not(.app-nav) .nav-cta>.link-quiet{font-size:13px}
  .nav:not(.app-nav) .nav-cta>.btn-sm{padding:0 13px;font-size:13px}
}

/* ---------- hero ---------- */
.hero{position:relative}
.hero-stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.hero-copy{position:absolute;left:0;right:0;top:calc(var(--nav-h) + var(--copy-top,max(24px,9vh - 22px)));display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;z-index:5;pointer-events:none}
.headline{font-family:var(--serif);font-weight:400;font-size:var(--h1,min(8.4vw,13.2vh,132px));line-height:.94;letter-spacing:-.028em;margin-top:22px;color:var(--ink)}
.headline .line{display:block;overflow:hidden;padding:0 .06em .06em}
.headline .line>span{display:inline-block}
.headline em{letter-spacing:-.02em}
.sub{margin-top:26px;max-width:520px;font-size:18px;line-height:1.55;color:var(--muted);letter-spacing:-.008em;text-wrap:balance}

.hero-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px;pointer-events:auto}
.hero-cta a,.hero-cta button{pointer-events:auto}
.hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.hero-cta-row .btn{min-width:148px}
.hero-note{margin:0;font-size:13px;line-height:1.4;color:var(--muted);letter-spacing:-.005em;text-wrap:balance}

/* Offscreen typing target — drives syncHero / send pulse; not a visible CTA */
.prompt-anim{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;pointer-events:none!important;opacity:0!important}
.prompt{position:relative;margin-top:36px;width:min(680px,100%);min-height:64px;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--card);border-radius:20px;box-shadow:var(--shadow-prompt);text-align:left}
.prompt-add{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--muted);background:var(--paper)}
.prompt-field{position:relative;flex:1;min-width:0;font-size:16px;line-height:1.45;letter-spacing:-.01em}
.prompt-sizer{visibility:hidden;display:block}
.prompt-live{position:absolute;inset:0}
.prompt-ph{position:absolute;left:3px;top:0;color:var(--faint);white-space:nowrap}
.prompt-text{color:var(--ink)}
.prompt-send{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper-3);color:var(--faint);transition:none}
.prompt-send.ready{background:var(--ink);color:var(--paper)}
.prompt-send.sent{background:var(--red);color:#fff}

/* Upload modal: live footage panel (landing tokens) */
.up-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.up-modal[hidden]{display:none!important}
.up-backdrop{position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;background:rgba(17,17,16,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
[data-theme="dark"] .up-backdrop{background:rgba(0,0,0,.58)}
.up-panel{position:relative;z-index:1;width:min(720px,100%);background:var(--card);color:var(--ink);border-radius:20px;box-shadow:var(--shadow-win);outline:none;display:flex;flex-direction:column;max-height:min(780px,calc(100vh - 48px));overflow:hidden}
.up-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 14px;flex:none}
.up-h-main{display:flex;align-items:flex-start;gap:12px;min-width:0}
.up-badge{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.up-h-copy{min-width:0;text-align:left}
.up-h-copy h2{margin:0;font-size:17px;font-weight:560;letter-spacing:-.02em;line-height:1.25}
.up-sub{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted);letter-spacing:-.005em}
.up-x{flex:none;width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--muted);transition:background-color .25s var(--ease),color .25s var(--ease)}
.up-x:hover{background:var(--paper-2);color:var(--ink)}
.up-drop{margin:0 18px;flex:1 1 auto;min-height:clamp(220px,36vh,300px);border-radius:12px;border:2px dashed var(--line-2);background:var(--paper);display:flex;align-items:stretch;justify-content:center;padding:0;outline:none;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.up-drop.is-drag{border-color:var(--ink);background:var(--paper-2)}
.up-drop.has-files{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:12px;border-style:solid}
.up-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:200px;padding:32px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:center;cursor:pointer;transition:background-color .25s var(--ease)}
.up-empty:hover{background:var(--paper-2)}
.up-empty:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.up-drop:hover{border-color:var(--faint)}
.up-empty-ico{width:64px;height:64px;margin-bottom:6px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.up-empty:hover .up-empty-ico{color:var(--ink)}
.up-empty b{font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.up-empty>span:not(.up-empty-ico){font-size:14px;line-height:1.45;color:var(--muted);letter-spacing:-.005em}
.up-preview{display:flex;flex-direction:column;gap:10px;width:100%;min-height:0;flex:1}
.up-preview[hidden],.up-empty[hidden],.up-chips[hidden]{display:none!important}
.up-vid{position:relative;flex:1 1 auto;min-height:260px;border-radius:14px;overflow:hidden;background:#0B0B0B}
.up-drop.has-files .up-preview{min-height:100%}
.up-vid video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.up-vid-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:28px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:#f5f4f0;pointer-events:none}
.up-vid-meta b{min-width:0;flex:1;font-size:13.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.up-vid-meta small{flex:none;font-size:11.5px;opacity:.85}
.up-vid-rm{pointer-events:auto;flex:none;border:0;border-radius:999px;padding:5px 10px;font:inherit;font-size:12px;font-weight:500;cursor:pointer;background:rgba(255,255,255,.14);color:#f5f4f0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.up-vid-rm:hover{background:rgba(255,255,255,.24)}
.up-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-height:88px;overflow:auto}
.up-chips li{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:7px 10px 7px 8px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.up-chips .uf-ico{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--muted)}
.up-chips .uf-meta{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.up-chips .uf-meta b{font-size:12.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.up-chips .uf-meta small{font-size:10.5px;color:var(--muted)}
.up-chips .uf-rm{flex:none;border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:12px;padding:2px 4px;border-radius:6px;line-height:1}
.up-chips .uf-rm:hover{color:var(--ink);background:var(--paper-2)}
.up-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 18px;flex:none;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:14px}
.up-pick{gap:8px}
.up-f-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.up-cancel{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;padding:8px 10px;border-radius:999px}
.up-cancel:hover{color:var(--ink);background:var(--paper-2)}
#upStart:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.ef-landing.up-open{overflow:hidden}

.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px;pointer-events:none}
.scroll-cue span{padding:7px 14px;border-radius:999px;background:var(--nav-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line)}

/* ---------- editor ---------- */
.ed-pos{position:absolute;left:50%;top:0;width:var(--ew,1160px);height:var(--eh,672px);margin-left:calc(var(--ew,1160px) / -2);transform-origin:50% 0;z-index:3;will-change:transform;pointer-events:none}
.editor{position:relative;width:100%;height:100%;background:var(--paper);border-radius:16px;box-shadow:var(--shadow-win);overflow:hidden;display:grid;grid-template-rows:48px minmax(0,1fr);font-size:13px;color:var(--ink)}
.ed-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 12px 0 10px}
.ed-l{display:flex;align-items:center;gap:9px;min-width:0}
.ed-back{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--faint)}
.ed-brand{font-family:var(--serif);font-size:23px;line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.ed-brand .tally{width:5px;height:5px;margin-left:2px;vertical-align:3px}
.ed-brand.sm{font-size:19px}
.ed-brand.sm .tally{width:4.5px;height:4.5px;vertical-align:2px}
.ed-beta{font-size:10.5px;color:var(--muted);padding:2px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ed-sep{width:1px;height:16px;background:var(--line-2);margin:0 3px}
.ed-file{font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-file span{color:var(--faint);font-weight:400}
.ed-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.ed-seg span{height:26px;padding:0 14px;border-radius:999px;display:grid;place-items:center;font-weight:500;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ed-seg span.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.08),0 4px 10px -4px rgba(0,0,0,.12)}
.ed-status{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);white-space:nowrap;min-width:0}
.ed-status span{overflow:hidden;text-overflow:ellipsis}
.ed-status i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.ed-status.work i{background:var(--acc);animation:pulse 1.4s var(--ease) infinite}
.ed-status.ready i{background:var(--acc)}
.ed-status.done i{background:var(--ink)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--cut),.35)}100%{box-shadow:0 0 0 7px rgba(var(--cut),0)}}
.ed-right{justify-self:end;display:flex;align-items:center;gap:8px}
.tc{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.tc b{font-weight:500;color:var(--ink)}
.ebtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap}
.ebtn.ghost{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);background:var(--card)}
.ebtn.commit{background:var(--paper-2);color:var(--faint)}
.ebtn.commit.on{background:var(--ink);color:var(--paper)}

.ed-body{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:6px;padding:0 6px 6px;min-height:0}
.ed-main{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:6px;min-width:0;min-height:0}
.ed-monitor,.ed-tl,.ed-agent{background:var(--card);border-radius:12px;box-shadow:0 0 0 1px var(--line);min-width:0;min-height:0;overflow:hidden}
.ed-monitor{display:flex;flex-direction:column}
.ed-mh{flex:none;display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-bottom:1px solid var(--line)}
.ed-mh b{font-weight:600;font-size:12.5px;letter-spacing:-.005em}
.ed-rev{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.ed-pv{font-size:11px;font-weight:500;color:var(--acc-ink);background:var(--acc-soft);padding:2px 8px;border-radius:999px;opacity:0;white-space:nowrap}
.ed-ar{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.ed-mon{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--monitor-bg)}
.frame{position:relative;width:576px;height:324px;border-radius:10px;overflow:hidden;background:#0f0d0b;box-shadow:var(--frame-ring)}
.shot{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.shot.on{opacity:1}
.ftag{z-index:2;position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.78);padding:4px 7px;border-radius:5px;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fcap{z-index:2;position:absolute;left:0;right:0;bottom:24px;display:grid;justify-items:center}
.fcap span{grid-area:1/1;max-width:78%;text-align:center;font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.015em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4),0 2px 18px rgba(0,0,0,.45);opacity:0}

/* chat (same design as the editor: quiet header, pill user bubbles, step-by-step run, one bordered preview) */
.ed-agent{position:relative;display:flex;flex-direction:column}
.ag-h{flex:none;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 16px}
.ag-hist{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.ag-log{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:8px 16px 12px;overflow:hidden}
.ag-empty{position:absolute;left:16px;right:16px;top:14px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--paper-2);color:var(--muted);font-size:12.5px;line-height:1.5}
.ag-empty b{font-weight:500;color:var(--ink);font-size:13px}
.ed-agent .bubble{align-self:flex-end;max-width:290px;background:var(--paper-2);border-radius:14px;padding:8px 12px;font-size:13px;line-height:1.5;letter-spacing:-.005em;color:var(--ink)}
.ag-reply{display:flex;flex-direction:column;gap:8px}
.ag-p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);letter-spacing:-.005em}
.lrun-h{display:flex;align-items:center;gap:10px;height:28px}
.lrun-h b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrun-m{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lrun-chev{flex:none;color:var(--faint);transform:rotate(90deg)}
.steps,.plan{display:flex;flex-direction:column;padding:2px 0 0}
.steps li,.plan li{display:grid;grid-template-columns:14px auto minmax(0,1fr) auto;align-items:center;column-gap:10px;height:28px;font-size:13px;color:var(--faint);letter-spacing:-.005em}
.steps li span,.plan li span{white-space:nowrap}
.steps li em,.plan li em{min-width:0;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:-2px}
.steps li b,.plan li b{font-weight:400;font-family:var(--mono);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.steps li:not(.done) em,.steps li:not(.done) b,.plan li:not(.done) em,.plan li:not(.done) b{visibility:hidden}
.steps li.run,.steps li.done,.plan li.run,.plan li.done{color:var(--ink)}
.steps li.run span,.plan li.run span{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 38%,var(--faint) 50%,var(--ink) 62%,var(--ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.8s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.st{position:relative;display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--line-2)}
.run>.st::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.4px solid transparent;border-top-color:var(--ink);border-right-color:var(--ink);animation:spin .9s linear infinite}
.done>.st{background:var(--ink);box-shadow:none}
.done>.st::after{content:"";position:absolute;left:4.7px;top:2.5px;width:3.4px;height:6.6px;border:solid var(--paper);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.acard{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--card)}
.ac-h{display:flex;align-items:center;gap:8px;padding:10px 12px 4px}
.ac-h b{font-weight:600;font-size:12.5px}
.ac-h em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pv-pill{font-size:10.5px;font-weight:500;color:var(--acc-ink);background:var(--acc-soft);padding:2px 7px;border-radius:6px}
.tx{padding:2px 0 6px}
.tx li{position:relative;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;height:26px;padding:0 12px 0 14px;font-size:12.5px;letter-spacing:-.01em;color:var(--ink-2)}
.tx time{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.tx span{position:relative;justify-self:start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx b{font-weight:500;font-size:10.5px;color:var(--acc);opacity:0}
.tx li::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--ink);transform:scaleY(0)}
.tx li .strike{position:absolute;left:64px;top:50%;height:1.3px;background:var(--acc);width:0}
.ag-comp{flex:none;margin:0 10px 10px;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint);font-size:13px}
.ag-send{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--faint)}

/* timeline card */
.ed-tl{display:flex;flex-direction:column}
.tl-bar{flex:none;display:flex;align-items:center;gap:12px;height:38px;padding:0 12px 0 10px;border-bottom:1px solid var(--line);color:var(--muted)}
.tl-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-2)}
.tl-div{width:1px;height:16px;background:var(--line-2)}
.tl-mode{display:inline-flex;padding:2px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.tl-mode span{height:22px;padding:0 10px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:500;color:var(--muted)}
.tl-mode span.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.06)}
.tl-zoom{position:relative;margin-left:auto;width:84px;height:3px;border-radius:2px;background:var(--line-2)}
.tl-zoom i{position:absolute;left:0;top:0;bottom:0;width:46%;border-radius:2px;background:var(--ink-3)}
.tl-zoom b{position:absolute;left:46%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 1px 3px rgba(0,0,0,.15)}
.tl-grid{display:grid;grid-template-columns:112px minmax(0,1fr)}
.tl-gutter{display:flex;flex-direction:column;padding-top:6px;border-right:1px solid var(--line);color:var(--muted)}
.tl-gutter span{display:flex;align-items:center;gap:7px;padding-left:14px}
.tl-gutter b{font-weight:500;font-size:12px;color:var(--ink-2);white-space:nowrap}
.g-h{height:32px;font-size:11px;color:var(--faint)}
.g-v{height:52px;margin-bottom:6px}.g-a{height:34px;margin-bottom:6px}.g-c{height:24px;margin-bottom:12px}
.tl-main{position:relative;margin:6px 16px 12px 12px}
.ruler{position:relative;height:24px;margin-bottom:8px}
.ticks{position:absolute;left:0;right:0;bottom:0;height:6px;background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 100%);background-size:calc(100% / 40) 100%;opacity:.8}
.rl{position:absolute;inset:0 0 auto 0;height:14px}
.rl span{position:absolute;top:0;font-family:var(--mono);font-size:10.5px;color:var(--faint);transform:translateX(-50%)}
.rl span:first-child{transform:none}
.rl span:last-child{transform:translateX(-100%)}
#rlCut{opacity:0}
.lane{position:relative}
.lane-v{height:52px;margin-bottom:6px}
.lane-a{height:34px;margin-bottom:6px}
.lane-c{height:24px}
.clip,.aclip,.keep-v,.keep-a{position:absolute;top:0;bottom:0;border-radius:7px;overflow:hidden}
.raw{left:0;right:0}
.strip,.kstrip{position:absolute;top:0;bottom:0;left:0;display:flex}
.strip svg,.kstrip svg{flex:none;height:100%;width:auto;aspect-ratio:16/9;display:block}
.clip::after,.keep-v::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none}
.clabel{position:absolute;left:8px;top:6px;font-size:11px;font-weight:500;color:rgba(255,255,255,.88);letter-spacing:-.005em;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.aclip{background:var(--paper-2)}
.wave{position:absolute;inset:0;width:100%;height:100%}
.wave path{fill:var(--wave)}
.hatch{position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(-45deg,rgba(var(--cut),.0) 0 5px,rgba(var(--cut),.22) 5px 6px),var(--hatch-veil)}
.aclip .hatch{background:repeating-linear-gradient(-45deg,rgba(var(--cut),.0) 0 5px,rgba(var(--cut),.22) 5px 6px),var(--hatch-veil)}
.keep-v,.keep-a{z-index:2}
.keep-a{background:var(--aud)}
.keep-a .wave path{fill:var(--wave-k)}
.keep-a svg.wave{width:auto;right:auto}
.kring{position:absolute;inset:0;border-radius:7px;box-shadow:inset 0 0 0 2px var(--acc);opacity:0;z-index:3;pointer-events:none}
.ccap{position:absolute;top:0;height:24px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:11px;line-height:24px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em;opacity:0}
.playhead{position:absolute;top:0;bottom:-4px;left:0;width:0;z-index:6;pointer-events:none}
.playhead::before{content:"";position:absolute;top:10px;bottom:0;left:-.75px;width:1.5px;background:var(--acc)}
.playhead i{position:absolute;top:0;left:-5px;width:10px;height:12px;background:var(--acc);border-radius:2px 2px 5px 5px}

/* ---------- loop ---------- */
.loop{position:relative;background:var(--paper)}
.loop-pin{height:100vh;height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 8px) max(24px,4.4vw) 32px}
.loop-grid{width:100%;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(330px,420px) 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.loop-title{font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.2vw,60px);line-height:.98;letter-spacing:-.025em;margin-top:16px;text-wrap:balance}
.chapters{margin-top:36px;display:flex;flex-direction:column;gap:20px}
.chapters li{position:relative;display:grid;grid-template-columns:2px 1fr;gap:22px;opacity:.34}
.chapters .bar{position:relative;display:block;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.chapters .bar b{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(0)}
.chapters .n{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em}
.chapters h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.015em;margin-top:2px}
.chapters p{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:340px;letter-spacing:-.006em}

.loop-right{display:flex;justify-content:center}
.stage-fit{position:relative;width:var(--sw,680px);height:var(--sh,470px)}
.stage{position:absolute;left:0;top:0;width:680px;height:470px;transform-origin:0 0;background:var(--card);border-radius:22px;box-shadow:var(--shadow-win);overflow:hidden}
.mock{position:absolute;inset:0;padding:30px 34px;opacity:0;font-size:13.5px}
.mock[data-i="0"]{opacity:1}
.m-h{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.m-h b{font-weight:500;font-size:15px;letter-spacing:-.01em;margin-right:auto}
.m-h span{font-size:12.5px;color:var(--faint)}
.th{width:64px;height:36px;border-radius:5px;flex:none;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.1)}

/* drop */
.dz{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;border:1.5px dashed var(--line-2);background:var(--paper)}
.dz-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--card);box-shadow:var(--shadow-card);color:var(--ink)}
.dz b{display:block;font-weight:500;letter-spacing:-.01em}
.dz small{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.files{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:14px;padding:9px 14px 9px 9px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.fm{flex:1;min-width:0}
.fm b{display:block;font-weight:500;font-size:13px;letter-spacing:-.01em}
.fm small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
.pbar{display:block;height:2px;border-radius:2px;background:var(--paper-2);margin-top:6px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.fs{position:relative;width:96px;height:18px;text-align:right;font-size:12px}
.fs em{position:absolute;right:0;top:0;font-style:normal;color:var(--muted);opacity:0;white-space:nowrap}
.fs .s3{color:var(--ink);font-weight:500}
.fs .s3::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:1px}
.search{margin-top:18px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--card);overflow:hidden}
.sfield{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;color:var(--faint);font-size:13.5px}
.sfield span{color:var(--ink)}
.sres{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-top:1px solid var(--line);opacity:0}
.sres b{display:block;font-weight:500;font-size:13px;letter-spacing:-.01em}
.sres mark{background:var(--acc-soft);color:var(--ink);border-radius:3px;padding:0 2px;box-shadow:inset 0 -1.5px 0 var(--acc)}
.sres small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:2px}

/* describe */
.bubble{align-self:flex-end;max-width:360px;background:var(--paper-2);border-radius:14px;padding:8px 13px;font-size:13.5px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.cx-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12.5px!important;color:var(--muted)!important}
.cx-st i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.cx-st.is-idle i{background:var(--faint)}
.cx-r{margin-left:auto}
.m-h .ed-brand,.pm-h .ed-brand{margin-right:2px}
.chat{display:flex;flex-direction:column;gap:14px}
.chat .bubble{max-width:430px;font-size:14px}
.ag-who{margin:0;font-size:14px;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.m-desc .lrun-h b{font-size:13.5px}
.m-desc .plan li{height:32px;font-size:14px}
.m-desc .plan li em{font-size:11.5px}
.acard em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
.acard>b{font-weight:600;font-size:13px}
.plan-ready{display:flex;align-items:center;gap:9px;padding:11px 12px 11px 12px;opacity:0}
.pr-go{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--ink)}
.pr-go span{color:var(--acc)}

/* preview */
.pill{font-family:var(--mono);font-size:11px!important;padding:4px 8px;border-radius:6px;background:var(--paper-2);color:var(--ink-2)!important}
.pill.red{background:var(--acc-soft);color:var(--acc-ink)!important}
.diff{border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);padding:4px 0}
.wrow{position:relative;padding:16px 20px}
.wrow+.wrow{border-top:1px solid var(--line)}
.wl{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-bottom:10px}
.segs{position:relative;display:flex;gap:3px;height:40px}
.segs i{display:block;border-radius:5px;min-width:6px}
.segs .k{background:var(--ink-2)}
.segs .c{background:repeating-linear-gradient(-45deg,rgba(var(--cut),.10) 0 5px,rgba(var(--cut),.30) 5px 6px);box-shadow:inset 0 0 0 1px rgba(var(--cut),.22)}
.segs.pack .k{position:absolute;top:0;bottom:0}
.segs.pack .k:nth-child(even){background:var(--ink-3)}
.caps{display:flex;gap:3px;margin-top:8px}
.caps i{display:block;font-style:normal;font-size:10.5px;height:22px;line-height:22px;padding:0 7px;border-radius:5px;background:var(--ink);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend{display:flex;gap:22px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.lk{background:var(--ink-2)}
.lc{background:repeating-linear-gradient(-45deg,rgba(var(--cut),.15) 0 3px,rgba(var(--cut),.45) 3px 4px);box-shadow:inset 0 0 0 1px rgba(var(--cut),.3)}
.confirm{display:flex;align-items:center;gap:8px;margin-top:22px;padding:12px 12px 12px 16px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);opacity:0}
.cq{margin-right:auto;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.cq b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--red);color:#fff}

/* ship */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;gap:12px;padding:16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2)}
.opt.on{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--paper)}
.opt i{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);margin-top:1px}
.opt.on i{box-shadow:inset 0 0 0 5px var(--ink)}
.opt b{display:block;font-weight:500;font-size:14px}
.opt small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.xp{margin-top:26px}
.xp-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.xp-row b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.xp-bar{height:4px;border-radius:4px;background:var(--paper-2);margin-top:10px;overflow:hidden}
.xp-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);border-radius:4px}
.xp-done{display:flex;align-items:center;gap:14px;margin-top:26px;padding:12px;border-radius:14px;box-shadow:var(--shadow-card);background:var(--card);opacity:0}
.xp-done .th{width:88px;height:50px}
.xp-done.alt{margin-top:10px;box-shadow:inset 0 0 0 1px var(--line);background:transparent}
.xml-ico{width:88px;height:50px;border-radius:5px;display:grid;place-items:center;background:var(--paper-2);font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.xp-done div{flex:1}
.xp-done b{display:block;font-weight:500;font-size:14px}
.xp-done small{display:block;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px}

/* ---------- outro ---------- */
.outro{position:relative;padding:min(20vh,200px) 24px 0;text-align:center}
.outro-title{font-family:var(--serif);font-weight:400;font-size:clamp(56px,9vw,148px);line-height:.92;letter-spacing:-.03em}
.outro-title .line{display:block;overflow:hidden;padding:0 .06em .06em}
.outro-title .line>span{display:inline-block}
.outro-sub{margin-top:30px;font-size:18px;color:var(--muted)}
.outro-cta{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.outro-note{font-size:13px;color:var(--faint)}

/* =========================================================
   Compact editor (phones). Same DOM, different design size.
   ========================================================= */
.editor.compact{display:flex;flex-direction:column;border-radius:14px}
.editor.compact .ed-bar{flex:none;height:44px;grid-template-columns:1fr auto;padding:0 8px 0 12px;gap:8px}
.editor.compact .ed-back,.editor.compact .ed-beta,.editor.compact .ed-sep,.editor.compact .ed-seg,.editor.compact #btnUndo{display:none}
.editor.compact .ed-brand{font-size:21px}
.editor.compact .ed-file{font-size:12.5px}
.editor.compact .ebtn{height:28px;padding:0 12px;font-size:12px}
.editor.compact .ed-body{display:flex;flex-direction:column;gap:6px}
.editor.compact .ed-main{display:contents}
.editor.compact .ed-monitor{order:1}
.editor.compact .ed-agent{order:2}
.editor.compact .ed-tl{order:3}
.editor.compact .ed-mh{height:32px;padding:0 10px}
.editor.compact .ed-rev,.editor.compact .ed-ar{display:none}
.editor.compact .ed-pv{margin-left:auto;font-size:10.5px}
.editor.compact .ed-mon{padding:8px}
.editor.compact .frame{width:352px;height:198px;border-radius:8px}
.editor.compact .fcap{bottom:14px}
.editor.compact .fcap span{font-size:14px}
.editor.compact .ftag{top:8px;left:8px;font-size:9.5px}
.editor.compact .ag-h{height:36px;padding:0 12px}
.editor.compact .ag-hist,.editor.compact .ag-empty,.editor.compact .bubble,.editor.compact .ag-p,.editor.compact .tx-card,.editor.compact .ag-comp{display:none}
.editor.compact .ag-log{padding:0 12px 8px;gap:0}
.editor.compact .steps li{height:25px;font-size:12.5px}
.editor.compact .tl-bar{height:32px;gap:8px;padding:0 8px}
.editor.compact .tl-mode,.editor.compact .tl-zoom,.editor.compact .tl-div,.editor.compact .tl-bar .tl-ic:nth-of-type(2){display:none}
.editor.compact .tl-grid{grid-template-columns:34px minmax(0,1fr)}
.editor.compact .tl-gutter span{padding-left:10px}
.editor.compact .tl-gutter b,.editor.compact .g-h{font-size:0}
.editor.compact .tl-main{margin:6px 10px 12px 8px}

/* =========================================================
   In-flow modes. hero-inflow: reduced motion (no pin).
   loop-stack: phones + reduced motion (cards stack, no pin).
   ========================================================= */
.hero-inflow .hero-stage{height:auto;min-height:0;overflow:visible;padding-bottom:40px}
.hero-inflow .hero-copy{position:relative;top:auto;padding-top:calc(var(--nav-h) + 9vh)}
.hero-inflow .ed-pos{position:relative;left:auto;top:auto;margin:64px auto 0}
.hero-inflow .scroll-cue{display:none}
.loop-stack .loop-pin{height:auto;display:block;padding:120px max(20px,4.4vw) 40px}
.loop-stack .loop-grid{display:block;max-width:760px}
.loop-stack .chapters,.loop-stack .stage-fit{display:none}
.loop-stack .loop-right{display:block}
.stack{display:none}
.loop-stack .stack{display:flex;flex-direction:column;gap:64px;margin-top:48px}
.stack .n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.stack h3{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05;letter-spacing:-.015em;margin-top:4px}
.stack article>p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--muted);max-width:520px}
.stack .stage{position:relative;width:100%;height:auto;margin-top:22px;border-radius:20px}
.stack .mock{position:relative;inset:auto;opacity:1}
@media (max-width:767px){
  :root{--nav-h:60px}
  .nav{grid-template-columns:1fr auto;padding:0 18px}
  .nav-links,.link-quiet{display:none}
  .brand{font-size:28px}
  .btn-sm{height:34px;padding:0 14px;font-size:13.5px}
  .headline{font-size:var(--h1,min(16.5vw,92px));line-height:.95}
  .sub{font-size:16px;margin-top:18px;max-width:340px}
  .eyebrow{font-size:13px}
  .hero-cta{margin-top:26px;gap:12px}
  .hero-cta-row{gap:10px}
  .hero-cta-row .btn{min-width:132px;height:48px;padding:0 20px;font-size:15px}
  .hero-note{font-size:12.5px;padding:0 8px}
  .prompt{margin-top:26px;padding:10px 10px 10px 12px;border-radius:18px}
  .prompt-field{font-size:15px}
  .prompt-add{width:28px;height:28px}
  .up-panel{border-radius:18px;width:100%;max-height:min(780px,calc(100vh - 32px))}
  .up-modal{padding:16px}
  .up-drop{min-height:220px;margin:0 12px}
  .up-empty{padding:28px 16px}
  .up-vid{min-height:200px}
  .up-h{padding:16px 14px 12px}
  .up-f{padding:12px 12px 14px;margin-top:12px}
  .scroll-cue{bottom:16px}
  .loop-title{font-size:44px}
  .outro{padding-top:120px}
  .stack .mock{padding:22px 18px}
  .stack .opts{grid-template-columns:1fr}
  .stack .fs{width:96px;font-size:11.5px}
  .stack .fm b{font-size:12px}
  .stack .file{gap:10px}
  .stack .th{width:52px;height:29px}
  .stack .confirm{flex-wrap:wrap}
  .stack .cq{flex-basis:100%;margin-bottom:6px}
  .stack .wrow{padding:14px 14px}
  .stack .plan li{grid-template-columns:18px 1fr;height:auto;padding:8px 0}
  .stack .plan li em{grid-column:2;margin-top:-2px}
  .outro-sub{font-size:16px}
}
@media (min-width:768px) and (max-height:820px){
  .chapters{margin-top:30px;gap:18px}
  .chapters h3{font-size:27px}
  .chapters p{font-size:14px}
  .loop-title{font-size:clamp(40px,4vw,56px)}
}
@media (prefers-reduced-motion:reduce){
  .caret,.run>.st::after,.ed-status.work i,.steps li.run span,.plan li.run span{animation:none}
  .steps li.run span,.plan li.run span{background:none;color:var(--ink)}
}

/* =========================================================
   v3 additions
   ========================================================= */
/* ---------- theme toggle + transition ---------- */
.theme-toggle{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2);transition:color .25s var(--ease),background-color .25s var(--ease)}
.theme-toggle:hover{color:var(--ink);background:var(--paper-2)}
.theme-toggle svg{grid-area:1/1;transition:transform .7s var(--ease),opacity .45s var(--ease)}
.theme-toggle .i-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
[data-theme="dark"] .theme-toggle .i-sun{opacity:1;transform:none}
[data-theme="dark"] .theme-toggle .i-moon{opacity:0;transform:rotate(90deg) scale(.5)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.theme-toggle:focus-visible{border-radius:50%}
.ef-landing.theme-anim, .ef-landing.theme-anim *, .ef-landing.theme-anim *::before, .ef-landing.theme-anim *::after{transition:background-color .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),fill .55s var(--ease),stroke .55s var(--ease)!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{background:var(--paper-2)}

/* ---------- shared section scaffolding ---------- */
.sec{position:relative;padding:clamp(110px,16vh,170px) max(24px,4.4vw) 0}
.wrap{max-width:1240px;margin:0 auto}
.sec-head{max-width:760px;margin:0 auto;text-align:center}
.sec-head.left{text-align:left;margin:0}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,4.4vw,62px);line-height:1;letter-spacing:-.025em;margin-top:14px;text-wrap:balance}
.h2 em{letter-spacing:-.018em}
.lede{margin-top:18px;font-size:17px;line-height:1.55;color:var(--muted);letter-spacing:-.008em;text-wrap:pretty}
.sec-head .lede{max-width:580px;margin-left:auto;margin-right:auto}
.sec-head.left .lede{margin-left:0}
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow-win)}
.fit{position:relative;width:var(--fw,auto);height:var(--fh,auto)}
.fit>*{position:absolute;left:0;top:0;transform-origin:0 0}
.pin-wrap{height:100vh;height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 8px) max(24px,4.4vw) 32px}
.spk{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:center;border-radius:4px;background:var(--paper-2);height:18px;line-height:18px}
.spk.s2{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.ok{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:1px}
.brand.xs{font-size:22px}

/* ---------- search your footage ---------- */
.split{width:100%;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(330px,440px) 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.split-stage{display:flex;justify-content:center}
.feats{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.feats li{padding-top:14px;border-top:1px solid var(--line)}
.feats b{display:block;font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.feats span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.sr-card{width:640px;height:560px;padding:28px 30px 26px;display:flex;flex-direction:column;font-size:13.5px}
.sr-card .m-h{margin-bottom:16px}
.sr-q{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint);font-size:14px;flex:none}
.sr-qt{position:relative;flex:1;min-width:0;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.sr-ph{position:absolute;left:0;top:0;color:var(--faint)}
.sr-tx{position:relative;flex:none;margin-top:14px;height:238px;overflow:hidden;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.sr-tx::before,.sr-tx::after{content:"";position:absolute;left:1px;right:1px;height:34px;z-index:2;pointer-events:none}
.sr-tx::before{top:1px;border-radius:12px 12px 0 0;background:linear-gradient(var(--paper),transparent)}
.sr-tx::after{bottom:1px;border-radius:0 0 12px 12px;background:linear-gradient(transparent,var(--paper))}
.sr-scroll{padding:14px 0;will-change:transform}
.sr-scroll li{position:relative;display:grid;grid-template-columns:42px 24px 1fr auto;align-items:center;gap:12px;height:34px;padding:0 14px 0 16px;font-size:13px;color:var(--ink-2);letter-spacing:-.01em}
.sr-scroll li::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--ink);transform:scaleY(var(--on,0));transition:none}
.sr-scroll time{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.sr-scroll span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-scroll .scene span{color:var(--muted)}
.sr-scroll mark{color:inherit;border-radius:3px;padding:1px 2px;margin:0 -2px;background:linear-gradient(var(--hl),var(--hl)) no-repeat;background-size:calc(var(--on,0) * 100%) 100%;box-shadow:inset 0 calc(var(--on,0) * -1.5px) 0 var(--ink)}
.sr-scroll li.hit span{color:var(--ink)}
.sr-scroll em{font-style:normal;font-size:11px;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);opacity:var(--on,0)}
.sr-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex:none}
.sr-count{font-size:13px;color:var(--muted)}
.sr-count b{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sr-tot{opacity:0}
.sr-tl{margin-top:auto;display:grid;grid-template-columns:30px 1fr;align-items:center;flex:none}
.sr-gut{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.sr-lane{position:relative;display:flex;gap:3px;height:62px;padding:5px;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.sr-clip{position:relative;height:100%;border-radius:6px;overflow:hidden;opacity:0;background:#0f0d0b}
.sr-clip svg{position:absolute;inset:0;width:100%;height:100%}
.sr-clip::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)}
.sr-clip span{position:absolute;left:8px;top:6px;font-size:11px;font-weight:500;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.5);z-index:1}
.sr-ins{position:absolute;top:-4px;bottom:-4px;left:5px;width:0;z-index:3;opacity:0}
.sr-ins::before{content:"";position:absolute;top:0;bottom:0;left:-.75px;width:1.5px;background:var(--acc)}
.sr-ins::after{content:"";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%;background:var(--acc)}

/* ---------- five pillars ---------- */
.pl-sec{position:relative}
.pl-sec .pin-wrap{justify-content:center}
.pl-inner{width:1240px;height:704px;display:flex;flex-direction:column}
.pl-head{display:grid;grid-template-columns:1fr 430px;gap:60px;align-items:end}
.pl-head .h2{font-size:58px;text-wrap:nowrap}
.pl-head .lede{margin:0 0 6px;font-size:15.5px}
.flow{position:relative;margin-top:46px;flex:none}
.flow-track{position:absolute;top:5px;height:2px;border-radius:2px;background:var(--line-2);left:6px;width:1000px}
.flow-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--ink)}
.flow-head{position:absolute;z-index:2;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.nodes{position:relative;display:grid;grid-template-columns:repeat(5,1fr) 186px}
.node{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;padding-right:12px;color:var(--faint)}
.node .dot{width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2),0 0 0 4px var(--paper);margin-bottom:16px;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.node .nn{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em}
.node b{font-weight:500;font-size:16px;letter-spacing:-.012em;margin-top:3px;color:var(--muted);transition:color .35s var(--ease)}
.node em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;margin-top:3px}
.node:hover b{color:var(--ink)}
.node.lit .dot{background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.node.lit b{color:var(--ink)}
.node.cur .dot{box-shadow:0 0 0 4px var(--paper),0 0 0 5.5px var(--ink)}
.node:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px}
.node-end{display:flex;align-items:flex-start;gap:12px}
.ship{flex:none;width:28px;height:28px;margin-top:-8px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-2),0 0 0 4px var(--paper);color:var(--faint);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.ship-t b{display:block;font-weight:500;font-size:16px;letter-spacing:-.012em;color:var(--muted);transition:color .35s var(--ease)}
.ship-t em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:3px}
.node-end.lit .ship{background:var(--ink);color:var(--paper);box-shadow:0 0 0 4px var(--paper),0 8px 20px -6px rgba(0,0,0,.35)}
.node-end.lit .ship-t b{color:var(--ink)}
.pl-panels{position:relative;margin-top:38px;height:384px;flex:none}
.pl-rail{display:none}
.pl-panel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 572px;gap:64px;align-items:start;opacity:0}
.pl-panel[data-i="0"]{opacity:1}
.pl-k{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.pl-k b{font-weight:500;color:var(--ink);margin-right:8px}
.pl-copy h3{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.02;letter-spacing:-.02em;margin-top:14px;text-wrap:balance}
.pl-copy>p{margin-top:16px;font-size:16px;line-height:1.55;color:var(--muted);max-width:500px;letter-spacing:-.008em}
.pl-pts{margin-top:24px}
.pl-pts li{display:grid;grid-template-columns:30px 1fr;align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.pl-pts li>span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.pl-pts b{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.pl-pts small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;letter-spacing:-.005em}
.pl-foot{margin-top:auto;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:12px}
.pl-foot::before{content:"";width:28px;height:1px;background:var(--line-2)}
/* pillar mocks */
.pm{position:relative;height:384px;padding:24px 26px 22px;border-radius:20px;font-size:13.5px;overflow:hidden;display:flex;flex-direction:column}
.pm-h{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);flex:none}
.pm-h b{font-weight:500;font-size:14.5px;letter-spacing:-.01em;margin-right:auto}
.pm-h span{font-size:12px;color:var(--faint)}
.pm-h .tc{margin:0;font-size:11.5px}
.pm-foot{margin-top:auto;display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted)}
.pm-ok{display:flex;align-items:center;gap:9px;margin-top:14px;padding:9px 9px 9px 12px}
.pm-ok .ebtn{margin-left:auto;height:28px;padding:0 12px;font-size:12px}
.pm-ok em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-chat .bubble{align-self:flex-end;max-width:360px}
.pm-chat .lrun{margin-top:14px}
.pm-steps li{height:30px;font-size:13.5px}
/* visual layer */
.pm-vis{padding:12px}
.pv-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0f0d0b;box-shadow:var(--frame-ring)}
.pv-frame>svg.pv-shot{position:absolute;inset:0;width:100%;height:100%}
.pv-broll{position:absolute;top:14px;right:14px;width:156px;height:88px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 24px -8px rgba(0,0,0,.6);opacity:0}
.pv-broll svg{width:100%;height:100%;display:block}
.pv-broll span{position:absolute;left:7px;bottom:6px;font-family:var(--mono);font-size:10.5px;color:#fff;padding:2px 5px;border-radius:4px;background:rgba(0,0,0,.45)}
.pv-l3{position:absolute;left:20px;bottom:76px;display:flex;flex-direction:column;padding:8px 14px 8px 12px;border-left:2px solid #fff;background:rgba(14,13,12,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 6px 6px 0;opacity:0}
.pv-l3 b{font-weight:600;font-size:14px;color:#fff;letter-spacing:-.01em}
.pv-l3 span{font-size:11.5px;color:rgba(255,255,255,.72)}
.pv-cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-weight:600;font-size:24px;letter-spacing:-.018em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.5)}
.pv-cap span{display:inline-block;opacity:0}
.pv-chips{display:flex;gap:8px;padding:14px 6px 2px}
.pv-chips span{font-size:12px;padding:6px 11px;border-radius:999px;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);transition:none}
.pv-chips span.on{color:var(--ink);background:var(--paper-2);box-shadow:none}
/* timeline craft */
.pt-area{position:relative}
.pt-row{display:grid;grid-template-columns:30px 1fr;align-items:center;margin-bottom:8px}
.pt-row>span{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.pt-lane{position:relative;height:44px;border-radius:7px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.pt-v1{height:58px}
.pt-clip{position:absolute;top:5px;bottom:5px;border-radius:5px;font-style:normal;font-size:11px;font-weight:500;line-height:34px;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-clip.ttl{background:var(--paper-3);color:var(--ink-2)}
.pt-clip.br{background:var(--keep-a);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.pt-vc{position:absolute;top:4px;bottom:4px;border-radius:5px;overflow:hidden;display:flex;background:#0f0d0b}
.pt-vc svg{flex:none;height:100%;width:auto;aspect-ratio:16/9}
.pt-vc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08)}
.pt-a1 .wave{position:absolute;left:6px;right:6px;top:4px;bottom:4px;width:calc(100% - 12px);height:32px}
.pt-beats{position:absolute;left:38px;right:0;top:-4px;bottom:-4px;pointer-events:none}
.pt-beats i{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line-2);opacity:0}
.pt-beats i::after{content:"";position:absolute;bottom:-1px;left:-3.5px;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.pt-ph{position:absolute;left:38px;right:0;top:-8px;bottom:-4px;pointer-events:none}
.pt-ph i{position:absolute;top:0;bottom:0;left:0}
.pt-ph i::before{content:"";position:absolute;top:8px;bottom:0;left:-.75px;width:1.5px;background:var(--acc)}
.pt-ph i::after{content:"";position:absolute;top:0;left:-5px;width:10px;height:11px;border-radius:2px 2px 5px 5px;background:var(--acc)}
/* export queue */
.xq li{display:grid;grid-template-columns:28px 104px 1fr 44px;align-items:center;gap:12px;height:52px;border-bottom:1px solid var(--line)}
.xq li:last-child{border-bottom:0}
.ar{justify-self:center;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.ar.v{width:11px;height:19px}.ar.h{width:20px;height:12px}
.xq b{display:block;font-weight:500;font-size:13.5px;letter-spacing:-.01em}
.xq small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.xq-bar{height:4px;border-radius:4px;background:var(--paper-2);overflow:hidden}
.xq-bar i{display:block;height:100%;border-radius:4px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.xq em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.xq-ok{opacity:0}
.xq-ok svg{color:var(--ink)}
/* control plane */
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px!important;color:var(--muted)!important;letter-spacing:.04em;text-transform:uppercase}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.cp{position:relative;width:492px;height:214px;margin:4px auto 0}
.cp-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cp-lines path{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.cp-lines path.on{stroke:var(--ink-3)}
.cp-n{position:absolute;width:124px;padding:9px 12px;border-radius:11px;background:var(--card);box-shadow:var(--shadow-card);opacity:.35}
.cp-n b{display:block;font-weight:500;font-size:13px;letter-spacing:-.01em}
.cp-n small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
.n1{left:0;top:10px}.n2{left:0;top:156px}.n3{right:0;top:10px}.n4{right:0;top:156px}
.cp-core{position:absolute;left:186px;top:73px;width:120px;height:68px;border-radius:14px;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.45)}
.cp-core .tally{background:var(--acc)}
.cp-core small{font-family:var(--mono);font-size:10.5px;opacity:.7;margin-top:2px}
.cp-sync{opacity:0}

/* ---------- capabilities bento ---------- */
.bento{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:22px;box-shadow:var(--shadow-card);overflow:hidden}
.t-wide{grid-column:span 2}
.viz{position:relative;height:232px;margin:10px 10px 0;border-radius:15px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;padding:22px}
.tcopy{padding:22px 26px 26px}
.tk{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.tcopy h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:-.015em;margin-top:8px}
.tcopy p{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:460px;letter-spacing:-.006em}
/* transcribe */
.tr-wave{position:relative;height:46px;border-radius:9px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tr-wave .wave{position:absolute;left:10px;top:6px;width:calc(100% - 20px);height:34px}
.tr-ph{position:absolute;top:0;bottom:0;left:10px;width:1.5px;background:var(--ink)}
.tr-lines{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.tr-lines li{display:grid;grid-template-columns:26px 44px 1fr;align-items:center;gap:12px;height:30px;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.tr-lines time{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.tr-lines .w{opacity:.14}
/* silence */
.sil{display:flex;gap:3px;height:84px;margin-top:22px}
.sil i{position:relative;display:block;border-radius:6px;min-width:0;overflow:hidden}
.sk{background:var(--aud)}
.sk svg{position:absolute;inset:6px 4px;width:calc(100% - 8px);height:calc(100% - 12px)}
.sk svg path{fill:var(--wave-k)}
.sc{background:repeating-linear-gradient(-45deg,rgba(var(--cut),.08) 0 5px,rgba(var(--cut),.28) 5px 6px);box-shadow:inset 0 0 0 1px rgba(var(--cut),.25)}
.sc b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--acc-ink);background:var(--paper);padding:1px 4px;border-radius:3px;white-space:nowrap}
.sil-meta{position:relative;margin-top:20px;height:18px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.sil-meta span{position:absolute;left:0;top:0}
.sil-r{opacity:0;color:var(--ink)}
/* search tile */
.se-q{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13.5px;color:var(--faint)}
.se-t{color:var(--ink);white-space:nowrap}
.se-chips{display:flex;gap:6px;margin-top:12px}
.se-chips span{font-size:11.5px;padding:5px 10px;border-radius:999px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.se-chips span.on{color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.se-res{display:flex;align-items:center;gap:12px;margin-top:14px;padding:9px;border-radius:12px;background:var(--card);box-shadow:var(--shadow-card);opacity:0}
.se-res .th{width:72px;height:41px}
.se-res b{display:block;font-weight:500;font-size:13px;letter-spacing:-.01em}
.se-res small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
/* captions tile */
.t-cap .viz,.t-rf .viz{padding:0}
.cap-frame{position:absolute;inset:0;background:#0f0d0b}
.cap-frame svg{width:100%;height:100%;display:block}
.cap-line{position:absolute;left:14px;right:14px;bottom:22px;text-align:center;font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.5)}
.cap-line span{display:inline-block;opacity:.42;transition:none}
.cap-line span.on{opacity:1}
/* reframe tile */
.rf-frame{position:absolute;left:0;right:0;top:0;bottom:44px;background:#0f0d0b;overflow:hidden}
.rf-frame svg{width:100%;height:100%;display:block}
.rf-box{position:absolute;top:0;bottom:0;left:0;right:0;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 999px rgba(10,9,8,.55)}
.rf-lab{position:absolute;left:6px;top:6px;font-family:var(--mono);font-weight:500;font-size:10.5px;color:#111;background:#fff;padding:1px 5px;border-radius:3px}
.rf-ratios{position:absolute;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.rf-ratios span.on{color:var(--ink)}
/* translate tile */
.lg-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.lg-tabs span{font-family:var(--mono);font-size:11px;padding:4px 11px;border-radius:999px;color:var(--muted)}
.lg-tabs span.on{background:var(--ink);color:var(--paper)}
.lg-rows{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.lg-row{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;height:30px}
.lg-t{display:grid;font-size:18px;letter-spacing:-.014em}
.lg-t span{grid-area:1/1;opacity:0;white-space:nowrap}
.lg-t span:first-child{opacity:1}
.dia{margin-top:22px;display:flex;flex-direction:column;gap:6px}
.dia-l{position:relative;height:14px;margin-left:38px}
.dia-l span{position:absolute;left:-38px;top:0;font-family:var(--mono);font-size:10.5px;line-height:14px;color:var(--faint)}
.dia-l i{position:absolute;top:2px;bottom:2px;border-radius:3px;background:var(--ink-3);transform-origin:0 50%}
.dia-l.s2 i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
/* export tile */
.ex-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--card);box-shadow:var(--shadow-card)}
.ex-row+.ex-row{margin-top:10px}
.ex-row .th{width:72px;height:41px}
.xml-ico.sm{width:72px;height:41px;flex:none;border-radius:5px;font-size:10.5px}
.ex-row>div{flex:1;min-width:0}
.ex-row b{display:block;font-weight:500;font-size:13px;letter-spacing:-.01em}
.ex-row small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
.ex-bar{display:block;height:3px;margin-top:7px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.ex-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.ex-ok{flex:none;position:relative;width:18px;height:18px;border-radius:50%;background:var(--ink);opacity:0}
.ex-ok::after{content:"";position:absolute;left:6.5px;top:3.6px;width:4px;height:8px;border:solid var(--paper);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

/* ---------- who it's for ---------- */
.who{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pc{display:flex;flex-direction:column;padding:24px 22px 20px;background:var(--card);border-radius:22px;box-shadow:var(--shadow-card);min-height:430px}
.pc-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.pc-n{color:var(--ink)}
.pc h3{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1;margin-top:36px;letter-spacing:-.02em}
.pc dl{margin:14px 0 22px}
.pc dt{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:14px}
.pc dd{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.pc dd.b4{color:var(--muted)}
.pc-prompt{margin-top:auto;padding:12px 14px 13px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.45;min-height:110px;color:var(--ink);letter-spacing:-.01em}
.pc-prompt::before{content:"Example prompt";display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.pc .caret{margin-left:1px}

/* ---------- compare ---------- */
.cmp{position:relative;margin:64px auto 0;max-width:1100px}
.cmp::before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc((100% - 210px) / 2);border-radius:22px;background:var(--card);box-shadow:var(--shadow-win)}
.cmp-row{position:relative;display:grid;grid-template-columns:210px 1fr 1fr}
.cmp-row>*{padding:19px 28px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;letter-spacing:-.008em}
.cmp-row:last-child>*{padding-bottom:26px}
.cmp-hd>*{border-top:0;padding-top:28px;padding-bottom:24px}
.cmp-l{padding-left:0!important;font-family:var(--mono);font-size:11px!important;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;padding-top:22px!important}
.cmp-a{color:var(--muted)}
.cmp-b{color:var(--ink)}
.cmp-hd b{display:block;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;letter-spacing:-.015em;color:var(--ink)}
.cmp-hd .cmp-a b{color:var(--muted)}
.cmp-hd small{display:block;margin-top:6px;font-size:13px;color:var(--faint)}
.cf-viz{display:flex;gap:6px;margin-top:18px}
.cf-viz i{position:relative;width:92px;height:52px;border-radius:6px;overflow:hidden}
.cf-viz svg{width:100%;height:100%;display:block}
.cf-viz span{position:absolute;left:6px;bottom:4px;font-style:normal;font-size:10.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ef-viz{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.cv-p{align-self:flex-start;font-size:13px;line-height:1.4;padding:8px 12px;border-radius:12px 12px 12px 4px;background:var(--paper-2);color:var(--ink);max-width:360px}
.cv-s{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink)}
.cv-s .st{width:13px;height:13px;background:var(--ink);box-shadow:none}
.cv-s .st::after{content:"";position:absolute;left:4.2px;top:2.3px;width:3px;height:6px;border:solid var(--paper);border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:clamp(40px,7vw,120px);align-items:start}
.faq-sec .sec-head{position:sticky;top:calc(var(--nav-h) + 48px)}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa h3{margin:0;font:inherit}
.qa button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-family:var(--serif);font-size:27px;line-height:1.15;letter-spacing:-.012em;color:var(--ink)}
.qa button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.pm-ico{flex:none;position:relative;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .3s var(--ease)}
.qa button:hover .pm-ico{background:var(--paper-2)}
.pm-ico::before,.pm-ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;border-radius:1px;background:var(--ink);transition:transform .55s var(--ease)}
.pm-ico::after{transform:rotate(90deg)}
.qa.open .pm-ico::after{transform:rotate(0deg)}
.qa-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease),visibility 0s linear .55s}
.qa.open .qa-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease),visibility 0s}
.qa-a>div{overflow:hidden;min-height:0}
.qa-a p{padding:0 64px 26px 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:660px;letter-spacing:-.006em}

/* ---------- outro + footer ---------- */
.outro-eb{margin-bottom:22px}
.outro-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.trust{margin:min(12vh,120px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;font-size:13px;color:var(--faint)}
.trust span{white-space:nowrap;padding:0 16px}
.trust span+span{border-left:1px solid var(--line-2)}
.foot{margin-top:min(14vh,130px);padding:52px max(24px,3.4vw) 28px;border-top:1px solid var(--line);text-align:left;font-size:13.5px;color:var(--muted)}
.foot-top{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.1fr 2fr;gap:48px}
.foot-brand p{margin-top:14px;max-width:300px;line-height:1.55}
.foot-brand small{display:block;margin-top:12px;font-size:12.5px;color:var(--faint)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot-cols b{display:block;font-weight:500;color:var(--ink);margin-bottom:12px}
.foot-cols a{display:block;width:max-content;padding:4px 0;color:var(--muted);transition:color .25s var(--ease)}
.foot-cols a:hover{color:var(--ink)}
.foot-bot{max-width:1240px;margin:44px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--faint)}
.foot-proto{font-family:var(--mono);font-size:11px}

/* =========================================================
   Stacked modes for the new pinned sections (phones + reduced motion)
   ========================================================= */
.sr-stack .sr-sec .pin-wrap,.pl-stack .pl-sec .pin-wrap{height:auto;display:block;padding:clamp(110px,16vh,170px) max(20px,4.4vw) 0}
.sr-stack .split{display:block;max-width:760px}
.sr-stack .split-stage{display:block;margin-top:40px}
.sr-stack .fit,.pl-stack .fit{width:auto!important;height:auto!important}
.sr-stack .fit>*,.pl-stack .fit>*{position:relative;transform:none!important}
.sr-stack .sr-card{width:100%;height:auto}
.sr-stack .sr-tl{margin-top:18px}
.pl-stack .pl-inner{width:auto;height:auto;max-width:760px;margin:0 auto}
.pl-stack .pl-head{display:block}
.pl-stack .pl-head .h2{font-size:clamp(40px,10vw,60px);text-wrap:balance}
.pl-stack .pl-head .lede{margin-top:16px}
.pl-stack .flow{display:none}
.pl-stack .pl-panels{height:auto;margin-top:48px;display:flex;flex-direction:column;gap:64px;padding-left:30px}
.pl-stack .pl-rail{display:block;position:absolute;left:5px;top:6px;bottom:0;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.pl-stack .pl-rail b{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--p,1))}
.pl-stack .pl-panel{position:relative;inset:auto;display:block;opacity:1!important;transform:none!important}
.pl-stack .pl-panel::before{content:"";position:absolute;left:-30px;top:1px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.pl-stack .pm{margin-top:24px;height:auto;min-height:0}
.pl-stack .pl-foot{margin-top:48px;padding-left:30px}
.pl-shipm{display:none}
.pl-stack .pl-shipm{display:flex;align-items:flex-start;gap:12px;margin-left:-38px}
.pl-stack .pl-shipm .ship{margin-top:0;background:var(--ink);color:var(--paper);box-shadow:0 0 0 4px var(--paper)}
.pl-stack .pl-shipm .ship-t b{color:var(--ink);line-height:1.2;margin-top:2px}
@media (max-width:1180px) and (min-width:768px){
  .feats{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,1fr)}
  .pc{min-height:0}
}
@media (max-width:767px){
  .theme-toggle{width:34px;height:34px}
  .nav-cta{gap:10px}
  .sec{padding-top:110px}
  .h2{font-size:clamp(38px,10.4vw,48px)}
  .lede{font-size:16px}
  .feats{grid-template-columns:1fr;gap:14px}
  .sr-card{padding:20px 16px 18px}
  .sr-card .m-h span{font-size:11px}
  .sr-scroll li{grid-template-columns:40px 1fr auto;gap:10px;padding:0 10px 0 12px;font-size:12.5px}
  .sr-scroll .spk{display:none}
  .sr-scroll em{font-size:10.5px;padding:2px 7px}
  .sr-lane{height:52px}
  .sr-clip span{font-size:10.5px;left:6px;top:4px}
  .pl-copy h3{font-size:36px}
  .pl-copy>p{font-size:15.5px}
  .pm{padding:20px 16px 18px}
  .pm-vis{padding:10px}
  .pv-cap{font-size:17px;bottom:14px}
  .pv-broll{width:104px;height:59px;top:10px;right:10px}
  .pv-l3{left:12px;bottom:48px;padding:6px 10px}
  .pv-l3 b{font-size:12px}
  .pv-l3 span{font-size:10.5px}
  .pv-chips{flex-wrap:wrap;gap:6px}
  .pv-chips span{font-size:11.5px}
  .xq li{grid-template-columns:22px 82px 1fr 40px;gap:10px}
  .cp{width:auto;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cp-lines{display:none}
  .cp-n,.cp-core{position:relative;inset:auto;width:auto}
  .cp-core{grid-column:1/-1;order:-1;height:60px}
  .pm-foot{flex-direction:column;gap:4px}
  .bento{grid-template-columns:1fr;margin-top:44px}
  .t-wide{grid-column:auto}
  .viz{height:216px;padding:18px}
  .lg-t{font-size:14px}
  .lg-t span{white-space:normal}
  .lg-row{height:auto;min-height:30px}
  .tr-lines li{font-size:13px;grid-template-columns:26px 40px 1fr;gap:10px}
  .tcopy{padding:20px 20px 22px}
  .tcopy h3{font-size:28px}
  .who{grid-template-columns:1fr;margin-top:44px}
  .pc{min-height:0}
  .pc h3{margin-top:24px}
  .cmp{margin-top:44px}
  .cmp::before{width:50%}
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row>*{padding:14px 16px;font-size:14px}
  .cmp-l{grid-column:1/-1;padding:16px 0 0!important;border-top:1px solid var(--line)}
  .cmp-row:not(.cmp-hd)>.cmp-a,.cmp-row:not(.cmp-hd)>.cmp-b{border-top:0}
  .cmp-hd .cmp-l{display:none}
  .cmp-hd b{font-size:26px}
  .cf-viz{display:none}
  .ef-viz{display:none}
  .faq-grid{display:block}
  .faq-sec .sec-head{position:static}
  .faq{margin-top:36px}
  .qa button{font-size:22px;padding:20px 0}
  .qa-a p{padding-right:8px;font-size:15.5px}
  .outro-btns{flex-direction:column;align-items:stretch;width:min(320px,100%)}
  .outro-cta{align-items:center}
  .trust{flex-direction:column;align-items:center;gap:6px}
  .trust span{padding:0;font-size:12.5px}
  .trust span+span{border-left:0}
  .foot-top{grid-template-columns:1fr;gap:32px}
  .foot-cols{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .foot-bot{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  html.theme-anim, .ef-landing.theme-anim *, .ef-landing.theme-anim *::before, .ef-landing.theme-anim *::after{transition:none!important}
  .theme-toggle svg,.qa-a,.pm-ico::before,.pm-ico::after{transition:none!important}
}
.pl-short{height:640px}
.pl-short .pl-foot{display:none}
.pl-short .pl-head .h2{font-size:52px}
.pl-short .flow{margin-top:34px}
.pl-short .pl-panels{margin-top:30px}
[data-theme="dark"] .ccap,[data-theme="dark"] .caps i{background:var(--ink-2)}
@media (max-width:767px){.outro-note{text-wrap:balance;max-width:300px;text-align:center}}

/* ---------- shared site nav: skip link, current page, mobile menu (used by /landing and every /site page) ---------- */
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:#ededed;color:#0b0b0b;font-size:14px;font-weight:600;transition:top .3s var(--ease)}
.skip:focus{top:12px;outline:2px solid #ededed;outline-offset:2px}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:1.5px;margin-top:3px;border-radius:1px;background:var(--red)}

/* ---------- mobile menu ---------- */
.menu-btn{display:none;position:relative;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2)}
.menu-btn i{position:absolute;left:10px;right:10px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu-btn i:first-child{top:13px}.menu-btn i:last-child{top:19px}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}
.nav-menu{position:fixed;inset:var(--nav-h) 0 0 0;z-index:49;padding:12px 18px 22px;background:var(--paper);box-shadow:0 1px 0 var(--line);display:none;overflow-y:auto;overscroll-behavior:contain}
.nav-menu.open{display:block}
.ef-landing.menu-open{overflow:hidden}
.nav-menu a{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.nav-menu a[aria-current="page"]{color:var(--red-ink);font-weight:600}
.nav-menu .nm-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.nav-menu .nm-cta a{justify-content:center;border:0;height:48px;font-size:15px}
.nav-menu .nm-cta a.btn-ink{color:var(--paper)}
@media (max-width:767px){.menu-btn{display:block}}


/* =========================================================
   EisenFrame brand layer: logo lockup, Sora display type, monochrome accents,
   example labels, the editorial-decisions section and the Plan step mock.
   ========================================================= */
.brand,.ed-brand,.vb-brand{display:inline-flex;align-items:center;gap:.42em;font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1;white-space:nowrap;color:var(--ink)}
.brand{font-size:23px}
.brand.sm{font-size:20px}
.brand.xs{font-size:16px}
.ed-brand{font-size:16px}
.ed-brand.sm{font-size:14.5px}
.ef-word{display:block;line-height:1;padding-top:.04em}
/* display type: Sora, tight, with a light-weight counterpoint instead of italics */
.headline,.h1,.h2,.outro-title,.loop-title{font-weight:600;letter-spacing:-.04em}
.headline{line-height:1.02}
.headline .line{padding-bottom:.1em}
.outro-title{line-height:1}
.outro-title .line{padding-bottom:.08em}
.chapters h3,.stack h3,.pl-copy h3,.tcopy h3,.pc h3,.cmp-hd b,.h3,.qa button{font-weight:500;letter-spacing:-.03em}
.headline em,.h1 em,.h2 em,.h3 em,.outro-title em,.loop-title em,.pl-copy h3 em,.chapters h3 em,.tcopy h3 em,.pc h3 em,h1 em,h2 em,h3 em{font-style:normal;font-weight:300;letter-spacing:-.035em}
.sub-lead{display:block;margin-bottom:10px;font-family:var(--display);font-weight:500;font-size:clamp(21px,1.9vw,26px);line-height:1.25;letter-spacing:-.025em;color:var(--ink)}
.sub{max-width:560px}
/* monochrome accent: anything that sat on the old red needs paper-coloured text */
.prompt-send.sent,.cq b{color:var(--paper)}
/* "Example" label for illustrative demos (never a measured result) */
.ex-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex:none}
.ed-mh .ex-tag{margin-left:2px}
.pm-h .ex-tag{margin-right:0}
/* landing footage illustrations are drawn in full colour in the page SVG defs */
.dec-sec{padding-bottom:clamp(40px,8vh,90px)}
.dec-title{max-width:880px;margin-left:auto;margin-right:auto}
.dec-sec .sec-head{max-width:900px}
.dec-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;margin-top:56px;align-items:stretch}
.dec-story{margin:0;padding:26px 26px 22px;border-radius:22px;background:var(--card);box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.dec-cap{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--faint)}
.dec-flow-w{position:relative;margin-top:20px}
.dec-flow{position:relative;display:grid;gap:0;counter-reset:dec}
.dec-rail{position:absolute;left:13px;top:28px;bottom:40px;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden;pointer-events:none}
.dec-rail b{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0}
.dec-flow li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:12px 0 12px;border-top:1px solid var(--line)}
.dec-flow li:first-child{border-top:0}
.dec-flow .dn{--on:0;position:relative;z-index:1;grid-row:1 / span 2;align-self:start;margin-top:2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--mono);font-size:10.5px;color:var(--muted)}
/* --on (0..1) fills a step's number: scrubbed by the scroll timeline, done = filled */
.dec-flow .dn{background:color-mix(in srgb,var(--ink) calc(var(--on) * 100%),var(--card));color:color-mix(in srgb,var(--paper) calc(var(--on) * 100%),var(--muted))}
.dec-flow li:last-child .dn{--on:1}
.dec-flow b{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.dec-flow small{font-size:13.5px;line-height:1.45;color:var(--muted)}
.dec-log{display:flex;flex-direction:column;gap:14px}
.dec-item{padding:22px 24px;border-radius:22px;background:var(--card);box-shadow:var(--shadow-card)}
.dec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dec-h time{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.dec-k{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.dec-k::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--ink)}
.dec-k.cut::before{background:none;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:50%}
.dec-k.add::before{border-radius:50%}
.dec-item p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}
.dec-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding:4px 4px 0;font-size:13px;line-height:1.5;color:var(--faint)}
/* workflow step 02 (Plan) mock */
.pp-list{display:flex;flex-direction:column;gap:10px}
.pp-list li{padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);background:var(--paper)}
.pp-list .dec-k{font-size:13.5px}
.pp-list .dec-h time{font-size:11.5px;color:var(--muted)}
.pp-list p{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.pm-plan .pp-ok{margin-top:auto}
@media (max-width: 900px){
  .dec-grid{grid-template-columns:1fr;margin-top:40px}
}
/* pinned mode (desktop windows tall enough to hold the heading and the proof together) */
.dec-pinned .dec-sec{padding-top:0;padding-bottom:0}
.dec-pinned .dec-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 8px) 0 24px}
.dec-pinned .dec-grid{margin-top:clamp(28px,5vh,52px)}
.dec-pinned .dec-sec .h2{font-size:clamp(40px,4vw,56px)}
@media (max-width: 767px){
  .brand{font-size:20px}
  .dec-story,.dec-item{padding:20px}
  .dec-flow b{font-size:16px}
}
/* workflow head: five words need more room than the old two-line title */
.pl-head{grid-template-columns:1fr 380px;gap:48px}
.pl-head .h2{font-size:46px}
.pl-short .pl-head .h2{font-size:42px}
.pl-stack .pl-head .h2{font-size:clamp(32px,8vw,48px)}
.pm-plan .pm-h b{margin-right:0}
.pm-plan .pm-h .cx-r{margin-left:auto}
.cmp-hd .cmp-b>b{display:inline-flex;align-items:center;gap:.36em}
.cmp-hd .cmp-b>b @media (max-width: 767px){
  .headline{font-size:var(--h1,min(11.4vw,92px));line-height:1.04}
  .sub-lead{font-size:19px}
}
/* phones: comfortable tap targets in the footer link lists */
@media (max-width:767px){
  .foot-cols a{padding:8px 0;min-height:36px}
}
/* short desktop windows (720-800px tall): tighten the hero copy so the editor still peeks below the CTAs */
@media (min-width:768px) and (max-height:820px){
  .hero-copy{--copy-top:max(10px,4vh - 8px)}
  .headline{margin-top:14px}
  .sub{margin-top:18px}
  .sub-lead{margin-bottom:6px}
  .hero-cta{margin-top:24px;gap:10px}
}

/* ---------- signed-in nav: Account button + menu (landing + marketing pages) ----------
   html.signed-in is set before first paint by the inline head script, so the signed-out CTAs never flash. */
.na,.nav-menu .nm-acct{display:none}
.signed-in .na{display:block}
.signed-in .nav-cta>.link-quiet,.signed-in .nav-cta>.btn{display:none}
.signed-in .nav-menu .nm-cta{display:none}
.signed-in .nav-menu .nm-acct{display:block}
.na{position:relative}
.na-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .25s var(--ease)}
.na-btn:hover,.na-btn[aria-expanded="true"]{background:var(--card)}
.na-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.na-chev{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.na-btn[aria-expanded="true"] .na-chev{transform:rotate(180deg)}
.na-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:244px;padding:6px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-win);transform-origin:top right;animation:naIn .22s var(--ease)}
.na-menu[hidden]{display:none}
@keyframes naIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.na-who{display:grid;gap:2px;padding:10px 12px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.na-who b{font-size:14px;font-weight:600;color:var(--ink)}
.na-who span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.na-who span:empty{display:none}
.na-menu [role="menuitem"]{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink-2,var(--ink));font:inherit;font-size:14px;text-align:left;cursor:pointer}
.na-menu [role="menuitem"] small{margin-left:auto;font-size:12px;color:var(--muted)}
.na-menu [role="menuitem"]:hover,.na-menu [role="menuitem"]:focus-visible{background:var(--hl);color:var(--ink);outline:none}
.na-menu [data-acct-signout]{color:var(--danger-ink)}
.na-ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.na-sep{display:block;height:1px;margin:5px 4px;background:var(--line)}
.nm-who{display:flex;align-items:center;gap:12px;padding:6px 4px 14px;border-bottom:1px solid var(--line)}
.nm-who b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.nm-who small{display:block;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.nm-who>span:last-child{min-width:0}
.nav-menu .nm-acct{margin-top:18px}
.nav-menu .nm-out{width:100%;justify-content:center;height:48px;margin-top:18px;font-size:15px;color:var(--danger-ink);background:transparent;cursor:pointer}
.nav-menu .nm-out:hover{background:var(--paper-2)}
@media (max-width:767px){
  .na-btn{padding:0 14px;gap:0;height:38px;font-size:13.5px}
  .na-btn .na-chev{display:none}
}
.ef-toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%);padding:11px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;box-shadow:var(--shadow-win);animation:naIn .3s var(--ease)}