/* ============================================================
   Future Hairline — the virtual consultation.
   Uses the site's tokens (styles.css); only adds what the flow needs.
   ============================================================ */

/* ------------------------------------------------------------------
   The consultation is a form, not a page: one screen at a time, the
   height of the device, nothing to scroll past. The site's chrome
   steps aside for it.
   ------------------------------------------------------------------ */
.fh-app,.fh-app body{height:100%;overflow:hidden}
.fh-app .nav,.fh-app .footer,.fh-app .mobile-bar,.fh-app .float-bar,.fh-app .chat-foot,
.fh-app .modal-backdrop{display:none!important}

.fh{--fh-pad:clamp(18px,4vw,64px);position:fixed;inset:0;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden}
.fh>.wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;
  padding-top:calc(16px + var(--safe-top, 0px));padding-bottom:calc(16px + var(--safe-bottom, 0px))}
.fh-top{flex:none;display:flex;align-items:center;gap:18px;margin-bottom:clamp(14px,2.4vh,30px)}
.fh-x{flex:none;margin-left:auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-soft);font-size:21px;line-height:1;
  text-decoration:none;transition:border-color .25s var(--ease),color .25s var(--ease)}
.fh-x:hover{border-color:var(--gold);color:var(--gold)}
.fh-step{display:none}
/* every rule below sets a display, so the hidden attribute needs the last word */
.fh [hidden]{display:none!important}
.fh-step.on{display:flex;flex-direction:column;flex:1;min-height:0;animation:fhIn .5s var(--ease) both}
@keyframes fhIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fh-step.on{animation:none}}

/* ---------- progress rail ---------- */
.fh-rail{display:flex;gap:6px;flex:1;max-width:520px;margin:0}
.fh-rail.start{display:none}
.fh-rail span{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.fh-rail span::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
.fh-rail span.done::after{transform:scaleX(1)}

/* ---------- 1 · start ---------- */
/* Mobile leads with the transformation, not the pitch: headline, the three
   frames, then one tap. Desktop keeps them side by side. */
.fh-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(26px,4.5vw,64px);
  align-items:center;flex:1;min-height:0}
.fh-hero>*{min-height:0}
.fh-preview{height:100%;max-height:100%;align-content:center}
.fh-pv{min-height:0}
.fh-pv img{height:100%;aspect-ratio:auto;min-height:0}
.fh-hero h1{font-size:clamp(42px,6.6vw,94px);font-weight:300;letter-spacing:-.05em;line-height:.95;margin-top:14px}
.fh-hero h1 em{font-style:italic;color:var(--gold)}
.fh-go{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fh-go .btn{padding:17px 30px;font-size:14px}
.fh-note{margin-top:18px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-mute)}

/* three steps, not three sentences */
.fh-steps3{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.fh-steps3 div{display:flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;border:1px solid var(--line);
  border-radius:999px}
.fh-steps3 b{width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--ink-dark);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.fh-steps3 span{font-size:13px;color:var(--ink-soft);white-space:nowrap}

/* the product: today -> 6 -> 12, the 12-month frame carries the accent */
.fh-preview{display:grid;grid-template-columns:1fr;gap:7px}
.fh-pv{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#15151A}
.fh-pv:last-child{border-color:rgba(201,166,107,.65);box-shadow:0 0 0 1px rgba(201,166,107,.28)}
.fh-pv img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.fh-pv b{position:absolute;left:7px;bottom:7px;font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(10,10,10,.68);border:1px solid rgba(255,255,255,.16);
  padding:4px 8px;border-radius:999px;backdrop-filter:blur(6px)}
.fh-pv.is-render b{background:var(--gold);color:var(--ink-dark);border-color:transparent}

/* ---------- 2 · capture ---------- */
.fh-head{max-width:64ch;margin-bottom:28px}
.fh-head h2{font-size:clamp(26px,3.4vw,44px);font-weight:300;letter-spacing:-.035em}
.fh-head p{margin-top:12px;color:var(--ink-soft);font-size:15.5px}
.fh-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(20px,3vw,44px);align-items:start}
.fh-cap>*{min-width:0}
.fh-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0c0c0e;border:1px solid var(--line);
  aspect-ratio:2/3;max-height:min(64svh, calc(100svh - 300px));display:flex;align-items:center;justify-content:center}
.fh-stage video,.fh-stage canvas,.fh-stage img{width:100%;height:100%;object-fit:cover;display:block}
.fh-stage video.mirror{transform:scaleX(-1)}
.fh-guide{position:absolute;inset:0;pointer-events:none}
.fh-guide #fhGuideArt{position:absolute;inset:6% 8% 4%;color:rgba(255,255,255,.72);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.fh-guide #fhGuideArt svg{width:100%;height:100%;display:block}
.fh-guide .gtxt{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.68);
  border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:var(--r);backdrop-filter:blur(8px);
  line-height:1.35}
.fh-shutter{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}
.fh-snap{width:64px;height:64px;border-radius:50%;background:var(--gold);border:4px solid rgba(255,255,255,.22);
  cursor:pointer;transition:transform .2s var(--ease)}
.fh-snap:hover{transform:scale(1.05)}
.fh-snap:active{transform:scale(.95)}
.fh-shots{display:flex;flex-direction:column;gap:8px}
.fh-shot{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.fh-shot.cur{border-color:rgba(201,166,107,.6);background:rgba(201,166,107,.07)}
.fh-shot .thumb{width:62px;aspect-ratio:3/4;border-radius:var(--r-sm);background:#0c0c0e;overflow:hidden;
  display:grid;place-items:center;font-size:10px;color:var(--ink-mute)}
.fh-shot .thumb img{width:100%;height:100%;object-fit:cover}
.fh-shot b{font-size:13.5px;font-weight:500;display:block}
.fh-shot span{font-size:11.5px;color:var(--ink-mute)}
.fh-shot .re{font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;
  border:1px solid var(--line);color:var(--ink-soft);border-radius:999px;padding:6px 12px;cursor:pointer}
.fh-shot .re:hover{border-color:var(--gold);color:var(--gold)}
.fh-shot{cursor:pointer}
.fh .btn[disabled]{opacity:.45;filter:grayscale(.45);cursor:not-allowed}
.fh-perm{padding:28px;text-align:center;max-width:44ch}
.fh-perm p{color:var(--ink-soft);font-size:14.5px;margin:10px 0 18px}

.fh-ref{position:absolute;top:12px;right:12px;width:74px;padding:7px;border-radius:var(--r);
  background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);z-index:2}
.fh-ref svg{width:100%;height:auto;display:block}
.fh-ref span{display:block;text-align:center;font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-top:4px}
.fh-shot .thumb svg{width:100%;height:100%;padding:6px}

/* ---------- 3 · questions, one to a screen ---------- */
.fh-qstep{justify-content:center}
.fh-qcount{flex:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.fh-qs{flex:none;max-width:760px;width:100%}
.fh-q{display:none}
.fh-q.on{display:block;animation:fhIn .38s var(--ease) both}
.fh-q .qlbl{font-size:clamp(27px,7vw,42px);font-weight:300;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:clamp(20px,3vh,34px);display:block;max-width:20ch;text-wrap:balance}
.fh-q .qhint{display:block;font-size:13px;letter-spacing:.06em;color:var(--ink-mute);margin:-18px 0 22px}
.fh-qnav{flex:none;display:flex;gap:10px;margin-top:clamp(22px,4vh,44px)}
.fh-qnav .btn{min-width:132px;justify-content:center}
.fh-opts{display:flex;flex-wrap:wrap;gap:10px}
.fh-opt{font:inherit;font-size:15px;background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:14px 24px;cursor:pointer;transition:all .25s var(--ease)}
.fh-opt:hover{border-color:rgba(201,166,107,.5);color:var(--ink)}
.fh-opt.on{background:var(--gold);border-color:var(--gold);color:var(--ink-dark)}

/* ---------- 3b · who the plan is for ---------- */
.fh-form{display:grid;gap:14px;max-width:440px}
.fh-form label{display:grid;gap:7px}
.fh-form label span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.fh-form input{font:inherit;font-size:16px;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;width:100%;
  transition:border-color .25s var(--ease)}
.fh-form input::placeholder{color:rgba(255,255,255,.34)}
.fh-form input:focus{outline:none;border-color:var(--gold)}
.fh-form input[aria-invalid]{border-color:#C9584F}
.fh-err{color:#E38079;font-size:13.5px;margin:0}
.fh-form .fh-acts{margin-top:6px;max-width:340px}

.fh-resstep{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fh-link{font:inherit;font-size:inherit;background:none;border:0;padding:0;color:var(--gold);
  text-decoration:underline;cursor:pointer}

/* ---------- 4 · working ---------- */
.fh-work{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,3vh,34px);text-align:center;width:100%;max-width:780px;margin:0 auto}

/* what the patient looks at while their own renders are made */
.fh-wait{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.fh-wgal{position:relative;flex:1;min-height:150px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#0c0c0e}
.fh-wcard{position:absolute;inset:0;margin:0;display:grid;grid-template-columns:1fr 1fr;
  opacity:0;transform:scale(1.035);transition:opacity .9s var(--ease),transform 6s linear}
.fh-wcard.on{opacity:1;transform:scale(1)}
.fh-whalf{position:relative;background-size:200% 100%;background-position:0% 50%;background-repeat:no-repeat}
.fh-whalf.a{background-position:100% 50%}
.fh-whalf i{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(10,10,10,.68);padding:4px 9px;border-radius:999px}
.fh-wcard figcaption{position:absolute;right:10px;top:10px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);background:rgba(10,10,10,.72);padding:5px 10px;
  border-radius:999px;border:1px solid rgba(201,166,107,.3)}
/* the scan line: the reading the page says it is doing */
.fh-scan{position:absolute;left:0;right:0;height:22%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(201,166,107,.22) 45%,rgba(201,166,107,.5) 50%,
    rgba(201,166,107,.22) 55%,transparent);
  animation:fhScan 2.8s var(--ease) infinite}
@keyframes fhScan{0%{transform:translateY(-120%)}100%{transform:translateY(560%)}}
.fh-wcap{flex:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin:0}
.fh-working{flex:none}
@media (prefers-reduced-motion:reduce){
  .fh-scan{animation:none;opacity:.25}
  .fh-wcard{transition:opacity .01s}
}
.fh-work h2{font-size:clamp(23px,3vw,36px);font-weight:300;letter-spacing:-.03em}
.fh-log{margin-top:clamp(14px,2.4vh,26px);display:grid;gap:clamp(8px,1.4vh,12px);text-align:left;
  max-width:340px;margin-left:auto;margin-right:auto}
.fh-log div{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:center;font-size:14px;
  color:var(--ink-mute);transition:color .4s var(--ease)}
.fh-log div.on{color:var(--ink)}
.fh-log i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;
  place-items:center;font-size:10px;color:transparent;transition:all .4s var(--ease)}
.fh-log div.on i{border-color:var(--gold);background:var(--gold);color:var(--ink-dark)}

/* ---------- 5 · result ---------- */
.fh-res{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3.5vw,52px);align-items:start}
.fh-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0c0c0e;border:1px solid var(--line);
  aspect-ratio:3/4;user-select:none;touch-action:pan-y;cursor:ew-resize}
.fh-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-slider .after{clip-path:inset(0 0 0 50%)}
.fh-div{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);z-index:3}
.fh-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:44px;height:44px;
  border-radius:50%;background:var(--gold);color:var(--ink-dark);display:grid;place-items:center;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
.fh-tag{position:absolute;z-index:3;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,10,.62);border:1px solid rgba(255,255,255,.18);padding:5px 11px;border-radius:999px;
  backdrop-filter:blur(8px)}
.fh-tag.l{top:12px;left:12px}.fh-tag.r{top:12px;right:12px}
.fh-disc{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;font-size:10.5px;line-height:1.45;color:#EDE8DF;
  background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.14);padding:8px 12px;border-radius:var(--r-sm);
  backdrop-filter:blur(8px)}
/* the result's views: cards with their own picture above the comparison, and
   a plain "next view" button under it until every view has been opened */
.fh-views{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-bottom:10px}
.fh-views[hidden]{display:none}
.fh-views button{position:relative;display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;font:inherit;
  text-align:left;background:transparent;border:1px solid var(--line);border-radius:14px;color:var(--ink);cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.fh-views img{width:46px;height:58px;object-fit:cover;border-radius:9px;flex:none;background:#262626}
.fh-views b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.fh-views small{display:block;margin-top:2px;font-size:12px;color:var(--ink-soft)}
.fh-views button:hover{border-color:var(--gold)}
.fh-views button.on{border-color:var(--gold);background:rgba(201,166,107,.12);box-shadow:inset 0 0 0 1px var(--gold)}
.fh-views button.new::after{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 0 rgba(201,166,107,.6);animation:fhPing 1.8s var(--ease) infinite}
@keyframes fhPing{70%{box-shadow:0 0 0 8px rgba(201,166,107,0)}100%{box-shadow:0 0 0 0 rgba(201,166,107,0)}}
.fh-nextview{display:flex;width:100%;justify-content:center;margin-top:10px;padding:14px 16px;font:inherit;font-size:13px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dark);background:var(--gold);
  border:0;border-radius:999px;cursor:pointer}
.fh-nextview:hover{background:var(--gold-hi)}
.fh-nextview[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.fh-views button.new::after{animation:none}}
.fh-facts2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.fh-facts2 div{background:var(--bg);padding:18px 20px}
.fh-facts2 .v{font-family:var(--font-disp);font-size:clamp(22px,2.6vw,30px);font-weight:300;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.fh-facts2 .l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px}
.fh-code{margin-top:18px;display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px dashed var(--line);
  border-radius:var(--r);font-size:13px;color:var(--ink-soft)}
.fh-code b{font-family:ui-monospace,Menlo,monospace;font-size:15px;color:var(--gold);letter-spacing:.06em}
.fh-acts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.fh-acts .btn{justify-content:center}
.fh-msg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.fh-msg a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;color:var(--ink-soft);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;transition:all .25s var(--ease)}
.fh-msg a:hover{border-color:var(--gold);color:var(--gold)}
.fh-msg svg{width:18px;height:18px}
.fh-like{margin-top:44px}
.fh-like h3{font-size:clamp(20px,2.4vw,28px);font-weight:300;letter-spacing:-.03em;margin-bottom:6px}
.fh-like p{color:var(--ink-mute);font-size:14px;margin-bottom:18px}
.fh-like-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.fh-demo{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(201,166,107,.4);border-radius:999px;padding:6px 13px;margin-bottom:20px}
.fh-demo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.fh-demo{max-width:100%;flex-wrap:wrap;text-transform:none;letter-spacing:.02em;font-size:12.5px;
  line-height:1.5;padding:9px 15px;text-align:left}

@media(max-width:900px){
  .fh-hero,.fh-cap,.fh-res{grid-template-columns:1fr}
  .fh-hero{gap:22px}
  .fh-hero .fh-say{display:contents}
  .fh-hero .eyebrow{order:1}
  .fh-hero h1{order:2;font-size:clamp(38px,11vw,58px)}
  .fh-preview{order:3;margin-top:4px}
  .fh-steps3{order:4;margin-top:6px;gap:7px}
  .fh-steps3 div{padding:8px 13px 8px 8px}
  .fh-steps3 span{font-size:12.5px}
  .fh-go{order:5;margin-top:10px}
  .fh-go .btn{flex:1;justify-content:center;min-width:140px}
  .fh-hero .fh-note{order:6;margin-top:6px}
  /* Capture is a camera screen, not a page: one column the height of the
     viewport, the frame taking whatever is left, the action row docked. */
  .fh-capstep .fh-head{margin-bottom:12px}
  .fh-capstep .fh-head p{margin-top:6px;font-size:13px}
  .fh-capstep .fh-cap{display:flex;flex-direction:column;align-items:stretch;flex:1 1 auto;min-height:0;gap:10px}
  .fh-capstep .fh-cap>div{display:contents}

  .fh-stage{order:1;flex:1 1 auto;aspect-ratio:auto;max-height:none;min-height:190px}
  .fh-perm{padding:18px 16px}
  .fh-perm p{font-size:13.5px;margin:8px 0 16px}
  .fh-shutter{order:2;margin-top:0;flex:none}
  .fh-shots{order:3;flex:none;display:flex;flex-direction:row;gap:6px;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad) * -1);padding:1px var(--pad);scroll-snap-type:x proximity}
  .fh-shots::-webkit-scrollbar{display:none}
  .fh-shot{flex:0 0 auto;width:66px;grid-template-columns:1fr;gap:5px;padding:5px;text-align:center;
    scroll-snap-align:start}
  .fh-shot .thumb{width:100%;aspect-ratio:1;margin:0 auto}
  .fh-shot b{font-size:10.5px;letter-spacing:.01em;line-height:1.2}
  .fh-shot>span>span,.fh-shot .re{display:none}   /* the hint lives in the frame */

  /* the primary action can never sit below the fold */
  .fh-capbar{order:4;flex:none;
    display:flex;align-items:center;gap:10px;
    margin:0 calc(var(--pad) * -1);padding:10px var(--pad) calc(10px + var(--safe-bottom, 0px));
    background:rgba(10,10,10,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line)}
  .fh-capbar #fhCapCount{margin:0;flex:none;font-size:11px;white-space:nowrap}
  .fh-capbar .fh-acts{flex:1;flex-direction:row-reverse;margin-top:0;gap:8px}
  .fh-capbar .fh-acts .btn{padding:15px 18px;font-size:13px}
  .fh-capbar #fhCapNext{flex:1}
  .fh-capbar #fhCapBack{flex:none;padding:15px 14px}

  .fh-head p{font-size:14px}
  .fh-head h2{font-size:clamp(24px,7vw,34px)}
  /* the flow owns the screen while photos are being taken: the site's
     Call/Book bar competes with (and used to cover) the capture controls */
  .fh-ref{width:58px;top:8px;right:8px}
  .fh-facts2{grid-template-columns:1fr 1fr}
  .fh-like-row{grid-template-columns:1fr}
}

/* Desktop: the frame list scrolls so the action row stays on screen on a
   short laptop window too. */
@media(min-width:901px){
  .fh-capstep .fh-cap{flex:1 1 auto;min-height:0;align-items:stretch}
  .fh-capstep .fh-cap>div:last-child{display:flex;flex-direction:column;min-height:0}
  .fh-capstep .fh-cap>div:first-child{align-self:start}
  .fh-capstep .fh-shots{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .fh-capstep .fh-capbar{flex:none}
  .fh-capstep .fh-acts{flex-direction:row-reverse;margin-top:12px}
  .fh-capstep .fh-acts #fhCapNext{flex:1}
  .fh-capstep .fh-acts #fhCapBack{flex:none}
}

/* Short phones (SE, mini, and anything in landscape): give the frame the
   height back by dropping the copy the guide overlay already says. */
@media(max-width:900px) and (max-height:760px){
  .fh-capstep .fh-head{margin-bottom:8px}
  .fh-capstep .fh-head h2{font-size:22px}
  .fh-capstep .fh-head p{display:none}
  .fh-snap{width:54px;height:54px;border-width:3px}
  .fh-shot{width:58px}
  .fh-capbar .fh-acts .btn{padding:13px 16px}
}
@media(max-height:480px){
  .fh-stage{min-height:120px}
}

/* ============================================================
   The one-pager the patient brings to the appointment.
   Rendered in the page (hidden), printed via the browser's
   "Save as PDF" so the photos never leave the device.
   ============================================================ */
.fh-plan{display:none}
.fh-plan *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

@media print{
  @page{size:Letter;margin:11mm}
  body>*:not(.fh-plan){display:none!important}
  .fh-plan{display:block!important;position:static;color:#171512;font-family:var(--font-sans);
    font-size:9pt;line-height:1.4;background:#fff}
  .fh-plan .pl-top{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1.5pt solid #171512;padding-bottom:5pt}
  .fh-plan .pl-brand{font-size:12pt;letter-spacing:.06em;font-weight:600}
  .fh-plan .pl-ref{font-family:ui-monospace,Menlo,monospace;font-size:11pt;color:#8A5D27;font-weight:600}
  .fh-plan h1{font-size:19pt;font-weight:400;letter-spacing:-.02em;margin:9pt 0 1pt;color:#171512}
  .fh-plan .pl-sub{color:#6B6357;font-size:8.5pt;margin-bottom:9pt}
  .fh-plan .pl-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:5pt}
  .fh-plan .pl-pairs{grid-template-columns:repeat(4,1fr)}
  .fh-plan .pl-one{grid-template-columns:34% 1fr;align-items:end;margin-bottom:9pt}
  .fh-plan .pl-one img{aspect-ratio:2/3}
  .fh-plan .pl-strip figure{margin:0;position:relative}
  .fh-plan .pl-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:.5pt solid #D9D2C6}
  .fh-plan .pl-strip figcaption{position:absolute;left:4pt;bottom:4pt;font-size:6.5pt;letter-spacing:.12em;
    text-transform:uppercase;color:#fff;background:rgba(0,0,0,.62);padding:2pt 5pt}
  .fh-plan .pl-strip .is-r figcaption{background:#8A5D27}
  .fh-plan .pl-disc{font-size:7pt;color:#6B6357;margin:4pt 0 9pt;font-style:italic}
  .fh-plan .pl-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:5pt;margin-bottom:9pt}
  .fh-plan .pl-facts div{border:.5pt solid #D9D2C6;padding:5pt 6pt}
  .fh-plan .pl-facts b{display:block;font-size:12pt;font-weight:500;letter-spacing:-.01em}
  .fh-plan .pl-facts span{font-size:6.5pt;letter-spacing:.14em;text-transform:uppercase;color:#6B6357}
  .fh-plan .pl-blk{border-top:.5pt solid #D9D2C6;padding-top:6pt;margin-bottom:7pt}
  .fh-plan .pl-blk b{display:block;font-size:7pt;letter-spacing:.16em;text-transform:uppercase;
    color:#8A5D27;margin-bottom:3pt}
  .fh-plan .pl-blk ol{margin:0;padding-left:12pt}
  .fh-plan .pl-blk li{margin:1.5pt 0}
  .fh-plan .pl-foot{display:flex;justify-content:space-between;align-items:flex-end;
    border-top:1.5pt solid #171512;padding-top:6pt;margin-top:8pt;font-size:7.5pt;color:#6B6357}
  .fh-plan .pl-qr{width:52pt;height:52pt}
  .fh-plan .pl-qr img,.fh-plan .pl-qr canvas{width:100%;height:100%}
}

/* ---------- the confirm gate: no photo counts until the patient says so ---------- */
.fh-stage #fhFreeze{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.fh-confirm{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}
.fh-confirm .btn{min-width:150px;justify-content:center}
@media(max-width:900px){
  .fh-confirm{margin-top:0;flex:none;order:2;gap:8px}
  .fh-confirm .btn{flex:1;min-width:0;padding:15px 12px;font-size:13px}
}

/* ---------- real cases, wherever the flow shows proof ---------- */
.fh-pvpair{position:relative;display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:0}
.fh-pvhalf{position:relative;min-height:120px;background-size:200% 100%;background-position:0% 50%;
  background-repeat:no-repeat}
.fh-pvhalf.a{background-position:100% 50%}
.fh-pvhalf i{position:absolute;left:6px;top:6px;font-style:normal;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(10,10,10,.66);padding:3px 7px;border-radius:999px}
.fh-pvhalf.a i{background:var(--gold);color:var(--ink-dark)}
.fh-preview .fh-pv b{bottom:7px;left:7px}
.fh-res .ba-slider{border-radius:var(--r-lg)}
.fh-res .ba-case-num{display:none}

/* the opening proof: one real case, as big as the screen allows */
.fh-preview .ba-slider{border-radius:var(--r-lg);max-height:100%}
.fh-preview .ba-case-num{display:none}
.fh-preview .ba-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:9px;font-size:12px;color:var(--ink-mute)}
.fh-preview .ba-meta strong{font-weight:500;color:var(--ink-soft);font-size:12.5px}

/* upload sits under the shutter: a choice, not a fallback */
.fh-shutter{flex-direction:column;gap:9px}
.fh-up-inline{font-size:12.5px;letter-spacing:.02em}
@media(max-width:900px){.fh-shutter{gap:7px}.fh-up-inline{font-size:12px}}

/* ---------- today, 6, 12 — side by side, nothing to operate ---------- */
.fh-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fh-three figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:#0c0c0e}
.fh-three img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.fh-three figcaption{position:absolute;left:7px;bottom:7px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.68);
  border:1px solid rgba(255,255,255,.16);padding:4px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.fh-three figure.sim{border-color:rgba(201,166,107,.55)}
.fh-three figure.sim figcaption{background:var(--gold);color:var(--ink-dark);border-color:transparent}
#fhSimNote{margin-top:10px}


/* ============================================================
   The rebuilt flow: one stage panel with clear states, a list of
   angles you can tap, and a result that leads with your own head.
   ============================================================ */
.fh-lede{margin:18px 0 0;max-width:44ch;color:var(--ink-soft);font-size:clamp(15px,1.3vw,18px);line-height:1.45}
.fh-hero .fh-go{margin-top:28px}
.fh-preview{display:flex;flex-direction:column;gap:10px;margin:0;height:auto;max-height:none}
.fh-preview .ba2{aspect-ratio:1;max-height:min(62vh,640px);width:100%}
.fh-preview figcaption{font-size:12.5px;color:var(--ink-mute)}

/* the stage */
.fh-stage{position:relative}
.fh-stage #fhView{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.fh-gtxt{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;text-align:center;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.68);
  border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:var(--r);backdrop-filter:blur(8px);line-height:1.35}
.fh-empty{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px 22px 64px;text-align:center}
.fh-empty b{font-size:clamp(18px,2vw,22px);font-weight:500;color:var(--ink)}
.fh-empty p{margin:0;max-width:34ch;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.fh-empty-acts{display:flex;flex-direction:column;gap:9px;margin-top:10px;width:min(100%,260px)}
.fh-empty-acts .btn{justify-content:center}
.fh-count{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font-size:clamp(90px,22vw,180px);
  font-weight:300;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6);background:rgba(10,10,10,.18)}
.fh-tools{position:absolute;top:10px;left:10px;z-index:3;display:flex;gap:6px}
.fh-tool{display:flex;align-items:center;gap:6px;padding:7px 11px 7px 8px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:11.5px;letter-spacing:.04em;color:#fff;background:rgba(10,10,10,.62);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.fh-tool svg{width:17px;height:17px}
.fh-tool[aria-pressed="true"]{border-color:rgba(201,166,107,.8);color:var(--gold-hi)}
.fh-warn{position:absolute;left:12px;right:12px;bottom:58px;z-index:3;margin:0;padding:9px 12px;border-radius:var(--r);
  font-size:12.5px;line-height:1.4;color:#1a1208;background:#E9C27A}

/* the angles, as buttons */
.fh-shot{font:inherit;color:inherit;text-align:left;width:100%;grid-template-columns:62px 1fr;position:relative}
.fh-shot-t b{font-size:13.5px;font-weight:500;display:block}
.fh-shot-t span{font-size:11.5px;color:var(--ink-mute)}
.fh-shot.done::after{content:"";position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.5' fill='none' stroke='%23171512' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.fh-shot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the result */
.fh-res{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fh-res-pic .ba2{aspect-ratio:2/3;max-height:72vh;width:100%;margin:0 auto}
.fh-res-pic .ba2-lab{background:rgba(10,10,10,.66);color:#fff}
.fh-res-pic .ba2-lab.a{background:var(--gold);color:var(--ink-dark)}
.fh-today{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.fh-today img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.fh-today figcaption{position:absolute;left:10px;top:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,10,.66);padding:5px 10px;border-radius:999px}
.fh-res-info h2{font-size:clamp(28px,3.2vw,44px);font-weight:300;letter-spacing:-.035em;line-height:1.05}
.fh-res-lede{margin:12px 0 0;color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.fh-facts{margin:22px 0 0;border-top:1px solid var(--line)}
.fh-facts div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.fh-facts dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.fh-facts dd{margin:0;text-align:right;font-size:15px;color:var(--ink)}
#fhStageV,#fhGrafts{color:var(--gold-hi);font-size:17px}
.fh-advice{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);border:1px solid rgba(201,166,107,.4);
  font-size:14px;line-height:1.5;color:var(--ink-soft)}
.fh-advice a{color:var(--gold)}
.fh-sent{margin:12px 0 0;font-size:13.5px;color:var(--ink-soft)}
.fh-sent a{color:var(--gold)}
.fh-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fh-case{margin:0}
.fh-case .ba-slider{aspect-ratio:4/3;border-radius:var(--r)}
.fh-case figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12.5px;color:var(--ink-mute)}
.fh-case figcaption b{font-weight:500;color:var(--ink-soft)}

/* when it fails, it says so */
.fh-fail{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto;text-align:left}
.fh-fail h2{font-size:clamp(26px,3vw,40px);font-weight:300;letter-spacing:-.03em}
.fh-fail>p{margin:12px 0 0;color:var(--ink-soft)}
.fh-fail .fh-acts{max-width:360px}

@media(max-width:900px){
  .fh-res{grid-template-columns:1fr}
  .fh-res-pic .ba2{max-height:60vh}
  .fh-cases{grid-template-columns:1fr}
  .fh-tool span{display:none}
  .fh-tool{padding:8px}
  .fh-shot{grid-template-columns:1fr}
  .fh-shot.done::after{top:4px;right:4px;width:14px;height:14px}
  .fh-shot-t span{display:none}
  .fh-preview{order:3}
  .fh-lede{order:3;font-size:15px}
  .fh-hero .fh-preview{order:4}
  .fh-preview .ba2{max-height:46vh}
}
@media(max-width:900px){
  /* the opening screen reads top to bottom and may scroll; nothing overlaps */
  .fh-step[data-step="start"]{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .fh-step[data-step="start"] .fh-hero{flex:none;display:flex;flex-direction:column;gap:16px;height:auto}
  .fh-step[data-step="start"] .fh-preview{max-height:none}
  .fh-preview .ba2{max-height:42vh;aspect-ratio:auto;height:42vh}
  .fh-go{flex-direction:column;align-items:stretch;gap:8px}
  .fh-go .btn{width:100%;min-width:0}
}
@media(max-width:900px){
  .fh-step[data-step="start"] .eyebrow{order:1}
  .fh-step[data-step="start"] h1{order:2}
  .fh-step[data-step="start"] .fh-lede{order:3;margin-top:0}
  .fh-step[data-step="start"] .fh-go{order:4;margin-top:4px}
  .fh-step[data-step="start"] .fh-preview{order:5;margin-top:8px}
  .fh-step[data-step="start"] .fh-note{order:6}
  .fh-preview .ba2{height:38vh}
}
@media(max-width:900px){.fh-step[data-step="start"] .fh-hero{align-items:stretch}}
@media(max-width:900px){
  .fh-shots .fh-shot{width:66px;flex:0 0 66px;padding:5px;gap:5px;text-align:center}
  .fh-shots .fh-shot .thumb{width:100%;aspect-ratio:1}
  .fh-shot-t b{font-size:10.5px;line-height:1.2}
  .fh-stage{min-height:300px}
  .fh-empty{padding:18px 16px 18px}
}

@media(min-width:901px){.fh-res-info{padding-right:14px}}

/* The live camera and the photo just taken sit in the same 2:3 frame the photo
   is saved at, centred in the stage, so what the patient sees is exactly what is
   kept. The stage itself can be any shape (on a phone it takes the height left
   over); filling it with the camera showed more than the saved photo, and the
   photo then looked zoomed in. */
.fh-stage{container-type:size}
.fh-stage video,.fh-stage #fhView,.fh-guide{position:absolute;inset:0;margin:auto;
  width:min(100cqw,66.667cqh);height:min(100cqh,150cqw)}

/* light theme: gold as text uses the deeper shade on white */
.fh-x:hover{color:var(--accent-ink)}
.fh-pv{background:var(--bg-2)}

/* ---------- the short scan ----------
   Three questions on one screen, a result that leads with the picture and
   three facts, and the rest folded under "See full details". Colours come
   from the site's theme, so the scan matches the page it opens over. */
.fh-qs.all{display:grid;gap:clamp(18px,3vh,28px)}
.fh-qs.all .fh-q{display:block;animation:none}
.fh-qs.all .fh-q .qlbl{display:block;font-size:clamp(17px,2vw,20px);font-weight:600;letter-spacing:-.01em;margin:0 0 12px}
.fh-qstep{justify-content:flex-start}
.fh-qstep .fh-head{margin-bottom:clamp(18px,3vh,30px)}
.fh-opt.on{background:var(--accent,var(--gold));border-color:var(--accent,var(--gold));color:var(--ink)}
.fh-opt{border-radius:999px;padding:12px 18px}
.fh-form label span i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-mute)}
.fh-more{margin-top:18px;border-top:1px solid var(--line)}
.fh-more summary{list-style:none;cursor:pointer;padding:14px 0;font-size:14.5px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center}
.fh-more summary::-webkit-details-marker{display:none}
.fh-more summary::after{content:"+";font-size:20px;font-weight:400;color:var(--ink-mute);transition:transform .25s var(--ease)}
.fh-more[open] summary::after{transform:rotate(45deg)}
.fh-more .fh-facts{margin-top:0}
.fh-msg button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:1px solid var(--line);
  border-radius:var(--r);background:transparent;color:var(--ink-soft);font:inherit;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:all .25s var(--ease)}
.fh-msg a:hover,.fh-msg button:hover{border-color:var(--accent-deep,var(--gold));color:var(--ink)}
.fh-code b,.fh-sent a{color:var(--accent-ink,var(--gold))}
.fh-stage{background:var(--bg-2)}
.fh-shot .thumb{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}
.fh-shot.cur{border-color:var(--accent-deep,var(--gold));background:color-mix(in srgb,var(--accent,var(--gold)) 22%,var(--bg))}
@media(max-width:900px){
  .fh-capbar{background:color-mix(in srgb,var(--bg) 92%,transparent)}
}
.fh-hero h1,.fh-head h2,.fh-work h2,.fh-like h3,.fh-res-info h2,.fh-fail h2{font-weight:600;letter-spacing:-.035em}
.fh-q .qlbl,.fh-facts2 .v,.fh-count{font-weight:600}
.fh-rail span{height:3px;border-radius:3px}
.fh-rail span::after{background:var(--ink)}
.fh-form input::placeholder{color:var(--ink-mute);opacity:1}