/* ─────────────────────────────────────────────────────────────────────────────
   MOHR, /photo-screen
   The Photo Pre-Screen entry page. Loaded after assets/mohr.css and
   assets/faq.css; every token, type role, button and FAQ style comes from
   those two files. Nothing here redefines the brand.

   What this file adds, and only this:
     - the two-line hero and its reassurance/disclaimer stack
     - the three photo framing placeholders (line diagrams, 4:5)
     - the three-step "simpler first step" sequence
     - the can / cannot two-column scope table
     - the History → Evaluation → Imaging → Plan → Measure rail
     - the full-assessment next-step card
     - the sticky mobile action bar, matching /assessment's behaviour
   ───────────────────────────────────────────────────────────────────────────── */

/* ── hero ─────────────────────────────────────────────────
   One column at every width. The page has a single job above the fold on a
   phone — headline, one sentence, one button — so nothing sits beside it. */
.ps-hero{padding-top:clamp(2.2rem,6vh,4.2rem);padding-bottom:clamp(2.6rem,6vh,4.2rem);}
.ps-hero__copy{max-width:38rem;}
.ps-hero h1{font-size:clamp(2.5rem,6.6vw,4.6rem);letter-spacing:-.028em;}
/* The second line is the one that carries the offer, so it is the one that is
   set in evergreen at a heavier weight. Colour and weight, never a slant. */
.ps-hero h1 .lead-in{color:var(--slate);display:block;font-weight:300;
  font-size:clamp(1.7rem,4.2vw,2.9rem);letter-spacing:-.018em;margin-bottom:.28em;line-height:1.12;}
.ps-hero h1 .lead-out{color:var(--evergreen);font-weight:500;display:block;}
.ps-hero__lede{margin:1.5rem 0 2rem;max-width:34rem;}

.ps-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.95rem;}
.ps-cta .btn--primary{width:100%;justify-content:center;}
@media(min-width:560px){.ps-cta .btn--primary{width:auto;}}

/* the reassurance run under the button: three words, brass-dotted, one line */
.ps-assure{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .85rem;
  font-family:var(--accent);font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--slate);}
.ps-assure span{display:inline-flex;align-items:center;gap:.55em;}
.ps-assure span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass);flex:0 0 auto;}

.ps-secondary{font-size:1rem;color:var(--evergreen);font-weight:500;text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--brass);transition:box-shadow .3s var(--ease);
  padding-block:.35rem;}
.ps-secondary:hover{box-shadow:inset 0 -2px 0 var(--brass);}


/* [WIRE: SMS HANDOFF] The carrier-and-content disclosure that sits directly
   under every Pre-Screen CTA. Deliberately quiet — one step down from
   .ps-assure — because it is a disclosure, not a selling point. It is part of
   the CTA block, so it inherits .ps-cta's flex column and needs no margin of
   its own beyond a tightened top. */
.ps-smsnote{margin:-.15rem 0 0;max-width:32rem;font-size:.78rem;line-height:1.55;color:var(--slate);}

/* ── photo framing diagrams ───────────────────────────────
   Three line drawings, not photographs. Each is a 4:5 viewfinder with brass
   registration marks and an abstract head outline showing the angle asked
   for. No scalp, no severity, nothing anyone would be embarrassed to be
   shown on a public page. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,2vw,1.4rem);
  margin-top:clamp(1.6rem,3vw,2.2rem);max-width:46rem;}
.shot{margin:0;min-width:0;}
.shot__frame{
  position:relative;width:100%;max-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);}
.shot__cap{
  margin:.75rem 0 0;font-family:var(--accent);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);line-height:1.45;
}
@media(max-width:430px){
  .shots{gap:.5rem;}
  .shot__cap{font-size:.6rem;letter-spacing:.09em;}
}

/* ── the three steps ──────────────────────────────────────
   Numbered 01/02/03 in the display serif, the same shape as the /assessment
   itinerary, stacked on a phone and in a row from tablet up. */
.psteps{display:grid;grid-template-columns:1fr;gap:clamp(2rem,3.6vw,2.8rem);
  margin-top:clamp(2.4rem,4.5vw,3.4rem);}
@media(min-width:820px){.psteps{grid-template-columns:repeat(3,1fr);align-items:start;}}
.pstep{padding-top:1.5rem;border-top:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);}
.pstep__n{font-family:var(--accent);font-size:.74rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:.6em;margin-bottom:.9rem;}
.pstep__n::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:0 0 auto;}
.pstep h3{font-size:clamp(1.25rem,2vw,1.5rem);color:var(--evergreen);margin-bottom:.55rem;letter-spacing:-.01em;}
.pstep p{margin:0;font-size:1rem;line-height:1.6;color:var(--slate);}
.pstep__note{
  margin-top:1.1rem;padding-left:1.1rem;border-left:2px solid var(--brass);
  font-size:.92rem;line-height:1.6;color:var(--slate);
}
/* Step 01 carries the three framing diagrams, so it takes the full width and
   steps 02 and 03 sit side by side beneath it. A three-across row would squeeze
   the diagrams to thumbnails at exactly the width they stop being readable. */
.psteps--wide{grid-template-columns:1fr;}
@media(min-width:820px){
  .psteps{grid-template-columns:1fr 1fr;}
  .psteps--wide{grid-template-columns:1fr 1fr;}
  .pstep--full{grid-column:1/-1;}
  .pstep--full .shots{max-width:44rem;}
}

/* ── scope: what it can / cannot do ───────────────────────
   Two columns, hairline-separated, deliberately symmetrical: the limits are
   given exactly the same weight on the page as the benefits. */
.scope{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.4rem);
  margin-top:clamp(2.4rem,4.5vw,3.4rem);}
@media(min-width:820px){.scope{grid-template-columns:1fr 1fr;}}
.scope__col{padding-top:1.5rem;border-top:2px solid color-mix(in srgb,var(--ink) 16%,transparent);}
.scope__col--can{border-top-color:var(--brass);}
.scope__col h3{font-size:clamp(1.3rem,2.2vw,1.65rem);color:var(--evergreen);margin-bottom:1.2rem;letter-spacing:-.01em;}
.scope__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.85rem;}
.scope__list li{display:flex;gap:.8em;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--ink);}
.scope__list li::before{content:"";flex:0 0 auto;margin-top:.5em;width:7px;height:7px;border-radius:50%;background:var(--brass);}
/* the "does not replace" column reads as a set of limits, so its markers are a
   neutral rule rather than the brass disc the site uses for inclusions */
.scope__col--cannot .scope__list li{color:var(--slate);}
.scope__col--cannot .scope__list li::before{
  border-radius:0;width:11px;height:1.5px;margin-top:.85em;
  background:color-mix(in srgb,var(--ink) 34%,transparent);
}
.scope__close{
  margin:clamp(2.2rem,4vw,3rem) 0 0;max-width:44rem;
  font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.45;letter-spacing:-.01em;color:var(--evergreen);
}

/* ── why MOHR: the measurement rail ───────────────────────
   Five stages on a hairline, brass pips at each. Wraps to two rows on a
   narrow phone rather than scrolling sideways. */
.seq{display:flex;flex-wrap:wrap;gap:1.4rem 0;margin-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);padding-top:2rem;}
.seq__stage{flex:1 1 6.5rem;position:relative;padding-right:1rem;}
.seq__pip{display:block;width:9px;height:9px;border-radius:50%;background:var(--brass);margin-bottom:.85rem;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 18%,transparent);}
.seq__stage::after{
  content:"";position:absolute;left:9px;top:4px;right:1rem;height:1px;
  background:color-mix(in srgb,var(--brass) 40%,transparent);
}
.seq__stage:last-child::after{display:none;}
.seq__name{font-family:var(--accent);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--evergreen);display:block;line-height:1.4;}

/* ── next step: the full assessment ───────────────────────
   The evergreen panel the site uses whenever it states the paid offer. */
.nextstep{
  background:var(--evergreen);color:var(--porcelain);border-radius:var(--radius);
  padding:clamp(1.9rem,4vw,3.2rem);display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:center;
}
@media(min-width:880px){.nextstep{grid-template-columns:1.15fr .85fr;}}
.nextstep h2{color:var(--porcelain);font-size:clamp(1.9rem,4vw,3rem);}
.nextstep p{color:color-mix(in srgb,var(--porcelain) 88%,transparent);margin:1.2rem 0 0;max-width:34rem;font-size:1.05rem;}
.nextstep__list{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:.7rem;}
.nextstep__list li{display:flex;gap:.7em;align-items:flex-start;font-size:.98rem;line-height:1.45;
  color:color-mix(in srgb,var(--porcelain) 92%,transparent);}
.nextstep__list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);margin-top:.55em;flex:0 0 auto;}
.nextstep__side{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
.nextstep__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;}
.nextstep__price b{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,4.5vw,3.2rem);
  letter-spacing:-.02em;line-height:1;color:var(--porcelain);}
.nextstep__price span{font-size:.92rem;color:color-mix(in srgb,var(--porcelain) 80%,transparent);}
.nextstep__note{margin:0;font-size:.86rem;line-height:1.6;max-width:24rem;
  color:color-mix(in srgb,var(--porcelain) 76%,transparent);}
.nextstep .btn{width:100%;justify-content:center;}
@media(min-width:560px){.nextstep .btn{width:auto;}}

/* ── closing CTA ──────────────────────────────────────────*/
.close__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
@media(min-width:900px){.close__grid{grid-template-columns:1.05fr .95fr;}}
.close__lede{margin-top:1.3rem;}
.close__box{
  background:var(--porcelain);border-radius:var(--radius);
  box-shadow:0 30px 60px -40px color-mix(in srgb,var(--evergreen) 60%,transparent),
             inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);
  padding:clamp(1.7rem,3.4vw,2.4rem);
}
.close__box h3{font-family:var(--display);font-size:1.4rem;color:var(--evergreen);line-height:1.1;margin-bottom:1rem;}
.close__box .btn--primary{width:100%;justify-content:center;}
.close__box .ps-cta{margin-top:1.2rem;}

/* ── sticky mobile action bar ─────────────────────────────
   Same component and same behaviour as /assessment: it appears once the hero
   CTA has scrolled away and hides again over the closing CTA and the footer,
   so it never sits on top of the button it duplicates. */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem clamp(1rem,4vw,1.5rem);
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--porcelain) 94%,transparent);
  backdrop-filter:saturate(1.1) blur(10px);
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  transform:translateY(110%);transition:transform .4s var(--ease);
}
.actionbar.on{transform:none;}
.actionbar__what{font-size:.82rem;line-height:1.35;color:var(--slate);}
.actionbar__what b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--evergreen);letter-spacing:-.02em;}
.actionbar .btn{padding:.85rem 1.2rem;font-size:.9rem;white-space:nowrap;}
@media(max-width:400px){
  .actionbar{gap:.6rem;padding-inline:.9rem;}
  .actionbar__what{font-size:.72rem;}
  .actionbar__what b{font-size:1rem;}
  .actionbar .btn{padding:.78rem .95rem;font-size:.85rem;}
}
@media(min-width:860px){.actionbar{display:none;}}
/* room for the bar so the footer disclaimer is never trapped under it */
@media(max-width:859px){body{padding-bottom:5.5rem;}}

@media (prefers-reduced-motion:reduce){
  .actionbar{transition:none;}
}

/* ── [WIRE: SMS HANDOFF] desktop fallback dialog ──────────
   A desktop browser often has no handler registered for sms:, so the CTA
   there opens this instead of navigating into nothing. It is a native
   <dialog>: the modal focus trap, the Escape key and the inert background all
   come from the platform rather than from script.

   Visually it is the .close__box card — same porcelain surface, same radius,
   same shadow, same display face — so nothing new is introduced to the page's
   vocabulary. It is never shown on mobile; the CTA navigates there. */
.ps-modal{
  border:0;padding:0;max-width:min(30rem,calc(100vw - 2rem));width:100%;
  background:var(--porcelain);color:var(--ink);border-radius:var(--radius);
  box-shadow:0 40px 80px -40px color-mix(in srgb,var(--evergreen) 70%,transparent),
             inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);
}
.ps-modal::backdrop{background:color-mix(in srgb,var(--evergreen) 55%,transparent);backdrop-filter:blur(3px);}
.ps-modal__in{padding:clamp(1.7rem,3.4vw,2.4rem);}
.ps-modal h2{
  font-family:var(--display);font-size:1.5rem;line-height:1.12;letter-spacing:-.02em;
  color:var(--evergreen);margin:0 0 .85rem;
}
.ps-modal__lede{margin:0;font-size:1rem;line-height:1.6;color:var(--slate);}
.ps-modal__lede a{color:var(--evergreen);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--brass);transition:box-shadow .3s var(--ease);white-space:nowrap;}
.ps-modal__lede a:hover{box-shadow:inset 0 -2px 0 var(--brass);}
.ps-modal__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0 0;}
.ps-modal__acts .btn{flex:1 1 12rem;justify-content:center;}
.ps-modal .ps-smsnote{margin:1.25rem 0 0;}

/* Close affordance. Escape and a backdrop click both work too; this is the
   visible one, kept off the text column so it never crowds the heading. */
.ps-modal__x{
  position:absolute;top:.75rem;right:.75rem;width:2.3rem;height:2.3rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-family:var(--body);font-size:1.35rem;line-height:1;color:var(--slate);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.ps-modal__x:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--evergreen);}
.ps-modal__wrap{position:relative;}

@media (prefers-reduced-motion:no-preference){
  .ps-modal[open]{animation:psModalIn .34s var(--ease) both;}
  @keyframes psModalIn{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
}

/* ── page-scoped header ───────────────────────────────────
   /photo-screen receives paid traffic, so its header carries one address and
   one secondary action and nothing else to click away on. The markup for it
   lives in photo-screen.html, so nothing here reaches the sitewide bar on any
   other page. The brand block stacks the address under the wordmark on a
   phone and sets it inline from 620px, which keeps the row on one line at
   every width down to 320px without shrinking the logo. */
.ps-nav__brandgroup{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;min-width:0;}
.ps-nav__addr{
  font-family:var(--accent);font-style:normal;font-size:.62rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--slate);line-height:1.2;white-space:nowrap;
}
/* The header action is the same evergreen pill as the hero, the $299 panel and
   the sticky bar, so the one thing there is to book looks the same wherever it
   appears and goes straight to the scheduler. Colour and shape come from the
   sitewide .btn .btn--primary .btn--sm; this only tightens the pill on a
   phone, where the full-size padding plus "Book Assessment" stops fitting
   beside the wordmark at 360px, then hands the sitewide sizing back at 620px. */
.ps-nav__book{
  flex:0 0 auto;white-space:nowrap;
  padding:.58rem .9rem;font-size:.8rem;gap:0;
}
/* The brass dot is 7px plus its gap, which is the difference between fitting
   beside the stacked wordmark and address at 320px and not. It comes back with
   the full-size pill at 620px. */
.ps-nav__book .btn__dot{display:none;}
@media(min-width:620px){
  .ps-nav__brandgroup{flex-direction:row;align-items:center;gap:1.1rem;}
  .ps-nav__addr{font-size:.7rem;letter-spacing:.16em;}
  .ps-nav__book{padding:.7rem 1.15rem;font-size:.9rem;gap:.7em;}
  .ps-nav__book .btn__dot{display:block;}
}

/* ── hero microcopy ───────────────────────────────────────
   Two quiet lines under the button, one step apart: the effort/So-what line
   directly beneath the CTA, then the carrier disclosure (.ps-smsnote, already
   defined above) under the trust run. Neither is a selling point, so neither
   competes with the button. */
.ps-ctanote{
  margin:-.2rem 0 0;font-family:var(--accent);font-size:.78rem;font-weight:500;
  letter-spacing:.03em;line-height:1.5;color:var(--slate);max-width:32rem;
}

/* ── who reviews your submission ──────────────────────────
   No provider or clinical-team photograph exists in /assets (see the note at
   the head of assessment.html), so this is a typographic block with the
   practice card rather than a face — a stock portrait on a page about a
   clinical review would imply a person who does not exist. */
.reviewer{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.4rem);
  margin-top:clamp(2rem,3.6vw,2.8rem);align-items:start;}
@media(min-width:880px){.reviewer{grid-template-columns:1.1fr .9fr;gap:clamp(2.4rem,4vw,4rem);}}
.reviewer__body{margin:0;font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.62;color:var(--slate);max-width:36rem;}
.reviewer__card{
  background:var(--porcelain);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2rem);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent);
  display:flex;flex-direction:column;gap:.45rem;align-items:flex-start;
}
.panel-sage .reviewer__card{background:color-mix(in srgb,var(--porcelain) 70%,var(--sage));}
.reviewer__name{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,1.75rem);
  color:var(--evergreen);line-height:1.1;letter-spacing:-.015em;}
.reviewer__sub{font-family:var(--accent);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);line-height:1.4;}
.reviewer__addr{font-style:normal;font-size:.95rem;color:var(--slate);margin-top:.35rem;}