/* Heat check. Warm charcoal page; mint stays on the site header, footer, and booking button. */
body.concept-a {
  background:
    radial-gradient(880px 460px at 100% -8%, rgb(255 90 40 / .28), transparent 56%),
    radial-gradient(640px 380px at -12% 18%, rgb(255 176 32 / .14), transparent 52%),
    #140e0b;
}
body.concept-a header { background: #0b0d12; }
body.concept-a footer { background: #0b0d12; }
body.concept-a main { color: #fff7ef; }
#mc-error[hidden], #mc-report[hidden] { display: none !important; }
#mc-report { scroll-margin-top: 88px; }

.hx-hero { padding: 28px 0 8px; }
.hx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
}
.hx-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #ffd7a8;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hx-kicker svg { display: block; flex: none; }
.hx-hero h1 span { color: #ffc14d; }
.hx-hero .lead { color: #f0d3bf; max-width: 42ch; }
.hx-deco { width: 64px; }
.hx-deco-tube {
  width: 26px;
  height: 108px;
  margin: 0 auto;
  padding: 4px;
  display: flex;
  align-items: flex-end;
  border: 2px solid #c9844a;
  border-radius: 16px;
  background: #1a100c;
  box-shadow: inset 0 0 12px #000a, 0 0 18px rgb(255 106 42 / .25);
}
.hx-deco-tube span {
  display: block;
  width: 100%;
  height: 36%;
  border-radius: 10px;
  background: linear-gradient(#ffe08a, #ff4d2e);
}
.hx-deco-bulb {
  width: 44px;
  height: 44px;
  margin: -8px auto 0;
  border-radius: 50%;
  background: #ff9a2e;
  box-shadow: 0 0 22px rgb(255 122 46 / .7);
}

.hx-work { padding: 12px 0 36px; }
.hx-form, .hx-rules, .hx-score, .hx-issue, .hx-cta {
  background: #261911;
  border: 1px solid #6a4330;
  border-radius: 18px;
}
.hx-form { display: grid; gap: 14px; padding: 16px; }
.hx-field { min-width: 0; display: grid; gap: 6px; }
.hx-form label { font-weight: 800; }
.hx-split { display: grid; gap: 14px; }
.hx-form textarea,
.hx-form input,
body.concept-a #mc-text {
  width: 100%;
  max-width: 100%;
  color: #fff7ef;
  background: #1a100c;
  border: 2px solid #c9844a;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.5;
}
body.concept-a #mc-text { font-family: ui-monospace, Menlo, Consolas, monospace; }
.hx-form textarea { min-height: 200px; }
.hx-form ::placeholder { color: #f0d3bf; opacity: 1; }
.hx-hint { margin: 0; color: #f0d3bf; font-size: .95rem; max-width: 68ch; }
.hx-hint code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .92em;
  color: #fff7ef;
}
.hx-actions { display: grid; gap: 10px; }
.hx-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #ffb0a6;
  background: #3a1418;
  color: #ffd0c8;
}
body.concept-a main :focus-visible {
  outline: 3px solid #ffb020;
  outline-offset: 3px;
}
body.concept-a .hx-form button.btn {
  width: 100%;
  background: transparent;
  color: #ffe7c2;
  border: 2px solid #ffb020;
  box-shadow: none;
}
body.concept-a .hx-form button.btn:hover,
body.concept-a .hx-form button.btn:focus-visible {
  background: #3a2414;
  color: #fff7ef;
}
body.concept-a .hx-form button.btn.p,
body.concept-a .hx-form button.btn.p:visited,
body.concept-a .hx-form button.btn.p:hover,
body.concept-a .hx-form button.btn.p:focus-visible {
  background: #ffb020;
  color: #1a0c08;
  border-color: #ffb020;
  box-shadow: 0 0 22px rgb(255 176 32 / .35);
}
body.concept-a .hx-form button.btn.p:hover,
body.concept-a .hx-form button.btn.p:focus-visible { background: #ffc14d; }

.hx-report { display: grid; gap: 16px; margin-top: 22px; }
.hx-score {
  display: grid;
  gap: 16px;
  padding: 16px;
  justify-items: center;
}
.hx-score-copy { min-width: 0; width: 100%; }
.hx-score h2, .hx-list-title, .hx-cta h2, .hx-rules h2 { margin-top: 0; }
.hx-sum, .hx-scoring, .hx-cta p, .hx-rules p { margin: 0; color: #f0d3bf; }
.hx-scoring { margin-top: 8px; font-size: .95rem; }
.hx-thermo { width: 96px; --heat: 0; }
.hx-tube {
  width: 36px;
  height: 168px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 2px solid #c9844a;
  border-radius: 18px;
  background: #140e0b;
  box-shadow: inset 0 0 14px #000c, 0 0 22px rgb(255 106 42 / .28);
}
.hx-mercury {
  height: calc(var(--heat) * 1%);
  border-radius: 12px;
  background: linear-gradient(to top, #ff3b1f, #ffb020 58%, #ffe08a);
  box-shadow: 0 0 14px rgb(255 90 40 / .55);
  animation: hx-rise 1.05s cubic-bezier(.16, .84, .32, 1) both;
}
@keyframes hx-rise {
  from { height: 0; }
  to { height: calc(var(--heat) * 1%); }
}
.hx-bulb {
  width: 84px;
  height: 84px;
  margin: -12px auto 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ff9a2e;
  color: #1a0c08;
  box-shadow: 0 0 28px rgb(255 122 46 / .65);
}
.hx-bulb b { font-size: 1.7rem; line-height: 1; }
.hx-bulb span { font-size: .75rem; font-weight: 800; }
.hx-list-title { font-size: 1.35rem; }
.hx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hx-issue {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  --rail: #8d7568;
  animation: hx-in .4s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.hx-issue:nth-child(1) { --i: 0; }
.hx-issue:nth-child(2) { --i: 1; }
.hx-issue:nth-child(3) { --i: 2; }
.hx-issue:nth-child(4) { --i: 3; }
.hx-issue:nth-child(5) { --i: 4; }
.hx-issue:nth-child(6) { --i: 5; }
.hx-issue:nth-child(7) { --i: 6; }
.hx-issue:nth-child(8) { --i: 7; }
.hx-issue:nth-child(9) { --i: 8; }
.hx-issue:nth-child(10) { --i: 9; }
@keyframes hx-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.hx-fail { --rail: #ff4d2e; }
.hx-warn { --rail: #ffb020; }
.hx-pass { --rail: #3cf2c4; }
.hx-rail { border-radius: 999px; background: var(--rail); }
.hx-issue-body { min-width: 0; display: grid; gap: 6px; }
.hx-issue-body h3, .hx-issue-body p { margin: 0; }
.hx-issue-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hx-rank {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1a100c;
  color: #ffd7a8;
  font-weight: 800;
  font-size: .85rem;
}
.hx-area { color: #f0d3bf; font-size: .85rem; flex: 1 1 8rem; }
.hx-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
}
.hx-fail .hx-badge { background: #4a1814; color: #ffd2c8; }
.hx-warn .hx-badge { background: #3d2c10; color: #ffe3b0; }
.hx-pass .hx-badge { background: #0e3329; color: #d8ffef; }
.hx-not_checked .hx-badge { background: #332820; color: #f3e4d6; }
.hx-why, .hx-fix { color: #f0d3bf; }
.hx-fix a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #3cf2c4;
  font-weight: 800;
}
.hx-cta, .hx-rules { padding: 16px; display: grid; gap: 10px; }
.hx-cta { border-color: #3cf2c4; }
.hx-cta .hx-actions { margin-top: 4px; }
.hx-cta .btn { width: 100%; }

@media (min-width: 1024px) {
  .hx-hero { padding: 56px 0 12px; }
  .hx-hero-grid { grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px; }
  .hx-hero h1 { font-size: clamp(2.6rem, 4vw, 3.7rem); }
  body.concept-a .hx-form button.btn,
  body.concept-a .hx-cta .btn { width: auto; }
  .hx-deco { width: 88px; }
  .hx-deco-tube { width: 32px; height: 150px; }
  .hx-deco-bulb { width: 56px; height: 56px; }
  .hx-form, .hx-score, .hx-cta, .hx-rules { padding: 22px; }
  .hx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .hx-actions { display: flex; flex-wrap: wrap; }
  .hx-form button.btn, .hx-cta .btn { width: auto; }
  .hx-score { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 28px; padding: 28px; }
  .hx-thermo { margin-left: 8px; }
  .hx-list-title { font-size: 1.7rem; }
  .hx-cta .hx-actions { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-mercury, .hx-issue { animation: none; }
  body.concept-a main *, body.concept-a main *::before, body.concept-a main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hx-mercury { height: calc(var(--heat) * 1%); }
}

@media (forced-colors: active) {
  .hx-form, .hx-score, .hx-issue, .hx-cta, .hx-rules, .hx-badge, .hx-bulb, .hx-tube {
    border: 1px solid CanvasText;
  }
}