.hair-planner-page {
    color: var(--color-ink-strong);
    overflow-x: clip;
}

.hair-planner-page [hidden] {
    display: none !important;
}

/* Sections */

.hair-planner-tool,
.hair-planner-education,
.hair-planner-faq {
    padding: var(--public-section-y) 0;
}

.hair-planner-tool {
    background: var(--color-surface-soft);
    scroll-margin-top: var(--navbar-height, 78px);
}

.hair-planner-tool .tool-section-heading {
    margin-bottom: clamp(20px, 2.4vw, 28px);
}

.hair-planner-page .article-hero-actions {
    margin-top: 24px;
}

.hair-planner-hero-cta {
    gap: 0.5rem;
}

.hair-planner-hero-cta svg {
    height: 18px;
    width: 18px;
}

.hair-planner-education,
.hair-planner-faq {
    background: var(--color-surface-warm);
}

.hair-planner-kicker {
    color: var(--color-primary);
    display: inline-block;
    font-size: 0.82rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

/* Tool panel */

.hair-planner-panel {
    background: #fff;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--tool-panel-radius);
    box-shadow: var(--tool-panel-shadow);
    /* clip, not hidden: hidden would make the panel a scroll container and stop the Step 2 nav
       bar from sticking to the viewport. */
    overflow: clip;
    position: relative;
    scroll-margin-top: calc(var(--navbar-height, 78px) + 16px);
}

/* Stepper */

.hair-planner-stepper {
    border-bottom: 1px solid var(--color-line-soft);
    column-gap: clamp(10px, 1.6vw, 20px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 1.2rem var(--tool-pane-padding) 1.1rem;
}

/* Each step owns a progress segment; reached steps fill it. */
.hair-planner-stepper li {
    align-items: center;
    color: var(--color-muted);
    display: flex;
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
    gap: 0.65rem;
    line-height: 1.25;
    min-width: 0;
    padding-bottom: 0.95rem;
    position: relative;
}

.hair-planner-stepper li::after {
    background: var(--color-line-soft);
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    transition: background-color 220ms ease;
}

.hair-planner-stepper li.is-active::after,
.hair-planner-stepper li.is-done::after {
    background: var(--color-primary);
}

.hair-planner-stepper__num {
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--color-line-soft);
    border-radius: 50%;
    color: var(--color-muted);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.84rem;
    height: 30px;
    justify-content: center;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
    width: 30px;
}

.hair-planner-stepper li.is-active .hair-planner-stepper__num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
    color: #fff;
}

/* Done steps swap the number for a tick drawn from two borders. */
.hair-planner-stepper li.is-done .hair-planner-stepper__num {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    font-size: 0;
}

.hair-planner-stepper li.is-done .hair-planner-stepper__num::before {
    border: solid var(--color-primary-dark);
    border-width: 0 2px 2px 0;
    content: "";
    height: 11px;
    margin-top: -3px;
    transform: rotate(45deg);
    width: 6px;
}

.hair-planner-stepper li.is-active .hair-planner-stepper__label {
    color: var(--color-ink-strong);
}

.hair-planner-stepper__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hair-planner-stepper__meta {
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: 400;
}

.hair-planner-stepper li.is-done .hair-planner-stepper__label {
    color: var(--color-primary-dark);
}

/* Layout */

.hair-planner-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--tool-pane-padding);
}

.hair-planner-steps {
    min-width: 0;
}

.hair-planner-step {
    animation: hair-planner-step-in 220ms ease;
}

@keyframes hair-planner-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hair-planner-step__legend {
    color: var(--color-ink-strong);
    font-size: 1.1rem;
    font-weight: var(--weight-semibold);
    margin: 0 0 0.5rem;
    padding: 0;
    scroll-margin-top: calc(var(--navbar-height, 78px) + 24px);
    width: 100%;
}

/* Headings and notes receive focus programmatically (step changes, photo panel, suggestion);
   they are not controls. */
.hair-planner-step__legend:focus,
.hair-planner-photo > h3:focus,
.hair-planner-suggestion h4:focus,
.hair-planner-suggestion [data-hair-suggestion-applied]:focus {
    outline: 0;
}

.hair-planner-step__nav {
    align-items: center;
    border-top: 1px solid var(--color-line-soft);
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
    margin-top: 1.7rem;
    padding-top: 1.3rem;
}

.hair-planner-step__nav--end {
    justify-content: flex-end;
}

.hair-planner-step__nav--start {
    justify-content: flex-start;
}

.hair-planner-substep {
    animation: hair-planner-step-in 220ms ease;
}

.hair-planner-field {
    border: 0;
    margin: 0 0 1.4rem;
    min-width: 0;
    padding: 0;
}

.hair-planner-field:last-child {
    margin-bottom: 0;
}

/* Help text with its shortcut button (male map photo trigger): side by side when there is room. */
.hair-planner-field__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
    justify-content: space-between;
    margin: 0 0 1.2rem;
}

.hair-planner-field__actions .hair-planner-field__help {
    flex: 1 1 320px;
    margin: 0;
}

.hair-planner-field__actions .tool-button {
    flex: 0 0 auto;
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0.55rem 1.2rem;
}

.hair-planner-field__help {
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: -0.2rem 0 0.7rem;
}

/* Area picker (Step 1) */

.hair-planner-areas {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.hair-planner-areas__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0.6rem;
}

.hair-planner-area {
    align-items: flex-start;
    appearance: none;
    background: #fff;
    border: 1.5px solid var(--color-line-soft);
    border-radius: var(--tool-card-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.9rem;
    padding: 1.3rem 1.2rem;
    position: relative;
    text-align: left;
    touch-action: manipulation;
    transition: background-color 160ms ease, border-color 160ms ease;
    width: 100%;
}

.hair-planner-area:hover {
    border-color: #bcd6ea;
}

.hair-planner-area:focus-visible {
    outline: 3px solid rgba(23, 105, 170, 0.35);
    outline-offset: 2px;
}

.hair-planner-area__illustration {
    align-items: center;
    background: var(--color-primary-soft);
    border-radius: var(--tool-item-radius);
    display: flex;
    flex: 0 0 auto;
    height: 72px;
    justify-content: center;
    width: 72px;
}

.hair-planner-area__illustration svg {
    height: 64px;
    width: 64px;
}

.hair-planner-area__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hair-planner-area__copy strong {
    color: var(--color-ink-strong);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
}

.hair-planner-area__copy small {
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.3;
}

.hair-planner-area__check {
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--color-line-soft);
    border-radius: 50%;
    color: transparent;
    display: flex;
    height: 22px;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    width: 22px;
}

.hair-planner-area__check svg {
    height: 13px;
    width: 13px;
}

.hair-planner-area[aria-pressed="true"] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.hair-planner-area[aria-pressed="true"] .hair-planner-area__illustration {
    background: #fff;
}

.hair-planner-area[aria-pressed="true"] .hair-planner-area__check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Picture grid (Ludwig cards, Step 2) */

.hair-planner-picture-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.5rem;
    max-width: 760px;
}

/* The label stretches to its grid cell and the card fills it, so every card in a row has the same
   height even when one caption wraps to an extra line. */
.hair-planner-picture {
    display: flex;
}

.hair-planner-picture__input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.hair-planner-picture__card {
    background: #fff;
    border: 1.5px solid var(--color-line-soft);
    border-radius: var(--tool-card-radius);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.65rem 0.65rem 0.85rem;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.hair-planner-picture:hover .hair-planner-picture__card {
    border-color: #bcd6ea;
}

.hair-planner-picture:has(.hair-planner-picture__input:checked) .hair-planner-picture__card {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.hair-planner-picture:has(.hair-planner-picture__input:focus-visible) .hair-planner-picture__card {
    outline: 3px solid rgba(23, 105, 170, 0.35);
    outline-offset: 2px;
}

.hair-planner-mini-map {
    display: block;
    width: 100%;
}

/* Realistic illustration layer shared by every map, picture card and pictogram. Gradients and
   hair-fibre patterns live once in the hidden <svg><defs> at the top of hair_planner.view.php. */

/* No dark outline on skin: shading and gradients carry the form, the way a medical illustration
   (rather than a cartoon) would. */
.hair-planner-art__skin {
    fill: url(#hairSkinGradient);
    stroke: rgba(160, 105, 72, 0.35);
    stroke-width: 0.8;
}

.hair-planner-art__skin--scalp {
    fill: url(#hairScalpSkin);
}

.hair-planner-art__skin--face {
    fill: url(#hairFaceSkin);
}

.hair-planner-art__face-shade {
    fill: url(#hairFaceShade);
    pointer-events: none;
}

.hair-planner-art__soft-shadow {
    fill: url(#hairSoftShadow);
    pointer-events: none;
}

.hair-planner-art__warm {
    fill: url(#hairSkinWarm);
    pointer-events: none;
}

.hair-planner-art__highlight {
    fill: url(#hairSoftHighlight);
    pointer-events: none;
}

.hair-planner-art__neck {
    fill: url(#hairNeckGradient);
}

.hair-planner-art__line {
    fill: none;
    stroke: rgba(150, 96, 64, 0.45);
    stroke-linecap: round;
    stroke-width: 1.2;
}

.hair-planner-art__line--soft {
    stroke: rgba(150, 96, 64, 0.24);
}

/* Hair is painted first as one full layer (whole scalp, whole beard, both brows); the zones on
   top only paint hair LOSS. Full hair = fibres over a base colour. */
.hair-planner-art__hair {
    fill: url(#hairScalpFull);
}

.hair-planner-art__hair--part {
    fill: url(#hairPartFull);
}

/* Face hair and brows also get a stroke of loose fibres (no base) along their outer edge, so the
   hair silhouette ends in soft hair tips rather than a drawn line. */
.hair-planner-art__hair--face {
    fill: url(#hairFaceFull);
    stroke: url(#hairFaceWisps);
    stroke-linejoin: round;
    stroke-width: 4;
}

.hair-planner-art__brow {
    fill: url(#hairBrowFull);
    stroke: url(#hairBrowWisps);
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.hair-planner-art__thin-part {
    fill: url(#hairPartThin);
}

/* Loss layers (see $zoneLayers / $scalpScene in hair_planner.view.php): a full region paints
   nothing (it stays a transparent click target); a thinning / sparse / partial region lays
   see-through skin over the hair and a few loose fibres on top; a bald / empty / needs-rebuilding
   region lays opaque skin. The skin gradient is pinned to the drawing's coordinates so it matches
   the skin underneath. Feathering and clipping apply to the whole layer group, so neighbouring
   lost regions merge into one soft-edged area instead of showing seams between them. */
.hair-planner-art__zone,
.hair-planner-zone-shape,
.hair-planner-art__zone-wisps,
.hair-planner-zone-wisps {
    fill: transparent;
}

.hair-planner-art__zone-wisps,
.hair-planner-zone-wisps {
    pointer-events: none;
}

.hair-planner-art__loss--scalp {
    clip-path: url(#hairScalpClip);
    filter: url(#hairFeather);
}

.hair-planner-art__wisps--scalp {
    clip-path: url(#hairScalpClip);
    opacity: 0.6;
}

.hair-planner-art__wisps--beard {
    opacity: 0.7;
}

.hair-planner-art__loss--beard {
    clip-path: url(#hairFaceClip);
    filter: url(#hairFeatherSoft);
}

.hair-planner-art__loss--eyebrow {
    filter: url(#hairFeatherFine);
}

.hair-planner-art__loss--scalp > :not([data-state="full"]):not([data-hair-state="full"]) {
    fill: url(#hairScalpSkin);
}

.hair-planner-art__loss--beard > :not([data-hair-state="full"]),
.hair-planner-art__loss--eyebrow > :not([data-hair-state="full"]) {
    fill: url(#hairFaceSkin);
}

.hair-planner-art__loss > [data-state="thinning"],
.hair-planner-art__loss > [data-hair-state="thinning"],
.hair-planner-art__loss > [data-hair-state="sparse"],
.hair-planner-art__loss > [data-hair-state="partial"] {
    fill-opacity: 0.72;
}

.hair-planner-art__wisps--scalp > [data-state="thinning"],
.hair-planner-art__wisps--scalp > [data-hair-state="thinning"] {
    fill: url(#hairScalpWisps);
}

.hair-planner-art__wisps--beard > [data-hair-state="sparse"] {
    fill: url(#hairFaceWisps);
}

.hair-planner-art__wisps--eyebrow > [data-hair-state="partial"] {
    fill: url(#hairBrowWisps);
}

.hair-planner-art__eye {
    fill: #e9ddd1;
}

.hair-planner-art__iris {
    fill: url(#hairIrisGradient);
    stroke: rgba(40, 24, 14, 0.55);
    stroke-width: 0.6;
}

.hair-planner-art__pupil {
    fill: #1b120d;
}

.hair-planner-art__lid-shadow {
    fill: url(#hairLidShadow);
}

.hair-planner-art__glint {
    fill: #fff;
    fill-opacity: 0.4;
}

.hair-planner-art__lid {
    fill: none;
    stroke: #3a2519;
    stroke-linecap: round;
    stroke-width: 1.7;
}

.hair-planner-art__nostril {
    fill: rgba(110, 62, 40, 0.55);
}

.hair-planner-art__lip-upper {
    fill: #a66e5d;
}

.hair-planner-art__lip-lower {
    fill: url(#hairLipGradient);
}

/* Lips sit above the goatee/moustache zones; let taps fall through to the zone underneath. */
.hair-planner-art__lip-upper,
.hair-planner-art__lip-lower,
.hair-planner-art__mouth {
    pointer-events: none;
}

.hair-planner-art__mouth {
    fill: none;
    stroke: rgba(110, 58, 46, 0.7);
    stroke-linecap: round;
    stroke-width: 1;
}

.hair-planner-art__patch {
    fill: url(#hairThinPatch);
}

.hair-planner-art__part {
    fill: url(#hairScalpSkin);
    filter: url(#hairFeatherFine);
}

.hair-planner-art__shade {
    fill: url(#hairDomeShade);
    pointer-events: none;
}

.hair-planner-art__shine {
    fill: url(#hairDomeShine);
    pointer-events: none;
}

.hair-planner-art__zone,
.hair-planner-art__zone-wisps,
.hair-planner-zone-wisps {
    fill-rule: evenodd;
}

.hair-planner-picture__caption {
    color: var(--color-ink-strong);
    font-size: 0.84rem;
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

.hair-planner-picture__small {
    color: var(--color-muted);
    font-size: 0.76rem;
    margin-top: auto;
}

/* Photo trigger + optional photo step */

/* Opens between its trigger and the zone map, so it is framed as a tray rather than a new section. */
.hair-planner-photo {
    background: var(--color-surface-soft, #f6f9fc);
    border: 1px solid var(--color-line-soft);
    border-radius: var(--tool-card-radius);
    margin: 0.2rem 0 1.2rem;
    padding: 1.2rem 1.25rem;
}

.hair-planner-photo > h3 {
    color: var(--color-ink-strong);
    font-size: 1.02rem;
    font-weight: var(--weight-semibold);
    margin: 0 0 0.4rem;
}

.hair-planner-photo > p {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}

.hair-planner-inapp {
    background: #fff8e8;
    border: 1px solid rgba(194, 125, 20, 0.25);
    border-radius: 14px;
    color: #6d5122;
    display: flex;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding: 1rem;
}

.hair-planner-inapp > svg {
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

.hair-planner-inapp p {
    line-height: 1.5;
    margin: 0.3rem 0 0.7rem;
}

.hair-planner-inapp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.hair-planner-inapp .hair-planner-text-button {
    color: #6d5122;
}

.hair-planner-photo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.1rem;
}

.hair-planner-photo__actions[hidden] {
    display: none;
}

.hair-planner-picker {
    position: relative;
}

.hair-planner-picker:focus-within {
    outline: 3px solid rgba(23, 105, 170, 0.35);
    outline-offset: 2px;
}

.hair-planner-picker__input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hair-planner-picker:has(.hair-planner-picker__input:disabled) {
    cursor: progress;
    opacity: 0.6;
}

.hair-planner-camera {
    margin-bottom: 1.1rem;
}

.hair-planner-camera__video {
    aspect-ratio: 4 / 3;
    background: #0a1e34;
    border-radius: var(--tool-card-radius);
    display: block;
    margin-bottom: 0.8rem;
    object-fit: cover;
    transform: scaleX(-1);
    width: 100%;
}

.hair-planner-photo__status {
    color: var(--color-primary-dark);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 0.7rem;
}

.hair-planner-photo__status:empty {
    display: none;
    margin: 0;
}

.hair-planner-photo__notice {
    background: #fdf1ef;
    border: 1px solid rgba(161, 61, 50, 0.25);
    border-radius: var(--tool-item-radius);
    color: var(--tool-error);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 1.1rem;
    padding: 0.75rem 0.9rem;
}

/* Photo and its reading. Wide screens put them side by side so the reading sits next to the bands
   it describes instead of a full photo height below them. */
.hair-planner-photo__result {
    display: grid;
}

@media (min-width: 992px) {
    .hair-planner-photo__result:has(> [data-hair-suggestion]:not([hidden])) {
        align-items: start;
        column-gap: 1.2rem;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

/* Shrinks to the photo, which is capped in height so a portrait shot stays on screen. */
.hair-planner-photo__frame {
    background: #0a1e34;
    border-radius: var(--tool-card-radius);
    justify-self: center;
    margin: 0 0 0.6rem;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: fit-content;
}

.hair-planner-photo__canvas {
    display: block;
    max-height: min(70vh, 560px);
    max-width: 100%;
}

/* Same aspect ratio as the photo canvas, so filling the frame's width lines it up. */
.hair-planner-photo__mask {
    display: block;
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

/* Scoped to the frame so .hair-planner-text-button, declared later, does not strip the pill. */
.hair-planner-photo__frame .hair-planner-photo__remove {
    background: rgba(10, 30, 52, 0.65);
    border-radius: 999px;
    bottom: 10px;
    color: #fff;
    font-size: 0.82rem;
    padding: 0.4rem 0.8rem;
    position: absolute;
    right: 10px;
}

.hair-planner-photo__frame .hair-planner-photo__remove:hover,
.hair-planner-photo__frame .hair-planner-photo__remove:focus {
    color: #fff;
    text-decoration: underline;
}

/* The photo's reading: one row per top-view band, then what accepting it would give. */
.hair-planner-suggestion {
    background: var(--color-primary-soft);
    border-radius: var(--tool-item-radius);
    margin: 0 0 1.1rem;
    padding: 1.1rem 1.2rem 1.2rem;
}

.hair-planner-suggestion h4 {
    color: var(--color-primary-dark);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    margin: 0 0 0.3rem;
}

.hair-planner-suggestion__help {
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0 0 0.9rem;
    max-width: 62ch;
}

.hair-planner-suggestion__reading {
    background: #fff;
    border: 1px solid rgba(23, 105, 170, 0.12);
    border-radius: var(--tool-item-radius);
    padding: 0.25rem 1rem 0.85rem;
}

/* Rows share the list's columns (subgrid) so the chips, bars and numbers line up across zones. */
.hair-planner-readout {
    column-gap: 0.9rem;
    display: grid;
    grid-template-columns: auto auto minmax(4rem, 1fr) auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hair-planner-readout__row {
    align-items: center;
    border-bottom: 1px solid var(--color-line-soft);
    display: grid;
    gap: 0.45rem 0.9rem;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: 0.7rem 0;
}

.hair-planner-readout__zone {
    color: var(--color-ink-strong);
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
}

/* The state the map will take; it gets heavier with the loss, ending in the selected-pill look
   the zone rows below use. */
.hair-planner-readout__state {
    border: 1.5px solid var(--color-line-soft);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: var(--weight-semibold);
    justify-self: start;
    padding: 0.18rem 0.65rem;
    white-space: nowrap;
}

.hair-planner-readout__state[data-state="thinning"] {
    background: var(--color-primary-soft);
    border-color: #bcd6ea;
    color: var(--color-primary-dark);
}

.hair-planner-readout__state[data-state="bald"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* A loss scale split into the three states at the photo's thresholds (--thinning-at, --bald-at,
   set from COVERAGE_THRESHOLDS), filled to the measured loss in the state's colour. The gaps sit
   above the fill, so the bar always reads as full / thinning / bald segments. */
.hair-planner-readout__bar {
    --gap: 3px;
    background: #e6edf4;
    border-radius: 999px;
    display: block;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.hair-planner-readout__bar::after {
    background: linear-gradient(90deg,
        transparent calc(var(--thinning-at) - var(--gap) / 2),
        #fff calc(var(--thinning-at) - var(--gap) / 2),
        #fff calc(var(--thinning-at) + var(--gap) / 2),
        transparent calc(var(--thinning-at) + var(--gap) / 2),
        transparent calc(var(--bald-at) - var(--gap) / 2),
        #fff calc(var(--bald-at) - var(--gap) / 2),
        #fff calc(var(--bald-at) + var(--gap) / 2),
        transparent calc(var(--bald-at) + var(--gap) / 2));
    content: "";
    inset: 0;
    position: absolute;
}

.hair-planner-readout__bar > span {
    background: #a9bccd;
    border-radius: 999px;
    display: block;
    height: 100%;
}

.hair-planner-readout__bar[data-state="thinning"] > span {
    background: var(--color-primary-bright);
}

.hair-planner-readout__bar[data-state="bald"] > span {
    background: var(--color-primary);
}

.hair-planner-readout__loss {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hair-planner-suggestion__outcome {
    padding-top: 0.8rem;
}

.hair-planner-suggestion__plan {
    color: var(--color-primary-dark);
    font-size: 0.95rem;
    font-weight: var(--weight-semibold);
    line-height: 1.45;
    margin: 0;
}

.hair-planner-suggestion__area {
    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0.25rem 0 0;
}

.hair-planner-suggestion__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
    margin-top: 1rem;
}

.hair-planner-suggestion__applied {
    align-items: center;
    color: var(--color-primary-dark);
    display: flex;
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
    gap: 0.5rem;
    line-height: 1.5;
    margin: 0;
}

.hair-planner-suggestion__applied svg {
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

@media (max-width: 575.98px) {
    .hair-planner-suggestion {
        padding: 1rem 0.9rem 1.1rem;
    }

    .hair-planner-suggestion__reading {
        padding: 0.2rem 0.8rem 0.8rem;
    }

    /* Name and state on one line, the bar and its number under them. */
    .hair-planner-readout {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .hair-planner-readout__state {
        justify-self: end;
    }

    .hair-planner-suggestion__actions .hair-planner-button {
        width: 100%;
    }
}

.hair-planner-privacy {
    align-items: flex-start;
    color: var(--color-muted);
    display: flex;
    font-size: 0.88rem;
    gap: 0.5rem;
    line-height: 1.5;
    margin: 1.1rem 0 0;
}

.hair-planner-privacy svg {
    color: var(--color-primary);
    flex: 0 0 auto;
    height: 16px;
    margin-top: 0.15rem;
    width: 16px;
}

/* Zone maps (male scalp map + beard/eyebrow maps). Stacked, the map and its rows share one
   centred column; on wide screens they sit side by side (see the 1200px query). */

.hair-planner-mapgrid {
    margin: 0 auto;
    max-width: 560px;
}

/* The male map sits inside the substep fieldset, under the photo controls. */
.hair-planner-field > .hair-planner-mapgrid {
    margin-top: 2.4rem;
}

.hair-planner-zonemap {
    margin: 0 auto 1.2rem;
    max-width: 420px;
}

.hair-planner-zonemap--eyebrow {
    max-width: 340px;
}

.hair-planner-zonemap svg {
    display: block;
    overflow: visible;
    width: 100%;
}

.hair-planner-zonemap foreignObject {
    overflow: visible;
    pointer-events: none;
}

.hair-planner-zonemap--beard,
.hair-planner-zonemap--eyebrow {
    filter: drop-shadow(0 10px 18px rgba(60, 36, 20, 0.12));
}

.hair-planner-zonemap__taglabel {
    color: var(--color-muted);
    display: block;
    font-size: 12px;
    line-height: 1.25;
    pointer-events: none;
}

/* Labels drawn on top of a region sit on a small dark pill, so they stay readable whether the
   region underneath shows dark hair or bare scalp. */
.hair-planner-zonemap__taglabel--inside {
    background: rgba(28, 18, 12, 0.55);
    border-radius: 999px;
    color: #fff;
    font-weight: var(--weight-semibold);
    margin: 0 auto;
    padding: 1px 8px;
    width: fit-content;
}

.hair-planner-zonemap figcaption {
    align-items: flex-start;
    color: var(--color-muted);
    display: flex;
    font-size: 0.86rem;
    gap: 0.5rem;
    line-height: 1.5;
    margin-top: 0.8rem;
    text-align: left;
}

.hair-planner-zonemap figcaption svg {
    color: var(--color-primary);
    flex: 0 0 auto;
    height: 16px;
    margin-top: 0.15rem;
    width: 16px;
}

.hair-planner-zonemap figcaption strong {
    color: var(--color-ink-strong);
}

/* The visible region shape (painted by the shared state rules above). It is the precise pointer
   hit area, so transparent bald/empty fills must still catch clicks. data-hair-state is kept in
   sync with the invisible button below by applyZoneState() in hair-planner.js. */
.hair-planner-zone-shape {
    cursor: pointer;
    fill-rule: evenodd;
    pointer-events: fill;
}

/* Dashed seam over each region; hovering/focusing the region or its row turns it into a solid
   highlight ring along the region's real outline. */
.hair-planner-zone-outline {
    fill: none;
    pointer-events: none;
    stroke: #c39a76;
    stroke-dasharray: 3 4;
    stroke-opacity: 0.75;
    stroke-width: 1.2;
    transition: stroke 160ms ease, stroke-width 160ms ease;
}

.hair-planner-zone-outline.is-highlighted {
    stroke: var(--color-primary);
    stroke-dasharray: none;
    stroke-opacity: 1;
    stroke-width: 2.5;
}

/* The invisible, keyboard-focusable target layered over each region shape (sized roughly to the
   shape). Pointer input goes to the shape itself, which matches the same data-hair-zone/-kind
   selectors and hit-tests the real outline, so overlapping boxes can never steal a click from a
   neighbouring region. Focus highlights the region's outline; the button adds the focus ring. */
.hair-planner-zone {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 6px;
    display: block;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

.hair-planner-zone:focus-visible {
    outline: 3px solid rgba(23, 105, 170, 0.35);
    outline-offset: 2px;
}


/* Zone rows: label + 3-option segmented control */

.hair-planner-zonerows {
    display: grid;
    gap: 0.6rem;
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
}

.hair-planner-zonerow {
    align-items: center;
    background: var(--color-surface-soft);
    border-radius: var(--tool-item-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    transition: background-color 160ms ease;
}

.hair-planner-zonerow.is-highlighted {
    background: var(--color-primary-soft);
}

.hair-planner-zonerow__label {
    color: var(--color-ink-strong);
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
}

.hair-planner-segmented {
    display: inline-flex;
    gap: 0.3rem;
}

.hair-planner-segmented__option {
    background: #fff;
    border: 1.5px solid var(--color-line-soft);
    border-radius: 999px;
    color: var(--color-ink-strong);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: var(--weight-semibold);
    padding: 0.35rem 0.75rem;
    position: relative;
    touch-action: manipulation;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.hair-planner-segmented__option input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.hair-planner-segmented__option:hover {
    border-color: #bcd6ea;
}

.hair-planner-segmented__option:has(input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.hair-planner-segmented__option:has(input:focus-visible) {
    outline: 3px solid rgba(23, 105, 170, 0.35);
    outline-offset: 2px;
}

.hair-planner-norwood__auto {
    background: var(--color-primary-soft);
    border-radius: var(--tool-item-radius);
    color: var(--color-primary-dark);
    font-size: 0.92rem;
    font-weight: var(--weight-semibold);
    margin: 1.2rem 0 0;
    padding: 0.7rem 0.9rem;
}

.hair-planner-female-pathway {
    background: var(--color-primary-soft);
    border-radius: var(--tool-item-radius);
    color: var(--color-primary-dark);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 1rem 0 0;
    padding: 0.8rem 0.9rem;
}

/* Text buttons (copy link, open in Chrome) */

.hair-planner-text-button {
    align-items: center;
    background: none;
    border: 0;
    color: var(--color-primary-dark);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
    gap: 0.4rem;
    padding: 0.3rem 0;
    text-decoration: none;
}

.hair-planner-text-button svg {
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.hair-planner-text-button:hover,
.hair-planner-text-button:focus {
    text-decoration: underline;
}

.hair-planner-text-button:focus-visible {
    outline: 3px solid rgba(23, 105, 170, 0.35);
    outline-offset: 2px;
}

/* Result (Step 3) */

.hair-planner-result {
    background: var(--color-primary-soft);
    border-radius: var(--tool-card-radius);
    padding: clamp(20px, 2.4vw, 28px);
}

.hair-planner-result__empty-title {
    color: var(--color-ink-strong);
    font-size: 1.05rem;
    font-weight: var(--weight-semibold);
    margin: 0 0 0.4rem;
}

.hair-planner-result__empty p {
    color: var(--color-muted);
    line-height: 1.5;
    margin: 0;
}

.hair-planner-hero {
    background: #fff;
    border-radius: var(--tool-card-radius);
    margin: 0 0 1.4rem;
    padding: 1.3rem 1.4rem;
    text-align: center;
}

.hair-planner-hero__label {
    color: var(--color-muted);
    display: block;
    font-size: 0.85rem;
    font-weight: var(--weight-semibold);
    margin-bottom: 0.3rem;
}

.hair-planner-hero__range {
    color: var(--color-primary-dark);
    display: block;
    font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
    font-weight: var(--weight-display);
    line-height: 1.1;
}

.hair-planner-hero__hint {
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.hair-planner-facts {
    border-top: 1px solid rgba(23, 105, 170, 0.14);
    display: grid;
    gap: 0.9rem 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
}

.hair-planner-facts__item {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hair-planner-facts dt svg {
    color: var(--color-primary);
    display: block;
    height: 18px;
    margin: 0 auto 0.2rem;
    width: 18px;
}

.hair-planner-facts dt {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: var(--weight-semibold);
}

.hair-planner-facts dd {
    color: var(--color-ink-strong);
    font-size: 0.95rem;
    font-weight: var(--weight-semibold);
    margin: 0;
}

.hair-planner-result__rows {
    display: grid;
    gap: 0.9rem;
}

.hair-planner-result__row {
    background: #fff;
    border-radius: var(--tool-card-radius);
    padding: 1rem 1.1rem;
}

.hair-planner-result__row h4 {
    color: var(--color-ink-strong);
    font-size: 0.98rem;
    font-weight: var(--weight-semibold);
    margin: 0;
}

.hair-planner-result__row-head {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.hair-planner-result__row-head .hair-planner-text-button {
    flex: 0 0 auto;
    font-size: 0.86rem;
}

.hair-planner-result__row p {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.hair-planner-result__row .hair-planner-result__pathway {
    background: var(--color-primary-soft);
    border-radius: var(--tool-item-radius);
    color: var(--color-primary-dark);
    font-weight: var(--weight-semibold);
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
}

.hair-planner-result__row .hair-planner-result__list-title {
    color: var(--color-ink-strong);
    font-size: 0.86rem;
    font-weight: var(--weight-semibold);
    margin: 1.1rem 0 0.5rem;
}

.hair-planner-result__list {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hair-planner-result__list li {
    color: var(--color-ink-strong);
    font-size: 0.9rem;
    line-height: 1.5;
    padding-left: 1.1rem;
    position: relative;
}

.hair-planner-result__list li::before {
    background: var(--color-primary);
    border-radius: 50%;
    content: "";
    height: 6px;
    left: 0.15rem;
    position: absolute;
    top: 0.6em;
    width: 6px;
}

.hair-planner-result__stat {
    color: var(--color-ink-strong);
    font-size: 0.92rem;
    margin: 0.3rem 0 0;
}

.hair-planner-result__stat:first-child {
    margin-top: 0;
}

.hair-planner-result__stat strong {
    color: var(--color-ink-strong);
    font-weight: var(--weight-semibold);
}

.hair-planner-result__note {
    align-items: flex-start;
    color: var(--color-ink-strong);
    display: flex;
    font-size: 0.88rem;
    gap: 0.5rem;
    line-height: 1.5;
    margin: 1.1rem 0 0;
}

.hair-planner-result__note svg {
    color: var(--color-primary);
    flex: 0 0 auto;
    height: 16px;
    margin-top: 0.15rem;
    width: 16px;
}

.hair-planner-result__source {
    align-items: center;
    display: flex;
    font-size: 0.88rem;
    gap: 0.45rem;
    margin: 1.1rem 0 0;
}

.hair-planner-result__source svg {
    color: var(--color-muted);
    flex: 0 0 auto;
    height: 15px;
    width: 15px;
}

.hair-planner-result__source a {
    color: var(--color-primary-dark);
    font-weight: var(--weight-semibold);
}

.hair-planner-result__dataset {
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0.5rem 0 0;
}

.hair-planner-result__links {
    border-top: 1px solid rgba(23, 105, 170, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
}

.hair-planner-result__links-title {
    color: var(--color-ink-strong);
    font-size: 0.82rem;
    font-weight: var(--weight-semibold);
}

.hair-planner-result__links a {
    align-items: center;
    color: var(--color-primary-dark);
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: var(--weight-semibold);
    gap: 0.4rem;
    text-decoration: none;
}

.hair-planner-result__links a:hover,
.hair-planner-result__links a:focus {
    text-decoration: underline;
}

.hair-planner-result__links a svg {
    height: 15px;
    width: 15px;
}

/* Live summary: Step 2 can run past the fold (zone map and rows), so its nav row carries the
   live estimate and Continue / See plan and stays in view while the map scrolls beneath it.
   On phones it sits just above the site's contact dock. */

.hair-planner-step__nav:has(> .hair-planner-summary) {
    background: #fff;
    bottom: calc(var(--contact-dock-height, 0px) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 1rem;
    position: sticky;
    z-index: 5;
}

.hair-planner-summary {
    margin-left: auto;
    min-width: 0;
    padding-right: 0.6rem;
    text-align: right;
}

.hair-planner-summary__empty {
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
}

.hair-planner-summary__label {
    color: var(--color-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: var(--weight-semibold);
    margin-bottom: 0.1rem;
}

.hair-planner-summary__range {
    color: var(--color-primary-dark);
    display: block;
    font-size: 1.25rem;
    font-weight: var(--weight-display);
    line-height: 1.2;
}

.hair-planner-summary__range--text {
    font-size: 0.9rem;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    max-width: 340px;
}

/* Buttons */

.hair-planner-button {
    text-align: center;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.hair-planner-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.hair-planner-button--secondary:hover,
.hair-planner-button--secondary:focus {
    background: #fff;
}

.hair-planner-actions {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.hair-planner-actions .hair-planner-button {
    font-size: 1rem;
    line-height: 1.25;
    padding-inline: 1.25rem;
    text-wrap: balance;
    white-space: normal;
    width: 100%;
}

.hair-planner-whatsapp-hint {
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .hair-planner-area,
    .hair-planner-area__check,
    .hair-planner-zone,
    .hair-planner-picture__card,
    .hair-planner-segmented__option,
    .hair-planner-stepper li::after,
    .hair-planner-stepper__num,
    .hair-planner-zonerow,
    .hair-planner-step,
    .hair-planner-substep {
        animation: none;
        transition: none;
    }
}

@media (min-width: 992px) {
    .hair-planner-result__body {
        align-items: start;
        column-gap: clamp(24px, 3vw, 40px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    }

    .hair-planner-result__body > .hair-planner-step__legend {
        grid-column: 1 / -1;
    }

    .hair-planner-result__side .hair-planner-actions {
        margin-top: 0;
    }
}

/* Below the desktop layout the estimate takes its own line above Back and Continue. */
@media (max-width: 991.98px) {
    .hair-planner-step__nav:has(> .hair-planner-summary) {
        flex-wrap: wrap;
        padding-bottom: 0.8rem;
        padding-top: 0.8rem;
        row-gap: 0.6rem;
    }

    .hair-planner-summary {
        flex: 1 0 100%;
        margin-left: 0;
        order: -1;
        padding-right: 0;
        text-align: left;
    }

    .hair-planner-summary__content {
        align-items: baseline;
        column-gap: 0.5rem;
        display: flex;
        flex-wrap: wrap;
    }

    .hair-planner-summary__label {
        margin-bottom: 0;
    }

    .hair-planner-summary__range {
        font-size: 1.1rem;
    }

    .hair-planner-summary__range--text {
        font-size: 0.88rem;
        max-width: none;
    }
}

@media (min-width: 1200px) {
    .hair-planner-mapgrid {
        align-items: center;
        column-gap: 2rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: none;
    }

    /* Auto inline margins make a grid item shrink-to-fit, which would drop
       the SVG to its 300px default width. */
    .hair-planner-mapgrid .hair-planner-zonemap {
        margin-bottom: 0;
        width: 100%;
    }

    .hair-planner-mapgrid > .hair-planner-zonerows,
    .hair-planner-mapgrid__rows > :first-child {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .hair-planner-areas__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hair-planner-zonemap {
        max-width: 380px;
    }

    .hair-planner-zonemap--eyebrow {
        max-width: 310px;
    }
}

/* The site's floating buttons sit in the bottom corners, over the sticky Step 2 bar's Back and
   Continue until the page is wide enough (about 1250px) for the panel to clear them. Hide them
   while Step 2 is open, as overlays do in style.css. Phones keep the contact dock, which the bar
   already sits above. */
@media (max-width: 1279.98px) {
    body:has(.hair-planner-step[data-hair-step="2"]:not([hidden])) .scroll-top {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
    body:has(.hair-planner-step[data-hair-step="2"]:not([hidden])) .contact-hub {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@media (max-width: 575px) {
    .hair-planner-layout,
    .hair-planner-result {
        padding: 18px;
    }

    .hair-planner-area {
        padding: 0.9rem 0.95rem;
    }

    .hair-planner-area__copy strong {
        font-size: 0.92rem;
    }

    .hair-planner-area__copy small {
        font-size: 0.78rem;
    }

    .hair-planner-actions .hair-planner-button {
        font-size: 1rem;
        padding: 0.95rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .hair-planner-stepper {
        padding: 1rem 18px 0.95rem;
    }

    .hair-planner-stepper li {
        align-items: flex-start;
        flex-direction: column;
        font-size: 0.8rem;
        gap: 0.45rem;
        padding-bottom: 0.8rem;
    }

    .hair-planner-stepper__num {
        font-size: 0.76rem;
        height: 26px;
        width: 26px;
    }
}

/* Small phones stack the area cards; a row layout keeps all four (and Continue) within reach. */
@media (max-width: 420px) {
    .hair-planner-areas__grid {
        gap: 0.65rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .hair-planner-area {
        align-items: center;
        flex-direction: row;
        gap: 0.9rem;
        padding: 0.8rem 3.2rem 0.8rem 0.8rem;
    }

    .hair-planner-area__illustration {
        height: 56px;
        width: 56px;
    }

    .hair-planner-area__illustration svg {
        height: 50px;
        width: 50px;
    }

    .hair-planner-area__check {
        margin-top: -11px;
        top: 50%;
    }
}