/* Nenya product page, version 2 (local preview, 2026-10-09). Visual-first; uses the site's tokens. */

.nv2-split{--nv-b:0;--nv-a:0}
.nv2 h3{font-weight:500;font-size:var(--fs-h3);letter-spacing:-.01em;margin:0 0 14px}
.nv2 .btn.ghost{border:1px solid var(--line,rgba(238,234,227,.3))}

/* 1. Hero */
.nv2-hero{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;overflow:hidden}
.nv2-hero .wrap{position:relative;z-index:1;width:100%}
.nv2-eyebrow{color:var(--mut);margin:0 0 12px}
.nv2-word{font-weight:500;font-size:clamp(110px,24vw,380px);line-height:.82;letter-spacing:-.065em;margin:0}
.nv2-dot{color:var(--verm);display:inline-block;animation:nv2-pulse 2.4s var(--ease) infinite}
@keyframes nv2-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.nv2-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,48px)}
.nv2-hero-field{position:absolute;inset:0;pointer-events:none}
.nv2-hero-field span{position:absolute;left:-30%;height:1px;width:60%;background:linear-gradient(90deg,transparent,rgba(238,234,227,.35),transparent);animation:nv2-run 9s linear infinite}
.nv2-hero-field span:nth-child(1){top:18%;animation-delay:-1s}
.nv2-hero-field span:nth-child(2){top:34%;animation-delay:-4s;animation-duration:12s}
.nv2-hero-field span:nth-child(3){top:62%;animation-delay:-6s}
.nv2-hero-field span:nth-child(4){top:78%;animation-delay:-2s;animation-duration:14s}
.nv2-hero-field span:nth-child(5){top:90%;animation-delay:-8s;animation-duration:10s}
@keyframes nv2-run{to{transform:translateX(220%)}}

/* 2. Statement that splits (scroll-driven: JS sets --a and --b from 0 to 1) */
.nv2-split{position:relative;height:170vh}
.nv2-split-stick{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden;display:grid;place-items:center}
.nv2-half{display:none}
.nv2-split-stick::after{content:"";position:absolute;left:50%;top:18%;bottom:18%;width:1px;background:var(--line);transform:scaleY(var(--nv-b))}
.nv2-half-l{left:0;background:var(--verm);transform-origin:right center}
.nv2-half-r{right:0;background:var(--chalk);transform-origin:left center}
.nv2-line{position:relative;z-index:1;width:100%;margin:0;text-align:center;font-weight:500;font-size:clamp(34px,4.8vw,76px);line-height:1;letter-spacing:-.04em}
.nv2-lead{display:block;opacity:calc(1 - var(--nv-a));transform:translateY(calc(var(--nv-a) * -40px))}
.nv2-work{position:absolute;left:50%;bottom:-1.1em;display:grid;white-space:nowrap;color:inherit}
.nv2-work>span{grid-area:1/1;justify-self:center}
.nv2-work .a{opacity:calc((.7 - var(--nv-b)) * 6.67)}
.nv2-work .b{opacity:calc((var(--nv-b) - .6) * 5);font-size:.62em;align-self:center}
.nv2-work-l{transform:translate(calc(-50% - var(--nv-b) * 25vw),calc(var(--nv-a) * -.55em)) scale(calc(1 + var(--nv-a) * .25))}
.nv2-work-r{transform:translate(calc(-50% + var(--nv-b) * 25vw),calc(var(--nv-a) * -.55em)) scale(calc(1 + var(--nv-a) * .25))}

/* 3. The two panels. Each card is a looping film of one job, without and with Nenya (built by js/nenya-v2.js) */
.nv2-panels{position:relative;display:grid;grid-template-columns:1fr 1fr}
.nv2-panels::before{content:"";position:absolute;left:50%;top:0;bottom:clamp(56px,7vw,104px);width:1px;background:var(--line)}
.nv2-panel{padding:clamp(40px,5vw,72px) clamp(20px,3.4vw,56px) clamp(56px,7vw,104px);display:grid;gap:clamp(28px,3vw,44px);align-content:start}
.nv2-panel{gap:clamp(36px,4vw,56px)}
.nv2-panel-h{margin:0;font-weight:500;font-size:calc(clamp(34px,4.8vw,76px) * .62);line-height:1;letter-spacing:-.045em}
.nv2-panel-sub{margin:calc(clamp(28px,3vw,44px) * -.6) 0 0;font-size:clamp(20px,1.9vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.nv2-card h3{font-size:18px;margin:0 0 12px}
.nv2-rejoin{height:200vh}
.nv2-rejoin .nv2-work .b{opacity:calc((var(--nv-b) - .85) * 6.67)}
.nv2-cap{margin:10px 0 0;font-size:12px;opacity:.75;text-transform:none;letter-spacing:.02em}
@keyframes nv2-in{to{opacity:1;transform:none}}

.sc{background:var(--plum);color:var(--chalk);border-radius:14px;overflow:hidden;box-shadow:0 24px 48px rgba(35,31,43,.28);font-size:12.5px;line-height:1.35}
.sc-top{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid rgba(238,234,227,.1);font:400 11px/1 var(--mono);letter-spacing:.04em}
.sc-top i{width:8px;height:8px;border-radius:50%;background:rgba(238,234,227,.22)}
.sc-ttl{margin-left:6px;opacity:.7}
.sc-clk{margin-left:auto;color:var(--gold)}
.sc-panes{display:grid;grid-template-columns:1fr 1fr;height:330px;cursor:pointer}
.sc-pane{position:relative;display:flex;flex-direction:column;min-height:0;padding:10px 10px 0}
.sc-pane+.sc-pane{border-left:1px solid rgba(238,234,227,.1)}
.sc-tag{margin:0 0 6px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.sc-n .sc-tag{color:var(--gold);opacity:1}
.sc-pin{display:none;margin:0 0 4px;padding:5px 8px;border:1px solid var(--gold);border-radius:8px;color:var(--gold);font-size:11.5px}
.sc-pin.show{display:block;animation:sc-pop .5s var(--ease)}
.sc-feed{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%);mask-image:linear-gradient(to bottom,transparent,#000 26%);padding-bottom:10px}
.sc-m{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s var(--ease),opacity .4s}
.sc-m.show{grid-template-rows:1fr;opacity:1}
.sc-mi{overflow:hidden;min-height:0;display:flex;flex-direction:column}
.sc-b{margin:6px 0 0;max-width:92%;padding:6px 9px;border-radius:10px;transition:opacity .4s}
.sc-b.sc-user{align-self:flex-end;background:var(--chalk);color:var(--plum)}
.sc-b.sc-agent{align-self:flex-start;background:rgba(238,234,227,.1)}
.sc-b.sc-tool{padding:0;background:none;font:400 11px/1.35 var(--mono);color:rgba(238,234,227,.45)}
.sc-b.sc-warn{align-self:flex-start;background:var(--verm);color:var(--chalk);font-size:13.5px;font-weight:500;animation:sc-pop .5s var(--ease)}
.sc-b.sc-ok{align-self:flex-start;background:rgba(244,206,70,.14);border:1px solid var(--gold);box-shadow:0 0 0 3px rgba(244,206,70,.16);font-size:13.5px;font-weight:500;animation:sc-pop .5s var(--ease)}
.sc-b.sc-ping{align-self:flex-start;position:relative;padding-left:22px;background:rgba(238,234,227,.1)}
.sc-b.sc-ping::before{content:"";position:absolute;left:9px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--verm);animation:sc-blink 1s infinite}
.sc-n .sc-b.sc-ping::before{background:var(--gold)}
.sc-btns{display:flex;gap:6px;margin-top:6px}
.sc-btns span{padding:3px 10px;border-radius:999px;border:1px solid rgba(238,234,227,.35);font-size:11px;transition:background .25s,color .25s,transform .15s}
.sc-btns span.sc-tap{background:var(--gold);border-color:var(--gold);color:var(--plum);transform:scale(.94)}
.sc-b.sc-struck{opacity:.4;text-decoration:line-through}
.sc-stat{display:none;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 0 6px;border-top:1px solid rgba(238,234,227,.1)}
.sc-stat.show{display:flex}
.sc-l{font:400 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.sc-v{font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1}
.sc-meter{display:none;height:8px;border-radius:4px;background:rgba(238,234,227,.12);margin:2px 0 10px;overflow:hidden}
.sc-meter.show{display:block}
.sc-meter i{display:block;height:100%;width:0;border-radius:4px;background:var(--chalk)}
.sc-n .sc-meter i{background:var(--gold)}
.sc-meter i.sc-stop{background:var(--verm)}
.sc-status{margin:0;padding:0 12px;border-radius:8px;font-weight:500;font-size:14.5px;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .45s,padding .45s,margin .45s}
.sc-status.show{max-height:72px;opacity:1;padding:10px 12px;margin:0 0 10px}
.sc-status.bad::before{content:"✕\00a0\00a0"}
.sc-status.good::before{content:"✓\00a0\00a0"}
.sc-status.bad{background:var(--verm);color:var(--chalk)}
.sc-status.good{background:var(--gold);color:var(--plum)}
.sc-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid rgba(238,234,227,.1)}
.sc-play{position:relative;flex:none;width:20px;height:20px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.sc-play:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.sc-play::before,.sc-play::after{content:"";position:absolute;top:5px;width:3px;height:10px;background:currentColor;border-radius:1px}
.sc-play::before{left:6px}
.sc-play::after{left:11px}
.sc-play.paused::before{left:7px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor;border-radius:0}
.sc-play.paused::after{display:none}
.sc-track{flex:1;height:3px;border-radius:2px;background:rgba(238,234,227,.18);overflow:hidden}
.sc-track i{display:block;height:100%;width:0;background:var(--chalk)}
.sc-time{min-width:76px;text-align:right;font:400 11px/1 var(--mono);opacity:.7}
@keyframes sc-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes sc-blink{50%{opacity:.25}}

/* 5. The same job, without and with Nenya (the films, back in one panel) */
.nv2-films{padding:clamp(16px,2vw,32px) 0 clamp(72px,9vw,140px)}
.nv2-legend{display:flex;flex-wrap:wrap;gap:18px;margin:0}
.nv2-legend span{display:inline-flex;align-items:center;gap:8px}
.nv2-legend span::before{content:"";width:12px;height:12px;border-radius:3px;background:rgba(238,234,227,.35)}
.nv2-legend .lg-n{color:var(--gold)}
.nv2-legend .lg-n::before{background:var(--gold)}
.nv2-group{margin:clamp(36px,4vw,60px) 0 18px;color:var(--mut)}
.nv2-film-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,48px) clamp(24px,3vw,44px)}
.nv2-fcard h3{margin:0 0 4px}
.nv2-sub{margin:0 0 14px;color:var(--mut);font-size:15px}

/* 6. Demo */
.nv2-demo{padding:clamp(56px,8vw,120px) 0}
.nv2-demo-box{aspect-ratio:16/9;border:1px dashed var(--line);border-radius:16px;display:grid;place-items:center}
.nv2-demo-box p{opacity:.7}

/* 7. Use cases */
.nv2-scale{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(28px,4vw,48px) 0 10px;padding-left:min(36%,420px);opacity:.6}
.nv2-uselist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nv2-uselist li{display:grid;grid-template-columns:min(36%,420px) 1fr;align-items:center;gap:0;padding:14px 0;border-top:1px solid var(--line)}
.nv2-uselist p{margin:0;font-size:var(--fs-deck);letter-spacing:-.01em}
.nv2-uselist .bar{display:block;height:10px;border-radius:5px;background:var(--gold);width:0}
.nv2-uselist .in .bar,.nv2-uselist li.in .bar{animation:nv2-grow 1.4s var(--ease) forwards}
@keyframes nv2-grow{to{width:calc(var(--d) * 100%)}}

/* 8. Case studies and benchmarks */
.nv2-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(28px,4vw,48px)}
.nv2-metrics .m{border-top:1px solid var(--line);padding-top:18px}
.nv2-metrics .big{margin:0;font-size:clamp(56px,6vw,96px);font-weight:500;letter-spacing:-.05em;line-height:1}
.nv2-metrics .mono{margin:8px 0 18px;color:var(--mut)}
.nv2 .cmp{display:grid;gap:8px}
.nv2 .cmp span{position:relative;display:block;font-size:13px;padding:6px 0 0;white-space:nowrap}
.nv2 .cmp span::before{content:"";display:block;height:8px;border-radius:4px;background:rgba(238,234,227,.25);width:0;margin-bottom:4px}
.nv2 .cmp span.us::before{background:var(--gold)}
.nv2 .in .cmp span::before{animation:nv2-w 1.6s var(--ease) forwards}
@keyframes nv2-w{to{width:var(--w)}}
.nv2-case{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:18px}
.nv2-case .mono{color:var(--mut)}
.nv2-case .case-h{font-size:var(--fs-deck);margin:6px 0 18px}
.nv2-case .dots{display:grid;gap:14px}
.nv2-case .dots>div{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:14px}
.nv2-case .dots .mono{margin:0}
.nv2-case .row{display:flex;gap:6px;flex-wrap:wrap}
.nv2-case .row i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(238,234,227,.4);transition:background .3s,border-color .3s}
.nv2-case .row i.on{background:var(--gold);border-color:var(--gold)}
.nv2-source{margin-top:clamp(28px,4vw,44px);color:var(--mut);text-transform:none;letter-spacing:.02em;max-width:90ch}

/* 9. Install */
.nv2-install-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:center}
.nv2-steps{list-style:none;margin:clamp(20px,3vw,32px) 0;padding:0;display:grid;gap:12px;font-size:var(--fs-deck)}
.nv2-steps li{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.nv2-term{background:#2C2836;color:var(--chalk);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.nv2-term .bar{display:flex;gap:6px;margin:0;padding:12px 14px;border-bottom:1px solid rgba(238,234,227,.12)}
.nv2-term .bar i{width:10px;height:10px;border-radius:50%;background:rgba(238,234,227,.25)}
.nv2-term pre{margin:0;padding:20px 22px 26px;font:400 clamp(13px,1.1vw,16px)/1.9 var(--mono);white-space:pre-wrap}
.nv2-term code>span{display:block;opacity:0}
.nv2-term .t2,.nv2-term .t3,.nv2-term .t4{color:var(--gold)}
.nv2-term.in .t1{animation:nv2-type 1.6s steps(32) .2s forwards}
.nv2-term.in .t2{animation:nv2-in .3s 2.1s forwards}
.nv2-term.in .t3{animation:nv2-in .3s 2.7s forwards}
.nv2-term.in .t4{animation:nv2-in .3s 3.3s forwards}
.nv2-term .t1{white-space:nowrap;overflow:hidden;width:0}
@keyframes nv2-type{0%{opacity:1;width:0}100%{opacity:1;width:32ch}}

/* Responsive */
@media (max-width:1000px){
  .nv2-metrics{grid-template-columns:repeat(2,1fr)}
  .nv2-film-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nv2-panels{grid-template-columns:1fr}
  .nv2-panels::before{display:none}
  .nv2-install-grid{grid-template-columns:1fr}
  .nv2-uselist li{grid-template-columns:1fr;gap:10px}
  .nv2-scale{display:none}
  .nv2-work .b{font-size:.5em;letter-spacing:-.02em}
  .nv2-work .b{white-space:normal;width:38vw;text-align:center;line-height:1.05}
  .sc-panes{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:500px}
  .sc-pane+.sc-pane{border-left:0;border-top:1px solid rgba(238,234,227,.1)}
  .nv2-panel-h{font-size:30px}
  .nv2-case .dots>div{grid-template-columns:1fr}
  .nv2-metrics{grid-template-columns:1fr}
}

/* Reduced motion: show every end state, no movement (films render their final frame) */
@media (prefers-reduced-motion:reduce){
  .nv2 *{animation:none!important;transition:none!important}
  .nv2-split{height:auto}
  .nv2-split-stick{position:relative;top:0;height:60vh}
  .nv2-term code>span{opacity:1!important;transform:none!important}
  .nv2-uselist .bar{width:calc(var(--d) * 100%)}
  .nv2 .cmp span::before{width:var(--w)}
  .nv2-term .t1{width:auto}
}