@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Six+Caps&display=swap');

/* Spartical Graffiti Line — Mans Greback. Self-hosted, subset from the OTF
   installed on this machine (660 KB -> 170 KB).

   LICENCE: the installed file is the PERSONAL USE ONLY release. Using it on a
   company training site is commercial use. See README.md — a commercial licence
   from mansgreback.com is the real fix.

   NO DIGITS ON PURPOSE. In the personal-use release every numeral 0-9 maps to a
   single "PERSONAL USE ONLY" watermark glyph, so "2 Year Price Lock" would have
   rendered a licence badge instead of the 2. The subset drops U+0030-0039 and
   the unicode-range below excludes them, so digits fall through to Anton — the
   next font in --font-title. Graffiti letterforms, clean numerals.
   A licensed copy renders real numerals; then widen the range to include them. */
@font-face {
  font-family: "Spartical Graffiti Line";
  src: url("../fonts/spartical-graffiti-line.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-002F, U+003A-007E, U+00A0-00A6, U+00A8-00FF,
                 U+00B7, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D,
                 U+2022, U+2026;
}

/* ==========================================================================
   GEN REP ACCELERATOR — design system
   Matched to gensales.co: pure black, monochrome, capsule geometry, blade
   forms echoing the GEN mark, film grain, all-caps display type.

   Type stack note: the brand face is Coolvetica (licensed, Framer-hosted).
   Anton stands in for Coolvetica Compressed Heavy here. To use the real
   thing, drop the woff2 into assets/fonts/ and swap --font-display below.
   ========================================================================== */

:root {
  /* --- brand core: monochrome only ---------------------------------- */
  --ink:        #000000;
  --paper:      #ffffff;
  --surface:    #0b0b0b;
  --surface-2:  #131313;
  --surface-3:  #1b1b1b;
  --gray:       #a8a8a8;
  --gray-dim:   #6e6e6e;
  --hair:       rgba(255, 255, 255, 0.13);
  --hair-2:     rgba(255, 255, 255, 0.07);

  /* --- semantic only: DISH / DIRECTV product identity --------------- */
  --dish:       #e01e2b;
  --dtv:        #2f6fd0;
  --go:         #38d67a;
  --caution:    #ffc247;

  /* --- type --------------------------------------------------------- */
  /* Titles only. Kept separate from --font-display on purpose: a line/outline
     graffiti face reads beautifully at hero scale and turns to mud at 1rem,
     so the small uppercase UI (nav, tiles, pills, labels) stays on Anton. */
  --font-title:   "Spartical Graffiti Line", "Anton", Impact, sans-serif;
  --font-display: "Anton", "Coolvetica", Impact, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-tall:    "Six Caps", "Anton", sans-serif;

  /* --- geometry: capsules and blades, no boxy rectangles ------------ */
  --capsule:    999px;
  --soft:       28px;
  --blade:      14px;   /* angled cut depth on blade forms */

  --maxw:       1180px;
  /* Edge-to-edge. Body copy keeps a hairline inset so lines never sit on the
     glass; titles break out of it and run flush to the screen edge. */
  --inset:      0.75rem;
  --gut:        var(--inset);

  /* The title face is drawn with negative left sidebearings — 'P' hangs 0.328em
     to the LEFT of its own origin, 'M' 0.279em past its advance on the right.
     Titles are padded by these amounts so the INK lands flush at the edge
     instead of being clipped by it. */
  --ink-left:   0.33em;
  --ink-right:  0.13em;

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-blade: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

/* Daylight mode — inverted, still monochrome. For knocking in full sun. */
:root[data-theme="light"] {
  --ink:       #ffffff;
  --paper:     #000000;
  --surface:   #f4f4f4;
  --surface-2: #eaeaea;
  --surface-3: #dedede;
  --gray:      #4a4a4a;
  --gray-dim:  #767676;
  --hair:      rgba(0, 0, 0, 0.16);
  --hair-2:    rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.65 var(--font-body);
  overflow-x: hidden;
  padding-bottom: 7.5rem;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   ATMOSPHERE — grain, blade field. Both fixed, both pointer-transparent.
   ========================================================================== */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grainShift 0.7s steps(4) infinite;
  will-change: transform;
}
:root[data-theme="light"] .grain { opacity: 0.07; }

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* The GEN blade field — giant extruded chevrons, barely visible, parallaxed */
.bladefield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bladefield svg { position: absolute; display: block; }
.bladefield .b1 {
  top: -12vh; left: -18vw; width: 92vw;
  opacity: 0.032;
  transform: translateY(var(--px1, 0));
}
.bladefield .b2 {
  top: 38vh; right: -26vw; width: 78vw;
  opacity: 0.024;
  transform: translateY(var(--px2, 0)) scaleX(-1);
}
:root[data-theme="light"] .bladefield .b1,
:root[data-theme="light"] .bladefield .b2 { opacity: 0.045; }

/* Page-load blade wipe */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--ink);
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: wipeOut 0.75s var(--ease-blade) forwards;
}
@keyframes wipeOut {
  to { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
}

/* ==========================================================================
   MOTION PRIMITIVES
   ========================================================================== */

/* Progressive enhancement, deliberately.

   Content is VISIBLE by default. The hidden-then-revealed state only applies
   once JS has added .motion to <html>, which it does only after confirming
   IntersectionObserver exists and reduced-motion is off. app.js also runs a
   failsafe that reveals everything if the observer never fires.

   Reason: an offscreen/prerendered surface, an odd in-app webview, or an
   iframe can leave IO silent. If visibility depended on it, a rep would get
   a blank page. Motion is a nicety; the words are the product. */

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Line-by-line mask reveal for display headings */
.mask { display: block; }
/* overflow:hidden drives the slide-up reveal, but it clips on BOTH axes and
   this face's ink sits outside its own box. Rather than widen the clip rect
   with negative margins — which shoved it past the viewport — app.js puts the
   optical padding *inside* the mask. The clip box then spans the full column,
   the text origin sits in from it by the first letter's overhang, and the ink
   lands exactly on the edge with nothing cut and nothing overflowing. */
.motion .mask { overflow: hidden; }
.motion .mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion .mask.is-in > span { transform: none; }

/* Marker-scribble draw-on */
.motion .scribble path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.1s var(--ease-blade) 0.15s;
}
.motion .scribble.is-in path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .wipe { display: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .mask > span { transform: none; transition: none; }
  .scribble path { stroke-dashoffset: 0; transition: none; }
  .marquee__track { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   CHROME — top bar, drawer, bottom field bar
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--hair-2);
}
.topbar__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.75rem var(--gut);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  border: 0;                /* the global link underline must not run under the mark */
  color: var(--paper);
  margin-right: auto;
  min-width: 0;
}
.brand svg { width: 46px; height: 22px; flex: none; }  /* 707:342 */
.brand b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Capsule icon buttons */
.iconbtn {
  flex: none;
  height: 42px;
  min-width: 42px;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--paper);
  border-radius: var(--capsule);
  font: 500 0.82rem/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.2s var(--ease);
}
.iconbtn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn svg { width: 17px; height: 17px; }

/* Narrow phones: the menu button drops to icon-only so the wordmark fits. */
@media (max-width: 430px) {
  #menuBtn span { display: none; }
  #menuBtn { padding: 0; }
}

/* --- drawer ------------------------------------------------------------ */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer[open] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  border: 0; padding: 0; width: 100%;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  cursor: pointer;
}
.drawer[open] .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 90vw);
  background: var(--surface);
  border-left: 1px solid var(--hair);
  padding: 1.4rem var(--gut) 3rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-blade);
}
.drawer[open] .drawer__panel { transform: none; }

.drawer__group {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin: 1.7rem 0 0.5rem;
}
.drawer__group:first-of-type { margin-top: 0.4rem; }

.drawer a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0;
  color: var(--paper);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.22rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow: hidden;
}
.drawer a > .lab { transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }
.drawer a:hover > .lab { transform: translateX(10px); }
.drawer a .num {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
  flex: none;
  width: 1.9rem;
}
.drawer a[aria-current="page"] { color: var(--gray); }
.drawer a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 1.9rem; right: 0; bottom: 0;
  height: 1px;
  background: var(--paper);
}
.drawer a .tick { margin-left: auto; color: var(--go); font-size: 0.8rem; }

/* --- bottom field bar: the 4 things you need at a door ---------------- */
.fieldbar {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: 0.85rem;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 1.6rem));
  display: flex;
  gap: 0.2rem;
  padding: 0.32rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--hair);
  border-radius: var(--capsule);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.fieldbar a {
  flex: 1;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 0.2rem;
  border-radius: var(--capsule);
  color: var(--gray);
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.fieldbar a svg { width: 19px; height: 19px; }
.fieldbar a:hover { color: var(--paper); }
.fieldbar a[aria-current="page"] { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   LAYOUT + TYPE
   ========================================================================== */

main {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(1.6rem, 7vw, 3.4rem);
  /* max() so notched / rounded-corner phones don't eat the first letter */
  padding-left: max(var(--inset), env(safe-area-inset-left));
  padding-right: max(var(--inset), env(safe-area-inset-right));
  padding-bottom: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin: 0 0 1.1rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}

h1, h2, .title-face {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  /* run to the true screen edge. app.js then pads by the first letter's real
     ink overhang so the ink itself lands on x=0 — see opticalAlign(). The
     em-based fallbacks below cover the moment before that runs. */
  margin-left: calc(-1 * max(var(--inset), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--inset), env(safe-area-inset-right)));
  padding-left: var(--ink-left);
  padding-right: 0;
  /* This face is drawn with interlocking negative sidebearings — authentic
     wildstyle, but at tracking 0 a word like ACCELERATOR collapses into a
     tangle. 0.18em is where it separates and stays readable; the extra leading
     clears the flourishes that overshoot the cap line. */
  letter-spacing: 0.18em;
  line-height: 1.1;
  word-spacing: 0.04em;
}

h1 {
  font-size: clamp(3rem, 13.5vw, 6.6rem);
  margin-top: 0;
  margin-bottom: 1.2rem;
}

h2 {
  font-size: clamp(1.85rem, 7vw, 2.9rem);
  margin-top: 3.2rem;
  margin-bottom: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--hair);
}

h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 1.6rem 0 0.55rem;
}

.lede {
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--gray);
  max-width: 44ch;
  margin: 0 0 2rem;
}

p, ul, ol { margin: 0 0 1.05rem; }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.42rem; }
li::marker { color: var(--gray-dim); }

strong, b { font-weight: 700; }
em { font-style: italic; }

a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
a:hover { border-color: var(--paper); }
p a, li a, td a { padding-bottom: 1px; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  letter-spacing: 0.02em;
  padding: 0.16em 0.5em;
  border: 1px solid var(--hair);
  border-radius: var(--capsule);
  white-space: nowrap;
}

/* Oversized watermark numeral */
.tallnum {
  font-family: var(--font-tall);
  font-size: clamp(6rem, 26vw, 15rem);
  line-height: 0.7;
  color: var(--paper);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   BLADE — the signature form. Angled cut, echoes the GEN mark.
   Replaces the old boxed card entirely.
   ========================================================================== */

.blade {
  position: relative;
  background: var(--surface);
  padding: 1.35rem 1.5rem;
  margin-bottom: 0.85rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--blade)), calc(100% - var(--blade)) 100%, 0 100%);
}
.blade > :last-child { margin-bottom: 0; }
.blade > h3:first-child { margin-top: 0; }

/* accent rail on the left */
.blade--rail { padding-left: 1.7rem; }
.blade--rail::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: var(--blade);
  width: 3px;
  background: var(--paper);
}
.blade--dish::before   { background: var(--dish); }
.blade--go::before     { background: var(--go); }
.blade--caution::before{ background: var(--caution); }
.blade--dtv::before    { background: var(--dtv); }

/* callout variants keep the blade silhouette, tint the field */
.note {
  position: relative;
  background: var(--surface-2);
  padding: 1.15rem 1.4rem 1.15rem 1.7rem;
  margin-bottom: 1.05rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--blade)), calc(100% - var(--blade)) 100%, 0 100%);
}
.note::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: var(--blade);
  width: 3px;
  background: var(--paper);
}
.note.stop::before    { background: var(--dish); }
.note.good::before    { background: var(--go); }
.note.warn::before    { background: var(--caution); }
.note > :last-child   { margin-bottom: 0; }
.note strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* Open block — no container at all, just a hairline and air */
.card {
  position: relative;
  border-top: 1px solid var(--hair);
  padding: 1.1rem 0 0.3rem;
  margin-bottom: 1.1rem;
}
.card > :last-child { margin-bottom: 0; }
.card > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 0.85rem; }
@media (min-width: 640px) {
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   PILLS + BUTTONS — capsules only
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: var(--capsule);
  border: 1px solid var(--hair);
  color: var(--gray);
  white-space: nowrap;
}
.pill.solid  { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pill.green  { color: var(--go);      border-color: color-mix(in srgb, var(--go) 50%, transparent); }
.pill.red    { color: var(--dish);    border-color: color-mix(in srgb, var(--dish) 50%, transparent); }
.pill.amber  { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 50%, transparent); }
.pill.blue   { color: var(--dtv);     border-color: color-mix(in srgb, var(--dtv) 50%, transparent); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--paper);
  border-radius: var(--capsule);
  background: transparent;
  color: var(--paper);
  font: 600 0.78rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), transform 0.2s var(--ease);
}
/* fill-sweep on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-blade);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(0.975); }
.btn.primary { background: var(--paper); color: var(--ink); }
.btn.primary::before { background: var(--ink); }
.btn.primary:hover { color: var(--paper); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 42px; padding: 0.45rem 1.1rem; font-size: 0.7rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.3rem; }

/* Big nav tiles — angled, hover-slide */
.tiles { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.tiles a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  background: var(--surface);
  border: 0;
  color: var(--paper);
  text-decoration: none;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--blade)), calc(100% - var(--blade)) 100%, 0 100%);
  transition: background 0.4s var(--ease);
}
.tiles a::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--ease-blade);
}
.tiles a:hover { background: var(--surface-3); }
.tiles a:hover::after { transform: none; }
.tiles .t-num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gray-dim);
  flex: none;
}
.tiles .t-body { min-width: 0; flex: 1; }
.tiles .t-body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tiles .t-body span {
  display: block;
  color: var(--gray);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.tiles .t-end { flex: none; color: var(--gray-dim); transition: transform 0.4s var(--ease), color 0.4s var(--ease); }
.tiles a:hover .t-end { transform: translateX(6px); color: var(--paper); }
.tiles a.done .t-end { color: var(--go); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 0.7rem 0;
  margin: 2rem calc(-1 * max(var(--inset), env(safe-area-inset-right)))
          2rem calc(-1 * max(var(--inset), env(safe-area-inset-left)));
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  gap: 2.2rem;
  padding-right: 2.2rem;
  animation: scrollX 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray-dim);
}
.marquee span.hot { color: var(--paper); }
@keyframes scrollX { to { transform: translateX(-100%); } }

/* ==========================================================================
   TABLES — hairlines only, no boxes. Stack to rows on small screens.
   ========================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.3rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 100%; }
thead th {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dim);
  text-align: left;
  padding: 0 0.85rem 0.6rem 0;
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
tbody td {
  padding: 0.72rem 0.85rem 0.72rem 0;
  border-bottom: 1px solid var(--hair-2);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
tr.is-hit td {
  background: color-mix(in srgb, var(--paper) 9%, transparent);
  font-weight: 700;
}
tr.is-hit td:first-child { box-shadow: inset 3px 0 0 var(--paper); padding-left: 0.7rem; }

/* ==========================================================================
   FORMS
   ========================================================================== */

label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin-bottom: 0.55rem;
}
.field { margin-bottom: 1.25rem; }

input[type="search"], input[type="text"], input[type="number"], select {
  width: 100%;
  min-height: 54px;
  padding: 0.7rem 1.3rem;
  font: 500 1rem var(--font-body);
  color: var(--paper);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--capsule);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
input::placeholder { color: var(--gray-dim); }
select { appearance: none; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 1.3rem; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--gray);
  border-bottom: 2px solid var(--gray);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Segmented control — capsules */
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg button {
  flex: 1 1 auto;
  min-width: 58px;
  min-height: 50px;
  padding: 0 1rem;
  border: 1px solid var(--hair);
  border-radius: var(--capsule);
  background: transparent;
  color: var(--gray);
  font: 600 0.82rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.seg button:hover { color: var(--paper); border-color: var(--paper); }
.seg button[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* ==========================================================================
   CHECKLISTS
   ========================================================================== */

.checklist { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.checklist > li {
  margin: 0 0 0.45rem;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background 0.35s var(--ease);
}
.checklist > li > label {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
}
.checklist input {
  appearance: none;
  flex: none;
  width: 24px; height: 24px;
  margin-top: 1px;
  border: 1px solid var(--gray-dim);
  border-radius: var(--capsule);
  cursor: pointer;
  position: relative;
  transition: all 0.3s var(--ease);
}
.checklist input:checked { background: var(--go); border-color: var(--go); }
.checklist input:checked::after {
  content: "";
  position: absolute;
  left: 7px; top: 4px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(42deg);
}
.checklist .step-no {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
  padding-top: 0.28rem;
  min-width: 1.4rem;
}
.checklist > li:has(input:checked) { background: var(--surface-2); }
.checklist > li:has(input:checked) > label { color: var(--gray-dim); }
.checklist > li:has(input:checked) > label > span:last-of-type { text-decoration: line-through; }
.checklist .sub {
  padding: 0 1.3rem 1rem 4rem;
  margin: 0;
  color: var(--gray);
  font-size: 0.87rem;
  list-style: none;
}
.checklist .sub li { position: relative; margin-bottom: 0.3rem; padding-left: 0.9rem; }
.checklist .sub li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 1px;
  background: var(--gray-dim);
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */

.progress {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.4rem;
  margin-bottom: 1.4rem;
}
.ring { flex: none; width: 84px; height: 84px; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: var(--hair); }
.ring .fg {
  stroke: var(--paper);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.32rem;
  letter-spacing: 0.02em;
}
.progress__txt { min-width: 0; }
.progress__txt strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.28rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.progress__txt span { color: var(--gray); font-size: 0.9rem; }

.bar { height: 2px; background: var(--hair); overflow: hidden; }
.bar > i {
  display: block; height: 100%;
  background: var(--paper);
  transition: width 0.7s var(--ease);
}

.donebox {
  border-top: 1px solid var(--hair);
  margin: 3rem 0 1.2rem;
  padding-top: 1.5rem;
  text-align: center;
}
.donebox p { color: var(--gray-dim); font-size: 0.82rem; margin: 0.8rem 0 0; }

/* ==========================================================================
   MEDIA
   ========================================================================== */

figure { margin: 0 0 1.3rem; }
figure img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  cursor: zoom-in;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: opacity 0.4s var(--ease);
}
figure img:hover { opacity: 0.88; }
figcaption {
  color: var(--gray-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
}

.lightbox {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(0, 0, 0, 0.96);
  display: none;
  overflow: auto;
  padding: 0.6rem;
}
.lightbox[open] { display: block; }
.lightbox img { width: 100%; height: auto; }
.lightbox .iconbtn { position: fixed; top: 0.9rem; right: 0.9rem; z-index: 2; background: var(--surface); }

.player { margin-bottom: 1.1rem; }
.player audio, .player video { width: 100%; display: block; border-radius: var(--capsule); }
.player video { border-radius: 0; background: #000; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.player__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.player__head strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.18rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.player__head .dur {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gray-dim);
  font-variant-numeric: tabular-nums;
}
.missing-media {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--hair);
  color: var(--gray-dim);
  font-size: 0.86rem;
}
.missing-media code { border-color: var(--hair); }

/* ==========================================================================
   SEARCH
   ========================================================================== */

.searchbox { position: relative; margin-bottom: 2rem; }
.results { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.results a {
  display: block;
  padding: 0.9rem 1.3rem;
  background: var(--surface);
  border: 0;
  color: var(--paper);
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background 0.3s var(--ease);
}
.results a:hover { background: var(--surface-3); }
.results strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.results span { color: var(--gray); font-size: 0.86rem; }
.search-empty { color: var(--gray-dim); font-size: 0.88rem; }

/* ==========================================================================
   STEPPER (roadmap)
   ========================================================================== */

.step {
  background: var(--surface);
  margin-bottom: 0.5rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--blade)), calc(100% - var(--blade)) 100%, 0 100%);
  transition: background 0.35s var(--ease);
}
.step > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.32rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary .n {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
}
.step > summary .plus {
  margin-left: auto;
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.step > summary .plus::before,
.step > summary .plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--paper);
  transition: transform 0.4s var(--ease-blade);
}
.step > summary .plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.step > summary .plus::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.step[open] > summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.step[open] { background: var(--surface-2); }
.step .body { padding: 0 1.4rem 1.3rem; }
.step .body > :last-child { margin-bottom: 0; }
.step:hover { background: var(--surface-2); }

.say {
  position: relative;
  padding: 0.9rem 1.3rem 0.9rem 1.6rem;
  margin: 0.9rem 0;
  background: var(--surface-3);
  font-size: 1rem;
  font-style: italic;
  color: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.say::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 10px;
  width: 3px; background: var(--go);
}

/* Two-option compare */
.vs { display: grid; gap: 0.55rem; margin-bottom: 1.2rem; }
@media (min-width: 560px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs > div {
  position: relative;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.vs > div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 12px; width: 3px;
}
.vs .bad::before  { background: var(--dish); }
.vs .good::before { background: var(--go); }
.vs h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vs p { margin: 0; font-size: 0.9rem; color: var(--gray); }

/* ==========================================================================
   RESULT PANEL (configurator)
   ========================================================================== */

.result {
  position: relative;
  background: var(--surface);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.4rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.result h3 {
  margin: 1.5rem 0 0.7rem;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.result h3:first-child { margin-top: 0; }

.boxes { list-style: none; padding: 0; margin: 0 0 0.4rem; }
.boxes li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--hair-2);
}
.boxes li:last-child { border-bottom: 0; }
.boxes .slot {
  flex: none;
  width: 5.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.boxes .bx {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kv { display: grid; gap: 0.5rem; }
.kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.94rem;
}
.kv > div > span:first-child { color: var(--gray); }
.kv > div > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.kv > div.total {
  border-top: 1px solid var(--hair);
  padding-top: 0.7rem;
  margin-top: 0.3rem;
}
.kv > div.total span:first-child {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}
.kv > div.total span:last-child {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   PHONE LIST
   ========================================================================== */

.tels { display: grid; gap: 0.45rem; margin-bottom: 1.4rem; }
.tels a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  background: var(--surface);
  border: 0;
  color: var(--paper);
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background 0.3s var(--ease);
}
.tels a:hover { background: var(--surface-3); }
.tels .t-txt { min-width: 0; }
.tels .t-txt strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tels .t-txt span { color: var(--gray); font-size: 0.84rem; }
.tels .t-num {
  margin-left: auto;
  flex: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   QUIZ
   ========================================================================== */

.q { border-top: 1px solid var(--hair); padding: 1.4rem 0 0.6rem; margin-bottom: 0.6rem; }
.q__prompt {
  display: flex;
  gap: 0.9rem;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 0.9rem;
}
.q__prompt .qn {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
  padding-top: 0.35rem;
}
.q__opts { display: grid; gap: 0.4rem; }
.q__opts button {
  text-align: left;
  padding: 0.85rem 1.3rem;
  border: 1px solid var(--hair);
  border-radius: var(--capsule);
  background: transparent;
  color: var(--paper);
  font: 500 0.95rem/1.4 var(--font-body);
  cursor: pointer;
  min-height: 50px;
  transition: all 0.3s var(--ease);
}
.q__opts button:hover:not(:disabled) { border-color: var(--paper); }
.q__opts button.right {
  border-color: var(--go);
  background: color-mix(in srgb, var(--go) 16%, transparent);
  font-weight: 700;
}
.q__opts button.wrong {
  border-color: var(--dish);
  background: color-mix(in srgb, var(--dish) 16%, transparent);
  text-decoration: line-through;
}
.q__opts button:disabled { cursor: default; }
.q__why {
  margin: 0.7rem 0 0;
  padding-left: 1.85rem;
  font-size: 0.88rem;
  color: var(--gray);
}

/* ==========================================================================
   WHAT / WHY / HOW triptych  (the-how.html)
   ========================================================================== */

.wwh { display: grid; gap: 0.55rem; margin-bottom: 1.4rem; }
@media (min-width: 640px) { .wwh { grid-template-columns: repeat(3, 1fr); } }
.wwh > div {
  position: relative;
  padding: 1.3rem 1.4rem 1.5rem;
  background: var(--surface);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.wwh h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.wwh p { margin: 0; font-size: 0.9rem; color: var(--gray); }
.wwh .on { background: var(--paper); }
.wwh .on h3 { color: var(--ink); }
.wwh .on p { color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }

/* The questions in their head */
.howq { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.howq li {
  position: relative;
  padding: 0.95rem 0 0.95rem 2.6rem;
  border-bottom: 1px solid var(--hair-2);
  font-weight: 600;
  font-size: 1.02rem;
}
.howq li::before {
  content: "HOW";
  position: absolute;
  left: 0; top: 1.15rem;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gray-dim);
}
.howq li small {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: 0.87rem;
  color: var(--gray);
}

/* ==========================================================================
   DISH / DIRECTV comparison  (objections.html)
   ========================================================================== */

th.dish { color: var(--dish); }
th.dtv  { color: var(--dtv); }
td.spec { font-weight: 700; white-space: normal; }
td.dish {
  white-space: normal;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--dish);
  padding-left: 0.8rem;
}
td.dtv  { white-space: normal; color: var(--gray-dim); }

/* ==========================================================================
   PAGE NAV + FOOTER
   ========================================================================== */

.pagenav {
  display: flex;
  gap: 0.6rem;
  margin: 2.4rem 0 1rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.4rem;
}
.pagenav a { flex: 1; }
.pagenav > span { flex: 1; }

footer.site {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 3rem auto 0;
  padding: 1.6rem var(--inset) 2rem;
  border-top: 1px solid var(--hair);
  color: var(--gray-dim);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
}
footer.site .mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .topbar, .drawer, .fieldbar, .pagenav, .donebox, .grain, .bladefield, .wipe { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .blade, .note, .card, .step, .result { clip-path: none !important; background: #fff !important; border: 1px solid #ccc; }
  h1, h2 { color: #000; }
}