/* ==========================================================================
   THE HOBBY: CARD CAREER — thehobbygame.com
   Otto House Productions Ltd.

   The palette is lifted verbatim from the game's own theme
   (apps/mobile/src/theme.ts) so the site and the app are the same product.
   Every value below is a real game token. No frameworks, no external
   requests, no trackers.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* The ground is the Otto House studio navy, so this site and
     ottohouseproductions.com read as one family. Every neutral below is a
     literal blend of Otto Navy #071D3A and Warm Ivory #F7F3E9 — the
     percentage is how much ivory is in the mix.

     The Hobby's own identity comes through inside that frame: the game's
     gold and, above all, the game's cyan (theme.cyan), which the studio
     site does not use. Card art carries the rest. */

  --ink:        #071D3A;  /* Otto Navy, undiluted — the page                */
  --ink-deep:   #041122;  /* navy toward black — bands and footer           */
  --ink-raised: #182C46;  /* 7% ivory — panels the cards sit on             */
  --paper:      #F7F3E9;  /* Warm Ivory — primary type          15.21:1     */
  --muted:      #AFB3B5;  /* 70% ivory — body copy               7.98:1     */
  --dim:        #979DA3;  /* 60% ivory — small print             6.15:1     */
  --rule:       #293B53;  /* 14% ivory                                      */
  --rule-soft:  #1A2E48;  /* 8% ivory                                       */

  --gold:       #C9A45E;  /* theme.gold — shared with the studio  7.19:1    */
  --gold-soft:  #E0C48D;
  --cyan:       #6CA6A4;  /* theme.cyan — The Hobby's own accent  6.12:1    */
  --cyan-bright:#8FC4C2;

  /* Scarcity edges, verbatim from the game's rarityColours. Used only on the
     reveal glint, exactly as the game uses them. */
  --r-base: #A3B4B8;  --r-foil: #67CFE2;  --r-insert: #65D5A2;
  --r-199: #00A6A0;   --r-99: #64AEEF;    --r-50: #E5B83D;
  --r-25: #F18B66;    --r-5: #F05E72;     --r-1: #F6D45D;
  --r-auto: #C995FF;

  /* theme.fontFamilies sets an editorial serif against a neutral companion,
     and the title screen sets THE HOBBY in a serif. Both stacks below avoid
     the -apple-system / Segoe UI / Roboto default and load nothing external. */
  --display: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, Candara, "Trebuchet MS", "Segoe UI", sans-serif;

  --gutter: 28px;
  --measure: 1200px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Candara and Trebuchet default to old-style figures. */
  font-variant-numeric: lining-nums;
}

/* Every image carries width/height attributes for layout stability. Without
   an explicit height:auto here, any rule that sets only `width` would leave
   the attribute height in force and stretch the image. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--ink-deep); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink-deep);
  padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

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

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.eyebrow--cyan { color: var(--cyan); }
.eyebrow--faint { color: var(--dim); }

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  color: var(--paper);
}

.lede { font-size: 19px; color: var(--dim); margin: 0; max-width: 56ch; }

.rule { border: 0; border-top: 1px solid var(--rule-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.mast {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 29, 58, 0.88);   /* Otto Navy --ink, the ground the lockup is drawn for */
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}

/* Three zones, spaced equally: the studio lockup sits midway between the game
   wordmark and the menu. A fixed centre would need equal side columns, and the
   menu is far wider than the wordmark, so it would squash and wrap. */
.mast__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 96px;
}

/* flex: none on both marks. Without it the masthead row shrinks the logos
   to fit the nav between 761px and 1000px, which distorts them - the old
   asset rendered at 2.93:1 against its true 3.50:1 at 768px. */
.mast__brand { display: inline-flex; align-items: center; text-decoration: none; padding: 8px 0; flex: none; }
/* Issue 02 lockup, viewBox-trimmed to its artwork, so this is the true mark
   height and the clear space around it is set here rather than in the file.
   At 50px the lockup is 189px wide - the same footprint the old asset had -
   but THE HOBBY inside it stands 22.9px against the old 17.8px. */
.mast__brand picture { display: inline-flex; flex: none; }
.mast__brand img { height: 50px; width: auto; flex: none; }

.mast__right { display: flex; align-items: center; gap: 26px; }

/* Studio lockup, centred between the game wordmark and the menu. Same
   treatment it had in the hero, sized for a masthead. */
.mast__studio {
  display: inline-flex; align-items: center; gap: 15px;
  text-decoration: none; flex: none;
}
.mast__studio img { width: 78px; height: auto; flex: none; }
.mast__studio span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.17em; line-height: 1.7;
  text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
  transition: color 160ms ease;
}
.mast__studio:hover span { color: var(--paper); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--dim);
  text-decoration: none; padding: 8px 0; position: relative;
  transition: color 160ms ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: var(--gold); transition: right 220ms ease;
}
.nav a:hover { color: var(--paper); }
.nav a:hover::after { right: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gold); color: var(--ink-deep);
  font-size: 13px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 24px; border: 1px solid var(--gold);
  transition: background 170ms ease, border-color 170ms ease, transform 170ms ease;
  cursor: pointer;
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold-soft); }

.btn--sm { padding: 11px 17px; font-size: 11.5px; }
.btn .arrow { transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* App Store button. Marked with .js-appstore so every instance is easy to find. */
.appstore { display: inline-flex; flex-direction: column; gap: 7px; }
.appstore__note { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 62px 0 74px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 60px;
  /* Top-aligned: the wordmark sits level with the top of the screenshot
     rather than floating in the middle of a much taller column. */
  align-items: start;
}

.hero__kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.hero__kicker .bar { width: 40px; height: 1px; background: var(--gold); flex: none; }

/* Fills the hero measure. Capped at 600px because the source is 1200px
   wide, so anything larger would upscale on a 2x screen. */
.hero__wordmark { width: min(100%, 600px); margin-bottom: 34px; }

.hero h1 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 24px; }
.hero h1 .accent { color: var(--gold-soft); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 22px; margin-top: 34px; }

/* The screenshot is presented as a plate, not a floating glossy card: a
   hairline rule, square corners and a flat recessed ground. */
.hero__shot {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--ink-deep);
  padding: 10px;
  /* Keeps the screenshot from towering over the copy beside it. */
  max-width: 470px;
  margin-left: auto;
}
.hero__shot img { width: 100%; height: auto; }
.hero__shot::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--rule-soft); pointer-events: none; }
.hero__caption { font-size: 12px; color: var(--dim); margin: 14px 0 0; text-align: center; }

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */

.band { padding: 92px 0; border-bottom: 1px solid var(--rule-soft); }
.band--deep { background: var(--ink-deep); }
.band--raised { background: var(--ink-raised); }

.band__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 52px; }
.band__num { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--cyan); flex: none; }
.band__head h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 400; margin: 0; flex: none; letter-spacing: -0.01em; }
.band__head .rule { flex: 1; }

/* --------------------------------------------------------------------------
   The hook
   -------------------------------------------------------------------------- */

.hook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 60px; align-items: center; }
.hook h3 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 22px; letter-spacing: -0.015em; }
.hook p { color: var(--dim); margin: 0 0 18px; }
.hook strong { color: var(--paper); font-weight: 600; }

.hook__cards { display: flex; justify-content: center; align-items: flex-end; }
/* The three cards overlap by design. Negative margins do the overlapping so
   the fan is laid out inside its column rather than transformed out of it. */
.hook__cards img { width: 44%; margin: 0 -6%; border-radius: 6px; box-shadow: 0 14px 26px rgba(2, 8, 18, 0.55); }
.hook__cards img:nth-child(1) { transform: rotate(-7deg) translate(14px, 10px); z-index: 1; }
.hook__cards img:nth-child(2) { transform: translateY(-10px); z-index: 3; }
.hook__cards img:nth-child(3) { transform: rotate(7deg) translate(-14px, 10px); z-index: 2; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.step { background: var(--ink); padding: 30px 26px 34px; }
.step__n { font-family: var(--display); font-size: 13px; color: var(--gold); display: block; margin-bottom: 16px; }
.step h3 { font-family: var(--display); font-weight: 400; font-size: 25px; margin: 0 0 10px; letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Features
   -------------------------------------------------------------------------- */

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.feature { border-top: 1px solid var(--rule); padding-top: 22px; }
.feature h3 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0 0 9px; letter-spacing: -0.005em; }
.feature p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Pack teaser
   -------------------------------------------------------------------------- */

.teaser { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.teaser__copy h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 34px); margin: 0 0 16px; letter-spacing: -0.01em; }
.teaser__copy p { color: var(--muted); margin: 0 0 16px; }
.teaser__disclaimer { font-size: 13px; color: var(--dim); border-left: 2px solid var(--rule); padding-left: 14px; margin-top: 24px; }

/* --------------------------------------------------------------------------
   Reveal stack

   A web recreation of the game's own reveal, not a decorative animation.
   In the app (apps/mobile/app/reveal.tsx) the active card is dragged in any
   2D direction; the immediate next card is already rendered beneath it, so
   moving the top card exposes the real card underneath. Past the threshold
   the card exits along the drag vector and the next one is promoted; under
   it, the card springs back. A border flashes in the card's own scarcity
   colour on arrival. Every constant here is taken from the game:

     POSITION_THRESHOLD  0.34 of the directional extent   (revealGesture.ts)
     FLING               0.12 extent at 0.85 velocity     (revealGesture.ts)
     exit distance       hypot(w,h) x 1.2, 170ms          (revealGesture.ts)
     return spring       damping 20, stiffness 165        (revealReturnAnimation.ts)
     drag rotation       +/-326px maps to +/-8deg          (reveal.tsx)
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--ink-deep);
  padding: 34px 24px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  min-height: 520px;
  justify-content: center;
}
.stage::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule-soft); pointer-events: none; }

.stage__view { display: none; width: 100%; flex-direction: column; align-items: center; gap: 22px; }
.stage__view.on { display: flex; }

.stage__pack img { width: 178px; filter: drop-shadow(0 16px 28px rgba(2, 8, 18, 0.6)); }

/* The stack. Layers sit behind the active card, offset and dimmed, exactly
   as the app previews the remaining committed cards. */
.deck { position: relative; width: 196px; height: 293px; }

.deck__layer {
  position: absolute; inset: 0;
  border-radius: 5px;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  transform-origin: 50% 100%;
}
.deck__layer--3 { transform: translateY(14px) scale(0.90); opacity: 0.35; }
.deck__layer--2 { transform: translateY(9px) scale(0.94); opacity: 0.55; }

/* The immediate next card is a real card image, not a placeholder — the
   thing the top card uncovers as it moves. */
.deck__next {
  position: absolute; inset: 0;
  transform: translateY(5px) scale(0.97);
}
.deck__next img { width: 100%; border-radius: 5px; box-shadow: 0 8px 18px rgba(2, 8, 18, 0.5); }

.deck__card {
  position: absolute; inset: 0;
  cursor: grab;
  touch-action: none;
  border-radius: 5px;
  will-change: transform;
}
.deck__card:active { cursor: grabbing; }
.deck__card img { width: 100%; border-radius: 5px; box-shadow: 0 12px 24px rgba(2, 8, 18, 0.6); pointer-events: none; }

/* The scarcity edge, flashed on arrival in the card's own rarity colour. */
.deck__glint {
  position: absolute; inset: -3px;
  border: 2px solid var(--cyan);
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
}
.deck__glint.flash { animation: glint 620ms ease-out 1; }
@keyframes glint {
  0%   { opacity: 0; transform: scale(0.985); }
  22%  { opacity: 1; transform: scale(1.012); }
  100% { opacity: 0; transform: scale(1); }
}

.deck__meta { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.deck__tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid currentColor; border-radius: 2px;
}
.deck__hint { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin: 0; }
.deck__name { font-family: var(--display); font-size: 21px; margin: 0; color: var(--paper); }

/* Ten-years-on panel */
.sim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; width: 100%; max-width: 540px; }
.sim__card { width: 148px; border-radius: 5px; box-shadow: 0 12px 24px rgba(2, 8, 18, 0.55); }
.sim__body h4 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0 0 12px; }
.sim__row { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule-soft); font-size: 14.5px; }
.sim__row:first-of-type { border-top: 0; }
.sim__k { color: var(--dim); flex: none; width: 80px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 3px; }
.sim__v { color: var(--muted); }
.sim__v b { color: var(--paper); font-weight: 600; }
.sim__then { color: var(--cyan-bright); }

/* --------------------------------------------------------------------------
   Rainbow — every treatment of one card
   -------------------------------------------------------------------------- */

.rainbow {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 8px 0 4px;
}
.rainbow img {
  /* Ten overlapping cards span 10w - 18m of the row (the outer negative
     margins overhang at both ends). Keep that under 100%. */
  width: 15.4%;
  margin: 0 -3.2%;   /* 154 - 57.6 = 96.4% */
  border-radius: 4px;
  box-shadow: 0 12px 26px rgba(2, 8, 18, 0.62);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rainbow img:nth-child(odd)  { transform: translateY(10px); }
.rainbow img:nth-child(even) { transform: translateY(-4px); }
.rainbow img:hover { transform: translateY(-16px) scale(1.04); z-index: 5; position: relative; }

.ladder { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.ladder li {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--rule); padding: 5px 10px;
}
.ladder li b { color: var(--paper); font-weight: 700; }

/* --------------------------------------------------------------------------
   Card gallery
   -------------------------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: 6px; box-shadow: 0 10px 20px rgba(2, 8, 18, 0.5); }
.gallery figcaption { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 12px; }

.packs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; align-items: end; }
.packs img { width: 100%; }

/* --------------------------------------------------------------------------
   Spec list
   -------------------------------------------------------------------------- */

.spec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.spec li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft); font-size: 15px;
}
.spec .k { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); flex: none; }
.spec .v { color: var(--paper); text-align: right; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.split h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 34px); margin: 0 0 18px; letter-spacing: -0.01em; }
.split p { color: var(--dim); margin: 0 0 16px; }

.caption { font-size: 12.5px; color: var(--dim); margin: 16px 0 0; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.close { padding: 96px 0; text-align: center; background: var(--ink-deep); border-bottom: 1px solid var(--rule-soft); }
.close h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 50px); margin: 0 auto 20px; max-width: 18ch; letter-spacing: -0.015em; line-height: 1.08; }
.close p { color: var(--dim); max-width: 52ch; margin: 0 auto 34px; }
.close__actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot { padding: 62px 0 52px; background: var(--ink); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--rule-soft); }
.foot__logo { width: 168px; height: auto; margin: 0 0 24px; }
.foot__entity { color: var(--paper); font-size: 15px; margin: 0 0 8px; }
.foot p { color: var(--dim); font-size: 14px; margin: 0 0 7px; }
.foot h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin: 0 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; }
.foot li a { color: var(--dim); text-decoration: none; font-size: 14.5px; transition: color 150ms ease; }
.foot li a:hover { color: var(--gold-soft); }
.foot__base { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; padding-top: 26px; }
.foot__base p { font-size: 13px; margin: 0; }

/* --------------------------------------------------------------------------
   Document pages (privacy, support, 404)
   -------------------------------------------------------------------------- */

.doc { padding: 62px 0 86px; }
.doc__inner { max-width: 720px; }
.doc__title { font-family: var(--display); font-size: clamp(32px, 5vw, 48px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; margin: 18px 0 12px; }
.doc__meta { color: var(--dim); font-size: 14px; margin: 0 0 32px; }
.doc__intro { font-size: 18px; color: var(--dim); line-height: 1.65; padding-bottom: 28px; margin: 0 0 12px; border-bottom: 1px solid var(--rule-soft); }
.doc h2 { font-family: var(--display); font-size: 25px; font-weight: 400; color: var(--paper); margin: 44px 0 13px; letter-spacing: -0.01em; }
.doc h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 30px 0 12px; }
.doc p { color: var(--dim); margin: 0 0 15px; }
.doc strong { color: var(--paper); font-weight: 600; }
.doc ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.doc ul li { position: relative; padding-left: 21px; margin-bottom: 9px; color: var(--dim); }
.doc ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 1px; background: var(--gold); }
.doc ol { margin: 0 0 18px; padding-left: 20px; color: var(--dim); }
.doc ol li { margin-bottom: 9px; }
.doc a { color: var(--gold-soft); }
.doc a:hover { color: var(--gold); }
.doc .spec li { padding-left: 0; margin-bottom: 0; color: var(--dim); }
.doc .spec li::before { content: none; }

.note { border-left: 2px solid var(--gold); padding: 4px 0 4px 19px; margin: 22px 0; }
.note p { color: var(--paper); margin: 0; }

.doc__footer { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }

/* FAQ */
.faq { border-top: 1px solid var(--rule-soft); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  cursor: pointer; padding: 19px 0; font-size: 17px; color: var(--paper);
  list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--dim); margin: 0 0 20px; max-width: 68ch; font-size: 16px; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll. Content is visible by default; the animation only ever
   opts in once the script has confirmed it can finish, so a JS failure
   cannot hide copy.
   -------------------------------------------------------------------------- */

.js-anim .rise { opacity: 0; transform: translateY(16px); transition: opacity 620ms ease, transform 720ms cubic-bezier(0.22,1,0.36,1); }
.js-anim .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .mast__studio span { display: none; }
  .mast__studio img { width: 68px; }
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 46px; }
  .hero__shot { max-width: 400px; margin: 0 auto; }
  .hook { grid-template-columns: 1fr; gap: 44px; }
  /* Once the hook stacks, the fan inherits the full content width and the
     cards balloon. Cap it so rotation bleed stays inside the page. */
  .hook__cards { max-width: 460px; margin: 0 auto; }
  .teaser { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rainbow img { width: 18%; margin: 0 -4.7%; }   /* 180 - 84.6 = 95.4% */
  .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .foot__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .nav { display: none; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }

  .mast__inner { min-height: 78px; gap: 10px; }
  .mast__brand img { height: 18px; }   /* name-only variant: 142px wide, 17.2px cap */
  .mast__studio img { width: 52px; }
  .mast__right { gap: 12px; }

  .hero { padding: 46px 0 52px; }
  .hero__wordmark { width: 100%; margin-bottom: 26px; }
  .foot__logo { width: 140px; }
  .hero h1 { font-size: clamp(29px, 8.4vw, 38px); }
  .lede { font-size: 17px; }
  .hero__actions { gap: 14px; margin-top: 28px; }

  .band { padding: 56px 0; }
  .band__head { margin-bottom: 32px; gap: 13px; }

  .steps { grid-template-columns: 1fr; }
  .step { padding: 24px 20px 26px; }
  .features { grid-template-columns: 1fr; gap: 22px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* The rainbow keeps all ten cards on a phone by overlapping harder; it is
     meant to read as a spread, not as ten legible cards. */
  .rainbow img { width: 24%; margin: 0 -8%; }     /* 240 - 144 = 96% */
  .rainbow img:hover { transform: none; }

  .stage { min-height: 440px; padding: 24px 14px 20px; }
  .stage__pack img { width: 142px; }
  .deck { width: 168px; height: 251px; }
  .deck__name { font-size: 19px; }

  /* The three-card fan is sized as a share of its column, so on a phone it
     has to overlap harder or it pushes past the viewport. */
  .hook__cards img { width: 34%; margin: 0 -4%; }
  .hook__cards img:nth-child(1) { transform: rotate(-7deg) translate(9px, 8px); }
  .hook__cards img:nth-child(3) { transform: rotate(7deg) translate(-9px, 8px); }
  .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }


  .sim { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
  .sim__card { width: 128px; }
  .sim__row { flex-direction: column; gap: 2px; text-align: left; }
  .sim__k { width: auto; }
  .sim__body { text-align: left; }

  .close { padding: 62px 0; }
  .close__actions { flex-direction: column; align-items: center; }

  .foot__grid { grid-template-columns: 1fr; gap: 30px; }
  .spec li { font-size: 14px; gap: 14px; }
}

/* Belt and braces: nothing may create a horizontal scrollbar. */
html, body { overflow-x: hidden; max-width: 100%; }