/* Bright product-page layer (local preview, 2026-10-10). Letta Agent's pattern on Durable Intelligence's own art:
   the homepage contour field as imagery, explainers floating on it as light cards. Loaded last. */

/* Hero: full-bleed field art, light wash behind the type */
.nv2-hero{position:relative;overflow:hidden;background:var(--cream);min-height:calc(88svh - var(--nav-h))}
.nv2-hero::before{content:"";position:absolute;inset:0;background:url(img/nenya-field-1.jpg) center/cover no-repeat;transform:scaleX(-1)}
.nv2-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,241,207,.88) 0%,rgba(251,241,207,.4) 42%,rgba(251,241,207,0) 68%)}
.nv2-hero .wrap{position:relative;z-index:1}
.nv2-hero{padding:clamp(48px,7vw,104px) 0}
.nv2-hero .nv2-word{font-size:clamp(96px,19vw,300px)}
.nv2-hero .nv2-eyebrow{color:var(--plum);opacity:.7}
.nv2-word{color:var(--plum)}
.nv2-tag{margin:clamp(26px,4.6vw,66px) 0 0;max-width:24ch;font-size:clamp(22px,2.4vw,36px);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--plum)}

/* Breakdowns: art panel, light card floating on it, title underneath */
.nv2-card{display:grid;gap:14px}
.nv2-card h3{margin:0;font-size:20px}
.nv2-art{position:relative;display:grid;place-items:center;min-height:240px;padding:clamp(22px,3.2vw,44px) clamp(16px,2.6vw,36px);border-radius:20px;overflow:hidden;background:url(img/nenya-field-2.jpg) 30% 40%/240% auto no-repeat}
.nv2-art-1{background-position:8% 12%}
.nv2-art-2{background-image:url(img/nenya-field-1.jpg);background-position:62% 18%}
.nv2-art-3{background-position:88% 70%}
.nv2-art-4{background-image:url(img/nenya-field-1.jpg);background-position:20% 92%}
.nv2-art-5{background-image:url(img/nenya-field-1.jpg);background-position:92% 30%}
.nv2-art-6{background-position:50% 96%}
.nv2-art-7{background-image:url(img/nenya-field-1.jpg);background-position:40% 55%}
.nv2-art-8{background-position:72% 8%}
.nv2-art .xp{width:100%;max-width:400px;padding:16px 18px 18px;border-radius:14px;background:#FFFDF9;box-shadow:0 24px 64px rgba(20,28,48,.18),0 8px 22px rgba(20,28,48,.12);
  --xi:var(--plum);--xp:#FFFDF9;--xf:var(--plum);--xfi:var(--chalk);--xg:var(--ultra);--xgi:var(--chalk);--xb:var(--verm);--xbi:var(--chalk)}

/* Demo placeholder on art */
.nv2-demo-box.nv2-art{border:0;background-size:cover;background-position:center}
.nv2-demo-box.nv2-art p{opacity:1;margin:0;padding:8px 14px;border-radius:999px;background:#FFFDF9;color:var(--plum);box-shadow:0 8px 22px rgba(20,28,48,.12)}

/* Use cases on gold */
.nv2-uses .nv2-uselist .bar{background:var(--ultra)}

/* Install: the terminal floats on art */
.nv2-art-term{background-image:url(img/nenya-field-1.jpg);background-position:75% 40%;padding:clamp(28px,4vw,56px)}
.nv2-art-term .nv2-term{width:100%;background:var(--plum);border:0;box-shadow:0 24px 64px rgba(20,28,48,.22),0 8px 22px rgba(20,28,48,.14)}

@media (max-width:760px){
  .nv2-art{min-height:0;padding:18px 12px}
  .nv2-hero::after{background:linear-gradient(180deg,rgba(251,241,207,.85),rgba(251,241,207,.3) 70%)}
}

/* Product window under the hero (placeholder mock until real screenshots): overlaps the art, like Letta Agent */
.nv2-hero{padding-bottom:clamp(170px,19vw,250px)}
.nv2-shot-wrap{position:relative;z-index:3;margin-top:calc(-1 * clamp(120px,14vw,190px));background:linear-gradient(to bottom,transparent clamp(120px,14vw,190px),var(--chalk) clamp(120px,14vw,190px))}
.nv2-shot{overflow:hidden;border-radius:14px;background:#FFFDF9;color:var(--plum);box-shadow:0 24px 64px rgba(20,28,48,.18),0 8px 22px rgba(20,28,48,.12);font-size:13px;line-height:1.3}
.sh-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(35,31,43,.08)}
.sh-bar i{width:11px;height:11px;border-radius:50%;background:#F26A5B}
.sh-bar i:nth-child(2){background:#F4BE4F}
.sh-bar i:nth-child(3){background:#5FC06A}
.sh-bar span{margin-left:10px;font-weight:500;opacity:.6}
.sh-body{display:grid;grid-template-columns:230px 1fr}
.sh-side{padding:16px 12px;background:#F4F0E8;border-right:1px solid rgba(35,31,43,.06)}
.sh-h{margin:0 0 10px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.sh-ag{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:7px 8px;border-radius:8px;font-weight:500}
.sh-ag.on{background:#FFFDF9;box-shadow:0 1px 3px rgba(20,28,48,.08)}
.sh-ag b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--plum);color:var(--chalk);font-size:11px}
.sh-ag:nth-child(3) b{background:var(--ultra)}
.sh-ag:nth-child(4) b{background:var(--lilac);color:var(--plum)}
.sh-ag:nth-child(5) b{background:var(--apricot);color:var(--plum)}
.sh-ag em{margin-left:auto;width:8px;height:8px;border-radius:50%}
.sh-ag em.run{background:var(--ultra);animation:sh-pulse 1.6s ease-in-out infinite}
.sh-ag em.you{background:var(--gold)}
.sh-ag em.done{background:rgba(35,31,43,.25)}
@keyframes sh-pulse{50%{opacity:.35}}
.sh-main{padding:18px 22px 20px}
.sh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sh-title{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em}
.sh-meta{margin:4px 0 0;opacity:.6}
.sh-on{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(58,52,230,.1);color:var(--ultra);font-weight:500;white-space:nowrap}
.sh-on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ultra)}
.sh-prog{height:8px;margin:16px 0 18px;border-radius:4px;background:rgba(35,31,43,.08);overflow:hidden}
.sh-prog i{display:block;height:100%;width:0;border-radius:4px;background:var(--ultra);animation:sh-fill 2.4s .4s var(--ease) forwards}
@keyframes sh-fill{to{width:62%}}
.sh-cols{display:grid;grid-template-columns:1fr 1.25fr;gap:14px}
.sh-card{padding:14px 16px;border:1px solid rgba(35,31,43,.08);border-radius:12px}
.sh-card p:not(.sh-h){margin:0 0 9px}
.sh-card p.ok::before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:8px;border-radius:50%;background:var(--ultra);color:var(--chalk);font-size:9.5px}
.sh-feed p:not(.sh-h){opacity:0;transform:translateY(6px);animation:sh-in .5s var(--ease) forwards}
.sh-feed p:nth-child(2){animation-delay:.9s}
.sh-feed p:nth-child(3){animation-delay:1.6s}
.sh-feed p:nth-child(4){animation-delay:2.3s}
@keyframes sh-in{to{opacity:1;transform:none}}
.sh-feed p.you{padding:8px 10px;border-radius:9px;background:rgba(244,206,70,.22)}
.sh-feed u{margin-left:6px;padding:2px 9px;border-radius:999px;background:var(--plum);color:var(--chalk);text-decoration:none;font-size:11.5px}
@media (max-width:760px){
  .sh-body{grid-template-columns:1fr}
  .sh-side{display:none}
  .sh-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sh-prog i{width:62%;animation:none}
  .sh-feed p:not(.sh-h){opacity:1;transform:none;animation:none}
}