/* Nivaro site v2: the ring that unrolls into a line.
   Default styles are a plain stacked layout, so the page reads fine with no
   JavaScript or with reduced motion. unroll.js adds .on to the section, which
   pins the stage and hands positioning to the scroll. */

/* ---------- shared pieces ---------- */
.unroll{position:relative;padding:0}
.unroll .ustage{position:relative}
.uhero .wrap{position:relative}
.uhero .chip{margin-bottom:26px}
.uhero h1{font-size:clamp(40px,4.9vw,72px)}
.uhero .sub{font-family:var(--mono);font-size:clamp(15px,1.3vw,17px);color:var(--ink2);line-height:1.9;margin:26px 0 34px}
.uhero .sub b{color:var(--ink);font-weight:500}
.uhero .scrollhint{margin-top:36px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--grey)}
.uhero .scrollhint i{width:1.5px;height:28px;background:linear-gradient(var(--mag),transparent);animation:hintdrop 1.8s ease-in-out infinite}
@keyframes hintdrop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}

.ucard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 28px 28px;
  box-shadow:0 30px 60px -44px rgba(19,17,24,.35)}
.ucard .uc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ucard .uc-n{font-family:var(--mono);font-size:12px;color:var(--faint)}
.ucard .uc-name{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--mag)}
.ucard .tag{margin-left:auto}
.ucard h3{margin:0 0 8px;font-size:clamp(22px,2.1vw,28px);letter-spacing:-.022em;line-height:1.15}
.ucard > p{margin:0;color:var(--ink2);font-size:17px;line-height:1.5}
.uc-vis{margin-top:20px}

/* identity */
.idc{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.idc .av{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:20px}
.idc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.idc dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--grey);padding-top:2px}
.idc dd{margin:0;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.idc dl{min-width:0}

/* channels and workspace chips */
.uchips{display:flex;flex-wrap:wrap;gap:10px}
.uchip{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font-size:15px}
.uchip i{width:8px;height:8px;border-radius:50%;background:var(--mag)}
.uchip small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mag)}
.uchip.next{border-style:dashed;color:var(--ink2)}
.uchip.next i{background:var(--teal)}
.uchip.next small{color:var(--teal)}

/* authority rules */
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rules li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.rules b{font-weight:500;color:var(--ink)}
.rules .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;color:#fff}
.rules .ok{background:var(--teal)} .rules .no{background:var(--mag)} .rules .stop{background:var(--ink)}
.rules .stop i{width:8px;height:8px;border-radius:2px;background:#fff}

/* execution flow */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flow .st{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);min-width:104px}
.flow .st b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey);font-weight:500}
.flow .st span{font-size:14px;color:var(--ink)}
.flow .st.hot{border-color:var(--mag);background:var(--mag-t)}
.flow .st.hot b{color:var(--mag)}
.flow svg{width:22px;height:14px;flex:none}

/* evidence timeline */
.mtl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line2)}
.mtl li{position:relative;padding:7px 0 7px 14px;font-size:15px;color:var(--ink2)}
.mtl li::before{content:"";position:absolute;left:-25px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--line2)}
.mtl li.hold{color:var(--mag);font-weight:500}
.mtl li.hold::before{background:var(--mag);border-color:var(--mag)}
.mtl time{font-family:var(--mono);font-size:12px;color:var(--grey);margin-right:10px}

/* economics bars */
.mbars{list-style:none;margin:0;padding:0}
.mbars li{display:grid;grid-template-columns:86px 1fr 56px;gap:12px;align-items:center;padding:6px 0;font-size:14px;color:var(--ink2)}
.mbars .bar{height:9px;border-radius:9px;background:var(--bg2);overflow:hidden}
.mbars .bar i{display:block;height:100%;border-radius:9px;background:var(--teal)}
.mbars li:first-child .bar i{background:var(--mag)}
.mbars b{font-family:var(--mono);font-weight:500;color:var(--ink);text-align:right}
.mbars .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.mbars .tot span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--grey)}
.mbars .tot strong{font-size:26px;letter-spacing:-.02em;color:var(--mag)}

/* ---------- static fallback (no JS, reduced motion) ---------- */
.usvg,.ubrain,.ulabels,.ucount,.ucap{display:none}
.uhero{padding-block:clamp(40px,6vw,80px) clamp(40px,5vw,70px)}
.ustatic{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.ustatic svg{width:100%;max-width:520px;justify-self:end}
.ucards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px) clamp(60px,9vw,120px)}
@media (max-width:760px){.ustatic{grid-template-columns:1fr}.ustatic svg{justify-self:center;max-width:360px}}

/* ---------- animated ---------- */
.unroll.on{height:820vh}
.unroll.on .ustage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.unroll.on .ustatic svg{display:none}
.unroll.on .ustatic{display:block}
.unroll.on .usvg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.unroll.on .uhero{position:absolute;inset:0;display:flex;align-items:center;padding:0;z-index:3;will-change:opacity,transform}
.unroll.on .uhero .txt{max-width:min(560px,46vw)}
.unroll.on .ubrain{display:grid;place-items:center;position:absolute;left:0;top:0;width:180px;height:180px;margin:-90px 0 0 -90px;
  border-radius:50%;background:var(--ink);color:#fff;z-index:2;will-change:transform;text-align:center;box-shadow:0 0 0 10px rgba(200,24,95,.07)}
.ubrain small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--mag-l)}
.ubrain strong{display:block;font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.unroll.on .ulabels{display:block;position:absolute;inset:0;pointer-events:none;z-index:2}
.ulabel{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--ink2);white-space:nowrap;will-change:transform,opacity}
.unroll.on .ucards{display:block;position:absolute;inset:0;padding:0;margin:0;max-width:none;z-index:4;pointer-events:none}
.unroll.on .uhero .wrap{width:100%}
.unroll.on .ucard{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.unroll.on .ucard.live{pointer-events:auto}
.unroll.on .ucap{display:block;position:absolute;left:0;right:0;bottom:9vh;text-align:center;margin:0;z-index:3;font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;opacity:0;padding-inline:24px}
.unroll.on .ucount{display:flex;position:absolute;right:clamp(20px,4vw,48px);bottom:clamp(20px,4vh,40px);z-index:4;gap:10px;align-items:baseline;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--grey);opacity:0}
.ucount b{font-size:22px;color:var(--mag);font-weight:500;letter-spacing:0}

@media (max-width:760px){
  .unroll.on{height:920vh}
  .unroll.on .uhero{align-items:flex-start;padding-top:96px}
  .unroll.on .uhero .txt{max-width:none}
  .unroll.on .uhero .scrollhint{display:none}
  .ucard{padding:20px 20px 22px}
  .ucard > p{font-size:15.5px}
  .flow .st{min-width:0;flex:1 1 40%}
  .flow svg{display:none}
  .mbars li{grid-template-columns:70px 1fr 48px}
  .idc{grid-template-columns:1fr}
  .idc .av{width:40px;height:40px;font-size:16px}
}

/* ---------- big centred cards on wide screens ---------- */
.unroll.on.wide .ucard{padding:40px 44px 42px;border-radius:26px;box-shadow:0 50px 90px -56px rgba(19,17,24,.45)}
.unroll.on.wide .ucard .uc-top{margin-bottom:20px}
.unroll.on.wide .ucard .uc-n,.unroll.on.wide .ucard .uc-name{font-size:14px}
.unroll.on.wide .ucard .tag{font-size:12px;padding:6px 12px}
.unroll.on.wide .ucard h3{font-size:clamp(32px,3vw,46px);margin-bottom:12px}
.unroll.on.wide .ucard > p{font-size:21px;max-width:44ch}
.unroll.on.wide .uc-vis{margin-top:28px}
.unroll.on.wide .idc{padding:22px;gap:22px}
.unroll.on.wide .idc .av{width:68px;height:68px;font-size:26px}
.unroll.on.wide .idc dl{font-size:17px;gap:8px 18px}
.unroll.on.wide .idc dt{font-size:12px}
.unroll.on.wide .uchips{gap:12px}
.unroll.on.wide .uchip{height:52px;padding:0 20px;font-size:18px}
.unroll.on.wide .uchip small{font-size:11px}
.unroll.on.wide .rules li{font-size:18px;padding:14px 0;gap:14px}
.unroll.on.wide .rules .ic{width:28px;height:28px;font-size:14px}
.unroll.on.wide .flow{gap:10px}
.unroll.on.wide .flow .st{padding:16px 18px;min-width:130px}
.unroll.on.wide .flow .st b{font-size:11px}
.unroll.on.wide .flow .st span{font-size:17px}
.unroll.on.wide .mtl li{font-size:18px;padding:10px 0 10px 16px}
.unroll.on.wide .mtl li::before{top:17px}
.unroll.on.wide .mtl time{font-size:14px}
.unroll.on.wide .mbars li{grid-template-columns:110px 1fr 70px;font-size:17px;padding:8px 0}
.unroll.on.wide .mbars .bar{height:12px}
.unroll.on.wide .mbars .tot strong{font-size:34px}
.unroll.on.wide .ulabel{font-size:14px}