@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(assets/fonts/CormorantGaramond-600i.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/CormorantGaramond-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/CormorantGaramond-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/CormorantGaramond-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/CormorantGaramond-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Inter-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/Inter-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/Inter-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/Inter-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* AfterVue — brand styles */
:root {
  /* Brand fonts as variables so a practice tenant's `theme` (config.js) can swap them with its palette. */
  /* Brand fonts first (the self-hosted Latin subsets). The rest of each stack only supplies glyphs the brand font
     lacks — Cyrillic, Greek, Arabic, Hebrew, Devanagari, Thai, CJK — from the device's own fonts, so the 34 languages
     render in a real typeface instead of tofu. Not a substitution: Latin text still comes out in Cormorant/Inter. */
  --serif: "Cormorant Garamond", "Noto Serif", "Hiragino Mincho ProN", "Songti SC", "PingFang SC", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --plum-deep: #1B0F2E;
  --plum: #2E1A47;
  --plum-soft: #3A2150;
  --plum-line: #4a2f66;
  --gold: #C9A24B;
  --gold-light: #E8CE9A;
  --blush: #E9B8C0;
  --porcelain: #F8F4EF;
  --ink-soft: #CBBFDA;
  --radius: 20px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--sans), -apple-system, sans-serif;
  /* Solid fallback behind the gradient: without it the effective background is
     undefined/transparent, which breaks contrast checking (and any no-image fallback
     rendering) for every light-on-dark text element below. */
  background-color: var(--plum-deep);
  background-image:
    radial-gradient(1200px 700px at 80% -10%, rgba(122, 61, 140, .30), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(201, 162, 75, .13), transparent 55%),
    linear-gradient(160deg, var(--plum-deep), var(--plum) 55%, #241238);
  color: var(--porcelain);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

body[data-mode="embed"] { background-color: var(--plum-deep); background-image: linear-gradient(165deg, var(--plum-deep), var(--plum)); }

.serif { font-family: var(--serif), Georgia, serif; }

/* ---------- shell ---------- */
.shell {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 22px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

body[data-mode="kiosk"] .shell { max-width: 760px; padding-top: 38px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(201, 162, 75, .22);
}
.topbar img.logo { height: 58px; display: block; }
body[data-mode="kiosk"] .topbar img.logo { height: 74px; }
body[data-mode="embed"] .topbar img.logo { height: 46px; }
.topbar .clinic {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
}

/* Attribution line — practice-facing surfaces only; see app.js poweredByLine(). Small and quiet:
   this is a credit, not a second logo. */
.powered-by {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  opacity: .6;
  text-decoration: none;
  padding: 10px 0 18px;
}
.powered-by:hover, .powered-by:focus-visible { opacity: 1; text-decoration: underline; }

.step-dots { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 0 0 24px; }
.step-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(248, 244, 239, .16);
  transition: all .35s;
}
.step-dots i.on { background: var(--gold); box-shadow: 0 0 10px rgba(201, 162, 75, .7); }
.step-dots i.now { transform: scale(1.45); }
.step-dots .step-label {
  white-space: nowrap;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(203, 191, 218, .8); margin-left: 8px;
}

/* ---------- type ---------- */
h1 {
  text-wrap: balance;
  font-family: var(--serif), Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1.08;
  letter-spacing: .01em;
  margin-bottom: 10px;
}
h1 em { font-style: italic; color: inherit; }
h1 .accent { color: var(--gold-light); font-style: normal; white-space: nowrap; }
.sub { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin-bottom: 24px; max-width: 52ch; text-wrap: pretty; }
.eyebrow {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}

/* ---------- controls ---------- */
.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 18px 26px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #241238;
  font: 600 16px/1 "Inter", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .25s, filter .2s;
  box-shadow: 0 10px 30px rgba(201, 162, 75, .35);
}
.btn:hover { filter: brightness(1.05); box-shadow: 0 14px 38px rgba(201, 162, 75, .45); }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; pointer-events: none; box-shadow: none; }
.btn.ghost {
  background: transparent;
  color: var(--porcelain);
  border: 1px solid var(--plum-line);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--gold); filter: none; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.btn-row .btn { flex: 1 1 auto; min-width: 150px; width: auto; }
.btn-row .btn { margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip {
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--plum-line);
  background: rgba(255, 255, 255, .04);
  color: var(--porcelain);
  font: 500 14px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: all .18s cubic-bezier(.34,1.56,.64,1);
}
.chip:hover { border-color: rgba(201, 162, 75, .6); }
.chip.on {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent;
  color: #241238;
  font-weight: 600;
  transform: scale(1.04);
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.field label small { text-transform: none; letter-spacing: 0; color: rgba(203, 191, 218, .8); font-size: 11px; }
.field input {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--plum-line);
  background: rgba(255, 255, 255, .05);
  color: var(--porcelain);
  font: 400 16px/1.2 "Inter", sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .18); }
.field input::placeholder { color: rgba(203, 191, 218, .8); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--plum-line);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin: 4px 0 20px;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  cursor: pointer;
}
.consent input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--gold); flex: none; cursor: pointer; }

/* ---------- selfie ---------- */
.tips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tips span {
  font-size: 12px; color: var(--ink-soft);
  border: 1px solid rgba(74, 47, 102, .8);
  border-radius: 999px; padding: 7px 13px;
  background: rgba(255, 255, 255, .03);
}
.tips span::before { content: "✦ "; color: var(--gold); }

.cam-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #120a20;
  border: 1px solid var(--plum-line);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  transition: border-color .3s, box-shadow .3s;
}
.cam-stage.live { border-color: rgba(201, 162, 75, .55); box-shadow: 0 0 0 1px rgba(201,162,75,.25), var(--shadow); }
.cam-stage video, .cam-stage img.preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cam-stage video { transform: scaleX(-1); }   /* front camera: mirror like a selfie */
.cam-stage.rear video { transform: none; }     /* rear camera: as seen */
.face-guide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.face-guide::before {
  content: "";
  width: 56%; height: 73%;   /* natural face oval, 1.3x width (Mikel, Sept 18) — matches the iOS kiosk guide; the saved photo is still the centre square of the camera frame */
  border: 2px dashed rgba(232, 206, 154, .55);
  border-radius: 50%;   /* border-radius: 50% on a non-square box renders an ellipse */
}
.face-guide.locked::before { border: 3px solid var(--gold); box-shadow: 0 0 30px rgba(201, 162, 75, .75); }
.cam-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Countdown digit: the brand sans in a gold ring, not the display serif (Mikel, Sept 10) */
.cam-count:not(:empty)::before { content: ""; position: absolute; width: 132px; height: 132px; border-radius: 50%; background: rgba(18, 10, 28, .62); border: 3px solid var(--gold); box-shadow: 0 0 0 8px rgba(201, 162, 75, .18), 0 10px 40px rgba(0, 0, 0, .45); }
.cam-count { font-family: var(--sans), -apple-system, sans-serif; font-weight: 700; font-size: 72px; line-height: 1; color: var(--porcelain); letter-spacing: -.02em; font-variant-numeric: tabular-nums; position: absolute; }
.cam-count:not(:empty) { z-index: 2; }
.shot-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.shot-strip img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--plum-line); }
.shot-strip span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }

.angle-toggle {
  display: flex; width: max-content;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--plum-line);
  border-radius: 999px; padding: 4px; gap: 4px;
  margin-bottom: 14px;
}
.angle-toggle button {
  font: 600 13px "Inter", sans-serif;
  border: 0; background: none; color: var(--ink-soft);
  padding: 9px 22px; border-radius: 999px; cursor: pointer;
}
.angle-toggle button.on {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #241238;
}

.cam-hint {
  position: absolute; left: 0; right: 0; bottom: 12px;
  text-align: center; font-size: 12.5px; color: rgba(248, 244, 239, .88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.qc-note {
  border: 1px solid rgba(233, 184, 192, .45);
  background: rgba(233, 184, 192, .1);
  color: var(--blush);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 13.5px; line-height: 1.5;
  margin-bottom: 16px;
}
.privacy-line { text-align: center; font-size: 11.5px; color: rgba(203, 191, 218, .8); margin-top: 14px; }
.privacy-line b { color: rgba(232, 206, 154, .85); font-weight: 600; }

/* ---------- treatments ---------- */
.treat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
body[data-mode="embed"] .treat-grid { grid-template-columns: 1fr; }
.treat-more { margin: -8px 0 24px; }
.treat-more summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); padding: 8px 2px; list-style: none; }
.treat-more summary::-webkit-details-marker { display: none; }
.treat-more summary::before { content: "+ "; color: var(--gold, #C9A24B); }
.treat-more[open] summary::before { content: "– "; }
.treat-more .treat-grid { margin-top: 10px; margin-bottom: 0; }
.treat-card {
  text-align: left;
  border: 1px solid var(--plum-line);
  background: rgba(255, 255, 255, .04);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--porcelain);
  cursor: pointer;
  transition: all .18s;
  font-family: var(--sans), sans-serif;
}
.treat-card:hover { border-color: rgba(201, 162, 75, .55); transform: translateY(-1px); }
.treat-card b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.treat-card span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; display: block; }
.treat-card.suggested { border-color: rgba(201, 162, 75, .6); }
.treat-card.suggested::after {
  content: "Suggested for you";
  display: inline-block;
  margin-top: 9px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.treat-card.on {
  background: linear-gradient(150deg, rgba(232, 206, 154, .2), rgba(201, 162, 75, .12));
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 26px rgba(201, 162, 75, .2);
}

/* ---------- generating ---------- */
.gen-stage { text-align: center; padding: 44px 0 26px; }
.gen-orb {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 30px;
  background: radial-gradient(circle at 32% 30%, var(--gold-light), var(--gold) 55%, #7A3D8C);
  animation: orb 2.4s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(201, 162, 75, .55);
  position: relative;
}
.gen-orb::after {
  content: ""; position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(232, 206, 154, .35);
  animation: ring 2.4s ease-in-out infinite;
}
@keyframes orb { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 0; } }
.gen-status { font-size: 15px; color: var(--ink-soft); min-height: 22px; transition: opacity .4s; }
.gen-bar {
  height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
  margin: 26px auto 14px; max-width: 300px;
  position: relative;
}
.gen-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: sweep 1.6s ease-in-out infinite;
}
@keyframes sweep { from { left: -40%; } to { left: 100%; } }
.gen-eta { font-size: 12px; color: rgba(203, 191, 218, .8); }

/* ---------- before / after slider ---------- */
.ba {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--plum-line);
  box-shadow: var(--shadow);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  cursor: ew-resize;
  margin-bottom: 14px;
}
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
/* The second angle before it has been rendered: the patient's own photo, dimmed, with the
   invitation to render it. The web surfaces generate a side view only when it is asked for. */
.ba-pending {
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ba-pending img { opacity: .28; filter: saturate(.5); }
.ba-pending p {
  position: relative;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(18, 10, 32, .72);
  color: var(--porcelain);
  font-size: 14px;
  letter-spacing: .01em;
}
.ba .after-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ba-divider {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--porcelain);   /* white, like the iOS handle (Mikel, Sept 28) */
  box-shadow: 0 0 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--porcelain);
  display: flex; align-items: center; justify-content: center;
  color: #241238; font-weight: 700; font-size: 16px;
  letter-spacing: -1px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.ba-tag { display: none !important; }   /* no Before/After tags on the image (Mikel, Sept 28) */
.ba-tag-legacy {
  position: absolute; top: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: rgba(18, 10, 32, .72);
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .3s;
}
/* Left-to-right wipe (Sept 27): the after is revealed on the LEFT of the handle, so its tag sits left. */
.ba-tag.after { left: 14px; color: var(--gold-light); }
.ba-tag.before { right: 14px; color: var(--porcelain); }
.ba.dragging .ba-tag { opacity: .25; }
/* Rendering feedback: the mark spins + breathes mid-photo while a render is in flight, then becomes a
   checkmark and fades (app.js setBaRendering). */
.ba-render {
  position: absolute; left: 50%; top: 50%; width: 168px; height: 168px; margin: -84px 0 0 -84px;
  border-radius: 50%; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 4;
}
.ba-render img { width: 104px; height: 104px; opacity: 0; transition: opacity .2s; transform-style: preserve-3d; backface-visibility: visible; }
.ba-render { perspective: 600px; }
.ba-render .ba-ck { position: absolute; font: 700 76px/1 Inter, system-ui, sans-serif; color: var(--plum); text-shadow: 0 0 2px rgba(248, 244, 239, .95), 0 0 10px rgba(248, 244, 239, .55); opacity: 0;   /* plum + porcelain halo: gold vanished on skin (Mikel, Oct 8) */ transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.ba.rendering .ba-render, .ba.busy .ba-render, .ba.render-done .ba-render { opacity: 1; }
.ba.rendering .ba-render img, .ba.busy .ba-render img { opacity: 1; animation: ba-spin 1.6s linear infinite, ba-breathe 1.8s ease-in-out infinite; }
.ba.render-done .ba-render .ba-ck { opacity: 1; transform: scale(1); }
.ba.mini .ba-render { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.ba.mini .ba-render img { width: 60px; height: 60px; }
.ba.mini .ba-render .ba-ck { font-size: 44px; }
@keyframes ba-spin { to { transform: rotateY(360deg); } }   /* spins like a coin (Mikel, Sept 27) */
@keyframes ba-breathe { 0%, 100% { scale: .86; } 50% { scale: 1.18; } }
@media (prefers-reduced-motion: reduce) { .ba.rendering .ba-render img, .ba.busy .ba-render img { animation: ba-breathe 2.4s ease-in-out infinite; } }
.ba-sim {
  position: absolute; right: 12px; bottom: 12px;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(248, 244, 239, .85);
  background: rgba(18, 10, 32, .6);
  backdrop-filter: blur(6px);
  padding: 5px 10px; border-radius: 999px;
  pointer-events: none;
}
.ba-hold-hint { text-align: center; font-size: 12px; color: rgba(203, 191, 218, .75); margin-bottom: 16px; }

/* teaser mini slider (auto-sweeping, non-interactive) */
.ba.mini {
  cursor: default;
  touch-action: auto;
  max-width: 360px;
  margin: 0 auto 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
}
.ba.mini .ba-tag { top: 10px; padding: 4px 10px; font-size: 9.5px; }
.ba.mini .ba-sim { font-size: 8.5px; right: 10px; bottom: 10px; }
.attract .ba.mini { width: min(72vw, 340px); margin-bottom: 30px; }

/* intensity blend control */
.intensity {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--plum-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
}
.intensity label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.intensity input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--plum-line), var(--gold));
  outline: none;
}
.intensity input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  cursor: pointer;
}
.intensity input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  cursor: pointer;
}

.sim-note { font-size: 12px; color: rgba(203, 191, 218, .8); margin-top: 5px; }
.cred-line { text-align: center; font-size: 12px; color: rgba(232, 206, 154, .8); margin-top: 12px; }

.result-title { margin: 0 0 14px; }
.result-title .eyebrow { margin-bottom: 6px; }
/* h1 (was h2) so every screen has exactly one top-level heading; margin/letter-spacing
   pinned back to their old h2 values so the generic h1 rule can't change the rendered size. */
.result-title h1 { font-family: var(--serif), Georgia, serif; font-size: 28px; font-weight: 600; text-wrap: balance; line-height: 1.15; margin-bottom: 0; letter-spacing: normal; }

.pick-note {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-soft);
  min-height: 18px;
  margin: -8px 0 14px;
}
.pick-note.max { color: var(--gold-light); }

.demo-banner {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(232, 206, 154, .5);
  background: rgba(201, 162, 75, .12);
  color: var(--gold-light);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 13px; line-height: 1.5;
  margin-bottom: 16px;
}
.demo-banner img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(232, 206, 154, .6); flex: none; }

.disclaimer {
  font-size: 11.5px; line-height: 1.55;
  color: rgba(203, 191, 218, .8);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(74, 47, 102, .6);
}

/* ---------- kiosk attract ---------- */
.attract {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 40px 26px;
}
.attract img.mark { width: 96px; margin-bottom: 34px; filter: drop-shadow(0 0 30px rgba(201, 162, 75, .5)); animation: orb 3.2s ease-in-out infinite; }
/* Wordmark intro (Mikel, Sept 27 2026; same as iOS BrandWordmark(animated:)): the mark starts at the right end
   of the wordmark and slides left, revealing "AfterVue AI" behind it as it passes; once the words are out it
   pulses once. logo.svg is 1721×372 with the mark as the square at the left. */
.wm-reveal { --wm-h: 88px; perspective: 600px; position: relative; height: var(--wm-h); width: calc(var(--wm-h) * 1721 / 372); margin: 0 auto 34px; }
/* Geometry measured from logo.svg (ring centre 278.2,186 of 1721×372, outer r 127.7) and mark.png (ring = 451/512):
   the sliding mark is 0.7794h square, lands with its left edge at 0.3581h, top 0.1103h — exactly on the wordmark's
   own ring, which stays clipped out underneath (the wipe never opens past 1.1375h). Same numbers as iOS BrandWordmark. */
.wm-reveal .wm-logo { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 100%); animation: wm-wipe .9s ease-in-out .15s forwards; }
.wm-reveal .wm-mark { position: absolute; top: calc(var(--wm-h) * 0.1103); left: calc(var(--wm-h) * 0.3581); height: calc(var(--wm-h) * 0.7794); width: calc(var(--wm-h) * 0.7794); transform: translateX(calc(var(--wm-h) * 3.4885)); animation: wm-slide .9s ease-in-out .15s forwards, wm-spin .9s ease-in-out 1.1s 1; transform-style: preserve-3d; backface-visibility: visible; filter: drop-shadow(0 0 22px rgba(201, 162, 75, .35)); }
@keyframes wm-wipe { to { clip-path: inset(0 0 0 calc(var(--wm-h) * 1.1375)); } }
@keyframes wm-slide { to { transform: translateX(0); } }
@keyframes wm-spin { to { transform: translateX(0) rotateY(360deg); } }   /* once home, one coin spin — no pulse (Mikel, Sept 27) */
@media (max-width: 480px) { .wm-reveal { --wm-h: 60px; } }
@media (prefers-reduced-motion: reduce) { .wm-reveal .wm-logo { clip-path: inset(0 0 0 calc(var(--wm-h) * 1.1375)); } .wm-reveal .wm-mark { transform: none; } }
.attract h1 { font-size: clamp(40px, 7vw, 68px); margin-bottom: 16px; }
.attract .sub { font-size: 18px; max-width: 30ch; margin: 0 auto 40px; }
.attract .pulse {
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
  animation: pulse 2.2s ease-in-out infinite;
}
/* Floor raised from .45 so the pulsing gold text never dips below 4.5:1 contrast mid-animation. */
@keyframes pulse { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }

/* ---------- pin overlay ---------- */
.pin-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(18, 10, 32, .94);
  display: flex; align-items: center; justify-content: center;
}
.pin-box {
  background: var(--plum);
  border: 1px solid var(--plum-line);
  border-radius: var(--radius);
  padding: 28px;
  width: min(92vw, 380px);
  text-align: center;
}
.pin-box h3 { font-family: var(--serif), Georgia, serif; font-size: 24px; margin-bottom: 16px; }
.pin-box input {
  width: 100%; text-align: center; letter-spacing: .5em;
  font-size: 22px; padding: 13px;
  border-radius: 12px; border: 1px solid var(--plum-line);
  background: rgba(255, 255, 255, .06); color: var(--porcelain); outline: none;
  margin-bottom: 14px;
}

.footnote { text-align: center; font-size: 11px; color: rgba(203, 191, 218, .8); margin-top: 22px; }
.footnote a { color: inherit; }

.fade-in { animation: fadeIn .5s cubic-bezier(.22,.9,.36,1) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 420px) {
  .treat-grid { grid-template-columns: 1fr; }
  .shell { padding: 18px 16px 30px; }
  .field-row { flex-direction: column; gap: 0; }
  .topbar img.logo { height: 48px; }
  .topbar .clinic { font-size: 10px; letter-spacing: .12em; }
  .btn { padding: 16px 20px; font-size: 15px; }
}

/* ---------- desktop: use the width ---------- */
@media (min-width: 900px) {
  body:not([data-mode="embed"]) .shell { max-width: 1100px; padding: 32px 48px 56px; }
  body:not([data-mode="embed"]) .step-dots { justify-content: flex-start; margin-bottom: 30px; }
  body:not([data-mode="embed"]) .screen {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 56px;
    align-items: start;
  }
  body:not([data-mode="embed"]) .s-result { grid-template-columns: 6fr 5fr; }
  body:not([data-mode="embed"]) .s-treatment { display: block; }
  body:not([data-mode="embed"]) .s-treatment .treat-grid { grid-template-columns: repeat(3, 1fr); }
  body:not([data-mode="embed"]) .s-treatment .btn { max-width: 420px; display: flex; margin: 0 auto; }
  body:not([data-mode="embed"]) .s-intake .ba.mini { margin-left: 0; max-width: 400px; }
  body:not([data-mode="embed"]) h1 { font-size: clamp(38px, 4vw, 52px); }
  body:not([data-mode="embed"]) .col-copy { position: sticky; top: 32px; }
  body:not([data-mode="embed"]) .gen-stage { padding-top: 90px; }
  body[data-mode="kiosk"] .screen { gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- trial bar ---------- */
.trial-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(201, 162, 75, .18), rgba(122, 61, 140, .18));
  border-bottom: 1px solid rgba(201, 162, 75, .35);
  font-size: 13px; color: var(--porcelain);
}
.trial-bar a { color: var(--gold-light); font-weight: 600; text-decoration: none; white-space: nowrap; }
.trial-bar a:hover { text-decoration: underline; }


/* ---- Sept 2026: mini sample gets the same gold handle as the result slider ---- */
.ba.mini .ba-knob { width: 40px; height: 40px; font-size: 14px; left: 0; }
.ba.mini .ba-divider { left: 0; }

/* ---- Sept 2026: centered layout on every screen ---- */
.shell, .screen, .attract, .trial-lock { text-align: center; }
.topbar { justify-content: center; }
.topbar .clinic { text-align: center; }
.step-dots { justify-content: center; }
h1, .sub, .eyebrow, .footnote, .field label, .ba-hold-hint, .privacy-line, .credline { text-align: center; }
.chips, .btn-row, #angleT, .angle-toggle, .demo-banner, .selfie-btns, #selfieBtns, .cam-hint { justify-content: center; }
.field input { text-align: left; }
.consent { justify-content: center; text-align: start; max-width: 560px; margin-left: auto; margin-right: auto; }
.btn { margin-left: auto; margin-right: auto; }
.ba.mini, .s-intake .ba.mini, body:not([data-mode="embed"]) .s-intake .ba.mini { margin-left: auto; margin-right: auto; }
.col-copy, .col-act { margin-left: auto; margin-right: auto; }
.treat-card { text-align: left; }

.hint { display: none; font-size: 13px; color: var(--ink-soft); margin: 10px auto 0; max-width: 34ch; }
.btn:disabled + .hint, .btn[aria-disabled="true"] + .hint { display: block; }

/* ---- accessibility pass Sept 2026: visible keyboard-focus states ----
   Buttons/chips/cards rely on the browser default outline, which is inconsistent and
   sometimes low-contrast on this dark palette; give every custom control an explicit,
   on-brand focus ring. :focus-visible so pointer/touch clicks stay clean. */
.btn:focus-visible,
.chip:focus-visible,
.treat-card:focus-visible,
.angle-toggle button:focus-visible,
.trial-bar a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.consent:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.intensity input[type="range"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}
.ba:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Screen headings get tabindex="-1" for the post-navigation focus() in app.js — give that an
   on-brand ring too, instead of the browser's default blue rectangle. */
h1:focus-visible, h2:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero-frame .topbar { padding-top: 44px; }

/* kiosk: per-treatment intensity (subtle / typical / enhanced) */
.inten-list { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(201, 162, 75, .28); border-radius: 12px; }
.inten-head { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(203, 191, 218, .85); margin-bottom: 8px; }
.inten-head span { text-transform: none; letter-spacing: 0; opacity: .7; margin-inline-start: 8px; }
.inten-row { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.inten-head + .inten-row { border-top: 0; }
.inten-row b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.inten-row input[type="range"] { width: 100%; accent-color: #C9A24B; margin: 2px 0 0; }
.inten-ticks { display: flex; justify-content: space-between; font-size: 11px; color: rgba(203, 191, 218, .7); margin-top: 2px; }
.inten-status { font-size: 12px; color: #C9A24B; min-height: 16px; margin-top: 6px; }
.ba.busy::after { content: "Updating…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(27, 15, 46, .45); color: #F8F4EF; font-size: 14px; letter-spacing: .04em; }
/* Fine print sits at the bottom of the attract screen (Mikel, Sept 9: it was too high on the iPad);
   the matching auto margin on the mark keeps the headline group centred in the space above it. */
.attract-consent { margin: 28px auto 0; padding-top: 18px; max-width: 560px; font-size: 13px; line-height: 1.5; color: rgba(203, 191, 218, .85); text-align: center; }
body[data-mode="kiosk"] .attract { min-height: calc(100vh - 40px); }
body[data-mode="kiosk"] .attract img.mark { margin-top: auto; }
body[data-mode="kiosk"] .attract-consent { margin-top: auto; }
.treat-card.blocked { opacity: .45; cursor: not-allowed; }
.treat-card.blocked:hover { transform: none; border-color: inherit; }
.s-failed .btn-row { margin-top: 18px; }

/* ---------- consult room (kiosk): photo front and centre, the menu beneath it ---------- */
body[data-mode="kiosk"] .s-consult { display: flex; flex-direction: column; min-height: calc(100vh - 170px); }
body[data-mode="kiosk"] .s-consult .disclaimer { margin-top: auto; padding-top: 22px; }
body[data-mode="kiosk"] .s-consult .consult-stage { max-width: 100%; margin: 0 auto; }
body[data-mode="kiosk"] .consult-ba { aspect-ratio: 1 / 1; width: min(100%, calc(100vh - 330px)); height: auto; margin: 0 auto 10px; }   /* photos are centre-square 768px, so the stage is square: the whole face, never a thin crop */
body[data-mode="kiosk"] .consult-ba canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
body[data-mode="kiosk"] .consult-ba img { object-fit: cover; }
.consult-status { min-height: 18px; font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }
.consult-status.warn { color: var(--gold-light); font-weight: 600; }
.consult-menu { text-align: left; margin-top: 8px; }
.consult-menu-head { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px 2px; }
.consult-menu-head span { text-transform: none; letter-spacing: 0; opacity: .75; margin-inline-start: 8px; }
.consult-rows { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .consult-rows { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; } }
@media (min-width: 1100px) { .consult-rows { grid-template-columns: repeat(3, 1fr); } }
.trow { border: 1px solid rgba(201, 162, 75, .22); border-radius: 12px; padding: 10px 12px 8px; background: rgba(255, 255, 255, .03); transition: border-color .15s, background .15s; }
.trow.on { border-color: var(--gold); background: rgba(201, 162, 75, .16); box-shadow: 0 0 0 .5px var(--gold); }
.trow.blocked { opacity: .45; }
.trow-toggle { display: block; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.trow.blocked .trow-toggle { cursor: not-allowed; }
.trow-toggle b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.trow-toggle .trow-sub { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.trow-slider { margin-top: 8px; }
.trow-slider input[type="range"] { width: 100%; height: 34px; margin: 0; accent-color: var(--gold); cursor: pointer; touch-action: pan-y; }
.trow-slider input[type="range"]:disabled { opacity: .35; cursor: default; pointer-events: none; }   /* a tap on an off row's slider selects the row */
.trow { cursor: pointer; }
.trow-slider input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.inten-ticks.four { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); opacity: .85; padding: 0 2px; }
.trow-state { min-height: 16px; font-size: 12px; color: var(--gold-light); margin-top: 4px; }
.trow-retry { background: none; border: 1px solid var(--gold-light); border-radius: 999px; padding: 2px 10px; margin-inline-start: 6px; color: var(--gold-light); font: 600 12px var(--sans), sans-serif; cursor: pointer; }
.trow-retry:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body[data-mode="kiosk"] .s-consult .btn-row { justify-content: center; margin-top: 18px; }
body[data-mode="kiosk"] .s-consult .btn-row .btn { flex: 0 1 auto; }
@media (min-width: 900px) {
  body[data-mode="kiosk"] .s-consult { display: flex; }
  body[data-mode="kiosk"] .shell { max-width: 1100px; }
}

/* ---------- kiosk selfie: viewer centred and as large as the screen allows, text above ---------- */
body[data-mode="kiosk"] .screen.s-selfie { display: flex; flex-direction: column; align-items: center; gap: 0; }
body[data-mode="kiosk"] .s-selfie .col-copy, body[data-mode="kiosk"] .s-selfie .col-act { width: 100%; max-width: none; position: static; }
body[data-mode="kiosk"] .s-selfie h1 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 4px; }
body[data-mode="kiosk"] .s-selfie .sub { margin: 0 auto 10px; max-width: 62ch; font-size: 15px; }
body[data-mode="kiosk"] .s-selfie .tips { justify-content: center; margin-bottom: 12px; }
body[data-mode="kiosk"] .s-selfie .shot-strip { display: none; }   /* no thumbnails of the shots already taken above the viewfinder (Mikel, Sept 10) */
body[data-mode="kiosk"] .s-selfie .cam-stage { width: min(100%, calc(100vh - 385px)); margin: 0 auto 14px; }   /* portrait: heading, tips, stage, buttons and fine print fit one screen */
body[data-mode="kiosk"] .s-selfie .btn-row { justify-content: center; max-width: 640px; margin: 0 auto; }
body[data-mode="kiosk"] .s-selfie .btn-row .btn { flex: 0 1 auto; min-width: 150px; }   /* Upload · Capture · Back camera on one centred line */
body[data-mode="kiosk"] .s-selfie .privacy-line { margin-top: 14px; }

/* ---------- kiosk in landscape: slimmer chrome, and the consult page becomes menu-left / image-right ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  body[data-mode="kiosk"] .shell { padding-top: 14px; }
  body[data-mode="kiosk"] .topbar { margin-bottom: 10px; }
  body[data-mode="kiosk"] .topbar img.logo { height: 46px; }
  body[data-mode="kiosk"] .step-dots { margin-bottom: 10px; }
  body[data-mode="kiosk"] .s-selfie .sub { display: none; }             /* landscape: the tips row carries the guidance; the viewer gets the height */
  body[data-mode="kiosk"] .s-selfie h1 { font-size: 28px; margin-bottom: 8px; }
  body[data-mode="kiosk"] .s-selfie .tips { margin-bottom: 10px; }
  body[data-mode="kiosk"] .s-selfie .cam-stage { width: min(100%, calc(100vh - 292px)); margin-bottom: 12px; }
  body[data-mode="kiosk"] .s-selfie .privacy-line { margin-top: 8px; font-size: 11px; }
  body[data-mode="kiosk"] .screen.s-consult {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "head head" "menu stage" "menu btns" "menu fill" "foot foot";
    column-gap: 28px; row-gap: 0; align-items: start; min-height: calc(100vh - 120px);   /* row-gap: 0 — the generic .screen grid's 44px gap was pushing the buttons down */
  }
  /* The "Treatments" label sits in its own row above both columns, so the photo's top edge lines up
     with the first treatment card (Mikel, Sept 9). The menu wrapper dissolves into the grid; the
     scroll box moves to the rows. */
  body[data-mode="kiosk"] .s-consult .consult-menu { display: contents; }
  body[data-mode="kiosk"] .s-consult .consult-menu-head { grid-area: head; margin: 0 0 10px 2px; }
  body[data-mode="kiosk"] .s-consult .consult-rows { grid-area: menu; max-height: calc(100vh - 205px); overflow-y: auto; padding: 2px 10px 12px 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body[data-mode="kiosk"] .s-consult .consult-stage { grid-area: stage; width: min(46vw, calc(100vh - 340px)); margin: 0; justify-self: end; }
  body[data-mode="kiosk"] .s-consult .demo-banner { display: none; }   /* sample-mode notice stays in the row status; the image column must fit the screen */
  body[data-mode="kiosk"] .s-consult .consult-stage { position: relative; }
  body[data-mode="kiosk"] .s-consult .angle-toggle { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0;
    background: rgba(18, 10, 28, .82); border: 1px solid rgba(232, 206, 154, .55); box-shadow: 0 4px 18px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }   /* legible over the photo (Mikel: "hard to see") */
  body[data-mode="kiosk"] .s-consult .angle-toggle button { color: var(--porcelain); font-size: 14px; padding: 10px 24px; }
  body[data-mode="kiosk"] .s-consult .angle-toggle button.on { color: #241238; }   /* over the photo, between the Before/After tags */
  body[data-mode="kiosk"] .s-consult .ba-hold-hint { display: none; }
  body[data-mode="kiosk"] .s-consult .ba-hold-hint { margin-bottom: 6px; }
  body[data-mode="kiosk"] .s-consult .consult-status { margin: 0 0 6px; }
  body[data-mode="kiosk"] .s-consult .consult-ba { width: 100%; }
  body[data-mode="kiosk"] .s-consult .consult-rows { grid-template-columns: 1fr; }
  body[data-mode="kiosk"] .s-consult .btn-row { grid-area: btns; margin-top: 8px; width: min(46vw, calc(100vh - 340px)); justify-content: center; justify-self: end; flex-wrap: nowrap; gap: 8px; }   /* same width as the photo, centred under it; one gold primary, two ghost utilities */
  body[data-mode="kiosk"] .s-consult .btn-row .btn { flex: 0 0 auto; min-width: 0; white-space: nowrap; font-size: 13px; padding: 12px 14px; }
  body[data-mode="kiosk"] .s-consult .btn-row #shareBtn { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #241238; border-color: transparent; }
  body[data-mode="kiosk"] .s-consult .btn-row #retakePhotos, body[data-mode="kiosk"] .s-consult .btn-row #startOver { border-color: rgba(255, 255, 255, .22); color: var(--ink-soft); padding: 12px 12px; }
  body[data-mode="kiosk"] .s-consult .disclaimer { grid-area: foot; margin-top: 10px; }
}

/* ---------- rotate hint: shown when the consult page opens in portrait ---------- */
.rotate-hint { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(8, 5, 12, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 24px; }
.rotate-hint[hidden] { display: none; }
.rotate-card { background: var(--plum); border: 1px solid var(--plum-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px 24px; max-width: 360px; text-align: center; }
.rotate-card b { display: block; font-family: var(--serif), Georgia, serif; font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.rotate-card span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.45; }
.rotate-device { position: relative; width: 56px; height: 80px; margin: 0 auto 20px; border: 3px solid var(--gold); border-radius: 9px; box-shadow: 0 0 24px rgba(201, 162, 75, .35); animation: rotateDevice 2.6s ease-in-out infinite; }
.rotate-device::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; border: 2px solid var(--gold); }
@keyframes rotateDevice { 0%, 12% { transform: rotate(0); } 48%, 72% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .rotate-device { animation: none; transform: rotate(-90deg); } }

/* ---------- Back button (every screen after the first) + camera ready check ---------- */
.topbar { position: relative; }
.back-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); color: var(--porcelain); font: 600 14px var(--sans), sans-serif; padding: 9px 16px 9px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
a.back-btn { text-decoration: none; line-height: normal; }   /* the first-screen Back is a link to the site; same pill as the button */
.back-btn:hover { border-color: var(--gold); }
body[data-mode="kiosk"] .back-btn { font-size: 15px; padding: 11px 18px 11px 14px; }
/* Reserve room for the back pill so the centered logo never sits under it (was overlapping at every width).
   The reserve is symmetric: a left-only reserve centred the logo in the space beside the pill, i.e. half the
   reserve right of the page centre (56px at desktop) — Mikel, Sept 28 2026: "recenter the logo". */
.topbar.has-back { padding-left: 112px; padding-right: 112px; }
body[data-mode="kiosk"] .topbar.has-back { padding-left: 130px; padding-right: 130px; }
body[data-mode="embed"] .topbar.has-back { padding-left: 100px; padding-right: 100px; }
/* Phone-width consult links (kiosk mode is iPad-first but nothing blocks a phone from opening one):
   the full lockup logo + a "‹ Back" text pill don't both fit beside each other on a 375-430px screen.
   Shrink the logo and drop the back button to an icon so there's room for both, with no overlap or overflow. */
@media (max-width: 480px) {
  body[data-mode="kiosk"] .topbar img.logo { height: 42px; }
  .back-btn .back-label { display: none; }
  .back-btn { padding: 10px 13px; }
  .topbar.has-back { padding-left: 60px; padding-right: 60px; }
  body[data-mode="kiosk"] .topbar.has-back { padding-left: 60px; padding-right: 60px; }
}
.cam-arm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }   /* centred in the viewfinder */
.cam-arm span { background: rgba(18, 10, 28, .82); border: 1px solid rgba(232, 206, 154, .6); color: var(--porcelain); font: 600 14px var(--sans), sans-serif; letter-spacing: .04em; padding: 10px 18px; border-radius: 999px; animation: armPulse 1.6s ease-in-out infinite; }
@keyframes armPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .45); } 50% { box-shadow: 0 0 0 10px rgba(201, 162, 75, 0); } }
@media (prefers-reduced-motion: reduce) { .cam-arm span { animation: none; } }

/* ---------- consult: angle thumbnails + selected chips under the buttons (idea B) ---------- */
.consult-extra { display: flex; gap: 12px; align-items: stretch; margin-top: 10px; text-align: left; }
.angle-thumbs { display: flex; gap: 8px; flex: 0 0 auto; }
.angle-thumbs .thumb { position: relative; width: 88px; height: 88px; padding: 0; border: 1px solid var(--plum-line); border-radius: 12px; overflow: hidden; background: #120a20; cursor: pointer; }
.angle-thumbs .thumb canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.angle-thumbs .thumb span { position: absolute; inset-inline-start: 8px; top: 8px; font: 600 10px var(--sans), sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--porcelain); background: rgba(20, 10, 30, .8); padding: 4px 8px; border-radius: 999px; }
.angle-thumbs .thumb.on { outline: 2px solid var(--gold); outline-offset: -1px; }
.angle-thumbs .thumb.on span { color: var(--gold-light); }
.sel-card { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(201, 162, 75, .28); border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .03); }
.sel-head { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; display: flex; justify-content: space-between; }
.sel-head span { text-transform: none; letter-spacing: 0; color: var(--gold-light); }
.sel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-chips .chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-light); white-space: nowrap; }
.sel-chips .chip.dim { border-color: rgba(255, 255, 255, .2); color: var(--ink-soft); }
@media (orientation: landscape) and (min-width: 700px) {
  body[data-mode="kiosk"] .s-consult .consult-extra { grid-area: fill; width: min(46vw, calc(100vh - 340px)); justify-self: end; margin-top: 8px; }
}

.linklike { background: none; border: 0; padding: 4px 8px; margin: -4px 0 6px; color: var(--gold-light); font: 600 12.5px var(--sans), sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Surgery the practice cannot perform ─────────────────────────────────────────────────────────
   A treatments.catalog.js entry with `surgical: true` is one a practice showing the preview
   cannot deliver (none at present). The catalog's presentation rule is that a caption does not cure a
   false impression, so the separation is structural: its own section BELOW the injectables, a badge
   on the card, and a badge that rides with the preview image — because the image is what gets
   screenshotted and shared out of context. The booking CTA is replaced by a referral ask in app.js. */
.treat-surgical { margin: 4px 0 24px; padding-top: 18px; border-top: 1px solid var(--plum-line); }
.treat-surgical h2 {
  font-family: var(--sans), sans-serif;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 6px;
}
.treat-surgical .sub { margin-bottom: 14px; }
.treat-surgical .treat-grid { margin-bottom: 0; }
.treat-card .surg-badge {
  display: inline-block; margin-bottom: 7px; font-style: normal;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plum-deep, #1B0F2E); background: var(--gold);
  padding: 3px 7px; border-radius: 3px;
}
.surg-note {
  margin: 10px 0 0; padding: 11px 13px;
  border: 1px solid rgba(201, 162, 75, .45);
  border-radius: var(--radius);
  background: rgba(201, 162, 75, .08);
  font-size: 12.5px; line-height: 1.5; color: var(--porcelain);
}
.surg-note b { color: var(--gold); }

/* ---------- phone consult (≤480 px): the iPhone layout, same as the iOS app's compact consult ----------
   Mikel, Sept 27 2026: "iphone is a nightmare as far as usability… need to reimagine the user experience
   for iphone." Photo up top, full width and square; the treatments in a draggable bottom sheet that takes
   all the remaining height (app.js phoneConsult sizes it and moves Save / Retake / Start over / the
   disclaimer into it). Back chevron top-right (clear of the slider's rest position at the left), the
   Simulated badge top-right of the photo (clear of Front/Side), one tappable disclaimer line. */
html.phone-consult, html.phone-consult body { height: 100%; overflow: hidden; overscroll-behavior: none; }
@media (max-width: 480px) {
  body[data-mode="kiosk"] .shell:has(.s-consult) { padding: 10px 14px 0; }
  body[data-mode="kiosk"] .shell:has(.s-consult) .topbar { margin-bottom: 8px; padding: 0 44px 0 0; min-height: 44px; }
  body[data-mode="kiosk"] .shell:has(.s-consult) .topbar img.logo { height: 26px; }
  body[data-mode="kiosk"] .shell:has(.s-consult) .step-dots { display: none; }
  body[data-mode="kiosk"] .shell:has(.s-consult) .back-btn { left: auto; right: 0; }
  body[data-mode="kiosk"] .s-consult { display: block; }
  body[data-mode="kiosk"] .s-consult .consult-stage { position: relative; width: 100%; max-width: none; margin: 0; display: flex; flex-direction: column; }
  body[data-mode="kiosk"] .s-consult .consult-ba { order: 1; width: 100%; margin: 0; border-radius: 18px; }
  body[data-mode="kiosk"] .s-consult .ba-sim { top: 12px; bottom: auto; }
  body[data-mode="kiosk"] .s-consult .angle-toggle { order: 2; position: relative; z-index: 3; align-self: center; margin: -50px 0 14px;
    background: rgba(18, 10, 28, .82); border: 1px solid rgba(232, 206, 154, .55); box-shadow: 0 4px 18px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  body[data-mode="kiosk"] .s-consult .angle-toggle button { color: var(--porcelain); font-size: 13px; padding: 8px 18px; }
  body[data-mode="kiosk"] .s-consult .angle-toggle button.on { color: #241238; }
  body[data-mode="kiosk"] .s-consult .ba-hold-hint { display: none; }
  body[data-mode="kiosk"] .s-consult .consult-status { order: 3; margin: 0; min-height: 0; font-size: 12px; text-align: center; }
  body[data-mode="kiosk"] .s-consult #demoPatientBtn { order: 4; align-self: center; margin: 0; font-size: 11.5px; }
  body[data-mode="kiosk"] .s-consult .demo-banner { display: none; }
  body[data-mode="kiosk"] .s-consult .btn-row, body[data-mode="kiosk"] .s-consult .consult-extra { display: none; }
  /* the sheet — app.js phoneConsult() moves #consultMenu to <body> (the .fade-in screen is a transformed ancestor,
     which would otherwise become the containing block of this fixed element and pin it 100 px short of the bottom) */
  body[data-mode="kiosk"] .consult-menu.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 45vh; margin: 0; display: flex; flex-direction: column;
    background: var(--plum); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .45); transition: height .28s cubic-bezier(.2, .8, .2, 1); }
  body[data-mode="kiosk"] .consult-menu.sheet.dragging { transition: none; }
  body[data-mode="kiosk"] .consult-menu.sheet::before { content: ""; display: block; width: 36px; height: 5px; border-radius: 3px; background: rgba(248, 244, 239, .32); margin: 8px auto 0; flex: none; }
  body[data-mode="kiosk"] .consult-menu.sheet .consult-menu-head { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; padding: 8px 16px 8px; touch-action: none; cursor: grab;
    font: 600 22px var(--serif), Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--porcelain); }
  body[data-mode="kiosk"] .consult-menu.sheet .consult-menu-head span { font: 500 11px var(--sans), sans-serif; color: var(--ink-soft); margin-left: 4px; opacity: 1; }
  body[data-mode="kiosk"] .consult-menu.sheet .consult-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  body[data-mode="kiosk"] .consult-menu.sheet .icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 18px var(--sans), sans-serif; line-height: 1; cursor: pointer; }
  body[data-mode="kiosk"] .consult-menu.sheet #shareBtn.icon-btn { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #241238; border: 0; margin: 0; min-width: 0; width: 38px; }
  body[data-mode="kiosk"] .consult-menu.sheet #moreBtn { background: rgba(255, 255, 255, .08); border: 1px solid var(--plum-line); color: var(--porcelain); }
  body[data-mode="kiosk"] .consult-menu.sheet .more-wrap { position: relative; }
  body[data-mode="kiosk"] .consult-menu.sheet .more-menu { position: absolute; right: 0; top: 44px; z-index: 5; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--plum-deep); border: 1px solid var(--plum-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 2px; }
  body[data-mode="kiosk"] .consult-menu.sheet .more-menu[hidden] { display: none; }
  body[data-mode="kiosk"] .consult-menu.sheet .more-menu .btn { margin: 0; width: 100%; min-width: 0; text-align: left; border: 0; background: none; padding: 11px 12px; font-size: 15px; color: var(--porcelain); border-radius: 10px; }
  body[data-mode="kiosk"] .consult-menu.sheet .more-menu #startOver { color: var(--blush); }
  body[data-mode="kiosk"] .consult-menu.sheet .more-menu .linklike { margin: 0; padding: 11px 12px; font-size: 15px; text-decoration: none; text-align: left; color: var(--gold-light); border-radius: 10px; }
  body[data-mode="kiosk"] .consult-menu.sheet .consult-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 16px 12px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; grid-template-columns: 1fr; }
  body[data-mode="kiosk"] .consult-menu.sheet .disclaimer { flex: none; margin: 0; padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(74, 47, 102, .6); background: rgba(27, 15, 46, .92);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  body[data-mode="kiosk"] .consult-menu.sheet .disclaimer::before { content: "ⓘ "; color: var(--gold-light); }
  body[data-mode="kiosk"] .consult-menu.sheet .disclaimer.open { white-space: normal; }
}

/* ---------- Edge Light — FaceTime's light ring, replicated on the selfie screen (app.js edgeLightSync) ----------
   Reads as an actual ring light (Mikel, Sept 27: "much more crisp… too wide and blurred"): a crisp, evenly bright
   band hugging the edge of the whole viewport, with only a thin soft halo bleeding inward; when a face is in the
   viewfinder the band is brightest around it (a radial mask centred on the face) and never dimmer than 70 %
   elsewhere. Brightness = opacity, set inline from the slider; the light is white. Never intercepts touches. */
.edge-light { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: var(--el-opacity, 1); transition: opacity .35s;
  border: calc(min(100vw, 100vh) * .07) solid #fff; border-radius: calc(min(100vw, 100vh) * .11);
  box-shadow: inset 0 0 calc(min(100vw, 100vh) * .015) 0 rgba(255, 255, 255, .5); }   /* a whisper of halo; the brightness is the crisp band (Mikel, Sept 27: "make it like a ring light like we had it") */
.edge-light.aimed { -webkit-mask-image: radial-gradient(circle at var(--el-x, 50%) var(--el-y, 50%), #000 30vmin, rgba(0, 0, 0, .7) 70vmax);
  mask-image: radial-gradient(circle at var(--el-x, 50%) var(--el-y, 50%), #000 30vmin, rgba(0, 0, 0, .7) 70vmax); }
#edgeLightBtn.on { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #241238; border-color: transparent; }
.edge-light-ctl { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; margin: 10px auto 0; max-width: 640px; font: 500 12px var(--sans), sans-serif; color: var(--ink-soft); }
.edge-light-ctl[hidden] { display: none; }
.edge-light-ctl label { display: flex; align-items: center; gap: 8px; }
.edge-light-ctl input[type="range"] { width: 120px; margin: 0; accent-color: var(--gold); }
.edge-light-ctl input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
/* rendering mark sized to the photo: 104 px on an iPad, 56 px on a phone (Mikel, Sept 27) */
@media (max-width: 480px) {
  .ba-render { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  .ba-render img { width: 56px; height: 56px; }
  .ba-render .ba-ck { font-size: 42px; }
}

/* ---------- Liquid Glass parity with the iOS app (Oct 8 2026; aftervue-ios App/LiquidGlass.swift) ----------
   Same three rules as the app: only plum surfaces become glass; gold stays opaque (translucent gold over skin drifts
   peach — Mikel: "some gold looks peach"); the sharp photo never moves — what runs edge to edge underneath is a blurred
   continuation of the same photo (body.consult-glass::before, set by app.js render()). Falls back to near-opaque plum
   where the browser has no backdrop-filter or the user asked for reduced transparency. Kiosk consult screen only. */
:root { --glass-plum: rgba(27, 15, 46, .46); --glass-line: rgba(248, 244, 239, .14); --glass-blur: blur(28px) saturate(1.35);
  --glass-shade: rgba(27, 15, 46, .62); --glass-solid: rgba(27, 15, 46, .95); }
/* Tenant-aware: the glass takes its tint from the tenant's own --plum-deep (Asunshine's ink, not AfterVue's plum — config.js
   tenants.asunshine), so a branded practice code keeps its palette. Browsers without color-mix keep the plum literals above. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root { --glass-plum: color-mix(in srgb, var(--plum-deep) 46%, transparent); --glass-shade: color-mix(in srgb, var(--plum-deep) 62%, transparent);
    --glass-solid: color-mix(in srgb, var(--plum-deep) 95%, transparent); }
}
body[data-mode="kiosk"].consult-glass { isolation: isolate; }
body[data-mode="kiosk"].consult-glass::before { content: ""; position: fixed; inset: -80px; z-index: -1; pointer-events: none;
  background-color: var(--plum-deep);
  background-image: linear-gradient(180deg, var(--glass-shade), var(--glass-shade)), var(--consult-photo, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(48px) saturate(1.1); }
body[data-mode="kiosk"].consult-glass .consult-menu.sheet,
body[data-mode="kiosk"].consult-glass .consult-menu.sheet #moreBtn,
body[data-mode="kiosk"].consult-glass .s-consult .btn-row #retakePhotos,
body[data-mode="kiosk"].consult-glass .s-consult .btn-row #startOver,
body[data-mode="kiosk"].consult-glass .s-consult .angle-toggle,
body[data-mode="kiosk"].consult-glass .s-consult .ba-sim {
  background: var(--glass-plum); border: 1px solid var(--glass-line); box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
body[data-mode="kiosk"].consult-glass .s-consult .btn-row .btn { border-radius: 999px; }   /* pills, like the app's dock */
body[data-mode="kiosk"].consult-glass .s-consult .btn-row #retakePhotos, body[data-mode="kiosk"].consult-glass .s-consult .btn-row #startOver { color: var(--porcelain); }
body[data-mode="kiosk"].consult-glass .s-consult .btn-row #startOver { color: var(--blush); }
body[data-mode="kiosk"].consult-glass .s-consult .angle-toggle button.on { color: #241238; }   /* the gold segment stays opaque */
@media (min-width: 481px) {
  /* the treatment column becomes the floating glass panel (on a phone the whole sheet is the panel) */
  body[data-mode="kiosk"].consult-glass .s-consult .consult-rows { background: var(--glass-plum); border: 1px solid var(--glass-line); border-radius: 28px; padding: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
@media (max-width: 480px) {
  body[data-mode="kiosk"].consult-glass .consult-menu.sheet { border-radius: 28px 28px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); }
  body[data-mode="kiosk"].consult-glass .consult-menu.sheet .disclaimer { background: var(--glass-plum); border-top-color: var(--glass-line);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-mode="kiosk"].consult-glass .consult-menu.sheet, body[data-mode="kiosk"].consult-glass .consult-menu.sheet #moreBtn,
  body[data-mode="kiosk"].consult-glass .s-consult .btn-row #retakePhotos, body[data-mode="kiosk"].consult-glass .s-consult .btn-row #startOver,
  body[data-mode="kiosk"].consult-glass .s-consult .angle-toggle, body[data-mode="kiosk"].consult-glass .s-consult .ba-sim,
  body[data-mode="kiosk"].consult-glass .s-consult .consult-rows, body[data-mode="kiosk"].consult-glass .consult-menu.sheet .disclaimer { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-mode="kiosk"].consult-glass::before { display: none; }
  body[data-mode="kiosk"].consult-glass .consult-menu.sheet, body[data-mode="kiosk"].consult-glass .consult-menu.sheet #moreBtn,
  body[data-mode="kiosk"].consult-glass .s-consult .btn-row #retakePhotos, body[data-mode="kiosk"].consult-glass .s-consult .btn-row #startOver,
  body[data-mode="kiosk"].consult-glass .s-consult .angle-toggle, body[data-mode="kiosk"].consult-glass .s-consult .ba-sim,
  body[data-mode="kiosk"].consult-glass .s-consult .consult-rows, body[data-mode="kiosk"].consult-glass .consult-menu.sheet .disclaimer {
    background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Right-to-left languages (Arabic, Hebrew — i18n.js sets <html dir="rtl">). Flex and grid mirror on their own; the
   few physically positioned pieces are flipped here. The before/after slider stays physical on purpose: the handle,
   the wipe and the BEFORE/AFTER tags are the same gesture in every script, matching the iOS app. (Oct 9 2026) */
[dir="rtl"] .back-btn { left: auto; right: 0; padding: 9px 12px 9px 16px; }
[dir="rtl"] .back-btn .back-label { margin-inline-start: 2px; }
[dir="rtl"] .topbar .clinic { margin-inline-start: 10px; }
[dir="rtl"] .treat-card, [dir="rtl"] .trow-toggle, [dir="rtl"] .field, [dir="rtl"] .result-title, [dir="rtl"] .inten-row { text-align: start; }
[dir="rtl"] input[type="range"] { direction: ltr; }
[dir="rtl"] .inten-ticks { direction: ltr; }