/* =========================================================
   EisenFrame landing · refinement pass (Oct 2026)
   Loaded only by /landing after styles.css. Shared selectors are scoped to .ef-landing.lp
   so the other site pages (which also load styles.css) are unaffected.
   Chapters: hero → before/after → manifesto → loop → capabilities → scenarios → why → FAQ → CTA.
   ========================================================= */
.lp{
  --ok:#23845B;--ok-soft:rgba(35,132,91,.12);
  --faint:#707070;           /* AA on paper and card (was #A0A0A0) */
  --tint:color-mix(in srgb,var(--ink) 4%,var(--paper));
  --tint-2:color-mix(in srgb,var(--ink) 7%,var(--paper));
  --film:#0f0d0b;
}
[data-theme="dark"] .lp,[data-theme="dark"].lp{--ok:#3FBF86;--ok-soft:rgba(63,191,134,.16);--faint:#8C8C8C}
.ef-landing[data-theme="dark"] .ef-landing.lp{--ok:#3FBF86;--ok-soft:rgba(63,191,134,.16);--faint:#8C8C8C}

/* ---------- type + shared ---------- */
.lp .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12.5px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lp .eyebrow::before{content:"";flex:none;width:2px;height:14px;border-radius:1px;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.lp .sec{padding:clamp(120px,18vh,200px) max(24px,4.4vw) 0}
.lp .sec-head{max-width:900px}
.lp .h2{font-size:clamp(42px,5vw,76px);line-height:1.02;letter-spacing:-.045em;margin-top:20px;text-wrap:balance}
.lp .h2 em{display:inline;font-weight:300}
.lp .lede{margin-top:22px;font-size:18px;line-height:1.55;max-width:560px}
.lp .sec-head .lede{margin-left:auto;margin-right:auto}
.lp .sec-head.left .lede{margin-left:0}
.lp .ex-tag{height:20px;font-size:10.5px}

/* buttons + links: hover / active / focus */
.lp .btn{transition:background-color .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
.lp .btn:active{transform:scale(.97)}
.lp .btn-ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px -10px rgba(0,0,0,.45)}
.lp .btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.lp .btn .i-play{margin-left:-2px}
.lp a:focus-visible,.lp button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}
.lp .btn:focus-visible{border-radius:999px}
.lp .nav-links a{position:relative}
.lp .nav-links a:not([aria-current="page"])::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.lp .nav-links a:hover::after{transform:scaleX(1)}
.lp .nav-links a[aria-current="page"]::after{background:var(--acc)}

/* ---------- brand motifs (subtle) ---------- */
.aperture{position:absolute;pointer-events:none;aspect-ratio:1;color:var(--ink);opacity:.05;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='.55'%3E%3Ccircle cx='100' cy='100' r='99'/%3E%3Ccircle cx='100' cy='100' r='84'/%3E%3Ccircle cx='100' cy='100' r='38'/%3E%3Cpath d='M100 1 L132 64 M170 30 L138 92 M199 100 L136 115 M170 170 L118 132 M100 199 L68 136 M30 170 L62 108 M1 100 L64 85 M30 30 L82 68'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='black' stroke-width='.55'%3E%3Ccircle cx='100' cy='100' r='99'/%3E%3Ccircle cx='100' cy='100' r='84'/%3E%3Ccircle cx='100' cy='100' r='38'/%3E%3Cpath d='M100 1 L132 64 M170 30 L138 92 M199 100 L136 115 M170 170 L118 132 M100 199 L68 136 M30 170 L62 108 M1 100 L64 85 M30 30 L82 68'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="dark"] .aperture{opacity:.07}
.crop{position:absolute;inset:12px;z-index:3;pointer-events:none}
.crop b{position:absolute;width:18px;height:18px;border:0 solid rgba(255,255,255,.72)}
.crop b:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.crop b:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.crop b:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.crop b:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
/* film-strip sprockets for footage bars */
.sprk::before,.sprk::after{content:"";position:absolute;left:0;right:0;height:6px;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.28) 5px 10px,transparent 10px 15px);opacity:.9}
.sprk::before{top:3px}.sprk::after{bottom:3px}
.thumbs{display:flex;height:100%}
.thumbs svg{flex:none;height:100%;width:auto;aspect-ratio:16/9;display:block}

/* ================= 1 · HERO ================= */
.lp .hero-ap{left:50%;top:calc(var(--nav-h) + 4vh);width:min(92vw,980px);transform:translateX(-50%);z-index:0}
.lp .hero-copy{z-index:5}
.lp .headline{font-size:var(--h1,min(9vw,13.4vh,146px));margin-top:22px;letter-spacing:-.05em}
.lp .sub{margin-top:24px;max-width:none;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.85vw,27px);line-height:1.25;letter-spacing:-.028em;color:var(--ink)}
.lp .hero-cta{margin-top:34px;gap:16px}
.lp .hero-cta-row .btn{min-width:176px}
.lp .hero-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;color:var(--muted)}
.hero-up{appearance:none;border:0;background:none;padding:2px 0;margin:0;font:inherit;font-weight:500;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;text-decoration-thickness:1.5px;transition:text-decoration-color .25s var(--ease)}
.hero-up:hover{text-decoration-color:var(--ink)}
@media (min-width:768px) and (max-height:820px){
  .lp .sub{margin-top:16px}
  .lp .hero-cta{margin-top:24px;gap:12px}
}

/* ---------- hero demo: bar ---------- */
.lp .editor{grid-template-rows:52px minmax(0,1fr);font-size:14px;border-radius:18px}
.lp .ed-bar{padding:0 12px 0 18px}
.lp .ed-l{gap:12px}
.lp .ed-brand{font-size:17px}
.lp .ed-file{font-size:14px;font-weight:500;color:var(--ink-2)}
.lp .ed-bar .ex-tag{margin-left:2px}
.ed-state{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 15px 0 13px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ed-state i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:pulse 1.4s var(--ease) infinite}
.ed-state.is-wait i{animation:none;background:var(--acc)}
.ed-state.is-ok i{animation:none;background:var(--ok)}
.lp .ebtn{height:34px;padding:0 16px;font-size:13.5px}
.lp .ebtn.commit{transition:background-color .3s var(--ease),color .3s var(--ease)}
/* ---------- hero demo: body ---------- */
.lp .ed-body{grid-template-columns:minmax(0,1fr) 360px;gap:8px;padding:0 8px 8px}
.lp .ed-main{gap:8px}
.lp .ed-monitor{display:grid;place-items:center;background:var(--monitor-bg)}
.lp .frame{width:592px;height:333px;border-radius:10px}
.lp .ftag{top:14px;left:16px;z-index:4;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.45)}
.lp .ftag.after{background:var(--acc)}
.ftc{position:absolute;z-index:4;right:16px;bottom:14px;font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lp .fcap{bottom:30px;z-index:4}
.lp .fcap span{font-size:23px}
.lp .frame .crop{inset:10px}
/* timeline */
.lp .ed-tl{display:flex;flex-direction:column}
.tl-head{flex:none;display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;border-bottom:1px solid var(--line)}
.tl-head>b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.tl-sel{font-size:12px;font-weight:500;color:var(--acc-ink);background:var(--acc-soft);padding:3px 9px;border-radius:999px;opacity:0}
.tl-head .tc{margin-left:auto;font-size:12.5px}
.lp .tl-grid{grid-template-columns:50px minmax(0,1fr)}
.lp .tl-gutter{padding-top:10px;border-right:1px solid var(--line)}
.lp .tl-gutter span{display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted)}
.lp .g-h{height:26px;margin-bottom:8px}
.lp .g-v{height:60px;margin-bottom:8px}
.lp .g-a{height:40px;margin-bottom:8px}
.lp .g-c{height:26px;margin-bottom:14px}
.lp .tl-main{margin:10px 18px 14px 10px}
.lp .ruler{height:26px;margin-bottom:8px}
.lp .ticks{height:9px;opacity:1;background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 100%);background-size:calc(100% / 40) 4px,calc(100% / 4) 9px;background-position:0 100%,0 100%;background-repeat:repeat-x}
.lp .rl span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.lp .lane-v{height:60px;margin-bottom:8px}
.lp .lane-a{height:40px;margin-bottom:8px}
.lp .lane-c{height:26px}
.lp .clip,.lp .aclip,.lp .keep-v,.lp .keep-a{border-radius:8px}
.lp .keep-v{transition:box-shadow .25s var(--ease)}
.lp .keep-v.sel{z-index:4;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.lp .keep-v.sel::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:linear-gradient(90deg,var(--ink) 0 4px,transparent 4px calc(100% - 4px),var(--ink) calc(100% - 4px));opacity:.9}
.lp .ccap{height:26px;line-height:26px;font-size:12px;border-radius:6px}
.secmarks{position:absolute;inset:0;z-index:3;pointer-events:none}
.secmarks i{position:absolute;top:-5px;bottom:-5px;width:0;border-left:1.5px dashed rgba(255,255,255,.85);opacity:0}
.lp .playhead::before{top:12px;left:-1px;width:2px;box-shadow:0 0 0 3px var(--acc-soft)}
.lp .playhead i{left:-6px;width:12px;height:14px;border-radius:3px 3px 6px 6px;box-shadow:0 2px 6px -1px rgba(var(--cut),.6)}
/* AI director panel */
.dir{display:flex;flex-direction:column}
.dir-h{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-bottom:1px solid var(--line)}
.dir-h b{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.025em;margin-right:auto}
.dir-sec{padding:18px 20px 6px}
.dir-sec+.dir-sec{padding-top:14px;border-top:1px solid var(--line);margin:4px 0 0}
.dir-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dir-checks li{display:flex;align-items:center;gap:12px;height:34px;font-size:15px;color:var(--faint);letter-spacing:-.01em}
.dir-checks li b{font-family:var(--mono);font-weight:500;font-size:14px}
.dir-checks li.run,.dir-checks li.done{color:var(--ink)}
.dir-checks li.done>.st{background:var(--ok)}
.dir-plan li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;padding:8px 0;font-size:15px;line-height:1.35;letter-spacing:-.012em;color:var(--ink)}
.dir-plan .n{font-family:var(--mono);font-size:12px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.dir-plan li.cur .n{color:var(--acc-ink)}
.dir-plan li.cur .t{box-shadow:inset 0 -2px 0 var(--acc-soft)}
.dir-plan li.done .n{color:var(--ok)}
.dir-foot{margin-top:auto;padding:14px 20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.dir-foot.is-ok{color:var(--ink)}
/* phones: separate composition */
.ed-mobile{display:none}
.editor.compact .ed-mobile{display:flex;flex-direction:column;gap:10px;padding:2px 10px 12px}
.lp .editor.compact{display:flex;flex-direction:column}
.lp .editor.compact .ed-bar{height:46px;grid-template-columns:auto 1fr;padding:0 10px 0 14px}
.lp .editor.compact .ed-sep,.lp .editor.compact .ed-file,.lp .editor.compact .ed-bar .ex-tag,.lp .editor.compact .ed-right,.lp .editor.compact .ed-tl,.lp .editor.compact .ed-agent{display:none}
.lp .editor.compact .ed-state{justify-self:end;height:28px;font-size:11px;padding:0 11px 0 10px}
.lp .editor.compact .ed-body{display:block;padding:0 10px}
.lp .editor.compact .ed-main{display:block}
.lp .editor.compact .ed-monitor{border-radius:12px;padding:0;background:none;box-shadow:none}
.lp .editor.compact .frame{width:100%;height:auto;aspect-ratio:16/9}
.lp .editor.compact .fcap{bottom:16px}
.lp .editor.compact .fcap span{font-size:15px}
.lp .editor.compact .ftag{top:10px;left:10px;font-size:10px;padding:3px 7px}
.lp .editor.compact .ftc{display:none}
.lp .editor.compact .frame .crop{inset:7px}
.lp .editor.compact .crop b{width:12px;height:12px}
.mba{display:flex;flex-direction:column;gap:8px;padding:2px 2px 0}
.mba-r{display:grid;grid-template-columns:50px minmax(0,1fr) 44px;align-items:center;gap:10px}
.mba-k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mba-r b{font-family:var(--mono);font-size:13px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.mba-bar{position:relative;height:26px;border-radius:6px;overflow:hidden;background:var(--film)}
.mba-cut{width:30%;background:none;display:flex;gap:2px;overflow:visible;transform-origin:0 50%}
.mba-cut i{display:block;height:100%;border-radius:4px;overflow:hidden;background:var(--film)}
.m-approve{justify-content:center;height:42px!important;font-size:14px!important;border-radius:12px!important}

/* ================= signature decision card ================= */
.dcard{position:relative;width:min(640px,100%);text-align:left;background:var(--card);border-radius:18px;box-shadow:var(--shadow-win);padding:18px 20px 18px}
.dc-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dc-k{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.dc-k i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.dc-tl{position:relative;height:46px;margin-top:16px;border-radius:9px;overflow:hidden;background:var(--film)}
.dc-strip{display:flex;height:100%}
.dc-strip svg{flex:none;height:100%;width:auto;aspect-ratio:16/9;display:block}
.dc-cut{position:absolute;top:0;bottom:0;left:40%;width:19%;border-radius:4px;background:repeating-linear-gradient(-45deg,rgba(var(--cut),.22) 0 6px,rgba(var(--cut),.55) 6px 7.5px);box-shadow:inset 0 0 0 2px var(--acc);transition:width .6s var(--ease),opacity .4s var(--ease)}
.dc-ph{position:absolute;top:0;bottom:0;left:40%;width:2px;margin-left:-1px;background:var(--acc)}
.dc-b{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;margin:16px 0 0}
.dc-r dt,.dc-r .dt{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dc-r dd{margin:5px 0 0;font-size:16px;line-height:1.4;color:var(--ink);letter-spacing:-.012em}
.dc-tc{font-family:var(--mono);font-size:17px!important;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0!important}
.dc-conf{display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.dc-conf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.dc-act{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.dc-btn{appearance:none;border:0;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;border-radius:999px;font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;white-space:nowrap;transition:background-color .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease),color .25s var(--ease)}
.dc-btn:hover{background:var(--paper-2)}
.dc-btn:active{transform:scale(.96)}
.dc-btn.dc-accept{background:var(--ink);color:var(--paper);box-shadow:none}
.dc-btn.dc-accept:hover{background:var(--ink-hover)}
.dc-btn[aria-pressed="true"].dc-accept,.dc-btn.dc-accept.is-on{background:var(--ok);color:#fff}
.dc-btn[aria-pressed="true"]:not(.dc-accept){box-shadow:inset 0 0 0 1.5px var(--ink)}
.dc-status{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:right}
.dc-status:empty{display:none}
.dcard.is-accepted .dc-cut{width:0;opacity:0}
.dcard.is-rejected .dc-cut{opacity:.18}
/* compact variants */
.dcard-sm,.dcard-in{width:100%;padding:12px 14px;border-radius:14px}
.dcard-sm{box-shadow:var(--shadow-card)}
.dcard-in{box-shadow:inset 0 0 0 1px var(--line-2);background:var(--card)}
.dcard-sm .dc-k,.dcard-in .dc-k{font-size:10.5px}
.dcard-sm .dc-b,.dcard-in .dc-b{grid-template-columns:auto minmax(0,1fr);gap:18px;margin-top:10px}
.dcard-sm .dc-r>span:not(.dt),.dcard-in .dc-r>span:not(.dt){display:block;margin-top:3px;font-size:14px;color:var(--ink)}
.dcard-sm .dc-tc,.dcard-in .dc-tc{font-size:14px!important}
.dcard-sm .dt,.dcard-in .dt{font-size:10px!important}
.dcard-sm .dc-act,.dcard-in .dc-act{margin-top:10px;gap:8px}
.dcard-sm .dc-btn,.dcard-in .dc-btn{height:30px;padding:0 13px;font-size:12.5px;cursor:default}

/* ================= 2 · BEFORE / AFTER ================= */
.ba{position:relative;max-width:1140px;margin:80px auto 0}
.ba-row{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:32px}
.ba-l{display:flex;flex-direction:column}
.ba-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ba-l b{margin-top:4px;font-family:var(--display);font-weight:600;font-size:48px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ba-l small{margin-top:6px;font-size:14.5px;color:var(--muted)}
.ba-bar{position:relative;height:92px;border-radius:12px;overflow:hidden;background:var(--film);box-shadow:var(--frame-ring)}
.ba-strip{display:flex;height:100%}
.ba-strip svg,.ba-keep svg,.ba-clip svg,.sc-strip svg,.pp-strip svg{flex:none;height:100%;width:auto;aspect-ratio:16/9;display:block}
.ba-keep{position:absolute;top:0;bottom:0;display:flex;overflow:hidden;border-radius:5px;box-shadow:inset 0 0 0 2.5px var(--acc);opacity:0;z-index:3}
.ba-keep::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2.5px var(--acc)}
.ba-mid{display:flex;align-items:center;gap:26px;padding:34px 0 34px 192px;position:relative}
.ba-mid::before{content:"";position:absolute;left:192px;top:8px;bottom:8px;width:0;border-left:1.5px dashed var(--line-2);transform:translateX(-14px)}
.ba-brand{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.03em}
.ba-steps{display:flex;align-items:center;gap:30px;position:relative}
.ba-steps li{position:relative;display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.ba-steps li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background-color .3s var(--ease)}
.ba-steps li+li::after{content:"";position:absolute;right:100%;top:50%;width:30px;height:1.5px;background:var(--line-2)}
.ba-steps li.on{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--card)}
.ba-steps li.on::before{background:var(--ok)}
.ba-steps li.on+li::after,.ba-steps li.on::after{background:var(--ink)}
.ba-cut{width:42%;background:none;box-shadow:none;display:flex;gap:4px;overflow:visible}
.ba-clip{position:relative;display:flex;height:100%;border-radius:8px;overflow:hidden;background:var(--film);box-shadow:var(--frame-ring);transform-origin:0 50%}
.ba-cap{display:flex;align-items:center;gap:10px;margin:28px 0 0 192px;font-size:13.5px;color:var(--muted)}

/* ================= 3 · MANIFESTO ================= */
.mf-sec{position:relative;overflow:hidden}
.mf-pin{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(120px,18vh,200px) max(24px,4.4vw) 40px}
.mf-pinned .mf-pin{height:100vh;height:100svh;padding:calc(var(--nav-h) + 24px) max(24px,4.4vw) 28px}
.mf-ap{left:50%;top:50%;width:min(120vw,1200px);transform:translate(-50%,-50%)}
.mf-inner{position:relative;z-index:1;max-width:1200px;text-align:center;display:flex;flex-direction:column;align-items:center}
.mf-title{margin-top:22px;font-family:var(--display)}
.mf-a{display:block;font-weight:500;font-size:clamp(28px,min(3.3vw,5.4vh),54px);line-height:1.1;letter-spacing:-.035em;color:var(--muted)}
.mf-b{display:block;margin-top:.22em;font-weight:600;font-size:clamp(40px,min(5.6vw,8.6vh),96px);line-height:1.02;letter-spacing:-.05em;color:var(--ink);text-wrap:balance}
.mf-proof{margin-top:clamp(30px,5.5vh,64px);display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.mf-note{max-width:480px;font-size:16px;line-height:1.5;color:var(--muted)}

/* ================= 4 · THE LOOP ================= */
.lp .pl-head{grid-template-columns:1fr 400px;gap:56px}
.lp .pl-head .h2{font-size:54px;margin-top:16px;text-wrap:balance}
.lp .pl-head .lede{margin:0 0 6px;font-size:16.5px}
.lp .flow{margin-top:34px}
.lp .node b{font-size:18px;font-weight:600;font-family:var(--display);letter-spacing:-.025em}
.lp .node em{font-size:11px;color:var(--muted)}
.lp .node .nn{color:var(--muted)}
.lp .node{border-radius:10px;transition:color .3s var(--ease)}
.lp .node:hover .dot{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--paper)}
.lp .node.cur b{color:var(--ink)}
.lp .node.cur em{color:var(--acc-ink)}
.lp .node.cur .dot{background:var(--acc);box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--acc-soft)}
.flow-back{position:absolute;left:0;top:86px;width:100%;height:26px;overflow:visible;pointer-events:none}
.flow-back path{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:4 5}
.flow-back-l{position:absolute;top:99px;left:50%;transform:translateX(-50%);padding:0 12px;background:var(--paper);font-size:12.5px;color:var(--muted);white-space:nowrap;opacity:0}
.lp .pl-panels{margin-top:30px;height:392px}
.lp .pl-panel{grid-template-columns:minmax(0,1fr) 620px;gap:72px;align-items:center}
.lp .pl-k{font-size:11.5px}
.lp .pl-copy h3{font-size:46px;font-weight:600;letter-spacing:-.04em}
.lp .pl-copy>p{font-size:17.5px;max-width:420px;margin-top:18px}
.lp .pm{height:392px;padding:22px 24px;border-radius:20px}
.lp .pm-h{gap:12px;padding-bottom:14px;margin-bottom:12px}
.lp .pm-h b{font-size:15px;font-weight:600}
.sbadge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px 0 10px;border-radius:999px;background:var(--paper-2);font-family:var(--mono);font-size:11px!important;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)!important;white-space:nowrap}
.sbadge i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 1.4s var(--ease) infinite}
.sbadge.is-done i{background:var(--ok);animation:none}
/* 01 understand */
.ut{display:flex;flex-direction:column}
.ut li{display:grid;grid-template-columns:46px 28px minmax(0,1fr) auto;align-items:center;gap:12px;height:50px;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.ut time{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.ut span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk.s3{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--faint)}
.tg{font-style:normal;font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap}
.tg.key{background:var(--ink);color:var(--paper);box-shadow:none}
.tg.cut{background:var(--acc-soft);color:var(--acc-ink);box-shadow:none}
.ut-sum{display:flex;gap:24px;margin-top:auto;padding-top:14px;font-size:14px;color:var(--muted)}
.ut-sum b{font-family:var(--mono);font-weight:500;color:var(--ink);margin-right:4px}
/* 02 plan */
.pm-pl .dcard-in .dc-b{grid-template-columns:auto minmax(0,1fr) auto}
.pp-tl{margin-top:auto}
.pp-lane{position:relative;height:70px;border-radius:10px;overflow:hidden;background:var(--film)}
.pp-strip{display:flex;height:100%;opacity:.75}
.mk{position:absolute;top:0;bottom:0;border-radius:6px;font-style:normal;z-index:2}
.mk span{position:absolute;left:6px;top:5px;font-size:11px;font-weight:600;color:#fff;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.55);white-space:nowrap}
.mk-cut{background:repeating-linear-gradient(-45deg,rgba(var(--cut),.2) 0 6px,rgba(var(--cut),.55) 6px 7.5px);box-shadow:inset 0 0 0 2px var(--acc)}
.mk-cut span{background:var(--acc)}
.mk-key{box-shadow:inset 0 0 0 2px #fff}
.mk-br{box-shadow:inset 0 0 0 2px var(--ok);background:rgba(63,191,134,.14)}
.mk-br span{background:var(--ok)}
.pp-rl{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
/* 03 edit */
.lp .pt-row{margin-bottom:9px}
.lp .pt-row>span{font-size:11.5px;color:var(--muted)}
.lp .pt-lane{height:42px}
.lp .pt-v1{height:62px}
.pt-cc{height:30px!important}
.pt-cap{position:absolute;top:4px;bottom:4px;border-radius:5px;font-style:normal;font-size:11.5px;line-height:22px;padding:0 8px;background:var(--ink);color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp .pt-ph i::before{width:2px;left:-1px}
.lp .pm-foot{font-size:12px}
/* 04 generate */
.lp .pm-vis{padding:14px}
.lp .pv-chips span{font-size:12.5px}
.lp .pv-chips span.on{color:var(--paper);background:var(--ink)}
/* 05 verify */
.vf li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;height:42px;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.vf em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.ck{position:relative;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.ck.on{background:var(--ok);box-shadow:none}
.ck.on::after{content:"";position:absolute;left:7px;top:4px;width:4.5px;height:8.5px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.lp .xq{margin-top:auto}
.lp .xq li{grid-template-columns:24px 110px minmax(0,1fr) 96px;height:40px;gap:12px}
.lp .xq b{font-size:14px}
.lp .xq em{font-size:12px;white-space:nowrap}
.lp .xq em.ready{color:var(--ok);font-weight:500}
.lp .xq-bar i{background:var(--ink)}
.lp .xq li.ready .xq-bar i{background:var(--ok)}

/* ================= 5 · CAPABILITIES ================= */
.cg{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding:60px 0;border-top:1px solid var(--line);align-items:start}
.sec-head+.cg{margin-top:80px}
.cg-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cg-k b{color:var(--acc-ink);font-weight:500;margin-right:8px}
.cg-copy h3{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.cg-copy p{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--muted)}
.cg-viz{display:grid;gap:22px}
.cg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp .tile{background:none;box-shadow:none;border-radius:0;overflow:visible}
.lp .viz{margin:0;height:250px;border-radius:16px;background:var(--tint);box-shadow:none;padding:22px}
.lp .cg-3 .viz{height:220px}
.lp .tcopy{padding:16px 2px 0}
.lp .tk{display:block;margin:0;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.025em;text-transform:none;color:var(--ink)}
.lp .tcopy p{margin-top:4px;font-size:15px;color:var(--muted)}
.lp .tr-wave,.lp .se-q,.lp .lg-tabs{background:var(--card);box-shadow:none}
.lp .se-res,.lp .ex-row{box-shadow:none;background:var(--card)}
.lp .sil{height:96px;margin-top:20px}
.lp .t-cap .viz,.lp .t-rf .viz{padding:0;overflow:hidden}
/* generate */
.lp .t-gen .viz{height:300px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:center}
.gen-frame{position:relative;height:100%;border-radius:12px;overflow:hidden;background:var(--film)}
.gen-frame>svg{position:absolute;inset:0;width:100%;height:100%}
.gen-br{position:absolute;top:16px;right:16px;width:36%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px var(--ok),0 10px 24px -8px rgba(0,0,0,.6);z-index:2}
.gen-br svg{width:100%;height:100%;display:block}
.gen-br span{position:absolute;left:7px;bottom:6px;font-size:11px;font-weight:600;color:#fff;padding:1px 6px;border-radius:4px;background:var(--ok)}
.gen-l3{position:absolute;left:18px;bottom:22px;z-index:2;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}
.gen-l3 b{font-weight:600;font-size:14px;color:#fff;letter-spacing:-.01em}
.gen-l3 span{font-size:11.5px;color:rgba(255,255,255,.75)}
.gen-why{padding:18px;border-radius:14px;background:var(--card)}
.gen-k{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.gen-why p{margin-top:8px;font-size:16px;line-height:1.45;color:var(--ink);letter-spacing:-.012em}
.gen-acts{display:flex;gap:8px;margin-top:14px}
.gen-acts .dc-btn{height:32px;padding:0 14px;font-size:13px;cursor:default}
/* export */
.lp .ex-row{padding:12px}
.lp .ex-row+.ex-row{margin-top:12px}
.lp .xml-ico.sm{font-size:11px;letter-spacing:.08em}
.ex-st{flex:none;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted);min-width:96px;text-align:right;white-space:nowrap}
.ex-st.ready{color:var(--ok);font-weight:500}
.lp .ex-bar i{background:var(--ink)}
.lp .ex-row.ready .ex-bar i{background:var(--ok)}

/* ================= 6 · SCENARIOS ================= */
.scn{margin-top:80px;border-top:1px solid var(--line)}
.scx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center;padding:56px 0;border-bottom:1px solid var(--line);transition:background-color .3s var(--ease)}
.sc-who{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scx h3{margin-top:14px;font-family:var(--display);font-weight:600;font-size:clamp(28px,2.9vw,42px);line-height:1.1;letter-spacing:-.04em;text-wrap:balance}
.scx h3 em{font-weight:300}
.sc-arrow{color:var(--acc);font-weight:400}
.sc-prompt{margin-top:22px;padding-left:16px;border-left:2px solid var(--line-2);font-size:16px;line-height:1.5;color:var(--ink-2)}
.sc-prompt span{display:block;margin-bottom:4px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-viz{display:grid;gap:16px;justify-items:start}
.sc-in{position:relative;width:100%;height:50px;border-radius:9px;overflow:hidden;background:var(--film)}
.sc-strip{display:flex;height:100%;transition:opacity .3s}
.sc-lab{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sc-in>.sc-lab{position:absolute;z-index:3;right:8px;top:50%;transform:translateY(-50%);color:#fff;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.6)}
.sc-hl{position:absolute;top:0;bottom:0;z-index:2;border-radius:4px;box-shadow:inset 0 0 0 2px var(--acc),0 0 0 999px rgba(0,0,0,0);background:rgba(var(--cut),.12)}
.sc-out{display:flex;align-items:center;gap:14px;width:100%}
.sc-out>.sc-lab{flex:none;min-width:64px}
.sc-o{display:flex;gap:4px}
.sc-o i{position:relative;display:block;overflow:hidden;border-radius:7px;background:var(--film);box-shadow:var(--frame-ring)}
.sc-o i svg{position:absolute;inset:0;width:100%;height:100%}
.sc-o i span{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 8px 6px;font-size:11.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-story .sc-o{width:46%;height:66px}
.o-clips .sc-o{gap:10px}
.o-clips .sc-o i{width:44px;height:78px}
.o-clips .sc-o i::after{content:"";position:absolute;left:7px;right:7px;bottom:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.85)}
.o-chapters .sc-o{flex:1;height:66px;gap:3px}
.o-rough .sc-o{width:52%;height:66px}
.sc-takes{height:auto;background:none;overflow:visible;display:grid;gap:5px}
.sc-takes>.sc-lab{position:static;transform:none;color:var(--ink);background:none;padding:0;margin-bottom:2px}
.sc-tk{display:flex;gap:5px;height:30px}
.sc-tk i{position:relative;width:54px;border-radius:5px;overflow:hidden;background:var(--film);opacity:.55}
.sc-tk i svg{position:absolute;inset:0;width:100%;height:100%}
.sc-tk i.pick{opacity:1;box-shadow:0 0 0 2px var(--acc)}
.sc-dec{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:10px 16px;border-radius:12px;background:var(--card);box-shadow:var(--shadow-card);font-size:14.5px}
.sc-dec .dc-tc{font-size:14px!important}
.sc-why{color:var(--muted)}
.scn-note{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:13.5px;color:var(--muted)}

/* ================= 7 · WHY ================= */
.why-flows{max-width:1100px;margin:84px auto 0;display:grid;gap:56px}
.wf{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:start;row-gap:16px;position:relative}
.wf-l{grid-row:1 / span 2;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.03em;line-height:1.2;padding-top:0}
.wf-a .wf-l{color:var(--muted)}
.wf-n{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.wf-a .wf-n{width:calc(100% * 3 / 7)}
.wf-n::before{content:"";position:absolute;left:6px;right:calc(100% / var(--n,7) - 6px);top:5px;height:2px;border-radius:2px;background:var(--line-2)}
.wf-a .wf-n{--n:3}
.wf-n li{position:relative;display:flex;flex-direction:column;gap:12px;padding-right:8px}
.wf-n li i{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);position:relative;z-index:1;transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.wf-n li span{font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--muted);transition:color .3s var(--ease)}
.wf-b .wf-n li.on i{background:var(--ink);box-shadow:0 0 0 4px var(--paper)}
.wf-b .wf-n li.on span{color:var(--ink)}
.wf-b .wf-n li:last-child.on i{background:var(--ok)}
.wf-track{position:absolute;left:calc(180px + 6px);right:calc((100% - 180px) / 7 - 6px);top:5px;height:2px;z-index:0;pointer-events:none}
.wf-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--ink)}
.wf-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)}
.wf-note{grid-column:2;font-size:15px;color:var(--muted)}
.wf-b .wf-note{color:var(--ink)}
.why-pts{max-width:1100px;margin:96px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.why-pts li{padding:30px 32px 0 0}
.why-pts li+li{padding-left:32px;border-left:1px solid var(--line)}
.why-pts b{display:block;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.03em}
.why-pts p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--muted)}

/* ================= 8 · FAQ / 9 · CTA / footer ================= */
.lp .qa button{font-size:24px;transition:color .25s var(--ease)}
.lp .qa button:hover{color:var(--ink-2)}
.lp .faq-grid{grid-template-columns:minmax(280px,380px) 1fr}
.lp .outro{overflow:hidden}
.outro-ap{left:50%;top:min(20vh,200px);width:min(110vw,1100px);transform:translate(-50%,-22%)}
.lp .outro-inner{position:relative;z-index:1}
.lp .outro-title{font-size:clamp(56px,9.4vw,156px);letter-spacing:-.05em}
.lp .outro-sub{font-size:19px}
.lp .outro-note{font-size:13.5px;color:var(--muted)}
.lp .trust{color:var(--muted)}
.lp .foot{position:relative;z-index:1}
.lp .foot-brand small,.lp .foot-bot{color:var(--muted)}

/* ================= tablet ================= */
@media (max-width:1180px) and (min-width:768px){
  .cg{grid-template-columns:1fr}
  .cg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scx{grid-template-columns:1fr}
  .ba-row{grid-template-columns:120px minmax(0,1fr)}
  .ba-mid{padding-left:152px}.ba-mid::before{left:152px}.ba-cap{margin-left:152px}
  .ba-steps{gap:18px}.ba-steps li+li::after{width:18px}
}
@media (max-width:980px) and (min-width:768px){
  .cg-3{grid-template-columns:1fr 1fr}
}

/* ================= phones: their own compositions ================= */
@media (max-width:767px){
  .lp .eyebrow{font-size:11.5px;letter-spacing:.12em}
  .lp .sec{padding-top:112px}
  .lp .h2{font-size:clamp(36px,10.4vw,48px)}
  .lp .lede{font-size:16.5px}
  .lp .headline{font-size:var(--h1,min(12.6vw,80px))}
  .lp .sub{font-size:19px;margin-top:18px;padding:0 12px}
  .lp .hero-cta{margin-top:26px}
  .lp .hero-cta-row{flex-direction:column;align-items:stretch;width:min(320px,calc(100vw - 48px))}
  .lp .hero-cta-row .btn{width:100%;height:50px}
  .lp .hero-note{font-size:13px;padding:0 16px;flex-direction:column;gap:6px}
  .lp .hero-note>span[aria-hidden]{display:none}
  .ba{margin-top:52px}
  .ba-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .ba-l{flex-direction:row;align-items:baseline;gap:10px}
  .ba-l b{font-size:34px;margin:0}
  .ba-l small{margin:0}
  .ba-bar{height:64px}
  .ba-cut{width:60%}
  .ba-mid{flex-direction:column;align-items:flex-start;gap:14px;padding:28px 0 28px 18px}
  .ba-mid::before{left:0;transform:none}
  .ba-steps{flex-wrap:wrap;gap:10px}
  .ba-steps li{height:34px;padding:0 13px;font-size:14px}
  .ba-steps li+li::after{display:none}
  .ba-cap{margin-left:0}
  .mf-pin{padding:112px 20px 20px}
  .mf-a{font-size:26px}
  .mf-b{font-size:clamp(36px,10.6vw,48px)}
  .dcard-lg{padding:16px}
  .dcard-lg .dc-b{grid-template-columns:auto minmax(0,1fr);gap:14px 18px}
  .dcard-lg .dc-r:nth-child(2){grid-column:1 / -1;order:3}
  .dcard-lg .dc-act{justify-content:stretch}
  .dcard-lg .dc-btn{flex:1}
  .lp .pl-stack .pl-head .h2,.pl-stack .pl-head .h2{font-size:clamp(34px,9.6vw,46px)}
  .lp .pl-copy h3{font-size:34px}
  .lp .pl-copy>p{font-size:16.5px}
  .lp .pl-panel{display:block}
  .lp .pm{height:auto;padding:18px 16px}
  .ut li{grid-template-columns:40px minmax(0,1fr) auto;height:auto;min-height:48px;padding:6px 0}
  .ut .spk{display:none}
  .ut span{white-space:normal}
  .ut-sum{margin-top:12px;gap:16px;flex-wrap:wrap}
  .pm-pl .dcard-in .dc-b{grid-template-columns:auto minmax(0,1fr)}
  .pm-pl .dcard-in .dc-r:nth-child(3){display:none}
  .pp-tl{margin-top:16px}
  .vf li{font-size:14px}
  .vf em{display:none}
  .lp .xq{margin-top:12px}
  .lp .xq li{grid-template-columns:20px 74px minmax(0,1fr) 98px;gap:10px}
  .lp .xq em{font-size:11px}
  .cg{grid-template-columns:1fr;padding:44px 0;gap:24px}
  .sec-head+.cg{margin-top:52px}
  .cg-2,.cg-3{grid-template-columns:1fr}
  .lp .viz,.lp .cg-3 .viz{height:220px}
  .lp .t-gen .viz{height:auto;grid-template-columns:1fr;padding:14px}
  .gen-frame{height:auto;aspect-ratio:16/9}
  .ex-st{min-width:72px}
  .scn{margin-top:52px}
  .scx{grid-template-columns:1fr;gap:24px;padding:40px 0}
  .o-story .sc-o,.o-rough .sc-o{width:62%;height:54px}
  .o-chapters .sc-o{height:54px}
  .o-chapters .sc-o i span{font-size:10px;padding:10px 4px 4px}
  .o-clips .sc-o{gap:6px}
  .o-clips .sc-o i{width:36px;height:64px}
  .sc-tk i{width:44px}
  .why-flows{margin-top:52px;gap:40px}
  .wf{grid-template-columns:1fr}
  .wf-l{grid-row:auto}
  .wf-n,.wf-a .wf-n{grid-auto-flow:row;width:auto;gap:14px;padding-left:2px}
  .wf-n::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .wf-n li{flex-direction:row;align-items:center;gap:14px}
  .wf-track{display:none}
  .wf-note{grid-column:1}
  .why-pts{grid-template-columns:1fr;margin-top:56px}
  .why-pts li,.why-pts li+li{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .why-pts li:first-child{border-top:0}
  .lp .qa button{font-size:21px}
  .lp .faq-grid{display:block}
}
@media (prefers-reduced-motion:reduce){
  .ed-state i,.sbadge i{animation:none}
  .dc-cut,.lp .btn,.dc-btn{transition:none}
}

/* visible-by-default: demo end states show even if scripts never run (JS resets them to their start state) */
.lp .xq-bar i,.lp .ex-bar i{transform:scaleX(1)}
.lp .pv-broll,.lp .pv-l3,.lp .pv-cap span,.lp .se-res{opacity:1}
.lp .xq em.ready,.lp .ex-st.ready{color:var(--ok)}
.mba-bar{display:flex;gap:1px}
.mba-bar svg{flex:none;height:100%;width:auto;aspect-ratio:16/9;display:block}
.mba-cut i svg{width:100%;height:100%;display:block}
.lp .pt-vc.lift{box-shadow:0 0 0 2px var(--acc),0 12px 22px -8px rgba(0,0,0,.55)}
.lp .nav.scrolled{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.lp.pl-stack .pl-panels{height:auto;margin-top:48px}
.lp.pl-stack .pm{height:auto}
.lp .pl-short .pl-head .h2{font-size:46px}
.lp .pl-short .flow{margin-top:24px}
.lp .pl-short .pl-panels{margin-top:22px;height:364px}
.lp .pl-short .pm{height:364px;padding:18px 22px}
.lp .pl-short .ut li{height:44px}
.lp .editor.compact .ed-body{display:block;padding:0 10px}
.lp .editor.compact .ed-mobile{padding-top:4px}

/* =========================================================
   round 5: real footage, cinema, legibility
   ========================================================= */
.lp .sec{padding-top:clamp(140px,22vh,240px)}
.lp-vid{display:block;background:#000}
/* ---------- hero: footage in the monitor ---------- */
.fvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lp .frame::after{opacity:.1}
.lp .frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 26%,transparent 62%,rgba(0,0,0,.42))}
.fscan{position:absolute;top:0;bottom:0;left:0;z-index:2;width:34%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 80%,rgba(255,255,255,.7) 99%,transparent);mix-blend-mode:screen}
.fstory{display:none}
.lp .ftag{font-size:12.5px}
.ftc{font-size:12.5px}
.lp .rl span{font-size:12.5px}
.lp .tl-gutter span{font-size:12.5px}
.lp .ccap{font-size:12.5px}
.tl-sel{font-size:12.5px}
.lp .ed-bar .ex-tag,.lp .dir-h .ex-tag{height:22px;font-size:12px}
.lp .ex-tag{height:22px;font-size:11.5px}
.dir-h b{font-size:15.5px}
.dir-k{font-size:12.5px}
.dir-checks li{height:32px;font-size:15px}
.dir-checks li b{font-size:14.5px}
.dir-checks li.is-flag.done>.st{background:var(--acc)}
.dir-checks li.is-flag.done{color:var(--acc-ink)}
.dir-checks li.is-hook.done span{box-shadow:inset 0 -2px 0 var(--acc-soft)}
.dir-sec{padding:14px 20px 4px}
.dir-plan li{padding:6px 0;font-size:14.5px}
.dir-plan .n{font-size:12.5px}
.dir-foot{font-size:14px}
/* candidate moments + flags on the raw recording */
.cands,.flags{position:absolute;inset:0;z-index:3;pointer-events:none}
.cands i{position:absolute;top:6px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.45);opacity:0}
.flags i{position:absolute;top:0;bottom:0;border-radius:5px;opacity:0;background:repeating-linear-gradient(-45deg,rgba(var(--cut),.22) 0 6px,rgba(var(--cut),.6) 6px 7.5px);box-shadow:inset 0 0 0 2px var(--acc)}
.flags b{position:absolute;left:0;bottom:calc(100% + 4px);font-size:12.5px;font-weight:600;line-height:1;color:#fff;padding:3px 7px;border-radius:4px;background:var(--acc);white-space:nowrap}
.lp .lane-v{overflow:visible}
/* phones: the footage frame stays; the story list and then the decision share one slot under it */
.lp .editor.compact .ed-monitor{display:block}
.lp .editor.compact .frame{border-radius:12px}
.m-slot{display:grid}
.m-slot>*{grid-area:1 / 1}
.m-story{align-self:stretch;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
.m-sk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.m-sk i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);animation:pulse 1.4s var(--ease) infinite}
.m-story ol{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.m-story li{font-size:13.5px;line-height:20px;color:var(--ink)}
.m-story li b{font-family:var(--mono);font-weight:500}
.m-story li.fl{color:var(--acc-ink)}
.m-story li.hk{font-weight:600}
.lp .editor.compact .ftag{font-size:11.5px;padding:4px 8px}
.lp .editor.compact .fcap span{font-size:15px}
.lp .editor.compact .ed-mobile{gap:10px}
.mba-k{font-size:11.5px}
.dcard-sm .dc-k,.dcard-in .dc-k{font-size:11.5px}
.dcard-sm .dt,.dcard-in .dt{font-size:11.5px!important}
.lp .editor.compact .ed-state{font-size:11.5px}
/* ---------- loop + tiles: nothing under 12px ---------- */
.sbadge{font-size:12px!important}
.lp .node em{font-size:12px}
.lp .pl-k{font-size:12.5px}
.ut time{font-size:12.5px}
.tg{font-size:12.5px}
.mk span{font-size:12px}
.pp-rl{font-size:12px}
.lp .pt-row>span{font-size:12px}
.pt-cap{font-size:12.5px;line-height:22px}
.lp .pm-foot{font-size:13px}
.vf em{font-size:12.5px}
.gen-br span{font-size:12px}
.gen-l3 span{font-size:12.5px}
.gen-k{font-size:12.5px}
.lp .xml-ico.sm{font-size:12px}
.sc-prompt span{font-size:12px}
.sc-o i span{font-size:12.5px}
.dc-r dt,.dc-r .dt{font-size:12px}
.flow-back-l{font-size:13px}
/* ---------- 3 · before / after: one statement + the footage moment ---------- */
.ba-mid{gap:14px}
.ba-brand{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--muted)}
.ba-brand .ef-word{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);margin-right:6px}
.mo{max-width:1140px;margin:clamp(80px,12vh,140px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mo-f{margin:0}
.mo-v{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--frame-ring);transition:box-shadow .4s var(--ease)}
.mo-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo-hatch{position:absolute;inset:0;z-index:1;border-radius:inherit;opacity:1;background:repeating-linear-gradient(-45deg,rgba(var(--cut),.14) 0 12px,rgba(var(--cut),.4) 12px 14px);box-shadow:inset 0 0 0 3px var(--acc)}
.mo-tag{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:5px 10px;border-radius:6px;background:rgba(0,0,0,.55)}
.mo-cut .mo-tag{background:var(--acc)}
.mo-keep .mo-tag{background:var(--ok)}
.mo-keep.on .mo-v{box-shadow:0 0 0 3px var(--ok),0 24px 48px -24px rgba(0,0,0,.5)}
.mo-cap{position:absolute;left:0;right:0;bottom:18px;z-index:2;padding:0 20px;text-align:center;font-weight:600;font-size:clamp(15px,1.5vw,20px);line-height:1.25;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.5)}
.mo-f figcaption{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:15.5px;line-height:1.45;color:var(--muted)}
.mo-f figcaption .dc-tc{color:var(--ink);font-size:15px!important}
.mo-note{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13.5px;color:var(--muted)}
/* ---------- final CTA: the finished story ---------- */
.outro-grid{position:relative;z-index:1;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:center;text-align:left}
.lp .outro-grid .outro-title{font-size:clamp(56px,7.4vw,128px)}
.outro-grid .outro-cta{align-items:flex-start}
.outro-grid .outro-btns{justify-content:flex-start}
.outro-grid .trust{justify-content:flex-start;margin-top:56px}
.outro-grid .trust span:first-child{padding-left:0}
.outro-out{margin:0}
.oo-v{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.55)}
.oo-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oo-v .crop{inset:14px}
.oo-fmt{position:absolute;right:14px;top:14px;z-index:3;font-family:var(--mono);font-size:12px;font-weight:500;color:#fff;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.5)}
.outro-out figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
@media (max-width:1023px){
  .outro-grid{grid-template-columns:1fr;text-align:center;gap:56px}
  .outro-out{order:2;width:min(240px,62vw);margin:0 auto}
  .outro-out figcaption{justify-content:center}
  .outro-grid .outro-cta{align-items:center}
  .outro-grid .outro-btns{justify-content:center}
  .outro-grid .trust{justify-content:center}
  .outro-grid .trust span:first-child{padding-left:16px}
}
@media (max-width:767px){
  .lp .sec{padding-top:128px}
  .mo{grid-template-columns:1fr;gap:36px;margin-top:72px}
  .mo-tag{font-size:11.5px;left:10px;top:10px}
  .mo-cap{font-size:15px;bottom:12px}
  .ba-mid{padding:24px 0 24px 18px}
  .lp .outro-grid .outro-title{font-size:clamp(48px,14vw,72px)}
  .outro-grid .trust{flex-direction:column;align-items:center}
  .outro-grid .trust span:first-child{padding-left:0}
  .o-chapters .sc-o i span{font-size:11px}
  .lp .xq em{font-size:11.5px}
  .vf li{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.mo-v{transition:none}}
/* hero: kept moments ring white so they never read as the red flags */
.lp .kring{box-shadow:inset 0 0 0 2px #fff,0 0 0 1px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.m-sk i{animation:none}}
/* legibility floor: mock UI text is at least ~12px rendered on desktop and ~11px on phones.
   The hero editor is scaled to fit (down to ~0.88 at 1280x720), so its small text is set at 13.5px+. */
.lp .ed-bar .ex-tag,.lp .dir-h .ex-tag{font-size:13px;height:24px}
.lp .ed-state{font-size:13.5px}
.lp .ebtn{font-size:14px}
.lp .ftag{font-size:13.5px}
.lp .ftc{font-size:13.5px}
.lp .tl-head>b{font-size:14px}
.lp .tl-sel{font-size:13.5px}
.lp .tl-head .tc{font-size:13.5px}
.lp .tl-gutter span{font-size:13.5px}
.lp .rl span{font-size:13px}
.lp .flags b{font-size:13.5px}
.lp .ccap{font-size:13.5px}
.lp .dir-k{font-size:13.5px}
.lp .dir-plan .n{font-size:13.5px}
.lp .dir-plan li{font-size:15px}
.lp .dir-foot{font-size:14.5px}
.lp .spk{font-size:12px}
.lp .pm-h .tc{font-size:12.5px}
.lp .pv-broll span{font-size:12px}
.lp .pv-l3 span{font-size:12.5px}
.lp .pt-clip{font-size:12px}
.lp .tr-lines time{font-size:12px}
.lp .sil-meta{font-size:12px}
.lp .sil b{font-size:12px}
.lp .se-chips span{font-size:12.5px}
.lp .se-res small{font-size:12px}
.lp .rf-lab{font-size:12px}
.lp .rf-ratios span{font-size:12.5px}
.lp .lg-tabs span{font-size:12.5px}
.lp .dia-l span{font-size:12px}
.lp .ex-row small{font-size:12px}
.lp .dcard-in .dc-k,.lp .dcard-sm .dc-k{font-size:12px}
.lp .dcard-in .dt,.lp .dcard-sm .dt{font-size:12px!important}
.lp .sc-dec .dc-k{font-size:12.5px}
.lp .oo-fmt{font-size:12.5px}
@media (max-width:767px){
  .lp .pv-l3 span{font-size:11.5px}
  .lp .o-chapters .sc-o i span{font-size:11.5px}
  .lp .editor.compact .ftag{font-size:12px}
  .lp .editor.compact .ed-state{font-size:12px}
  .lp .m-sk,.lp .mba-k{font-size:12px}
  .lp .dcard-sm .dc-k,.lp .dcard-sm .dt{font-size:12px!important}
}
.lp .ex-tag{font-size:12px}
.lp .ed-bar .ex-tag,.lp .dir-h .ex-tag{font-size:13.5px}
.lp .rl span{font-size:13.5px}
.lp .ed-state{font-size:14px}
.sbadge{font-size:13px!important;height:28px}
.lp .spk{font-size:12.5px}
.lp .ut time{font-size:13px}
.lp .tg{font-size:13px}
.lp .dcard-in .dc-k,.lp .dcard-in .dt{font-size:12.5px!important}
.lp .mk span{font-size:12.5px}
.lp .pv-broll span,.lp .gen-br span{font-size:12.5px}
.lp .sil-meta{font-size:12.5px}
.lp .rf-lab{font-size:12.5px}
@media (max-width:767px){
  .lp .editor.compact .ftag,.lp .editor.compact .ed-state,.lp .m-sk,.lp .mba-k,.lp .dcard-sm .dc-k,.lp .dcard-sm .dt{font-size:12.5px!important}
  .lp .dcard-sm .dc-r>span:not(.dt),.lp .m-story li{font-size:14px}
}
.vth{flex:none;display:block;height:100%;aspect-ratio:16/9;background:#1a1a1a 50% 50%/cover no-repeat;box-shadow:inset -1px 0 0 rgba(0,0,0,.35)}
.mba-bar .vth{height:100%}
.mba-cut i .vth{width:100%;aspect-ratio:auto}
.m-slot>.dcard{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
/* phones: the stacked loop never takes the pinned desktop's fixed panel heights */
.lp.pl-stack .pl-panels,.lp.pl-stack .pl-short .pl-panels{height:auto}
.lp.pl-stack .pm,.lp.pl-stack .pl-short .pm{height:auto}

/* ================= round 6: loop-tied capabilities, Deliver after Verify, FAQ technical details, closing statement ================= */
/* capabilities: one rail for the loop; Understand / Edit / Generate sit on it, Plan and Verify are named steps, Deliver is outside */
.cl{position:relative;margin-top:88px;padding-left:72px}
.cl-rail{position:absolute;left:15px;top:6px;bottom:34px;width:2px;border-radius:2px;background:var(--line-2)}
.cl-rail b{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);border-radius:2px;background:var(--ink)}
.cl-tag{position:relative;margin:0 0 10px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cl-tag span{position:relative}
.cl-tag::before{content:"";position:absolute;left:-63px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.cl .cg{position:relative;border-top:0;padding:56px 0 64px;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:clamp(36px,5vw,88px)}
.cl-node{position:absolute;left:-72px;top:56px;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2),0 0 0 6px var(--paper);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.cl-node.on{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 6px var(--paper)}
.cl-step{position:relative;padding:22px 0 26px}
.cl-step .cl-node{top:18px}
.cl-step p{max-width:620px;font-size:clamp(18px,1.5vw,21px);line-height:1.45;letter-spacing:-.015em;color:var(--muted)}
.cl-step p b{font-family:var(--display);font-weight:600;color:var(--ink)}
.cg-list{margin-top:22px;border-top:1px solid var(--line)}
.cg-list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:17.5px;line-height:1.35;letter-spacing:-.012em;color:var(--ink-2)}
.lp .cl .viz,.lp .cg-deliver .viz{height:300px}
.tile-ex{margin-top:12px}
.lp .t-rf .viz{padding:0;overflow:hidden}
.rf-frame.rf-photo{background:#111 url(/ef/landing/media/loop-shot-c.jpg?v=s1) 50% 40%/cover no-repeat}
/* generate: each generated element answers a need the plan found */
.lp .t-need .viz{height:auto;min-height:300px;padding:18px;display:flex;align-items:center}
.nd{width:100%;display:grid;gap:12px}
.nd li{display:grid;grid-template-columns:minmax(0,1fr) 44px 128px;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;background:var(--card)}
.nd-why{font-size:16px;line-height:1.35;letter-spacing:-.012em;color:var(--ink)}
.nd-why time{display:block;margin-bottom:4px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.nd-ar{position:relative;height:2px;background:var(--ink-3);transform-origin:0 50%}
.nd-ar::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:rotate(45deg)}
.nd-out{justify-self:start;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.nd-out.on{background:var(--ink);color:var(--paper);box-shadow:none}
/* deliver: outside the loop, after Verify */
.cg.cg-deliver{position:relative;margin-top:44px;padding:56px 48px 48px;border-top:0;border-radius:26px;box-shadow:inset 0 0 0 1px var(--line-2);grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:clamp(36px,5vw,88px)}
.cd-after{position:absolute;left:40px;top:-12px;display:inline-flex;align-items:center;gap:10px;padding:0 12px;background:var(--paper);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cd-after i{width:14px;height:14px;border-left:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);border-radius:0 0 0 6px;transform:translateY(-4px)}
.cg-deliver .cg-k{color:var(--muted)}
.cg-deliver .cg-copy h3{font-size:clamp(26px,2.3vw,34px)}
.ex-th{width:72px;height:41px;flex:none;border-radius:5px;background:#111 url(/ef/landing/media/loop-shot-c.jpg?v=s1) 50% 40%/cover}
/* loop: a corner label on the generate frame */
.pv-ex{position:absolute;left:12px;top:12px;z-index:5;color:#fff!important;background:rgba(0,0,0,.55);box-shadow:none!important}
.pm-h .ex-tag{color:var(--muted)}
/* mobile hero: labels inside the composition */
.m-sk .ex-tag{margin-left:auto}
.dcard-sm .dc-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* scenarios: an Example label on every scenario */
.sc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
/* FAQ: technical specifics behind one disclosure */
.tech{margin-top:36px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line-2)}
.tech summary{list-style:none;display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;border-radius:18px}
.tech summary::-webkit-details-marker{display:none}
.tech summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tech-t{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.tech-h{margin-right:auto;font-size:14px;color:var(--muted)}
.tech summary:hover .pm-ico{background:var(--paper-2)}
.tech[open] .pm-ico::after{transform:rotate(0deg)}
.tech-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;padding:4px 22px 24px}
.tech-dl div{padding-top:12px;border-top:1px solid var(--line)}
.tech-dl dt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tech-dl dd{margin:5px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:1180px) and (min-width:768px){
  .cl .cg,.cg.cg-deliver{grid-template-columns:1fr}
}
@media (max-width:767px){
  .cl{margin-top:56px;padding-left:46px}
  .cl-rail{left:11px}
  .cl-tag::before{left:-41px}
  .cl-node{left:-46px;top:44px;width:24px;height:24px;font-size:11px;box-shadow:inset 0 0 0 1.5px var(--line-2),0 0 0 5px var(--paper)}
  .cl-node.on{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 5px var(--paper)}
  .cl .cg{grid-template-columns:1fr;gap:24px;padding:44px 0 48px}
  .cl-step{padding:18px 0 22px}
  .cl-step .cl-node{top:16px}
  .cl-step p{font-size:17px}
  .cg-list li{font-size:16px;padding:11px 0}
  .lp .cl .viz,.lp .cg-deliver .viz{height:240px}
  .lp .t-need .viz{min-height:0;padding:12px}
  .nd li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"why why" "ar out";gap:10px 12px;padding:14px}
  .nd-why{grid-area:why;font-size:15px}
  .nd-ar{grid-area:ar;width:100%}
  .nd-out{grid-area:out;height:30px;font-size:13px}
  .cg.cg-deliver{grid-template-columns:1fr;gap:24px;margin-top:36px;padding:40px 18px 20px;border-radius:20px}
  .cd-after{left:18px}
  .lp .cg-deliver .t-ex .viz{height:auto;padding:14px}
  .tech summary{padding:18px}
  .tech-h{display:none}
  .tech-t{margin-right:auto;font-size:18px}
  .tech-dl{grid-template-columns:1fr;padding:0 18px 20px;gap:14px}
}
.tile-ex{align-self:flex-start}
.lp .cg-deliver .t-ex .viz{height:auto;padding:20px}
@media (max-width:767px){
  .lp .cl .t-need .viz{height:auto}
  .lp .cg-deliver .t-ex .viz{padding:10px}
  .cg.cg-deliver{padding:40px 14px 18px}
  .cg-deliver .ex-row{gap:10px;padding:10px}
  .cg-deliver .ex-th,.cg-deliver .xml-ico.sm{width:52px;height:30px}
  .cg-deliver .ex-st{min-width:0;font-size:12px}
  .cg-deliver .ex-row small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* loop line: ends at Verify; Deliver sits after it on a dashed line */
.flow-out{position:absolute;top:5px;height:0;border-top:2px dashed var(--line-2);transition:border-color .35s var(--ease)}
.flow-out.lit{border-top-color:var(--ink)}
.lp .pm-vf .vf li{height:54px;font-size:16px}
.cl .cg>*,.cg.cg-deliver>*{min-width:0}
.cg-deliver .ex-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.cg-deliver .ex-th,.cg-deliver .xml-ico.sm{display:none}}
/* first paint with scripts on: pinned hero layout, editor hidden until GSAP has placed it */
.hero-pre .ed-pos{visibility:hidden}
/* contrast: small white labels sit on deeper fills (≥4.5:1 in both themes); light-theme faint text darkened for tinted panels */
.lp{--faint:#666666;--label-cut:#B8331F;--label-ok:#1B7A52}
[data-theme="dark"] .lp,[data-theme="dark"].lp, .ef-landing[data-theme="dark"] .ef-landing.lp{--faint:#8C8C8C}
.mo-cut .mo-tag,.mk-cut span{background:var(--label-cut)}
.mo-keep .mo-tag,.mk-br span,.gen-br span{background:var(--label-ok)}
.dc-btn[aria-pressed="true"].dc-accept,.dc-btn.dc-accept.is-on{background:var(--label-ok);color:#fff}
.lp .pm-h .ex-tag{font-size:12.5px;height:22px}
@media (max-width:767px){.lp .ed-mobile .ex-tag{font-size:12.5px;height:22px}}

/* ---------- 2 · "It watched 47 minutes": the reading (stays dark in both themes: it is footage) ---------- */
.rd{position:relative;background:#050505;color:#fff}
.rd-pin{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.rd-in{width:min(1240px,100%);margin:0 auto;padding:calc(var(--nav-h,64px) + 20px) clamp(16px,4vw,48px) 28px;display:flex;flex-direction:column;gap:clamp(10px,2vh,24px)}
.rd-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#c8c8c8}
.rd-ex{display:flex;align-items:center;gap:10px}
.rd .ex-tag{color:#fff;background:#262626;box-shadow:none}
.rd-clock{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#c8c8c8}
.rd-clock span{color:#fff}
.rd-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:stretch}
.rd-mon{position:relative;aspect-ratio:16/9;max-height:38vh;width:100%;border-radius:14px;overflow:hidden;background:#111;outline:1px solid #2a2a2a}
.rd-mon video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rd-side{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.rd-kick{margin:0;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#a3a3a3}
.rd-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rd-note{display:grid;grid-template-columns:4.2em 1fr;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid #262626;font-size:15.5px;line-height:1.35;color:#fff}
.rd-note:last-child{border-bottom:1px solid #262626}
.rd-t{font-family:var(--mono);font-size:13px;color:#c8c8c8;font-variant-numeric:tabular-nums}
.rd-note.is-cut .rd-n{text-decoration:line-through;text-decoration-color:#8a8a8a;text-decoration-thickness:1px}
.rd-strip{position:relative;height:clamp(48px,7vh,64px);border-radius:10px;overflow:hidden;outline:1px solid #2a2a2a;background:#0d0d0d}
.rd-track{position:absolute;top:0;bottom:0;left:0;width:100%;will-change:transform,width}
.rd-frames{position:absolute;inset:0;display:flex;gap:2px}
.rd-frames i{flex:1 1 0;min-width:0;background-size:cover;background-position:center}
/* one static dim layer instead of filter:brightness() on 24 frames, so the per-frame width/transform scrub doesn't re-filter every tile */
.rd-frames::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
.rd-read{position:absolute;top:0;bottom:0;left:0;width:0;pointer-events:none;box-shadow:inset 0 -3px 0 #fff}
.rd-cutzone{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(0,0,0,.75) 0 4px,rgba(0,0,0,.2) 4px 8px);outline:1px dashed #9a9a9a;outline-offset:-1px;opacity:0}
.rd-mk{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;opacity:0}
.rd-mk::after{content:"";position:absolute;top:4px;left:-4px;width:10px;height:10px;border-radius:50%;background:#fff}
.rd-mk.is-cut{background:#9a9a9a}.rd-mk.is-cut::after{background:#050505;box-shadow:inset 0 0 0 2px #9a9a9a}
.rd-head{position:absolute;top:-2px;bottom:-2px;left:0;width:2px;margin-left:-1px;background:#fff}
.rd-copy{text-align:center;padding-top:clamp(4px,1.5vh,16px)}
.rd .cine-title{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(34px,min(5.4vw,7.6vh),92px);line-height:1;letter-spacing:-.045em;color:#fff;text-wrap:balance}
.rd .cine-title .line{display:block;overflow:hidden;padding:0 .04em .09em}
.rd .cine-title .line>span{display:inline-block}
.rd .cine-title em{font-weight:300}
.rd .cine-sub{margin:14px auto 0;max-width:34em;font-family:var(--sans,Inter,system-ui,sans-serif);font-size:clamp(15.5px,1.3vw,19px);line-height:1.45;color:#d4d4d4;text-wrap:balance}
.rd-credit{margin:0;font-size:12px;color:#a3a3a3;text-align:right}
@media (max-width:1023px){.rd-note{font-size:14.5px;padding:8px 0}}
@media (max-width:767px){
  .rd-in{padding-top:calc(var(--nav-h,64px) + 14px);gap:12px}
  .rd-top{font-size:12px}
  .rd-stage{grid-template-columns:1fr;gap:12px}
  .rd-mon{max-height:none;border-radius:12px}
  .rd-side{gap:6px}.rd-kick{display:none}
  .rd-note{font-size:13.5px;padding:6px 0;grid-template-columns:3.8em 1fr;gap:10px}
  .rd-t{font-size:12px}
  .rd-strip{height:44px}
  .rd .cine-title{font-size:clamp(30px,8.6vw,40px)}
  .rd .cine-sub{font-size:14.5px;margin-top:10px}
  .rd-credit{text-align:left;font-size:11.5px}
}
.rd-live .rd-kick{font-variant-numeric:tabular-nums}
.rd-live .rd-note{min-height:2.7em}
@media (max-width:767px){.rd-live .rd-note{min-height:2.35em}}

/* ---------- footage bands + raw-material strip (Mixkit, see media/CREDITS.md) ---------- */
.fb{padding:clamp(24px,4vw,56px) clamp(12px,2.4vw,32px)}
.fb-frame{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:21/9;background:#0a0a0a}
.fb-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--fb-s,1));will-change:transform}
.fb-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 72%)}
.fb--right .fb-scrim{background:linear-gradient(270deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.52) 44%,rgba(0,0,0,0) 74%)}
.fb-line{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(20px,5vw,64px);margin:0;max-width:min(560px,52%);font-family:var(--display);font-weight:600;font-size:clamp(26px,3.6vw,54px);line-height:1.06;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.fb-line em{font-style:normal;color:#e5e5e5}
.fb--right .fb-line{left:auto;right:clamp(20px,5vw,72px);text-align:right}
.fb--bottom .fb-scrim,.fb--bottom.fb .fb-scrim{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.3) 50%,rgba(0,0,0,0) 70%)}
.fb--bottom .fb-line{max-width:min(760px,70%)}
#bandCreator video{object-position:50% 45%}
#bandEdit video{object-position:62% 50%}
.srcs{margin:clamp(28px,4vw,48px) 0 18px}
.srcs-k{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#a3a3a3)}
.srcs-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.src{position:relative;margin:0}
.src-v{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:4/5;background:#0a0a0a}
.src-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.src-l{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.76);color:#fff;font-size:13px;font-weight:500}
@media (max-width:767px){
  .fb{padding:20px 12px}
  .fb-frame{aspect-ratio:4/5;border-radius:20px}
  .fb-scrim,.fb--right .fb-scrim{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 70%)}
  .fb-line,.fb--right .fb-line{left:18px;right:18px;bottom:20px;max-width:none;text-align:left;font-size:clamp(24px,7vw,32px)}
  #bandCreator video{object-position:60% 50%}
  #bandEdit video{object-position:80% 50%}
  .srcs-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .src{scroll-snap-align:start}
}

/* W1 interview footage is a bright white room: give burned-in captions a subtitle box so they stay legible */
.mo-cap{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:88%;padding:4px 12px;border-radius:6px;background:rgba(0,0,0,.62)}
.lp .fcap span{padding:3px 10px;border-radius:6px;background:rgba(0,0,0,.62)}
/* manifesto on phones: .mf-inner is a shrink-to-fit flex item, so the decision card's filmstrip (a row of fixed 16:9
   thumbs, ~1000px of max-content) set its width and pushed the headline and card past both edges. Pin it to the
   container; the strip is already clipped by .dc-tl overflow:hidden. */
@media (max-width:767px){
  .mf-inner{width:100%;min-width:0}
  .mf-inner .dcard{max-width:100%}
  .mf-inner .mf-b,.mf-inner .mf-a{overflow-wrap:break-word}
}