/* GENERATED FILE: do not edit. Built by engine/build_css.py from assets/css/*.css
   partials: 00-tokens.css, 10-base.css, 20-instrument.css, 30-template-a.css, 31-calc-eyes.css, 32-calc-mirror.css, 33-calc-ratios.css, 34-calc-shape.css, 35-calc-profile.css, 36-calc-midface.css, 38-plain.css, 39-plain-compare.css, 40-cevo-blocks.css, 41-template-b.css, 51-template-c.css, 52-plain-guide.css, 53-template-c-plain.css, 61-template-d.css, 62-plain-study.css, 71-pinkmirror-alternative.css, 72-prettyscale-alternative.css, 73-looksmax-ai-alternative.css, 73-qoves-review.css, 74-umax-alternative.css, 77-ai-face-analyzer.css, 78-qoves-studio-alternative.css, 79-24mm-selfie-distortion-study.css, 79-facial-width-to-height-ratio-fwhr-guide.css, 90-tables.css, 95-noscroll.css
   content hash: 5a5fc6caac */

/* ---- 00-tokens.css ---- */
/* ==========================================================================
   00 · tokens. Fonts and every brand value. Mirrors Cevo/brand3/kit/tokens.css (Round 3 · Sage).
   Partials read only these properties. Edit partials, then: python3 engine/build_css.py
   ========================================================================== */

@font-face {
  font-family: "Switzer";
  src: url("./fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sage palette */
  --mist: #F3F5F2;          /* canvas */
  --paper: #E4EBE6;         /* bands */
  --cloud: #D2DCD5;
  --sage: #B8C7BD;
  --celadon: #7E9688;       /* decorative only: 2.9:1 on mist, never text */
  --field: #5E7367;         /* 4.6:1 on mist */
  --pine: #244839;
  --pine-hover: #1C382C;
  --obsidian: #111614;
  --card: #F8FAF7;          /* raised surface on mist */

  /* Ink on light */
  --ink: #111614;
  --ink-2: rgba(17, 22, 20, .70);   /* body-secondary, 7.0:1 on mist */
  --ink-3: rgba(17, 22, 20, .62);   /* meta, 5.2:1 on mist; never lighter for text */
  --ink-read: rgba(17, 22, 20, .80);/* long-form body copy */
  --tone: #6F857A;                  /* second clause of two-tone display type (>= 24px only), 3.6:1 on mist */
  --line: rgba(17, 22, 20, .10);    /* hairlines */
  --line-2: rgba(17, 22, 20, .16);  /* control borders */

  /* Ink on dark (pine, obsidian, stage chrome) */
  --ink-d: #F3F5F2;
  --ink-d-2: rgba(243, 245, 242, .74);
  --line-d: rgba(243, 245, 242, .14);

  /* Instrument (overlay on photos), as brand3 hero-hud.css */
  --hud-bg: rgba(17, 22, 20, .72);
  --hud-ring: rgba(243, 245, 242, .20);
  --hud-k: rgba(243, 245, 242, .84);
  --hud-line: rgba(243, 245, 242, .62);
  --hud-guide: rgba(243, 245, 242, .38);
  --stage-bg: #2A302C;

  /* Type */
  --font-sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: clamp(34px, 2.2vw + 24px, 56px);
  --fs-h2: clamp(28px, 1.25vw + 22px, 42px);
  --fs-h3: clamp(19px, .25vw + 18px, 21px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-ui: 13px;
  --fs-mono: 11px;

  /* Space and shape */
  --col: 1280px;
  --gutter: 32px;
  --sec: 120px;             /* section padding at 1440 */
  --r-card: 20px;
  --r-stage: 20px;
  --r-ctl: 999px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --shadow-1: 0 0 0 1px rgba(17, 22, 20, .06), 0 1px 2px -1px rgba(17, 22, 20, .06), 0 2px 4px 0 rgba(17, 22, 20, .04);
  --shadow-2: 0 0 0 1px rgba(17, 22, 20, .06), 0 2px 4px -2px rgba(17, 22, 20, .08), 0 12px 32px -12px rgba(17, 22, 20, .14);
  --focus: 0 0 0 2px var(--mist), 0 0 0 4px var(--pine);

  /* Legacy aliases: the old stylesheet's names, kept so un-migrated pages still resolve. Do not use in new markup. */
  --ink-body: #1B2621;
  --ink-muted: rgba(17, 22, 20, .70);
  --ink-subtle: rgba(17, 22, 20, .62);
  --ink-secondary: rgba(17, 22, 20, .70);
  --ink-dark-2: rgba(17, 22, 20, .70);
  --ink-dark-3: rgba(17, 22, 20, .62);
  --ink-on-dark: #F3F5F2;
  --ink-on-dark-muted: #D2DCD5;
  --surface-card: #F8FAF7;
  --surface-tint: #EBF0EC;
  --paper-card: #F8FAF7;
  --paper-line: rgba(17, 22, 20, .10);
  --paper-line-strong: rgba(17, 22, 20, .16);
  --border-subtle: rgba(17, 22, 20, .10);
  --border-strong: rgba(17, 22, 20, .16);
  --border-pine: rgba(36, 72, 57, .28);
  --pine-tint: rgba(36, 72, 57, .08);
  --warn-amber: #8A5A1C;
  --warn-amber-bg: #F4EBDD;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: var(--shadow-1);
  --shadow-elevated: var(--shadow-2);
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --sec: 72px; --fs-body: 16px; }
}

/* ---- 10-base.css ---- */
/* ==========================================================================
   10 · base. Reset, type, layout, staging bar, header, hero, sections, buttons, tables, FAQ, references,
   internal links, conversion band, footer. Shared by every template. Prefix: .ed-
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
  background: var(--mist);
  overflow-x: clip;
  caret-color: var(--pine);
  accent-color: var(--pine);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 380;
  letter-spacing: -.006em;
  word-spacing: .02em;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { flex-shrink: 0; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: rgba(36, 72, 57, .18); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html { scrollbar-color: rgba(17, 22, 20, .28) transparent; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-weight: 360; letter-spacing: -.02em; text-wrap: balance; color: var(--ink); }
.ed-h1 {
  font-size: var(--fs-h1); line-height: 1.05; font-weight: 340;
  letter-spacing: -.032em; word-spacing: .03em;
}
.ed-h2, .ed-section h2 {
  font-size: var(--fs-h2); line-height: 1.12; font-weight: 350;
  letter-spacing: -.028em; word-spacing: .03em;
}
.ed-h3, .ed-section h3 {
  font-size: var(--fs-h3); line-height: 1.3; font-weight: 450; letter-spacing: -.012em;
}
.ed-tone { color: var(--tone); }
.ed-band .ed-tone { color: var(--sage); }
p { text-wrap: pretty; }
strong, b { font-weight: 520; color: var(--ink); }
em, i { font-style: italic; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: currentColor; }
/* numbers, units, landmark ids: mono, mixed case, tabular */
code, kbd, .mono, .ed-num {
  font-family: var(--font-mono);
  font-size: max(.86em, 12px);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: none;
  padding: 0;
}
strong.mono, strong code, b.mono { font-weight: 400; color: var(--ink); }
.ed-lead, .ed-prose, .ed-answer { hanging-punctuation: first; }

/* ---------- layout ---------- */
.ed-wrap {
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main { display: block; }
.ed-section { padding-block: var(--sec); }
.ed-section--paper { background: var(--paper); }
/* hairline across the content column between two mist sections (brand3 rhythm) */
.ed-rule {
  background-image: linear-gradient(var(--line), var(--line));
  background-size: min(var(--col), 100% - 2 * var(--gutter)) 1px;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
/* heading column + body column */
.ed-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 40px;
  align-items: start;
}
.ed-split__head > * + * { margin-top: 20px; }
.ed-split__head p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 46ch; }
.ed-split--sticky .ed-split__head { position: sticky; top: 104px; }
.ed-full { margin-top: 56px; }
.ed-prose { color: var(--ink-read); max-width: 68ch; }
.ed-prose > * + * { margin-top: 1.05em; }
.ed-prose p { font-size: var(--fs-body); line-height: 1.65; }
.ed-prose strong { color: var(--ink); }
.ed-prose em { font-style: italic; }

@media (max-width: 999px) {
  .ed-split { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ed-split--sticky .ed-split__head { position: static; }
  .ed-full { margin-top: 40px; }
}

/* ---------- staging bar (internal preview chrome, not part of the public page) ---------- */
.ed-staging {
  background: var(--obsidian);
  color: var(--ink-d-2);
  font-size: 13px;
  line-height: 20px;
}
.ed-staging__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 36px;
  overflow: hidden;
  white-space: nowrap;
}
.ed-staging__meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-staging__meta b { font-weight: 450; color: var(--ink-d); }
.ed-staging__links { display: flex; gap: 4px; flex: none; flex-shrink: 0; }
.ed-staging__links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px;
  color: var(--ink-d-2); text-decoration: none; border-radius: 6px;
  transition: color .16s ease-out;
}
.ed-staging__links a:hover { color: var(--ink-d); }
.ed-staging__links a[aria-current="page"] { color: var(--ink-d); text-decoration: underline; text-decoration-color: rgba(243, 245, 242, .5); }
.ed-staging :focus-visible { outline-color: var(--mist); }
/* phones: never scroll sideways; the meta keeps one ellipsised line and the links wrap under it */
@media (max-width: 767px) {
  .ed-staging__inner { flex-wrap: wrap; gap: 0 12px; padding-block: 4px; }
  .ed-staging__meta { flex: 1 1 100%; padding-top: 4px; }
  .ed-staging__links { flex: 1 1 100%; flex-wrap: wrap; gap: 0 2px; margin-inline: -8px; }
}

/* ---------- header ---------- */
.ed-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(243, 245, 242, .94);
  box-shadow: 0 1px 0 var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .ed-head { background: rgba(243, 245, 242, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.ed-head__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 72px;
}
.ed-head__logo { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.ed-head__logo img { height: 30px; width: auto; margin-left: -2px; }
.ed-head__nav { display: flex; gap: 4px; }
.ed-head__nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 400; color: var(--ink-2); text-decoration: none;
  transition: color .16s ease-out, background-color .16s ease-out;
}
.ed-head__nav a:hover { color: var(--ink); background: rgba(17, 22, 20, .04); }
.ed-head__nav a[aria-current] { color: var(--ink); }
.ed-head__cta { justify-self: end; }
@media (max-width: 999px) {
  .ed-head__inner { grid-template-columns: 1fr auto; min-height: 64px; }
  .ed-head__nav { display: none; }
}

/* ---------- buttons ---------- */
.ed-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--pine); color: var(--mist);
  font-size: 15px; line-height: 20px; font-weight: 420; letter-spacing: -.004em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .125s ease-out;
}
.ed-btn svg { width: 18px; height: 18px; margin-right: -4px; }
.ed-btn:hover { background: var(--pine-hover); }
.ed-btn:active { transform: scale(.97); }
.ed-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.ed-btn--ghost svg { margin-right: 0; margin-left: -4px; }
.ed-btn--ghost:hover { background: rgba(17, 22, 20, .04); box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .24); }
.ed-btn--light { background: var(--mist); color: var(--obsidian); }
.ed-btn--light:hover { background: #E2E8E3; }
.ed-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.ed-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 999px; }
.ed-band .ed-btn:focus-visible, .ed-foot :focus-visible { outline-color: var(--mist); }
@media (max-width: 767px) { .ed-btn { height: 48px; } }
@media (max-width: 1023px) { .ed-btn--sm { height: 44px; } .ed-textbtn { min-height: 44px; padding: 0 8px; margin-right: -8px; } .ed-crumbs a { padding-block: 12px; margin-block: -8px; } }
@media (prefers-reduced-motion: reduce) { .ed-btn { transition: none; } .ed-btn:active { transform: none; } }

/* text button (Reset, Copy link): underlined on hover, 40px+ hit area */
.ed-textbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px;
  border: 0; background: none; color: var(--ink);
  font-size: 14px; font-weight: 420; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: .25em; text-decoration-thickness: 1px;
  transition: text-decoration-color .16s ease-out;
}
.ed-textbtn:hover { text-decoration-color: currentColor; }
.ed-textbtn svg { width: 16px; height: 16px; }

/* ---------- hero ---------- */
.ed-hero { padding-top: 36px; }
.ed-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--ink-3); }
.ed-crumbs a { color: var(--ink-3); text-decoration: none; padding-block: 4px; }
.ed-crumbs a:hover { color: var(--ink); }
.ed-crumbs span[aria-hidden] { opacity: .6; }
.ed-crumbs [aria-current] { color: var(--ink-2); }
.ed-hero .ed-h1 { margin-top: 24px; }
.ed-lead { font-size: 17px; line-height: 1.6; font-weight: 380; color: var(--ink-2); max-width: 64ch; }
.ed-lead strong { font-weight: 500; }
.ed-meta {
  display: flex; flex-wrap: wrap; gap: 4px 24px;   /* spacing only: a divider would dangle at the end of a wrapped line */
  font-size: 13px; line-height: 20px; color: var(--ink-3);
}
.ed-meta strong { font-weight: 450; color: var(--ink-2); }
@media (max-width: 767px) {
  .ed-hero { padding-top: 20px; }
  .ed-hero .ed-h1 { margin-top: 16px; }
  .ed-lead { font-size: 16px; }
  .ed-meta { flex-direction: column; gap: 4px; }
}

/* ---------- direct answer ---------- */
.ed-answer {
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink-read);
  font-size: 15px; line-height: 1.6;
}
.ed-answer > * + * { margin-top: 14px; }
.ed-answer strong { font-weight: 520; }
.ed-answer__formula {
  padding-top: 14px; margin-top: 20px !important;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
@media (max-width: 767px) { .ed-answer { padding: 22px 20px; font-size: 15px; } }

/* ---------- key list (labelled points beside a figure) ---------- */
.ed-keylist { list-style: none; display: grid; gap: 0; }
.ed-keylist li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ed-keylist li:last-child { border-bottom: 1px solid var(--line); }
.ed-keylist strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 480; color: var(--ink); }
.ed-keylist strong code { color: var(--ink-2); }
.ed-formula { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-3); overflow-wrap: anywhere; }

/* ---------- notes: practical points in a hairline grid (never icon cards) ---------- */
.ed-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
.ed-note { padding: 28px 0 32px; border-top: 1px solid var(--line); }
.ed-note h3 { max-width: 30ch; }
.ed-note p { margin-top: 12px; font-size: 16px; line-height: 1.62; color: var(--ink-read); max-width: 60ch; }
.ed-note__datum {
  margin-top: 14px !important;
  font-size: 13px !important; line-height: 19px !important; font-weight: 450; color: var(--pine) !important;
}
.ed-note__datum code, .ed-note__datum .mono { color: var(--pine); }
@media (max-width: 767px) { .ed-notes { grid-template-columns: minmax(0, 1fr); } .ed-note { padding: 24px 0 26px; } }

/* ---------- tables ----------
   No sideways scrolling, ever (Jim, 26 Oct 2026). A table sizes to its container and its cells wrap; when the
   container is narrower than 720px (phones, and narrow columns such as Template C's main column at ~1100px) each row
   becomes a stacked card whose values carry their column name from data-label (engine/tools/table_labels.py).
   The stacked layout lives in 90-tables.css so it also wins over template-specific table rules. */
.ed-table-wrap {
  container-type: inline-size;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.ed-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.ed-table caption { caption-side: top; text-align: left; padding: 18px 20px 0; font-size: 13px; color: var(--ink-3); }
.ed-table th, .ed-table td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.ed-table thead th { padding-block: 14px; font-size: 13px; line-height: 18px; font-weight: 420; color: var(--ink-3); background: var(--card); }
.ed-table thead tr > :first-child { border-top-left-radius: 16px; }
.ed-table thead tr > :last-child { border-top-right-radius: 16px; }
.ed-table tbody tr:last-child > * { border-bottom: 0; }
.ed-table tbody th, .ed-table td:first-child { font-weight: 450; color: var(--ink); }
.ed-table td { color: var(--ink-2); }
.ed-table td.mono, .ed-table .ed-num { font-size: 14px; color: var(--ink); }
/* numeric cells wrap only at their spaces, so a long range ("58–63 mm, avg 61.7 mm") gives the prose columns room;
   .ed-nowrap pins a short value to one line. */
.ed-table td.mono { white-space: normal; overflow-wrap: normal; text-wrap: balance; }
.ed-table td.mono.ed-nowrap { white-space: nowrap; }
.ed-table tbody tr { transition: background-color .16s ease-out; }
.ed-table tbody tr:hover > * { background: color-mix(in srgb, var(--pine) 3.5%, var(--card)); }
.ed-table .is-hl { background: color-mix(in srgb, var(--pine) 6%, var(--card)); }
.ed-table tbody tr:hover > .is-hl { background: color-mix(in srgb, var(--pine) 9%, var(--card)); }

/* ---------- FAQ (details/summary, brand3 rows) ---------- */
.ed-faq { border-top: 1px solid var(--line); }
.ed-faq__item { border-bottom: 1px solid var(--line); }
.ed-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 16px 0;
  list-style: none; cursor: pointer;
  font-size: 18px; line-height: 1.45; font-weight: 400; letter-spacing: -.01em; color: var(--ink);
  transition: color .16s ease-out;
}
.ed-faq__item summary::-webkit-details-marker { display: none; }
.ed-faq__item summary:hover { color: var(--pine); }
.ed-faq__item summary:focus-visible { outline-offset: 4px; }
.ed-faq__icon { width: 20px; height: 20px; flex: none; transition: transform .26s var(--ease); }
.ed-faq__item[open] .ed-faq__icon { transform: rotate(45deg); }
.ed-faq__a { padding: 0 48px 24px 0; }
.ed-faq__a p { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }
.ed-faq__a p + p { margin-top: .8em; }
@supports selector(::details-content) {
  .ed-faq__item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .3s var(--ease), content-visibility .3s allow-discrete;
  }
  .ed-faq__item[open]::details-content { block-size: auto; }
}
@media (max-width: 767px) {
  .ed-faq__item summary { min-height: 56px; padding: 14px 0; gap: 16px; font-size: 16px; }
  .ed-faq__a { padding-right: 16px; }
  .ed-faq__a p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-faq__icon { transition: none; }
  .ed-faq__item::details-content { transition: none; }
}

/* ---------- references ---------- */
.ed-refs { list-style: none; counter-reset: ref; border-top: 1px solid var(--line); }
.ed-refs li {
  counter-increment: ref;
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
}
.ed-refs li::before {
  content: counter(ref);
  font-family: var(--font-mono); font-size: 12px; line-height: 23px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ed-refs li > * { grid-column: 2; }
.ed-refs__who { color: var(--ink); font-weight: 480; }
.ed-refs__title { font-style: normal; color: var(--ink); }
.ed-refs__ids { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.ed-refs__ids a, .ed-refs__ids span {
  font-family: var(--font-mono); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums;
  color: var(--ink-2); overflow-wrap: anywhere;
}
.ed-refs__ids a { color: var(--pine); text-decoration: underline; text-decoration-color: rgba(36, 72, 57, .3); padding-block: 2px; }
.ed-refs__ids a:hover { text-decoration-color: currentColor; }

/* ---------- internal links ---------- */
.ed-links { list-style: none; border-top: 1px solid var(--line); }
.ed-links li { border-bottom: 1px solid var(--line); }
.ed-links a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
  padding: 22px 0; text-decoration: none;
}
.ed-links__title { font-size: 18px; line-height: 1.4; font-weight: 420; letter-spacing: -.01em; color: var(--ink); transition: color .16s ease-out; }
.ed-links__line { grid-column: 1; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ed-links svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--ink-3); transition: transform .2s var(--ease), color .2s; }
.ed-links a:hover .ed-links__title { color: var(--pine); }
.ed-links a:hover svg { transform: translate(2px, -2px); color: var(--pine); }
@media (max-width: 767px) { .ed-links__title { font-size: 16px; } .ed-links a { padding: 18px 0; } }

/* ---------- conversion band (pine) ---------- */
.ed-band { background: var(--pine); color: var(--ink-d); }
.ed-band__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px);
  align-items: center; padding-block: 112px;
}
.ed-band h2 { color: var(--ink-d); font-size: var(--fs-h2); line-height: 1.1; font-weight: 340; letter-spacing: -.03em; max-width: 22ch; }
.ed-band h2 span { display: block; }
.ed-band__sub { margin-top: 20px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: rgba(243, 245, 242, .82); }
.ed-band .ed-btn { margin-top: 32px; }
.ed-band__media { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; max-height: 480px; justify-self: start; width: 100%; max-width: 400px; background: #AEBEB4; }
.ed-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 899px) {
  .ed-band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-block: 72px; }
  .ed-band__media { justify-self: start; max-width: 100%; aspect-ratio: 5 / 4; }
}

/* the generated-model label: one treatment page-wide, inside the image, bottom-left */
.ed-genlabel {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0;
  max-width: calc(100% - 24px); padding: 4px 9px; border-radius: 999px;
  background: rgba(17, 22, 20, .72); color: var(--mist);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .01em;
  white-space: nowrap; pointer-events: none;
}

/* ---------- footer (obsidian) ---------- */
.ed-foot { background: var(--obsidian); color: var(--ink-d); }
.ed-foot__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 48px;
  padding-block: 80px 40px;
}
.ed-foot__logo img { height: 30px; width: auto; }
.ed-foot__line { margin-top: 20px; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--ink-d); }
.ed-foot__small { margin-top: 20px; font-size: 13px; line-height: 20px; color: var(--ink-d-2); }
.ed-foot__small + .ed-foot__small { margin-top: 4px; }
.ed-foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: end; gap: 32px; }
.ed-foot__label { margin-bottom: 8px; font-size: 13px; line-height: 20px; color: var(--ink-d-2); }
.ed-foot__nav ul { list-style: none; }
.ed-foot__nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 15px; line-height: 22px; color: var(--ink-d); text-decoration: none; transition: color .16s ease-out;
}
.ed-foot__nav a:hover { color: var(--cloud); text-decoration: underline; text-decoration-color: rgba(243, 245, 242, .4); }
.ed-foot__base {
  grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-d);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13px; line-height: 20px; color: var(--ink-d-2);
}
@media (max-width: 899px) {
  .ed-foot__inner { grid-template-columns: minmax(0, 1fr); padding-block: 64px 32px; }
  .ed-foot__nav { justify-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Numbers inside running prose stay in Switzer (tabular figures), as brand3's copy does: JetBrains Mono is for
   instruments, HUD pills, tables and code-like formulas, where its width reads as precision instead of noise. */
:where(p, li, dd, blockquote, summary, h1, h2, h3, h4, .ed-lead, td, th) :is(.mono, .ed-num, .tb-num):not(.ed-formula *) {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 20-instrument.css ---- */
/* ==========================================================================
   20 · instrument. The measuring stage over a real photo and everything around it: toolbar, segmented control,
   stage + overlay + pins + HUD pills, readouts, status line, sliders, bell curve, upload, styling teaser, static
   measured figure. Shared by Template A and by the widgets in C and D. Prefix: .ins-
   Coordinate rule: overlay coordinates are SOURCE-IMAGE pixels (720x900 frontal, 960x1200 profile). See DESIGN-SYSTEM.md.
   ========================================================================== */

.ins { display: grid; gap: 14px; min-width: 0; }

/* ---------- toolbar ---------- */
.ins-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- segmented control (brand3 "Measurements | Mesh") ---------- */
.ins-seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto;
  padding: 3px; border-radius: 999px;
  background: rgba(228, 235, 230, .7);
  box-shadow: inset 0 0 0 1px var(--line);
  max-width: 100%;
}
.ins-seg__opt {
  position: relative;
  appearance: none; border: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 18px; font-weight: 420; letter-spacing: -.003em;
  white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.ins-seg__opt::after { content: ""; position: absolute; inset: -5px -2px; }
.ins-seg__opt:hover { color: var(--ink); }
.ins-seg__opt[aria-pressed="true"] { background: var(--pine); color: var(--mist); box-shadow: 0 1px 2px rgba(17, 22, 20, .18); }
.ins-seg__opt:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 999px; }
.ins-seg__thumb {
  flex: none; width: 24px; height: 24px; margin-left: -8px; border-radius: 50%;
  object-fit: cover; object-position: 50% 40%;
  box-shadow: 0 0 0 1px rgba(17, 22, 20, .14);
}
.ins-seg__opt[aria-pressed="true"] .ins-seg__thumb { box-shadow: 0 0 0 1.5px rgba(243, 245, 242, .7); }
.ins-seg__opt .mono { font-size: 12px; opacity: .78; }
/* cast chips show the face and the sex, never the internal cast id (the aria-label names the face) */
.ins-seg__opt[data-cast] > .mono { display: none; }
/* frontal casts are told apart by face alone (two "Female" chips side by side read as a bug); profiles keep the word on desktop */
.ins-seg__opt[data-cast^="c"] > span { display: none; }
.ins-seg__opt[data-cast^="c"] { padding: 0 10px; }
.ins-seg__opt[data-cast^="c"] .ins-seg__thumb { margin-left: 0; }
@media (max-width: 767px) {
  .ins-seg__opt[data-cast] > span { display: none; }
  .ins-seg__opt[data-cast] { padding: 0 10px; }
  .ins-seg__opt[data-cast] .ins-seg__thumb { margin-left: 0; }
}
/* on-photo variant (dark glass) */
.ins-seg--dark { background: rgba(17, 22, 20, .55); box-shadow: inset 0 0 0 1px var(--hud-ring); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ins-seg--dark .ins-seg__opt { height: 30px; padding: 0 12px; font-size: 13px; color: var(--ink-d-2); }
.ins-seg--dark .ins-seg__opt:hover { color: var(--ink-d); }
.ins-seg--dark .ins-seg__opt[aria-pressed="true"] { background: var(--mist); color: var(--obsidian); box-shadow: none; }
.ins-seg--dark .ins-seg__opt:focus-visible { outline-color: var(--mist); }
@media (max-width: 767px) {
  .ins-seg__opt { height: 44px; padding: 0 12px; }
  .ins-seg--dark .ins-seg__opt { height: 44px; }
  .ins-seg--fill { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .ins-seg__long { display: none; }
}
@media (min-width: 768px) { .ins-seg__short { display: none; } }
/* tablets are touch devices too: full-size targets up to the desktop layout */
@media (min-width: 768px) and (max-width: 1023px) { .ins-seg__opt, .ins-seg--dark .ins-seg__opt { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ins-seg__opt { transition: none; } }

/* ---------- upload (label styled as a secondary pill; the input stays focusable) ---------- */
.ins-upload { position: relative; }
.ins-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.ins-upload:focus-within { outline: 2px solid var(--pine); outline-offset: 2px; }

/* ---------- stage ---------- */
.ins-stage, .calc-stage-wrap {
  --stage-ar: 4 / 5;
  position: relative;
  aspect-ratio: var(--stage-ar);
  width: 100%;
  border-radius: var(--r-stage);
  overflow: hidden;
  background: var(--stage-bg);
  isolation: isolate;
  touch-action: pan-y pinch-zoom;   /* the page still scrolls over a photo; pins set touch-action: none themselves */
  user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(17, 22, 20, .06), 0 24px 48px -28px rgba(17, 22, 20, .35);
}
.ins-stage__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  -webkit-user-drag: none; pointer-events: none;
}
/* JS camera mode: the image keeps its natural pixel size and is placed with one transform, so img and overlay share
   one source-pixel coordinate system at every zoom */
.ins-stage.is-cam .ins-stage__img { inset: auto; left: 0; top: 0; max-width: none; object-fit: fill; transform-origin: 0 0; will-change: transform; }
.ins-stage__tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 62% at 50% 46%, rgba(17, 22, 20, 0), rgba(17, 22, 20, .2)); }
.ins-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .3s var(--ease); }
.ins-stage:not(.is-ready) .ins-overlay, .ins-stage:not(.is-ready) .ins-pins, .ins-stage:not(.is-ready) .ins-hud { opacity: 0; }

/* overlay strokes: 1px at every size */
.ins-guide, .ins-line, .ins-line--strong, .ins-arc, .ins-tick { vector-effect: non-scaling-stroke; fill: none; stroke-width: 1; stroke-linecap: round; }
.ins-guide { stroke: var(--hud-guide); stroke-dasharray: 3 4; }
.ins-line { stroke: var(--hud-line); }
.ins-line--strong { stroke: rgba(243, 245, 242, .92); }
.ins-tick { stroke: rgba(243, 245, 242, .8); }
.ins-arc { stroke: rgba(243, 245, 242, .7); fill: rgba(243, 245, 242, .14); }
.ins-dot { fill: var(--mist); stroke: rgba(17, 22, 20, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* a faint dark under-stroke keeps hairlines readable on light skin and backgrounds */
.ins-shadow { stroke: rgba(17, 22, 20, .32); stroke-width: 2.5; fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }

/* draggable pins: HTML, 44px hit area, 12px visible ring */
.ins-pins, .ins-hud { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.ins-pin {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  transform: translate3d(var(--x, -99px), var(--y, -99px), 0);
  border-radius: 50%;
  pointer-events: auto; cursor: grab; touch-action: none;
  outline: none;
}
.ins-pin::before {
  content: ""; position: absolute; inset: 16px; border-radius: 50%;
  background: rgba(17, 22, 20, .26);
  box-shadow: 0 0 0 1.5px var(--mist), 0 1px 4px rgba(17, 22, 20, .45);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background-color .16s;
}
.ins-pin::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--mist); }
.ins-pin:hover::before { transform: scale(1.3); }
.ins-pin.is-drag { cursor: grabbing; }
.ins-pin.is-drag::before { transform: scale(1.5); background: rgba(36, 72, 57, .45); }
.ins-pin:focus-visible::before { transform: scale(1.3); box-shadow: 0 0 0 1.5px var(--mist), 0 0 0 4px rgba(36, 72, 57, .95), 0 0 0 5.5px rgba(243, 245, 242, .7); }
/* reference pins (pupils): quieter */
.ins-pin--ref::before { inset: 17px; background: transparent; box-shadow: 0 0 0 1px rgba(243, 245, 242, .8), 0 0 0 2px rgba(17, 22, 20, .25); }
.ins-pin--ref::after { inset: 21px; }

/* HUD pills: brand3 .hud-pill */
.ins-pill {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--hud-bg);
  box-shadow: inset 0 0 0 1px var(--hud-ring);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 11px; line-height: 15px; font-weight: 400; letter-spacing: .02em;
  color: var(--mist); white-space: nowrap;
  transform: translate3d(var(--x, 0), var(--y, 0), 0);
  pointer-events: none;
}
.ins-pill__k { color: var(--hud-k); }
.ins-pill__v { color: var(--mist); font-variant-numeric: tabular-nums; }
.ins-pill__ks { display: none; color: var(--hud-k); }
@media (max-width: 767px) {
  .ins-pill { padding: 4px 9px; gap: 6px; letter-spacing: .01em; }
  .ins-pill--short .ins-pill__k { display: none; }
  .ins-pill--short .ins-pill__ks { display: inline; }
}

/* chrome inside the stage corners */
.ins-corner { position: absolute; z-index: 4; display: flex; gap: 8px; align-items: center; }
.ins-corner--tl { left: 12px; top: 12px; }
.ins-corner--tr { right: 12px; top: 12px; }
.ins-corner--br { right: 12px; bottom: 12px; }
.ins-corner .ins-pill { position: static; transform: none; }
@media (max-width: 767px) { .ins-corner--tl.is-desk { display: none; } }

/* ---------- readouts ---------- */
.ins-readouts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* label, value and status share rows across the strip, so a two-line label never drops its value below its neighbours */
.ins-readout { padding: 16px 18px 18px; min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.ins-readout + .ins-readout { box-shadow: -1px 0 0 var(--line); }
.ins-readout__k { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ins-readout__v {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 28px; line-height: 32px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.ins-readout__u { font-size: 15px; letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }
/* the mono degree sign sits mid-cell; set it in Switzer so it hugs the number */
.ins-readout__deg { font-family: var(--font-sans); font-weight: 300; letter-spacing: 0; margin-left: .02em; }
.ins-readout__s { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); text-wrap: balance; }
.ins-readout--accent .ins-readout__v { color: var(--pine); }
@media (max-width: 767px) {
  .ins-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-readout { padding: 14px 16px 16px; }
  .ins-readout:nth-child(3) { box-shadow: 0 -1px 0 var(--line); }
  .ins-readout:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
  .ins-readout__v { font-size: 26px; line-height: 30px; }
}

/* status line under the stage */
.ins-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ins-status p { min-width: 0; }

/* ---------- slider (input type=range; JS sets --p to the filled percent) ---------- */
.ins-slider {
  --p: 50%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer;
}
@media (max-width: 1023px) { .ins-slider { height: 44px; } .ta-ctl select, .ins select { min-height: 44px; } }
.ins-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--pine) var(--p), var(--cloud) var(--p)); }
.ins-slider::-moz-range-track { height: 4px; border-radius: 4px; background: var(--cloud); }
.ins-slider::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--pine); }
.ins-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--mist); box-shadow: 0 0 0 1px rgba(17, 22, 20, .22), 0 2px 6px -1px rgba(17, 22, 20, .3);
  transition: transform .16s var(--ease-out), box-shadow .16s;
}
.ins-slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 1px rgba(17, 22, 20, .22), 0 2px 6px -1px rgba(17, 22, 20, .3); }
.ins-slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.ins-slider:active::-webkit-slider-thumb { transform: scale(1.14); }
.ins-slider:focus-visible { outline: none; }
.ins-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--mist), 0 0 0 4px var(--pine); }
.ins-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--mist), 0 0 0 4px var(--pine); }
.ins-field { display: grid; gap: 4px; }
.ins-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-2); }
.ins-field__row output { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- bell curve ---------- */
.ins-curve { position: relative; padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
/* the toggle stays top right whatever the subtitle's length; it drops under the title only when the title column
   would get narrower than 260px (phones) or an unbreakable run needs the room */
.ins-curve__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.ins-curve__head > :first-child { flex: 1 1 260px; }
.ins-curve__head > :not(:first-child) { flex: 0 1 auto; max-width: 100%; margin-left: auto; }
.ins-curve__title { font-size: 19px; line-height: 1.35; font-weight: 450; letter-spacing: -.012em; max-width: 26ch; }
.ins-curve__sub { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ins-curve__plot { position: relative; margin-top: 20px; }
.ins-curve__svg { width: 100%; height: 184px; overflow: visible; }
.ins-curve__area { fill: rgba(184, 199, 189, .42); }
.ins-curve__band { fill: rgba(126, 150, 136, .24); }
.ins-curve__line { fill: none; stroke: var(--celadon); stroke-width: 1.5; }
.ins-curve__axis { stroke: var(--line-2); stroke-width: 1; }
.ins-curve__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.ins-curve__mean { stroke: var(--celadon); stroke-width: 1; stroke-dasharray: 3 4; }
.ins-curve__tick { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.ins-curve__tick--mean { fill: var(--ink); }
.ins-curve__mk-line { stroke: var(--pine); stroke-width: 1; }
.ins-curve__mk-dot { fill: var(--pine); stroke: var(--card); stroke-width: 2; }
/* optional second reading (curve(...).update(..., second)): an open marker behind the main one, own pill .ins-pill--2 */
.ins-curve__mk2-line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.ins-curve__mk2-dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.ins-curve .ins-pill--2 { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.ins-curve .ins-pill { transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -100%); }
.ins-curve__note { margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ins-curve__key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: rgba(126, 150, 136, .45); vertical-align: -1px; }
.ins-curve g, .ins-curve path { transition: none; }
@media (max-width: 767px) { .ins-curve { padding: 20px 16px; } .ins-curve__svg { height: 168px; } }

/* ---------- styling teaser (blurred real "after" crops) ---------- */
.ins-teaser { container-type: inline-size; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
.ins-teaser__grid { display: grid; gap: 0; padding: 16px; }
.ins-teaser__shots { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: 12px; overflow: hidden; }
.ins-teaser__shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sage); }
.ins-teaser__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: blur(16px) saturate(1.05); transform: scale(1.15); }
.ins-teaser__lock {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(243, 245, 242, .9); color: var(--ink); box-shadow: 0 4px 16px -4px rgba(17, 22, 20, .35);
}
.ins-teaser__lock svg { width: 18px; height: 18px; }
.ins-teaser__body { padding: 18px 6px 4px; }
.ins-teaser__copy { font-size: 15px; line-height: 1.55; color: var(--ink-read); }
.ins-teaser__copy strong { color: var(--ink); }
.ins-teaser .ed-btn { margin-top: 16px; }
@container (min-width: 640px) {
  .ins-teaser__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 32px; align-items: center; padding: 16px; }
  .ins-teaser__body { padding: 0 8px 0 0; max-width: 52ch; }
  .ins-teaser__copy { font-size: 16px; }
}

/* ---------- static measured figure (same coordinate rule, aspect = the crop window) ---------- */
.ins-figure { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--stage-bg); isolation: isolate; }
.ins-figure > img { position: absolute; max-width: none; pointer-events: none; }
.ins-figure .ins-overlay { position: absolute; inset: 0; }
.ins-figure .ins-pill { transform: translate(-50%, -100%); }
.ins-figure .ins-pill.is-below { transform: translate(-50%, 0); }
.ins-figure .ins-pill.is-left { transform: translate(-100%, -50%); }
.ins-figure .ins-pill.is-right { transform: translate(0, -50%); }

/* ---------- uploaded photo, pins not yet placed (cevo-instrument.js puts .is-unplaced on .ins) ---------- */
/* the pins start on average positions, so every reading stays faded until each pin has been moved once */
.ins.is-unplaced .ins-readout__v, .ins.is-unplaced .ins-readout__s, .ins.is-unplaced .ins-hud .ins-pill,
.ins.is-unplaced .ta-verdict, .ins.is-unplaced .ta-cm-verdict,
.ins.is-unplaced ~ .ta-rail .ins-curve .ins-pill, .ins.is-unplaced ~ .ta-rail .ins-curve__mk-dot,
.ins.is-unplaced ~ .ta-rail .ins-curve__mk-line { opacity: .35; transition: opacity .2s var(--ease); }
body:has(.ins.is-unplaced) .ins-teaser__copy .mono { opacity: .35; transition: opacity .2s var(--ease); }

/* ---- 30-template-a.css ---- */
/* ==========================================================================
   30 · Template A, interactive calculator (/tools/*). Prefix: .ta-
   1440: H1 left, lead + meta right; then instrument ~58% left, rail ~42% right (answer, curve, teaser).
   Phone: H1, lead, instrument, readouts, answer, curve, teaser.
   ========================================================================== */

.ta-hero__top {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 48px; row-gap: 20px; align-items: end;
  margin-top: 24px;
}
.ta-hero__top .ed-h1 { margin-top: 0; max-width: 22ch; }
.ta-hero__aside > * + * { margin-top: 20px; }
.ta-hero__aside .ed-lead { font-size: 18px; line-height: 1.55; }
.ta-hero__aside .ed-meta, .ta-rail > .ed-meta { flex-direction: column; gap: 2px; margin-top: 0; }
.ta-hero__aside .ed-meta > span, .ta-rail > .ed-meta > span { box-shadow: none; margin: 0; padding: 0; }

.ta-atf {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 48px; row-gap: 24px; align-items: start;
  margin-top: 48px;
}
.ta-rail { display: grid; gap: 20px; min-width: 0; }
.ta-teaser { margin-top: 24px; }
.ta-atf .ins-stage { --stage-ar: 1 / 1; }

.ta-body { padding-top: var(--sec); }

/* the measured figure beside the key list */
.ta-figure-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; row-gap: 32px; align-items: start; }

@media (max-width: 1099px) {
  .ta-hero__top { grid-template-columns: minmax(0, 1fr); }
  .ta-hero__top .ed-h1 { max-width: 22ch; }
  .ta-hero__aside .ed-lead { font-size: 18px; }
  .ta-figure-grid { grid-template-columns: minmax(0, 1fr); }
}
/* the instrument keeps its two-column layout down to 1024 (landscape tablets, small laptops) */
@media (max-width: 1023px) {
  .ta-atf { grid-template-columns: minmax(0, 1fr); }
  .ta-atf, .ta-teaser { max-width: 640px; margin-inline: auto; }
  .ta-atf .ins-stage { --stage-ar: 4 / 5; }
}
@media (max-width: 767px) {
  .ta-hero__top { margin-top: 16px; }
  .ta-hero__aside .ed-lead { font-size: 17px; }
  .ta-atf { margin-top: 20px; row-gap: 16px; }
  .ta-rail { gap: 16px; }
  .ta-teaser { margin-top: 16px; }
}

/* measured figure: the corner labels need room; phones keep the iris and the two tilt pills */
@media (max-width: 767px) { .ta-fig-desk { display: none; } }

/* ==========================================================================
   Shared Template A pieces: ONE version each. The per-group names that 31-36 built first stay as aliases in these
   selector lists (their few real differences are small overrides in their own partial), so existing pages render
   unchanged. New markup uses the first name in each list. Alias map: DESIGN-SYSTEM.md "Template A shared pieces".
   ========================================================================== */

/* control card: a manual input (slider, select) beside the pins */
.ta-ctl, .ta-adjust, .ta-cm-ctrl, .ta-mf-ctl, .ta-prof-ctl, .ta-manual {
  display: grid; gap: 2px;
  padding: 14px 18px 12px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1);
}
.ta-ctl .ins-field__row label, .ta-adjust .ins-field__row label, .ta-cm-ctrl .ins-field__row label,
.ta-mf-ctl .ins-field__row label, .ta-prof-ctl .ins-field__row label, .ta-manual .ins-field__row label { color: var(--ink); }
.ta-ctl .ins-field__row output, .ta-adjust .ins-field__row output, .ta-cm-ctrl output,
.ta-mf-ctl .ins-field__row output, .ta-prof-ctl .ins-field__row output { white-space: nowrap; }
.ta-ctl__hint, .ta-adjust__hint, .ta-mf-ctl__hint, .ta-prof-ctl__hint { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* the slider's scale under it: low, middle, high (the middle drops on phones) */
.ta-ticks, .ta-mf-ticks, .ta-cm-ticks {
  position: relative; display: block; height: 16px;
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
/* each label sits at its value: style="--at: 25%" on the span (the slider's percent for that value);
   without it the ends sit at 0% / 100% and the middle at 50% */
.ta-ticks > span, .ta-mf-ticks > span, .ta-cm-ticks > span {
  position: absolute; top: 0; left: var(--at, 50%); transform: translateX(-50%); white-space: nowrap;
}
.ta-ticks > span:first-child, .ta-mf-ticks > span:first-child, .ta-cm-ticks > span:first-child { left: var(--at, 0%); transform: none; }
.ta-ticks > span:last-child, .ta-mf-ticks > span:last-child, .ta-cm-ticks > span:last-child { left: var(--at, 100%); transform: translateX(-100%); }
/* phones: the two ends only, in flow so a long end label can wrap */
@media (max-width: 767px) {
  .ta-ticks, .ta-mf-ticks, .ta-cm-ticks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: auto; }
  .ta-ticks > span, .ta-mf-ticks > span, .ta-cm-ticks > span { position: static; transform: none; white-space: normal; }
  .ta-ticks > span:last-child, .ta-mf-ticks > span:last-child, .ta-cm-ticks > span:last-child { text-align: right; transform: none; }
  .ta-ticks > span:nth-child(2):not(:last-child), .ta-mf-ticks > span:nth-child(2):not(:last-child), .ta-cm-ticks > span:nth-child(2):not(:last-child) { display: none; }
}

/* the live verdict / live reading under the readouts: plain sentences, no label chrome */
.ta-verdict, .ta-cm-verdict {
  padding: 16px 20px 18px;
  border-radius: 16px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ta-verdict__t { font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink); letter-spacing: -.005em; }
.ta-verdict__c { margin-top: 6px; font-size: 14px; line-height: 1.58; color: var(--ink-2); max-width: 68ch; }
.ta-verdict__c strong { font-weight: 500; color: var(--ink); }
.ta-verdict .mono { color: var(--ink); }

/* rail card: a quiet card in the rail that updates with the reading (styling match) */
.ta-card, .ta-rx, .ta-rxs { padding: 24px 28px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
@media (max-width: 767px) { .ta-card, .ta-rx, .ta-rxs { padding: 20px; } }

/* portrait row: three measured figures side by side (one per example face), each with a heading and one paragraph */
.ta-trio, .ta-mf-trio, .ta-cm-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.ta-trio__item, .ta-mf-trio__item, .ta-cm-trio__item { min-width: 0; }
.ta-trio__item > h3, .ta-mf-trio__item > h3 { margin-top: 18px; font-size: 18px; line-height: 1.35; font-weight: 450; letter-spacing: -.01em; }
.ta-trio__item > p, .ta-mf-trio__item > p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 1099px) { .ta-trio, .ta-mf-trio, .ta-cm-trio { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }

/* sticky rail: a rail much shorter than its instrument stays in view while the instrument scrolls */
@media (min-width: 1100px) { .ta-rail--sticky, .ta-rail.ta-cm-sticky { position: sticky; top: 24px; } }

/* a second line under a table's first-column label */
.ta-sub, .ta-mf-sub, .ta-prof-src, .ta-cellnote, .ta-cm-cellsub { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); }

/* a short plain list inside the direct answer */
.ta-list, .ta-answer-list, .ta-bullets { list-style: none; display: grid; gap: 8px; padding-left: 0; }
.ta-list li, .ta-answer-list li, .ta-bullets li { position: relative; padding-left: 16px; }
.ta-list li::before, .ta-answer-list li::before, .ta-bullets li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 1px; background: var(--ink-3);
}

/* ---- 31-calc-eyes.css ---- */
/* ==========================================================================
   31 · Template A, eye calculators (sanpaku eyes test, eye shape analyzer, IPD calculator). Prefix: .ta-
   Only what these three pages share beyond 20-instrument and 30-template-a.
   ========================================================================== */

/* .ta-adjust (= .ta-ctl), .ta-ticks and .ta-verdict now live in 30-template-a.css */

/* a readout whose value is a word (eye shape), not a number */
.ins-readout__v.ta-readout__word {
  font-family: var(--font-sans); font-size: 22px; line-height: 32px; font-weight: 420; letter-spacing: -.012em;
  white-space: normal;
}
@media (max-width: 767px) { .ins-readout__v.ta-readout__word { font-size: 19px; line-height: 30px; } }

/* .ta-trio and .ta-sub now live in 30-template-a.css */

/* reference tables that mix long numeric ranges with prose cells: let the numbers wrap so the prose keeps a measure */
.ed-table.ta-table td.mono { white-space: normal; }
.ed-table.ta-table td:first-child { }
.ed-table.ta-table td:not(.mono):not(:first-child) { }
@media (max-width: 767px) {
  .ed-table.ta-table td:first-child { }
  .ed-table.ta-table td:not(.mono):not(:first-child) { }
}

/* ---- 32-calc-mirror.css ---- */
/* ==========================================================================
   32 · Template A group: face symmetry test, true mirror online, AI attractiveness test. Prefix: .ta-cm- (31-calc-eyes uses .ta-trio / .ta-verdict / .ta-ticks; these names stay apart)
   Only what these three pages share on top of 20-instrument.css and 30-template-a.css.
   ========================================================================== */

/* ---------- control card under the stage (a slider with its scale) ---------- */
/* base card = .ta-ctl, base scale = .ta-ticks (30-template-a.css); this group's differences: */
.ta-cm-ctrl .ins-field__row label { font-weight: 450; }
.ta-cm-ticks { font-family: inherit; letter-spacing: inherit; font-variant-numeric: inherit; }
.ta-cm-ctrl__note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ta-cm-ctrl__note strong { color: var(--ink); font-weight: 520; }

/* ---------- live reading under the readouts ---------- */
/* base = .ta-verdict (30-template-a.css, the paper card); its plain paragraphs read like .ta-verdict__t then __c */
.ta-cm-verdict p { font-size: 14px; line-height: 1.58; color: var(--ink-2); max-width: 68ch; }
.ta-cm-verdict p + p { margin-top: 6px; }
.ta-cm-verdict .ta-cm-verdict__lead { font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink); letter-spacing: -.005em; }

/* second readout strip directly under the first (measured proportions, then results) */
.ta-cm-readouts-pair { display: grid; gap: 10px; }

/* ranked styling priorities (AI attractiveness) */
.ta-cm-priorities { padding: 18px 20px 20px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1); }
.ta-cm-priorities__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ta-cm-priorities__head h3 { font-size: 17px; line-height: 1.35; font-weight: 480; letter-spacing: -.01em; }
.ta-cm-priorities__head a { font-size: 14px; color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }
.ta-cm-priorities ol { margin-top: 10px; padding-left: 0; list-style: none; display: grid; gap: 0; }
.ta-cm-priorities li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-read); }
.ta-cm-priorities li:first-child { border-top: 0; }
.ta-cm-priorities li strong { color: var(--ink); font-weight: 520; }

/* ---------- measured figure trio (three real portraits with landmark calipers) ---------- */
/* base = .ta-trio (30-template-a.css); this group: fluid column gap, stays three-up down to 1000px */
.ta-cm-trio { column-gap: clamp(24px, 3vw, 40px); }
@media (min-width: 1000px) and (max-width: 1099px) { .ta-cm-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }
.ta-cm-trio__item h3 { margin-top: 20px; }
.ta-cm-trio__item > p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-read); }
.ta-cm-trio__item > p strong { color: var(--ink); }
.ta-cm-trio__item .ed-note__datum { display: block; }
@media (max-width: 999px) { .ta-cm-trio { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

/* landmark lines that show what an unlevelled quiz uses */
.ta-cm-guide--off { stroke: rgba(243, 245, 242, .7); stroke-dasharray: 1.5 4; }

/* second line in a table's first column (landmark ids, conditions) */
/* base = .ta-sub (30-template-a.css) */
.ta-cm-cellsub { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.ta-cm-cellsub.mono { font-size: 12px; }

/* ---------- bell curve: open marker for a second reading (the 30 cm selfie) ---------- */
.ta-cm-mk-line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.ta-cm-mk-dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.ta-cm-curve-legend { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; white-space: nowrap; }
.ta-cm-curve-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pine); }
.ta-cm-curve-legend i.is-open { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- static line chart in a curve card (true mirror: distortion by camera distance) ---------- */
.ta-cm-chart { position: relative; margin-top: 44px; height: 188px; }
.ta-cm-chart__plot { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; }
.ta-cm-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ta-cm-chart__area { fill: rgba(184, 199, 189, .42); }
.ta-cm-chart__line { fill: none; stroke: var(--celadon); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ta-cm-chart__axis { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ta-cm-chart__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ta-cm-chart__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--pine); box-shadow: 0 0 0 2px var(--card); }
.ta-cm-chart__dot.is-ink { background: var(--obsidian); }
.ta-cm-chart .ins-pill { transform: translate(-50%, calc(-100% - 10px)); }
.ta-cm-chart .ins-pill.is-start { transform: translate(-14px, calc(-100% - 10px)); }
.ta-cm-chart .ins-pill.is-end { transform: translate(calc(-100% + 14px), calc(-100% - 10px)); }
.ta-cm-chart .ins-pill.is-pine { background: var(--pine); box-shadow: none; }
.ta-cm-chart .ins-pill.is-pine .ins-pill__k { color: rgba(243, 245, 242, .86); }
.ta-cm-chart__x { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.ta-cm-chart__x > span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .01em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ta-cm-chart__x > span.is-key { color: var(--ink); }
.ta-cm-chart__x > span.is-end { transform: translateX(-100%); }
@media (max-width: 767px) { .ta-cm-hide-sm { display: none; } }

/* mirror view: a quiet crossfade while the flipped photo swaps in */
.ta-cm-mirror .ins-stage__img { transition: opacity .18s var(--ease); }
@media (prefers-reduced-motion: reduce) { .ta-cm-mirror .ins-stage__img { transition: none; } }

/* a readout whose value is a short phrase, not a number */
.ins-readout__v.ta-cm-readout-word { font-family: var(--font-sans); font-size: 19px; line-height: 24px; font-weight: 450; letter-spacing: -.012em; white-space: normal; text-wrap: balance; }
.ta-cm-priorities__sub { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
/* .ta-cm-sticky (= .ta-rail--sticky) and the nowrap outputs now live in 30-template-a.css */

/* ---- 33-calc-ratios.css ---- */
/* ==========================================================================
   33 · Template A ratio calculators (FWHR, midface ratio, facial thirds). Prefix: .ta-
   Shared only by fwhr-calculator, midface-ratio-calculator and facial-thirds-calculator.
   ========================================================================== */

/* live styling match: a quiet card in the rail, updates with the measured ratio */
/* base = .ta-card (30-template-a.css); this one is a hairline card, not a raised one */
.ta-rx { box-shadow: inset 0 0 0 1px var(--line); }
.ta-rx__tag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 20px; color: var(--ink-2);
}
.ta-rx__num {
  font-family: var(--font-mono); font-size: 22px; line-height: 26px; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--pine);
}
.ta-rx__text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ta-rx__text strong { font-weight: 520; color: var(--ink); }

/* .ta-answer-list (= .ta-list) now lives in 30-template-a.css */

/* a short plain-English note under a bracket name in a table cell */
.ta-cellnote { margin-top: 4px; font-weight: inherit; }   /* base = .ta-sub (30-template-a.css) */

/* portrait measured figure (facial thirds needs the full face height) */
.ta-figure--tall { width: 100%; max-width: 440px; justify-self: center; }

/* overlay: faint fill marking the measured box on the face */
.ta-fill { fill: rgba(243, 245, 242, .07); stroke: none; }

@media (max-width: 767px) {
  .ta-figure--tall { max-width: 100%; }
}

/* ---- 34-calc-shape.css ---- */
/* ==========================================================================
   34 · Template A shape calculators (golden ratio, face shape detector, PSL scale). Prefix: .ta-
   Shared only by golden-ratio-face-calculator, face-shape-detector and psl-scale-calculator.
   ========================================================================== */

/* cohort picker: a native select dressed as a secondary pill, sits in the curve head */
.ta-select { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ta-select select {
  -webkit-appearance: none; appearance: none;
  height: 40px; max-width: 100%; padding: 0 36px 0 16px;
  border: 0; border-radius: var(--r-ctl);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111614' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer; transition: box-shadow .16s var(--ease-out);
}
.ta-select select:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.ta-select select:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.ta-curve-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* readout strips with fewer than four cells (golden ratio: three, PSL: two) fill the row */
.ins-readouts.ta-ro-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ins-readouts.ta-ro-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .ins-readouts.ta-ro-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-readouts.ta-ro-3 > .ins-readout:nth-child(3) { grid-column: 1 / -1; }
}

/* readout value that is a word (detected shape), not a number */
.ins-readout__v.ta-word { font-family: var(--font-sans); font-weight: 400; letter-spacing: -.02em; font-size: 22px; line-height: 30px; }
@media (max-width: 767px) { .ins-readout__v.ta-word { font-size: 19px; } }

/* small plain note under a bracket name in a table cell */
.ta-cnote { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 12px; line-height: 17px; color: var(--ink-2); letter-spacing: 0; }

/* live styling card under the hero grid (face shape): three short blocks, side by side on wide screens */
/* the card itself = .ta-card (30-template-a.css) */
.ta-rxs__title { font-size: 19px; line-height: 1.35; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.ta-rxs__sub { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.ta-rxs__sub .mono { color: var(--ink); }
.ta-rxs__list { margin-top: 16px; display: grid; gap: 0; }
.ta-rxs__item { padding: 14px 0; border-top: 1px solid var(--line); }
.ta-rxs__item:last-child { padding-bottom: 0; }
.ta-rxs__k { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ta-rxs__v { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-read); }
.ta-rxs__v strong { font-weight: 520; color: var(--ink); }
.ta-rxs__v ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.ta-rxs__link { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--pine); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(36, 72, 57, .35); }
.ta-rxs__link:hover { text-decoration-color: currentColor; }
.ta-atf + .ta-rxs { margin-top: 24px; }
@media (max-width: 1099px) { .ta-atf + .ta-rxs { max-width: 640px; } }
@media (max-width: 767px) { .ta-atf + .ta-rxs { margin-top: 16px; } }
@media (min-width: 1100px) {
  .ta-atf + .ta-rxs .ta-rxs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* manual field inside the instrument (PSL jaw angle: read from a side photo) */
/* base = .ta-ctl (30-template-a.css); this card stacks as plain blocks */
.ta-manual { display: block; padding: 16px 18px; }
.ta-manual .ins-field__row label { font-size: 14px; }
.ta-manual__note { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--ink-2); }

/* overlay: the 1.618 reference frame (golden ratio) and the face outline (face shape) */
.ta-phi { vector-effect: non-scaling-stroke; fill: none; stroke: rgba(184, 199, 189, .95); stroke-width: 1; stroke-dasharray: 6 5; }
.ta-phi-fill { fill: rgba(184, 199, 189, .10); stroke: none; }
.ta-outline { vector-effect: non-scaling-stroke; fill: rgba(243, 245, 242, .06); stroke: rgba(243, 245, 242, .5); stroke-width: 1; stroke-dasharray: 3 4; stroke-linejoin: round; }

/* three measured portraits in a row; a swipe row on phones */
.ta-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ta-figs .ins-figure { width: 100%; }
@media (max-width: 767px) {
  .ta-figs {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .ta-figs::-webkit-scrollbar { display: none; }
  .ta-figs .ins-figure { scroll-snap-align: start; }
  .ta-curve-ctl { width: 100%; }
  .ta-select { width: 100%; }
  .ta-select select { flex: 1; height: 44px; }
}

/* long comparison tables: let long mono cells wrap and keep the plain-English column readable */
.ta-tbl { min-width: 1080px; }
.ta-tbl td.ta-wrap { white-space: normal; min-width: 12ch; }
.ta-tbl td:first-child { min-width: 14ch; }
.ta-tbl td:last-child:not(.mono) { min-width: 24ch; }
.ta-cell-ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }

/* direct answer list: base = .ta-list (30-template-a.css), a little more air here */
.ta-bullets { gap: 10px; }

/* fold figures: the reading sits under the photo, never on it */
.ta-fig { min-width: 0; display: grid; gap: 8px; align-content: start; }
.ta-fig__read { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- 35-calc-profile.css ---- */
/* ==========================================================================
   35 · Template A, side-profile calculators (side profile analyzer, gonial angle, Ricketts E-line). Prefix: .ta-prof-
   Only what these three pages share beyond 20-instrument and 30-template-a. Stages use the 960 x 1200 profile photos
   (how/scan-profile-*.webp) with points from stage-landmarks.json > profile_points.
   ========================================================================== */

/* profile thumbnails in the cast switcher: the face sits right of centre in the source photo */
.ins-seg__thumb.ta-prof-thumb { object-position: 70% 38%; }

/* one quiet card under the readouts for the manual inputs (scale, background norms) */
/* base = .ta-ctl (30-template-a.css); this group lays two inputs side by side */
.ta-prof-ctl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-items: end; padding: 14px 18px 14px; }
@media (max-width: 767px) { .ta-prof-ctl { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; } }

/* native select styled as a secondary pill (background norms) */
.ta-prof-field { display: grid; gap: 6px; min-width: 0; }
.ta-prof-field > label { font-size: 14px; line-height: 20px; color: var(--ink); }
.ta-prof-select {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 40px; margin: 0; padding: 0 40px 0 16px;
  border: 0; border-radius: 999px;
  background-color: var(--mist);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111614' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink);
  text-overflow: ellipsis; cursor: pointer;
  transition: box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.ta-prof-select:hover { box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .3); }
.ta-prof-select:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
@media (max-width: 767px) { .ta-prof-select { height: 48px; font-size: 16px; } }

/* bell curve head with two switches (which angle + which group) */
.ta-prof-curve-ctl { display: flex; flex-wrap: wrap; gap: 8px; }

/* measured figure beside the key list: profile crops are taller than the eye strip */
.ta-prof-fig { max-width: 100%; }
@media (max-width: 767px) { .ta-prof-fig-desk { display: none; } }

/* small source line under a table row label */
.ta-prof-src { color: var(--ink-3); }   /* base = .ta-sub (30-template-a.css) */
@media (min-width: 768px) { .ta-prof-fig-mob { display: none; } }

/* long plain-English last column: keep it readable inside the phone scroller */
.ta-prof-table th:last-child, .ta-prof-table td:last-child { min-width: 280px; }

/* ---- 36-calc-midface.css ---- */
/* ==========================================================================
   36 · Template A, midface calculators (recessed maxilla test, face debloat calculator). Prefix: .ta-mf-
   Only what these two pages share beyond 20-instrument and 30-template-a.
   ========================================================================== */

/* profile thumbnails in the cast switcher: the face sits right of centre in the source photo */
.ins-seg__thumb.ta-mf-thumb { object-position: 76% 40%; }

/* one quiet card under the stage for the manual inputs (neck tilt, body fat): same surface as the readouts */
/* base = .ta-ctl (30-template-a.css); this card holds several rows */
.ta-mf-ctl { gap: 14px; padding: 16px 18px 14px; }
.ta-mf-ctl__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ta-mf-ctl__label { font-size: 14px; line-height: 20px; color: var(--ink); }
.ta-mf-ctl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
/* .ta-mf-ticks (= .ta-ticks) now lives in 30-template-a.css */
@media (max-width: 767px) {
  .ta-mf-ctl { padding: 14px 16px; }
  .ta-mf-ctl__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ta-mf-ctl__row .ins-seg { width: 100%; }
}

/* a readout whose value is a short phrase, not a number */
.ins-readout__v.ta-mf-word {
  font-family: var(--font-sans); font-size: 19px; line-height: 26px; font-weight: 440; letter-spacing: -.01em;
  white-space: normal; margin-top: 10px;
}
@media (max-width: 767px) { .ins-readout__v.ta-mf-word { font-size: 17px; line-height: 24px; } }

/* two measured profile crops side by side, three frontal crops in a row */
.ta-mf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; }
/* .ta-mf-trio (= .ta-trio) now lives in 30-template-a.css */
@media (max-width: 767px) { .ta-mf-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* lists inside an editorial note (protocol steps) */
.ta-mf-list { margin-top: 16px; list-style: none; display: grid; gap: 0; }
.ta-mf-list li strong { font-weight: 480; color: var(--ink); }
.ta-mf-list li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ta-mf-list li > strong:first-child { display: block; margin-bottom: 2px; font-weight: 480; color: var(--ink); }

/* .ta-mf-sub (= .ta-sub) now lives in 30-template-a.css */

/* reference tables that mix numeric ranges with prose cells: the prose column keeps a readable measure */
@container (min-width: 720px) { .ed-table.ta-mf-table td:last-child { width: 34%; } }
.ta-mf-nl { display: block; margin-top: 2px; color: var(--ink-2); }

/* ---- 38-plain.css ---- */
/* ---------- plain-first calculator (pilot: face-shape-detector, 26 Oct 2026) ----------
   Shape of the page: short promise → the tool (photo and the result in words, both in view while dragging) →
   what it means → what you can do, as pictures → the shapes as visual cards → free-scan card → FAQ →
   everything clinical folded into one "how it measures" section. Classes are .pl-*. */

.pl-hero { padding-top: 28px; padding-bottom: 0; }
.pl-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; margin-top: 20px; }
.pl-hero .ed-h1 { margin: 0; max-width: 24ch; }
@media (max-width: 1023px) { .pl-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.pl-lead { margin-top: 0; max-width: 46ch; font-size: 19px; line-height: 1.55; font-weight: 380; color: var(--ink-2); }
.pl-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); }

/* the tool: photo left, result right; both fit one screen */
.pl-tool { padding-top: 32px; padding-bottom: var(--sec); }
.pl-tool .ins {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "photo bar" "photo for" "photo now" "photo result";
  grid-template-rows: auto auto auto 1fr;
  column-gap: 56px; align-items: start;
}
.pl-tool .ins-bar { grid-area: bar; margin: 0 0 20px; }
.pl-tool .pl-photo { grid-area: photo; width: clamp(340px, calc((100svh - 460px) * .8), 480px); }
.pl-tool .ins-stage { width: 100%; }
.pl-tool .pl-now { grid-area: now; }
.pl-tool .pl-for { grid-area: for; }
.pl-tool .pl-result { grid-area: result; }
.pl-tool .ins-status { margin-top: 12px; }
@media (min-width: 1024px) { .pl-tool .pl-photo { position: sticky; top: 96px; align-self: start; } }

/* the answer in words */
.pl-now {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: center;
  padding: 22px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.pl-now__icon { width: 56px; height: 70px; color: var(--pine); }
.pl-now__icon svg { width: 100%; height: 100%; }
.pl-now__k { margin: 0; font-size: 14px; color: var(--ink-3); }
.pl-now__v { margin: 2px 0 0; font-size: 40px; line-height: 1.05; font-weight: 360; letter-spacing: -.03em; color: var(--ink); }
.pl-now__line { grid-column: 1 / -1; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pl-now__meta { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.pl-for { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; color: var(--ink-3); }
/* an uploaded photo shows no result until every dot has been placed */
.ins.pl-wait .pl-result { display: none; }
.ins.pl-wait .pl-now__v { font-size: 30px; }

.pl-result { margin-top: 16px; }
.pl-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pl-rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pl-rows__k { font-size: 14px; color: var(--ink-3); }
.pl-rows__v { font-size: 17px; font-weight: 450; color: var(--ink); }
.pl-rows__n { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.pl-suits { margin-top: 24px; }
.pl-suits__h { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.pl-suits dl { margin: 0; display: grid; gap: 10px; }
.pl-suits dt { font-size: 13px; color: var(--ink-3); }
.pl-suits dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pl-suits ul { margin: 2px 0 0; padding-left: 18px; }
.pl-suits li + li { margin-top: 2px; }

@media (max-width: 1023px) {
  .pl-tool .ins { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "photo" "now" "for" "result"; grid-template-rows: none; }
  .pl-tool .pl-photo { width: min(100%, calc(50svh * .8)); justify-self: center; }
  .pl-tool .ins-bar { margin-bottom: 14px; }
  .pl-tool .pl-now { margin-top: 12px; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; }
  .pl-tool .pl-for { margin: 14px 0 0; }
  .pl-now__icon { width: 40px; height: 50px; }
  .pl-now__v { font-size: 28px; }
  .pl-now__line { margin-top: 6px; font-size: 14px; line-height: 1.4; }
  .pl-tool .ins-status { margin-top: 10px; }
}

/* what it means: three short lines */
.pl-means { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 36px 0 0; padding: 0; list-style: none; }
.pl-means li { padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.pl-means strong { display: block; margin-bottom: 6px; font-weight: 500; color: var(--ink); }
@media (max-width: 767px) { .pl-means { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* heading, then its line under it: never a subtitle floating in a second column (Jim, 27 Oct) */
.pl-sechead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pl-sechead h2 { margin: 0; }
.pl-sechead p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* what you can do: before / after pictures on the same face */
.pl-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.pl-look__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pl-look__pair figure { margin: 0; }
.pl-look__pair figcaption { margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.pl-look__pair img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--paper); }
.pl-look__pair img { box-shadow: inset 0 0 0 1px var(--line); }
.pl-look__pair figcaption.is-after { color: var(--pine); font-weight: 500; }
.pl-look h3 { margin: 18px 0 0; font-size: 20px; font-weight: 450; letter-spacing: -.01em; }
.pl-look p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
@media (max-width: 767px) { .pl-looks { grid-template-columns: minmax(0, 1fr); gap: 36px; } }


/* free scan card: real styled renders, not blurred tiles */
.pl-scan { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding: 28px; border-radius: 24px; background: var(--paper); }
.pl-scan__looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-scan__looks img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.pl-scan h2 { margin: 0; font-size: 32px; line-height: 1.12; }
.pl-scan p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.pl-scan .ed-btn { margin-top: 24px; }
@media (max-width: 767px) { .pl-scan { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 24px; } .pl-scan h2 { font-size: 26px; } }

/* everything clinical, folded */
.pl-fold { border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pl-fold > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center;
  padding: 26px 28px; cursor: pointer; list-style: none;
}
.pl-fold > summary::-webkit-details-marker { display: none; }
.pl-fold__t { font-size: 22px; font-weight: 420; letter-spacing: -.015em; color: var(--ink); }
.pl-fold__s { grid-column: 1; font-size: 15px; color: var(--ink-3); }
.pl-fold__i { grid-row: 1 / span 2; grid-column: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .2s var(--ease); }
.pl-fold__i svg { width: 18px; height: 18px; }
.pl-fold[open] .pl-fold__i { transform: rotate(45deg); }
.pl-fold > summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: var(--r-card); }
.pl-fold__body { padding: 8px 28px 32px; border-top: 1px solid var(--line); }
.pl-fold__body > section { padding-block: 32px; }
.pl-fold__body > section + section { border-top: 1px solid var(--line); }
.pl-fold__body h3 { margin: 0 0 14px; font-size: 22px; font-weight: 420; letter-spacing: -.015em; max-width: 36ch; }
.pl-fold__body h4 { margin: 20px 0 6px; font-size: 17px; font-weight: 500; }
.pl-fold__body p { max-width: 72ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 767px) { .pl-fold > summary { padding: 20px; } .pl-fold__body { padding: 4px 18px 24px; } .pl-fold__t { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .pl-fold__i { transition: none; } }

.pl-scan-sec { padding-top: 0; }

.pl-shapes2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; margin-top: 40px; align-items: start; }
.pl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-tile {
  position: relative; width: 100%; min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
  font: inherit; font-size: 16px; cursor: pointer; transition: box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.pl-tile:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-tile[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pine); }
.pl-tile:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.pl-tile__icon { width: 36px; height: 45px; color: var(--field); }
.pl-tile__icon svg { width: 100%; height: 100%; }
.pl-tile[aria-pressed="true"] .pl-tile__icon { color: var(--pine); }
.pl-tile__you { display: none; position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--pine); font-weight: 500; }
.pl-tile.is-you .pl-tile__you { display: block; }
.pl-panel { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 28px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.pl-panel__icon { width: 56px; height: 70px; color: var(--pine); }
.pl-panel__icon svg { width: 100%; height: 100%; }
.pl-panel__tag { margin: 0 0 4px; font-size: 13px; color: var(--pine); font-weight: 500; }
.pl-panel__name { margin: 0; font-size: 30px; font-weight: 380; letter-spacing: -.025em; }
.pl-panel__what { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pl-panel dl { margin: 18px 0 0; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.pl-panel dt { font-size: 13px; color: var(--ink-3); }
.pl-panel dd { margin: 2px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.pl-fold__intro { margin: 24px 0 0; }
@media (max-width: 1023px) { .pl-shapes2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .pl-tiles { gap: 8px; } .pl-tile { min-height: 104px; font-size: 15px; } .pl-panel { grid-template-columns: 40px minmax(0, 1fr); padding: 20px; gap: 14px; } .pl-panel__icon { width: 40px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .pl-tile { transition: none; } }
@media (max-width: 599px) {
  .pl-tile__you { position: static; order: 3; font-size: 12px; }
  .pl-tile { gap: 6px; }
}

/* the row under the photo: what the lines show, reset, and the hint. Nothing sits on the photo itself. */
.pl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pl-status > p { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink-3); }
.pl-status .ed-textbtn { margin-left: auto; }

/* the free-scan call to action right after the result, tied to what the reader just saw */
.pl-cta { margin-top: 22px; padding: 20px 22px; border-radius: var(--r-card); background: var(--pine); color: var(--ink-d); }
.pl-cta__t { margin: 0; font-size: 19px; font-weight: 450; letter-spacing: -.01em; color: var(--ink-d); }
.pl-cta__s { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-d-2); }
.pl-cta .ed-btn { margin-top: 16px; background: var(--mist); color: var(--obsidian); }
.pl-cta .ed-btn:hover { background: #E2E8E3; }
.pl-cta .ed-btn:focus-visible { outline-color: var(--mist); }
/* phones and tablets: a slim bar keeps the scan one tap away, only while the photo is off screen */
.pl-sticky {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--obsidian); color: var(--ink-d);
  box-shadow: 0 8px 24px rgba(17, 22, 20, .22);
}
.pl-sticky[hidden] { display: none; }
.pl-sticky p { margin: 0; font-size: 15px; }
.pl-sticky .ed-btn { background: var(--mist); color: var(--obsidian); flex: none; }
@media (min-width: 1024px) { .pl-sticky { display: none; } }

/* phones and tablets: full-size targets (these win over the base rules that come earlier in the build) */
@media (max-width: 1023px) {
  .ed-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
  .ed-textbtn { min-height: 44px; }
  /* photo, its controls and the answer fit one screen together: the hint line hides, the photo scales with the screen */
  .pl-status > p { display: none; }
  .pl-tool .pl-photo { width: min(100%, calc((100svh - 360px) * .8)); min-width: 260px; }
  .pl-tool .pl-now { padding: 12px 16px; }
  .pl-now__line { margin-top: 4px; }
  .pl-now__meta { margin-top: 6px; padding-top: 6px; }
}

/* the phone free-scan bar replaces the header button while it shows (assets/js/pl-sticky.js sets .has-plbar) */
@media (max-width: 1023px) {
  .has-plbar .ed-head__cta { visibility: hidden; }
  .pl .ed-foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .pl .ed-refs a { padding-block: 10px; }
}

/* ---- 39-plain-compare.css ---- */
/* ---------- plain-first comparison (Template B, 26 Oct 2026, round 2) ----------
   CEVO first in every pairing. Both brands by their real marks; four key numbers in one high-contrast panel; a
   high-contrast table; real screens step by step (labels above or below images, never on them); a Trustpilot rating
   chart and real review quotes with their source marks. Classes are .pc-*. */

.pc-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pc-who img { width: 20px; height: 20px; flex: none; }
.pc-mark { width: 22px; height: 22px; flex: none; }

/* hero: words left, the two brands right */
.pc-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; margin-top: 20px; }
.pc-hero .ed-h1 { margin: 0; }
.pc-hero .pl-lead { margin-top: 18px; }
.pc-tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 20px 12px; border-radius: 22px; font-size: 14px; }
.pc-tile.is-cevo { background: var(--pine); color: var(--ink-d-2); }
.pc-tile.is-cevo img { height: 42px; width: auto; }
.pc-tile.is-qv { background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.pc-tile__qv { display: inline-flex; align-items: center; gap: 10px; height: 42px; color: #233137; font-size: 22px; white-space: nowrap; }
.pc-tile__qv b { font-weight: 450; letter-spacing: -.01em; }
.pc-tiles__vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); box-shadow: 0 0 0 4px var(--mist), inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--ink); }
@media (max-width: 1023px) { .pc-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .pc-tile { min-height: 116px; padding: 16px 8px; }
  .pc-tile.is-cevo img { height: 32px; }
  .pc-tile__qv { height: 32px; font-size: clamp(15px, 4.4vw, 19px); gap: 8px; }
  .pc-tile__qv img { width: 26px; height: 26px; }
}

/* the four main differences: one dark panel */
.pc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 0; padding: 6px; list-style: none; border-radius: 22px; background: var(--obsidian); }
.pc-stats li { display: grid; gap: 10px; padding: 18px 20px; color: var(--ink-d); }
.pc-stats li + li { box-shadow: inset 1px 0 0 rgba(243, 245, 242, .12); }
.pc-stats__k { font-size: 14px; color: var(--ink-d-2); }
.pc-stats__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-stats__row .pc-who { color: var(--ink-d-2); font-weight: 400; font-size: 14px; }
.pc-stats__row .pc-who img { filter: brightness(0) invert(.9); }
.pc-stats__row b { font-size: 21px; font-weight: 420; letter-spacing: -.02em; color: var(--ink-d); white-space: nowrap; }
.pc-stats__row:first-of-type b { color: var(--sage); }
@media (max-width: 1023px) {
  .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-stats li:nth-child(3) { box-shadow: inset 0 1px 0 rgba(243, 245, 242, .12); }
  .pc-stats li:nth-child(4) { box-shadow: inset 1px 0 0 rgba(243, 245, 242, .12), inset 0 1px 0 rgba(243, 245, 242, .12); }
}
@media (max-width: 599px) {
  .pc-stats li { padding: 14px 12px; gap: 8px; }
  .pc-stats__k { font-size: 13px; }
  .pc-stats__row b { font-size: 16px; }
  .pc-stats__row .pc-who span { display: none; }
}

/* the table: strong ink, CEVO column on pine */
.pc-table-wrap { margin-top: 28px; }
.pc-table th, .pc-table td { color: var(--ink); font-size: 16px; line-height: 1.45; vertical-align: top; }
.pc-table thead th { padding-block: 16px; font-size: 16px; background: var(--paper); }
.pc-table thead th.is-hl { background: var(--pine); }
.pc-table thead th.is-hl .pc-who { color: var(--mist); }
.pc-table tbody th { font-weight: 500; font-size: 15px; width: 180px; }
.pc-table tbody tr > * { border-top: 1px solid rgba(17, 22, 20, .14); }
.pc-table td.is-hl { background: color-mix(in srgb, var(--pine) 9%, var(--card)); font-weight: 450; }

/* what you would pay */
.pc-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.pc-pay__col { margin: 0; min-width: 0; padding: 26px 28px; border: 0; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 12px; }
.pc-pay__col.is-cevo { box-shadow: inset 0 0 0 1.5px var(--pine); }
.pc-pay__col legend { float: left; width: 100%; margin-bottom: 4px; font-size: 18px; }
.pc-pay__base, .pc-pay__what, .pc-pay__when { margin: 0; font-size: 16px; color: var(--ink-2); }
.pc-pay__base { display: flex; justify-content: space-between; }
.pc-pay__base b { color: var(--ink); font-weight: 500; }
.pc-check { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; font-size: 16px; color: var(--ink); cursor: pointer; border-top: 1px solid var(--line); }
.pc-check input { width: 20px; height: 20px; accent-color: var(--pine); margin: 0; }
.pc-check b { font-weight: 500; }
.pc-pay__tiers { align-self: flex-start; }
.pc-pay__tiers .ins-seg__opt { min-height: 44px; font-size: 15px; }
.pc-pay__end { margin-top: auto; display: grid; gap: 6px; }
.pc-pay__total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 0; padding-top: 14px; border-top: 1.5px solid var(--ink); font-size: 17px; font-weight: 500; color: var(--ink); }
.pc-pay__total output { font-size: 36px; font-weight: 380; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pc-pay__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin: 16px 0 0; padding: 16px 20px; border-radius: 999px; background: var(--obsidian); color: var(--ink-d); font-size: 16px; }
.pc-pay__strip .pc-who { color: var(--ink-d-2); font-weight: 400; }
.pc-pay__strip .pc-who img { filter: brightness(0) invert(.9); }
.pc-pay__strip b { font-weight: 500; color: var(--ink-d); }
.pc-pay__vs { color: var(--ink-d-2); }
@media (max-width: 767px) {
  .pc-pay { grid-template-columns: minmax(0, 1fr); }
  .pc-pay__col { padding: 20px; }
  .pc-pay__strip { position: sticky; bottom: 12px; z-index: 5; border-radius: 18px; flex-direction: column; gap: 4px; }
  .pc-pay__vs { display: none; }
}

.pc-strong { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.pc-strong__col { padding: 26px 28px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pc-strong__h { margin: 0 0 14px; font-size: 18px; }
.pc-strong ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pc-strong li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pc-strong li b { font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 767px) { .pc-strong { grid-template-columns: minmax(0, 1fr); } .pc-strong li { grid-template-columns: 92px minmax(0, 1fr); } .pc-strong li b { font-size: 19px; } }

/* steps: real screens, labels above, captions below */
.pc-steps { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: 64px; }
.pc-step h3 { margin: 0; font-size: 24px; font-weight: 420; letter-spacing: -.02em; }
.pc-step > p { margin: 8px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.pc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; align-items: start; }
.pc-pair > figure { margin: 0; min-width: 0; }
.pc-pair > figure > figcaption { margin-bottom: 10px; font-size: 15px; }
.pc-shot { border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.pc-shot img { display: block; width: 100%; height: auto; }
.pc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-photos figure { margin: 0; }
.pc-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.pc-photos figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.pc-photos figcaption.is-after { color: var(--pine); font-weight: 500; }
.pc-measured__stage { max-width: 420px; border-radius: 16px; }
.pc-measured__read { margin: 12px 0 0; font-size: 16px; color: var(--ink-2); }
.pc-measured__read b { color: var(--ink); font-weight: 500; }
.pc-tiers { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pc-tiers li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 16px 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pc-tiers li.is-main { box-shadow: inset 0 0 0 1.5px var(--pine); }
.pc-tiers b { grid-row: 1 / span 2; font-size: 26px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.pc-tiers span { font-size: 16px; font-weight: 450; color: var(--ink); }
.pc-tiers small { font-size: 13px; color: var(--ink-3); }
@media (max-width: 767px) { .pc-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pc-steps { gap: 48px; } .pc-measured__stage { max-width: none; } }

/* reviews: the Trustpilot rating chart and the quotes */
.pc-say { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; margin-top: 28px; align-items: start; }
.pc-dist { padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pc-dist__h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 500; }
.pc-dist__score { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.pc-dist__score b { font-size: 40px; font-weight: 380; letter-spacing: -.03em; color: var(--ink); margin-right: 4px; }
.pc-dist__table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; color: var(--ink-2); }
.pc-dist__table th, .pc-dist__table td { padding: 4px 0; font-weight: 400; text-align: left; vertical-align: middle; }
.pc-dist__table th { width: 56px; white-space: nowrap; }
.pc-dist__barcell { padding-inline: 10px !important; }
.pc-dist__n { width: 36px; text-align: right !important; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pc-dist__bar { height: 10px; border-radius: 5px; background: var(--cloud); overflow: hidden; }
.pc-dist__bar span { display: block; height: 100%; background: #00B67A; border-radius: 5px; }
.pc-dist__v { width: 48px; text-align: right !important; font-variant-numeric: tabular-nums; }
.pc-dist__bar { display: block; }
.pc-dist__note { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); }
.pc-quotes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pc-quote { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pc-quote__top { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.pc-quote__src { font-weight: 500; color: var(--ink); }
.pc-tp-stars { display: inline-flex; gap: 2px; margin-left: auto; }
.pc-tp-stars span { display: grid; place-items: center; width: 18px; height: 18px; background: #DCDCE6; }
.pc-tp-stars span.is-on { background: #00B67A; }
.pc-tp-stars svg { width: 13px; height: 13px; fill: #fff; }
.pc-quote__where { margin-left: auto; color: var(--ink-3); }
.pc-quote blockquote { margin: 0; }
.pc-quote blockquote p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.pc-quote__who { margin: 0; font-size: 14px; }
.pc-quote__who a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.pc-quote__who a:hover { color: var(--ink); }
.pc-quotes--fold { margin-top: 20px; }
@media (max-width: 1023px) { .pc-say { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .pc-quotes { grid-template-columns: minmax(0, 1fr); } }

/* how the free scan works: one person through the three steps */
.pc-how { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.pc-how h3 { margin: 16px 0 0; font-size: 20px; font-weight: 450; }
.pc-how p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pc-phone { padding: 10px; border-radius: 34px; background: var(--obsidian); max-width: 300px; }
.pc-phone img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 26px; }
.pc-measured--how .pc-measured__stage { max-width: 320px; }
.pc-photos--how { max-width: 360px; }
.pc-cta { max-width: 560px; margin-top: 36px; }
@media (max-width: 767px) { .pc-how { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pc-phone { max-width: 260px; } .pc-measured--how .pc-measured__stage { max-width: 280px; } }

.pl-fold__list { margin: 8px 0 16px; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; color: var(--ink-2); }

/* ---- 40-cevo-blocks.css ---- */
/* ==========================================================================
   40 · Shared CEVO blocks (engine/tools/cevo_blocks.py). Prefix .cv-
   "What CEVO gives you" showcase (feature tiles + three reports) and the aligned three-step free-scan strip.
   Every picture frame in a row is the same size; captions follow one rhythm (title, one line, tier).
   ========================================================================== */
.cv-show .ed-h2, .cv-free .ed-h2 { max-width: 24ch; }

/* picture frames: one fixed shape per row, pictures fill it; pairs and trios split it evenly */
.cv-vis { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 4px;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--paper); }
.cv-vis img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 30%; }
.cv-vis--quad { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cv-vis--quad img { object-position: 50% 50%; }
.cv-vis--one-contain img { object-fit: contain; }

/* ---------- showcase ---------- */
.cv-show { background: var(--paper); }
.cv-show .cv-vis { background: var(--card); }
.cv-tiles { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.cv-tile { min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; }
.cv-tile h3 { margin: 6px 0 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.cv-tile p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-read); }
.cv-tile .cv-tile__tier { font-size: 14px; color: var(--pine); font-weight: 500; }

.cv-tiers { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cv-tier { min-width: 0; padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; align-content: start; gap: 6px; }
.cv-tier.is-rec { box-shadow: inset 0 0 0 2px var(--pine); }
.cv-tier__price { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 420; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-tier__price span { margin-left: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--pine); vertical-align: middle; }
.cv-tier h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.cv-tier ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cv-tier li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-read); }
.cv-tier li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--pine); }
.cv-tiers__foot { margin: 24px 0 0; font-size: 17px; color: var(--ink); }

/* ---------- free-scan strip ---------- */
.cv-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cv-step { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.cv-step .cv-vis { aspect-ratio: 4 / 5; }
.cv-step h3 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 6px 0 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.cv-step__n { color: var(--pine); font-variant-numeric: tabular-nums; }
.cv-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-read); }
.cv-cta { margin-top: 32px; padding: 28px 32px; border-radius: var(--r-card); background: var(--pine); color: var(--ink-d);
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.cv-cta__t { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 450; letter-spacing: -.012em; color: var(--ink-d); }
.cv-cta__s { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-d-2); }
.cv-cta .ed-btn { background: var(--mist); color: var(--obsidian); flex: none; }
.cv-cta .ed-btn:hover { background: #E2E8E3; }
.cv-cta .ed-btn:focus-visible { outline-color: var(--mist); }

/* ---------- smaller screens ---------- */
@media (max-width: 1023px) {
  .cv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-tiers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .cv-tiles { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cv-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cv-cta { padding: 22px; }
  .cv-cta .ed-btn { width: 100%; justify-content: center; }
}

/* comparison hero: the page's own "Start free scan" under the lead, above the fold at every width (29 Oct 2026) */
.cv-hero-cta { display: flex; margin-top: 28px; }
.cv-hero-cta .ed-btn { height: 52px; padding: 0 30px; font-size: 16px; }
@media (max-width: 599px) {
  .cv-hero-cta { margin-top: 24px; }
  .cv-hero-cta .ed-btn { width: 100%; }
}

/* ---- 41-template-b.css ---- */
/* ==========================================================================
   41 · Template B, competitor teardown (/vs/*). Pilot: articles/qoves-studio-alternative.html
   Only what the teardown alone needs: protocol strip, verdict matrix, screenshot pairs,
   review rows, sentiment bars, 36-vs-3 split, baseline switcher layout.
   Shared chrome (staging bar, header, buttons, segmented control, readouts, FAQ,
   references, links, conversion band, footer) comes from 10-base / 20-instrument.
   ========================================================================== */

/* ---------- page rhythm ---------- */
.tb-wrap {
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tb-num {
  font-family: var(--font-mono);
  font-size: max(.88em, 12px);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tb-hero { padding-top: 64px; }
.tb-h1 {
  margin: 0;
  max-width: 24em;
  font-size: var(--fs-h1);
  font-weight: 340;
  line-height: 1.05;
  letter-spacing: -.032em;
  color: var(--ink);
  text-wrap: balance;
}
.tb-h1 .ed-tone { display: block; }
.tb-deck {
  margin: 28px 0 0;
  max-width: 68ch;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 380;
  color: var(--ink-2);
  text-wrap: pretty;
}
.tb-deck strong { font-weight: 500; color: var(--ink); }

/* Same-face protocol: four facts under one hairline, brand3 hero-strip voice */
.tb-protocol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 48px 0 0;
  border-block: 1px solid var(--line);
}
.tb-protocol__cell { padding: 20px 24px 22px; }
.tb-protocol__cell:first-child { padding-left: 0; }
.tb-protocol__cell + .tb-protocol__cell { border-left: 1px solid var(--line); }
.tb-protocol dt { font-size: var(--fs-ui); line-height: 1.4; color: var(--ink-3); }
.tb-protocol dd { margin: 6px 0 0; font-size: 15px; line-height: 1.45; font-weight: 440; color: var(--ink); }

.tb-section { position: relative; padding-top: calc(var(--sec) * .8); }
.tb-section + .tb-section { margin-top: calc(var(--sec) * .2); }
.tb-section + .tb-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}
.tb-verdict { padding-top: 72px; }

.tb-sechead { margin-bottom: 44px; }
.tb-h2 {
  margin: 0;
  max-width: 30ch;
  font-size: var(--fs-h2);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
.tb-sechead__lead {
  margin: 20px 0 0;
  max-width: 66ch;
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* heading left, list right (brand3 FAQ rhythm) for the FAQ, references and links */
.tb-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 32px;
  align-items: start;
}
.tb-split .tb-sechead { margin-bottom: 0; position: sticky; top: 104px; }
.tb-split .tb-h2 { font-size: clamp(28px, 1vw + 22px, 38px); }

/* ---------- verdict matrix: the shared .ed-table, tuned for long comparison cells ---------- */
.tb-matrix { border-radius: var(--r-card); overscroll-behavior-x: contain; }
.tb-matrix:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.tb-matrix__table { table-layout: fixed; }
.tb-matrix__col-dim { width: 21%; }
.tb-matrix__col-q, .tb-matrix__col-c { width: 39.5%; }
.tb-matrix .ed-table th, .tb-matrix .ed-table td { padding: 22px 28px 24px; }
.tb-matrix .ed-table thead th { padding-block: 18px; font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--ink); }
.tb-matrix .ed-table thead .is-hl { color: var(--pine); }
.tb-matrix__host { display: block; margin-top: 2px; font-size: var(--fs-ui); font-weight: 380; color: var(--ink-3); }
.tb-matrix .ed-table tbody th { font-weight: 400; }
/* keep the sticky first column opaque when its row is hovered, or scrolled text shows through it */
.tb-matrix .ed-table tbody tr:hover > th:first-child { background: linear-gradient(rgba(36, 72, 57, .035), rgba(36, 72, 57, .035)), var(--card); }
.tb-matrix__dim { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.tb-matrix__dimsub { display: block; margin-top: 4px; font-size: var(--fs-ui); line-height: 1.4; color: var(--ink-3); }
.tb-matrix td p { font-size: var(--fs-small); line-height: 1.58; color: var(--ink-2); }
.tb-matrix td strong { font-weight: 500; color: var(--ink); }
.tb-matrix td p.tb-matrix__head { margin-bottom: 8px; font-size: 15.5px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.tb-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px 3px;
  border-radius: var(--r-ctl);
  background: var(--warn-amber-bg);
  color: var(--warn-amber);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  vertical-align: 2px;
  white-space: nowrap;
}

.tb-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 24px;
  padding: 26px 32px;
  border-radius: var(--r-card);
  background: var(--paper);
}
.tb-bottomline p { margin: 0; max-width: 78ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.tb-bottomline strong { font-weight: 500; color: var(--ink); }
.tb-bottomline > a { flex: none; }

/* ---------- funnel walkthrough: screenshot pairs ---------- */
.tb-step + .tb-step { margin-top: 88px; }
.tb-step__title {
  margin: 0 0 28px;
  max-width: 64ch;
  font-size: var(--fs-h3);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.tb-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}
.tb-pair__side { min-width: 0; }
.tb-pair__text {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.tb-pair__text strong { font-weight: 500; color: var(--ink); }

.tb-shot { margin: 0; }
.tb-shot__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-1);
}
.tb-shot__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
}
.tb-shotstack { display: grid; gap: 20px; }
.tb-shot__frame picture { display: contents; }

/* CEVO tier preview: the real numbers the free scan returns, then the three one-time tiers */
.tb-tiers {
  padding: 24px 24px 8px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.tb-tiers__status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}
.tb-tiers__status span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--pine);
  vertical-align: 1px;
}
.tb-tiers__free {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.tb-tiers__free dt { font-size: var(--fs-ui); line-height: 1.35; color: var(--ink-3); }
.tb-tiers__free dd {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tb-tiers__free small { margin-left: 2px; font-size: 15px; color: var(--ink-3); }
.tb-tiers__list { margin: 0; padding: 0; list-style: none; }
.tb-tiers__list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  margin-inline: -12px;
  padding: 14px 12px;
  border-radius: 12px;
}
.tb-tiers__list li + li { box-shadow: inset 0 1px 0 var(--line); }
.tb-tiers__list li.is-flagship { background: rgba(36, 72, 57, .07); box-shadow: none; }
.tb-tiers__list li.is-flagship + li { box-shadow: none; }
.tb-tiers__price { font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.tb-tiers__list .is-flagship .tb-tiers__price { color: var(--pine); }
.tb-tiers__name { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.tb-tiers__list .is-flagship .tb-tiers__name { color: var(--ink); font-weight: 450; }

/* CEVO before / after: real photos, cover is safe (3:4 source in a 3:4 frame) */
.tb-ba {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tb-ba__img { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 4; background: var(--paper); }
.tb-ba__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tb-ba__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(243, 245, 242, .9);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink);
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-note {
  margin-top: 28px;
  padding: 20px 26px 22px;
  border-radius: 16px;
  background: var(--surface-tint);
}
.tb-note--inline { margin-top: 24px; }
.tb-note p { margin: 0; max-width: 92ch; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.tb-note strong { font-weight: 500; color: var(--ink); }

/* ---------- review audit ---------- */
.tb-reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}
.tb-reviews__title {
  margin: 0 0 12px;
  font-size: var(--fs-h3);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
}
.tb-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.tb-rows li { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.tb-rows p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tb-rows strong { font-weight: 500; color: var(--ink); }
.tb-rows p.tb-rows__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}
.tb-rows__share {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sentiment: one horizontal bar chart, one series, values labelled at the bar end */
.tb-chart {
  margin: 72px 0 0;
  padding: 28px 32px 24px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.tb-chart__cap { display: grid; gap: 4px; margin-bottom: 24px; }
.tb-chart__title { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.tb-chart__src { font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-3); }
.tb-chart__rows { margin: 0; padding: 0; list-style: none; }
.tb-chart__row {
  --track: minmax(0, 1fr);
  display: grid;
  grid-template-columns: minmax(0, 340px) var(--track) 64px;
  grid-template-areas: "label track val" "desc track .";
  column-gap: 24px;
  align-items: start;
  margin-inline: -12px;
  padding: 14px 12px;
  border-radius: 12px;
  transition: background-color .18s var(--ease-out);
}
.tb-chart__row:hover, .tb-chart__row:focus-visible { background: rgba(36, 72, 57, .05); }
.tb-chart__row:focus-visible { outline: none; box-shadow: var(--focus); }
.tb-chart__label { grid-area: label; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.tb-chart__desc { grid-area: desc; margin-top: 4px; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-3); }
.tb-chart__track {
  grid-area: track;
  position: relative;
  height: 14px;
  margin-top: 4px;
  /* gridlines at 0, 25 and 50 percent */
  background:
    linear-gradient(var(--line), var(--line)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat;
}
.tb-chart__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) / 50 * 100%);
  border-radius: 0 4px 4px 0;
  background: var(--pine);
  transition: background-color .18s var(--ease-out);
}
.tb-chart__row:hover .tb-chart__bar, .tb-chart__row:focus-visible .tb-chart__bar { background: var(--obsidian); }
.tb-chart__val {
  grid-area: val;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}
.tb-chart__axis {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr) 64px;
  column-gap: 24px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.tb-chart__axis span { grid-row: 1; grid-column: 2; }
.tb-chart__axis span:nth-child(1) { justify-self: start; transform: translateX(-2px); }
.tb-chart__axis span:nth-child(2) { justify-self: center; }
.tb-chart__axis span:nth-child(3) { justify-self: end; transform: translateX(10px); }

/* 36 unranked items vs. the top 3 */
.tb-protocolcase { margin-top: 88px; }
.tb-protocolcase__title {
  margin: 0 0 28px;
  max-width: 30ch;
  font-size: clamp(24px, 1vw + 18px, 30px);
  font-weight: 380;
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--ink);
}
.tb-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.tb-versus__side { padding: 32px 36px 36px; }
.tb-versus__side.is-cevo { background: rgba(36, 72, 57, .05); box-shadow: inset 1px 0 0 var(--line); }
.tb-versus__side p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.tb-versus__side strong { font-weight: 500; color: var(--ink); }
.tb-versus__side p.tb-versus__label { margin-bottom: 20px; font-size: var(--fs-ui); color: var(--ink-3); }
.tb-movers { margin: 20px 0 0; padding: 0; list-style: none; }
.tb-movers li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.tb-movers li strong { display: block; margin-bottom: 2px; }
.tb-versus__side p.tb-movers__rest { padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-small); }

/* ---------- baseline switcher ---------- */
.tb-scan {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: start;
}
.tb-scan__stagecol { display: grid; gap: 16px; min-width: 0; }
.tb-scan__stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-stage);
  background: var(--mist);
}
.tb-scan__stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transition: opacity .2s var(--ease-out);
}
/* portrait sources fill a 4:5 stage instead of sitting letterboxed in the square */
.tb-scan__stage[data-fit="portrait"] { aspect-ratio: 620 / 776; overflow: hidden; }
.tb-scan__stage[data-fit="portrait"] img { object-fit: cover; }
/* measured overlay for the photo example that has no face map baked in (landmarks in source px, same crop as the img) */
.tb-scan__ov { position: absolute; inset: 0; border-radius: 0; background: none; }
.tb-scan__ov[hidden] { display: none; }
/* facial thirds is three numbers: its column gets the extra width */
.tb-scan .ins-readout__v.tb-scan__trio { font-size: 20px; white-space: nowrap; }
.tb-tiers__free { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
.tb-tiers__free dd.tb-tiers__trio { font-size: 20px; white-space: nowrap; }
@media (max-width: 1279px) { .tb-tiers__free { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-tiers__free > div:first-child { grid-column: 1 / -1; } }
/* portrait sources sit 80% wide in the square stage, so the label follows the photo's own corner */
.tb-scan__stage[data-fit="portrait"] .tb-scan__gen { left: calc(10% + 12px); }
.tb-scan__stage[data-fit="wide"] .tb-scan__gen { display: none; }
/* brand3 HUD density (.72) for the legal label: it stays legible where it falls on light paper */
.tb-ba .tb-ba__gen, .tb-scan .tb-scan__gen { background: var(--hud-bg); }
.tb-scan__panel { min-width: 0; padding-top: 4px; }
.tb-scan__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
}
.tb-scan__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 8px 0 20px;
  font-size: var(--fs-ui);
  color: var(--ink-3);
}
.tb-scan .ins-readouts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.tb-scan__seg { display: grid; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.tb-main { padding-bottom: var(--sec); }
.tb-scan__cohort { margin: 14px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-3); }

.tb-unlock {
  margin-top: 28px;
  padding: 20px 22px 22px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.tb-unlock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.tb-unlock__save { margin-left: auto; font-size: var(--fs-ui); font-weight: 400; color: var(--ink-3); }
.tb-unlock__text { margin: 10px 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.tb-unlock__text strong { font-weight: 500; color: var(--ink); }
.tb-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tb-scan__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.tb-scan__ctahead { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.tb-scan__ctasub { margin: 4px 0 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-3); }
.tb-scan__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .tb-pair { gap: 28px; }
  .tb-reviews { gap: 40px; }
  .tb-scan { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tb-split { grid-template-columns: minmax(0, 1fr); }
  .tb-split .tb-sechead { position: static; }
  .tb-scan__stagecol { max-width: 560px; }
  .tb-chart__row, .tb-chart__axis { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 64px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .tb-hero { padding-top: 40px; }
  .tb-deck { margin-top: 20px; font-size: 16.5px; }
  .tb-protocol { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
  .tb-protocol__cell { padding: 16px 16px 18px 0; }
  .tb-protocol__cell + .tb-protocol__cell { border-left: 0; }
  .tb-protocol__cell:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .tb-protocol__cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .tb-protocol dd { font-size: 14.5px; }

  .tb-verdict { padding-top: 56px; }
  .tb-sechead { margin-bottom: 32px; }
  .tb-sechead__lead { margin-top: 16px; }

  .tb-matrix { border-radius: 16px; }

  .tb-matrix__col-dim { width: 140px; }
  .tb-matrix__col-q, .tb-matrix__col-c { width: auto; }
  .tb-matrix .ed-table th, .tb-matrix .ed-table td { padding: 18px 16px 20px; }
  .tb-matrix__dim { font-size: 14px; }
  .tb-matrix td p.tb-matrix__head { font-size: 14.5px; }
  .tb-flag { display: table; margin: 6px 0 0; }

  .tb-bottomline { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 20px; }
  .tb-bottomline p { font-size: 15.5px; }

  .tb-step + .tb-step { margin-top: 64px; }
  .tb-step__title { margin-bottom: 20px; }
  .tb-pair { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tb-pair__text { margin-top: 14px; font-size: 15px; }
  .tb-shot__frame { border-radius: 12px; }
  .tb-ba__tag { white-space: normal; overflow: visible; }
  .tb-tiers { padding: 20px 18px 6px; }
  .tb-tiers__free { gap: 10px; }
  .tb-tiers__free dd { font-size: 22px; }
  .tb-tiers__free small { font-size: 13px; }
  .tb-tiers__free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-tiers__free > div:first-child { grid-column: 1 / -1; }
  .tb-tiers__list li { grid-template-columns: 44px minmax(0, 1fr); }
  .tb-note { padding: 18px 18px 20px; margin-top: 22px; }
  .tb-note p { font-size: 15px; }

  .tb-reviews { grid-template-columns: minmax(0, 1fr); gap: 48px; }

  .tb-chart { margin-top: 56px; padding: 22px 18px 18px; border-radius: 16px; }
  .tb-chart__row {
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-areas: "label label" "desc desc" "track val";
    row-gap: 10px;
    column-gap: 12px;
    margin-inline: -8px;
    padding: 14px 8px;
  }
  .tb-chart__val { font-size: 14px; line-height: 14px; }
  .tb-chart__track { margin-top: 0; }
  .tb-chart__axis { grid-template-columns: minmax(0, 1fr) 52px; column-gap: 12px; }
  .tb-chart__axis span { grid-column: 1; }

  .tb-protocolcase { margin-top: 64px; }
  .tb-versus { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .tb-versus__side { padding: 24px 20px 26px; }
  .tb-versus__side.is-cevo { box-shadow: inset 0 1px 0 var(--line); }
  .tb-ba .tb-ba__gen { position: static; grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

  .tb-scan .ins-readouts { grid-template-columns: minmax(0, 1fr); }
  .tb-scan .ins-readout, .tb-scan .ins-readout:nth-child(n) { box-shadow: none; }
  .tb-scan .ins-readout + .ins-readout { box-shadow: 0 -1px 0 var(--line); }
  .tb-scan__btns { width: 100%; }
  .tb-scan__btns > * { flex: 1 1 100%; justify-content: center; }
}

/* phones get Qoves's own 390 px captures (<picture> in the page), shown at phone size so the text stays readable */
@media (max-width: 640px) {
  .tb-shot__frame--phone { aspect-ratio: auto; max-width: 300px; margin-inline: auto; }
  .tb-unlock__head { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .tb-unlock__save { grid-column: 2; justify-self: start; margin-top: 4px; margin-left: 0; }
  .tb-shot__frame--phone img { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-chart__row, .tb-chart__bar, .tb-scan__stage img { transition: none; }
}

/* ---- 51-template-c.css ---- */
/* ==========================================================================
   51 · Template C, clinical guide (/guides/*). Prefix: .tc-
   Two columns, minmax(0, 1fr) + 340px, with a sticky scanner rail from 1100px; on narrower screens the rail
   sits inline after the intro. Shared parts (staging, head, hero type, answer, tables, FAQ, references, links,
   band, footer, every .ins- instrument piece) come from 10-base.css and 20-instrument.css; this file only lays
   them out and adds what a guide has on its own: caliper pair, framing bands, rail cards.
   ========================================================================== */

/* ---------- hero ---------- */
.tc-hero { padding-bottom: 56px; }
.tc-hero .ed-h1 { max-width: 22em; }
.tc-hero__lead { margin-top: 24px; }
.tc-hero__meta { margin-top: 24px; }

/* ---------- layout ---------- */
.tc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "rail" "body";
  row-gap: 32px;
  padding-bottom: var(--sec);
}
.tc-intro { grid-area: intro; min-width: 0; }
.tc-rail { grid-area: rail; min-width: 0; }
.tc-body { grid-area: body; min-width: 0; }

@media (min-width: 1100px) {
  .tc-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "intro rail" "body rail";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 5vw, 80px);
    row-gap: 0;
  }
  .tc-rail { align-self: stretch; }
}

/* ---------- intro: the direct answer ---------- */
.tc-answer { font-size: 16px; line-height: 1.65; }
.tc-answer__list { list-style: none; display: grid; gap: 10px; }
.tc-answer__list li { position: relative; padding-left: 18px; }
.tc-answer__list li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 6px; height: 1px; background: var(--ink-3);
}

/* ---------- sections in the main column ---------- */
.tc-sec {
  margin-top: calc(var(--sec) * .5);
  padding-top: calc(var(--sec) * .5);
  box-shadow: inset 0 1px 0 var(--line);
}
.tc-sec > .ed-h2 { max-width: 26ch; }
.tc-sec > p {
  margin-top: 20px; max-width: 68ch;
  font-size: var(--fs-body); line-height: 1.65; color: var(--ink-read);
}
.tc-sec > p strong { font-weight: 500; }
.tc-sec > .ed-table-wrap,
.tc-sec > .ed-faq,
.tc-sec > .ed-refs,
.tc-sec > .ed-links { margin-top: 32px; }

/* ---------- caliper pair (static instrument figures) ---------- */
.tc-cals {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.tc-cal { margin: 0; min-width: 0; display: grid; gap: 12px; align-content: start; }
/* a static figure: page scroll and text selection stay normal over it */
.tc-cal__stage { touch-action: auto; user-select: auto; -webkit-user-select: auto; }
.tc-cal__hud:not(.is-placed) { opacity: 0; }
.tc-cal__hud { z-index: 2; }
.tc-cal__read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-cal__read .ins-readout { padding: 14px 16px 15px; }
.tc-cal__read .ins-readout { display: flex; flex-direction: column; justify-content: space-between; }
.tc-cal__read .ins-readout__v { font-size: 22px; line-height: 26px; margin-top: 6px; }
.tc-cal__read .ins-readout__u { font-size: 13px; }
.tc-cals__note { margin-top: 14px; color: var(--ink-3); }

@media (min-width: 1100px) and (max-width: 1279px) {
  .tc-cal__read .ins-readout { padding: 12px 12px 13px; }
  .tc-cal__read .ins-readout__v { font-size: 19px; line-height: 24px; }
}
@media (max-width: 639px) {
  .tc-cals { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  /* the shared 2x2 readout rules expect four cells; this strip has three across */
  .tc-cal__read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc-cal__read .ins-readout:nth-child(3) { box-shadow: -1px 0 0 var(--line); }
  .tc-cal__read .ins-readout { padding: 12px 12px 13px; }
  .tc-cal__read .ins-readout__v { font-size: 20px; line-height: 24px; }
}

/* ---------- two-slider calculator ---------- */
.tc-calc { margin-top: 32px; gap: 20px; }
.tc-calc .ins-seg__opt .mono { margin-left: 2px; }
.tc-calc__sliders {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.tc-field {
  padding: 18px 20px 14px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1);
}
.tc-field .ins-field__row label { color: var(--ink); }
.tc-field .ins-field__row .ed-num { color: var(--ink-3); }
.tc-field .ins-slider { margin-top: 4px; }
.tc-field__scale {
  position: relative; display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; line-height: 16px; color: var(--ink-3);
}
.tc-field__mid { position: absolute; left: var(--at); transform: translateX(-50%); white-space: nowrap; }
.tc-field .ins-field__row output { white-space: nowrap; }
.tc-calc .ins-readout__v.tc-read__word { font-family: var(--font-sans); letter-spacing: -.02em; font-weight: 400; }
.tc-calc > .ins-status { margin-top: -6px; color: var(--ink-3); }

.tc-calc__out {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch;
}
.tc-curve .ins-curve__plot { padding-top: 8px; }
.tc-curve .ins-pill { transition: transform .2s var(--ease-out); }
.tc-rx {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1);
}
.tc-rx__class { font-size: 19px; line-height: 1.35; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.tc-rx__copy { font-size: 15.5px; line-height: 1.6; color: var(--ink-read); }
.tc-rx__copy strong { font-weight: 500; }
.tc-rx__link {
  margin-top: auto; padding-top: 4px;
  font-size: 14px; line-height: 20px; color: var(--pine);
  text-decoration: underline; text-decoration-color: rgba(36, 72, 57, .3);
}
.tc-rx__link:hover { text-decoration-color: currentColor; }

@media (min-width: 1280px) {
  .tc-calc__out { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 767px) {
  .tc-calc__sliders { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tc-field { padding: 16px 16px 12px; }
  .tc-field__mid { display: none; }
  .tc-rx { padding: 20px; }
  .tc-calc .ins-bar { flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-curve .ins-pill { transition: none; }
}

/* ---------- framing matrix + body-fat table ---------- */
.tc-band {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; line-height: 18px; font-weight: 450; color: var(--ink);
}
.ed-table .tc-band .ed-num { font-size: 12px; color: inherit; }
.ed-table .tc-band { white-space: nowrap; flex-wrap: nowrap; }
.tc-band--wide { background: rgba(36, 72, 57, .09); color: var(--pine); }
.tc-band--narrow { background: var(--paper); }
.tc-band--avoid { background: var(--obsidian); color: var(--mist); }
.tc-band__opt { display: block; margin-top: 6px; padding-left: 10px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-3); }
.ed-table.tc-matrix th, .ed-table.tc-matrix td { padding-inline: 14px; }
.ed-table.tc-matrix th:first-child, .ed-table.tc-matrix td:first-child { padding-left: 20px; }
.ed-table.tc-matrix th:last-child, .ed-table.tc-matrix td:last-child { padding-right: 20px; }
.ed-table.tc-matrix tbody th { }
.ed-table.tc-matrix td { }
.ed-table.tc-matrix td.tc-matrix__say { }
.ed-table.tc-matrix td.tc-matrix__say .ed-num { font-size: 13px; }
.ed-table.tc-matrix td:last-child { }
.tc-matrix__avoid > * { background: rgba(17, 22, 20, .025); }
.tc-fat__sub { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-3); }
.ed-table.tc-fat th, .ed-table.tc-fat td { padding-inline: 14px; }
.ed-table.tc-fat th:first-child, .ed-table.tc-fat td:first-child { padding-left: 20px; }
.ed-table.tc-fat tbody th { }
.ed-table.tc-fat td.mono { white-space: normal; }
.ed-table.tc-fat td:last-child { padding-right: 20px; }
.ed-table.tc-fat td strong.mono { font-size: 14px; }
.tc-delta { display: block; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 767px) {
  .ed-table.tc-matrix tbody th, .ed-table.tc-fat tbody th { white-space: normal; }
}

/* ---------- rail: scanner card + norm reference ---------- */
.tc-rail__sticky { display: grid; gap: 16px; }
.tc-scan {
  padding: 24px;
  border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-2);
}
.tc-scan__meta { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.tc-scan__title { margin-top: 8px; font-size: 21px; line-height: 1.28; font-weight: 450; letter-spacing: -.016em; }
.tc-scan__copy { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tc-scan__teaser.ins-teaser { margin-top: 18px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.tc-scan__teaser .ins-teaser__shots { border-radius: 12px; }
.tc-scan__matches { list-style: none; margin-top: 10px; }
.tc-scan__matches li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; line-height: 18px; color: var(--ink);
}
.tc-scan__matches li:last-child { border-bottom: 0; }
.tc-scan__matches .mono { font-size: 12px; color: var(--ink-3); }
.tc-scan__list { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.tc-scan__list li { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.tc-scan__list strong { font-weight: 500; }
.tc-scan__cta { width: 100%; margin-top: 18px; }

.tc-norms { padding: 20px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
.tc-norms__title { font-size: 15px; line-height: 20px; font-weight: 480; letter-spacing: -.006em; }
.tc-norms__list { margin-top: 8px; }
.tc-norms__list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 20px;
}
.tc-norms__list > div:first-child { border-top: 0; }
.tc-norms__list dt { color: var(--ink-2); }
.tc-norms__list dd { font-size: 13px; color: var(--ink); }

/* desktop rail: norms first (it scrolls away), then the scanner card sticks below the header */
@media (min-width: 1100px) {
  .tc-rail { display: flex; flex-direction: column; gap: 16px; }
  .tc-rail__sticky { display: contents; }
  .tc-norms { order: -1; }
  .tc-scan { position: sticky; top: 96px; }
}
/* short laptop screens: keep the sticky card inside the viewport */
@media (min-width: 1100px) and (max-height: 860px) {
  .tc-scan__list { display: none; }
  .tc-scan__copy { display: none; }
}
@media (max-width: 1099px) {
  .tc-rail__sticky { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .tc-rail__sticky { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
@media (max-width: 767px) {
  .tc-hero { padding-bottom: 36px; }
  .tc-layout { row-gap: 24px; }
  .tc-scan { padding: 20px; }
  .tc-norms { padding: 16px 20px; }
  .tc-sec > p { margin-top: 16px; }
  .tc-sec > .ed-table-wrap, .tc-sec > .ed-faq, .tc-sec > .ed-refs, .tc-sec > .ed-links, .tc-cals, .tc-calc { margin-top: 24px; }
}

/* ---- 52-plain-guide.css ---- */
/* ==========================================================================
   52 · Plain-first guide (Template C on body.pl). Prefix: .tc- (guide-only parts).
   Short answer list, contents list in the rail, worded readings under the caliper photos, haircut cards,
   inline free-scan calls for screens without the rail.
   ========================================================================== */
.pl .tc-intro { padding-top: 8px; }
.tc-short__h { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.tc-short { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; max-width: 62ch; }
.tc-short li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.55; color: var(--ink-read); }
.tc-short li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--pine); }
.tc-short b { font-weight: 500; color: var(--ink); }

.tc-toc { padding: 20px 22px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tc-toc__h { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.tc-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.tc-toc a { display: flex; gap: 12px; align-items: center; min-height: 40px; font-size: 15px; color: var(--ink); text-decoration: none; }
.tc-toc a:hover, .tc-toc a[aria-current] { color: var(--pine); }
.tc-toc a[aria-current] { font-weight: 500; }
@media (max-width: 1099px) { .tc-toc { display: none; } }

/* rail card: the free view's face-shape picture beside the promise */
.tc-free { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; }
.tc-free__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.pl .tc-free .tc-scan__title { font-size: 19px; }
.pl .tc-free .tc-scan__copy { margin-top: 6px; }
.pl .tc-scan__title { margin-top: 0; }

.tc-cal__word { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-read); }
.tc-cal__word b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

.tc-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-reads .tc-read__word { font-size: 19px; line-height: 1.3; }
@media (max-width: 639px) { .tc-reads { grid-template-columns: minmax(0, 1fr); } }
.tc-cta { margin-top: 20px; }

.tc-hcs { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tc-hc { min-width: 0; padding: 22px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); display: grid; gap: 14px; align-content: start; }
.tc-hc__top { display: flex; gap: 14px; align-items: center; }
.tc-hc__icon { flex: none; width: 44px; height: 54px; color: var(--pine); }
.tc-hc__icon svg { width: 100%; height: 100%; }
.tc-hc h3 { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 450; letter-spacing: -.012em; }
.tc-hc__band { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tc-hc__rule { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.tc-hc dl { margin: 0; display: grid; gap: 12px; }
.tc-hc dl > div { padding-top: 12px; box-shadow: inset 0 1px 0 var(--line); }
.tc-hc dt { font-size: 13px; color: var(--ink-3); }
.tc-hc dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-read); }
@media (max-width: 1279px) { .tc-hcs { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 640px) and (max-width: 1279px) {
  .tc-hc { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; }
  .tc-hc__top, .tc-hc__rule { grid-column: 1; }
  .tc-hc dl { grid-column: 2; grid-row: 1 / span 2; }
  .tc-hc dl > div:first-child { padding-top: 0; box-shadow: none; }
}

.tc-inline-cta { margin-top: calc(var(--sec) * .5); }
@media (min-width: 1100px) { .tc-inline-cta { display: none; } }
.pl .tc-body .pl-fold { margin-top: 0; }
.pl .tc-body .pl-fold h3 { margin-top: 28px; font-size: 19px; font-weight: 450; }
.tc-pairs__h { margin: 48px 0 0; font-size: 21px; line-height: 1.3; font-weight: 450; letter-spacing: -.014em; }
.tc-pairs { margin-top: 20px; }
.pl .tc-layout { padding-top: 40px; }
@media (min-width: 1100px) { .pl .tc-layout { padding-top: 72px; } }
.pl .tc-cals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .pl .tc-cals { gap: 10px; } .tc-cal__word { font-size: 14px; } }
.pl .tc-rx { align-self: start; }

/* rail: contents and the scan card stay together under the header (51 makes only the card sticky) */
@media (min-width: 1100px) {
  .pl .tc-rail__sticky { display: grid; gap: 16px; position: sticky; top: 96px; }
  .pl .tc-scan { position: static; }
}
/* below 1100 the rail card would sit before the first picture: the inline calls to action do its job there */
@media (max-width: 1099px) { .pl .tc-rail { display: none; } }
.tc-hcs { align-items: start; }
@media (min-width: 1280px) { .tc-hcs { align-items: stretch; } }
.pl .tc-body .ed-faq > :last-child { border-bottom: 0; box-shadow: none; }

/* ---- 53-template-c-plain.css ---- */
/* ==========================================================================
   53 · Generated plain-first guides (Template C, body.tpl-c.pl). Prefix: .tc-pick (the eye-tilt mirror choice).
   The eye-tilt check is a four-way choice of what a person sees in a mirror (a ruler cannot measure a few degrees);
   eye crops stack one per row on phones so the lines stay readable; Reset stays inside the content edge.
   ========================================================================== */
.tc-pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tc-pick__opt {
  position: relative; min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px;
  border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); cursor: pointer;
  color: var(--ink-3); transition: box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.tc-pick__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tc-pick__eye { width: 96px; height: 60px; max-width: 100%; color: currentColor; }
.tc-pick__eye svg { width: 100%; height: 100%; display: block; }
.tc-pick__t { font-size: 15px; line-height: 20px; text-align: center; color: var(--ink); }
.tc-pick__opt:hover { color: var(--ink); }
.tc-pick__opt:has(input:checked) { color: var(--pine); box-shadow: inset 0 0 0 1.5px var(--pine), var(--shadow-1); }
.tc-pick__opt:has(input:checked) .tc-pick__t { font-weight: 500; color: var(--pine); }
.tc-pick__opt:has(input:focus-visible) { outline: 2px solid var(--pine); outline-offset: 2px; }
.tc-pick__note { margin: 14px 0 20px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 559px) { .tc-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* eye crops are wide and short: one per row on phones */
@media (max-width: 599px) { .pl .tc-cals.tc-cals--wide { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Reset keeps its 44px height on touch screens but no longer hangs 8px past the content edge */
@media (max-width: 1023px) { .tpl-c .tc-calc .ins-bar .ed-textbtn { margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .tc-pick__opt { transition: none; } }

/* the tilt result has no chart beside it: it fills the row at every width (51 splits .tc-calc__out 7fr / 5fr at 1280) */
@media (min-width: 1280px) { .tc-calc__out.tc-calc__out--one { grid-template-columns: minmax(0, 1fr); } }

/* ---- 61-template-d.css ---- */
/* ==========================================================================
   61 · Template D, original study (/research/*). Prefix: .td-
   Hook + answer, the two share figures and their toolbar, the camera-distance instrument (a real photo warped
   live in WebGL, with the shared .ins- stage, pills, segmented control, slider and readouts), then the academic
   layer: table note, HTML math, steps, proof figures. Shared pieces come from 10-base and 20-instrument.
   ========================================================================== */

/* ---------- hook ---------- */
.td-hero { padding-bottom: 104px; }
.td-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 40px;
  align-items: start;
}
.td-hero .td-hero__h1 { max-width: 17ch; }
.td-hero__lead { margin-top: 28px; max-width: 58ch; }
.td-hero__meta { margin-top: 20px; }
.td-hero__meta code { color: var(--ink-2); }
.td-answer { margin-top: 24px; }
.td-answer__title { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -.006em; color: var(--ink); }
.td-answer p { text-wrap: pretty; }

/* at a glance: quiet hairline rows, numbers at reading size (no KPI tiles) */
.td-glance {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
}
.td-glance__row { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.td-glance dt { font-size: 14px; line-height: 20px; font-weight: 460; color: var(--ink); }
.td-glance dd { margin: 4px 0 0; font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.td-glance__v { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 26px; line-height: 32px; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--pine); }

/* ---------- section heads used below ---------- */
.td-sec-head { max-width: 880px; }
.td-sec-lead { margin-top: 20px; max-width: 68ch; font-size: var(--fs-body); line-height: 1.62; color: var(--ink-read); }
.td-inline-link { color: var(--pine); font-weight: 450; text-decoration: underline; text-decoration-color: rgba(36, 72, 57, .35); }
.td-inline-link:hover { text-decoration-color: currentColor; }

/* ---------- share figures ---------- */
.td-share__head { max-width: 880px; }
.td-share__note { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.td-share__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 16fr) minmax(0, 9fr);   /* 16:9 beside 1:1 at the same height */
  gap: 24px;
  align-items: start;
}
.td-card { margin: 0; min-width: 0; }
.td-card__svg {
  width: 100%; height: auto;
  border-radius: 16px;
  background: var(--obsidian);
  box-shadow: 0 0 0 1px rgba(17, 22, 20, .08), 0 24px 48px -30px rgba(17, 22, 20, .45);
}
.td-card__svg--m { display: none; }   /* phone copy of the 16:9 card, panels stacked; the 16:9 stays the PNG source */
@media (max-width: 640px) {
  #viral-card-16x9 { display: none; }
  #viral-card-16x9-m { display: block; }
}

/* distribution toolbar: secondary pills, icon swaps to a check on success */
.td-share__bar {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.td-share__label { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.td-share__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.td-share__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14px; line-height: 20px; font-weight: 420; white-space: nowrap;
  transition: background-color .18s ease-out, box-shadow .18s ease-out, color .18s ease-out, transform .125s ease-out;
}
.td-share__btn:hover { background: rgba(17, 22, 20, .04); box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .26); }
.td-share__btn:active { transform: scale(.97); }
.td-share__btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 999px; }
.td-share__btn.is-busy { cursor: progress; color: var(--ink-2); }
.td-share__btn.is-done { color: var(--pine); background: rgba(36, 72, 57, .07); box-shadow: inset 0 0 0 1px rgba(36, 72, 57, .38); }
.td-share__btn.is-failed { box-shadow: inset 0 0 0 1px rgba(17, 22, 20, .4); }
.td-share__txt { font-variant-numeric: tabular-nums; }
.td-ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), filter .2s var(--ease-out);
}
.td-share__btn > .td-ico { grid-area: 1 / 1; }
.td-ico--done { position: absolute; left: 14px; opacity: 0; transform: scale(.4); filter: blur(3px); }
.td-share__btn.is-done .td-ico--idle { opacity: 0; transform: scale(.4); filter: blur(3px); }
.td-share__btn.is-done .td-ico--done { opacity: 1; transform: none; filter: none; }

/* ---------- camera-distance instrument ---------- */
.td-sim__head { max-width: 880px; }
.td-sim__lead { margin-top: 20px; max-width: 64ch; font-size: var(--fs-body); line-height: 1.62; color: var(--ink-read); }
.td-sim__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: 32px;
  align-items: start;
}
.td-sim__stagecol { min-width: 0; }
.td-sim__stage { display: block; }
.td-sim__canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .3s var(--ease);
}
.td-sim__stage.is-warped .td-sim__canvas { opacity: 1; }
.td-sim__stage .ins-overlay { z-index: 2; }
.td-sim__stage .ins-hud { z-index: 3; }
.td-sim__stage .ed-genlabel { z-index: 4; }
.td-sim__stage .ins-pill { will-change: transform; }
.td-sim__stage .ins-hud .ins-pill { transition: opacity .2s ease-out; }
.td-tick-ghost { stroke: var(--hud-guide); stroke-dasharray: none; }
.td-iris { stroke: rgba(243, 245, 242, .42); fill: none; transition: stroke .2s ease-out; }
.td-sim__stage.is-corrected .td-iris { stroke: rgba(243, 245, 242, .95); }

.td-sim__legend {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 13px; line-height: 19px; color: var(--ink-2);
}
.td-sim__legend { column-gap: 20px; }
.td-sim__legend-i { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.td-key { display: inline-block; width: 22px; height: 0; border-top: 1.5px solid var(--ink-2); }
.td-key--dash { border-top-style: dashed; border-top-color: var(--ink-3); }

.td-sim__panel { display: grid; gap: 28px; min-width: 0; }
.td-sim__panel.is-corrected :is(.td-sim__dist, .td-sim__control, .td-sim__presets) { opacity: .45; transition: opacity .18s ease-out; }
.td-sim__dist-k { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.td-sim__dist-v {
  margin-top: 6px;
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 64px; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.td-sim__unit { font-size: 20px; letter-spacing: 0; color: var(--ink-3); }
.td-sim__dist-s { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink-2); }

.td-sim__control { margin-top: -8px; }
.td-sim__scale { position: relative; height: 18px; margin-top: 2px; }
.td-sim__scale span {
  position: absolute; top: 0;
  left: calc(10px + (100% - 20px) * var(--f));
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .01em;
  color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.td-sim__scale span:first-child { transform: translateX(-10px); }
.td-sim__scale span:last-child { transform: translateX(calc(-100% + 10px)); }

.td-sim__presets-k { margin-bottom: 10px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.td-sim__seg { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); }
.td-sim__seg .ins-seg__opt { padding: 0 6px; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }

.td-sim__readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.td-sim__readouts .ins-readout:nth-child(3) { box-shadow: 0 -1px 0 var(--line); }
.td-sim__readouts .ins-readout:nth-child(4) { box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
.td-sim__readouts .ins-readout__k .mono { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.td-sim__readouts .ins-readout__u { margin-left: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }

/* the iris correction: a card with a real switch */
.td-fix {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 20px 20px 22px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1);
}
.td-fix__title { font-size: 15px; line-height: 22px; font-weight: 480; color: var(--ink); }
.td-fix__text { margin-top: 4px; font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.td-switch {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 2px;
  border: 0; background: none; color: var(--ink-2);
  font-size: 13px; line-height: 18px;
}
.td-switch__track {
  position: relative; width: 46px; height: 28px; border-radius: 999px;
  background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .2s var(--ease);
}
.td-switch__thumb {
  position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mist); box-shadow: 0 1px 3px rgba(17, 22, 20, .3), 0 0 0 .5px rgba(17, 22, 20, .12);
  transition: transform .22s var(--ease-out);
}
.td-switch__label { min-width: 2.2ch; text-align: left; }
.td-switch[aria-checked="true"] { color: var(--pine); }
.td-switch[aria-checked="true"] .td-switch__track { background: var(--pine); box-shadow: none; }
.td-switch[aria-checked="true"] .td-switch__thumb { transform: translateX(18px); }
.td-switch:focus-visible { outline: none; }
.td-switch:focus-visible .td-switch__track { box-shadow: 0 0 0 2px var(--mist), 0 0 0 4px var(--pine); }
.td-sim__status { margin-top: -12px; }

/* inline math (variables italic, subscripts small) */
.td-math-inline { white-space: nowrap; }
.td-math-inline var, .td-eq var { font-style: italic; font-family: var(--font-sans); }
.td-math-inline sub, .td-eq sub { font-size: max(.68em, 12px); line-height: 0; }

/* ---------- distance table ---------- */
.td-table-wrap { margin-top: 48px; }
.td-table-wrap:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.td-cohort thead th .mono { display: block; margin-top: 2px; font-size: 12px; }
.td-cohort th, .td-cohort td { padding-inline: 16px; }
.td-cohort tbody th { white-space: normal; }
.td-cohort td.mono { font-size: 13px; white-space: normal; }
.td-cohort .td-cohort__ref > * { background: rgba(126, 150, 136, .08); }
.td-note { margin-top: 20px; max-width: 92ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ---------- derivation ---------- */
.td-derive__grid {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5vw, 80px); row-gap: 56px;
}
.td-derive__item { min-width: 0; }
.td-derive__item > p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-read); max-width: 64ch; }
.td-eq {
  margin-top: 24px;
  padding: 22px 24px 24px;
  border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1);
}
.td-eq__k { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.td-eq__k ~ .td-eq__k { margin-top: 22px; }
.td-eq__line {
  margin-top: 8px;
  font-size: 20px; line-height: 2.6; font-weight: 380; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.td-eq__op { margin: 0 .3em; color: var(--ink-3); }
.td-eq__g { white-space: nowrap; }
.td-frac {
  display: inline-flex; flex-direction: column; align-items: stretch;
  margin: 0 .15em; text-align: center; vertical-align: middle; line-height: 1.25;
}
.td-frac__n, .td-frac__d { padding: 0 6px; white-space: nowrap; }
.td-frac__n { padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.td-frac__d { padding-top: 3px; }
.td-paren { font-size: 1.6em; line-height: 1; font-weight: 250; color: var(--ink-2); vertical-align: middle; }
.td-eq__result { margin-top: 12px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--pine); font-variant-numeric: tabular-nums; }

/* ---------- three steps ---------- */
.td-steps {
  margin-top: 48px;
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 56px); row-gap: 8px;
}
.td-steps__item { padding-top: 24px; border-top: 1px solid var(--line-2); }
.td-steps__item p { margin-top: 12px; font-size: 16px; line-height: 1.62; color: var(--ink-read); }


/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .td-sim__grid { grid-template-columns: minmax(0, 1fr); }
  .td-sim__stagecol { max-width: 560px; }
}
@media (max-width: 999px) {
  .td-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .td-hero__grid { row-gap: 0; }
  .td-hero__copy { display: contents; }
  .td-answer { order: 1; margin-top: 36px; }
  .td-glance { order: 2; margin-top: 32px; }
  .td-share__grid { grid-template-columns: minmax(0, 1fr); }
  .td-derive__grid { grid-template-columns: minmax(0, 1fr); }
  .td-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .td-hero { padding-bottom: 72px; }
  .td-hero__lead { margin-top: 20px; }
  .td-glance { grid-template-columns: minmax(0, 1fr); }
  .td-sim__readouts .ins-readout__u { display: block; margin: 4px 0 0; }
  .td-share__grid { margin-top: 32px; gap: 32px; }
  .td-card__svg { border-radius: 12px; }
  .td-share__bar { margin-top: 32px; }
  .td-share__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .td-share__btn { height: 48px; justify-content: flex-start; }
  .td-sim__grid { margin-top: 32px; row-gap: 24px; }
  .td-sim__stagecol { max-width: none; }
  .td-sim__stage { border-radius: 16px; }
  .td-hide-s { display: none; }
  .td-sim__dist-v { font-size: 52px; }
  .td-sim__seg .ins-seg__opt { height: 44px; padding: 0 2px; font-size: 12.5px; }
  .td-fix { flex-direction: column; align-items: flex-start; padding: 18px; }
  .td-eq { padding: 18px 16px 20px; }
  .td-eq__line { font-size: 17px; }
  .td-steps { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .td-ico, .td-share__btn, .td-switch__track, .td-switch__thumb, .td-sim__canvas, .td-iris { transition: none; }
  .td-share__btn:active { transform: none; }
}

/* ---- 62-plain-study.css ---- */
/* ==========================================================================
   62 · Plain-first study (Template D on body.pl). Prefix: .ts- (study-only parts).
   The same face at 30 cm and 1.5 m as photo pairs (lines only, nothing else on a photo), three takeaways, the
   nose-widening chart (HTML labels over a stretched SVG line, so text never scales), the simulator with its
   controls under the photo and the readout in words, picture cards for the three photo steps.
   ========================================================================== */
.pl .ts-hero { padding-bottom: 0; }
.pl .ts-proof-sec { padding-top: 48px; }
@media (max-width: 767px) { .pl .ts-proof-sec { padding-top: 36px; } }

/* ---------- the same face, two distances ---------- */
.ts-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.ts-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.ts-pair figure { margin: 0; min-width: 0; }
.ts-shot { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--paper); }
.ts-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ts-shot svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ts-l, .ts-s, .ts-g { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ts-l { stroke: rgba(243, 245, 242, .95); stroke-width: 1.5; }
.ts-s { stroke: rgba(17, 22, 20, .35); stroke-width: 3.5; }
.ts-g { stroke: rgba(255, 255, 255, .85); stroke-width: 2.5; stroke-dasharray: 4 4; stroke-linecap: butt; }
.ts-pair figcaption { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.ts-pair figcaption b { display: block; font-weight: 500; color: var(--ink); }
.ts-means { margin-top: 48px; }
/* the key for the lines and which photo is which, under the pairs (never on a photo) */
.ts-proof-key { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.ts-proof-note { margin: 0; max-width: 62ch; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ts-proof-key .td-sim__legend { margin-top: 0; }
@media (max-width: 899px) {
  .ts-proof { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 20px; }
  /* the man's pair ends inside the first tablet screen (768 x 1024) */
  .pl .ts-proof-sec { padding-top: 28px; }
}
@media (max-width: 599px) {
  .ts-pair figcaption { font-size: 14px; }
  .ts-means { margin-top: 36px; }
  /* the man's pair fits the first phone screen (390 x 664 and 375 x 667, without the staging bar):
     no breadcrumb row, a smaller title, and slightly shorter photos (lines are drawn with slice, so they stay on the face) */
  .pl .ts-hero { padding-top: 16px; }
  .pl .ts-hero .ed-crumbs { display: none; }
  .ts-shot { aspect-ratio: 8 / 9; }
  .pl .ts-hero .pl-hero__grid { margin-top: 0; gap: 12px; }
  .pl .ts-hero .ed-h1 { font-size: 28px; }
  .pl .ts-hero .pl-lead { font-size: 17px; line-height: 26px; }
  .pl .ts-hero .pl-note { margin-top: 8px; }
  .pl .ts-proof-sec { padding-top: 16px; }
  .ts-proof-head h2 { margin-top: 0; font-size: 24px; line-height: 30px; }
  .ts-proof { margin-top: 12px; }
  .ts-proof-key { margin-top: 14px; }
  .ts-proof-note { font-size: 13px; line-height: 19px; }
}

/* ---------- chart ---------- */
.ts-chart { margin: 40px 0 0; padding: 28px 32px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); }
.ts-chart__y { margin: 0 0 20px; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.ts-chart__plot, .ts-chart__x { position: relative; margin-left: 44px; margin-right: 8px; }
.ts-chart__plot { height: clamp(220px, 26vw, 340px); box-shadow: inset 0 -1px 0 var(--line-2); }
.ts-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ts-chart__curve { fill: none; stroke: var(--pine); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ts-chart__area { fill: rgba(36, 72, 57, .07); }
.ts-chart__gy { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); height: 0; border-top: 1px solid var(--line); }
.ts-chart__gy:first-child { border-top: 0; }
.ts-chart__gy span { position: absolute; right: calc(100% + 10px); top: 0; transform: translateY(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-chart__dot { position: absolute; left: calc(var(--x) * 100%); bottom: calc(var(--y) * 100%); width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--pine); box-shadow: 0 0 0 3px var(--card); }
.ts-chart__lab { position: absolute; left: calc(var(--x) * 100%); bottom: calc(var(--y) * 100%); transform: translate(-50%, -12px); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-chart__lab--r { transform: translate(14px, 50%); }
.ts-chart__lab small { font-size: 14px; font-weight: 400; color: var(--ink-2); }
/* wide plots: right-hand labels sit above-right of their dot, clear of the falling line */
@media (min-width: 768px) { .ts-chart__lab--r { transform: translate(12px, -4px); } }
.ts-chart__x { height: 28px; }
.ts-chart__x span { position: absolute; left: calc(var(--x) * 100%); top: 10px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-chart__x span:first-child { transform: none; }
.ts-chart__x span:last-child { transform: translateX(-100%); }
.ts-chart__xt { margin: 8px 0 0 44px; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.ts-chart__src { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-3); }
@media (max-width: 599px) {
  .ts-chart { padding: 20px 16px 18px; }
  .ts-chart__plot, .ts-chart__x { margin-left: 34px; margin-right: 4px; }
  .ts-chart__plot { height: 240px; }
  .ts-chart__xt { margin-left: 34px; }
  .ts-chart__lab { font-size: 14px; }
  .ts-chart__lab small { font-size: 13px; }
}

/* ---------- simulator: photo with its controls under it, panel beside it ---------- */
.ts-sim .ins-seg__opt { min-height: 44px; }
.ts-sim .ins-slider { height: 44px; }
.ts-sim .td-tick-ghost { stroke: rgba(255, 255, 255, .85); stroke-width: 2.5; stroke-dasharray: 4 4; }
.ts-sim {
  margin-top: 40px;
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  grid-template-areas: "photo panel" "photo cta" "under cta";
  column-gap: clamp(40px, 5vw, 72px); row-gap: 16px; align-items: start;
}
.ts-sim__photo { grid-area: photo; min-width: 0; }
.ts-sim__panel { grid-area: panel; gap: 24px; }
.ts-sim__under { grid-area: under; display: grid; gap: 14px; min-width: 0; }
.ts-sim__under .td-sim__legend { margin-top: 0; }
.ts-sim__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ts-sim__lens { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ts-sim__dist-k { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ts-sim__dist-v {
  margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-family: var(--font-mono); font-size: 60px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.ts-sim__ctx { margin-left: 8px; font-family: var(--font-sans); font-size: 18px; line-height: 1.3; letter-spacing: -.005em; color: var(--ink-2); }
.ts-words { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.ts-words > div { min-width: 0; padding: 16px 18px 18px; }
.ts-words > div + div { box-shadow: -1px 0 0 var(--line); }
.ts-words dt { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.ts-words dd { margin: 4px 0 0; font-size: 20px; line-height: 1.3; font-weight: 450; letter-spacing: -.01em; color: var(--ink); }
.ts-words dd.ts-words__n { margin-top: 4px; font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ts-sim .ts-cta { grid-area: cta; margin-top: 8px; }
@media (max-width: 1023px) {
  /* the answer and the switches right under the photo, then the slider: photo, answer and switches share one screen */
  .ts-sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "under" "panel" "cta"; row-gap: 12px; }
  .ts-sim__photo { width: min(100%, calc((100svh - 470px) * .8)); min-width: 184px; justify-self: center; }
  /* on phones the number and its context say it on one line; aria-labelledby still reads the hidden label */
  .ts-sim__dist-k { display: none; }
  .ts-sim__panel { display: flex; flex-direction: column; gap: 12px; }
  .ts-sim .ts-words { order: -1; }
  .ts-sim .td-sim__presets { order: 3; }
  .ts-sim .td-sim__control { margin-top: -4px; }
  .ts-sim__under { gap: 10px; }
  .ts-sim__dist-v { font-size: 32px; margin-top: 0; }
  .ts-sim__ctx { font-size: 16px; }
  .ts-sim .td-sim__presets-k { margin-bottom: 8px; }
  .ts-words dd { font-size: 17px; }
  .ts-words > div { padding: 10px 14px 12px; }
  .ts-sim .td-fix { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; min-height: 44px; }
  .ts-sim .td-fix__text { display: none; }
}
@media (max-width: 767px) { .ts-sim .td-sim__legend { display: none; } }
/* small phones: the lens line would wrap under the switch; the distance label above the slider already names the setup */
@media (max-width: 399px) { .ts-sim__lens { display: none; } }

/* ---------- three photo steps as picture cards ---------- */
.ts-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 0; padding: 0; list-style: none; }
.ts-step { min-width: 0; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.ts-step__pic { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--paper); color: var(--pine); }
.ts-step__pic svg { width: 76%; height: auto; }
.ts-step__txt { padding: 20px 22px 24px; }
.ts-step h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 450; letter-spacing: -.012em; }
.ts-step p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 899px) {
  .ts-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ts-step { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .ts-step__pic { aspect-ratio: auto; min-height: 120px; }
  .ts-step__pic svg { width: 88%; }
  .ts-step__txt { padding: 16px 18px 18px; }
  .ts-step h3 { font-size: 18px; }
  .ts-step p { font-size: 15px; }
}

/* ---------- fold: the two derivation halves side by side on wide screens ---------- */
.ts-fold-derive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 8px; }
.ts-fold-derive > div { min-width: 0; }
.ts-fold-derive h4 { margin-top: 12px; }
@media (max-width: 899px) { .ts-fold-derive { grid-template-columns: minmax(0, 1fr); } }
.pl .td-share .td-share__grid { margin-top: 32px; }
.td-share__actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* at phone width the 1:1 card's small print can't be read; its PNG download stays in the toolbar */
@media (max-width: 599px) { .pl .td-share .td-card--square { display: none; } }
.tpl-d .pl-fold__body p + p { margin-top: 12px; }

/* ---- 71-pinkmirror-alternative.css ---- */
/* ---------- PinkMirror vs. CEVO (articles/pinkmirror-alternative.html, 27 Oct 2026) ----------
   Page-scoped additions to the plain-first comparison (.pc-*, 39-plain-compare.css). Classes are .n-pm-*. */

/* the PinkMirror brand tile: its real mark, dark name */
.n-pm-tile { color: #2b2620; }
.n-pm-tile img { border-radius: 8px; }
.pc-tile.is-qv a { color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.pc-tile.is-qv a:hover { color: var(--ink); }

/* PinkMirror's real mark keeps its colour on the dark panels (the shared rule turns marks into silhouettes) */
.pc-stats__row .pc-who img[src*="pinkmirror-mark"], .pc-pay__strip .pc-who img[src*="pinkmirror-mark"] { filter: none; }

/* how PinkMirror works: four of its own screens in one strip, every frame the same square, captions in one rhythm */
.n-pm-how { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.n-pm-how > li { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; }
.n-pm-how__vis { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.n-pm-how__vis img { display: block; width: 100%; height: 100%; object-fit: contain; }
.n-pm-how h3 { margin: 8px 0 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.n-pm-how p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-read); }
.n-pm-how p a { color: var(--pine); }
@media (max-width: 1023px) { .n-pm-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
@media (max-width: 479px) { .n-pm-how { gap: 20px 12px; } .n-pm-how h3 { font-size: 17px; } .n-pm-how p { font-size: 15px; } }

/* before you upload: two photos and the note card as three equal columns, captions in one style */
.n-pm-tips { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: stretch; }
.n-pm-tips__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: none; margin: 0; }
.p-pm .n-pm-tips__photos figcaption { color: var(--ink-2); font-weight: 400; }
.p-pm .n-pm-tips__photos figcaption b { color: var(--ink); font-weight: 500; }
.n-pm-priv { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 28px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-pm-priv__p { margin: 0; font-size: 20px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.n-pm-priv__s { display: flex; gap: 8px; align-items: baseline; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.n-pm-priv__s img { flex: none; width: 18px; height: 18px; position: relative; top: 3px; }
.n-pm-priv__s b { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) { .n-pm-tips { grid-template-columns: minmax(0, 1fr); } .n-pm-priv__p { font-size: 18px; } }
@media (max-width: 599px) { .n-pm-priv { padding: 20px; } .n-pm-tips__photos { gap: 12px; } }
.n-pm-privt { margin-top: 16px; }
.n-pm-privt .pc-table tbody th { width: 150px; }
.n-pm-privt__s { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 599px) { .n-pm-priv { padding: 20px; } }

/* Trustpilot: lead with the count; the 1-star bar in neutral grey, not the green used for good scores */
.n-pm-dist .pc-dist__score b { display: block; font-size: 28px; line-height: 1.2; margin: 0 0 4px; }
.n-pm-dist .pc-dist__bar span { background: var(--ink-3); }

/* other alternatives table: the option column a little wider, links in ink */
.n-pm-alt .pc-table tbody th { width: 170px; }
.n-pm-alt .pc-table tbody th a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.n-pm-alt .pc-table thead th { font-weight: 500; }

/* the months control holds four options: let it wrap on small phones instead of overflowing */
#pcPay [aria-label="Months of Elite Access"] { flex-wrap: wrap; }
#pcPay [aria-label="Months of Elite Access"] .ins-seg__opt { min-width: 48px; }

/* the four-across stats panel at 1024–1199 px: PinkMirror's longer values drop under the name instead of overlapping */
@media (min-width: 1024px) and (max-width: 1199px) {
  .pc-stats:has(img[src*="pinkmirror-mark"]) .pc-stats__row { flex-wrap: wrap; row-gap: 2px; }
  .pc-stats:has(img[src*="pinkmirror-mark"]) .pc-stats__row b { font-size: 18px; }
  .pc-stats:has(img[src*="pinkmirror-mark"]) li { align-content: start; }
}

/* section heads: subtitle under its heading (critic 27 Oct) */
.p-pm main .pl-sechead { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }

/* price strip: labels level with the prices; in flow on phones so it never covers the cards */
.p-pm .pc-pay__strip > span:not(.pc-pay__vs) { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 767px) { .p-pm .pc-pay__strip { position: static; } }

/* free tools to try next: three equal tiles with a picture */
.n-pm-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.n-pm-tools li { min-width: 0; }
.n-pm-tools a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; height: 100%; padding: 16px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.n-pm-tools a:hover { box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-pm-tools img { display: block; width: 96px; height: 120px; object-fit: cover; border-radius: 12px; }
.n-pm-tools a > span { display: grid; gap: 6px; }
.n-pm-tools__t { font-size: 18px; font-weight: 500; }
.n-pm-tools__l { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1023px) { .n-pm-tools { grid-template-columns: minmax(0, 1fr); } .n-pm-tools a { grid-template-columns: 88px minmax(0, 1fr); } .n-pm-tools img { width: 88px; height: 110px; } }

/* the note card: the two readings as big answers so the card fills the photos' height with content */
.n-pm-priv__dl { margin: 0; display: grid; gap: 0; }
.n-pm-priv__dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.n-pm-priv__dl dt { font-size: 15px; color: var(--ink-2); }
.n-pm-priv__dl dd { margin: 0; font-size: 26px; font-weight: 380; letter-spacing: -.02em; color: var(--ink); }
@media (min-width: 900px) { .p-pm .n-pm-tips__photos img { aspect-ratio: 1 / 1; } }

/* round 2: CEVO pay card carries the same monthly-fee row as the other side */
.n-pm-incl { padding-top: 12px; border-top: 1px solid var(--line); }

/* ---- 72-prettyscale-alternative.css ---- */
/* ---------- prettyscale-alternative (/vs/, 27 Oct 2026): page-scoped additions to 39-plain-compare.css ----------
   PrettyScale tile, stats panel fit, the try-it row, CEVO's worded readout next to PrettyScale's result screen, the
   four-tries strip, the "which one fits" chooser. Classes are .n-ps-*. Nothing here sits on a photo. */

.n-ps-tile { background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.n-ps-tile__name { display: inline-flex; align-items: center; gap: 10px; height: 42px; color: #2a1a24; font-size: 22px; white-space: nowrap; }
.n-ps-tile__name img { width: 36px; height: 36px; border-radius: 8px; }
.n-ps-tile__name b { font-weight: 450; letter-spacing: -.01em; }
@media (max-width: 599px) {
  .n-ps-tile__name { height: 32px; font-size: clamp(15px, 4.4vw, 19px); gap: 8px; }
  .n-ps-tile__name img { width: 26px; height: 26px; }
}
.pc-who img[src*="prettyscale-mark"] { border-radius: 4px; }
.pc-stats__row .pc-who img[src*="prettyscale-mark"] { filter: none; }
.pc-pay__strip .pc-who img[src*="prettyscale-mark"] { filter: none; }

/* screens: PrettyScale's dark test frame keeps its own background */


/* CEVO's reading of the same photo, in words */
.n-ps-read { padding: 22px 24px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-ps-read__h { margin: 0 0 6px; font-size: 15px; color: var(--ink-3); }
.n-ps-read dl { margin: 0; display: grid; }
.n-ps-read dl > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.n-ps-read dl > div:first-child { border-top: 0; }
.n-ps-read dt { font-size: 14px; color: var(--ink-3); }
.n-ps-read dd { margin: 0; display: grid; gap: 2px; }
.n-ps-read dd b { font-size: 21px; font-weight: 420; letter-spacing: -.02em; color: var(--ink); }
.n-ps-read dd span { font-size: 15px; color: var(--ink-2); }

/* which one fits */
.n-ps-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: stretch; }
.n-ps-pick__opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-content: start; }
.n-ps-chip { min-height: 56px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; font-size: 16px; color: var(--ink); cursor: pointer; text-align: left; }
.n-ps-chip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.n-ps-chip[aria-pressed="true"] { background: var(--pine); color: var(--mist); box-shadow: none; }
.n-ps-chip:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.n-ps-pick__out { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 208px; padding: 24px 26px; border-radius: var(--r-card); background: var(--obsidian); color: var(--ink-d); }
.n-ps-pick__k { margin: 0; font-size: 14px; color: var(--ink-d-2); }
.n-ps-pick__who { margin: 0; font-size: 22px; }
.n-ps-pick__who .pc-who { color: var(--ink-d); font-weight: 450; }
.n-ps-pick__who .pc-who img { width: 26px; height: 26px; }
.n-ps-pick__who .pc-who img[src*="mark-pine"] { filter: brightness(0) invert(.9); }
.n-ps-pick__t { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-d); }
@media (max-width: 767px) { .n-ps-pick { grid-template-columns: minmax(0, 1fr); } .n-ps-chip { font-size: 15px; padding: 10px 14px; } .n-ps-pick__out { min-height: 0; } }

/* stats panel: longer values wrap instead of running past their column; two columns until the wide layout */
.n-ps-stats .pc-stats__row b { white-space: normal; text-align: right; line-height: 1.2; }
.n-ps-stats .pc-stats__row .pc-who { flex: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .n-ps-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-ps-stats li:nth-child(3) { box-shadow: inset 0 1px 0 rgba(243, 245, 242, .12); }
  .n-ps-stats li:nth-child(4) { box-shadow: inset 1px 0 0 rgba(243, 245, 242, .12), inset 0 1px 0 rgba(243, 245, 242, .12); }
}

/* try it now, right under the hero */
.n-ps-try { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; margin-top: 16px; padding: 20px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-ps-try__txt p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.n-ps-try__txt .n-ps-try__t { margin-bottom: 4px; font-size: 19px; font-weight: 450; color: var(--ink); }
.n-ps-try__go { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.n-ps-try__ps { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); }
.n-ps-try__ps a { color: var(--ink-2); }
@media (max-width: 899px) { .n-ps-try { grid-template-columns: minmax(0, 1fr); } .n-ps-try__go { justify-content: flex-start; } }
@media (max-width: 599px) { .n-ps-try { padding: 18px; } .n-ps-try__go .ed-btn:not(.ed-btn--ghost) { flex: 1 1 100%; } .n-ps-try__go .ed-btn--ghost { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 15px; white-space: nowrap; } }

/* other alternatives table (in the fold) */
.n-ps-alt tr.is-cevo th, .n-ps-alt tr.is-cevo td { background: var(--card); }

/* lining up: CEVO's two distances, same width as the PrettyScale screen */
.n-ps-dist { gap: 12px; }
.n-ps-dist figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; }


.n-ps-read__no { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.n-ps-read__no a { color: var(--pine); text-decoration: none; }
.n-ps-read__no a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* same face, four tries */
.n-ps-tries { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.n-ps-tries figure { margin: 0; }
.n-ps-tries figcaption { display: grid; gap: 2px; margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
@media (max-width: 599px) { .n-ps-tries { gap: 12px; } .n-ps-tries figcaption { font-size: 14px; } }

/* fold: space between paragraphs (this page only) */
.n-ps-foldsec .pl-fold__body p + p { margin-top: 12px; }

/* how each one works, two columns: both pictures in a step end at the same height (no ragged pairs) */
@media (min-width: 768px) {

  /* the two distance photos are cropped taller so the pair matches PrettyScale's oval screen beside it */
  #psSteps .n-ps-dist img { aspect-ratio: 13 / 25; height: auto; object-fit: cover; object-position: 50% 40%; }
  /* the result: CEVO's worded card runs the full height of PrettyScale's result screen */
  #psResult .pc-pair { align-items: stretch; }
  #psResult .pc-pair > figure:first-child { display: flex; flex-direction: column; }
  #psResult .n-ps-read { flex: 1; align-content: start; }
}


/* section heads: subtitle under its heading (critic 27 Oct) */
.p-ps main .pl-sechead { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }

/* how each one works: both pictures in a step share one frame size */
.n-ps-start img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; }
.n-ps-mark img { aspect-ratio: 1460 / 1394; object-fit: cover; object-position: 50% 40%; }
.n-ps-cap { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.n-ps-dist figcaption { color: var(--ink-2); font-weight: 400; }
.n-ps-dist figcaption b { color: var(--ink); font-weight: 500; }
#psResult .n-ps-read { display: flex; flex-direction: column; }
.n-ps-read dd b { font-size: 22px; }

/* phone distance: two PrettyScale results and the CEVO note as three equal columns */
.n-ps-dwrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; align-items: stretch; }
.n-ps-tries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.n-ps-dnote { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 28px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-ps-dnote__t { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.n-ps-dnote__s { display: flex; gap: 8px; align-items: baseline; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.n-ps-dnote__s img { flex: none; width: 18px; height: 18px; position: relative; top: 3px; }
.n-ps-dnote__s b { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) { .n-ps-dwrap { grid-template-columns: minmax(0, 1fr); } .n-ps-dnote { padding: 20px; } .n-ps-dnote__t { font-size: 19px; } }

/* free tools to try next: three equal tiles with a picture */
.n-ps-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.n-ps-tools li { min-width: 0; }
.n-ps-tools a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; height: 100%; padding: 16px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.n-ps-tools a:hover { box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-ps-tools img { display: block; width: 96px; height: 120px; object-fit: cover; border-radius: 12px; }
.n-ps-tools a > span { display: grid; gap: 6px; }
.n-ps-tools__t { font-size: 18px; font-weight: 500; }
.n-ps-tools__l { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1023px) { .n-ps-tools { grid-template-columns: minmax(0, 1fr); } .n-ps-tools a { grid-template-columns: 88px minmax(0, 1fr); } .n-ps-tools img { width: 88px; height: 110px; } }

/* chooser: the answer card is as tall as the 2 × 2 chips, no empty bottom */
.p-ps .n-ps-pick__out { min-height: 0; align-content: start; }
.p-ps .n-ps-pick__opts { align-content: stretch; }

/* ---- 73-looksmax-ai-alternative.css ---- */
/* ---------- CEVO vs. LooksMax AI (articles/looksmax-ai-alternative.html, 27 Oct 2026) ----------
   Page-only additions to the plain-first comparison shape (.pc-* in 39-plain-compare.css). Classes are .n-lm-*. */

/* LooksMax AI's own mark (looksmax.ai favicon); keep its colours where .pc-* inverts marks on dark */
.n-lm-icon { border-radius: 23%; object-fit: cover; }
.pc-stats__row .pc-who img.n-lm-icon, .pc-pay__strip .pc-who img.n-lm-icon { filter: none; }
.pc-tile__qv img.n-lm-icon { width: 36px; height: 36px; }
@media (max-width: 599px) { .pc-tile__qv img.n-lm-icon { width: 26px; height: 26px; } }

/* what LooksMax AI gives you: the words on the left, two of its own App Store screens on the right */
.n-lm-gives { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 48px; align-items: end; }   /* the listing and the two phone screens end on one line */
.n-lm-gives__head.pl-sechead { display: block; }
.n-lm-gives__head p { margin-top: 14px; }
.n-lm-gives__head .n-lm-store { margin-top: 4px; }
.n-lm-gives__head .n-lm-store a { color: var(--pine); text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 44px; }
.n-lm-listing { margin-top: 24px; max-width: 440px; }
.n-lm-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 600px; justify-self: end; width: 100%; }
.n-lm-screens img { display: block; width: 100%; height: auto; border-radius: 18px; background: #000; box-shadow: var(--shadow-1); }
@media (max-width: 1199px) { .n-lm-gives { grid-template-columns: minmax(0, 1fr); } .n-lm-screens { justify-self: start; } }

/* section heads: a short line sits under its heading, never floating beside it */
.n-lm-sechead.pl-sechead { display: block; }
.n-lm-sechead.pl-sechead p { margin-top: 12px; }

/* the price strip: brand, price and what it buys on one baseline, one size */
.n-lm-strip.pc-pay__strip > span { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; line-height: 1.4; }
.n-lm-strip .pc-who { font-size: inherit; line-height: inherit; }
.n-lm-strip__what { color: var(--ink-d-2); }
.n-lm-strip__what::before { content: "· "; }
@media (max-width: 767px) { .n-lm-strip__what { flex-basis: 100%; text-align: center; } .n-lm-strip__what::before { content: none; } }
/* the price strip: on phones it stays in the flow (the shared sticky strip covered the heading and the week toggles) */
@media (max-width: 767px) {
  #lmPay + .pc-pay__strip { position: static; }
  .pc-pay__strip > span { display: flex; align-items: baseline; gap: 6px; }
}

/* other looksmaxxing apps: three equal cards, each with the app's own mark and one of its own screens in a same-size
   square frame; on phones the screen sits small beside the words */
.n-lm-apps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.n-lm-app { min-width: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-lm-app__shot { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cloud); }
.n-lm-app__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.n-lm-app__t { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.n-lm-app h3 { margin: 0 0 4px; font-size: 20px; font-weight: 450; letter-spacing: -.012em; }
.n-lm-app h3 a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.n-lm-app h3 a:hover { text-decoration-color: currentColor; }
.n-lm-app__mark { flex: none; width: 28px; height: 28px; border-radius: 23%; object-fit: cover; }
.n-lm-app p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.n-lm-app__on { font-size: 15px; color: var(--ink-3); }
.n-lm-app p.n-lm-app__price { color: var(--ink); }
@media (max-width: 1023px) and (min-width: 640px) { .n-lm-app__t { padding: 16px 18px 20px; } .n-lm-app h3 { font-size: 18px; } }
@media (max-width: 639px) {
  .n-lm-apps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .n-lm-app { grid-template-rows: none; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px; }
  .n-lm-app__shot { aspect-ratio: 1 / 1; border-radius: 12px; }
  .n-lm-app__t { padding: 0; gap: 4px; }
  .n-lm-app h3 { font-size: 18px; margin: -6px 0 0; }
  .n-lm-app p { font-size: 15px; }
}

/* do these apps work: a measurement and a score, two equal cards across the width, same-size pictures beside the words */
.n-lm-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: stretch; }
.n-lm-kind { min-width: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: center;
  padding: 18px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-lm-kind .pc-measured__stage { max-width: none; aspect-ratio: 4 / 5; box-shadow: var(--shadow-1); }   /* same shadow as the screenshot beside it */
.n-lm-kind h3 { margin: 0; font-size: 20px; font-weight: 450; }
.n-lm-kind p { margin: 6px 0 0; max-width: 40ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.n-lm-kind__shot { aspect-ratio: 4 / 5; background: #000; }
.pc-shot.n-lm-kind__shot img { width: 100%; height: 100%; object-fit: contain; }   /* the whole Apple screen crop, letterboxed on its own black */
@media (max-width: 1023px) { .n-lm-kinds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .n-lm-kind { grid-template-columns: minmax(0, 1fr); } .n-lm-kind__t { margin-top: 18px; } }

/* review cards: App Store stars in ink, no brand tile */
.n-lm-quote .pc-tp-stars span { width: 16px; height: 16px; background: none; }
.n-lm-quote .pc-tp-stars svg { width: 16px; height: 16px; fill: var(--cloud); }
.n-lm-quote .pc-tp-stars span.is-on { background: none; }
.n-lm-quote .pc-tp-stars span.is-on svg { fill: var(--ink); }
.n-lm-quote blockquote p + p { margin-top: 8px; }
/* three quotes side by side, equal height (the App Store listing sits with "What LooksMax AI gives you") */
.n-lm-quotes.pc-quotes { margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.n-lm-quotes .pc-quote__who { margin-top: auto; }
@media (max-width: 1023px) { .n-lm-quotes.pc-quotes { grid-template-columns: minmax(0, 1fr); } }

/* the fold: space between paragraphs */
.n-lm-foldsec .pl-fold__body p + p { margin-top: 12px; }
/* the fold on wide screens: each heading on the left, its text across the rest of the card (no empty right half) */
@media (min-width: 1100px) {
  .n-lm-foldsec .pl-fold__body > section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); column-gap: 48px; align-items: start; }
  .n-lm-foldsec .pl-fold__body > section > h3 { grid-column: 1; grid-row: 1 / span 9; margin: 0; }
  .n-lm-foldsec .pl-fold__body > section > :not(h3) { grid-column: 2; max-width: 84ch; }
}

/* hero: the stat values ("$3.99 weekly plan", "Score out of 10") and the LooksMax AI tile name need room below 1280 */
@media (min-width: 1024px) and (max-width: 1279px) {
  #lmHero .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lmHero .pc-stats li:nth-child(3) { box-shadow: inset 0 1px 0 rgba(243, 245, 242, .12); }
  #lmHero .pc-stats li:nth-child(4) { box-shadow: inset 1px 0 0 rgba(243, 245, 242, .12), inset 0 1px 0 rgba(243, 245, 242, .12); }
  #lmHero .pc-tile__qv { font-size: 18px; gap: 8px; }
}
/* tablet and desktop: each line of the three app cards sits on one shared row (name, platform, price, what you get) */
@media (min-width: 640px) {
  .n-lm-apps { row-gap: 24px; }
  .n-lm-app { grid-row: span 5; grid-template-rows: subgrid; row-gap: 6px; }
  .n-lm-app__t { display: contents; }
  .n-lm-app__t > * { padding-inline: 22px; }
  .n-lm-app__t > h3 { padding-top: 16px; }
  .n-lm-app__t > :last-child { padding-bottom: 24px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .n-lm-app__t > * { padding-inline: 18px; } }

/* ---- 73-qoves-review.css ---- */
/* ---------- Qoves Studio review (/vs/qoves-review, 27 Oct 2026) ----------
   Reuses the comparison page's .pc-* parts (stats panel, shots, Trustpilot chart, quotes). CEVO's side is the shared
   .cv-* blocks (40-cevo-blocks.css).
   Page-only parts are .n-qr-*: verdict values, legit facts, what-you-get list, single-screen steps, cost builder,
   reported waits, fit lists. Labels sit above or below screens, never on them. */

.n-qr-disclose { margin: 16px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.n-qr-hero__shot { margin: 0; min-width: 0; }
.n-qr-nw { white-space: nowrap; }
/* phones: the answers (stats panel) come before Qoves's homepage shot */
@media (max-width: 720px) {
  .n-qr-hero__wrap { display: flex; flex-direction: column; }
  .n-qr-hero .pc-hero__grid { display: contents; }
  .n-qr-hero__text { order: 1; margin-top: 20px; }
  .n-qr-hero #qrVerdict { order: 2; margin-top: 24px; }
  .n-qr-hero__shot { order: 4; margin-top: 24px; }
}

/* verdict panel: one value + one line per cell */
.n-qr-stats li { align-content: start; gap: 6px; }
.n-qr-stats__v { font-size: 22px; font-weight: 420; letter-spacing: -.02em; color: var(--ink-d); }
.n-qr-stats__row { font-size: 14px; line-height: 1.4; color: var(--ink-d-2); }
@media (max-width: 599px) { .n-qr-stats__v { font-size: 17px; } .n-qr-stats__row { font-size: 13px; } }
/* three cells (plan, wait, Trustpilot): one row from 600 px up; on phones two on top, Trustpilot across the bottom */
.n-qr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .n-qr-stats li:nth-child(3) { box-shadow: inset 1px 0 0 rgba(243, 245, 242, .12); } }
@media (max-width: 599px) {
  .n-qr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-qr-stats li:nth-child(3) { grid-column: 1 / -1; box-shadow: inset 0 1px 0 rgba(243, 245, 242, .12); }
}

/* is it legit */
.n-qr-answer { margin: 16px 0 0; max-width: 62ch; font-size: 19px; line-height: 1.55; color: var(--ink); }
.n-qr-answer b { font-weight: 550; color: var(--pine); }
.n-qr-facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.n-qr-facts li { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-qr-facts b { font-size: 32px; font-weight: 380; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.n-qr-facts span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 1023px) { .n-qr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .n-qr-facts li { padding: 16px; } .n-qr-facts b { font-size: 26px; } }

/* what you get */
.n-qr-get { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; align-items: center; }
.n-qr-get h2 { margin: 0; }
.n-qr-sub { margin: 12px 0 0; font-size: 17px; color: var(--ink-2); }
.n-qr-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.n-qr-list li { padding-left: 18px; position: relative; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.n-qr-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--pine); }
.n-qr-list b { font-weight: 500; color: var(--ink); }
.n-qr-get__shot { margin: 0; min-width: 0; }
@media (max-width: 1023px) { .n-qr-get { grid-template-columns: minmax(0, 1fr); } }

/* 169 tests: one bar per feature, on one scale (largest = 26) */
.n-qr-count { margin-top: 40px; padding: 26px 28px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 20px; }
.n-qr-count h3 { margin: 0; font-size: 22px; font-weight: 420; letter-spacing: -.015em; text-wrap: balance; }
.n-qr-count h3 .pc-who { display: inline-flex; align-items: center; gap: 10px; font: inherit; color: inherit; white-space: normal; }
.n-qr-count h3 .pc-who img { flex: none; width: 22px; height: 22px; }
.n-qr-count__head p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.n-qr-count__bars { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 32px; }
.n-qr-count__bars li { display: grid; grid-template-columns: 124px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 15px; color: var(--ink-2); }
.n-qr-count__bars b { font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.n-qr-count__bar { display: block; height: 10px; border-radius: 5px; background: var(--cloud); overflow: hidden; }
.n-qr-count__bar span { display: block; height: 100%; border-radius: 5px; background: var(--obsidian); }  /* Qoves's data in Qoves's dark, never CEVO pine */
@media (max-width: 1023px) { .n-qr-count__bars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* CEVO's side of the same count: one plain line under the card */
.n-qr-count__cevo { margin: 18px 0 0; display: flex; gap: 10px; align-items: flex-start; font-size: 17px; line-height: 1.5; color: var(--ink); }
.n-qr-count__cevo img { flex: none; width: 20px; height: 20px; margin-top: 3px; }
@media (max-width: 599px) { .n-qr-count { padding: 20px; } .n-qr-count__bars { grid-template-columns: minmax(0, 1fr); } .n-qr-count__bars li { grid-template-columns: 112px minmax(0, 1fr) 28px; } }

/* steps: four of Qoves's own screens in same-size frames, two per row, caption under each */
.n-qr-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.n-qr-step { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.n-qr-step__shot { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.n-qr-step__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.n-qr-step h3 { margin: 6px 0 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.n-qr-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-read); }
@media (max-width: 639px) { .n-qr-steps { grid-template-columns: minmax(0, 1fr); } .n-qr-step__shot { aspect-ratio: 1 / 1; } }
.n-qr-step__shot picture { display: block; width: 100%; height: 100%; }

/* section heads: a short line sits under its heading, never floating beside it */
.n-qr-sechead.pl-sechead { display: block; }
.n-qr-sechead.pl-sechead p { margin-top: 12px; }

/* cost builder + what reviewers paid */
.n-qr-cost .pc-check { padding-block: 10px; }
.n-qr-cost .pc-check > span { display: grid; gap: 2px; }
.n-qr-addon__d { display: block; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.n-qr-cost .pc-pay__base + .n-qr-addon__d { margin-top: -8px; }
.n-qr-paid { padding: 26px 28px; border-radius: var(--r-card); background: var(--obsidian); color: var(--ink-d); display: flex; flex-direction: column; gap: 14px; }
.n-qr-paid__h { margin: 0; font-size: 16px; color: var(--ink-d-2); }
.n-qr-paid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.n-qr-paid li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.n-qr-paid li b { font-size: 26px; font-weight: 380; letter-spacing: -.02em; color: var(--ink-d); font-variant-numeric: tabular-nums; }
.n-qr-paid li span { font-size: 15px; line-height: 1.45; color: var(--ink-d-2); }
.n-qr-paid a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--ink-d); text-decoration: underline; text-decoration-color: rgba(243, 245, 242, .4); text-underline-offset: .2em; }
.n-qr-paid__note { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(243, 245, 242, .14); font-size: 14px; line-height: 1.5; color: var(--ink-d-2); }
@media (max-width: 767px) { .n-qr-paid { padding: 20px; } #qrCost + .n-qr-strip { position: static; } }

/* reported waits: one bar per source, days on one scale */
.n-qr-wait { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; max-width: none; }
.n-qr-wait__row { display: grid; gap: 4px; }
.n-qr-wait__k { margin: 0; font-size: 19px; color: var(--ink); }
.n-qr-wait__k b { font-weight: 450; letter-spacing: -.01em; }
.n-qr-wait__m { margin: 0 0 4px; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.n-qr-wait__m a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.n-qr-wait__m a:hover { color: var(--ink); }
.n-qr-wait__bar { display: block; height: 12px; border-radius: 6px; background: var(--cloud); overflow: hidden; }
.n-qr-wait__bar span { display: block; height: 100%; border-radius: 6px; background: var(--ink-3); }
.n-qr-wait__row.is-qv .n-qr-wait__bar span { background: var(--obsidian); }
.n-qr-wait__row.is-cv .n-qr-wait__bar span { background: var(--pine); }
.n-qr-wait__row.is-cv .n-qr-wait__k b { color: var(--pine); }

/* reviews */
.n-qr-tp { margin: 0; min-width: 0; max-width: 376px; }
/* the Trustpilot chart on the left, praise over complaints on the right: both columns end at the same line */
.n-qr-say.pc-say { align-items: stretch; }
.n-qr-themes { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.n-qr-themes .n-qr-theme { display: flex; flex-direction: column; justify-content: center; }
.n-qr-say__score { display: grid; min-width: 0; }
.n-qr-fold .n-qr-tp { margin: 16px 0 0; }
/* fold quotes: an odd last card spans the row, so the grid never shows an empty slot */
.n-qr-fold .pc-quotes--fold > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.n-qr-theme { padding: 22px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-qr-theme.is-yes { box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-qr-theme h3 { margin: 0 0 12px; font-size: 18px; font-weight: 500; letter-spacing: 0; }
.n-qr-theme ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.n-qr-theme li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 599px) { .n-qr-theme { padding: 18px 20px; } }
.n-qr-quotes { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.n-qr-quotes { align-items: stretch; }
.n-qr-quotes .pc-quote__who { margin-top: auto; }
@media (max-width: 1023px) { .n-qr-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .n-qr-quotes { grid-template-columns: minmax(0, 1fr); } }

/* who it suits */
.n-qr-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.n-qr-fit__col { padding: 26px 28px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.n-qr-fit__col.is-yes { box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-qr-fit__h { margin: 0 0 14px; font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.n-qr-fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.n-qr-fit li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.n-qr-ic { width: 22px; height: 22px; margin-top: 1px; color: var(--ink-3); }
.is-yes .n-qr-ic { color: var(--pine); }
@media (max-width: 767px) { .n-qr-fit { grid-template-columns: minmax(0, 1fr); } .n-qr-fit__col { padding: 20px; } }

/* fold: space between paragraphs and lists */
.n-qr-fold p + p, .n-qr-fold ul + p, .n-qr-fold p + ul { margin-top: 14px; }
/* the price strip: brand, price and wait on one line, one baseline */
.n-qr-strip.pc-pay__strip > span { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; line-height: 1.4; }
.n-qr-strip .pc-who { font-size: inherit; line-height: inherit; }

/* ---- 74-umax-alternative.css ---- */
/* ---------- umax-alternative (CEVO vs. Umax, 27 Oct 2026). Page-scoped: .n-ux-* on top of the .pc-* comparison kit ---------- */

/* Umax's real app icon: keep its colours where the .pc kit whitens marks on dark panels */
.pc-who img.n-ux-ico, .pc-stats__row .pc-who img.n-ux-ico, .pc-pay__strip .pc-who img.n-ux-ico { filter: none; border-radius: 5px; }
.pc-tile__qv img.n-ux-tileico { border-radius: 9px; }

/* hero stats: two of the values are longer than the kit's one-word answers, so they may wrap (right-aligned) */
.n-ux-stats .pc-stats__row b { white-space: normal; text-align: right; line-height: 1.2; min-width: 0; }
.n-ux-stats .pc-stats__row .pc-who { flex: none; }
@media (max-width: 1279px) { .n-ux-stats .pc-stats__row b { font-size: 18px; } }
@media (max-width: 599px) { .n-ux-stats .pc-stats__row b { font-size: 16px; } }

/* what Umax gives you: words left, its store screens right */
.n-ux-gives { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 56px; align-items: start; }
.n-ux-gives h2 { margin: 0; }
.n-ux-gives__lead { margin: 14px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.n-ux-facts { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.n-ux-facts li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.n-ux-facts li:last-child { border-bottom: 1px solid var(--line); }
.n-ux-facts b { font-size: 17px; font-weight: 500; color: var(--ink); }
.n-ux-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 520px; justify-self: end; width: 100%; }
.n-ux-pair figure { margin: 0; min-width: 0; }
.n-ux-pair figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.n-ux-photos { max-width: 460px; }

/* store screenshots: a tall phone tile never grows past phone size; the privacy label keeps its width */
.pc-shot.n-ux-tall { max-width: 280px; border-radius: 18px; }
.pc-shot.n-ux-wide { max-width: 560px; }

/* price picker: the Umax total is a range */
.pc-pay__total output.n-ux-range { font-size: clamp(24px, 6.4vw, 32px); white-space: nowrap; }
.n-ux-note { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); text-align: center; }
.n-ux-even { margin: 16px auto 0; max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--ink); text-align: center; }

/* hero: Umax's store links under its tile */
.n-ux-get { font-size: 14px; color: var(--ink-3); }
.n-ux-get a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.n-ux-get a:hover { color: var(--pine); }

/* other alternatives: three equal tiles, each with the app's own mark */
.n-ux-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.n-ux-alts li { min-width: 0; }
.n-ux-alts a { display: grid; align-content: start; gap: 10px; height: 100%; padding: 22px 24px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.n-ux-alts a:hover { box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-ux-alts__t { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; }
.n-ux-alts__t img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.n-ux-alts__l { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 767px) { .n-ux-alts { grid-template-columns: minmax(0, 1fr); } }

/* same face, two distances (in the fold, above the paragraph on camera distance) */
.n-ux-distpair { margin: 4px 0 16px; }
.n-ux-distpair .ts-shot { box-shadow: inset 0 0 0 1px var(--line); }

/* reviews: the ratings card and two quotes in one equal-height row */
.p-umax .pc-say { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: stretch; }
.p-umax .n-ux-quotes { align-items: stretch; }
.p-umax .n-ux-quotes .pc-quote { height: 100%; }
.p-umax .n-ux-quotes .pc-quote__who { margin-top: auto; }
@media (max-width: 1023px) { .p-umax .pc-say { grid-template-columns: minmax(0, 1fr); } }

/* store ratings card */
.n-ux-stores th { width: 92px !important; }
.n-ux-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.n-ux-counts b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* full price list in the fold: the margin sits on the wrapper so the border has room above and below */
.pl-fold__body .ed-table-wrap:has(> .n-ux-iap) { margin: 16px 0 20px; }
.n-ux-iap td { font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
  .n-ux-gives { grid-template-columns: minmax(0, 1fr); }
  .n-ux-pair { justify-self: start; }
}
@media (max-width: 599px) {
  .n-ux-facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pc-shot.n-ux-tall { max-width: 240px; }
}
.n-ux-foldshot { margin: 4px 0 16px; }

/* section heads: the subtitle sits under its heading, never floating on the right (critic 27 Oct) */
.p-umax main .pl-sechead { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }

/* price picker: CEVO card gets a closing row like Umax's add-on row; the strip stays in flow on phones */
.n-ux-incl { padding-top: 12px; border-top: 1px solid var(--line); }
.p-umax .pc-pay__strip > span:not(.pc-pay__vs) { display: inline-flex; align-items: center; gap: 8px; }
.p-umax .pc-pay__strip .pc-who, .p-umax .pc-pay__strip b { line-height: 1.3; }
@media (max-width: 767px) { .p-umax .pc-pay__strip { position: static; } }

/* fold: the privacy label image is unreadable on phones, the bullets carry its facts */
@media (max-width: 599px) { .p-umax .n-ux-foldshot { display: none; } }

/* more free tools: two equal tiles with a picture */
.n-ux-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.n-ux-tools li { min-width: 0; }
.n-ux-tools a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; height: 100%; padding: 16px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.n-ux-tools a:hover { box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-ux-tools img { display: block; width: 112px; height: 140px; object-fit: cover; border-radius: 12px; }
.n-ux-tools a > span { display: grid; gap: 6px; }
.n-ux-tools__t { font-size: 19px; font-weight: 500; }
.n-ux-tools__l { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 767px) { .n-ux-tools { grid-template-columns: minmax(0, 1fr); } .n-ux-tools a { grid-template-columns: 88px minmax(0, 1fr); } .n-ux-tools img { width: 88px; height: 110px; } }

/* closing band: the heading spreads over the text column so no empty gap sits before the photo */
@media (min-width: 900px) { .p-umax .ed-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .p-umax .ed-band h2 { max-width: none; } .p-umax .ed-band__media { justify-self: start; } }

/* round 2: what Umax gives you, the words sit level with the middle of the two store screens */
@media (min-width: 1024px) { .n-ux-gives { align-items: center; } }

/* round 2: quotes are whole sentences, set larger and centred between the store label and the reviewer */
.p-umax .n-ux-quotes blockquote { flex: 1; display: flex; align-items: center; }
@media (min-width: 1024px) { .p-umax .n-ux-quotes blockquote p { font-size: 20px; line-height: 1.45; letter-spacing: -.01em; } }

/* round 2: fold, the photo pair and its paragraph side by side on wide screens */
.n-ux-distwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 36px; align-items: center; }
.n-ux-distwrap > p { margin: 0; }
@media (min-width: 900px) { .n-ux-distwrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); } .n-ux-distwrap .n-ux-distpair { margin: 4px 0; } }
.p-umax .pl-fold__body .n-ux-distwrap + p { margin-top: 16px; }
.n-ux-nw { white-space: nowrap; }

/* ---- 77-ai-face-analyzer.css ---- */
/* ---------- ai-face-analyzer (tools/ai-face-analyzer, 27 Oct 2026). Page-scoped: .n-afa-* ----------
   The tool reuses the plain-first calculator layout (.pl-tool, 38-plain.css); this file adds the reading picker, the
   three reading cards, the region tiles, the photo guide, the comparison table tint and the report chooser. */

/* which dots show: "All" = lines only, a reading = its own dots */
.n-afa-app[data-focus="all"] .ins-pin { display: none; }
.n-afa-app[data-focus="width"] .ins-pin:not([data-g="width"]),
.n-afa-app[data-focus="eyes"] .ins-pin:not([data-g="eyes"]),
.n-afa-app[data-focus="thirds"] .ins-pin:not([data-g="thirds"]) { display: none; }
.n-afa-focus { flex: none; }
.n-afa-focus .ins-seg__opt { padding: 0 12px; min-width: 44px; }

/* the three readings, each a button that shows its lines on the photo */
.n-afa-result { margin-top: 0; }
@media (min-width: 1200px) { .n-afa-reads { grid-template-columns: repeat(3, minmax(0, 1fr)); } .n-afa-read { align-content: start; height: 100%; } }
.pl-tool .n-afa-app .pl-result { grid-area: now; }
.n-afa-result__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.n-afa-result__h { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.n-afa-sex { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.n-afa-sex[hidden] { display: none; }
.n-afa-reads { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.n-afa-read {
  display: grid; gap: 2px; width: 100%; padding: 14px 18px; text-align: left;
  border: 0; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  font: inherit; color: var(--ink); cursor: pointer;
  transition: box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.n-afa-read:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.n-afa-read[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pine); }
.n-afa-read:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.n-afa-reads > li { min-width: 0; }
.n-afa-read { min-width: 0; }
.n-afa-read > span { display: block; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.n-afa-read__k { font-size: 13px; color: var(--ink-3); }
.n-afa-read__v { font-size: 22px; line-height: 1.2; font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
.n-afa-read__n { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.n-afa-read__l { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.n-afa-result .pl-cta { margin-top: 16px; }
@media (max-width: 1023px) {
  .n-afa-result { margin-top: 14px; }
  .n-afa-read { padding: 12px 16px; }
  .n-afa-read__v { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .n-afa-read { transition: none; } }

/* comparison: CEVO row tinted, a fair line under it */
.n-afa-cmp { margin-top: 36px; }
.n-afa-cmp .ed-table tbody th { font-weight: 500; color: var(--ink); text-align: left; }
.n-afa-cmp .ed-table tr.is-cevo > * { background: var(--paper); }
.n-afa-fair { margin: 20px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.n-afa-fair strong { font-weight: 500; color: var(--ink); }

/* more readings from your own photo: three linked picture cards under the free-scan CTA */
.n-afa-more { margin-top: 22px; }
.n-afa-more__h { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.n-afa-more ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.n-afa-more li { min-width: 0; }
.n-afa-more a { display: grid; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 450; }
.n-afa-more img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.n-afa-more a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.n-afa-more a:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 12px; }

/* comparison: brand mark + where it runs in the row head; CEVO stays tinted when the table stacks */
.n-afa-cmp__who { display: flex; align-items: flex-start; gap: 10px; }
.n-afa-cmp__who img { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; }
.n-afa-cmp__who > span { display: grid; min-width: 0; }
.n-afa-cmp__who a { color: inherit; text-underline-offset: 3px; }
.n-afa-cmp__on { font-size: 13px; font-weight: 400; color: var(--ink-3); }
/* stacked (container under 720px): CEVO keeps its tint, and each label sits beside its value so the cards stay short */
@container (max-width: 719px) {
  .n-afa-cmp.ed-table-wrap .ed-table tbody tr.is-cevo { background: var(--paper); }
  .n-afa-cmp.ed-table-wrap .ed-table tbody tr > td:not(:first-child)[data-label] {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 14px; align-items: baseline; padding: 6px 0;
  }
  .n-afa-cmp.ed-table-wrap .ed-table tbody tr > td:not(:first-child)[data-label]::before { margin-bottom: 0; font-size: 13px; }
}
.n-afa-cmp .ed-table td { min-width: 0; overflow-wrap: break-word; }
.n-afa-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.n-afa-shots li { min-width: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 10px; border-radius: 14px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); }
.n-afa-shots img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; }
@media (max-width: 767px) { .n-afa-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* round 4 (27 Oct 2026, design critic) */
/* rival screenshots: four equal 4:5 pictures (crops_afa_shots.py), edge to edge in their tiles; two on phones */
.n-afa-shots li { padding: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.n-afa-shots img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top; border-radius: 0; }
@media (max-width: 767px) { .n-afa-shots li:nth-child(n+3) { display: none; } }
/* the tool section ends right under the "More from your own photo" tiles */
.pl-tool:has(.n-afa-app) { padding-bottom: 48px; }
.n-afa-app .n-afa-more { margin-bottom: 0; }
/* section heads: the subline sits under its heading, never floating in a second column */
main:has(.n-afa-app) .pl-sechead { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 12px; }

/* round 2 (27 Oct 2026) ------------------------------------------------------------------------------------------ */
/* hero: title and lead in one left column at every width, so the lead never floats on its own */
main:has(.n-afa-app) .pl-hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 0; }
main:has(.n-afa-app) .pl-hero .pl-lead { margin-top: 20px; }
/* reading cards: name + plain answer only; the dot count shows only while an uploaded photo's dots are being placed */
.n-afa-read__p { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.n-afa-read__p:empty { display: none; }
/* the fold: the face above in numbers, label left and value right */
.n-afa-nums { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.n-afa-nums li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.n-afa-nums li > span:first-child { color: var(--ink-2); }
.n-afa-nums li > span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .n-afa-nums li { grid-template-columns: minmax(0, 1fr); } }
/* rival screenshots: four equal squares with the app's name under each, all four on phones (2 x 2) */
.n-afa-shots li { display: flex; flex-direction: column; gap: 10px; aspect-ratio: auto; padding: 0; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.n-afa-shots__pic { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); }
.n-afa-shots__pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.n-afa-shots__name { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 450; color: var(--ink); }
.n-afa-shots__name img { flex: none; width: 20px; height: 20px; border-radius: 5px; }
@media (max-width: 767px) { .n-afa-shots li:nth-child(n+3) { display: flex; } }

/* ---- 78-qoves-studio-alternative.css ---- */
/* ---------- CEVO vs. Qoves Studio (articles/qoves-studio-alternative.html) ----------
   Page-only: "How Qoves Studio works", four of Qoves's own screens in same-size frames with one caption rhythm
   (title, one line), matching the shared free-scan strip. Classes are .n-qs-*. */
.n-qs-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.n-qs-step { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.n-qs-shot { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.n-qs-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.n-qs-step h3 { margin: 6px 0 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 450; letter-spacing: -.012em; color: var(--ink); }
.n-qs-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-read); }
@media (max-width: 639px) {
  .n-qs-steps { grid-template-columns: minmax(0, 1fr); }
}

/* reviews: the star chart and two quotes end on one line */
.n-qs-say.pc-say { align-items: stretch; }
.n-qs-say .pc-quotes { align-items: stretch; }
.n-qs-say .pc-quote__who { margin-top: auto; }

/* section heads: a short line sits under its heading, never floating beside it */
.n-qs-sechead.pl-sechead { display: block; }
.n-qs-sechead.pl-sechead p { margin-top: 12px; }
/* fold: space between paragraphs */
.n-qs-fold p + p { margin-top: 14px; }
/* the price strip: brand, price and wait on one line, one baseline */
.n-qs-strip.pc-pay__strip > span { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; line-height: 1.4; }
.n-qs-strip .pc-who { font-size: inherit; line-height: inherit; }
/* phones: the CEVO vs Qoves strip sits in the flow, never sticky over the Qoves card */
@media (max-width: 767px) { .n-qs-strip.pc-pay__strip { position: static; } }

/* ---- 79-24mm-selfie-distortion-study.css ---- */
/* 24mm selfie study only (.ts-sim--2col): the simulator as two columns that end together on desktop;
   on phones and tablets one column in reading order: photo, distance + slider, readings, presets, Man/Woman, 1.5 m view, free scan. */
.ts-sim.ts-sim--2col { grid-template-areas: none; grid-template-rows: auto; align-items: stretch; row-gap: 0; }
.ts-sim--2col .ts-sim__l, .ts-sim--2col .ts-sim__r { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ts-sim--2col .ts-sim__photo, .ts-sim--2col .ts-sim__panel, .ts-sim--2col .ts-sim__under, .ts-sim--2col .ts-cta { grid-area: auto; }
.ts-sim--2col .ts-sim__panel { display: flex; flex-direction: column; }
.ts-sim--2col .ts-sim__fix { min-width: 0; }
.ts-sim--2col .ts-sim__cta { margin-top: auto; }
.ts-sim--2col .ts-sim__words, .ts-sim--2col .ts-sim__cta { min-width: 0; }
.ts-sim--2col .ts-sim__cta .ts-cta { margin-top: 0; }
@media (max-width: 1023px) {
  .ts-sim.ts-sim--2col { display: flex; flex-direction: column; gap: 12px; }
  .ts-sim--2col .ts-sim__l, .ts-sim--2col .ts-sim__r, .ts-sim--2col .ts-sim__panel { display: contents; }
  /* photo, distance, slider and readings share one phone screen while dragging */
  .ts-sim--2col .ts-sim__photo { order: 1; align-self: center; width: min(100%, calc((100svh - 330px) * .8)); }
  .ts-sim--2col .ts-sim__dist { order: 2; }
  .ts-sim--2col .td-sim__control { order: 3; margin-top: -4px; }
  .ts-sim--2col .ts-sim__words { order: 4; }
  .ts-sim--2col .td-sim__presets { order: 5; }
  .ts-sim--2col .ts-sim__under { order: 6; }
  .ts-sim--2col .ts-sim__fix { order: 7; }
  .ts-sim--2col .ts-sim__cta { order: 8; margin-top: 8px; }
}

/* round 2 (27 Oct 2026) ------------------------------------------------------------------------------------------ */
/* hero: title and lead in one left column at every width, so the lead never floats on its own */
main:has(.ts-sim--2col) .pl-hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 0; }
main:has(.ts-sim--2col) .pl-hero .pl-lead { margin-top: 20px; }
/* section heads: the subline sits under its heading, never floating in a second column */
main:has(.ts-sim--2col) .pl-sechead { display: block; max-width: 760px; }
main:has(.ts-sim--2col) .pl-sechead > p { margin-top: 12px; max-width: 60ch; }
main:has(.ts-sim--2col) .ed-section__head { display: block; }
main:has(.ts-sim--2col) .ed-section__head > p { margin-top: 12px; max-width: 60ch; }

/* ---- 79-facial-width-to-height-ratio-fwhr-guide.css ---- */
/* FWHR guide only (body.pl, .tc-* is this page's guide shape), 27 Oct 2026 design critic.
   The haircut card beside the chart runs the chart's full height and ends with a barber line and a link to the cards. */
.pl .tc-rx { align-self: stretch; display: flex; flex-direction: column; }
.pl .tc-rx__say { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); font-weight: 450; }
.pl .tc-rx__more { margin-top: auto; padding-top: 8px; font-size: 14px; line-height: 20px; color: var(--pine); text-decoration: underline; text-decoration-color: rgba(36, 72, 57, .3); text-underline-offset: 3px; }
.pl .tc-rx__more:hover { text-decoration-color: currentColor; }
/* sticky rail: the two hairstyle pictures share the card's full width */
.pl .tc-rail .tc-looks { grid-template-columns: 1fr 1fr; gap: 8px; }
.pl .tc-rail .tc-looks img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* round 2 (27 Oct 2026) ------------------------------------------------------------------------------------------ */
/* hero: title and lead in one left column at every width, so the lead never floats on its own */
main:has(.tc-layout) .pl-hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 0; }
main:has(.tc-layout) .pl-hero .pl-lead { margin-top: 20px; }
/* the showcase and free-scan strip run full width after the haircut section, where the rail column ends; questions,
   the fold and the links follow in the site's usual heading-left sections */

/* ---- 90-tables.css ---- */
/* ---------- tables: stacked cards in narrow containers (see 10-base.css) ---------- */
@container (max-width: 719px) {
  .ed-table-wrap .ed-table,
  .ed-table-wrap .ed-table tbody,
  .ed-table-wrap .ed-table tr,
  .ed-table-wrap .ed-table tbody > tr > * { display: block; width: auto; min-width: 0; max-width: none; position: static; box-shadow: none; }
  .ed-table-wrap .ed-table caption { display: block; padding: 16px 18px 0; }
  .ed-table-wrap .ed-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .ed-table-wrap .ed-table tbody tr { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
  .ed-table-wrap .ed-table tbody tr:last-child { border-bottom: 0; }
  .ed-table-wrap .ed-table tbody tr:hover > * { background: none; }
  /* row title */
  .ed-table-wrap .ed-table tbody tr > :first-child {
    padding: 0 0 8px; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--ink);
  }
  /* every value cell: its column name on a line above, content in normal inline flow */
  .ed-table-wrap .ed-table tbody tr > :not(:first-child) {
    display: block; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none;
    white-space: normal; text-wrap: pretty;
  }
  .ed-table-wrap .ed-table tbody tr > :not(:first-child)[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; font-weight: 400;
    color: var(--ink-3); letter-spacing: 0; text-transform: none; font-variant-numeric: normal;
  }
  /* plain-text cells (a number, a short phrase): label and value side by side */
  .ed-table-wrap .ed-table tbody tr > :not(:first-child)[data-label]:is(.mono, :has(> .ed-num)):not(:has(:not(.ed-num))) {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 14px; align-items: baseline;
  }
  .ed-table-wrap .ed-table tbody tr > :not(:first-child)[data-label]:is(.mono, :has(> .ed-num)):not(:has(:not(.ed-num)))::before { margin-bottom: 0; font-size: 13px; }
  .ed-table-wrap .ed-table tbody tr > :not(:first-child) > :is(p, div, ul, ol) { margin: 6px 0 0; }
  .ed-table-wrap .ed-table tbody tr > :not(:first-child) > :is(p, div, ul, ol):first-child { margin-top: 0; }
  /* the highlighted column (e.g. CEVO in a comparison) stays visible as a soft band */
  .ed-table-wrap .ed-table tbody tr > .is-hl { background: color-mix(in srgb, var(--pine) 6%, var(--card)); margin-inline: -10px; padding-inline: 10px; border-radius: 8px; border-top-color: transparent; }
}
/* the 24mm study's distance table has 6 wide columns: it stacks below 1080 px of container width */
@container (max-width: 1079px) {
  .td-table-wrap .ed-table,
  .td-table-wrap .ed-table tbody,
  .td-table-wrap .ed-table tr,
  .td-table-wrap .ed-table tbody > tr > * { display: block; width: auto; min-width: 0; max-width: none; position: static; box-shadow: none; }
  .td-table-wrap .ed-table caption { display: block; padding: 16px 18px 0; }
  .td-table-wrap .ed-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .td-table-wrap .ed-table tbody tr { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
  .td-table-wrap .ed-table tbody tr:last-child { border-bottom: 0; }
  .td-table-wrap .ed-table tbody tr:hover > * { background: none; }
  /* row title */
  .td-table-wrap .ed-table tbody tr > :first-child {
    padding: 0 0 8px; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--ink);
  }
  /* every value cell: its column name on a line above, content in normal inline flow */
  .td-table-wrap .ed-table tbody tr > :not(:first-child) {
    display: block; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none;
    white-space: normal; text-wrap: pretty;
  }
  .td-table-wrap .ed-table tbody tr > :not(:first-child)[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; font-weight: 400;
    color: var(--ink-3); letter-spacing: 0; text-transform: none; font-variant-numeric: normal;
  }
  /* plain-text cells (a number, a short phrase): label and value side by side */
  .td-table-wrap .ed-table tbody tr > :not(:first-child)[data-label]:is(.mono, :has(> .ed-num)):not(:has(:not(.ed-num))) {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 14px; align-items: baseline;
  }
  .td-table-wrap .ed-table tbody tr > :not(:first-child)[data-label]:is(.mono, :has(> .ed-num)):not(:has(:not(.ed-num)))::before { margin-bottom: 0; font-size: 13px; }
  .td-table-wrap .ed-table tbody tr > :not(:first-child) > :is(p, div, ul, ol) { margin: 6px 0 0; }
  .td-table-wrap .ed-table tbody tr > :not(:first-child) > :is(p, div, ul, ol):first-child { margin-top: 0; }
  /* the highlighted column (e.g. CEVO in a comparison) stays visible as a soft band */
  .td-table-wrap .ed-table tbody tr > .is-hl { background: color-mix(in srgb, var(--pine) 6%, var(--card)); margin-inline: -10px; padding-inline: 10px; border-radius: 8px; border-top-color: transparent; }
}

/* numbers wrapped in .ed-num inside a cell keep the column's mono face */
.ed-table.tc-fat td > .ed-num, .td-cohort td > .ed-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }

/* ---- 95-noscroll.css ---- */
/* ---------- no sideways scrolling, anywhere (26 Oct 2026) ----------
   Last partial so it wins over earlier carousels and fixed-width tables. engine/visual_qa.mjs blocks any box that
   scrolls horizontally; run it at 390, 768 and 1100 as well as 1440. */
.ed-staging__inner { overflow: visible; }
/* phones: the meta stays one ellipsised line (10-base) and the five links fit one compact row */
@media (max-width: 767px) {
  .ed-staging { font-size: 12px; }
  .ed-staging__inner { padding-block: 2px; }
  .ed-staging__links { flex-wrap: wrap; gap: 0; }
  .ed-staging__links a { min-height: 30px; padding: 0 6px; }
}
/* measured-figure rows: a grid that stacks, never a swipe carousel */
@media (max-width: 767px) {
  .ta-figs {
    grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto;
    overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0;
  }
}
@media (min-width: 560px) and (max-width: 767px) { .ta-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tables size to their container; cells wrap */
.ta-tbl, .ta-tbl td, .ta-tbl th { min-width: 0; }