/* GameStop warrants explainer. Scoped to .warr so it cannot touch the shared site styles. */
.warr {
  --bg: #07090B;
  --surface: #0E1216;
  --surface-2: #141A20;
  --line: #222B33;
  --fg: #F4F4F5;
  --muted: #9BA5AF;
  --red: #E2231A;
  --red-bright: #FF4B40;
  --gold: #E9A441;
  --green: #16C784;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: dark;
}
.warr, .warr * { box-sizing: border-box; }
.warr {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  
}
.warr .wrap { max-width: 1040px; margin: 0 auto; padding-block: 28px 56px; display: flex; flex-direction: column; gap: 56px; }
.warr h1, .warr h2, .warr h3, .warr p { margin: 0; }
.warr h1, .warr h2 { text-wrap: balance; }
.warr .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.warr .eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.warr a { color: var(--fg); text-decoration-color: var(--red); text-underline-offset: 3px; }
.warr :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.warr .bar-unused { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.warr .mark { font-weight: 900; font-size: 22px; letter-spacing: .04em; }
.warr .mark b { color: var(--red); font-weight: 900; }
.warr .mark span { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; color: var(--muted); margin-left: 12px; text-transform: uppercase; }
.warr .hero { display: flex; flex-direction: column; gap: 22px; }
.warr h1 { font-size: clamp(2.5rem, 8.4vw, 5.4rem); font-weight: 900; line-height: .94; letter-spacing: -.025em; text-transform: uppercase; }
.warr h1 em { font-style: normal; color: var(--red); display: block; }
.warr .lede { max-width: 60ch; font-size: 17px; color: var(--muted); }
.warr .lede strong { color: var(--fg); font-weight: 600; }
.warr .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.warr .fact { background: var(--surface); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.warr .fact .v { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.warr .fact .v.red { color: var(--red-bright); }
.warr .fact .v.gold { color: var(--gold); }
.warr .fact .n { font-size: 12.5px; color: var(--muted); }
.warr section { display: flex; flex-direction: column; gap: 22px; }
.warr .sec-head { display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }
.warr h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }
.warr .sec-head p { color: var(--muted); }
.warr .scroll { overflow-x: auto; }
.warr table { border-collapse: collapse; width: 100%; min-width: 520px; }
.warr th, .warr td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.warr thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--fg); }
.warr thead th.w { color: var(--red-bright); }
.warr tbody th { font-weight: 600; color: var(--muted); width: 26%; font-size: 13.5px; }
.warr td .hl { color: var(--red-bright); font-weight: 600; }
.warr td.num, .warr th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.warr .dgrid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 36px; align-items: start; }
.warr figure { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.warr figure svg { width: 100%; height: auto; max-width: 100%; display: block; background: var(--bg); border: 1px solid var(--line); }
.warr figcaption { font-size: 13px; color: var(--muted); max-width: 64ch; }
.warr .read { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.warr .step { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.warr .step:first-child { padding-top: 0; }
.warr .step .tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--red-bright); padding-top: 2px; }
.warr .step .tag.gold { color: var(--gold); }
.warr .step .tag.green { color: var(--green); }
.warr .step h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.warr .step p { font-size: 14px; color: var(--muted); }
.warr .step p b { color: var(--fg); font-weight: 600; }
.warr .nd { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.warr .nd.r { stroke: var(--red); stroke-width: 2; }
.warr .nd.y { stroke: var(--gold); stroke-width: 2; }
.warr .nd.g { stroke: var(--green); stroke-width: 2; }
.warr .nd.dash { stroke-dasharray: 5 4; fill: none; }
.warr .tt { fill: var(--fg); font: 700 13px var(--font-body); text-anchor: middle; letter-spacing: .02em; }
.warr .tt.r { fill: var(--red-bright); }
.warr .tt.y { fill: var(--gold); }
.warr .tt.g { fill: var(--green); }
.warr .ss { fill: var(--muted); font: 400 11.5px var(--font-body); text-anchor: middle; }
.warr .lb { fill: var(--muted); font: 500 11px var(--font-mono); }
.warr .lb.r { fill: var(--red-bright); }
.warr .lb.y { fill: var(--gold); }
.warr .lb.g { fill: var(--green); }
.warr .lb.f { fill: var(--fg); }
.warr .ar { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.warr .ar.r { stroke: var(--red); }
.warr .ar.y { stroke: var(--gold); }
.warr .ar.g { stroke: var(--green); }
.warr .mk { fill: var(--muted); }
.warr .mk.r { fill: var(--red); }
.warr .mk.y { fill: var(--gold); }
.warr .mk.g { fill: var(--green); }
.warr .gl { stroke: var(--line); stroke-width: 1; }
.warr .zr { fill: var(--red); fill-opacity: .10; }
.warr .zg { fill: var(--green); fill-opacity: .10; }
.warr .pl-r { fill: none; stroke: var(--red-bright); stroke-width: 3; stroke-linecap: round; }
.warr .pl-g { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; }
.warr .dsh { stroke-dasharray: 4 4; fill: none; stroke-width: 1.5; }
.warr .pgrid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 36px; align-items: start; }
.warr .note { font-size: 13px; color: var(--muted); max-width: 72ch; }
.warr .pill { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border: 1px solid currentColor; }
.warr .pill.r { color: var(--red-bright); }
.warr .pill.g { color: var(--green); }
.warr .pill.y { color: var(--gold); }
.warr .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.warr .card { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.warr .card h3 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.warr .wl { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.warr .wl div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.warr .wl dt, .warr .wl .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; padding-top: 3px; }
.warr .k.win { color: var(--green); }
.warr .k.lose { color: var(--red-bright); }
.warr .wl span { color: var(--muted); }
.warr .wl b { color: var(--fg); font-weight: 600; }
.warr .clock { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.warr .tick { background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.warr .tick .d { font-family: var(--font-mono); font-size: 13px; color: var(--gold); letter-spacing: .04em; }
.warr .tick .tx { font-size: 14px; }
.warr .tick .tx span { color: var(--muted); }
.warr .count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.warr .count b { color: var(--red-bright); font-weight: 600; }
.warr .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.warr .box { border: 1px dashed var(--line); padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.warr .box h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.warr .box p { font-size: 14px; color: var(--muted); }
.warr footer { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; font-size: 12.5px; color: var(--muted); max-width: 90ch; }
.warr footer ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 860px) {
.warr .dgrid, .warr .pgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.warr .wrap { gap: 44px; }
.warr .step { grid-template-columns: 70px minmax(0, 1fr); }

}
@media (prefers-reduced-motion: no-preference) {
.warr .fact, .warr .card { transition: border-color .2s ease; }

}
.warr .xbtn { display: inline-block; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 800; font-size: 14px; padding: 11px 18px; border-radius: 6px; }
.warr .xbtn:hover { background: var(--red-bright); color: #fff; }
.warr .share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.warr .upd { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
.warr .sharebox { border: 1px dashed var(--line); padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.warr .sharebox p { color: var(--muted); max-width: 60ch; }
@media (max-width: 560px) {
.warr .facts .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }

}


/* Neutralise shared site.css rules that share class names with this page */
.warr section { padding: 0; }
.warr .hero { padding: 0; overflow: visible; position: static; }
.warr .card, .warr .card:hover { border-radius: 0; transform: none; align-self: stretch; }
.warr .fact { border: 0; border-radius: 0; text-align: center; }
.warr .step { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: stretch; }
.warr .step:first-child { padding-top: 0; }
.warr .step:last-child { border-bottom: 0; }
.warr .pill { margin-left: 0; min-width: 0; background: transparent; border-radius: 0; }
.warr .split { align-items: stretch; }
.warr h1 { font-size: clamp(2.5rem, 8.4vw, 5.4rem); }
.warr .wrap { padding-inline: 20px; }