.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);
}