/* ===========================================================================
   HAIR GROWTH TEST(TM) - assessment module styles
   Namespaced under .hgt so nothing leaks into the page template.

   Matched to the landing page: same canonical Gro tokens, same glass
   surfaces over soft navy and ultramarine halos, same restrained motion.

   One difference from the landing page, on purpose: this is a form people
   have to use, not a page they read. Selected states are unambiguous and
   contrast wins over subtlety wherever the two disagree.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Perfectly Nineties is licensed, so self-host it. Upload the woff2 to File
   Manager and paste its URL below. Falls back to Georgia until then. */
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('PERFECTLY_NINETIES_WOFF2_URL') format('woff2');
  font-weight: 400;
  font-display: swap;
}

.hgt {
  --white: #FFFFFF;
  --grey: #F5F5F7;
  --beige: #F7F0EA;
  --navy: #161433;
  --ultramarine: #361677;
  --black: #141220;

  --ink: var(--black);
  --ink-2: #3A3745;
  --muted: #5E5B6B;
  --muted-2: #8C8996;
  --line: #E9E7EE;
  --accent: var(--ultramarine);
  --cta: var(--ultramarine);
  --cta-hover: var(--navy);

  /* Band colours. module.js reads these three by name - do not rename.
     No traffic-light scale: the landing page palette has no green, amber or
     red. Severity is carried by PROMINENCE instead, which is how the rest of
     the brand handles emphasis. Quiet grey for early, plain near-black for
     building, and ultramarine - the one saturated colour, rationed - for the
     result that most deserves attention. The band label text states the level
     outright, so nothing depends on colour alone. */
  --hgt-green: #8C8996;
  --hgt-amber: #141220;
  --hgt-red: #361677;

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: 'Perfectly Nineties', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --r: 20px;

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-line: rgba(255, 255, 255, 0.9);
  --glass-edge: rgba(20, 18, 32, 0.07);
  --glass-shadow: 0 24px 60px -32px rgba(22, 20, 51, 0.28);

  position: relative;
  min-height: 100vh;
  background: var(--grey);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Soft halos so the glass has something to blur against. Same treatment as
   the landing page hero, held at low opacity because this screen is worked
   through rather than looked at. */
.hgt::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 460px at 50% -8%, rgba(54, 22, 119, 0.12), transparent 64%),
    radial-gradient(620px 420px at 88% 100%, rgba(22, 20, 51, 0.09), transparent 60%);
}
.hgt > * { position: relative; z-index: 1; }

.hgt *, .hgt *::before, .hgt *::after { box-sizing: border-box; }
.hgt p { margin: 0; }
.hgt button { font-family: inherit; }
.hgt img { max-width: 100%; display: block; }
.hgt :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* No margin shorthand here: it outranks the single-class component rules
   below and silently kills their margin-bottom. Set only what is needed. */
.hgt h1, .hgt h2, .hgt h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin-top: 0;
  text-wrap: balance;
}

.hgt-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* ---------- header ---------- */
.hgt-header {
  padding: 18px 22px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hgt-header img { height: 30px; width: auto; }

/* ---------- progress ---------- */
.hgt-progress-wrap { padding: 16px 22px 0; max-width: 620px; margin: 0 auto; }
.hgt-progress-wrap[hidden] { display: none; }
.hgt-progress-label {
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.hgt-progress-track {
  height: 4px;
  border-radius: 100px;
  background: rgba(20, 18, 32, 0.08);
  overflow: hidden;
}
.hgt-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 100px;
  transition: width 0.5s var(--ease);
}

/* ---------- stage ---------- */
.hgt-main { max-width: 620px; margin: 0 auto; padding: 30px 22px 130px; }
.hgt-screen { display: none; }
.hgt-screen.is-active { display: block; animation: hgt-fade 0.45s var(--ease); }
@keyframes hgt-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.hgt-q-tag {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.hgt .hgt-q-title {
  font-size: clamp(1.3rem, 4.4vw, 1.72rem);
  line-height: 1.28;
  margin: 0 0 28px;
  max-width: 30ch;
}

/* ---------- fields ---------- */
.hgt-field { margin-bottom: 18px; }
.hgt-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.hgt-field input[type="text"],
.hgt-field input[type="email"],
.hgt-opt-list textarea {
  width: 100%;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.hgt-opt-list textarea { min-height: 110px; resize: vertical; }
.hgt-field input::placeholder, .hgt-opt-list textarea::placeholder { color: var(--muted-2); }
.hgt-field input:focus, .hgt-opt-list textarea:focus {
  border-color: rgba(54, 22, 119, 0.45);
  background: var(--white);
}
.hgt-field-note { font-size: 0.78rem; color: var(--muted-2); margin-top: 8px; }

.hgt-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge);
  cursor: pointer;
}
.hgt-consent input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

.hgt-error {
  font-size: 0.85rem;
  color: var(--ink);
  margin-top: 14px;
  font-weight: 500;
  background: var(--beige);
  border: 1px solid rgba(20, 18, 32, 0.1);
  border-radius: 12px;
  padding: 12px 15px;
  line-height: 1.55;
}
.hgt-error[hidden] { display: none; }

.hgt-lead-note {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 30px;
  max-width: 46ch;
}

/* ---------- options ----------
   Glass at rest, unmistakable when selected. A form has to be legible before
   it is pretty. */
.hgt-opt-list { display: flex; flex-direction: column; gap: 10px; }
.hgt-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-line);
  transition: border-color 0.28s var(--ease), background 0.28s var(--ease), transform 0.28s var(--ease);
}
.hgt-opt:hover { border-color: rgba(54, 22, 119, 0.3); background: var(--glass-bg-strong); }
.hgt-opt.is-selected {
  border-color: var(--accent);
  background: rgba(54, 22, 119, 0.07);
  box-shadow: inset 0 1px 0 var(--glass-line), 0 12px 28px -18px rgba(54, 22, 119, 0.5);
}
.hgt-opt.is-selected span { color: var(--ink); font-weight: 500; }
.hgt-opt input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.hgt-opt span { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- nav ---------- */
.hgt-nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
.hgt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-size: 0.98rem;
  font-weight: 600;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.3s var(--ease);
}
.hgt-btn-primary {
  background: var(--cta);
  color: var(--white);
  box-shadow: 0 16px 36px -16px rgba(54, 22, 119, 0.5);
  flex: 1;
}
.hgt-btn-primary:hover:not(:disabled) {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -16px rgba(22, 20, 51, 0.45);
}
.hgt-btn-primary:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
.hgt-btn-invert { background: var(--white); color: var(--accent); box-shadow: none; }
.hgt-btn.hgt-btn-invert:hover:not(:disabled) {
  background: var(--beige);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.55);
}
.hgt-btn-block { width: 100%; flex: none; }
.hgt-btn-ghost { background: transparent; color: var(--muted-2); padding: 15px 12px; box-shadow: none; }
.hgt-btn-ghost:hover { color: var(--ink); }

.hgt-skip-row { text-align: center; margin-top: 16px; }
.hgt-skip-row[hidden] { display: none; }
.hgt-skip-link {
  font-size: 0.82rem;
  color: var(--muted-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.hgt-skip-link:hover { color: var(--ink); }

/* ---------- intro ---------- */
/* Intro screen: flex column with explicit gaps.
   NOTE the selector specificity. `.hgt-screen.is-active { display: block }`
   is (0,2,0) and will beat a single-class rule here, which silently kills
   both the flex layout and its gaps. Three classes puts this at (0,3,0) so
   it actually wins. */
.hgt-screen.is-active.hgt-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding-top: clamp(16px, 5vw, 48px);
}
.hgt-intro > * { margin: 0; width: 100%; max-width: 420px; }
.hgt-intro h1 {
  font-size: clamp(1.55rem, 5vw, 1.95rem);
  letter-spacing: -0.02em;
}
.hgt-sub {
  font-size: 0.96rem;
  color: var(--ink-2);
  line-height: 1.6;
}
/* One extra beat before the CTA, so the button reads as the next move rather
   than the last line of the paragraph. */
.hgt-screen.is-active.hgt-intro .hgt-btn-block { margin-top: 10px; max-width: 420px; }

.hgt-intro-meta {
  display: inline-flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: auto;
  max-width: none;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-edge);
}
.hgt-intro-meta span:not(:last-child)::after { content: " ·"; color: var(--muted-2); }

/* ---------- start screen ----------
   Left aligned, like every other screen in the flow, so there is no seam
   between a centred top and a left aligned bottom. */
.hgt-screen[data-screen="name"] { padding-top: clamp(10px, 4vw, 40px); }
.hgt-screen[data-screen="name"] .hgt-eyebrow { display: block; margin-bottom: 16px; }
.hgt-screen[data-screen="name"] h1 {
  font-size: clamp(1.55rem, 5vw, 1.95rem);
  letter-spacing: -0.02em;
  margin: 0 0 30px;
  max-width: 460px;
}
/* The pill sits under the button, where it reassures someone hesitating,
   rather than interrupting between the heading and the action. */
.hgt-screen[data-screen="name"] .hgt-intro-meta { margin-top: 20px; }

/* ---------- research interstitials ---------- */
.hgt-interstitial-card {
  border-radius: var(--r);
  padding: 30px 26px 26px;
  margin-top: 4px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-line);
}
.hgt-interstitial-card .hgt-eyebrow { display: block; margin-bottom: 16px; }
.hgt-int-text {
  font-size: clamp(1.05rem, 3.4vw, 1.18rem);
  line-height: 1.66;
  color: var(--ink);
  margin-bottom: 20px;
  font-weight: 400;
}
.hgt-int-source {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-2);
  padding-top: 16px;
  border-top: 1px solid var(--glass-edge);
}

/* ---------- results ---------- */
.hgt-score-card {
  text-align: center;
  padding: 34px 24px 30px;
  border-radius: var(--r);
  margin-bottom: 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-line);
}
.hgt-band-eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* The one place the display face appears in the assessment: the result
   headline, which is the emotional peak of the whole flow. */
.hgt-score-card h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 5.2vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 auto 8px;
  max-width: 440px;
}

.hgt-result-grid-wrap { margin: 22px 0 6px; }
.hgt-result-grid-wrap svg { width: 100%; height: auto; display: block; }
.hgt-grid-caption { margin-top: 6px; }
.hgt-grid-impact {
  display: block;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.hgt-grid-quadrant { display: block; font-size: 0.85rem; color: var(--muted-2); line-height: 1.5; }

.hgt-insight-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.hgt-insight {
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hgt-insight-tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.hgt-insight-text { font-size: 0.94rem; line-height: 1.68; color: var(--ink-2); }

.hgt-intro-block {
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  padding: 24px 22px;
  margin-bottom: 22px;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink-2);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hgt-intro-block p + p { margin-top: 14px; }
.hgt-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hgt-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(54, 22, 119, 0.09);
  border: 1px solid rgba(54, 22, 119, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
}
.hgt-intro-block .hgt-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.hgt-intro-block .hgt-role { font-size: 0.75rem; color: var(--muted-2); }

/* Injected by module.js inside the warm-intro block. */
.hgt-low-note {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(54, 22, 119, 0.05);
  border: 1px solid rgba(54, 22, 119, 0.12);
  font-size: 0.9rem;
  line-height: 1.66;
  color: var(--ink-2);
}
.hgt-route-intro { font-size: 0.95rem; line-height: 1.72; color: var(--ink-2); }

.hgt-next-step-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r);
  padding: 32px 26px;
  text-align: center;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.hgt-next-step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 260px at 50% -10%, rgba(54, 22, 119, 0.55), transparent 66%);
  pointer-events: none;
}
.hgt-next-step-card > * { position: relative; z-index: 1; }
.hgt-next-step-card .hgt-eyebrow { color: rgba(247, 240, 234, 0.55); display: block; margin-bottom: 12px; }
.hgt-next-step-card h3 { font-size: clamp(1.2rem, 4.4vw, 1.45rem); margin: 0 0 12px; }
.hgt-next-step-card p { font-size: 0.9rem; color: rgba(247, 240, 234, 0.68); line-height: 1.64; margin-bottom: 22px; }
.hgt-missing-url { font-style: italic; margin-bottom: 0 !important; }

.hgt-save-note {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  line-height: 1.6;
}
.hgt-save-note[hidden] { display: none; }

.hgt-restart-row { text-align: center; margin-top: 10px; }
.hgt-restart-row button {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--muted-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
}
.hgt-restart-row button:hover { color: var(--ink); }

@media (min-width: 620px) {
  .hgt-main { padding: 46px 24px 140px; }
  .hgt-nav-row { margin-top: 34px; }
  .hgt-score-card { padding: 42px 32px 34px; }
  .hgt-interstitial-card { padding: 36px 32px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hgt-screen.is-active { animation: none; }
  .hgt-progress-fill { transition: none; }
  .hgt-btn, .hgt-opt, .hgt-field input, .hgt-opt-list textarea { transition: none; }
  .hgt-btn-primary:hover, .hgt-btn-invert:hover { transform: none; }
}

/* Graceful degradation where backdrop-filter is unsupported. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hgt-opt, .hgt-consent, .hgt-insight, .hgt-intro-block, .hgt-save-note,
  .hgt-interstitial-card, .hgt-score-card, .hgt-intro-meta,
  .hgt-field input[type="text"], .hgt-field input[type="email"],
  .hgt-opt-list textarea { background: rgba(255, 255, 255, 0.95); }
}