/* ---------- Pinnra interaction layer ---------- */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

/* nav over dark sections */
.nav{transition:background .35s,color .35s,box-shadow .35s}
.nav.scrolled{box-shadow:0 1px 0 rgba(6,31,0,.08)}
.nav.on-dark{background:rgba(6,31,0,.92);color:var(--cream);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav .logo-d{display:none}
.nav.on-dark .logo-l{display:none}.nav.on-dark .logo-d{display:block}
.nav.on-dark .btn-sand{background:var(--lime)}

/* buttons & links */
.btn{transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-line:hover{box-shadow:inset 0 0 0 1px currentColor;background:rgba(165,225,25,.08)}
.link::after{transition:transform .25s var(--ease)}
.link:hover{text-decoration:none}.link:hover::after{transform:translateX(4px)}
.nav ul a{position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1)}

/* card hovers */
.step,.egrid>div,.pilot li,.vcard,.comp div,.form-card,.cbox{transition:transform .35s var(--ease),box-shadow .35s,background .35s}
.egrid>div:hover{background:var(--cream)}
.pilot li:hover,.vcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(6,31,0,.18)}

/* hero wave: animated equaliser */
.wave{background:none!important;-webkit-mask:none!important;mask:none!important;display:inline-flex!important;align-items:center;gap:.045em;width:1.9em}
.wave i{flex:1;height:30%;background:var(--lime);border-radius:1px;animation:eq 1.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes eq{0%,100%{height:22%}50%{height:var(--h,90%)}}

/* hero stage parallax + live card */
.ghost{transition:transform .2s linear;will-change:transform}
.hero-card .row{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero-card.play .row{opacity:0;transform:translateY(8px)}
.hero-card.play .row.shown{opacity:1;transform:none}
.hero-card [data-book]{transition:background .4s,color .4s}
.hero-card [data-book].done{background:var(--ink);color:var(--lime)}

/* live dot */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#09CF58;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(9,207,88,.6);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(9,207,88,.55)}100%{box-shadow:0 0 0 9px rgba(9,207,88,0)}}

/* feeds */
.feed .row{animation:none}
.feed .row.new{animation:slideIn .6s var(--ease)}
@keyframes slideIn{from{opacity:0;transform:translateY(-10px);background:#E7F8C8}to{opacity:1;transform:none}}

/* transcript typing */
.js .tr.play .bub,.js .tr.play .who{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .tr.play .shown{opacity:1!important;transform:none!important}
.typing{display:inline-flex;gap:4px;padding:12px 14px;background:#E6F2EE;border-radius:10px;width:max-content}
.typing i{width:6px;height:6px;border-radius:50%;background:#6B7A64;animation:dots 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}

/* tabs with progress */
.tab{position:relative;border-bottom-color:rgba(255,255,255,.12)!important}
.tab .prog{position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--lime)}
.tab.on .prog{animation:prog var(--dur,7s) linear forwards}
.tabs.paused .tab.on .prog{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.board{position:relative}
.board-screen{display:none}
.board-screen.on{display:block;animation:screenIn .6s var(--ease)}
@keyframes screenIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tabpanel.on{animation:screenIn .5s var(--ease)}
.example-note{position:absolute;right:14px;bottom:10px;font:11px var(--sans);color:#AFC0A6;margin:0}
.eq{display:flex;align-items:center;gap:3px;height:54px;margin:14px 0 6px}
.eq i{flex:1;background:#5E8A1F;border-radius:2px;height:20%;animation:eq 1s ease-in-out infinite;animation-delay:var(--d)}
.bar-row{margin-top:12px;font-size:13px}
.bar-row span{display:block;margin-bottom:6px;color:#4B5A45}
.bar-row i{display:block;height:10px;border-radius:5px;background:#EEF0E8;position:relative;overflow:hidden}
.bar-row i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,#5E8A1F,#A5E119);border-radius:5px;transition:width 1.2s var(--ease)}
.board-screen.on .bar-row i::after{width:var(--w)}

/* marquee */
.marquee{overflow:hidden;margin-top:30px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .mq{margin:0!important;flex-wrap:nowrap!important;justify-content:flex-start!important;width:max-content;animation:mq 40s linear infinite}
.marquee .mq li{white-space:nowrap}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* carousel */
.car-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.car-nav{display:flex;gap:10px}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(165,225,25,.45);background:transparent;color:var(--lime);font:18px var(--sans);cursor:pointer;transition:background .2s,color .2s,opacity .2s}
.car-btn:hover{background:var(--lime);color:var(--ink)}
.car-btn:disabled{opacity:.3;cursor:default;background:transparent;color:var(--lime)}
.car-track{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3.3);grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;scroll-behavior:smooth}
.car-track::-webkit-scrollbar{display:none}
.car-track .vcard{scroll-snap-align:start}
@media (max-width:900px){.car-track{grid-auto-columns:78%}}
.car-progress{height:3px;background:rgba(255,255,255,.1);margin-top:28px;border-radius:2px;overflow:hidden}
.car-progress i{display:block;height:100%;width:30%;background:var(--lime);border-radius:2px;transition:transform .3s,width .3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .tr.play .bub,.js .tr.play .who,.hero-card.play .row{opacity:1;transform:none}
}
.example-note{top:14px;right:18px;bottom:auto!important;z-index:3}

/* ---------- navigation: dropdowns + mobile ---------- */
.nav .wrap{position:relative}
.nav-r{display:flex;align-items:center;gap:12px}
.menu .dd{position:relative}
.dd-t{background:none;border:0;font:500 15px var(--sans);color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:26px 0}
.chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.dd.open .chev{transform:rotate(-135deg) translateY(-1px)}
.dd-p{position:absolute;top:100%;left:-24px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(6,31,0,.16);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:40}
.dd.open .dd-p{opacity:1;visibility:visible;transform:none}
.dd-p.mega{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;padding:14px;width:640px}
.mega-h{font:13px var(--serif);color:#7C8A74;padding:8px 12px 4px;margin:0}
.mega-col a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none}
.mega-col a:hover{background:var(--cream)}
.mega-col a::after{display:none}
.mega-col b{display:block;font:500 15px var(--sans)}
.mega-col span{display:block;font:13.5px var(--serif);color:var(--muted);margin-top:2px}
.mega-card{background:var(--ink);color:var(--cream);border-radius:10px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;text-decoration:none;min-height:220px}
.mega-card::after{display:none}
.mega-card .eyebrow{color:var(--cream)}
.mega-card b{font:500 20px/1.2 var(--sans);letter-spacing:-.02em}
.mega-card .link{color:var(--lime)}
.dd-p.list{padding:10px;width:240px;display:grid}
.dd-p.list a{padding:10px 12px;border-radius:8px;text-decoration:none;font:500 15px var(--sans)}
.dd-p.list a:hover{background:var(--cream)}
.dd-p a::after{display:none!important}
.burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;position:relative;color:inherit}
.burger i{position:absolute;left:10px;right:10px;height:1.8px;background:currentColor;transition:transform .3s var(--ease),top .3s}
.burger i:first-child{top:16px}.burger i:last-child{top:24px}
.nav.m-open .burger i:first-child{top:20px;transform:rotate(45deg)}.nav.m-open .burger i:last-child{top:20px;transform:rotate(-45deg)}
@media (max-width:900px){
  .burger{display:block}
  .nav-r .btn{display:none}
  .nav .menu{display:none!important}
  .nav.m-open{background:#fff!important;color:var(--ink)!important}
  .nav.m-open .logo-d{display:none!important}.nav.m-open .logo-l{display:block!important}
  .nav.m-open .menu{display:flex!important;flex-direction:column;position:fixed;top:76px;left:0;right:0;bottom:0;background:#fff;padding:12px 20px 40px;overflow:auto;gap:0}
  .nav.m-open .menu>li{border-bottom:1px solid var(--line)}
  .nav.m-open .menu>li>a,.nav.m-open .dd-t{display:flex;width:100%;justify-content:space-between;padding:18px 0;font-size:19px}
  .dd-p{position:static;box-shadow:none;border:0;transform:none;opacity:1;visibility:visible;display:none!important;width:auto!important;padding:0 0 14px!important}
  .dd.open .dd-p{display:block!important}
  .mega-card{display:none!important}
  .nav.m-open .menu::after{content:"";display:block}
}
body.menu-lock{overflow:hidden}
.nav .menu{align-items:center}
@media (max-width:900px){.nav.m-open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.nav.m-open .menu{align-items:stretch}}
.m-cta{display:none}@media (max-width:900px){.nav.m-open .m-cta{display:block;border:0!important;padding-top:20px}.nav.m-open .m-cta .btn{display:flex;justify-content:center;padding:16px;font-size:16px}}
.stat b span{font-size:inherit!important;color:inherit!important}