/* ===== Use-case landing pages ===== */

/* two-column hero */
.uc-hero-sec{padding:54px 0 26px}
.uc-hero{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.04fr 0.96fr;gap:56px;align-items:center;
}
.uc-hero-main{min-width:0}
.uc-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  padding:6px 13px 6px 8px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--bg-2);
  font-size:13px;color:var(--ink-2);font-weight:500;box-shadow:var(--shadow-sm);
  /* let the description wrap rather than crushing the pill beside it */
  flex-wrap:wrap;
}
.uc-eyebrow .tag{
  padding:2px 9px;border-radius:999px;background:var(--blue);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;font-weight:500;
  /* "USE CASE" broke across two lines inside the chip at 320 */
  white-space:nowrap;
}
html[data-theme="dark"] .uc-eyebrow .tag{background:#e6ecff;color:#0a0f26}
.uc-hero-main{container-type:inline-size}
/* "Dedicated seedbox servers" is the widest black half here at 8.99cqw/px */
.uc-hero .page-title{font-size:clamp(26px, 8.6cqw, 50px);max-width:none}
.uc-hero .page-lede{font-size:17.5px;max-width:52ch}
.uc-hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
/* Grid, not a wrapping flex row: inside the two-column network hero the left
   track is ~470px at 1024, so exactly three of the four stats fit and the
   fourth was orphaned on a row of its own. Auto-fit gives 4-up when there is
   room and an even 2×2 when there isn't — never a single stranded cell. */
.uc-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:20px 30px;margin-top:32px;
  border-top:1px solid var(--hairline);padding-top:22px;
}
.uc-stat .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.uc-stat .v{display:flex;align-items:baseline;gap:5px;font-size:27px;font-weight:500;letter-spacing:-0.025em;margin-top:6px;color:var(--ink)}
.uc-stat .v .u{font-size:13px;color:var(--muted);font-weight:400}

.uc-subnav-wrap{position:relative;z-index:1;margin-top:38px}

/* ===== bespoke hero panel ===== */
.panel{
  position:relative;border:1px solid var(--hairline);border-radius:var(--radius-lg);
  background:var(--bg-2);box-shadow:var(--shadow-lg);overflow:hidden;
}
.panel::after{
  content:"";position:absolute;inset:0 0 auto 0;height:140px;pointer-events:none;z-index:0;
  background:radial-gradient(120% 100% at 50% -20%, color-mix(in oklab,var(--blue) 12%, transparent), transparent 70%);
}
.panel-head{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--hairline);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:var(--muted);
}
.panel-head .ttl{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-weight:500}
.panel-head .live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(0,209,178,.15);animation:pulse 2.2s ease-in-out infinite;
}
.panel-head .rt{color:var(--muted-2);white-space:nowrap}
.panel-body{position:relative;z-index:1;padding:20px}
.panel-foot{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);
}
.panel-foot .c{padding:14px 16px;border-right:1px solid var(--hairline)}
.panel-foot .c:last-child{border-right:0}
.panel-foot .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.panel-foot .v{font-size:19px;font-weight:600;letter-spacing:-0.02em;margin-top:5px;color:var(--ink)}
.panel-foot .v small{font-size:11px;color:var(--muted);font-weight:400}

/* metric rows — shared by VPN / gaming / storage panels */
.mrows{display:flex;flex-direction:column;gap:13px}
.mrow{display:grid;grid-template-columns:128px 1fr auto;gap:14px;align-items:center}
.mrow .lab{font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .lab small{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);font-weight:400;letter-spacing:0}
.mrow .track{height:6px;border-radius:99px;background:var(--bg-tint);overflow:hidden}
.mrow .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--blue-500))}
.mrow .track.good i{background:linear-gradient(90deg,#15b88a,#28d0a8)}
.mrow .val{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-2);white-space:nowrap;min-width:54px;text-align:right}
.mrow .val.hl{color:var(--blue);font-weight:500}
html[data-theme="dark"] .mrow .val.hl{color:var(--blue-600)}
.mrow .val.ok{color:#0a9e7a}
html[data-theme="dark"] .mrow .val.ok{color:#28d0a8}

/* ABR encoding ladder — streaming panel */
.ladder{display:flex;flex-direction:column;gap:12px;padding:2px 0}
.lad-src{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;margin-bottom:2px;
  border:1px dashed var(--hairline);border-radius:9px;background:var(--bg-tint);
  font-family:'JetBrains Mono',monospace;
}
.lad-src .lab{font-size:10px;letter-spacing:.11em;color:var(--muted-2)}
.lad-src .spec{font-size:11.5px;color:var(--ink-2);font-weight:500}
.rung{display:grid;grid-template-columns:64px 1fr auto;gap:13px;align-items:center}
.rung .res{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;color:var(--ink-2);letter-spacing:-0.01em}
.rung .res em{font-style:normal;color:var(--muted-2);font-size:10px;margin-left:1px}
.rung .track{height:7px;border-radius:99px;background:var(--bg-tint);overflow:hidden}
.rung .track i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--blue-500));
  transform-origin:left;animation:ladgrow .85s cubic-bezier(.2,.7,.2,1) both;
}
html[data-theme="dark"] .rung .track i{background:linear-gradient(90deg,var(--blue-600),var(--blue-400))}
.rung:nth-child(2) .track i{animation-delay:.04s}
.rung:nth-child(3) .track i{animation-delay:.12s}
.rung:nth-child(4) .track i{animation-delay:.20s}
.rung:nth-child(5) .track i{animation-delay:.28s}
.rung .br{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2);white-space:nowrap;min-width:58px;text-align:right}
.rung .br small{color:var(--muted);font-size:9.5px;margin-left:2px;font-weight:400}
@keyframes ladgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.rung .track i{animation:none}}
.eq-cap{
  display:flex;align-items:center;justify-content:space-between;margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
}
.eq-cap b{color:var(--ink-2);font-weight:500}

/* tile wall — VOD panel */
.tilewall{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tile{
  position:relative;aspect-ratio:2/3;border-radius:7px;overflow:hidden;
  border:1px solid var(--hairline);
  background:
    linear-gradient(150deg, color-mix(in oklab,var(--blue) 22%, var(--bg-tint)), var(--bg-tint));
}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,42,119,.18))}
.tile.play::after{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);
  border-left:9px solid color-mix(in oklab,#fff 88%,transparent);border-top:6px solid transparent;border-bottom:6px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.tile.lg{grid-row:span 2;aspect-ratio:auto}

/* CTA bg helper for panels in dark */
@media (max-width:920px){
  .uc-hero{grid-template-columns:1fr;gap:36px}
  .uc-hero-aside{order:2}
  .mrow{grid-template-columns:110px 1fr auto}
}

@media (max-width:600px){
  .uc-hero-sec{padding:34px 0 20px}
  .uc-stats{gap:20px 26px;margin-top:24px;padding-top:18px}
  .uc-stat .v{font-size:23px}
  .uc-subnav-wrap{margin-top:26px}
  /* .rt is nowrap, so in a row it holds its width and squeezes .ttl down to
     min-content — "SESSION PROFILE · AS25198" broke into three stacked words
     with the live dot centred against the middle one. Stack the header. */
  .panel-head{padding:12px 14px;gap:5px;flex-direction:column;align-items:flex-start}
  .panel-body{padding:16px 14px}
  /* 3 cells across a phone: the longest key ("GLOBAL RANK") has to stay on
     one line or its value drops a row below its neighbours'. */
  .panel-foot .c{padding:12px 9px}
  .panel-foot .v{font-size:16px}
  .panel-foot .k{font-size:10.5px;white-space:nowrap;letter-spacing:.03em}
  /* 128px of label + a 54px readout left the bar itself ~90px wide. */
  .mrow{grid-template-columns:1fr auto;gap:4px 10px}
  .mrow .lab{grid-column:1;white-space:normal;overflow:visible}
  .mrow .val{grid-column:2}
  .mrow .track{grid-column:1 / -1;grid-row:2}
  .rung{grid-template-columns:52px 1fr auto;gap:10px}
  .rung .br{min-width:0;font-size:11px}
  .lad-src{flex-wrap:wrap;gap:4px 10px}
  .eq-cap{flex-direction:column;align-items:flex-start;gap:4px}
  /* 10 tiles: keep 5 across at every width so the wall stays two even rows.
     4 or 6 columns leave a ragged half-empty last row. */
  .tilewall{gap:6px}
  /* Micro-label floor: 10px mono reads fine on a 27" panel, not in the hand.
     These live here rather than in pages.css because usecases.css loads last
     and would otherwise win the cascade at equal specificity. */
  .uc-eyebrow .tag,
  .lad-src .lab,
  .rung .res em,
  .rung .br small,
  .mrow .lab small{font-size:11px}
}

@media (max-width:430px){
  /* Three stats in a wrapping flex row land 2 + 1, leaving the second row
     conspicuously half empty. Match .hero-meta and stack them. */
  .uc-stats{display:grid;grid-template-columns:1fr;gap:14px}
  /* Three 93px cells: "latency · loss · jitter" broke over three lines while
     its neighbours stayed on one, so the readout lost its shared baseline. */
  .panel-foot{grid-template-columns:1fr}
  .panel-foot .c{border-right:0;border-bottom:1px solid var(--hairline);padding:11px 14px}
  .panel-foot .c:last-child{border-bottom:0}
  .panel-foot .v{font-size:17px}
}