/* ThreadFixx theme: dark charcoal + gold (swap these to retheme;
   the mockup's red was --accent #e0262b, hot #ff4a4f, glow rgba(224,38,43,.4), deep #9c1216, on-accent #fff). */
:root {
  --accent: #e9a23b;
  --accent-hot: #ffc163;
  --accent-glow: rgba(233, 162, 59, 0.4);
  --accent-deep: #9a6214;
  --on-accent: #1d1406;
}

body {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.15) 100%),
    url(bg-portrait.webp);
}
@media (orientation: landscape) {
  body {
    background-image:
      radial-gradient(ellipse 26% 42% at 19% 60%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.65) 100%),
      url(bg-landscape.webp);
  }
}

/* ---- hero ---- */
.hero { display: flex; flex-direction: column; align-items: center; }
.logo { width: 14rem; height: auto; filter: drop-shadow(0 0.3rem 0.8rem rgba(0, 0, 0, 0.8)); }

.services, .tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0.35rem 0 0;
  font: 700 0.95rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d8d8d8;
}
/* breathing room under the logo; more when the screen has height to spare */
.services { margin-top: calc(0.9rem + min(var(--slack) * 0.15, 2rem)); }
.services i, .tagline i { width: 0.36rem; height: 0.36rem; border-radius: 50%; background: var(--accent); }

.brush {
  position: relative;
  margin: 0.9rem 0 0;
  padding: 0.35rem 2.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--on-accent);
  isolation: isolate;
}
/* ragged paint stroke behind the headline */
.brush::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 16%, var(--accent-hot) 45%, var(--accent) 70%, var(--accent-deep) 100%);
  transform: skewX(-8deg);
  -webkit-clip-path: polygon(2% 12%, 7% 4%, 18% 8%, 30% 0, 46% 6%, 60% 1%, 74% 7%, 88% 2%, 97% 9%, 100% 30%, 97% 52%, 100% 74%, 96% 92%, 84% 97%, 70% 93%, 55% 100%, 40% 95%, 24% 100%, 10% 94%, 3% 98%, 0 78%, 3% 55%, 0 32%);
  clip-path: polygon(2% 12%, 7% 4%, 18% 8%, 30% 0, 46% 6%, 60% 1%, 74% 7%, 88% 2%, 97% 9%, 100% 30%, 97% 52%, 100% 74%, 96% 92%, 84% 97%, 70% 93%, 55% 100%, 40% 95%, 24% 100%, 10% 94%, 3% 98%, 0 78%, 3% 55%, 0 32%);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.6);
}
.brush .win, .brush .toward, .script, .services, .tagline { white-space: nowrap; }
.brush .win {
  font: 400 4.3rem/1.05 "Kaushan Script", "Brush Script MT", cursive;
  text-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.25);
}
.brush .toward {
  font: 800 1.7rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.script {
  margin: 0.45rem 0 0;
  font: 400 2.3rem/1.1 "Kaushan Script", "Brush Script MT", cursive;
  color: #fff;
  text-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.8);
  background: linear-gradient(90deg, transparent, var(--accent), transparent) center bottom / 70% 0.14rem no-repeat;
  padding-bottom: 0.25rem;
}
.tagline { font-size: 0.85rem; color: #bdbdbd; margin-top: 0.5rem; }

@media (orientation: portrait) {
  .page { gap: calc(0.8rem + min(var(--slack) * 0.3, 4rem)); padding-top: 0.8rem; padding-bottom: 0.8rem; }
}

/* ---- form panel ---- */
.main {
  background: linear-gradient(180deg, rgba(14, 14, 16, 0.72), rgba(6, 6, 8, 0.84));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.8rem;
  padding: 1.15rem 1.35rem 1rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.6);
}
.label { font-size: 1.05rem; letter-spacing: 0.07em; }

/* icon tiles */
.choices.tiles { gap: 0.5rem 0.7rem; }
.tile {
  min-height: max(44px, 2.75rem);
  padding: 0.25rem 0.7rem;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 1.02rem;
  transition: border-color 0.12s, background 0.12s;
}
.tile .box { width: 1.4rem; height: 1.4rem; }
.tile .icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--accent-hot); }
.tile:has(input:checked) { border-color: var(--accent); background: rgba(233, 162, 59, 0.12); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.submit {
  min-height: max(52px, 3.9rem);
  font: 800 2.05rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--accent-hot) 0%, var(--accent) 45%, var(--accent-deep) 100%);
  border-radius: 0.6rem;
  box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.22), 0 0.4rem 1.1rem var(--accent-glow);
  text-shadow: 0 0.08rem 0 rgba(255, 255, 255, 0.3);
}
.submit:active { transform: translateY(1px); filter: brightness(0.95); }

.done h2 { font: 400 2.8rem/1.1 "Kaushan Script", cursive; }
.done .small { font-size: 1rem; color: var(--muted); }

/* ---- landscape ---- */
@media (orientation: landscape) and (min-width: 820px) {
  .hero { flex-basis: 38%; }
  .logo { width: 19rem; }
  .services { font-size: 0.8rem; letter-spacing: 0.2em; gap: 0.5rem; margin-top: calc(1.4rem + min(var(--slack) * 0.25, 2.5rem)); }
  .brush { padding: 0.35rem 1.6rem 0.5rem; margin-top: calc(1rem + min(var(--slack) * 0.1, 1rem)); }
  .brush .win { font-size: 3.9rem; }
  .brush .toward { font-size: 1.12rem; }
  .script { font-size: 2.05rem; margin-top: 0.9rem; }
  .tagline { font-size: 0.72rem; letter-spacing: 0.2em; margin-top: 0.7rem; }
}

/* ---- phones ---- */
@media (max-width: 600px) {
  .logo { width: 13rem; }
  .services { font-size: 0.75rem; letter-spacing: 0.2em; }
  .brush { padding: 0.3rem 1.4rem 0.45rem; }
  .brush .win { font-size: 3.1rem; }
  .brush .toward { font-size: 1.15rem; }
  .script { font-size: 1.9rem; }
  .tagline { font-size: 0.7rem; letter-spacing: 0.18em; }
  .main { padding: 1rem; }
  .submit { font-size: 1.7rem; }
}