.release1-hero,
.release1-how {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.landing-hero[hidden],
.landing-steps[hidden],
.lp-feature-block[hidden],
.release1-hero[hidden],
.release1-how[hidden] {
  display: none !important;
}

/* Single column by design: the deck-entry form is the first thing a visitor
   should meet, so it runs the full width of the section and the Ur-Dragon
   sample sits underneath it rather than competing for the same fold. */
.release1-hero {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(20px, 3.5vw, 40px) 16px 20px;
}

.release1-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* Sit flush with the section's inline padding so the hero content lines up
     with the left edge of the "How it works"/"Clear about what the result
     means" cards below (they start at the same section edge), keeping every
     section the same distance from the screen edge. */
}

.release1-hero-copy h1 {
  max-width: 22ch;
  margin: 8px 0 12px;
  color: var(--text-1);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.release1-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.release1-hero-actions .landing-primary,
.release1-hero-actions .landing-secondary {
  min-height: 48px;
}

/* One smart field, one action. The player pastes either a public deck link or
   a raw decklist here and the form routes it -- so the card carries a single
   label, a single input and a single button, nothing else competing with it. */
.release1-hero-form {
  --hero-field-transition: 170ms ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Generous room above and below so the field reads as the page's one job,
     with nothing crowding it. */
  margin-top: clamp(30px, 4.4vw, 56px);
  margin-bottom: clamp(24px, 3.4vw, 44px);
  padding: clamp(24px, 2.6vw, 32px);
  /* Full width, matching the sample panel and the sections below it. */
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.008)),
    rgba(0,0,0,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 44px rgba(0,0,0,0.22);
  transition:
    border-color var(--hero-field-transition),
    box-shadow var(--hero-field-transition);
}

.release1-hero-form:focus-within {
  border-color: rgba(201, 168, 76, 0.32);
}

.release1-hero-form-label {
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.release1-hero-textarea {
  width: 100%;
  min-width: 0;
  /* Grown to fit its content by assets/homepage-release1.js, between these two
     bounds. Kept in CSS so the resting size is right before scripting runs. */
  min-height: 140px;
  max-height: 340px;
  /* Hidden until the content actually overflows the max height -- otherwise an
     empty field shows a permanent scrollbar gutter. The script flips this to
     auto only once there is something to scroll. */
  overflow-y: hidden;
  resize: none;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.30);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition:
    border-color var(--hero-field-transition),
    background var(--hero-field-transition),
    box-shadow var(--hero-field-transition);
}

.release1-hero-textarea::placeholder {
  /* Secondary to the label, but lifted well clear of the muted body grey so the
     instruction is legible against the dark field. */
  color: #9d9ab2;
  font-weight: 500;
}

.release1-hero-textarea:hover {
  border-color: rgba(255,255,255,0.20);
}

.release1-hero-textarea:focus,
.release1-hero-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(0,0,0,0.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 3px rgba(201, 168, 76, 0.22);
}

.release1-hero-mox-error {
  margin: 0;
  color: #f0a3a3;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.45;
}

.release1-hero-mox-error[hidden] {
  display: none;
}

.release1-hero-form .release1-hero-actions {
  margin-top: 2px;
  justify-content: flex-end;
}

.release1-hero-form .landing-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  width: auto;
  min-height: 50px;
  padding: 0 28px;
  font-size: 1rem;
  transition:
    filter var(--hero-field-transition),
    transform var(--hero-field-transition),
    opacity var(--hero-field-transition);
}

.release1-hero-form .landing-primary:not(:disabled) {
  animation: release1-cta-pulse 2.8s ease-in-out infinite;
}

.release1-hero-form .landing-primary:not(:disabled)::before {
  content: "";
  position: absolute;
  inset: -45% auto -45% -42%;
  width: 32%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.56), transparent);
  transform: skewX(-18deg);
  animation: release1-cta-sheen 3.4s ease-in-out infinite;
}

@keyframes release1-cta-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(201,168,76,0.12); }
  50% { box-shadow: 0 14px 34px rgba(201,168,76,0.34), 0 0 0 4px rgba(201,168,76,0.08); }
}

@keyframes release1-cta-sheen {
  0%, 64% { left: -42%; opacity: 0; }
  70% { opacity: 0.9; }
  92%, 100% { left: 118%; opacity: 0; }
}

.release1-hero-form .landing-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
  transform: none;
}

.release1-sample {
  /* The audit's own status palette (commander-audit.css is not loaded here, so
     the three tones are restated locally and must stay in step with it). */
  --r1-ok: #6fcfa0;
  --r1-warn: #e8b04a;
  --r1-bad: #e87a70;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(201, 168, 76, 0.08), transparent 42%),
    linear-gradient(155deg, rgba(255,255,255,0.025), rgba(255,255,255,0.006)),
    var(--surface-2);
  box-shadow: 0 14px 36px rgba(0,0,0,0.26);
  scroll-margin-top: 84px;
}

.release1-sample-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.release1-sample-identity {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.release1-sample-card-frame {
  width: 112px;
  border-radius: 9px;
  background: var(--surface-3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.release1-sample-card {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 488 / 680;
  object-fit: cover;
  border-radius: inherit;
}

.release1-sample-meta {
  min-width: 0;
}

.release1-sample-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.release1-sample-heading .release1-sample-label {
  flex: 1 1 auto;
  min-width: 0;
}

.release1-sample-label,
.release1-kicker {
  display: block;
  color: var(--accent-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.release1-sample-header h2 {
  margin: 6px 0 0;
  color: var(--text-1);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.release1-sample-sub {
  margin: 3px 0 0;
  color: var(--text-3);
  font-size: 0.76rem;
}

/* The audit's at-a-glance metric strip, trimmed to four values so the header
   still reads as a header rather than a second panel. */
.release1-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.release1-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  font-size: 0.76rem;
  white-space: nowrap;
}

.release1-chip strong {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.release1-chip.is-ok {
  border-color: rgba(111, 207, 160, 0.4);
  background: rgba(111, 207, 160, 0.08);
}

.release1-chip.is-ok strong { color: var(--r1-ok); }

.release1-chip.is-warn {
  border-color: rgba(232, 176, 74, 0.4);
  background: rgba(232, 176, 74, 0.08);
}

.release1-chip.is-warn strong { color: var(--r1-warn); }

.release1-confidence {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(71, 199, 138, 0.3);
  border-radius: 999px;
  background: rgba(71, 199, 138, 0.1);
  color: #8ee6b8;
  font-size: 0.68rem;
  font-weight: 750;
}

.release1-state-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.release1-state-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: rgba(255,255,255,0.015);
  color: var(--text-3);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.release1-state-tabs button:last-child {
  border-right: 0;
}

.release1-state-tabs button[aria-selected="true"] {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.release1-state-tabs button:focus-visible,
.release1-next:focus-visible,
.release1-open-sample:focus-visible {
  outline: 3px solid rgba(239, 213, 139, 0.55);
  outline-offset: -3px;
}

.release1-state-panels {
  display: grid;
}

.release1-state-panels > section {
  display: grid;
  grid-area: 1 / 1;
  align-content: start;
  gap: 12px;
  padding: 22px 20px;
}

.release1-state-panels > section[aria-hidden="true"] {
  display: none;
  visibility: hidden;
  pointer-events: none;
}

.release1-state-panels h3 {
  margin: 0;
  color: var(--text-1);
  font-size: clamp(1.25rem, 2.2vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.release1-state-panels p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.55;
}

.release1-state-panels p strong {
  color: var(--text-1);
}

.release1-next,
.release1-open-sample {
  align-self: end;
  justify-self: start;
  min-height: 44px;
  margin-top: auto;
  padding: 0 17px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.13);
  color: var(--accent-soft);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.release1-open-sample {
  display: inline-flex;
  align-items: center;
}

/* Each stage carries exactly one audit visual, boxed like a panel on the real
   report so the sample reads as a trimmed audit rather than a mock-up. */
.release1-evidence {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.022);
}

.release1-evidence-title {
  display: block;
  margin-bottom: 12px;
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Reuses .deck-donut* from content.css so the chart is the audit's, only
   scaled down to fit inside the hero panel. */
.release1-evidence .deck-donut-wrap { gap: 18px; }

.release1-evidence .deck-donut {
  width: 124px;
  height: 124px;
  /* No entrance spin here. On the audit page the reveal happens once; in the
     sample it replays every time this stage is reselected, and any frame of its
     `rotate(-12deg)` throws the centred 100/CARDS label visibly off-axis --
     "100" swings left while "CARDS" swings right. */
  animation: none;
}

.release1-evidence .deck-donut-hole {
  width: 78px;
  height: 78px;
}

.release1-evidence .deck-donut-hole strong { font-size: 1.15rem; }
.release1-evidence .deck-donut-hole span { font-size: 0.6rem; }
.release1-evidence .deck-donut-legend { gap: 6px; font-size: 0.82rem; }
.release1-evidence .deck-donut-legend li { font-size: 0.82rem; }

/* Health ring + ranked fixes, side by side. */
.release1-health-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.release1-ring-col {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.release1-ring { display: block; }

.release1-ring-label {
  color: var(--text-3);
  font-size: 0.66rem;
  line-height: 1.3;
  text-align: center;
}

.release1-fix-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.release1-fix-list li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 8px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}

.release1-fix-rank {
  color: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 800;
}

.release1-fix-name {
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 700;
}

.release1-fix-note {
  color: var(--text-3);
  font-size: 0.74rem;
  text-align: right;
}

/* Ratio bars, matching .cda-ratio-bar-* on the audit page. */
.release1-bar-chart {
  display: grid;
  gap: 9px;
}

.release1-bar-row {
  display: grid;
  grid-template-columns: 84px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.release1-bar-label {
  overflow: hidden;
  color: var(--text-2);
  font-size: 0.74rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release1-bar-count {
  color: var(--text-1);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.release1-bar-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

.release1-bar-zone {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}

.release1-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.release1-bar-fill.is-ok { background: var(--r1-ok); }
.release1-bar-fill.is-warn { background: var(--r1-warn); }
.release1-bar-fill.is-bad { background: var(--r1-bad); }

.release1-bar-status {
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

.release1-bar-status.is-ok { color: var(--r1-ok); }
.release1-bar-status.is-warn { color: var(--r1-warn); }
.release1-bar-status.is-bad { color: var(--r1-bad); }

/* Scoped past `.release1-state-panels p`, which zeroes margins and lifts the
   colour to the body grey. */
.release1-state-panels .release1-bar-legend {
  margin: 10px 0 0;
  color: var(--text-3);
  font-size: 0.66rem;
}

.release1-how {
  padding: 36px 16px 0;
}

.release1-how-main {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.018);
}

.release1-how h2 {
  margin: 8px 0 0;
  max-width: 22ch;
  color: var(--text-1);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.release1-how ol {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.release1-how ol li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}

.release1-how ol strong {
  display: block;
  color: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.release1-how ol span {
  color: var(--text-2);
  line-height: 1.5;
}

@media (min-width: 760px) {
  .release1-hero {
    padding-inline: 24px;
  }

  .release1-how {
    padding-inline: 24px;
  }
}

@media (min-width: 1200px) {
  .release1-how ol {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .release1-sample-header {
    padding-inline: 16px;
  }

  .release1-sample-identity {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  .release1-sample-card-frame {
    width: 86px;
    border-radius: 7px;
  }

  .release1-sample-heading {
    display: grid;
    justify-items: start;
    gap: 6px;
  }

  .release1-confidence {
    padding: 5px 7px;
    font-size: 0.62rem;
  }

  .release1-hero-actions {
    display: grid;
  }

  .release1-hero-actions .landing-primary,
  .release1-hero-actions .landing-secondary {
    width: 100%;
  }

  /* Full-bleed action on a narrow screen; right-aligned auto width above it.
     The desktop rule right-aligns via justify-content, which content-sizes the
     grid track -- so the track has to be widened back out here too, or the
     button's width:100% resolves against its own text. */
  .release1-hero-form .release1-hero-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .release1-hero-form .landing-primary {
    width: 100%;
  }

  .release1-state-tabs button {
    font-size: 0.6rem;
  }

  .release1-evidence .deck-donut-wrap {
    justify-content: center;
    gap: 14px;
  }

  .release1-evidence .deck-donut {
    width: 108px;
    height: 108px;
  }

  .release1-evidence .deck-donut-hole {
    width: 68px;
    height: 68px;
  }

  /* Ring above the fixes rather than beside them -- 96px + a fix row does not
     fit side by side at this width. */
  .release1-health-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 12px;
  }

  .release1-fix-list {
    width: 100%;
  }

  .release1-fix-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .release1-fix-note {
    grid-column: 2;
    text-align: left;
  }

  /* At this width a single row leaves the track around 60px, too short to read
     a fill against its target zone -- so the track drops to its own line. */
  .release1-bar-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 5px 8px;
  }

  .release1-bar-label {
    grid-area: 1 / 1;
    text-align: left;
  }

  .release1-bar-count {
    grid-area: 1 / 2;
    justify-self: start;
  }

  .release1-bar-status {
    grid-area: 1 / 3;
    font-size: 0.62rem;
  }

  .release1-bar-track {
    grid-area: 2 / 1 / 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .release1-sample *,
  .release1-hero * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  .release1-hero-form .landing-primary::before {
    display: none;
  }
}

/* Returning-visitor welcome strip (revealed by assets/homepage-welcome.js) */
/* `.home-welcome`'s own `display: flex` outranks the browser's default
   `[hidden] { display: none }`, so without this guard setting `hidden` on the
   banner never actually hides it. */
.home-welcome[hidden] {
  display: none;
}
.home-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 10px 16px;
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  background: rgba(255, 255, 255, 0.04);
}
.home-welcome-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.home-welcome-greeting {
  font-weight: 640;
  color: var(--accent-soft, #efd58b);
}
.home-welcome-link {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--accent-soft, #efd58b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.home-welcome-link:hover {
  color: var(--accent, #c9a84c);
}

/* ── Shared homepage horizontal rhythm ───────────────────────────────────────
   Every marketing section on the homepage (.release1-hero, .release1-how,
   .lp-pain-section, .lp-tools-section, .lp-goals-section, .lp-final-cta,
   .lp-account-cta) insets its content 16px -- 24px from 760px up -- inside the
   page shell's own gutter. The site chrome and the signed-in dashboard blocks
   sat flush with the shell edge instead, so their left/right negative space was
   ~24px wider than the sections between them and nothing lined up. Give those
   blocks the same inset so every section sits the same distance from the screen
   edge. Scoped to .page-shell.is-home so the shared .site-header / .site-footer
   are untouched on every other page. */
.page-shell.is-home > .site-header,
.page-shell.is-home > .site-footer,
.page-shell.is-home > .hrx,
.page-shell.is-home > .hrx-skeleton {
  padding-inline: 16px;
}

/* The welcome banner is a bordered card, so match its outer edge (not just its
   content) to the .lp-final-cta / .lp-account-cta card borders below. */
.page-shell.is-home > .home-welcome {
  width: calc(100% - 32px);
  max-width: 1248px;
  margin-inline: auto;
}

@media (min-width: 760px) {
  .page-shell.is-home > .site-header,
  .page-shell.is-home > .site-footer,
  .page-shell.is-home > .hrx,
  .page-shell.is-home > .hrx-skeleton {
    padding-inline: 24px;
  }
  .page-shell.is-home > .home-welcome {
    width: calc(100% - 48px);
    max-width: 1232px;
  }
}

/* ── Calmer rhythm for the shortened homepage ────────────────────────────────
   With the tool directory, "how it works", and account sections gone, only
   three blocks remain: hero + Ur-Dragon sample, the three benefits, and the
   final CTA. Give the two gaps between them a larger, section-scale rhythm so
   the page still breathes instead of stacking the survivors tightly. Scoped to
   the homepage and to this file (loaded after content.css) so it overrides the
   old 36px/44px catalog spacing without touching any other page. */
.page-shell.is-home .lp-pain-section {
  margin-top: clamp(44px, 7vw, 84px);
}

.page-shell.is-home .lp-final-cta {
  margin-top: clamp(40px, 6vw, 72px);
  margin-bottom: clamp(44px, 6vw, 80px);
}

/* Real usage proof. The server omits event-backed statistics until they clear
   their reliability threshold, so this block is hidden by default and never
   contains a placeholder or a made-up fallback number. */
.lp-usage-proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: calc(100% - 32px);
  max-width: 1232px;
  margin: clamp(36px, 5vw, 60px) auto 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(201, 168, 76, 0.12), transparent 42%),
    var(--surface-panel-soft, rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.lp-usage-proof[hidden] {
  display: none !important;
}

.lp-usage-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lp-usage-proof-stat strong {
  color: var(--accent-soft, #efd58b);
  font-size: clamp(2.25rem, 6vw, 3.8rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.lp-usage-proof-stat strong.is-counting {
  animation: lp-usage-proof-color-cycle 1.15s ease-in-out infinite;
}

@keyframes lp-usage-proof-color-cycle {
  0%,
  100% {
    color: rgba(126, 240, 200, 0.95);
    text-shadow: 0 0 18px rgba(126, 240, 200, 0.2);
  }

  50% {
    color: rgba(91, 190, 255, 0.98);
    text-shadow: 0 0 20px rgba(91, 190, 255, 0.24);
  }

  75% {
    color: rgba(239, 213, 139, 0.98);
    text-shadow: 0 0 18px rgba(239, 213, 139, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-usage-proof-stat strong.is-counting {
    animation: none;
    color: var(--accent-soft, #efd58b);
    text-shadow: none;
  }
}

.lp-usage-proof-stat span {
  color: var(--text-1);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lp-usage-proof-cta {
  width: 100%;
  min-width: 170px;
  flex: 0 0 auto;
}

.lp-usage-proof:not([hidden]) + .lp-social-section {
  margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 640px) {
  .lp-usage-proof {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .lp-usage-proof-stat {
    align-items: flex-start;
    text-align: left;
  }

  .lp-usage-proof-cta {
    width: auto;
  }
}

@media (min-width: 760px) {
  .lp-usage-proof {
    width: calc(100% - 48px);
  }
}

/* ── Social proof (curated player quotes) ────────────────────────────────────
   Sits directly under the hero + Ur-Dragon sample. Shares .lp-pain-section's
   1280 container + inset so this block's edges line up with the section below
   it, but the cards themselves are deliberately quieter and more compact: one
   flat surface, a 1px low-contrast border, a larger quote that fills the card,
   and the attribution pinned toward the bottom so three short quotes read as
   intentional rather than padded. */
.lp-social-section {
  width: min(100%, 1280px);
  margin-top: clamp(44px, 7vw, 84px);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 760px) {
  .lp-social-section {
    padding-inline: 24px;
  }
}

.lp-social-grid {
  display: grid;
  grid-template-columns: 1fr; /* < 640px: single column */
  gap: 14px; /* ~0.6 : 1 against the 20px card padding below */
  margin-top: clamp(28px, 4vw, 40px);
}

/* 640–959px: two columns. The odd third quote spans the full width so the row
   stays balanced instead of leaving a half-width orphan, and drops its floor
   height so the wide card hugs its content. */
@media (min-width: 640px) {
  .lp-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .lp-social-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* ≥ 960px: three equal columns. */
@media (min-width: 960px) {
  .lp-social-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .lp-social-card:nth-child(3) {
    grid-column: auto;
  }
}

.lp-social-card {
  display: flex;
  flex-direction: column;
  /* <figure> carries a UA default margin (1em 40px) that the site reset
     doesn't zero; without this the cards shrink ~80px and overflow. */
  margin: 0;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  background: var(--surface-panel-soft, rgba(255, 255, 255, 0.03));
}

@media (min-width: 640px) {
  .lp-social-card {
    padding: 28px 30px;
    border-radius: 22px;
  }
}

/* Hover only where a real pointer can reach it. */
@media (hover: hover) and (pointer: fine) {
  .lp-social-card {
    transition:
      border-color 180ms ease-out,
      transform 180ms ease-out;
  }
  .lp-social-card:hover {
    border-color: var(--border-strong, rgba(255, 255, 255, 0.10));
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-social-card {
    transition: none;
  }
  .lp-social-card:hover {
    transform: none;
  }
}

.lp-social-quote {
  /* Body-size text (base body is 0.95rem) so the quotes read the same as the
     rest of the page; weight and colour carry the emphasis, not scale. The
     margin-bottom is the minimum gap below the quote; on desktop the
     attribution's auto top margin adds to it to pin the byline low. */
  margin: 0 0 18px;
  color: var(--text-1);
  font-size: 0.95rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Matching gold quotation marks that open and close the quote. */
.lp-social-quote::before {
  content: "\201C";
  margin-right: 1px;
  color: var(--accent, #c9a84c);
  font-weight: 600;
}

.lp-social-quote::after {
  content: "\201D";
  margin-left: 1px;
  color: var(--accent, #c9a84c);
  font-weight: 600;
}

/* Author over source, stacked. Left flush at mobile; pinned to the card's
   lower edge from 640px up so the bylines share one scan line across cards. */
.lp-social-attrib {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  font-size: 1rem;
}

@media (min-width: 640px) {
  .lp-social-attrib {
    margin-top: auto;
  }
}

.lp-social-handle {
  font-weight: 640;
  font-size: 0.95rem;
  color: var(--text-1);
}

.lp-social-source {
  font-size: 0.9rem;
  color: var(--text-2);
}