:root {
  --ink: #201a17;
  --muted: #6f655f;
  --paper: #f7f2eb;
  --card: #fffdf9;
  --line: #ded4ca;
  --accent: #a6482e;
  --accent-dark: #78301e;
  --soft: #efe1d3;
  --sage: #dce0d1;
  --shadow: 0 18px 60px rgba(54, 37, 27, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 6%, rgba(166,72,46,.10), transparent 28rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; }

.site-header {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand-mark {
  width: 35px;
  height: 35px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: .08em;
}

nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
}

nav a {
  text-decoration: none;
  color: var(--muted);
}

nav a:hover { color: var(--ink); }

main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 860px;
  padding: 80px 0 90px;
}

.eyebrow,
.result-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 8vw, 96px);
  line-height: .95;
  letter-spacing: -.055em;
  margin: 18px 0 26px;
  max-width: 930px;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 10px 0 20px;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.hero-copy {
  max-width: 710px;
  font-size: 19px;
  color: var(--muted);
  margin-bottom: 30px;
}

.primary-button {
  appearance: none;
  border: 0;
  width: fit-content;
  padding: 15px 20px;
  background: var(--ink);
  color: white;
  text-decoration: none;
  font-weight: 750;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.primary-button:hover {
  transform: translateY(-1px);
  background: var(--accent-dark);
}

.calculator-shell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 5vw, 56px);
  box-shadow: var(--shadow);
  margin-bottom: 90px;
}

.calculator-intro {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 36px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 34px;
}

.calculator-intro p {
  color: var(--muted);
  max-width: 480px;
}

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  padding: 38px 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-weight: 750;
  font-size: 14px;
}

select,
input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  padding: 0 14px;
  font: inherit;
  outline: none;
}

select:focus,
input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(166,72,46,.10);
}

.input-with-unit {
  position: relative;
}

.input-with-unit input {
  padding-right: 44px;
}

.input-with-unit span {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 700;
}

.hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.calculate-button {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.result-card {
  background: var(--ink);
  color: white;
  border-radius: 20px;
  padding: clamp(22px, 4vw, 38px);
}

.result-kicker { color: #f0a58e; }

.result-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 12px;
  margin: 18px 0 24px;
}

.result-main > div {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 18px;
}

.result-main .recommended {
  background: rgba(255,255,255,.08);
}

.result-label {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  margin-bottom: 7px;
}

.result-main strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1;
}

.result-explanation {
  color: rgba(255,255,255,.82);
  margin-bottom: 22px;
}

.result-note {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

.result-note strong { color: white; }

.content-section {
  padding: 76px 0;
  border-top: 1px solid var(--line);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 38px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-grid article,
.mini-card {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}

.feature-grid p,
.two-column p,
.methodology p {
  color: var(--muted);
}

.number {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 34px;
}

.two-column {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 60px;
  align-items: center;
}

.mini-card span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 18px;
}

.mini-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
}

.mini-card p { margin: 0 0 14px; }

details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}

details:last-child {
  border-bottom: 1px solid var(--line);
}

summary {
  cursor: pointer;
  font-weight: 750;
}

details p {
  color: var(--muted);
  max-width: 760px;
  margin: 14px 0 0;
}

.source-list {
  padding-left: 20px;
}

.source-list a {
  color: var(--accent-dark);
}

.page-hero {
  max-width: 780px;
  padding: 90px 0 50px;
}

.page-hero h1 {
  font-size: clamp(48px, 7vw, 78px);
}

.prose {
  max-width: 760px;
  padding-bottom: 100px;
}

.prose h2 {
  font-size: 30px;
  margin-top: 44px;
}

.prose p, .prose li {
  color: var(--muted);
}

.notice {
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  background: rgba(255,255,255,.55);
  margin: 25px 0;
}

footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 34px 0 50px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 30px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.footer-brand { color: var(--ink); }

footer p { margin: 0; }

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a { color: var(--muted); }

.copyright {
  grid-column: 1 / -1;
  margin-top: 20px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .site-header {
    padding-top: 16px;
  }

  nav a:not(:first-child) { display: none; }

  .hero {
    min-height: auto;
    padding: 80px 0;
  }

  h1 { font-size: clamp(48px, 15vw, 72px); }

  .calculator-intro,
  .calculator-grid,
  .result-main,
  .feature-grid,
  .two-column {
    grid-template-columns: 1fr;
  }

  .result-main { gap: 10px; }

  .calculate-button { width: 100%; }

  .content-section { padding: 58px 0; }

  .two-column { gap: 24px; }

  footer {
    grid-template-columns: 1fr;
  }

  .copyright { grid-column: auto; }
}


/* v3: tools + search-support pages */
.tool-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.tool-link-card {
  display: block;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}

.tool-link-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.tool-link-card span {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.tool-link-card strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.tool-link-card p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.compact-hero {
  min-height: auto;
  padding: 82px 0 52px;
}

.compact-hero h1 {
  font-size: clamp(44px, 7vw, 74px);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(220px, 1fr);
  gap: 64px;
  align-items: start;
  padding-bottom: 90px;
}

.article-main h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin-top: 48px;
}

.article-main h3 {
  margin-top: 30px;
}

.article-main p,
.article-main li {
  color: var(--muted);
}

.article-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.article-main th,
.article-main td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.article-main th {
  color: var(--ink);
}

.sticky-card {
  position: sticky;
  top: 20px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
}

.sticky-card strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  margin-bottom: 10px;
}

.sticky-card p {
  color: var(--muted);
  font-size: 14px;
}

.inline-link {
  color: var(--accent-dark);
  font-weight: 700;
}

.range-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 18px;
}

.range-bar div {
  padding: 12px 10px;
  border-right: 1px solid rgba(255,255,255,.12);
}

.range-bar div:last-child { border-right: 0; }

.range-bar small {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.range-bar strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.converter-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow);
  margin: 28px 0 44px;
}

.converter-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.converter-result {
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  background: var(--ink);
  color: white;
}

.converter-result strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
}

.source-box {
  border-top: 1px solid var(--line);
  margin-top: 46px;
  padding-top: 24px;
  font-size: 13px;
}

.source-box p,
.source-box li { color: var(--muted); }

.source-box a { color: var(--accent-dark); }

.badge {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 0 6px 6px 0;
}

@media (max-width: 840px) {
  .tool-links,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-layout { gap: 24px; }
  .sticky-card { position: static; }

  .converter-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .range-bar { grid-template-columns: 1fr 1fr; }
  .range-bar div:nth-child(2) { border-right: 0; }
  .range-bar div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
}


/* v3.3: Personalized Braid Plan */
.hidden { display: none !important; }

.plan-hero { max-width: 920px; }

.plan-saved-banner {
  display: none;
  background: var(--ink);
  color: white;
  border-radius: 18px;
  padding: 18px 20px;
  margin: 0 0 28px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.plan-saved-banner.show { display: flex; }
.plan-saved-banner small { display:block; color:rgba(255,255,255,.68); margin-top:4px; }

.plan-layout {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:24px;
  align-items:start;
  padding:8px 0 76px;
}
.plan-card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(22px,4vw,34px);
  box-shadow:var(--shadow);
}
.plan-results-card { position:sticky; top:18px; }

.plan-form-grid,
.plan-feedback-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}
.plan-actions {
  grid-column:1/-1;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.plan-button {
  appearance:none;
  border:0;
  border-radius:999px;
  min-height:46px;
  padding:11px 17px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.plan-button-accent { background:var(--accent); color:white; }
.plan-button-secondary { border:1px solid var(--line); background:transparent; color:var(--ink); }

.plan-meta,.plan-empty { color:var(--muted); font-size:13px; }
.plan-meta { margin:16px 0 0; }

.plan-result-section {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:24px;
}
.plan-result-section:first-child { border-top:0; padding-top:0; margin-top:0; }
.plan-result-section h2 { font-size:clamp(30px,4vw,44px); }
.plan-result-section p { color:var(--muted); }

.plan-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:20px 0;
}
.plan-metric {
  background:white;
  border:1px solid var(--line);
  border-radius:15px;
  padding:15px;
}
.plan-metric-accent { background:var(--soft); border-color:#d8b7a8; }
.plan-metric strong {
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,3vw,30px);
  line-height:1.05;
}
.plan-metric span { display:block; color:var(--muted); font-size:12px; margin-top:6px; }

.plan-callout {
  border-left:3px solid var(--accent);
  padding:3px 0 3px 15px;
  margin:18px 0;
  color:var(--muted);
}

.plan-zone-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.plan-zone {
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px 14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 10px;
  align-items:baseline;
}
.plan-zone span { font-size:13px; }
.plan-zone b { font-family:Georgia,"Times New Roman",serif; font-size:24px; grid-row:span 2; }
.plan-zone small { color:var(--muted); font-size:11px; }

.plan-portion-viz {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0;
}
.plan-portion-box {
  min-height:190px;
  background:white;
  border:1px solid var(--line);
  border-radius:15px;
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
}
.plan-portion-box.target { border:2px solid var(--accent); background:#fff9f6; }
.plan-portion-box > span { color:var(--muted); font-size:11px; margin-top:4px; }
.plan-portion-box.target > span { color:var(--accent-dark); font-weight:750; }

.plan-hair-bundle {
  position:relative;
  width:52px;
  margin-bottom:14px;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.08));
}
.plan-hair-bundle::before,
.plan-hair-bundle::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50% 50% 42% 42% / 15% 15% 85% 85%;
  border-left:2px solid #312a25;
  border-right:2px solid #312a25;
  transform:rotate(3deg);
}
.plan-hair-bundle::after { transform:rotate(-5deg); opacity:.65; }
.plan-hair-bundle.small { height:68px; width:36px; }
.plan-hair-bundle.medium { height:94px; width:52px; }
.plan-hair-bundle.large { height:118px; width:66px; }

.plan-checkpoint {
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.plan-checkpoint:last-of-type { border-bottom:0; }
.plan-pill {
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--accent-dark);
  font-weight:900;
  font-size:12px;
}

.plan-feedback {
  margin-top:26px;
  background:#efe5da;
  border:1px solid #d7c4b6;
  border-radius:18px;
  padding:20px;
}
.plan-status { min-height:1.25em; margin-top:10px; color:#42634d; font-size:13px; font-weight:800; }
.plan-info { padding-top:24px; }

.secondary-button {
  display:inline-block;
  width:fit-content;
  margin-top:18px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  color:white;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}
.secondary-button:hover { border-color:white; }

@media (max-width:920px) {
  .plan-layout { grid-template-columns:1fr; }
  .plan-results-card { position:static; }
  .plan-metrics { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:680px) {
  .plan-saved-banner { align-items:flex-start; flex-direction:column; }
  .plan-form-grid,.plan-feedback-grid { grid-template-columns:1fr; }
  .plan-actions { grid-column:auto; }
  .plan-metrics { grid-template-columns:1fr; }
  .plan-zone-grid { grid-template-columns:1fr; }
  .plan-portion-viz { gap:6px; }
  .plan-portion-box { min-height:175px; padding-left:6px; padding-right:6px; }
}


/* v3.4 anonymous feedback consent */
.plan-consent{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0 0;padding:.9rem 1rem;border:1px solid var(--line,#d8d0c4);border-radius:12px;background:rgba(255,255,255,.35);font-size:.9rem;line-height:1.45}
.plan-consent input{margin-top:.2rem;flex:0 0 auto}
.plan-consent a{text-decoration:underline}
.plan-button:disabled{opacity:.62;cursor:not-allowed}


/* HairMetric v3.6 — real-hair portion reference system */
.plan-method-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.plan-method-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  background:#fffdf9;
}
.plan-method-card.plan-method-featured{
  border:2px solid var(--accent);
  background:#fff9f6;
}
.plan-method-card h4{margin:6px 0 8px;font-size:18px}
.plan-method-card p{font-size:13px;line-height:1.55;margin:0}
.plan-method-kicker{
  display:block;
  color:var(--accent);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
}
.plan-method-tip{
  margin-top:12px;
  padding:10px 11px;
  border-radius:10px;
  background:var(--soft);
  color:var(--ink);
  font-size:12px;
  line-height:1.45;
}
.plan-reference-image{
  width:100%;
  height:240px;
  object-fit:contain;
  border-radius:12px;
  background:#f4ece4;
  border:1px solid var(--line);
  margin:8px 0 10px;
}
.plan-reference-note{
  margin:16px 0 22px;
  padding:12px 14px;
  border-left:3px solid var(--accent);
  background:#fbf5ef;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.plan-reference-heading{margin:12px 0 10px}
.plan-reference-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:18px;
}
.plan-reference-card{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:white;
}
.plan-reference-card.active{
  border:2px solid var(--accent);
  box-shadow:0 0 0 2px rgba(166,72,46,.08);
}
.plan-reference-card img{
  width:100%;
  height:120px;
  object-fit:contain;
  background:#f4ece4;
  display:block;
}
.plan-reference-card div{padding:10px}
.plan-reference-card strong,
.plan-reference-card span,
.plan-reference-card small{display:block}
.plan-reference-card strong{font-size:14px}
.plan-reference-card span{font-size:11px;color:var(--accent);font-weight:800;margin-top:3px}
.plan-reference-card small{font-size:10px;color:var(--muted);margin-top:2px}

@media (max-width:900px){
  .plan-method-grid{grid-template-columns:1fr}
  .plan-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-reference-image{height:280px}
}
@media (max-width:520px){
  .plan-reference-grid{grid-template-columns:1fr 1fr}
  .plan-reference-card img{height:100px}
}


/* HairMetric v3.8 — progressive personalization + head map */
.plan-hair-setup{
  grid-column:1/-1;
  margin:4px 0 2px;
  padding:18px;
  border:1.5px solid #d8b7a8;
  border-radius:18px;
  background:#fbf1e8;
}
.plan-hair-setup legend{
  padding:0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  font-weight:700;
}
.plan-hair-setup > p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
}
.plan-hair-setup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.plan-personalize-wrap{grid-column:1/-1}
.plan-personalize-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf9;
  color:var(--ink);
  cursor:pointer;
}
.plan-personalize-toggle:hover,
.plan-personalize-toggle.open{border-color:var(--accent)}
.plan-toggle-plus{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--soft);color:var(--accent);
  font-size:24px;line-height:1;font-weight:700;flex:0 0 auto;
}
.plan-personalize-toggle strong{display:block;font-size:15px}
.plan-personalize-toggle small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:400}
.plan-advanced-fields{
  margin-top:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffdf9;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.plan-advanced-intro{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.plan-advanced-intro span{font-size:12px;color:var(--muted);line-height:1.5}
.plan-best-tag{
  display:inline-block;
  margin-left:5px;
  padding:2px 6px;
  border-radius:999px;
  background:var(--soft);
  color:var(--accent-dark);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.plan-square-note{
  grid-column:1/-1;
  padding:11px 12px;
  border-radius:11px;
  background:#f5efe8;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.plan-personalization-summary{
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.plan-metrics-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.plan-piece-highlight{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:15px 0;
}
.plan-piece-highlight > div{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffdf9;
}
.plan-piece-highlight strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
}
.plan-piece-highlight span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}
.plan-head-map{
  max-width:420px;
  margin:18px auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fffdf9;
}
.plan-head-map svg{width:100%;height:auto;display:block}
.hm-head-outline{fill:#fbf5ef;stroke:#342c28;stroke-width:2.5}
.hm-zone{stroke:none}
.hm-zone-a,.hm-zone-b{fill:#f0ddd1}
.hm-zone-c{fill:#f6e8df}
.hm-zone-d{fill:#f4eee8}
.hm-zone-e{fill:#eadfd7}
.hm-zone-f{fill:#dfcabb}
.hm-zone-line{stroke:#b9aaa1;stroke-width:1.5}
.hm-zone-name{font-size:11px;fill:#6f655f;font-family:Arial,sans-serif}
.hm-zone-count{font-size:21px;font-weight:700;fill:#201a17;font-family:Georgia,serif}
.hm-map-orientation{font-size:9px;font-weight:800;letter-spacing:1.5px;fill:#a6482e;font-family:Arial,sans-serif}
.hm-measure-line{stroke:#a6482e;stroke-width:1.5;stroke-dasharray:4 4}
.hm-measure-text{font-size:9px;fill:#a6482e;font-family:Arial,sans-serif}
.plan-map-caption{
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  text-align:center;
}
.plan-zone-grid-compact{margin-top:10px}

@media (max-width:900px){
  .plan-metrics-four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .plan-hair-setup-grid,
  .plan-advanced-fields,
  .plan-piece-highlight{grid-template-columns:1fr}
  .plan-advanced-intro,.plan-square-note{grid-column:auto}
}
@media (max-width:520px){
  .plan-metrics-four{grid-template-columns:1fr}
}


/* HairMetric v3.9 — natural-hair contribution */
.plan-natural-hair-note{
  margin-top:14px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffdf9;
}
.plan-natural-hair-note strong{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--accent-dark);
}
.plan-natural-hair-note span{
  display:block;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}