.hero-panel__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  padding: 42px 24px 24px;
  pointer-events: none;
}

.hero-panel__neon-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 18px);
  width: fit-content;
  max-width: min(100%, 720px);
  text-align: left;
  pointer-events: auto;
}

.hero-panel__neon-wrap[data-align="center"] {
  width: min(100%, 920px);
  margin-inline: auto;
  text-align: center;
}

.hero-panel__neon {
  --hero-title-scale: 1;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  width: 100%;
  display: block;
  font-size: clamp(
    calc(2.8rem * var(--hero-title-scale)),
    calc(8.2vw * var(--hero-title-scale)),
    calc(6.2rem * var(--hero-title-scale))
  );
  line-height: 0.96;
  cursor: pointer;
  color: var(--hero-title-neon);
  text-shadow: var(--hero-title-neon-shadow);
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 0.08em;
}

.hero-panel__neon::selection {
  background: transparent;
}

.hero-panel__neon[data-font="serif"] {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  line-height: 0.98;
}

.hero-panel__neon[data-font="sans"] {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.96;
}

.hero-panel__neon[data-font="display"] {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 0.01em;
  line-height: 0.94;
}

.hero-panel__neon[data-font="condensed"] {
  font-family: "Arial Narrow", "Trebuchet MS", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.hero-panel__neon[data-font="mono"] {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.hero-panel__neon[data-font="elegant"] {
  font-family: "Didot", "Bodoni 72", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 0.98;
}

.hero-panel__neon[data-font="rounded"] {
  font-family: "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.hero-panel__neon[data-font="modern"] {
  font-family: "Avenir Next", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.hero-panel__neon[data-style="classic"] {
  color: var(--hero-title-classic);
  text-shadow: var(--hero-title-classic-shadow);
}

.hero-panel__neon[data-style="clean"] {
  color: var(--hero-title-clean);
  text-shadow: var(--hero-title-clean-shadow);
}

.hero-panel__neon[data-style="neon"] {
  color: var(--hero-title-neon);
  text-shadow: var(--hero-title-neon-shadow);
}

.hero-panel__neon:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 6px;
}

.hero-panel__neon[data-pointer-active="true"]:focus-visible {
  outline: none;
}

.hero-panel h1,
.section-heading h2,
.step-header h3,
.result-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.hero-panel h1 {
  max-width: 12ch;
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  line-height: 0.94;
  position: relative;
  z-index: 1;
  text-shadow: var(--hero-title-heading-shadow);
  -webkit-text-stroke: var(--hero-title-stroke-width) var(--hero-title-stroke-color);
}

.hero-panel__text,
.step-header p,
.field span,
.summary-list dd,
.live-summary__empty,
.result-card p,
.meta,
.stepper__item,
.notification-status {
  color: var(--muted);
}

.hero-panel__text {
  --hero-copy-scale: 1;
  max-width: 40ch;
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: clamp(
    calc(1.02rem * var(--hero-copy-scale)),
    calc(2.15vw * var(--hero-copy-scale)),
    calc(1.38rem * var(--hero-copy-scale))
  );
  color: var(--hero-copy);
  text-shadow: var(--hero-copy-shadow);
  -webkit-text-stroke: var(--hero-copy-stroke-width) var(--hero-copy-stroke-color);
}

.hero-panel__text[data-font="serif"] {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
  line-height: 1.18;
}

.hero-panel__text[data-font="sans"] {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.16;
}

.hero-panel__text[data-font="display"] {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  line-height: 1.08;
}

.hero-panel__text[data-font="condensed"] {
  font-family: "Arial Narrow", "Trebuchet MS", sans-serif;
  font-weight: 700;
  line-height: 1.08;
}

.hero-panel__text[data-font="mono"] {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 600;
  line-height: 1.12;
}

.hero-panel__text[data-font="elegant"] {
  font-family: "Didot", "Bodoni 72", Georgia, serif;
  letter-spacing: 0.01em;
  line-height: 1.18;
}

.hero-panel__text[data-font="rounded"] {
  font-family: "Avenir Next Rounded", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 600;
  line-height: 1.16;
}

.hero-panel__text[data-font="modern"] {
  font-family: "Avenir Next", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 600;
  line-height: 1.14;
}

.hero-panel__text[data-align="center"] {
  margin-inline: auto;
  text-align: center;
}

.hero-panel__text[data-style="neon"] {
  color: var(--hero-copy-neon);
  text-shadow: var(--hero-copy-neon-shadow);
}

.hero-panel__text[data-style="classic"] {
  color: var(--hero-copy-classic);
  text-shadow: var(--hero-copy-classic-shadow);
}

.hero-panel__text[data-style="clean"] {
  color: var(--hero-copy-clean);
  text-shadow: var(--hero-copy-clean-shadow);
}

body[data-copy-palette="default"] {
  --hero-copy-neon: #ead8c0;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
  --hero-copy-classic: #e2cfb4;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #d9c2a3;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="white"] {
  --hero-copy-neon: #ffffff;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
  --hero-copy-classic: #f7f3ea;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #ffffff;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="ice"] {
  --hero-copy-neon: #9edff0;
  --hero-copy-neon-shadow: 0 0 14px rgba(169, 240, 255, 0.18);
  --hero-copy-classic: #8fcfdf;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #7cbac9;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="gold"] {
  --hero-copy-neon: #e7bf60;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 212, 120, 0.2);
  --hero-copy-classic: #c89736;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #ab7c1f;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="amber"] {
  --hero-copy-neon: #e8c34b;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 187, 95, 0.2);
  --hero-copy-classic: #cda128;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #b08215;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="copper"] {
  --hero-copy-neon: #d08a57;
  --hero-copy-neon-shadow: 0 0 14px rgba(225, 160, 106, 0.18);
  --hero-copy-classic: #b87445;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #9d5d31;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="rose"] {
  --hero-copy-neon: #e796b3;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 181, 205, 0.2);
  --hero-copy-classic: #cd6e92;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #af4d71;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="ruby"] {
  --hero-copy-neon: #e05f75;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 142, 152, 0.2);
  --hero-copy-classic: #c74e62;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #a93a50;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="violet"] {
  --hero-copy-neon: #b289e5;
  --hero-copy-neon-shadow: 0 0 14px rgba(214, 176, 255, 0.2);
  --hero-copy-classic: #9569cb;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #7b52b0;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="indigo"] {
  --hero-copy-neon: #7d98de;
  --hero-copy-neon-shadow: 0 0 14px rgba(174, 189, 255, 0.18);
  --hero-copy-classic: #617ec9;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #4a66ae;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="emerald"] {
  --hero-copy-neon: #55b889;
  --hero-copy-neon-shadow: 0 0 14px rgba(143, 240, 195, 0.18);
  --hero-copy-classic: #3f996d;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #2f7e59;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="mint"] {
  --hero-copy-neon: #73cda3;
  --hero-copy-neon-shadow: 0 0 14px rgba(189, 249, 221, 0.18);
  --hero-copy-classic: #57ad85;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #438e6c;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="teal"] {
  --hero-copy-neon: #4db5af;
  --hero-copy-neon-shadow: 0 0 14px rgba(141, 232, 224, 0.18);
  --hero-copy-classic: #39968f;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #2c7b75;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="pearl"] {
  --hero-copy-neon: #f6ead9;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 248, 239, 0.18);
  --hero-copy-classic: #ead9c1;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #dbc6a8;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="sand"] {
  --hero-copy-neon: #cda469;
  --hero-copy-neon-shadow: 0 0 14px rgba(231, 201, 155, 0.18);
  --hero-copy-classic: #b68b54;
  --hero-copy-classic-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  --hero-copy-clean: #9a7240;
  --hero-copy-clean-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

body[data-copy-palette="brown"] {
  --hero-copy-neon: #8f654c;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 245, 237, 0.16);
  --hero-copy-classic: #774f39;
  --hero-copy-classic-shadow: 0 3px 12px rgba(255, 245, 237, 0.14);
  --hero-copy-clean: #5d3927;
  --hero-copy-clean-shadow: 0 3px 10px rgba(255, 245, 237, 0.12);
}

body[data-copy-palette="graphite"] {
  --hero-copy-neon: #5f5a59;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 255, 255, 0.14);
  --hero-copy-classic: #4a4544;
  --hero-copy-classic-shadow: 0 3px 12px rgba(255, 255, 255, 0.12);
  --hero-copy-clean: #332f2e;
  --hero-copy-clean-shadow: 0 3px 10px rgba(255, 255, 255, 0.1);
}

body[data-copy-palette="dark-blue"] {
  --hero-copy-neon: #4c689b;
  --hero-copy-neon-shadow: 0 0 14px rgba(242, 247, 255, 0.16);
  --hero-copy-classic: #3e5782;
  --hero-copy-classic-shadow: 0 3px 12px rgba(242, 247, 255, 0.14);
  --hero-copy-clean: #2d4163;
  --hero-copy-clean-shadow: 0 3px 10px rgba(242, 247, 255, 0.12);
}

body[data-copy-palette="coal"] {
  --hero-copy-neon: #404044;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 255, 255, 0.14);
  --hero-copy-classic: #2f2f33;
  --hero-copy-classic-shadow: 0 3px 12px rgba(255, 255, 255, 0.12);
  --hero-copy-clean: #1e1e22;
  --hero-copy-clean-shadow: 0 3px 10px rgba(255, 255, 255, 0.1);
}

body[data-copy-palette="plum"] {
  --hero-copy-neon: #76556f;
  --hero-copy-neon-shadow: 0 0 14px rgba(255, 245, 252, 0.14);
  --hero-copy-classic: #61405a;
  --hero-copy-classic-shadow: 0 3px 12px rgba(255, 245, 252, 0.12);
  --hero-copy-clean: #4b2d45;
  --hero-copy-clean-shadow: 0 3px 10px rgba(255, 245, 252, 0.1);
}

body[data-copy-palette="forest"] {
  --hero-copy-neon: #4d695c;
  --hero-copy-neon-shadow: 0 0 14px rgba(245, 255, 250, 0.14);
  --hero-copy-classic: #3b5548;
  --hero-copy-classic-shadow: 0 3px 12px rgba(245, 255, 250, 0.12);
  --hero-copy-clean: #294036;
  --hero-copy-clean-shadow: 0 3px 10px rgba(245, 255, 250, 0.1);
}

body[data-title-palette="gradient-sky"] .hero-panel__neon,
body[data-title-palette="gradient-pink"] .hero-panel__neon,
body[data-title-palette="gradient-ocean"] .hero-panel__neon,
body[data-title-palette="gradient-sunset"] .hero-panel__neon,
body[data-title-palette="gradient-peach"] .hero-panel__neon,
body[data-title-palette="gradient-mint"] .hero-panel__neon {
  background-size: 180% 180%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroGradientFlow 10s ease-in-out infinite;
}

body[data-copy-palette="gradient-sky"] .hero-panel__text,
body[data-copy-palette="gradient-pink"] .hero-panel__text,
body[data-copy-palette="gradient-ocean"] .hero-panel__text,
body[data-copy-palette="gradient-sunset"] .hero-panel__text,
body[data-copy-palette="gradient-peach"] .hero-panel__text,
body[data-copy-palette="gradient-mint"] .hero-panel__text {
  background-size: 180% 180%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroGradientFlow 11s ease-in-out infinite;
}

body[data-title-palette="gradient-sky"] .hero-panel__neon,
body[data-copy-palette="gradient-sky"] .hero-panel__text {
  background-image: linear-gradient(135deg, #1cc7f0 0%, #56d4ff 28%, #6f83ff 68%, #8d6dff 100%);
}

body[data-title-palette="gradient-pink"] .hero-panel__neon,
body[data-copy-palette="gradient-pink"] .hero-panel__text {
  background-image: linear-gradient(135deg, #9d5cfb 0%, #c056d8 30%, #ef3b95 68%, #ff6aa2 100%);
}

body[data-title-palette="gradient-ocean"] .hero-panel__neon,
body[data-copy-palette="gradient-ocean"] .hero-panel__text {
  background-image: linear-gradient(135deg, #1658b8 0%, #2a74d8 35%, #5868d6 72%, #7a67d4 100%);
}

body[data-title-palette="gradient-sunset"] .hero-panel__neon,
body[data-copy-palette="gradient-sunset"] .hero-panel__text {
  background-image: linear-gradient(135deg, #cc53c6 0%, #ef4b8b 34%, #ff6b4d 72%, #ff9b3f 100%);
}

body[data-title-palette="gradient-peach"] .hero-panel__neon,
body[data-copy-palette="gradient-peach"] .hero-panel__text {
  background-image: linear-gradient(135deg, #ff9340 0%, #ffb248 35%, #ffd05e 72%, #ffe18b 100%);
}

body[data-title-palette="gradient-mint"] .hero-panel__neon,
body[data-copy-palette="gradient-mint"] .hero-panel__text {
  background-image: linear-gradient(135deg, #41c8b4 0%, #59d9c3 32%, #6ccf8f 70%, #8ad867 100%);
}

@keyframes heroGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body[data-hero-tone="light"] {
  --hero-title-neon-shadow:
    0 2px 8px rgba(255, 255, 255, 0.58),
    0 10px 24px rgba(80, 55, 47, 0.08);
  --hero-title-classic-shadow:
    0 2px 8px rgba(255, 255, 255, 0.54),
    0 8px 18px rgba(76, 55, 47, 0.08);
  --hero-title-clean-shadow:
    0 2px 8px rgba(255, 255, 255, 0.56),
    0 8px 18px rgba(76, 55, 47, 0.08);
  --hero-scrim-top: rgba(255, 250, 248, 0.08);
  --hero-scrim-bottom: rgba(238, 226, 222, 0.18);
  --hero-copy-neon-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 4px 14px rgba(255, 255, 255, 0.18);
  --hero-copy-classic-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 4px 14px rgba(255, 255, 255, 0.18);
  --hero-copy-clean-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 4px 14px rgba(255, 255, 255, 0.18);
  --hero-title-stroke-color: rgba(33, 23, 19, 0.76);
  --hero-copy-stroke-color: rgba(33, 23, 19, 0.82);
  --hero-title-stroke-width: 1.15px;
  --hero-copy-stroke-width: 0.85px;
}

body[data-hero-tone="dark"][data-title-palette="graphite"] {
  --hero-title-neon: #d8d2d1;
  --hero-title-classic: #ece5e3;
  --hero-title-clean: #f7f1ef;
}

body[data-hero-tone="dark"][data-title-palette="brown"] {
  --hero-title-neon: #e4c9ba;
  --hero-title-classic: #f0ddd2;
  --hero-title-clean: #faeee7;
}

body[data-hero-tone="dark"][data-title-palette="dark-blue"] {
  --hero-title-neon: #d3def4;
  --hero-title-classic: #e2eafb;
  --hero-title-clean: #f2f6ff;
}

body[data-hero-tone="dark"][data-title-palette="coal"] {
  --hero-title-neon: #d3d5da;
  --hero-title-classic: #e7e9ee;
  --hero-title-clean: #f4f5f8;
}

body[data-hero-tone="dark"][data-title-palette="plum"] {
  --hero-title-neon: #e0c6da;
  --hero-title-classic: #ecdae8;
  --hero-title-clean: #f8eef6;
}

body[data-hero-tone="dark"][data-title-palette="forest"] {
  --hero-title-neon: #c7ddd2;
  --hero-title-classic: #dcebe3;
  --hero-title-clean: #eef8f2;
}

body[data-hero-tone="dark"][data-copy-palette="graphite"] {
  --hero-copy-neon: #ccc6c5;
  --hero-copy-classic: #ded7d6;
  --hero-copy-clean: #f0eaea;
}

body[data-hero-tone="dark"][data-copy-palette="brown"] {
  --hero-copy-neon: #dcc2b4;
  --hero-copy-classic: #ead6cb;
  --hero-copy-clean: #f6e9e3;
}

body[data-hero-tone="dark"][data-copy-palette="dark-blue"] {
  --hero-copy-neon: #c8d5ed;
  --hero-copy-classic: #d9e3f4;
  --hero-copy-clean: #ebf1fb;
}

body[data-hero-tone="dark"][data-copy-palette="coal"] {
  --hero-copy-neon: #cbced4;
  --hero-copy-classic: #dde0e6;
  --hero-copy-clean: #eef1f5;
}

body[data-hero-tone="dark"][data-copy-palette="plum"] {
  --hero-copy-neon: #d7bdd0;
  --hero-copy-classic: #e5d3e0;
  --hero-copy-clean: #f3e8f0;
}

body[data-hero-tone="dark"][data-copy-palette="forest"] {
  --hero-copy-neon: #bed5c8;
  --hero-copy-classic: #d0e2d8;
  --hero-copy-clean: #e6f1ea;
}

.hero-panel__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.hero-panel__badges:empty {
  display: none;
}

.hero-panel__badges span {
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}