/* Supero homepage sections (HOME-V3). Shared chrome and tokens: system.css. */
.h-home h1,.h-home h2,.h-home h3,.h-home p,.h-home ul,.h-home dl,.h-home dd,.h-home pre{margin:0}
.h-home ul{padding:0;list-style:none}

/* hero */
.h-hero{display:grid;gap:48px;padding-top:56px;padding-bottom:48px;align-items:center}
.h-hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
@media (min-width:1024px){.h-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:64px}}
.h-install{background:var(--bg-deep);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}
.h-tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line);font-size:13px}
.h-tabs [role="tab"]{background:none;border:0;border-bottom:2px solid transparent;color:var(--text-muted);font:inherit;font-size:13px;padding:10px 14px;min-height:44px;cursor:pointer}
.h-tabs [role="tab"][aria-selected="true"]{background:var(--surface);border-bottom-color:var(--text);color:var(--text)}
.h-tabs [role="tab"]:hover{color:var(--text)}
.h-cmd{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text-2);flex-wrap:wrap}
.h-prompt{color:var(--text-muted)}
.h-file{flex-basis:100%;color:var(--text-muted);font-size:12px;line-height:1.4}
.h-cmd-text{flex:1 1 0;min-width:0;overflow-x:auto;white-space:pre;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text-2)}
.h-copy{background:var(--surface-2);border:1px solid var(--line-control);color:var(--text-2);border-radius:6px;padding:6px 10px;min-height:36px;font-family:var(--mono);font-size:12px;cursor:pointer}
.h-copy:hover{color:#fff;border-color:var(--text-muted)}
@media (max-width:767.98px){.h-copy{min-height:44px;min-width:64px}}
.h-install-note{padding:0 16px 6px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.h-install-last{padding-bottom:14px}

/* request inspector */
.h-insp{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-family:var(--mono);font-size:13px;line-height:1.5;min-width:0;font-variant-numeric:tabular-nums}
.h-insp-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text-muted)}
.h-insp-live{display:inline-flex;align-items:center;gap:6px}
.h-dot{width:8px;height:8px;border-radius:4px;background:var(--signal)}
.h-insp-row{display:flex;flex-direction:column;gap:8px;padding:16px;border-bottom:1px solid var(--line);min-width:0}
.h-insp-row>*{min-width:0;overflow-wrap:anywhere}
.h-insp-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.h-m{color:var(--text-2)}
.h-path{color:var(--text);white-space:nowrap}
.h-ok{margin-left:auto;color:var(--signal)}
.h-deny{margin-left:auto;color:var(--on-accent);background:var(--policy);padding:0 8px;border-radius:4px;font-weight:600}
.h-muted{color:var(--text-muted)}
.h-json{background:var(--bg-deep);border-radius:8px;padding:12px;line-height:1.7;color:var(--text-2);white-space:pre;overflow-x:auto;font-family:var(--mono);font-size:13px}
.h-policy{color:var(--policy)}
.h-msg{color:var(--text-2)}
.h-insp-deny{background:var(--policy-tint);border-left:2px solid var(--policy);border-bottom:0}
.h-insp-foot{padding:12px 16px;border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--text-muted)}
.h-insp-foot a{color:var(--text-2)!important;text-decoration:underline;text-underline-offset:2px}

/* replay: home.js adds .is-anim (never under reduced motion) and the stage classes
   .s1..s4. Without them the final state shows, so no-JS and screen readers get the
   full text. Hidden parts keep their space: no layout shift. */
.h-insp.is-anim [data-s]{opacity:0;transition:opacity .35s ease}
.h-insp.is-anim.s1 [data-s="1"],.h-insp.is-anim.s2 [data-s="2"],.h-insp.is-anim.s3 [data-s="3"],.h-insp.is-anim.s4 [data-s="4"]{opacity:1}
.h-insp.is-anim [data-type]{clip-path:inset(0 100% 0 0)}
.h-insp.is-anim.s1 [data-s="1"] [data-type],.h-insp.is-anim.s3 [data-s="3"] [data-type]{animation:h-type .6s steps(30,end) forwards}
.h-insp.is-anim .h-deny{transition:opacity .2s ease,transform .2s ease;transform:scale(.6)}
.h-insp.is-anim.s4 .h-deny{transform:scale(1)}
.h-insp.is-anim .h-dot{animation:h-pulse 1.6s ease-in-out infinite}
.h-insp.is-paused .h-dot{animation-play-state:paused}
@keyframes h-type{to{clip-path:inset(0 0 0 0)}}
@keyframes h-pulse{50%{opacity:.35}}

/* sections */
.h-section{padding-top:32px;padding-bottom:32px}
@media (min-width:768px){.h-section{padding-top:28px;padding-bottom:36px}}
.h-section>.h-h2{margin-bottom:24px}
.h-page .h-intro{margin:-16px 0 20px;max-width:720px}
.h-last{padding-bottom:96px}
.h-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.h-card-title{font-size:17px;font-weight:600;line-height:1.35}
.h-card-body{font-size:14px;line-height:1.75;color:var(--text-3)}
.h-card-meta{font-family:var(--mono);font-size:12px;color:var(--text-muted)}

/* architecture strip */
.h-arch{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.h-card-runtime{border-color:var(--policy);gap:12px}
.h-runtime-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.h-step-strong{color:var(--text-2)}
.h-runtime-tag{font-family:var(--mono);font-size:12px;color:var(--policy)}
.h-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:13px}
.h-chips li{border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;color:var(--text)}
.h-arrow{position:relative;display:flex;align-items:center;justify-content:center;height:40px;color:var(--signal);font-family:var(--mono);font-size:20px;line-height:1}
.h-g-h{display:none}
.h-pkt{position:absolute;left:calc(50% - 2px);top:2px;width:4px;height:4px;background:var(--signal);opacity:0;pointer-events:none}
.h-pkt-a{animation:h-pkt-v 2.8s linear infinite}
.h-pkt-b{animation:h-pkt-v-deny 14s linear 1.4s infinite}
@media (min-width:1024px){
  .h-arch{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1.3fr) 28px minmax(0,1fr);gap:0 6px}
  .h-arrow{height:auto}
  .h-g-h{display:inline}
  .h-g-v{display:none}
  .h-pkt{left:2px;top:calc(50% - 2px)}
  .h-pkt-a{animation-name:h-pkt-h}
  .h-pkt-b{animation-name:h-pkt-h-deny}
}
/* A packet crosses the arrow; on the arrow into the runtime, one trip in five is a
   denied request: it turns amber and stops at the runtime's edge. */
@keyframes h-pkt-h{0%{opacity:0;transform:translateX(0)}12%{opacity:.7}88%{opacity:.7}100%{opacity:0;transform:translateX(20px)}}
@keyframes h-pkt-v{0%{opacity:0;transform:translateY(0)}12%{opacity:.7}88%{opacity:.7}100%{opacity:0;transform:translateY(32px)}}
@keyframes h-pkt-h-deny{
  0%{opacity:0;transform:translateX(0);background:var(--signal)}2.4%{opacity:.7}17.6%{opacity:.7}20%{opacity:0;transform:translateX(20px)}
  20.01%{transform:translateX(0)}22.4%{opacity:.7}37.6%{opacity:.7}40%{opacity:0;transform:translateX(20px)}
  40.01%{transform:translateX(0)}42.4%{opacity:.7}57.6%{opacity:.7}60%{opacity:0;transform:translateX(20px)}
  60.01%{transform:translateX(0)}62.4%{opacity:.7}77.6%{opacity:.7}79.9%{opacity:0;transform:translateX(20px);background:var(--signal)}
  80%{opacity:0;transform:translateX(0);background:var(--policy)}82.4%{opacity:.85}92%{transform:translateX(22px)}98%{opacity:.85;transform:translateX(22px)}100%{opacity:0;transform:translateX(22px);background:var(--policy)}}
@keyframes h-pkt-v-deny{
  0%{opacity:0;transform:translateY(0);background:var(--signal)}2.4%{opacity:.7}17.6%{opacity:.7}20%{opacity:0;transform:translateY(32px)}
  20.01%{transform:translateY(0)}22.4%{opacity:.7}37.6%{opacity:.7}40%{opacity:0;transform:translateY(32px)}
  40.01%{transform:translateY(0)}42.4%{opacity:.7}57.6%{opacity:.7}60%{opacity:0;transform:translateY(32px)}
  60.01%{transform:translateY(0)}62.4%{opacity:.7}77.6%{opacity:.7}79.9%{opacity:0;transform:translateY(32px);background:var(--signal)}
  80%{opacity:0;transform:translateY(0);background:var(--policy)}82.4%{opacity:.85}92%{transform:translateY(34px)}98%{opacity:.85;transform:translateY(34px)}100%{opacity:0;transform:translateY(34px);background:var(--policy)}}

/* FieldOps */
.h-split{display:grid;gap:40px;align-items:start}
@media (min-width:1024px){.h-split{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}}
.h-split-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.h-split-proof{display:flex;flex-direction:column;gap:12px;min-width:0}
.h-table-box{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow-x:auto}
.h-table{width:100%;border-collapse:collapse;font-size:14px}
.h-table caption{text-align:left;padding:12px 20px;color:var(--text-muted);font-size:12px;font-family:var(--mono)}
.h-table th,.h-table td{text-align:left;padding:10px 20px;border-bottom:1px solid var(--line-subtle);vertical-align:top}
.h-table thead th{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--text-muted);border-bottom-color:var(--line)}
.h-table tbody tr:last-child>*{border-bottom:0}
.h-table-mono{font-family:var(--mono)}
.h-table-mono td+td{color:var(--text-2)}
.h-code-box{border:1px solid var(--line);border-radius:12px;background:var(--bg-deep);overflow:hidden}
.h-tabs-sm{align-items:center}
.h-code-src{margin-left:auto;padding:0 14px;font-family:var(--mono);font-size:12px;color:var(--text-muted);white-space:nowrap}
.h-src{padding:14px 16px;overflow-x:auto;white-space:pre;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--text-2)}
@media (min-width:1024px){.h-src{font-size:12px}}
.h-src .ln{display:inline-block;width:3ch;margin-right:14px;text-align:right;color:var(--text-muted);user-select:none}

/* compare */
.h-cmp{min-width:640px}
.h-cmp th,.h-cmp td{padding:12px 20px}
.h-cmp tbody th{font-weight:600;color:var(--text)}
.h-cmp tbody td{color:var(--text-muted)}
.h-cmp thead th.h-sup{color:var(--text)}
.h-cmp .h-sup{border-left:1px solid var(--policy)}
.h-cmp tbody td.h-sup{color:var(--text)}
.h-enf{display:inline-block;font-family:var(--mono);font-size:11px;line-height:18px;color:var(--policy);border:1px solid var(--policy);border-radius:4px;padding:0 5px;margin-left:6px;white-space:nowrap}
.h-footnote{margin-top:12px!important;font-size:13px;line-height:1.5;color:var(--text-muted)}

/* stats */
.h-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--surface)}
.h-stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px}
.h-stats dt{font-size:13px;color:var(--text-muted)}
.h-stats dd{font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.2}
@media (min-width:768px){.h-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.h-stats{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* deploy */
.h-grid4{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:640px){.h-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.h-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h-grid4 .h-card-body{line-height:1.6}
.h-grid4 .h-card-title{font-size:16px}

/* closing CTA */
.h-final{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:clamp(24px,4vw,48px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.h-final-copy{display:flex;flex-direction:column;gap:10px;flex:1 1 420px;min-width:0}
.h-final-title{font-size:clamp(28px,3.4vw,36px)}
.h-final .h-body{font-size:16px}

@media (prefers-reduced-motion:reduce){
  .h-pkt{display:none}
  .h-insp .h-dot{animation:none!important}
}

/* review fixes 11-05 */
@media (min-width:1024px) and (max-width:1279.98px){.h-chips{grid-template-columns:minmax(0,1fr)}}
.h-code-box{margin-top:12px}

/* overview video: trigger + modal player */
.h-video-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;background:none;border:0;color:var(--text-2);font:inherit;font-size:16px;cursor:pointer}
.h-video-btn:hover{color:#fff}
.h-play{width:30px;height:30px;border-radius:15px;border:1px solid var(--line-control);display:inline-flex;align-items:center;justify-content:center;color:var(--text);padding-left:2px}
.h-video{padding:0;border:0;background:transparent;width:min(960px,92vw);max-width:none;max-height:92vh;overflow:visible;color:var(--text)}
.h-video::backdrop{background:rgba(11,18,32,.85)}
.h-video-frame{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:52px 12px 12px}
.h-video-close{position:absolute;top:4px;right:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:8px;color:var(--text-2);cursor:pointer}
.h-video-close:hover{color:#fff;background:var(--surface-2)}
.h-video-slot video{display:block;width:100%;aspect-ratio:16/9;background:var(--bg-deep);border-radius:8px}