/* ─────────────────────────────────────────────────────────────────────────────
   MOHR, /haircheck
   The HairCheck landing page and its one-question-at-a-time intake. Loaded
   after assets/mohr.css; every colour, type role, radius, button and form
   field comes from there. Nothing here redefines the brand.

   What this file adds, and only this:
     - the page-scoped header (wordmark + one quiet link back to the site)
     - the typographic hero and its reassurance run
     - the three-step explanation, the two before & after pairs, HairMetrix
     - the intake: progress bar, option rows, photo capture, contact step,
       sending / error / success states
     - the small-screen sticky start bar
   ───────────────────────────────────────────────────────────────────────────── */

/* mohr.css pads every small-screen body for the sitewide sticky CTA, which
   this page does not carry. */
body.page-haircheck{padding-bottom:0;}
@media(max-width:899px){ body.page-haircheck{padding-bottom:0;} }

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── header ───────────────────────────────────────────────
   Wordmark and one way back to the main site. No menu: paid traffic has
   nothing to wander off on. During the intake the link steps aside too. */
@media(min-width:900px){.hc-head .nav{min-height:3.5rem;}}
.hc-head__link{
  font-family:var(--accent);font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--slate);text-decoration:none;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;gap:.45em;transition:color .3s var(--ease);
}
.hc-head__link:hover{color:var(--evergreen);}
body.is-flow .hc-head__link{display:none;}
body.is-flow.is-done .hc-head__link{display:inline-flex;}

/* ── hero ─────────────────────────────────────────────────
   Typographic, one column on a phone, everything above the fold: the two
   headline lines, one sentence, the reassurance run, one button. */
.hc-hero{padding-top:clamp(1.6rem,5vh,4.5rem);padding-bottom:clamp(2.6rem,7vh,5.5rem);overflow:hidden;}
.hc-hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media(min-width:940px){.hc-hero__grid{grid-template-columns:1.2fr .8fr;}}
.hc-hero__copy{max-width:40rem;}
.hc-hero h1{letter-spacing:-.028em;text-wrap:balance;}
.hc-hero h1 .lead-in{display:block;color:var(--slate);font-weight:300;
  font-size:clamp(1.45rem,6vw,2.9rem);line-height:1.15;letter-spacing:-.018em;margin-bottom:.22em;}
.hc-hero h1 .lead-out{display:block;color:var(--evergreen);font-weight:500;
  font-size:clamp(2.15rem,9vw,5rem);line-height:1.04;}
.hc-hero__lede{margin:1.25rem 0 1.15rem;max-width:33rem;font-size:clamp(1.02rem,1.3vw,1.25rem);line-height:1.55;}

.hc-assure{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:0 0 1.5rem;
  font-family:var(--accent);font-size:.8rem;font-weight:500;letter-spacing:.03em;color:var(--slate);}
.hc-assure span{display:inline-flex;align-items:center;gap:.5em;}
.hc-assure span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:0 0 auto;}

.hc-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.95rem;}
.hc-cta .btn{min-height:3.4rem;justify-content:center;letter-spacing:.06em;}
.hc-cta .btn--primary{width:100%;}
@media(min-width:560px){.hc-cta .btn--primary{width:auto;min-width:20rem;}}
.hc-place{margin:0;font-family:var(--accent);font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--slate);line-height:1.5;}
.hc-text{font-size:.95rem;color:var(--evergreen);font-weight:500;text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--brass) 70%,transparent);padding-block:.3rem;
  transition:box-shadow .3s var(--ease);}
.hc-text:hover{box-shadow:inset 0 -2px 0 var(--brass);}
@media(max-width:559px){
  .hc-cta{align-items:stretch;}
  .hc-place,.hc-text{text-align:center;align-self:center;}
}

/* desktop-only signature: the site's aperture instrument, as on the homepage */
.hc-hero__aperture{display:none;}
@media(min-width:940px){.hc-hero__aperture{display:block;justify-self:center;}}

/* ── how it works ─────────────────────────────────────────*/
.hc-intro{max-width:44rem;}
.hc-intro p.lede{margin-top:1.2rem;}
.hc-steps{list-style:none;margin:clamp(2.2rem,4.5vw,3.2rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.4rem);}
@media(min-width:760px){.hc-steps{grid-template-columns:repeat(3,1fr);}}
.hc-steps .step h3{font-size:clamp(1.2rem,2vw,1.35rem);}
.hc-steps .step__n{font-size:1.9rem;margin-bottom:.7rem;}
.hc-note{margin:clamp(1.8rem,3.5vw,2.4rem) 0 0;padding-left:1rem;border-left:2px solid var(--brass);max-width:36rem;}

/* framing diagrams (shared drawing style with /photo-screen) */
.shot__frame{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--porcelain);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent);}
.panel-sage .shot__frame{background:color-mix(in srgb,var(--porcelain) 62%,var(--sage));}
.shot__frame svg{display:block;width:100%;height:100%;}
.shot__frame .out{fill:none;stroke:var(--evergreen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.shot__frame .faint{fill:none;stroke:color-mix(in srgb,var(--evergreen) 32%,transparent);stroke-width:1.4;stroke-linecap:round;}
.shot__frame .mark{fill:none;stroke:var(--brass);stroke-width:1.6;}
.shot__frame .pip{fill:var(--brass);}
.hc-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.55rem,2vw,1.2rem);
  margin:1.2rem 0 0;max-width:22rem;}
.hc-shots figure{margin:0;min-width:0;}
.hc-shots figcaption{margin:.55rem 0 0;font-family:var(--accent);font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);line-height:1.35;}

/* ── results ──────────────────────────────────────────────
   Two of the site's clinical pairs on the shared .ba component; side by side
   from tablet up, stacked on a phone. */
.hc-results .results__head{margin-bottom:clamp(1.8rem,4vw,2.8rem);}
.hc-results__grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.2vw,1.6rem);}
@media(min-width:760px){.hc-results__grid{grid-template-columns:1fr 1fr;}}
.hc-results .fine{margin:clamp(1.3rem,3vw,1.8rem) 0 0;color:color-mix(in srgb,var(--porcelain) 72%,transparent);}

/* ── HairMetrix ───────────────────────────────────────────
   The illustrative scalp-imaging diagram from /assessment, styled for a light
   panel here. It is labelled as a diagram; it is not a capture. */
.hc-metrix__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center;}
@media(min-width:880px){.hc-metrix__grid{grid-template-columns:1fr 1fr;}}
.hc-metrix h2 .soft{color:var(--evergreen);display:block;}
.hc-metrix__copy p.lede{margin:1.3rem 0 1.8rem;}
.hc-metrix figure{margin:0;}
.hc-scan{display:block;width:100%;height:auto;}
.hc-scan .field__bg{fill:color-mix(in srgb,var(--evergreen) 4%,var(--porcelain));}
.hc-scan .field__frame{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:1;}
.hc-scan .field__grid line{stroke:color-mix(in srgb,var(--ink) 7%,transparent);stroke-width:1;}
.hc-scan .field__hairs path{fill:none;stroke:color-mix(in srgb,var(--evergreen) 70%,transparent);stroke-linecap:round;}
.hc-scan .field__loupeRing{fill:none;stroke:var(--brass);stroke-width:1.4;}
.hc-scan .field__loupeFill{fill:color-mix(in srgb,var(--brass) 6%,transparent);}
.hc-scan .field__caliper line{stroke:var(--brass);stroke-width:1;stroke-dasharray:3 4;}
.hc-scan .field__focus{fill:var(--brass);}
.hc-scan .field__marks line{stroke:color-mix(in srgb,var(--brass) 70%,transparent);stroke-width:1.4;}
.hc-metrix figcaption{margin:.9rem 0 0;font-size:.8rem;line-height:1.55;color:var(--slate);}

/* ── sticky start bar (small screens, landing only) ───────*/
.hc-sticky{display:none;}
@media(max-width:899px){
  .hc-sticky{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:.65rem .85rem calc(.65rem + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--porcelain) 94%,transparent);
    backdrop-filter:saturate(1.1) blur(12px);-webkit-backdrop-filter:saturate(1.1) blur(12px);
    border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
    transform:translateY(110%);transition:transform .35s var(--ease);
  }
  .hc-sticky.on{transform:none;}
  .hc-sticky .btn{width:100%;justify-content:center;min-height:3.1rem;letter-spacing:.06em;}
  body.is-flow .hc-sticky{display:none;}
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE INTAKE
   One screen per question. A thin progress bar and "n of 6" sit under the
   header; the step's action is pinned to the bottom of the screen, in thumb
   reach, except on the contact step where it follows the fields so the
   keyboard can never sit on top of it.
   ───────────────────────────────────────────────────────────────────────────── */
body.is-flow #hc-landing,body.is-flow footer.site{display:none;}

.hc-flow{--w:34rem;min-height:calc(100vh - var(--hc-head,3.5rem));min-height:calc(100svh - var(--hc-head,3.5rem));
  display:flex;flex-direction:column;padding:0;}
.hc-flow[hidden],.hc-bar[hidden],.hc-form[hidden]{display:none;}

.hc-bar{position:sticky;top:var(--hc-head,3.5rem);z-index:20;background:var(--porcelain);}
.hc-bar__in{max-width:var(--w);margin:0 auto;padding:.35rem var(--pad) .7rem;
  display:grid;grid-template-columns:5.5rem 1fr 5.5rem;align-items:center;}
@media(max-width:899px){.hc-bar__in{padding-inline:clamp(1.15rem,4.5vw,1.5rem);}}
.hc-back{justify-self:start;display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:0 .2rem;
  border:0;background:none;cursor:pointer;color:var(--evergreen);
  font:600 .74rem/1 var(--accent);letter-spacing:.14em;text-transform:uppercase;}
.hc-back[hidden]{display:inline-flex;visibility:hidden;}
.hc-count{justify-self:center;margin:0;font-family:var(--accent);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);}
.hc-progress{height:3px;margin-top:.15rem;grid-column:1/-1;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden;}
.hc-progress__fill{display:block;height:100%;width:0;background:var(--evergreen);border-radius:3px;
  transition:width .45s var(--ease);}

.hc-form{flex:1;display:flex;flex-direction:column;}
.hc-step{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--w);margin:0 auto;
  padding:clamp(1rem,3vh,2.4rem) var(--pad) 0;}
@media(max-width:899px){.hc-step{padding-inline:clamp(1.15rem,4.5vw,1.5rem);}}
.hc-step[hidden]{display:none;}
.hc-step.is-entering{animation:hcIn .32s var(--ease) both;}
@keyframes hcIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.hc-step fieldset{border:0;margin:0;padding:0;min-width:0;}
.hc-q{font-family:var(--display);font-weight:400;color:var(--ink);font-size:clamp(1.7rem,6.6vw,2.5rem);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 .5rem;padding:0;text-wrap:balance;}
.hc-q:focus{outline:none;}
.hc-sub{margin:0 0 .45rem;font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,4.4vw,1.45rem);
  color:var(--evergreen);letter-spacing:-.01em;line-height:1.25;}
.hc-help{margin:0 0 1.2rem;color:var(--slate);font-size:1rem;line-height:1.55;max-width:30rem;}

/* option rows: the whole row is the target, 56px minimum */
.hc-opts{display:flex;flex-direction:column;gap:.55rem;margin-top:1.1rem;}
.hc-opt{position:relative;display:flex;align-items:center;gap:.9rem;min-height:3.5rem;padding:.8rem 1.1rem;
  border-radius:var(--radius-sm);cursor:pointer;background:var(--porcelain);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 14%,transparent);
  font-size:1.04rem;font-weight:500;color:var(--ink);line-height:1.3;
  -webkit-tap-highlight-color:transparent;transition:box-shadow .2s var(--ease),background .2s var(--ease);}
.hc-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.hc-opt__mark{flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 30%,transparent);position:relative;
  transition:box-shadow .2s var(--ease);}
.hc-opt__mark::after{content:"";position:absolute;inset:0;margin:auto;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--brass);transform:scale(0);transition:transform .2s var(--ease);}
@media(hover:hover){.hc-opt:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--evergreen) 45%,transparent);}}
.hc-opt.is-on{background:color-mix(in srgb,var(--sage) 70%,var(--porcelain));
  box-shadow:inset 0 0 0 2px var(--evergreen);}
.hc-opt.is-on .hc-opt__mark{box-shadow:inset 0 0 0 2px var(--evergreen);background:var(--evergreen);}
.hc-opt.is-on .hc-opt__mark::after{transform:scale(1);}
.hc-opt:has(input:focus-visible){outline:2.5px solid var(--brass);outline-offset:3px;}
/* short phones (iPhone SE / mini): seven rows still fit above the pinned button */
@media(max-height:720px){.hc-opts{gap:.45rem;margin-top:.8rem;}.hc-opt{min-height:3.1rem;padding-block:.55rem;}}

/* the step's action, pinned to the bottom of the screen on question and photo steps */
.hc-foot{position:sticky;bottom:0;margin-top:auto;padding:1rem 0 calc(1rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,color-mix(in srgb,var(--porcelain) 0%,transparent),var(--porcelain) 28%);
  display:flex;flex-direction:column;gap:.6rem;}
.hc-foot .btn{width:100%;justify-content:center;min-height:3.4rem;letter-spacing:.06em;}
.hc-flow .btn[hidden]{display:none;}
.hc-foot .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.hc-foot .btn[aria-disabled="true"] .btn__dot{transform:none;}
.hc-hint{margin:0;min-height:1.3em;font-size:.86rem;color:#8a3320;text-align:center;}

/* ── photo steps ──────────────────────────────────────────*/
.hc-shot{position:relative;margin:.2rem auto 0;height:clamp(10rem,30vh,20rem);height:clamp(10rem,30svh,20rem);aspect-ratio:4/5;max-width:100%;}
.hc-shot .shot__frame{height:100%;}
.hc-shot__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);
  background:var(--sage);}
.hc-shot__preview[hidden]{display:none;}
.hc-shot__tag{position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  font-family:var(--accent);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.45em .8em;border-radius:100px;color:var(--ink);background:var(--brass);}
.hc-shot__tag[hidden]{display:none;}
.hc-shot__busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--porcelain) 82%,transparent);
  font-family:var(--accent);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--evergreen);}
.hc-shot__busy[hidden]{display:none;}
.hc-redo{display:flex;justify-content:center;gap:.6rem;margin-top:.8rem;}
.hc-redo .btn{min-width:7.5rem;justify-content:center;}
.hc-redo[hidden]{display:none;}
.hc-photo-err{margin:.8rem 0 0;font-size:.9rem;color:#8a3320;text-align:center;}
.hc-photo-err:empty{display:none;}

/* ── contact step ─────────────────────────────────────────*/
.hc-step--contact .field input{min-height:3.4rem;font-size:1.05rem;
  scroll-margin-top:calc(var(--hc-head,3.5rem) + 6.5rem);scroll-margin-bottom:6rem;}
.hc-alert{scroll-margin-top:calc(var(--hc-head,3.5rem) + 4.5rem);}
.hc-step--contact .field label{font-family:var(--accent);}
.hc-check{display:flex;gap:.8rem;align-items:flex-start;margin:.4rem 0 1rem;cursor:pointer;
  font-size:.9rem;line-height:1.5;color:var(--slate);}
.hc-check input{flex:0 0 auto;width:1.35rem;height:1.35rem;margin:.1rem 0 0;accent-color:var(--evergreen);}
.hc-check b{color:var(--ink);font-weight:600;}
.hc-legal{margin:.2rem 0 0;font-size:.84rem;line-height:1.55;color:var(--slate);}
.hc-legal a{color:var(--evergreen);text-underline-offset:3px;}
.hc-submit{padding:.6rem 0 calc(1.6rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.85rem;}
.hc-submit .btn{width:100%;justify-content:center;min-height:3.4rem;letter-spacing:.06em;}
.hc-submit .btn[disabled]{cursor:progress;transform:none;box-shadow:none;}
.hc-spin{width:1rem;height:1rem;border-radius:50%;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--porcelain) 35%,transparent);border-top-color:var(--porcelain);
  animation:spin .8s linear infinite;}
.hc-spin[hidden]{display:none;}
.hc-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.hc-alert{margin:0 0 1rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);
  background:color-mix(in srgb,#a8442f 7%,var(--porcelain));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#a8442f 40%,transparent);
  font-size:.94rem;line-height:1.55;color:var(--ink);}
.hc-alert[hidden]{display:none;}
.hc-alert b{display:block;margin-bottom:.2rem;color:#8a3320;}
.hc-alert a,.hc-alert button{color:var(--evergreen);font:inherit;font-weight:600;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* ── success ──────────────────────────────────────────────*/
.hc-done{max-width:38rem;padding-bottom:clamp(2.5rem,6vh,4rem);}
.hc-done__mark{width:56px;height:56px;margin:0 0 1.4rem;}
.hc-done h2{font-size:clamp(1.9rem,7vw,2.9rem);line-height:1.08;letter-spacing:-.022em;text-wrap:balance;}
.hc-done h2:focus{outline:none;}
.hc-done__lede{margin:1rem 0 0;color:var(--slate);font-size:1.05rem;line-height:1.6;}
.hc-next{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.hc-next__head{margin:2rem 0 0;font-family:var(--accent);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);}
.hc-next li{display:grid;grid-template-columns:2.4rem 1fr;gap:.6rem;align-items:baseline;padding:1rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);font-size:1.02rem;line-height:1.5;color:var(--ink);}
.hc-next li > span:first-child{font-family:var(--display);font-size:1.35rem;color:var(--evergreen);line-height:1;}
.hc-done .fine{margin:1rem 0 0;}
.hc-closer{margin-top:clamp(2.2rem,5vw,3rem);background:var(--evergreen);color:var(--porcelain);
  border-radius:var(--radius);padding:clamp(1.6rem,5vw,2.4rem);}
.hc-closer h3{color:var(--porcelain);font-size:clamp(1.45rem,5vw,1.9rem);line-height:1.12;letter-spacing:-.015em;}
.hc-closer p{margin:.9rem 0 0;color:color-mix(in srgb,var(--porcelain) 86%,transparent);font-size:.98rem;line-height:1.6;}
.hc-closer .hc-price{color:var(--porcelain);}
.hc-closer .hc-price b{color:var(--brass-light);font-weight:600;}
.hc-closer .btn{margin-top:1.4rem;width:100%;justify-content:center;text-align:center;line-height:1.25;min-height:3.2rem;letter-spacing:.05em;}
@media(min-width:560px){.hc-closer .btn{width:auto;}}

/* short phones: the frame gives way so the action stays clear of it */
@media(max-height:720px){
  .hc-shot{height:clamp(9rem,26vh,15rem);height:clamp(9rem,26svh,15rem);}
  .hc-help{margin-bottom:.8rem;font-size:.95rem;}
  .hc-q{margin-bottom:.3rem;}
}
/* narrow phones: long button labels stay on one line */
@media(max-width:380px){
  .hc-flow .btn,.hc-cta .btn,.hc-sticky .btn{letter-spacing:.02em;font-size:.92rem;padding-inline:1.1rem;}
}

/* desktop: same flow, just more air around it */
@media(min-width:900px){
  .hc-flow{--w:36rem;}
  .hc-step{padding-top:clamp(2rem,6vh,4rem);}
  .hc-q{font-size:2.6rem;}
  .hc-foot{position:static;background:none;margin-top:1.6rem;padding-bottom:2.5rem;}
}