/* Homepage "How it works": a dark cinematic band. The growth loop ring, each station's film, the leak funnel and the products behind them. */
.loop-section{position:relative;padding:130px 0 140px;background:var(--ink);color:var(--paper);overflow:clip}
.loop-section::before{content:'';position:absolute;inset:0;background:radial-gradient(50% 60% at 18% 30%,#e0161e1a,transparent 70%),radial-gradient(40% 50% at 90% 80%,#ffffff08,transparent 70%);pointer-events:none}
.loop-section .container{position:relative}
.loop-section .eyebrow{color:var(--nardo)}
.loop-section .lede{color:var(--nardo-soft)}
.loop-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:center}
.loop-ring{position:relative;width:100%;max-width:600px;aspect-ratio:1;margin:0 auto}
.loop-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop-track{fill:none;stroke:#ffffff1f;stroke-width:2}
.loop-dash{fill:none;stroke:#ffffff2e;stroke-width:1;stroke-dasharray:2 12;transform-box:view-box;transform-origin:300px 300px}
.loop-comet{--turn:0deg;transform-box:view-box;transform-origin:300px 300px;transform:rotate(var(--turn));transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
.loop-tail{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:200 1445;transform-box:view-box;transform-origin:300px 300px;transform:rotate(-140deg);filter:drop-shadow(0 0 8px var(--red))}
.loop-head{fill:#fff;stroke:var(--red);stroke-width:4;filter:drop-shadow(0 0 14px var(--red))}
.loop-core{position:absolute;top:50%;left:50%;width:46%;transform:translate(-50%,-50%);text-align:center}
.loop-core span{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nardo)}
.loop-core p{font-size:clamp(22px,2.3vw,34px);line-height:1.1;letter-spacing:-.02em}
.loop-core em{font-family:'instrument-serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--red)}
.loop-nodes{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.loop-nodes li{position:absolute;transform:translate(-50%,-50%)}
.loop-nodes li:nth-child(1){left:50%;top:11.67%}
.loop-nodes li:nth-child(2){left:83.2%;top:30.83%}
.loop-nodes li:nth-child(3){left:83.2%;top:69.17%}
.loop-nodes li:nth-child(4){left:50%;top:88.33%}
.loop-nodes li:nth-child(5){left:16.8%;top:69.17%}
.loop-nodes li:nth-child(6){left:16.8%;top:30.83%}
.loop-node{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid #ffffff26;border-radius:999px;background:#111315d9;color:var(--paper);font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px);transition:background .35s,color .35s,border-color .35s,transform .35s,box-shadow .35s}
.loop-node span{font-family:'instrument-serif',Georgia,serif;font-style:italic;font-weight:400;font-size:18px;color:var(--red);transition:color .35s}
.loop-node:hover{border-color:#ffffff73}
.loop-node[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.1);box-shadow:0 0 0 6px #e0161e1f,0 14px 40px #e0161e59}
.loop-node[aria-pressed="true"] span{color:#fff}
.loop-node:focus-visible{outline:2px solid #fff;outline-offset:3px}

.loop-details{position:relative}
.loop-films{position:relative;aspect-ratio:4/3;margin-bottom:28px;border-radius:14px;overflow:hidden;background:var(--ink);box-shadow:0 30px 80px #00000080}
.loop-films .ambient-film{opacity:0;transition:opacity .9s ease}
.loop-films .ambient-film.is-active{opacity:1}
.loop-films::after{content:'';position:absolute;inset:0;border:1px solid #ffffff17;border-radius:inherit;pointer-events:none}
.loop-detail{padding:26px 0;border-top:1px solid #ffffff1c}
.loop-detail-meta{display:flex;align-items:baseline;gap:12px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--nardo)}
.loop-detail-no{font-family:'instrument-serif',Georgia,serif;font-style:italic;font-weight:400;font-size:44px;line-height:.8;letter-spacing:0;color:var(--red)}
.loop-tool{margin-left:auto;padding:5px 10px;border:1px solid #e0161e66;border-radius:999px;color:var(--red);letter-spacing:.06em}
.loop-detail h3{margin-top:18px;font-size:clamp(28px,2.7vw,42px);line-height:1.04;letter-spacing:-.03em}
.loop-detail p{max-width:520px;margin-top:12px;font-size:17px;line-height:1.55;color:var(--nardo-soft)}
.loop-detail .loop-signal{margin-top:18px;font-size:15px;font-weight:600;color:var(--paper)}
.loop-signal span{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--nardo)}
.loop-guardrail{margin-top:20px;padding:14px 18px;border-left:3px solid var(--red);background:#ffffff0a;font-size:15px;line-height:1.5;color:var(--line)}

/* Guided mode, added by loop.js: one station at a time. Without it, every film poster and station is listed. */
.loop:not(.is-live) .loop-films{display:none}
.loop.is-live .loop-detail{display:none;border-top:0;padding:0}
.loop.is-live .loop-detail.is-active{display:block;animation:loop-in .6s cubic-bezier(.2,.7,.2,1)}
@keyframes loop-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.loop.is-live .loop-dash{animation:loop-spin 60s linear infinite}
@keyframes loop-spin{to{transform:rotate(360deg)}}

.leak{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);margin-top:120px;padding:clamp(28px,3.4vw,52px);border:1px solid #ffffff17;border-radius:14px;background:var(--ink)}
.leak-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px}
.leak-head .eyebrow{margin:0}
.leak-head .sample-label{color:var(--nardo)}
.leak-bars{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.leak-bars li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:16px;row-gap:8px}
.leak-label{font-size:14px;font-weight:600;color:var(--line)}
.leak-track{height:14px;border-radius:999px;background:#ffffff12;overflow:hidden}
.leak-fill{display:block;height:100%;border-radius:inherit;background:var(--paper);transform-origin:0 50%}
.leak-100{width:100%}.leak-58{width:58%}.leak-47{width:47%}.leak-39{width:39%}.leak-23{width:23%}
.is-leak .leak-fill{background:var(--red);box-shadow:0 0 18px #e0161e99}
.leak-flag{grid-column:2;justify-self:start;padding:4px 10px;border:1px solid #e0161e80;border-radius:999px;color:var(--red);font-size:13px;font-weight:600}
.leak-fix{position:relative;display:grid;gap:22px;margin:0;padding:0;list-style:none}
.leak-fix::before{content:'';position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:#ffffff1f}
.leak-fix li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px}
.leak-step{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff2e;border-radius:50%;background:var(--ink);font-size:12px;font-weight:700;transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.leak-fix h4{margin:7px 0 0;font-size:19px;line-height:1.2}
.leak-fix p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--nardo-soft)}

.loop.is-live .leak-fill{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.loop.is-live .leak.is-in .leak-fill{transform:none}
.loop.is-live .leak.is-in li:nth-child(2) .leak-fill{transition-delay:.12s}
.loop.is-live .leak.is-in li:nth-child(3) .leak-fill{transition-delay:.24s}
.loop.is-live .leak.is-in li:nth-child(4) .leak-fill{transition-delay:.36s}
.loop.is-live .leak.is-in li:nth-child(5) .leak-fill{transition-delay:.48s}
.loop.is-live .leak-flag{opacity:0;transition:opacity .5s 1.2s}
.loop.is-live .leak.is-in .leak-flag{opacity:1;animation:leak-pulse 2.4s 1.7s ease-in-out infinite}
@keyframes leak-pulse{50%{box-shadow:0 0 0 6px #e0161e26}}
.loop.is-live .leak.is-in .leak-fix li:nth-child(1) .leak-step{transition-delay:1.6s}
.loop.is-live .leak.is-in .leak-fix li:nth-child(2) .leak-step{transition-delay:2s}
.loop.is-live .leak.is-in .leak-fix li:nth-child(3) .leak-step{transition-delay:2.4s}
.loop.is-live .leak.is-in .leak-fix li:nth-child(4) .leak-step{transition-delay:2.8s}
.loop.is-live .leak.is-in .leak-step{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 16px #e0161e80}

.loop-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.loop-product{display:block;padding:28px;border:1px solid #ffffff17;border-radius:14px;background:var(--ink);color:var(--paper);transition:transform .3s,border-color .3s}
.loop-product:hover{color:#fff;border-color:#e0161e99;transform:translateY(-4px)}
.loop-role{display:block;margin-bottom:18px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.loop-product h4{display:flex;justify-content:space-between;align-items:center;font-size:26px;letter-spacing:-.02em}
.loop-product p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--nardo-soft)}

@media(max-width:900px){
 .loop-section{padding:88px 0 96px}
 .loop-stage{grid-template-columns:1fr}
 .loop-ring{max-width:520px}
 .leak{grid-template-columns:1fr;margin-top:72px}
 .loop-products{grid-template-columns:1fr}
}
@media(max-width:600px){
 .loop-section{padding:64px 0 72px}
 .loop-node{gap:5px;padding:8px 11px;font-size:12px}
 .loop-node span{font-size:14px}
 .loop-core{width:50%}
 .loop-core p{font-size:20px}
 .leak-bars li{grid-template-columns:76px minmax(0,1fr)}
 .loop-tool{margin-left:0}
 .loop-detail-meta{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.loop-comet,.loop.is-live .leak-fill,.loop.is-live .leak-flag,.leak-step,.loop-films .ambient-film{transition:none!important}.loop.is-live .loop-dash,.loop.is-live .leak.is-in .leak-flag,.loop.is-live .loop-detail.is-active{animation:none}}

/* Stations that show software: the whole screen, on the dark stage. */
.loop-films .is-screen{background:radial-gradient(90% 70% at 70% 20%,#e0161e24,#e0161e00 70%),var(--ink)}
.loop-films .is-screen img{inset:clamp(12px,1.6vw,22px);width:calc(100% - 2*clamp(12px,1.6vw,22px));height:calc(100% - 2*clamp(12px,1.6vw,22px));object-fit:contain}