/*
Theme Name: Sandbox Entertainment
Theme URI: https://sboxco.com
Description: Standalone single-page corporate theme for sboxco.com — Sandbox Entertainment Corp, a PAGCOR-licensed iGaming technology provider in Cebu. Self-contained (not a sboxco-base child). Signature: "The Stack" — a scroll-driven WebGL descent through the five layers of the platform, with a CSS-3D fallback. Machined graphite + copper, Archivo Expanded / IBM Plex. First-party, no build step.
Author: Sandbox Entertainment
Version: 1.0.0
Text Domain: sboxco
*/

/* ---------------------------------------------------------------- tokens */
:root {
  --ink:    #101215;  /* machined graphite base */
  --slate:  #191d23;  /* raised surface */
  --rule:   #2a3138;  /* hairline */
  --bone:   #e9e5dd;  /* primary type, and the licence-document ground */
  --ash:    #868d96;  /* secondary type */
  --copper: #c9743b;  /* the only accent: live, active, instrumented */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
}

/* Display face: Archivo held at a wide optical width. This is the page's
   voice — used only for h1/h2/h3, never for running text. */
.sb-display {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

/* Utility label: mono, tracked out. Every eyebrow, datum and marker. */
.sb-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

.sb-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
  width: 100%;
}

.sb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--copper);
  color: var(--ink);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.sb-skip:focus { left: 0; }

/* The header is fixed — keep anchor targets clear of it. */
[id] { scroll-margin-top: 92px; }

/* ---------------------------------------------------------------- canvas */
/* Fixed behind the hero + stack. Faded out by JS once the stack is passed. */
.sb-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.sb-canvas.is-live { opacity: 1; }
.sb-canvas.is-done { opacity: 0; }

/* Ambient ground glow — present with or without WebGL, so the page never
   sits on flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 72% 12%, rgba(201, 116, 59, 0.10), transparent 62%),
    radial-gradient(700px 700px at 12% 78%, rgba(60, 78, 96, 0.16), transparent 66%);
}

.sb-page { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- header */
.sb-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
}
.sb-head.is-stuck {
  background: rgba(16, 18, 21, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--rule);
}
.sb-head .sb-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.sb-wordmark {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 11px;
}
/* The mark: a five-bar stack, echoing the object in the hero. */
.sb-mark {
  display: block;
  width: 21px;
  height: 19px;
  flex: none;
  overflow: visible;
}
.sb-mark polygon {
  fill: none;
  stroke: var(--bone);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.sb-mark .sb-mark-lit {
  stroke: var(--copper);
  fill: rgba(201, 116, 59, 0.22);
}

.sb-head-right { display: flex; align-items: center; gap: 22px; }

.sb-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 0 rgba(201, 116, 59, 0.55);
  animation: sb-pulse 2.6s ease-out infinite;
  flex: none;
}
@keyframes sb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 116, 59, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(201, 116, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 116, 59, 0); }
}

.sb-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  color: var(--bone);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  white-space: nowrap;
}
.sb-btn:hover { border-color: var(--copper); color: var(--copper); }
.sb-btn--solid {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--ink);
  font-weight: 500;
}
.sb-btn--solid:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }

/* ------------------------------------------------------------------ hero */
.sb-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 140px 0 clamp(36px, 6vh, 64px);
}
/* Scrim: the 3D object sits right of centre, so the left side is darkened to
   keep the headline legible over it. Sits behind the hero's own content but
   in front of the fixed canvas. */
.sb-hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(97deg,
    var(--ink) 22%,
    rgba(16, 18, 21, 0.86) 42%,
    rgba(16, 18, 21, 0.35) 62%,
    transparent 78%);
}
.sb-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 4vh, 40px);
}
.sb-hero-eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: var(--rule);
}
.sb-hero h1 {
  font-size: clamp(2.8rem, 8.4vw, 7rem);
  max-width: 15ch;
  margin-bottom: clamp(20px, 3.2vh, 34px);
}
.sb-hero h1 em {
  font-style: normal;
  color: var(--copper);
}
.sb-hero-sub {
  max-width: 54ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ash);
  margin: 0 0 clamp(30px, 5vh, 52px);
}
.sb-hero-sub strong { color: var(--bone); font-weight: 500; }

/* Status strip — replaces the usual big-number stat row. It reads as a
   readout from a running system, which is what the company actually sells. */
.sb-readout {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 30px;
}
.sb-readout-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.sb-readout-live:hover { color: var(--copper); border-bottom-color: var(--copper); }
.sb-readout-sep {
  flex: 1;
  height: 1px;
  background: var(--rule);
  min-width: 20px;
}

.sb-scroll-cue {
  margin-top: clamp(24px, 4vh, 44px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-scroll-cue span { font-size: 0.66rem; }
.sb-scroll-cue::before {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--copper), transparent);
  animation: sb-drop 2.4s ease-in-out infinite;
}
@keyframes sb-drop {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* --------------------------------------------------- the stack (signature) */
/* Five layers. On desktop the section is 5 viewports tall and the inner
   frame sticks, so scroll drives the camera down through the object. */
.sb-stack { position: relative; height: 520vh; }
.sb-stack-frame {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.sb-stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gut);
  align-items: center;
  width: 100%;
}

/* The analytics spine: a copper rule running the full height of the stack,
   because analytics genuinely reads from every layer rather than sitting
   beside them. */
.sb-spine {
  position: absolute;
  left: var(--gut);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--rule) 12%, var(--rule) 88%, transparent);
  z-index: 2;
}
.sb-spine::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  background: linear-gradient(transparent, var(--copper), transparent);
  animation: sb-flow 5.5s linear infinite;
}
@keyframes sb-flow {
  from { transform: translateY(-120%); }
  to   { transform: translateY(560%); }
}
/* Lives inside the sticky frame (which clips) so it can never bleed up into
   the hero. Reads bottom-to-top alongside the spine. */
.sb-spine-label {
  position: absolute;
  left: calc(var(--gut) + 14px);
  top: 50%;
  white-space: nowrap;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  z-index: 3;
}

.sb-stack-panels {
  position: relative;
  grid-column: 1;
  padding-left: clamp(22px, 3vw, 46px);
  min-height: 380px;
}
.sb-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.sb-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sb-panel-no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--copper);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sb-panel-no::after {
  content: "";
  height: 1px;
  width: 44px;
  background: var(--copper);
  opacity: 0.5;
}
.sb-panel h3 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  margin-bottom: 16px;
}
.sb-panel-lede {
  color: var(--bone);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  max-width: 42ch;
  margin: 0 0 22px;
}
.sb-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  max-width: 44ch;
}
.sb-panel-list li {
  background: var(--ink);
  padding: 11px 0 11px 16px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ash);
  position: relative;
}
.sb-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--copper);
}

/* Scrims: the object renders between the panels and the ticks, so both
   columns get a wash to sit on. */
.sb-stack-frame::before,
.sb-stack-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  pointer-events: none;
  z-index: 1;
}
.sb-stack-frame::before {
  left: 0;
  background: linear-gradient(90deg, var(--ink) 30%, rgba(16, 18, 21, 0.72) 62%, transparent);
}
.sb-stack-frame::after {
  right: 0;
  background: linear-gradient(270deg, rgba(16, 18, 21, 0.94) 22%, rgba(16, 18, 21, 0.55) 58%, transparent);
}
.sb-stack-grid { position: relative; z-index: 2; }

/* Layer ticks — a live index of where you are in the stack. */
.sb-ticks {
  grid-column: 2;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-ticks li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rule);
  transition: color 300ms ease;
}
.sb-ticks li::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width 300ms ease;
}
.sb-ticks li.is-active { color: var(--copper); }
.sb-ticks li.is-active::after { width: 52px; }
.sb-ticks li.is-past { color: var(--ash); }

/* ------------------------------------------------- licence (the inversion) */
/* The one bone-paper section. Set like the document it describes. */
.sb-licence {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(80px, 12vh, 150px) 0;
  position: relative;
  z-index: 2;
}
.sb-licence .sb-label { color: #6a6459; }
.sb-licence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.sb-licence h2 {
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  margin: 18px 0 22px;
  max-width: 16ch;
}
.sb-licence-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  max-width: 50ch;
  color: #3b3a36;
  margin: 0 0 36px;
}
.sb-licence-lede em { font-style: normal; color: var(--ink); font-weight: 600; }

.sb-clauses {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(16, 18, 21, 0.16);
}
.sb-clauses li {
  border-bottom: 1px solid rgba(16, 18, 21, 0.16);
  padding: 16px 0;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  align-items: baseline;
}
.sb-clauses .sb-clause-no {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--copper);
}
.sb-clauses .sb-clause-body strong {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 2px;
}
.sb-clauses .sb-clause-body span {
  color: #56534c;
  font-size: 0.92rem;
}

/* The seal — a plain, unfussy certificate block. No badge clip-art. */
.sb-seal {
  border: 1px solid rgba(16, 18, 21, 0.22);
  padding: 30px 28px;
  position: sticky;
  top: 96px;
}
.sb-seal-ring {
  width: 74px;
  height: 74px;
  border: 1px solid var(--copper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--copper);
  margin-bottom: 22px;
}
.sb-seal dl { margin: 0; }
.sb-seal dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a6459;
  margin-top: 16px;
}
.sb-seal dt:first-child { margin-top: 0; }
.sb-seal dd {
  margin: 3px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
}

/* --------------------------------------------------------------- winzir */
.sb-proof {
  padding: clamp(90px, 14vh, 170px) 0;
  position: relative;
  z-index: 2;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.sb-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: end;
}
.sb-proof h2 {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  margin: 18px 0 22px;
  max-width: 12ch;
}
.sb-proof p {
  color: var(--ash);
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  margin: 0;
}
/* Game categories as a CSS-3D tilted plate — the same object language as
   the WebGL stack, at rest. */
.sb-plate {
  perspective: 1100px;
}
.sb-plate-inner {
  transform: rotateX(52deg) rotateZ(-34deg);
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sb-plate:hover .sb-plate-inner { transform: rotateX(44deg) rotateZ(-28deg); }
.sb-tile {
  border: 1px solid var(--rule);
  background: linear-gradient(150deg, rgba(201, 116, 59, 0.09), rgba(25, 29, 35, 0.65));
  padding: 22px 18px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45);
}
.sb-tile b {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------- purpose */
.sb-purpose {
  padding: clamp(90px, 14vh, 170px) 0;
  position: relative;
  z-index: 2;
  background: var(--ink);
}
.sb-purpose-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  margin: 40px 0 clamp(56px, 9vh, 96px);
}
.sb-purpose-pair > div { border-top: 1px solid var(--copper); padding-top: 22px; }
.sb-purpose-pair h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 12px 0 14px;
}
.sb-purpose-pair p {
  margin: 0;
  color: var(--ash);
  max-width: 44ch;
  font-size: 1.02rem;
}
.sb-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-values li { background: var(--ink); padding: 28px 22px; }
.sb-values b {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: 1.05rem;
  display: block;
  margin-bottom: 8px;
}
.sb-values span { color: var(--ash); font-size: 0.9rem; }

/* -------------------------------------------------------------- contact */
.sb-contact {
  padding: clamp(90px, 14vh, 170px) 0 clamp(60px, 8vh, 90px);
  position: relative;
  z-index: 2;
  background: var(--slate);
  border-top: 1px solid var(--rule);
}
.sb-contact h2 {
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  margin: 18px 0 40px;
  max-width: 14ch;
}
.sb-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  border-top: 1px solid var(--rule);
  padding-top: 34px;
}
.sb-contact-grid dt { margin-bottom: 10px; }
.sb-contact-grid dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}
.sb-contact-grid dd a { border-bottom: 1px solid var(--copper); }
.sb-contact-grid dd a:hover { color: var(--copper); }
.sb-contact-note {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

/* --------------------------------------------------------------- footer */
.sb-foot {
  background: var(--slate);
  position: relative;
  z-index: 2;
  padding: 30px 0 40px;
}
.sb-foot .sb-shell {
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
}
.sb-foot p { margin: 0; font-size: 0.82rem; color: var(--ash); }

/* ------------------------------------------------------------ fallbacks */
/* No WebGL, small screen, or reduced motion: the stack becomes a plain
   sequence of layers, each with a static CSS-3D slab. Nothing is lost. */
.no-3d .sb-canvas { display: none; }
.no-3d .sb-stack { height: auto !important; padding: clamp(70px, 10vh, 120px) 0; }
.no-3d .sb-stack-frame { position: static; height: auto; display: block; overflow: visible; }
.no-3d .sb-stack-grid { display: block; }
.no-3d .sb-ticks { display: none; }
.no-3d .sb-stack-panels { min-height: 0; padding-left: clamp(22px, 4vw, 46px); }
.no-3d .sb-panel {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 0 0 56px;
}
/* Without the canvas the hero has nothing behind it, so it stops holding a
   full empty viewport. */
.no-3d .sb-hero {
  min-height: 76svh;
  align-items: center;
}
.no-3d .sb-spine-label {
  position: static;
  writing-mode: horizontal-tb;
  transform: none;
  display: block;
  white-space: normal;
  letter-spacing: 0.14em;
  margin-bottom: 34px;
  /* Align to the shell grid — this element sits outside .sb-shell. */
  padding-left: calc(var(--gut) + clamp(22px, 4vw, 46px));
  padding-right: var(--gut);
}

/* The fallback slab: an isometric plate, drawn in CSS. */
.sb-slab {
  display: none;
  width: 96px;
  height: 62px;
  margin-bottom: 20px;
  perspective: 500px;
}
.no-3d .sb-slab { display: block; }
.sb-slab i {
  display: block;
  width: 96px;
  height: 62px;
  transform: rotateX(58deg) rotateZ(-38deg);
  border: 1px solid var(--copper);
  background:
    repeating-linear-gradient(0deg, rgba(201, 116, 59, 0.22) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(201, 116, 59, 0.22) 0 1px, transparent 1px 11px),
    rgba(201, 116, 59, 0.06);
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .sb-licence-grid,
  .sb-proof-grid,
  .sb-purpose-pair,
  .sb-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-seal { position: static; }
  .sb-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-proof-grid { align-items: start; }
  .sb-plate-inner { transform: rotateX(46deg) rotateZ(-30deg); }
}

@media (max-width: 620px) {
  .sb-head .sb-shell { height: 60px; }
  .sb-head-right .sb-status { display: none; }
  .sb-values { grid-template-columns: minmax(0, 1fr); }
  .sb-clauses li { grid-template-columns: 1fr; gap: 4px; }
  .sb-readout { gap: 10px 20px; }
  .sb-readout-sep { display: none; }
  .sb-hero { padding-top: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}