/* S4 — "Why it matters": the same app built in silence (flat, 2 signups) vs built in public (three shorts → a climbing chart).
   Resting state = the finished scene; s4.js replays it while .nx-s4 has .is-playing. Every selector is scoped to .nx-s4. */

.nx-s4 .nx-eyebrow.is-plain{ font-family: inherit; font-size: clamp(.8rem, .95vw, .95rem); letter-spacing: .5em; margin-right: -.5em; color: rgba(243,239,231,.86); }
.nx-s4 .nx-h2{ font-size: clamp(2.6rem, 6.3vw, 6.2rem); margin-top: 12px; white-space: nowrap; -webkit-text-stroke: .018em currentColor; }
.nx-s4 .nx-h2 .nx-grad{ -webkit-text-stroke: 0; }
.nx-s4 .nx-h2 .nx-line{ display:inline; }
.nx-s4 .nx-copy-block{ max-width: 1000px; }
.nx-s4 .nx-lede{ font-size: clamp(1.05rem, 1.55vw, 1.5rem); line-height:1.5; max-width: 34em; margin-top: 10px; color: rgba(243,239,231,.84); }

/* ---------- the stage: two panels and an arrow ---------- */
.nx-s4 .nx-s4-stage{ --nx-s4-ink: #eef0ff; --nx-s4-dim: rgba(220,226,255,.62); --nx-s4-faint: rgba(200,208,255,.42);
  display:grid; grid-template-columns: minmax(0, 1fr) clamp(44px, 4.4vw, 72px) minmax(0, 1.03fr); align-items:center;
  margin-top: clamp(24px, 3.4vh, 38px); margin-bottom: clamp(0px, 9vh, 100px); width: calc(100% + clamp(0px, 3vw, 44px)); margin-inline: calc(clamp(0px, 3vw, 44px) / -2);
  perspective: 2000px; text-align:left; font-size: clamp(12px, .95vw, 15px); color: var(--nx-s4-ink); }
.nx-s4 .nx-floor-glow{ left:48%; right:-2%; bottom:-80px; height:120px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(224,64,154,.40), rgba(155,92,255,.22) 45%, transparent 75%); }
.nx-s4 .nx-s4-stage::after, .nx-s4 .nx-s4-stage::before{ content:''; position:absolute; top: calc(100% + 6px); height: clamp(40px, 7vh, 90px); pointer-events:none; filter: blur(14px); }
.nx-s4 .nx-s4-stage::after{ left:2%; width:44%; background: linear-gradient(180deg, rgba(63,150,255,.28), transparent 85%); -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.nx-s4 .nx-s4-stage::before{ right:1%; width:47%; background: linear-gradient(180deg, rgba(210,70,255,.75), rgba(120,90,255,.25) 45%, transparent 90%); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.nx-s4 .nx-s4-panel{ position:relative; border-radius: 22px; padding: clamp(12px, 1.2vw, 18px); z-index:1; }
.nx-s4 .nx-s4-quiet{ background: rgba(9,12,34,.72); border: 2px solid rgba(80,190,255,.95);
  box-shadow: 0 0 0 1px rgba(63,214,255,.25), 0 0 18px 0 rgba(56,160,255,.6), 0 0 44px -6px rgba(56,130,255,.5), inset 0 0 24px -8px rgba(63,170,255,.55), 0 40px 90px -40px rgba(0,0,0,.9); }
.nx-s4 .nx-s4-loud{ --nx-r: 24px; --nx-neon-w: 5px; --nx-neon: linear-gradient(115deg, #2fb8ff 0%, #2f5cff 24%, #7a3dff 50%, #c92cff 74%, #ff2fb0 100%); transform: rotateY(-4deg); transform-origin: 0% 50%;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 0 0 40px 4px rgba(120,90,255,.55), 0 0 110px 14px rgba(210,60,210,.35), 18px 16px 90px -10px rgba(224,64,154,.6); }
.nx-s4 .nx-s4-loud::before{ filter: brightness(1.12) saturate(1.5); }
.nx-s4 .nx-s4-loud::after{ filter: blur(16px) brightness(1.35) saturate(1.8); inset:-4px; }
.nx-s4 .nx-s4-surface{ position:relative; border-radius: 16px; border:1px solid rgba(160,170,255,.10);
  background: linear-gradient(180deg, rgba(26,28,66,.55), rgba(14,15,42,.55)); padding: clamp(14px, 1.3vw, 20px) clamp(12px, 1.2vw, 18px) clamp(14px, 1.3vw, 20px); }
.nx-s4 .nx-s4-loud .nx-s4-surface{ background: linear-gradient(180deg, rgba(34,30,84,.55), rgba(22,16,58,.55)); }

.nx-s4 .nx-s4-head{ display:flex; align-items:center; gap: .8em; font-size: 1.75em; font-weight:600; letter-spacing:-.01em; margin: .1em 0 .7em .1em; }
.nx-s4 .nx-s4-dot{ flex:none; width: 1.05em; height: 1.05em; border-radius:50%; background: radial-gradient(circle at 35% 30%, #5a5f80, #2b2e48 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.nx-s4 .nx-s4-loud .nx-s4-dot{ background: radial-gradient(circle at 34% 30%, #f4ecff 0%, #b98cff 34%, #7a45f0 70%, #3c1a9a 100%); box-shadow: 0 0 16px rgba(170,110,255,.9), 0 0 4px rgba(255,255,255,.4); }

.nx-s4 .nx-s4-body{ display:grid; gap: clamp(10px, 1.1vw, 16px); align-items:stretch; }
.nx-s4 .nx-s4-quiet .nx-s4-body{ grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); }
.nx-s4 .nx-s4-loud .nx-s4-body{ grid-template-columns: minmax(0, .56fr) clamp(26px, 2.6vw, 40px) minmax(0, 1fr); gap: clamp(4px, .5vw, 8px); }

/* sidebar */
.nx-s4 .nx-s4-side{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: .35em; color: var(--nx-s4-dim); font-size: max(12px, .95em); }
.nx-s4 .nx-s4-side li{ display:flex; align-items:center; gap: .95em; padding: .85em .9em; border-radius: 10px; white-space:nowrap; }
.nx-s4 .nx-s4-side li.is-on{ background: rgba(90,100,170,.22); color: var(--nx-s4-ink); }
.nx-s4 .nx-s4-side svg{ flex:none; width: 1.35em; height:1.35em; fill:none; stroke: currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }

/* cards, chart, stats */
.nx-s4 .nx-s4-main{ display:flex; flex-direction:column; gap: clamp(8px, .9vw, 12px); min-width:0; }
.nx-s4 .nx-s4-card{ border-radius: 12px; border:1px solid rgba(160,170,255,.14); background: rgba(22,24,58,.55); }
.nx-s4 .nx-s4-loud .nx-s4-card{ border-color: rgba(170,140,255,.34); background: rgba(34,26,82,.5); box-shadow: inset 0 0 22px -12px rgba(155,92,255,.8); }
.nx-s4 .nx-s4-chart{ padding: 1.3em 1.5em 1em 1.3em; }
.nx-s4 .nx-s4-today{ display:flex; align-items:baseline; gap:.45em; font-size: 1.3em; color: rgba(230,234,255,.85); margin-bottom: .9em; }
.nx-s4 .nx-s4-today .nx-s4-num{ font-size: 1.85em; font-weight:600; color:#fff; font-variant-numeric: tabular-nums; line-height:1; display:inline-block; }
.nx-s4 .nx-s4-graph{ position:relative; display:grid; grid-template-columns: 2.4em minmax(0, 1fr); grid-template-rows: auto auto; row-gap: .7em; }
.nx-s4 .nx-s4-y{ position:relative; grid-row:1; font-size: max(12px, .85em); color: var(--nx-s4-dim); }
.nx-s4 .nx-s4-y span{ position:absolute; right: .7em; transform: translateY(-50%); line-height:1; }
.nx-s4 .nx-s4-plot{ position:relative; grid-row:1; grid-column:2; height: clamp(84px, 8.2vw, 124px); }
.nx-s4 .nx-s4-plot svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.nx-s4 .nx-s4-grid path{ fill:none; stroke: rgba(170,180,255,.12); stroke-width:1; vector-effect: non-scaling-stroke; }
.nx-s4 .nx-s4-x{ position:relative; grid-column:2; height: 1.1em; font-size: max(12px, .85em); color: var(--nx-s4-dim); }
.nx-s4 .nx-s4-x span{ position:absolute; top:0; transform: translateX(-50%); white-space:nowrap; line-height:1; }
.nx-s4 .nx-s4-x span:first-child{ transform: translateX(-30%); }
.nx-s4 .nx-s4-x span:last-child{ transform: translateX(-80%); }
.nx-s4 .nx-s4-reveal{ position:absolute; inset:-14px; }
.nx-s4 .nx-s4-reveal svg{ inset:14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.nx-s4 .nx-s4-line{ fill:none; stroke-width:2; vector-effect: non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.nx-s4 .nx-s4-quiet .nx-s4-line{ stroke: rgba(200,206,230,.62); }
.nx-s4 .nx-s4-loud .nx-s4-line{ stroke: url(#nx-s4-stroke); stroke-width:3; filter: drop-shadow(0 0 4px rgba(120,140,255,1)) drop-shadow(0 0 10px rgba(190,90,255,.8)); }
.nx-s4 .nx-s4-area{ fill: url(#nx-s4-fill); }

/* the head of each line (a dot at the latest day); the layer is plot-sized so translate % = fractions of the plot */
.nx-s4 .nx-s4-head-layer{ position:absolute; inset:0; pointer-events:none; }
.nx-s4 .nx-s4-tip{ position:absolute; left:100%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; }
.nx-s4 .nx-s4-quiet .nx-s4-tip{ top:91.7%; background:#aab0c8; opacity:.0; }
.nx-s4 .nx-s4-loud .nx-s4-tip{ top:2.7%; width:14px; height:14px; margin:-7px 0 0 -7px; background:#ffd6ff; box-shadow: 0 0 0 3px rgba(255,80,210,.55), 0 0 18px 4px rgba(255,80,210,.85); }

.nx-s4 .nx-s4-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, .9vw, 14px); }
.nx-s4 .nx-s4-stat{ display:flex; align-items:center; gap: clamp(.6em, .8vw, 1em); padding: .95em clamp(.8em, .9vw, 1.2em); min-width:0; }
.nx-s4 .nx-s4-stat svg{ flex:none; width: 2.1em; height: 2.1em; fill:none; stroke: rgba(210,216,245,.72); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.nx-s4 .nx-s4-loud .nx-s4-stat svg{ stroke: #e6dcff; }
.nx-s4 .nx-s4-stat small{ display:block; font-size: max(12px, .88em); color: var(--nx-s4-dim); white-space:nowrap; }
.nx-s4 .nx-s4-stat b{ display:block; font-size: 1.45em; font-weight:500; color:#fff; font-variant-numeric: tabular-nums; margin-top: .1em; }

/* the arrow between the panels */
.nx-s4 .nx-s4-between{ justify-self:center; width: 100%; max-width: 52px; height:auto; fill:none; stroke: #9fdcff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 6px rgba(63,214,255,.9)) drop-shadow(0 0 16px rgba(93,123,255,.7)); position:relative; z-index:2; }

/* the shorts */
.nx-s4 .nx-s4-shorts{ display:flex; flex-direction:column; justify-content:space-between; gap: clamp(7px, .7vw, 11px); min-width:0; }
.nx-s4 .nx-s4-short{ position:relative; margin:0; flex:none; aspect-ratio: 16 / 9.2; border-radius: 10px; overflow:hidden; background:#1b1a22;
  box-shadow: 0 0 0 2px rgba(120,150,255,.9), 0 0 16px -2px rgba(110,120,255,.85); }
.nx-s4 .nx-s4-short img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 50%; display:block; }
.nx-s4 .nx-s4-short::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); pointer-events:none; }
.nx-s4 .nx-s4-short figcaption{ position:absolute; right: 4%; top: 7%; min-width: 36%; z-index:1; padding: .35em .45em .4em; border-radius: 5px; background: rgba(8,8,10,.86);
  font-family: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif; text-transform:uppercase; text-align:center; font-size: clamp(12px, 1.12vw, 17px); line-height:1.02; color:#fff; letter-spacing:.01em; transform: rotate(-4deg); }
.nx-s4 .nx-s4-short figcaption{ white-space: nowrap; }
.nx-s4 .nx-s4-short figcaption b{ display:block; color:#ffd84a; font-weight:inherit; }
.nx-s4 .nx-s4-views{ position:absolute; left: 7%; bottom: 8%; z-index:1; display:flex; align-items:center; gap:.4em; font-weight:600; font-size: 1.1em; color:#fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); white-space:nowrap; }
.nx-s4 .nx-s4-views svg{ width: 1.15em; height:1.15em; fill:#fff; }
.nx-s4 .nx-s4-views b{ font-weight:inherit; font-variant-numeric: tabular-nums; }

/* the glowing hooks from each short into the chart */
.nx-s4 .nx-s4-links{ display:flex; flex-direction:column; justify-content:space-around; min-width:0; }
.nx-s4 .nx-s4-link{ width:100%; height:auto; overflow:visible; fill:none; stroke: #5fb8ff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 4px rgba(63,214,255,.95)) drop-shadow(0 0 10px rgba(93,123,255,.7)); }

/* ---------- the animation (driven by s4.js; resting state = everything shown) ---------- */
.nx-s4.nx-s4-snap *{ transition: none !important; }
.nx-s4.is-playing .nx-s4-short{ transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1.15), box-shadow .6s ease; }
.nx-s4.is-playing .nx-s4-short:not(.is-in){ opacity:.08; transform: translateY(14px) scale(.94); box-shadow: 0 0 0 1px rgba(120,150,255,.3); }
.nx-s4.is-playing .nx-s4-short.is-hot{ box-shadow: 0 0 0 2px rgba(255,120,220,.95), 0 0 28px 2px rgba(224,64,154,.8); }
.nx-s4.is-playing .nx-s4-link{ transition: opacity .5s ease, filter .5s ease; }
.nx-s4.is-playing .nx-s4-link:not(.is-in){ opacity:.1; }
.nx-s4.is-playing .nx-s4-link .nx-s4-stroke{ stroke-dasharray: 60; stroke-dashoffset: 60; }
.nx-s4.is-playing .nx-s4-link.is-in .nx-s4-stroke{ stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.6,.1,.3,1); }
.nx-s4.is-playing .nx-s4-link.is-hot{ filter: drop-shadow(0 0 6px #7ff0ff) drop-shadow(0 0 16px rgba(155,92,255,.95)); }

.nx-s4.is-playing .nx-s4-reveal{ transition: clip-path 1.1s cubic-bezier(.45,.05,.3,1); clip-path: inset(0 calc(100% - 14px) 0 0); }
.nx-s4.is-playing .nx-s4-reveal.is-1{ clip-path: inset(0 calc((100% - 28px) * .6667 + 14px) 0 0); }
.nx-s4.is-playing .nx-s4-reveal.is-2{ clip-path: inset(0 calc((100% - 28px) * .3333 + 14px) 0 0); }
.nx-s4.is-playing .nx-s4-reveal.is-3{ clip-path: inset(0 0 0 0); }
.nx-s4.is-playing .nx-s4-head-layer{ transition: transform 1.1s cubic-bezier(.45,.05,.3,1), opacity .3s ease; }
.nx-s4.is-playing .nx-s4-loud .nx-s4-head-layer{ opacity:0; transform: translate(-100%, 95.3%); }
.nx-s4.is-playing .nx-s4-loud .nx-s4-head-layer.is-1{ opacity:1; transform: translate(-66.667%, 77.8%); }
.nx-s4.is-playing .nx-s4-loud .nx-s4-head-layer.is-2{ opacity:1; transform: translate(-33.333%, 46.8%); }
.nx-s4.is-playing .nx-s4-loud .nx-s4-head-layer.is-3{ opacity:1; transform: none; }
.nx-s4.is-playing .nx-s4-quiet .nx-s4-tip{ opacity:1; }
.nx-s4.is-playing .nx-s4-quiet .nx-s4-head-layer{ transform: translate(-100%, 3.3%); }
.nx-s4.is-playing .nx-s4-quiet .nx-s4-head-layer.is-1{ transform: translate(-66.667%, 0%); }
.nx-s4.is-playing .nx-s4-quiet .nx-s4-head-layer.is-2{ transform: translate(-33.333%, 1.6%); }
.nx-s4.is-playing .nx-s4-quiet .nx-s4-head-layer.is-3{ transform: none; }
.nx-s4.is-playing .nx-s4-num{ transition: transform .35s ease, color .35s ease, text-shadow .35s ease; }
.nx-s4.is-playing .nx-s4-loud .nx-s4-num.is-bump{ transform: scale(1.12); color:#ffe2ff; text-shadow: 0 0 16px rgba(255,80,210,.9); }
.nx-s4.is-playing .nx-s4-quiet .nx-s4-num.is-bump{ color: rgba(200,206,230,.55); }
@media (prefers-reduced-motion: no-preference){
  .nx-s4.is-playing .nx-s4-loud .nx-s4-head-layer.is-3 .nx-s4-tip{ animation: nx-s4-ping 1.4s ease-out 1.1s 2; }
  .nx-s4.is-playing .nx-s4-loud .nx-s4-dot{ animation: nx-s4-live 1.8s ease-in-out infinite; }
}
@keyframes nx-s4-ping{ 0%{ box-shadow: 0 0 0 3px rgba(255,80,210,.55), 0 0 18px 4px rgba(255,80,210,.85); } 60%{ box-shadow: 0 0 0 14px rgba(255,80,210,0), 0 0 26px 8px rgba(255,80,210,.95); } 100%{ box-shadow: 0 0 0 3px rgba(255,80,210,.55), 0 0 18px 4px rgba(255,80,210,.85); } }
@keyframes nx-s4-live{ 50%{ box-shadow: 0 0 26px 4px rgba(170,110,255,1), 0 0 4px rgba(255,255,255,.5); } }

/* short desktop screens (1366×768, 1280×800): a vh cap on the headline keeps the built-in-public card clear of the fold */
@media (min-width: 1081px) and (max-height: 860px){
  .nx-s4 .nx-h2{ font-size: clamp(2.6rem, min(6.3vw, 10vh), 6.2rem); }
  .nx-s4 .nx-s4-stage{ margin-top: 20px; }
}

/* ---------- smaller screens: flat, stacked ---------- */
@media (max-width: 1080px){
  .nx-s4 .nx-h2{ white-space: normal; }
  .nx-s4 .nx-s4-stage{ grid-template-columns: minmax(0, 1fr); width:100%; margin-inline:0; max-width: 720px; margin-left:auto; margin-right:auto; row-gap: 10px; font-size: clamp(12px, 1.9vw, 15px); }
  .nx-s4 .nx-s4-loud{ transform:none; }
  .nx-s4 .nx-s4-between{ transform: rotate(90deg); max-width: 40px; }
  .nx-s4 .nx-s4-stage::after, .nx-s4 .nx-s4-stage::before{ display:none; }
  .nx-s4 .nx-s4-stage{ margin-bottom: 40px; }
  .nx-s4 .nx-floor-glow{ left:4%; right:4%; bottom:-50px; }
  .nx-s4 .nx-s4-plot{ height: clamp(90px, 16vw, 130px); }
  /* the shorts line up across the top and feed down into the chart */
  .nx-s4 .nx-s4-loud .nx-s4-body{ grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .nx-s4 .nx-s4-shorts{ flex-direction:row; gap: 8px; }
  .nx-s4 .nx-s4-short{ flex: 1 1 0; aspect-ratio: 16 / 11; }
  .nx-s4 .nx-s4-short figcaption{ font-size: clamp(12px, 1.9vw, 16px); }
  .nx-s4 .nx-s4-links{ flex-direction:row; height: 30px; }
  .nx-s4 .nx-s4-link{ width: 28px; height: 38px; margin: -4px auto 0; transform: rotate(90deg); }
}
@media (max-width: 640px){
  .nx-s4 .nx-h2 .nx-line{ display:block; }
  .nx-s4 .nx-lede{ font-size: 1.05rem; }
  .nx-s4 .nx-s4-stage{ font-size: 12px; }
  .nx-s4 .nx-s4-panel{ padding: 8px; border-radius: 18px; }
  .nx-s4 .nx-s4-loud{ --nx-r: 18px; --nx-neon-w: 3px; }
  .nx-s4 .nx-s4-loud::after{ inset:-3px; padding: 5px; filter: blur(10px) brightness(2) saturate(1.5); }
  .nx-s4 .nx-s4-surface{ padding: 12px 10px; border-radius: 12px; }
  .nx-s4 .nx-s4-head{ font-size: 1.45em; margin-bottom: .6em; }
  .nx-s4 .nx-s4-quiet .nx-s4-body{ grid-template-columns: minmax(0, 1fr); }
  .nx-s4 .nx-s4-side{ display:none; }
  .nx-s4 .nx-s4-shorts{ gap: 6px; }
  .nx-s4 .nx-s4-short{ aspect-ratio: 4 / 5; }
  .nx-s4 .nx-s4-short img{ object-position: 50% 50%; } /* the portrait -tall crops load here (<picture> in s4.html) */
  /* on a narrow card the sticker sits low, over the shirt, so the face stays visible */
  .nx-s4 .nx-s4-short figcaption{ top: auto; bottom: 21%; right: 5%; left: auto; min-width: 0; width: auto; max-width: 90%; font-size: 12px; }
  .nx-s4 .nx-s4-views{ left: 6%; bottom: 6%; font-size: 12px; }
  .nx-s4 .nx-s4-links{ height: 26px; }
  .nx-s4 .nx-s4-link{ width: 26px; height: 34px; }
  .nx-s4 .nx-s4-chart{ padding: 1em 1em .8em .8em; }
  .nx-s4 .nx-s4-plot{ height: 92px; }
  .nx-s4 .nx-s4-stat{ padding: .8em .8em; gap: .7em; }
  .nx-s4 .nx-s4-stat svg{ width: 1.8em; height: 1.8em; }
}