/* ═══ scan.css — the routine matcher. Loads after yaara.css + shell.css, so
   every colour, font and easing here is one of theirs.

   The law it is written to (build/DESIGN_LANGUAGE.md): nothing renders under
   14px, no kickers, no chips, no boxed panels, no explainer lines, no progress
   ticks. One title, the options, one action, and a photograph that carries the
   screen. ═══ */

/* the visible title is the halo <h2> the shell animates; the page still owes a
   real h1 to a screen reader and to a crawler */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────────────────────────── the two halves ─────────────────────────────
   The portrait is the larger half of the desktop viewport, so .sapp breaks out
   of .wrap and measures itself against the viewport instead. */
.sapp{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,30px);
  padding:clamp(16px,3vw,34px) var(--gutter) clamp(44px,7vw,84px)}
@media(min-width:1081px){
  /* 48.5vw, not 48: Chromium quantises layout to 1/64px, so a flat 48vw measures
     691.1875 of 1440 = 47.999% and misses the "at least 48 percent" bar by a
     rounding step. Firefox gives 691.2. Half a vw clears it on both. */
  .sapp{grid-template-columns:minmax(0,1fr) 48.5vw;gap:clamp(28px,3.4vw,56px);
    align-items:center;min-height:calc(100vh - 76px);
    padding-inline:clamp(28px,4vw,64px)}
}

/* ───────────────────────────── the portrait ─────────────────────────────
   One picture of her for the whole session. A screen change moves a camera
   over that face; it never swaps in another photograph. */
.mlayer{position:relative;order:-1;pointer-events:none;display:flex;
  flex-direction:column;align-items:center;gap:14px}
@media(min-width:1081px){.mlayer{order:0;gap:22px}}

/* the frame no longer has to keep the source aspect: the portrait covers it and
   scan.js projects through the same crop, so this can be a full width band on a
   phone and the taller half of the viewport on a desktop. */
.mframe{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  max-height:min(46vh,420px);
  -webkit-mask-image:
    linear-gradient(transparent 0,#000 8%,#000 60%,rgba(0,0,0,.55) 82%,transparent 99%),
    linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:
    linear-gradient(transparent 0,#000 8%,#000 60%,rgba(0,0,0,.55) 82%,transparent 99%),
    linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  will-change:transform}
@media(min-width:1081px){
  /* the portrait column IS the picture: it fills the whole of it, and stops
     where her own photographs of the ticked condition begin */
  .mframe{aspect-ratio:7/6;max-height:min(64vh,720px);width:100%;
    -webkit-mask-image:
      linear-gradient(transparent 0,#000 7%,#000 66%,rgba(0,0,0,.6) 88%,transparent 99%),
      linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:
      linear-gradient(transparent 0,#000 7%,#000 66%,rgba(0,0,0,.6) 88%,transparent 99%),
      linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}
/* the paper lives INSIDE the camera: .mcam is transformed, so it is a stacking
   context, and a multiply on its children can only see a backdrop that is also
   inside it. Without it the shot renders as a white rectangle on the page. */
.mcam{position:absolute;inset:0;background:var(--bg);will-change:transform;transform-origin:50% 50%}
.mstack{position:absolute;inset:0;mix-blend-mode:multiply}
.mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity .45s linear}
.mimg.is-on{opacity:1}
.mvars{position:absolute;inset:0}
.mvar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),
    #000 var(--m0),rgba(0,0,0,.55) calc(var(--m0) + 22%),transparent var(--m1));
  mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),
    #000 var(--m0),rgba(0,0,0,.55) calc(var(--m0) + 22%),transparent var(--m1))}
/* <svg> is a replaced element: inset:0 with width:auto keeps its intrinsic
   300x150 and, in an RTL document, resolves the over-constrained box by dropping
   the start edge, which parks every box off her face. */
.mdetect{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dbox{opacity:0}
.dbox rect{fill:none;stroke:rgba(255,248,236,.95);stroke-width:1.25;
  filter:drop-shadow(0 1px 3px rgba(40,30,16,.55))}
.dbox .tick{fill:rgba(255,248,236,.95);stroke:none;filter:none}
.dbox .chip{fill:rgba(28,23,16,.74);stroke:rgba(210,184,139,.55);stroke-width:1;
  filter:drop-shadow(0 2px 6px rgba(30,22,10,.3))}
.dbox text{font:600 14px/1 var(--f);fill:#FBF5E9;direction:rtl;dominant-baseline:middle}

/* her own photographs of the ticked condition, before and after, one LARGE pair */
.mexam{display:block;width:min(100%,560px);margin:clamp(14px,2vh,26px) auto 0;
  min-height:clamp(120px,14vw,200px)}
.mexam .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.mexam .c{width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;
  box-shadow:0 18px 44px -22px rgba(40,30,16,.45),0 0 0 1px rgba(210,184,139,.4);
  position:relative;background:var(--card)}
.mexam .c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mexam .c i{position:absolute;bottom:10px;inset-inline-start:10px;font:600 14px/1 var(--f);font-style:normal;
  color:#fff;background:rgba(20,16,11,.45);border-radius:3px;padding:6px 10px;backdrop-filter:blur(4px)}

/* ───────────────────────────── the panel ─────────────────────────────
   No step counter, no ticks, no labels: one gold hairline across the top that
   fills as the seven questions are answered. */
.panel{position:relative;min-width:0}
.hair{display:block;height:1px;background:var(--line);position:relative;overflow:hidden;
  margin-bottom:clamp(20px,3vw,34px)}
.hair i{position:absolute;inset:0;background:linear-gradient(90deg,var(--champagne),var(--honey-deep));
  transform-origin:100% 50%;transform:scaleX(0);transition:transform .75s var(--ease-out)}
#qTitle{margin:0}
.qbody{margin-top:clamp(20px,3vw,30px)}
/* CLS: scan.js paints question 1 after first paint and the panel grows from
   118px to 595px under the eye. The empty body holds a deliberately
   conservative share of that height (measured 355-441 desktop, 566 at 640px,
   1046 at 560px and below) - under-reserving leaves a small shift, never a gap. */
.qbody:empty{min-height:340px}
@media(max-width:660px){.qbody:empty{min-height:540px}}
@media(max-width:600px){.qbody:empty{min-height:1020px}}
.fieldlbl{display:block;font:500 17px/1.5 var(--f);color:var(--ink-2);margin:0 0 14px}
.field+.field{margin-top:clamp(24px,3.4vw,36px)}

/* one picture beside every answer */
.opts{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.opts>li{display:grid}
.opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.opts.two{grid-template-columns:1fr}}
.opt{width:100%;text-align:start;background:var(--card);border:1px solid var(--line);
  border-radius:3px;padding:0;padding-inline-end:16px;font:500 16px/1.35 var(--f);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;gap:14px;overflow:hidden;
  transition:border-color var(--t-ui) var(--ease-out),
    box-shadow var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out)}
.opt .thumb{flex:0 0 auto;width:clamp(80px,7.4vw,102px);aspect-ratio:19/8;overflow:hidden;
  background:#F1EAE0;position:relative}
.opt .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.6) contrast(.97) brightness(1.02);
  transition:filter var(--t-ui) var(--ease-out),transform .5s var(--ease-out)}
.opt .lb{padding-block:14px;min-width:0}
.opt:hover{border-color:rgba(178,139,82,.5);box-shadow:var(--glow-soft)}
.opt:hover .thumb img{filter:saturate(.92) brightness(1);transform:scale(1.05)}
.opt[aria-checked="true"]{border-color:var(--honey);
  background:linear-gradient(0deg,rgba(217,190,147,.13),rgba(217,190,147,.13)),var(--card)}
.opt[aria-checked="true"] .thumb img{filter:none}
.opt[aria-disabled="true"]{opacity:.38;cursor:default}
.opt[aria-disabled="true"]:hover{border-color:var(--line);box-shadow:none}
.opt[aria-disabled="true"]:hover .thumb img{filter:saturate(.6) contrast(.97);transform:none}

.qfoot{margin-top:clamp(26px,3.5vw,36px);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* scoped to the questionnaire on purpose: on the result screen a buy button is
   disabled only until the consent box is ticked, and it keeps its gold there so
   the visitor can see what the tick unlocks */
.qfoot .btn:disabled{background:rgba(120,100,72,.16);color:var(--ink-3);cursor:not-allowed}
.linkback{background:none;border:0;font:600 15px/1 var(--f);color:var(--ink-3);cursor:pointer;padding:8px 0}
.linkback:hover{color:var(--honey-deep)}

/* ───────────────────────────── the camera step ───────────────────────── */
.camstage{position:relative;width:min(420px,100%);aspect-ratio:1;border-radius:4px;overflow:hidden;
  background:#12100C;box-shadow:0 30px 70px -40px rgba(20,16,11,.8)}
.camstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camstage canvas{position:absolute;inset:0;width:100%;height:100%}
.camstage .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scaleX(-1);opacity:0;transition:opacity .4s var(--ease-out)}
.camstage.has-shot .shot{opacity:1}
.camline{margin:0 0 clamp(18px,2.6vw,26px);font-size:17px;line-height:1.8;color:var(--ink-2);
  max-width:34em;white-space:pre-line}
.gauges{display:grid;gap:15px;margin-top:24px;max-width:34em}
.gauge{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.gauge b{font:500 15px/1.4 var(--f);color:var(--ink-2);min-width:5.6em}
.gauge .track{height:5px;border-radius:5px;background:rgba(120,100,72,.14);position:relative;overflow:hidden}
.gauge .track i{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--champagne),var(--honey-deep));
  transition:width .9s var(--ease-out)}
.gauge em{font:500 15px/1.4 var(--f);font-style:normal;color:var(--ink-3)}

/* ───────────────────────────── the result ─────────────────────────────
   No eyebrow, no chip row, no boxes, no numbered rails. */
.result{padding-block:clamp(24px,4vw,44px) clamp(56px,8vw,104px)}
.result[hidden]{display:none}
/* an author-level display always beats [hidden]'s UA display:none, so the
   questionnaire would otherwise still be sitting above its own result */
.sapp[hidden]{display:none}
#rTitle{margin:0 0 clamp(16px,2.2vw,24px)}
.rsec{margin-top:clamp(34px,5vw,64px)}
.rsec:first-child{margin-top:0}
.rsec h3{font:600 clamp(20px,2.2vw,27px)/1.25 var(--f);margin:0 0 18px;color:var(--ink)}
.rsec h4{font:600 17px/1.4 var(--f);margin:0 0 12px;color:var(--ink)}
.rsec .lede{margin:0 0 6px}
.quote{font-size:17px;line-height:1.85;color:var(--ink-2);white-space:pre-line;margin:0 0 8px;max-width:34em}

.offer{display:grid;gap:clamp(18px,3vw,34px)}
@media(min-width:860px){.offer{grid-template-columns:1.05fr .95fr;align-items:start}}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:20px 0 24px}
.price b{font:500 clamp(32px,4vw,46px)/1 var(--f);color:var(--ink);font-variant-numeric:tabular-nums}
.price s{color:var(--ink-3);font-size:18px}
.buys{display:flex;flex-wrap:wrap;gap:18px;align-items:center}

/* the consent line. A form field label under DESIGN_LANGUAGE's "ALLOWED small
   text", and Amendment 2 (correction/legal/dl_amendment.md). Never a box: no
   border, no background, no radius. It sits on the page ground like a caption
   to the action beside it, once per result, only where money changes hands. */
.consent{flex:0 0 100%;display:grid;gap:8px;margin-bottom:2px}
.cn-line{font:400 14px/1.55 var(--f);color:var(--ink-2);margin:0;max-width:52ch}
.cn-ok{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font:600 14px/1.45 var(--f);color:var(--ink-2)}
.cn-ok input{accent-color:var(--honey-deep);width:20px;height:20px;flex:0 0 auto;
  margin:2px 0 0}
.cn-ok a{color:var(--ink);text-underline-offset:3px}
.btn-gold[disabled],.btn[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:640px){.cn-ok{min-height:44px;align-items:center}}

.shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)}
@media(min-width:620px){.shelf{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.shelf{grid-template-columns:repeat(4,1fr)}}
.pk{display:block;color:var(--ink)}
/* every child here is a <span>: without this they stay inline, aspect-ratio on
   the photo box resolves to nothing and the card collapses into one line */
.pk>*{display:block}
.pk .ph{position:relative;aspect-ratio:1;overflow:hidden;background:#fff;border-radius:3px}
.pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pk .nm{font:500 16px/1.5 var(--f);margin-top:12px;color:var(--ink)}
.pk a.nm:hover{color:var(--honey-deep)}
.pk .pr{font:500 17px/1 var(--f);color:var(--honey-deep);margin-top:5px;font-variant-numeric:tabular-nums}
.pk .pr s.was{text-decoration:line-through;color:var(--ink);opacity:.42;font-weight:400;margin-inline-end:.45em}
.opts.notiles .opt{display:flex;align-items:center;min-height:56px}
.opts.notiles .lb{margin:0}

/* the routine: two plain lists in body size */
.rblock+.rblock{margin-top:clamp(26px,3vw,38px)}
.rblock>h4{font:600 17px/1.4 var(--f);color:var(--honey-deep);margin:0 0 14px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:40em}
.steps>li{font-size:17px;line-height:1.8;color:var(--ink-2)}
.steps .nm{font-weight:600;color:var(--ink)}
.steps .nm a{color:var(--ink)}
.steps .nm a:hover{color:var(--honey-deep)}
.steps .bd{display:block;margin-top:2px;font-size:16px;line-height:1.8;color:var(--ink-2);
  white-space:pre-line;font-weight:400}

/* her own list, drawn as a list. She wrote her three photographs as a list and
   her markers are in the string; the voice law forbids printing the glyph, so
   the renderer draws the list and her sentence is never edited. No rail, no
   numerals, no bullets: three lines. */
.herlist{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;max-width:34em}
.herlist>li{font-size:17px;line-height:1.85;color:var(--ink-2)}

/* n10: change one answer without starting over, and the way back to the start */
.editrow{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}

@media (prefers-reduced-motion:reduce){
  .rv,.dbox{opacity:1 !important;transform:none !important}
}

/* ═══════════════════════════════ the phone ═══════════════════════════════
   390-430px, one hand, a touchscreen. Nothing is deleted here: the portrait
   band, her example photographs, every answer picture and every action stay,
   they only change shape. Tap rows are 44px or more, the primary action sits
   in the thumb zone, and the type floor stays at 14px. */

/* the portrait band: a wider, shorter crop so the face reads and the first
   question is on the same screen. scan.js projects through the same cover
   crop, so the camera needs no change. */
@media(max-width:860px){
  .sapp{gap:14px;padding-top:10px}
  .mframe{aspect-ratio:5/4;max-height:min(38vh,340px)}
  /* the column dissolves so the portrait, the question and her own before and
     after become three items of the same stack: face, then what she is asking,
     then the proof underneath. Without this the pair of photographs would sit
     between the face and the question and push it off the screen. */
  .mlayer{display:contents}
  .mexam{margin-top:0;order:1}
  .mframe{order:-1}

  /* every action a thumb can land on */
  .btn,.btn-gold{min-height:46px;display:inline-flex;align-items:center;
    justify-content:center;text-align:center}
  .link{display:inline-flex;align-items:center;min-height:44px}
  .buys{gap:10px 18px}
  .editrow{gap:6px 22px}
  .linkback{min-height:46px;display:inline-flex;align-items:center}
}

/* her before and after, stacked and large instead of two thumbnails */
@media(max-width:560px){
  .mexam{margin-top:clamp(10px,2vh,18px);min-height:0}
  .mexam .pair{grid-template-columns:1fr;gap:10px}
  .mexam .c{aspect-ratio:5/4}
}

/* the answers: the photograph beside each one becomes a square, so a skin
   condition reads as a condition and not as a texture swatch */
@media(max-width:640px){
  .opts{gap:10px}
  .opt{align-items:stretch;padding-inline-end:14px;gap:13px}
  .opt .thumb{width:84px;aspect-ratio:1}
  .opt .lb{padding-block:13px;align-self:center}
  /* no hover on a touchscreen: the tick is the only state, and it must show */
  .opt:active{border-color:rgba(178,139,82,.5)}

  /* one full width action under the thumb, the way back beneath it */
  .qfoot{flex-direction:column;align-items:stretch;gap:10px;
    margin-top:clamp(24px,5vw,32px);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .qfoot .btn{width:100%;min-height:50px}
  .qfoot .linkback{width:100%;justify-content:center;min-height:46px}

  .camstage{width:100%}
  .gauge{gap:10px}
  .gauge b{min-width:4.8em}

  .result{padding-bottom:calc(clamp(56px,8vw,104px) + env(safe-area-inset-bottom,0px))}
  .price{margin:16px 0 18px}
}

/* fine pointers only: the lift on an answer is a mouse affordance */
@media(hover:none){
  .opt:hover{border-color:var(--line);box-shadow:none}
  .opt:hover .thumb img{filter:saturate(.6) contrast(.97) brightness(1.02);transform:none}
  .opt[aria-checked="true"]:hover .thumb img{filter:none}
}

/* R49 solid header on phone */
@media(max-width:860px){header.shell{background:rgba(253,250,245,.97)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}


/* ── directive 2026-09-02: selection clarity + the composing hold ─────────── */
.opt{position:relative}
.opt[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--honey);
  background:linear-gradient(0deg,rgba(217,190,147,.22),rgba(217,190,147,.22)),var(--card)}
.opt[aria-checked="true"] .lb{font-weight:600}
/* 44px hit area, 22px ink (launch audit 2026-09-03: the control was a 22x22 tap target) */
.opt .unpick{display:none;position:absolute;top:0;inset-inline-end:0;width:44px;height:44px;
  z-index:2;cursor:pointer;place-items:center;font:400 14px/1 var(--f);color:#F6F3EE}
.opt .unpick::before{content:'';position:absolute;top:11px;inset-inline-end:11px;
  width:22px;height:22px;border-radius:50%;background:var(--ink);z-index:-1}
.opt[aria-checked="true"] .unpick{display:grid}
.opt .unpick>span{display:block;transform:translate(-11px,-11px)}
.opt .unpick:hover{background:var(--honey-deep)}
.composing{min-height:240px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px}
.composing .cpulse{width:56px;height:56px;border:1px solid var(--honey);border-radius:50%;
  opacity:.55;animation:cbreathe 1.7s ease-in-out infinite}
.composing .clines{display:grid;place-items:center;min-height:34px;width:100%}
.composing .cline{grid-area:1/1;margin:0;font:300 19px/1.6 var(--f);color:var(--ink);
  opacity:0;transition:opacity .5s var(--ease-out);text-align:center}
.composing .cline.on{opacity:1}
@keyframes cbreathe{0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.06);opacity:.7}}
@media (prefers-reduced-motion: reduce){.composing .cpulse{animation:none}.composing .cline{transition:none}}