/* ============================================================================
   FUTKING landing page — layout for "FUTKING Landing.dc.html"
   Section order and every measurement follow the design source; the inline
   styles of the .dc template are grouped into classes here.
   ========================================================================= */

html { scroll-behavior: smooth; }
/* Folga para o cabeçalho grudado (68px): sem ela a âncora para debaixo dele. */
html { scroll-padding-top: calc(68px + var(--space-6)); }

@keyframes futking-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes futking-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
/* O brilho cruza o pacote e some — o resto do ciclo ele fica fora do papel. */
@keyframes futking-foil {
  0% { transform: rotate(19deg) translateX(-320%); }
  22%, 100% { transform: rotate(19deg) translateX(320%); }
}

.page {
  min-height: 100vh;
  background: var(--surface-page);
  /* `clip`, não `hidden`: os dois cortam o que passa da largura, mas `hidden`
     vira contêiner de rolagem e quebra todo `position: sticky` lá dentro. */
  overflow-x: clip;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-8);
  height: 68px;
  background: var(--surface-page-alt);
  border-bottom: var(--border-hair) solid var(--line-hairline);
}
/* O CTA se ancora à direita sozinho: abaixo de 900px a nav some e o flex:1 dela
   iria junto, deixando o botão colado no wordmark. */
.site-header > .fk-btn { margin-left: auto; }
.site-nav {
  display: flex;
  gap: var(--space-6);
  flex: 1;
  justify-content: flex-end;
}
.site-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--text-accent); text-decoration: none; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-page-alt);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(70% 90% at 74% 30%, var(--felt-600), var(--ink-900) 78%);
}
.hero__bg img,
.devlog__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The arena shot is a wide overhead frame; bias the crop upward so the pitch
   and the lit truss stay in view behind the hero copy. */
.hero__bg img { object-position: center 38%; }
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__wash--sides {
  background: linear-gradient(90deg,
    rgba(15, 17, 14, .94) 0%,
    rgba(15, 17, 14, .8) 38%,
    rgba(15, 17, 14, .45) 70%,
    rgba(15, 17, 14, .35) 100%);
}
.hero__wash--base {
  background: linear-gradient(180deg,
    rgba(15, 17, 14, .5) 0%,
    rgba(15, 17, 14, .35) 45%,
    var(--surface-page) 100%);
}
.hero__wash--spot {
  background: radial-gradient(50% 55% at 72% 42%, var(--felt-600), transparent 70%);
  opacity: .55;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
  gap: var(--space-10);
  align-items: center;
}
.hero__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-4);
}
.hero__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(46px, 8vw, 80px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
  text-wrap: balance;
}
.hero__lede {
  margin: 0 0 var(--space-6);
  font: var(--type-body);
  color: var(--text-body);
  max-width: 46ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.hero__incentive {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}
.hero__incentive strong {
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.hero__stats {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.stat__value {
  font: var(--type-score);
  font-size: var(--fs-h1);
  color: var(--text-strong);
}
.stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}

/* --- Hero card stack ---------------------------------------------------- */
.card-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  perspective: 1200px;
}
.card-stack__side {
  position: absolute;
  width: 250px;
  opacity: .8;
}
.card-stack__side--left { left: 0; top: 16%; transform: rotate(-9deg); }
.card-stack__side--right { right: 0; top: 22%; transform: rotate(8deg); }
.card-stack__hero {
  position: relative;
  z-index: 5;
  width: 310px;
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-standard);
  will-change: transform;
}
.card-stack__foil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: polygon(7% 0, 93% 0, 100% 7%, 100% 66%, 50% 100%, 0 66%, 0 7%);
  background: radial-gradient(220px 220px at 50% 45%,
    rgba(243, 237, 221, .22), rgba(217, 164, 65, .12) 42%, transparent 72%);
}

/* --- Ticker ------------------------------------------------------------- */
.ticker {
  background: var(--surface-page-alt);
  border-top: var(--border-hair) solid var(--line-hairline);
  border-bottom: var(--border-hair) solid var(--line-hairline);
  overflow: hidden;
  padding: var(--space-3) 0;
}
.ticker__track {
  display: flex;
  gap: var(--space-10);
  width: max-content;
  animation: futking-ticker 38s linear infinite;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Shared section shells ---------------------------------------------- */
.section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
.section--tight-top { padding-top: 0; }
.band {
  background: var(--surface-page-alt);
  border-top: var(--border-hair) solid var(--line-hairline);
  border-bottom: var(--border-hair) solid var(--line-hairline);
}
.band--open-bottom { border-bottom: none; }
.band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-10);
  align-items: center;
}
.split--top { align-items: stretch; }

/* --- Rodada ------------------------------------------------------------- */
.rodada__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.rodada__clock {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.rodada__note {
  margin: var(--space-5) 0 0;
  font: var(--type-body);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  max-width: 60ch;
}

/* --- Modos -------------------------------------------------------------- */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}
.mode__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.mode__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}
.mode--paper .mode__title { color: var(--text-on-paper); }
.mode__chip {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-on-paper-muted);
  border: var(--border-hair) solid var(--line-paper);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
}
.mode__lede {
  margin: 0 0 var(--space-5);
  font: var(--type-body);
  color: var(--text-body);
}
.mode--paper .mode__lede { color: var(--text-on-paper); }
.mode__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}
.mode--paper .mode__list { color: var(--text-on-paper); }
.mode__list li {
  border-top: var(--border-hair) solid var(--line-hairline);
  padding-top: var(--space-3);
}
.mode--paper .mode__list li { border-top-color: var(--line-paper); }
.mode__list li.is-emphasis { font-weight: var(--fw-semibold); }
.mode:not(.mode--paper) .mode__list li.is-emphasis { color: var(--text-accent); }

/* --- Pacote ------------------------------------------------------------- */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
  align-items: center;
}
.pack__lede {
  margin: 0 0 var(--space-4);
  font: var(--type-body);
  color: var(--text-body);
  max-width: 46ch;
}
.pack__note {
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.pack__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pack__btn {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  background: var(--action-primary);
  color: var(--ink-900);
  border: none;
  border-radius: var(--radius-xs);
  padding: 12px 22px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard);
}
.pack__btn:hover { background: var(--gold-400); }
.pack__btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.pack__status {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-accent);
  min-height: 18px;
}
.pack__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  perspective: 900px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: radial-gradient(60% 60% at 50% 45%, var(--felt-700), var(--ink-900) 75%);
  border: var(--border-hair) solid var(--line-hairline);
}
.pack__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms var(--ease-out-strong);
  background: radial-gradient(42% 42% at 50% 46%, rgba(217, 164, 65, .4), transparent 72%);
}
/* --- Foil ---------------------------------------------------------------- *
 * Pele única do pacote — vale para o lacre grande e para os mini pacotes do
 * kit, senão cada um vira um objeto diferente. São quatro camadas: liga
 * metálica, escovado diagonal, grão e um brilho que corre por cima.          */
.foil {
  position: relative;
  overflow: hidden;
  background-color: var(--gold-500);
  background-image:
    repeating-linear-gradient(112deg,
      rgba(255, 253, 246, .05) 0 1px,
      rgba(143, 100, 22, .06) 1px 3px),
    linear-gradient(152deg,
      var(--gold-600) 0%,
      var(--gold-700) 10%,
      var(--gold-400) 26%,
      var(--gold-300) 36%,
      var(--gold-500) 48%,
      var(--gold-700) 62%,
      var(--gold-500) 76%,
      var(--gold-400) 88%,
      var(--gold-600) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 246, .6),
    inset 0 -2px 0 rgba(143, 100, 22, .55),
    inset 2px 0 0 rgba(255, 253, 246, .18),
    inset -2px 0 0 rgba(143, 100, 22, .32);
}
.foil > * { position: relative; z-index: 2; }
.foil::before,
.foil::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.foil::before {                       /* grão impresso, por baixo do texto */
  inset: 0;
  z-index: 1;
  background-image: var(--texture-grain);
  background-size: 90px 90px;
  opacity: .26;
  mix-blend-mode: overlay;
}
.foil::after {                        /* brilho, por cima de tudo */
  z-index: 3;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 253, 246, .55) 45%,
    rgba(255, 253, 246, .14) 62%,
    transparent);
  opacity: .34;
  transform: rotate(19deg) translateX(30%);
}

.pack__sleeve {
  position: absolute;
  z-index: 4;
  width: 172px;
  height: 236px;
  transition:
    transform 460ms var(--ease-out-strong),
    opacity 460ms var(--ease-out-strong);
}
.pack__sleeve-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  overflow: hidden;
  transition:
    transform 520ms var(--ease-out-strong),
    opacity 520ms var(--ease-out-strong);
}
.pack__sleeve-top-fill {
  position: absolute;
  inset: 0;
  height: 384%;
  border-radius: var(--radius-sm);
}
.pack__sleeve-perf {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background:
    repeating-linear-gradient(90deg,
      rgba(10, 12, 8, .72) 0 5px,
      transparent 5px 11px),
    linear-gradient(180deg, rgba(143, 100, 22, .5), rgba(255, 253, 246, .3));
}
.pack__sleeve-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 26%;
  bottom: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Selo gravado atrás do wordmark, como marca-d'água de gráfica. */
.pack__sleeve-ring {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  border: var(--border-thick) solid rgba(255, 253, 246, .24);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 5px rgba(143, 100, 22, .14);
}
.pack__sleeve-word {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 30px;
  letter-spacing: var(--tracking-heading);
  color: var(--ink-900);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 253, 246, .45);
}
.pack__sleeve-rule {
  width: 62px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(10, 12, 8, .55), transparent);
}
.pack__sleeve-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: rgba(26, 29, 24, .74);
}
.pack__fan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: scale(.68);
  transform-origin: center;
  transition: opacity 460ms var(--ease-out-strong);
}
/* The drop shadow lives on the outer box, not on the rotating one: `filter`
   flattens an element's 3D rendering context, which would defeat
   backface-visibility and flip the card onto a mirrored back face. */
.pack__card {
  width: var(--pack-card-w);
  height: var(--pack-card-h);
  position: relative;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45));
}
.pack__card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 460ms var(--ease-out-strong);
}
.pack__card--sm { --pack-card-w: 104px; --pack-card-h: 145px; --pack-rating: 31px; }
.pack__card--md { --pack-card-w: 114px; --pack-card-h: 158px; --pack-rating: 34px; }
.pack__card--lg { --pack-card-w: 142px; --pack-card-h: 197px; --pack-rating: 43px; }
.pack__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  clip-path: polygon(5% 0, 95% 0, 100% 3.5%, 100% 91%, 93% 100%, 7% 100%, 0 91%, 0 3.5%);
}
.pack__face--back {
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack__face-mark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 15px;
  letter-spacing: var(--tracking-heading);
  color: rgba(217, 164, 65, .45);
}
.pack__face--front {
  transform: rotateY(180deg);
  background: var(--pc-frame);
}
.pack__face-inner {
  position: absolute;
  inset: 2px;
  clip-path: polygon(5% 0, 95% 0, 100% 3.5%, 100% 91%, 93% 100%, 7% 100%, 0 91%, 0 3.5%);
  background: var(--pc-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.pack__face-rating {
  font: var(--type-score);
  font-size: var(--pack-rating);
  line-height: .9;
  color: var(--pc-ink);
}
.pack__face-pos {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pc-ink);
}
.pack__face-rarity {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--pc-muted);
  margin-top: 5px;
}

/* --- Presidente --------------------------------------------------------- */
.prose p {
  font: var(--type-body);
  color: var(--text-body);
  max-width: 50ch;
  margin: 0 0 var(--space-4);
}
.prose p:last-of-type { margin-bottom: var(--space-6); }
.spec-list {
  display: grid;
  gap: var(--space-3);
  max-width: 420px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-body);
}
.spec-list__row {
  display: flex;
  justify-content: space-between;
  border-top: var(--border-hair) solid var(--line-hairline);
  padding-top: var(--space-3);
}
.spec-list__row > span:last-child { color: var(--text-strong); }
.president {
  display: flex;
  justify-content: center;
}
.president__col { width: 320px; }
.president__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-4);
  border-top: var(--border-hair) solid var(--line-hairline);
  padding-top: var(--space-3);
}
.president__foot-label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}
.president__foot-value {
  font: var(--type-score);
  color: var(--text-strong);
}

/* --- Duelo -------------------------------------------------------------- */
.duel-grid { margin-bottom: var(--space-10); }
.duel__lede {
  font: var(--type-body);
  color: var(--text-body);
  max-width: 50ch;
  margin: 0;
}
.steps {
  display: grid;
  align-content: start;
}
.step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: var(--border-hair) solid var(--line-hairline);
}
.step:last-child { border-bottom: var(--border-hair) solid var(--line-hairline); }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-accent);
  min-width: 28px;
}
.step__text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.formula__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.formula__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  color: var(--text-strong);
}
.formula__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}
.formula__rows {
  display: grid;
  gap: var(--space-5);
}
.formula__foot {
  margin: var(--space-6) 0 0;
  border-top: var(--border-hair) solid var(--line-hairline);
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.meter__label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-strong);
}
.meter__value {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-strong);
}
.meter__track {
  height: 6px;
  background: rgba(243, 237, 221, .12);
}
.meter__fill {
  height: 100%;
  width: var(--meter-w);
  background: var(--meter-color, var(--action-primary));
  transition: width 700ms var(--ease-out-strong);
}
.meter__note {
  margin: 8px 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Regra da casa ------------------------------------------------------ */
.house-rule {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--line-hairline);
  border-left: var(--border-heavy) solid var(--action-danger);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
}
.house-rule__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-10);
}
.house-rule__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--action-danger);
  margin-bottom: var(--space-3);
}
.house-rule__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}
.house-rule__body p {
  font: var(--type-body);
  color: var(--text-body);
  margin: 0 0 var(--space-4);
  max-width: 48ch;
}
.house-rule__body p:last-child { margin-bottom: 0; }
.house-rule__tiles {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.tile {
  border: var(--border-hair) solid var(--line-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.tile__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.tile__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}
.tile__note {
  margin: 6px 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Devlog ------------------------------------------------------------- */
.devlog__lede {
  font: var(--type-body);
  color: var(--text-body);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}
.timeline {
  display: grid;
  gap: var(--space-4);
}
.timeline__item {
  border-top: var(--border-heavy) solid var(--line-hairline);
  padding-top: var(--space-3);
}
.timeline__item--now { border-top-color: var(--action-primary); }
.timeline__when {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.timeline__item--now .timeline__when { color: var(--text-accent); }
.timeline__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}
.timeline__note {
  margin: 4px 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.devlog__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-hair) solid var(--line-hairline);
  box-shadow: var(--shadow-card);
}
.devlog__frame {
  height: 320px;
  /* Stands in for the arena photo until assets/arena.jpg is present. */
  background: radial-gradient(80% 90% at 50% 25%, var(--felt-600), var(--ink-900) 80%);
}
.devlog__badge {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--cream-100);
  background: rgba(15, 17, 14, .7);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}

/* --- Lista de espera ---------------------------------------------------- */
.waitlist { --fk-card-padding: var(--space-10) var(--space-8); }
.waitlist__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: var(--space-10);
  align-items: center;
}
.waitlist__col { max-width: 620px; }
.waitlist__flag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.waitlist__flag-text {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-on-paper-muted);
}
.waitlist__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(30px, 4.6vw, var(--fs-display-3));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-on-paper);
  text-wrap: balance;
}
.waitlist__lede {
  margin: 0 0 var(--space-5);
  font: var(--type-body);
  color: var(--text-on-paper);
}
.waitlist__lede strong { font-weight: var(--fw-bold); }

/* Prova de valor: o que entra no kit, em três linhas escaneáveis. */
.waitlist__perks {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-on-paper);
}
.waitlist__perks li {
  position: relative;
  padding-left: 28px;
}
.waitlist__perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  color: var(--ink-900);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}

/* Escassez (quantos kits sobraram) e urgência (quando fecha), lado a lado. */
.waitlist__urgency {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin: 0 0 var(--space-6);
  padding: var(--space-5) 0;
  border-top: var(--border-hair) solid var(--line-paper);
  border-bottom: var(--border-hair) solid var(--line-paper);
}
.waitlist__meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.waitlist__meter-label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-paper-muted);
}
.waitlist__meter-value {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-on-paper-muted);
}
.waitlist__meter-value strong {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--gold-700);
}
.waitlist__meter-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(18, 21, 15, .1);
  overflow: hidden;
}
.waitlist__meter-fill {
  height: 100%;
  width: var(--meter-w, 0%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold-700), var(--gold-500) 70%, var(--gold-400));
  transition: width 900ms var(--ease-out-strong);
}
.waitlist__meter-note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-on-paper-muted);
}
.waitlist__meter-note strong {
  font-weight: var(--fw-bold);
  color: var(--text-on-paper);
}
.waitlist__clock {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  box-shadow: var(--shadow-press);
  text-align: center;
}
.waitlist__clock-label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.waitlist__clock-value {
  font: var(--type-score);
  font-size: var(--fs-h3);
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}
.waitlist__clock-note {
  max-width: 20ch;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

/* O prêmio em si: painel escuro dentro do papel, para o kit saltar. */
.waitlist__kit {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  border: var(--border-hair) solid rgba(217, 164, 65, .34);
  box-shadow: var(--shadow-raised);
  color: var(--text-body);
}
.kit__stamp {
  position: absolute;
  top: -14px;
  right: var(--space-5);
  transform: rotate(-7deg);
  padding: 6px 12px;
  border: var(--border-thick) solid var(--gold-500);
  border-radius: var(--radius-xs);
  background: var(--ink-900);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-400);
}
.kit__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kit__packs {
  position: relative;
  height: 168px;
  margin: var(--space-4) 0 var(--space-5);
}
.kit__pack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 106px;
  height: 148px;
  margin: -74px 0 0 -53px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform 420ms var(--ease-out-strong);
}
/* A sombra acompanha o recorte do pacote, então vai de drop-shadow. */
.kit__pack--back {
  transform: translateX(-44px) translateY(-6px) rotate(-11deg);
  filter: brightness(.9) drop-shadow(0 10px 18px rgba(8, 12, 8, .55));
}
.kit__pack--front {
  transform: translateX(30px) translateY(6px) rotate(7deg);
  filter: drop-shadow(0 12px 22px rgba(8, 12, 8, .6));
}
/* Tira de abertura com picote, igual à do lacre grande. */
.kit__pack-strip {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  border-bottom: 1px solid rgba(143, 100, 22, .5);
  background:
    linear-gradient(180deg,
      rgba(255, 253, 246, .28),
      rgba(255, 253, 246, 0) 62%,
      rgba(143, 100, 22, .22));
}
.kit__pack-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    rgba(10, 12, 8, .6) 0 3px,
    transparent 3px 8px);
}
.kit__pack-ring {
  position: absolute;
  z-index: 1;
  top: 56%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: var(--border-hair) solid rgba(255, 253, 246, .3);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 4px rgba(143, 100, 22, .14);
}
.kit__pack-mark {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 30px;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--ink-900);
  text-shadow: 0 1px 0 rgba(255, 253, 246, .5);
}
.kit__pack-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(10, 12, 8, .68);
}
@media (prefers-reduced-motion: no-preference) {
  .kit__pack::after { animation: futking-foil 6s var(--ease-standard) infinite; }
  .kit__pack--front::after { animation-delay: .5s; }
}
/* O kit inteiro é o gatilho: passar o mouse abre o leque. */
.waitlist__kit:hover .kit__pack--back {
  transform: translateX(-56px) translateY(-10px) rotate(-14deg);
}
.waitlist__kit:hover .kit__pack--front {
  transform: translateX(40px) translateY(8px) rotate(9deg);
}
.kit__multiplier {
  position: absolute;
  right: 0;
  bottom: 4px;
  font: var(--type-score);
  font-size: var(--fs-h1);
  color: var(--cream-100);
  text-shadow: 0 2px 10px rgba(8, 12, 8, .8);
}
.kit__rows { display: grid; gap: var(--space-2); }
.kit__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-2);
  border-top: var(--border-hair) solid var(--line-hairline);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.kit__row strong {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  color: var(--gold-400);
}
.kit__note {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}
.waitlist__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.waitlist__form .fk-input { flex: 1 1 260px; min-width: 0; }
/* Fora da tela em vez de display:none — bot ignora campo que não "existe". */
.waitlist__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.waitlist__msg {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--felt-600);
  margin-top: var(--space-3);
  min-height: 18px;
}
.waitlist__msg[data-tom="erro"] { color: var(--card-red-700); }
.waitlist__form button[disabled] { opacity: .7; cursor: progress; }
.waitlist__fine {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--text-on-paper-muted);
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--surface-page-alt);
  border-top: var(--border-hair) solid var(--line-hairline);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: center;
}
.site-footer__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.site-footer__legal {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

/* --- Atalho de teclado -------------------------------------------------- *
 * Fica fora da tela até receber foco; quem navega por Tab pula o cabeçalho.  */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 60;
}
.skip-link:focus {
  left: var(--space-6);
  top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--action-primary);
  color: var(--text-on-gold);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}

/* O wordmark do cabeçalho é um link; só o sublinhado de <a> precisa sair. */
.site-header .fk-wordmark,
.site-header .fk-wordmark:hover { text-decoration: none; }

/* --- Dúvidas frequentes -------------------------------------------------- *
 * Sanfona exclusiva feita só com <details name="faq">, sem JavaScript. Em
 * navegador sem suporte ao atributo `name`, abre mais de uma ao mesmo tempo.  */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}
.faq__aside {
  position: sticky;
  top: calc(68px + var(--space-8));   /* altura do cabeçalho + folga */
}
.faq__lede {
  font: var(--type-body);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
}
.faq__aside-foot {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-hair) solid var(--line-hairline);
}
.faq__aside-note {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.faq__item {
  border-bottom: var(--border-hair) solid var(--line-hairline);
  /* Sangra 20px para fora da coluna: o realce da linha aberta sobra além do
     texto em vez de encostar nele. */
  padding-inline: var(--space-5);
  margin-inline: calc(var(--space-5) * -1);
  transition: background-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
/* O fio de cima vive no primeiro item, e não na lista, para nascer com a mesma
   sangria dos separadores — na lista ele ficaria 20px mais curto de cada lado. */
.faq__item:first-child { border-top: var(--border-hair) solid var(--line-hairline); }
.faq__item:hover { background-color: rgba(243, 237, 221, .03); }
.faq__item[open] {
  background-color: rgba(243, 237, 221, .05);
  box-shadow: inset var(--border-thick) 0 0 var(--action-primary);
}
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;   /* some o triângulo padrão (Safari usa o ::-webkit abaixo) */
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease-standard);
}
.faq__q:hover .faq__q-text,
.faq__item[open] .faq__q-text { color: var(--text-accent); }
.faq__q:focus-visible {
  outline: var(--border-thick) solid var(--focus-ring);
  outline-offset: 3px;
}
/* "+" de dois gradientes cruzados que gira 135° e vira "×" — sem imagem. */
.faq__q::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border: var(--border-hair) solid var(--line-hairline);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(var(--action-primary), var(--action-primary)) center / 12px 2px no-repeat,
    linear-gradient(var(--action-primary), var(--action-primary)) center / 2px 12px no-repeat;
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.faq__q:hover::after,
.faq__item[open] .faq__q::after { border-color: var(--line-gold); }
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__a {
  margin: 0;
  padding: 0 var(--space-16) var(--space-6) 0;
  max-width: 68ch;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
}
/* <details> não anima a própria altura de forma confiável; anima-se a resposta. */
.faq__item[open] .faq__a {
  animation: faq-abre var(--dur-slow) var(--ease-out-strong) both;
}
@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Texto longo abaixo da dobra: não gasta layout nem pintura até chegar perto
   da tela. Não vale para #faq, cujo `sticky` precisa da seção sem contenção. */
#devlog {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* --- Narrow viewports --------------------------------------------------- *
 * The design canvas is desktop-only; these rules keep the desktop layout
 * untouched and only stop the header and the hero card fan from overflowing.  */
@media (max-width: 900px) {
  .site-header { padding: 0 var(--space-5); gap: var(--space-4); }
  .site-nav { display: none; }
  .waitlist__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .waitlist__col { max-width: none; }
  /* Uma coluna: grudar algo da largura inteira só roubaria tela. */
  .faq-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .faq__aside { position: static; }
  .faq__aside-foot { display: none; }
}
@media (max-width: 660px) {
  .hero__inner,
  .split,
  .modes-grid,
  .pack-grid,
  .match-grid,
  .house-rule__grid { grid-template-columns: 1fr; }
  .hero__inner { padding-left: var(--space-5); padding-right: var(--space-5); }
  .section, .band__inner { padding-left: var(--space-5); padding-right: var(--space-5); }
  /* The fan keeps its overlap by sizing off the column instead of fixed px. */
  .card-stack { min-height: 380px; }
  .card-stack__side { width: 40%; }
  .card-stack__hero { width: 54%; }
  .president__col { width: 100%; max-width: 320px; }
  .waitlist { --fk-card-padding: var(--space-8) var(--space-5); }
  .waitlist__urgency { grid-template-columns: 1fr; gap: var(--space-5); }
  .waitlist__clock { justify-items: start; text-align: left; }
  .waitlist__clock-note { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track,
  .fk-badge__dot { animation: none !important; }
  .card-stack__hero,
  .pack__sleeve,
  .pack__sleeve-top,
  .pack__glow,
  .pack__fan,
  .pack__card-inner,
  .faq__q::after,
  .meter__fill { transition: none !important; }
  .faq__item[open] .faq__a { animation: none !important; }
}