/* Tabline: "arena to daylight".
   Built on scrollcraft.css (the floor: tokens, type, the scroll devices). This file is the
   brand and the page's parts; it never restyles a [data-sc-*] mechanism.

   Brutalist: hard 3px rules, square corners, poster-scale condensed capitals, solid tags,
   no soft cards. Maximalist only in the arena at the top, where the real board rises over
   the headline. Then a hard cut to a light ground for everything practical, which is where
   the energy drops and the page turns calm. One hue of accent, in two lightnesses: gold on
   the dark ground, deep gold on the light one.
   Fonts are the ones already on a Windows PC, so the page makes no font requests. */

:root {
  --sc-canvas:      #0b0e13;
  --sc-surface:     #131922;
  --sc-ink:         #ece8df;
  --sc-ink-soft:    #a7afbb;
  --sc-accent:      #c8aa6e;
  --sc-accent-ink:  #15110a;

  --sc-font-display: "Bahnschrift", "Archivo Narrow", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* daylight */
  --day:       #e7e7e2;
  --day-raise: #f2f2ee;
  --day-ink:   #121417;
  --day-soft:  #474c55;
  --day-gold:  #6a5113;

  --rule-w: 3px;
  --tags-top: 1rem;
}

body { font-size: 1.0625rem; }

.skip {
  position: fixed; left: 0.75rem; top: -5rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--sc-ink); color: var(--sc-canvas); font-weight: 600;
}
.skip:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- the button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.15rem;
  border: 2px solid var(--day-ink);
  background: #c8aa6e; color: var(--sc-accent-ink);
  font-weight: 700; font-size: 0.95rem; line-height: 1.1; white-space: nowrap;
  text-decoration: none;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
.btn--xl { padding: 1.05rem 1.8rem; font-size: 1.15rem; }
/* The second button on the dark ground: an outline, filled in on hover. */
.btn--ghost { background: transparent; color: #ece8df; border-color: #ece8df; }
/* Off to Twitch, in a new tab. */
.btn__out { margin-left: 0.45em; font-weight: 400; }
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #ece8df; color: var(--day-ink); }
}
.btn:focus-visible { outline: 3px solid #ece8df; outline-offset: 3px; border-radius: 0; }

/* ------------------------------------------------------------------ the bar -- */
/* Frosted, so whatever passes under it stays legible. It follows the ground: dark glass over
   the arena, light glass over daylight (site.js sets bar--on-light). */
:root { --bar-h: 3.6rem; }
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: clamp(1rem, 2.5vw, 2rem);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, #0b0e13 62%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid color-mix(in oklab, #ece8df 14%, transparent);
  color: #ece8df;
  transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
.bar--on-light, .page .bar {
  background: color-mix(in oklab, #e7e7e2 74%, transparent);
  border-bottom-color: color-mix(in oklab, #121417 18%, transparent);
  color: #121417;
}
@supports not (backdrop-filter: blur(1px)) {
  .bar { background: #0b0e13; }
  .bar--on-light, .page .bar { background: #e7e7e2; }
}
.bar__brand { color: inherit; text-decoration: none; font-size: 0.95rem; }

/* The logo: the Tab key beside the wordmark, as in the showreel's lockup. Everything is in em
   of the key's label, in the showreel's proportions (a 440 x 200 key with a 150px label, a
   236px wordmark), so one font-size sets the whole lockup. The gold key wall hangs below the
   face as a shadow, so the face is lifted by half of it to keep the key centred. */
.logo { display: inline-flex; align-items: center; gap: 0.5em; line-height: 1; }
.logo__key {
  --edge: max(1.5px, 0.034em);
  flex: none; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.28em;
  width: 2.93em; height: 1.33em; padding-right: 0.12em;
  border: var(--edge) solid #121417; border-radius: 0.42em;
  background: linear-gradient(180deg, #fbf8f1 0%, #ece8df 70%);
  color: #121417;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 85%;
  box-shadow: 0 0.28em 0 #c8aa6e, 0 0.28em 0 var(--edge) #121417;
  transform: translateY(-0.14em) rotate(-6deg);
  transition: transform 120ms var(--sc-ease-out), box-shadow 120ms var(--sc-ease-out);
}
.logo__glyph { font-size: 1.05em; }
.logo__word {
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 85%;
  font-size: 1.573em; letter-spacing: -0.01em;
}
/* Pointing at the logo presses the key. */
@media (hover: hover) and (pointer: fine) {
  a.logo:hover .logo__key { transform: translateY(0.04em) rotate(-6deg); box-shadow: 0 0.1em 0 #c8aa6e, 0 0.1em 0 var(--edge) #121417; }
}
.bar__nav { display: flex; justify-content: center; gap: clamp(0.75rem, 2.2vw, 2rem); }
.bar__nav a {
  position: relative; padding: 0.4rem 0.1rem;
  color: inherit; opacity: 0.72; text-decoration: none;
  font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 140ms var(--sc-ease-out);
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: #c8aa6e; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 200ms var(--sc-ease-out);
}
.bar--on-light .bar__nav a::after, .page .bar__nav a::after { background: #6a5113; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { opacity: 1; } }
.bar__nav a[aria-current] { opacity: 1; }
.bar__nav a[aria-current]::after { transform: scaleX(1); }
.bar__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); }
.bar__link, .bar__kofi {
  color: inherit; font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  text-decoration: underline; text-decoration-color: #c8aa6e; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.bar--on-light :is(.bar__link, .bar__kofi), .page :is(.bar__link, .bar__kofi) { text-decoration-color: #6a5113; }
.bar__link[aria-current] { text-decoration-thickness: 3px; }
@media (hover: hover) and (pointer: fine) { :is(.bar__link, .bar__kofi):hover { color: #c8aa6e; } .bar--on-light :is(.bar__link, .bar__kofi):hover, .page :is(.bar__link, .bar__kofi):hover { color: #6a5113; } }
.bar a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 0; }

/* --------------------------------------------------------------- the arena -- */
.arena { background: var(--sc-canvas); }
.arena__stage { --rise: 0; }

.arena__far {
  position: absolute; inset: -12% -4%; pointer-events: none;
  background:
    linear-gradient(to right, color-mix(in oklab, var(--sc-ink) 6%, transparent) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(to bottom, color-mix(in oklab, var(--sc-ink) 6%, transparent) 1px, transparent 1px) 0 0 / 6rem 6rem,
    radial-gradient(48% 52% at 18% 88%, rgba(40, 92, 72, 0.55), transparent 70%),
    radial-gradient(44% 50% at 88% 70%, rgba(34, 64, 104, 0.55), transparent 70%),
    var(--sc-canvas);
}

/* The hero: title, pitch and button beside the recorded clip. It fades as the board rises
   over it. */
.hero {
  position: absolute; z-index: 1;
  inset: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem);
  opacity: calc(1 - var(--rise) * 1.3);
  transform: translateY(calc(var(--rise) * -6svh)) scale(calc(1 - var(--rise) * 0.04));
  transform-origin: 50% 30%;
}
.hero__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; line-height: 0.88; letter-spacing: -0.012em;
  font-size: clamp(3rem, min(6.4vw, 12svh), 7.5rem);
  text-wrap: balance;
}
.hero__kicker { margin: 0 0 clamp(0.8rem, 2svh, 1.2rem); font-family: var(--sc-font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c8aa6e; }
.hero__title em { font-style: normal; color: #c8aa6e; }
/* A cartoon Tab keycap in place of the word: chunky outline, a deep key wall, a little tilt. */
.key {
  display: inline-flex; align-items: center; gap: 0.3em;
  margin: 0 0.2em; padding: 0.16em 0.7em 0.18em 0.5em;
  vertical-align: 0.12em;
  border: 2.5px solid #121417; border-radius: 0.42em;
  background: linear-gradient(180deg, #fbf8f1 0%, #ece8df 70%);
  color: #121417;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 85%; font-size: 1em; line-height: 1;
  box-shadow: 0 0.28em 0 #c8aa6e, 0 0.28em 0 2.5px #121417, 0 0.5em 0.6em rgba(0, 0, 0, 0.5);
  transform: rotate(-6deg);
  transition: transform 120ms var(--sc-ease-out), box-shadow 120ms var(--sc-ease-out);
}
.key__glyph { font-size: 1.05em; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .key:hover { transform: rotate(-6deg) translateY(0.18em); box-shadow: 0 0.1em 0 #c8aa6e, 0 0.1em 0 2.5px #121417, 0 0.2em 0.3em rgba(0, 0, 0, 0.5); }
}
.hero__lede strong { color: var(--sc-ink); font-weight: 700; }
.hero__lede:has(.key) { line-height: 1.6; }
.hero__lede { margin: clamp(1.1rem, 2.6svh, 1.75rem) 0 0; max-width: 34ch; font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.45; text-wrap: pretty; }
.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  margin-top: clamp(1.4rem, 3.5svh, 2.25rem); padding-top: clamp(1.1rem, 2.6svh, 1.5rem);
  border-top: var(--rule-w) solid var(--sc-ink);
}
.hero__meta { flex-basis: 100%; margin: 0; font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.hero__meta a { color: var(--sc-ink); text-decoration-color: #c8aa6e; text-decoration-thickness: 2px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .hero__meta a:hover { color: #c8aa6e; } }
.hero__media { margin: 0; }
.hero__clip {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: var(--rule-w) solid var(--sc-ink); background: #070a0f;
  box-shadow: 14px 14px 0 color-mix(in oklab, #c8aa6e 85%, transparent);
}
.hero__caption { margin: 1.1rem 0 0; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.arena.is-risen .hero { visibility: hidden; }

/* The match clock, once the board is up. It sits in the band at the top of the board that the
   overlay keeps clear of Twitch's player shadow (60px, scaled with the board by site.js), lined
   up with the Scoreboard switch below it. */
.clock {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  left: calc(var(--frame-x, 0px) + 12px * var(--frame-s, 1)); top: 0;
  height: calc(60px * var(--frame-s, 1));
  display: flex; align-items: center; gap: 0.9rem;
  opacity: clamp(0, calc(var(--rise) * 2 - 1), 1);
}
.clock__label { font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.clock__time {
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  font-size: calc(42px * var(--frame-s, 1)); line-height: 1; font-variant-numeric: tabular-nums;
}

/* The panel: the board on the left, one feature at a time on the right. It starts below the
   screen and rises once the visitor scrolls. */
.panel {
  --panel-top: calc(var(--bar-h) + 1.25rem);
  position: absolute; z-index: 3;
  left: var(--sc-gutter); right: var(--sc-gutter);
  top: var(--panel-top); bottom: 1.25rem;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(16rem, 26vw, 26rem); column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start; align-content: center;
  transform: translateY(calc((1 - var(--rise)) * (var(--start-top, 100svh) - var(--panel-top))));
  will-change: transform;
}
.panel__screen {
  position: relative; min-height: 0;
  border: var(--rule-w) solid var(--sc-ink);
  background:
    radial-gradient(60% 70% at 25% 85%, rgba(40, 92, 72, 0.6), transparent 70%),
    radial-gradient(50% 60% at 85% 55%, rgba(34, 64, 104, 0.6), transparent 70%),
    #070a0f;
}
.panel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.panel__frame { position: absolute; inset: 0 auto auto 0; border: 0; display: block; background: transparent; transform-origin: 0 0; }
.panel__frame[hidden] { display: none; }
.has-board .panel__poster { display: none; }

/* The telestrator: a box on the part of the board being explained. It steps aside while the
   visitor's pointer is on the board, so it never covers a hover card. */
.tele { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; transition: opacity 160ms var(--sc-ease-out); }
.tele.is-aside { opacity: 0; }
.tele__box { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-linejoin: miter; opacity: 0; }
.tele.is-on .tele__box { opacity: 1; }
.tele.is-drawing .tele__box {
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
  animation: tele-draw 520ms var(--sc-ease-out) forwards;
}
@keyframes tele-draw { to { stroke-dashoffset: 0; } }

/* One feature at a time, on a light card. */
.feats { position: relative; display: grid; }
.feat {
  grid-area: 1 / 1;
  padding: 1.4rem 1.5rem 1.6rem;
  background: #ece8df; color: #121417;
  border: var(--rule-w) solid #ece8df;
  box-shadow: 10px 10px 0 color-mix(in oklab, #c8aa6e 85%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), visibility 0s linear 260ms;
}
.feat.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); }
.feat__tag {
  display: inline-block; margin: 0 0 1rem; padding: 0.45rem 0.7rem 0.4rem;
  background: #121417; color: #c8aa6e;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1; text-transform: uppercase;
}
.feat__text { margin: 0; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.55; color: #121417; text-wrap: pretty; }
.feat__text + .feat__text { margin-top: 0.8rem; color: #3a3f47; }
.feats__note { grid-area: 2 / 1; margin: 1.6rem 0 0; font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* Phone list (hidden on wide screens). */
.features { display: none; }

/* ------------------------------------------------------------- daylight -- */
.day {
  --sc-ink: var(--day-ink);
  --sc-ink-soft: var(--day-soft);
  --sc-accent: var(--day-gold);
  --sc-surface: var(--day-raise);
  color: var(--day-ink);
  background: var(--day);
  border-top: 10px solid var(--day-ink);
  position: relative; z-index: 2;
}
.day ::selection { background: var(--day-ink); color: var(--day); }
.day a { color: var(--day-ink); text-decoration-color: var(--day-gold); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.day :focus-visible { outline-color: var(--day-ink); }
.day .btn { color: var(--sc-accent-ink); }

.day__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; line-height: 0.88; letter-spacing: -0.01em;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
}
.day__sub { margin: 0.9rem 0 0; max-width: 34ch; font-size: 1.2rem; line-height: 1.45; color: var(--day-soft); }
.day__note { margin: 1.25rem 0 0; max-width: 46ch; font-size: 0.98rem; line-height: 1.6; color: var(--day-soft); text-wrap: pretty; }

/* How it works: four stages in poster capitals, each wiped in as it arrives. */
.how { padding: clamp(4rem, 9vw, 8rem) var(--sc-gutter) clamp(3rem, 6vw, 5rem); }
.how__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.how__head .day__sub { margin: 0; }
.how__bands { margin: 0; padding: 0; list-style: none; }
.band {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); align-items: end; column-gap: clamp(1.5rem, 4vw, 4rem);
  padding: 1rem 0 1.4rem;
  border-top: var(--rule-w) solid var(--day-ink);
}
.band:last-child { border-bottom: var(--rule-w) solid var(--day-ink); }
/* The wipe sits on this wrapper, whose padding gives the tight capitals room, so the
   clip never shaves their tops and bottoms. */
.band__word { padding: 0.12em 0 0.04em; }
.band__word span {
  display: block;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; line-height: 0.86; letter-spacing: -0.012em;
  font-size: clamp(3.4rem, 10.5vw, 10rem);
}
.band:nth-child(2) .band__word span, .band:nth-child(4) .band__word span { color: var(--day-gold); }
.band__text { margin: 0 0 0.4rem; max-width: 36ch; font-size: 1.12rem; line-height: 1.5; color: var(--day-ink); text-wrap: pretty; }

/* Set it up: four numbered steps, each with the button it needs, and Windows' warning
   explained beside them. */
.setup {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 1fr); column-gap: clamp(2rem, 5vw, 5rem); row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(3rem, 6vw, 5rem) var(--sc-gutter) clamp(4rem, 8vw, 7rem);
}
.setup__head { grid-column: 1 / -1; }
.setup__steps { margin: 0; padding: 0; list-style: none; counter-reset: setup; }
.setup__step {
  counter-increment: setup;
  display: grid; grid-template-columns: clamp(3rem, 6vw, 5.5rem) minmax(0, 1fr); column-gap: clamp(0.75rem, 2vw, 1.75rem);
  padding: 1.15rem 0 1.5rem;
  border-top: var(--rule-w) solid var(--day-ink);
}
.setup__step:last-child { border-bottom: var(--rule-w) solid var(--day-ink); }
.setup__step::before {
  content: counter(setup);
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.82; color: var(--day-gold);
}
.setup__name {
  margin: 0.1rem 0 0.65rem;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 0.95;
}
.setup__body p { margin: 0; max-width: 54ch; font-size: 1.08rem; line-height: 1.55; text-wrap: pretty; }
.setup__body p + p { margin-top: 0.6rem; }
.setup__body .btn { margin-top: 1.1rem; }
.setup__body .setup__later { color: var(--day-soft); font-size: 0.98rem; }
/* Twitch's own button labels, so they're easy to spot on its page. */
.ui {
  display: inline-block; padding: 0.04em 0.42em 0.1em;
  border: 1.5px solid var(--day-ink); background: var(--day-raise);
  font-weight: 700; font-size: 0.94em; line-height: 1.3; white-space: nowrap;
}
.warn {
  position: sticky; top: calc(var(--bar-h) + 1.5rem);
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--day-raise);
  border: var(--rule-w) solid var(--day-ink);
  box-shadow: 8px 8px 0 var(--day-ink);
}
.warn__title {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 0.95;
}
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline;
  padding: 0.75rem 0; border-top: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent);
}
.steps li::before { content: counter(step); font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%; font-size: 1.6rem; line-height: 1; color: var(--day-gold); }
.steps li span { font-size: 1.08rem; line-height: 1.5; text-wrap: pretty; }

/* The fine print: the smallest, densest type on the page. */
.fine {
  display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.4fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 1.5rem;
  padding: clamp(3rem, 6vw, 5rem) var(--sc-gutter);
  border-top: var(--rule-w) solid var(--day-ink);
}
.fine__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 0.92;
}
.fine__sub { margin: 0.8rem 0 0; max-width: 24ch; font-size: 0.98rem; line-height: 1.5; color: var(--day-soft); }
.fine__list { margin: 0; }
.fine__list > div {
  display: grid; grid-template-columns: minmax(11rem, 0.85fr) 1.5fr; column-gap: 2rem;
  padding: 0.85rem 0; border-top: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent);
}
.fine__list > div:last-child { border-bottom: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent); }
.fine dt { font-weight: 700; font-size: 0.95rem; line-height: 1.4; }
.fine dd { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--day-soft); text-wrap: pretty; }

/* The close: one sentence with the link in it. */
.close { padding: clamp(4rem, 9vw, 7rem) var(--sc-gutter); border-top: var(--rule-w) solid var(--day-ink); }
.close__line {
  margin: 0; max-width: 30ch;
  font-family: var(--sc-font-display); font-weight: 600; font-stretch: 85%;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}
.close__line a { text-decoration-thickness: 4px; text-underline-offset: 0.14em; }
@media (hover: hover) and (pointer: fine) { .close__line a:hover { color: var(--day-gold); } }

.legal { padding: 2rem var(--sc-gutter) 2.5rem; border-top: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent); }
.legal p { margin: 0 0 0.65rem; max-width: 86ch; font-size: 0.8rem; line-height: 1.6; color: var(--day-soft); }
.legal__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.legal a.legal__brand { text-decoration: none; font-size: 0.85rem; }
.legal__links { display: flex; gap: 1.25rem; margin: 0; font-size: 0.92rem; }
.legal__links a { text-decoration: none; font-weight: 600; }
.legal__links a:hover { text-decoration: underline; }

/* ----------------------------------------- the other pages: download, privacy, 404 -- */
.page { background: var(--day); }
.page .day { border-top: 0; }
.page main.doc { padding-top: calc(var(--bar-h) + clamp(3rem, 7vw, 5rem)); }
.doc { max-width: 56rem; padding: clamp(6.5rem, 12vw, 9rem) var(--sc-gutter) clamp(3rem, 7vw, 6rem); }
.doc h1 {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; line-height: 0.88; letter-spacing: -0.01em;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem); text-wrap: balance;
}
.doc .doc__lede { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); max-width: 58ch; font-size: 1.2rem; line-height: 1.5; color: var(--day-soft); }
.doc section { margin: 0 0 clamp(2.25rem, 4vw, 3rem); }
.doc h2 {
  margin: 0 0 0.85rem; padding-top: 0.7rem; border-top: var(--rule-w) solid var(--day-ink);
  font-family: var(--sc-font-display); font-weight: 700; font-stretch: 75%;
  text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 0.95;
}
.doc p { margin: 0; max-width: 64ch; font-size: 1.05rem; line-height: 1.65; color: var(--day-soft); text-wrap: pretty; }
.doc p + p, .doc pre + p { margin-top: 0.85rem; }
.doc strong { color: var(--day-ink); font-weight: 700; }
.card-stack { margin-top: 1rem; }
.card-stack > div { padding: 0.95rem 0; border-top: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent); }
.card-stack > div:last-child { border-bottom: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent); }
.card-stack h3 { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 700; }
.card-stack p { font-size: 0.98rem; }
.download { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }
.action-alt { font-size: 0.95rem; color: var(--day-soft); }
.doc .notice {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: var(--day-raise); border: var(--rule-w) solid var(--day-ink); box-shadow: 6px 6px 0 var(--day-ink);
  font-size: 1rem; color: var(--day-ink);
}
.doc .steps li { max-width: 64ch; }
.doc code { padding: 0.05rem 0.4rem; background: var(--day-raise); border: 1px solid color-mix(in oklab, var(--day-ink) 22%, transparent); font: 0.92em/1.4 var(--sc-font-mono); color: var(--day-ink); }
.doc pre.code { margin: 0.9rem 0; padding: 0.9rem 1.1rem; overflow-x: auto; background: var(--day-raise); border: 2px solid var(--day-ink); }
.doc pre.code code { padding: 0; border: 0; background: none; }

/* ------------------------------------------------------------------ phones -- */
@media (max-width: 899px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__nav, .bar__links { display: none; }
  .bar__cta { padding: 0.55rem 0.8rem; font-size: 0.85rem; }

  .arena__stage { position: relative; overflow: hidden; height: auto; padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 2.5rem; }
  .hero { position: relative; inset: auto; z-index: 1; opacity: 1; transform: none; grid-template-columns: 1fr; row-gap: 2rem; }
  .hero__title { font-size: clamp(2.9rem, 14vw, 4.6rem); }
  .hero__clip { box-shadow: 8px 8px 0 color-mix(in oklab, #c8aa6e 85%, transparent); }
  .hero__cta .btn { flex: 1 1 100%; }
  .clock, .panel { display: none; }

  .features { display: block; background: var(--sc-canvas); padding: 0 var(--sc-gutter) 3rem; }
  .features__list { margin: 0; padding: 0; list-style: none; }
  .features__list li { padding: 0.85rem 0; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent); font-size: 1.05rem; line-height: 1.45; color: var(--sc-ink-soft); }
  .features__list strong { color: var(--sc-ink); }

  .band { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .setup { grid-template-columns: 1fr; }
  .warn { position: static; box-shadow: 5px 5px 0 var(--day-ink); }
  .fine { grid-template-columns: 1fr; }
  .fine__list > div { grid-template-columns: 1fr; row-gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .tele.is-drawing .tele__box { animation: none; stroke-dashoffset: 0; }
  .feat, .feat.is-active, .bar, .bar__nav a, .bar__nav a::after, .tele { transition: none; }
}

/* The bug report form (Tally), wider than the text column so its fields have room. */
.report__form { display: block; width: 100%; max-width: 44rem; min-height: 12rem; border: 0; }
.doc .report .action-alt { margin-top: 0.5rem; }

/* Text for screen readers only. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A medium window: the section links and Give feedback stay, the coffee link moves to the footer. */
@media (min-width: 900px) and (max-width: 1179px) {
  .bar__kofi { display: none; }
  .bar { column-gap: 1rem; }
  .bar__nav { gap: 0.9rem; }
}
@media (min-width: 900px) and (max-width: 1049px) {
  .bar { column-gap: 0.75rem; }
  .bar__nav { gap: 0.6rem; }
  .bar__cta { padding-inline: 0.8rem; }
  .bar { padding-inline: 1.5rem; }
}