/* =====================================================================================================
   site.css: THE presentation system for every page rendered from src/content/*.yml (reset, 22 Oct 2026)
   -----------------------------------------------------------------------------------------------------
   Owner: the Site Builder role (one accountable builder; see brain repo page-factory/site-build/RESET-*).
   This is the ONLY stylesheet a reset page loads for its <main>. The shell keeps its own two files:
     css/header.css  (generated header, brain repo house-v6/header)   css/chrome.css (footer + sticky button)
   base.css, custom.css, v6.css, kit.css, theme-c.css, v7.css, system.css and blog.css are NEVER linked
   on a reset page (build.py refuses), and pages carry no <style> and no style="" (build.py refuses).
   Rules this file encodes (Mark, 22 Oct 2026 review, SITE-WIDE A-E):
     A  no heading-left / paragraph-right: a section head always sits ABOVE its body; .split pairs text
        with a real visual only (photo, diagram, chart, table, price card)
     B  one centred container (the header's bar: 1168px at 1280, 1380px at 1690), prose in a centred 46rem column (~72 chars)
     C  one left edge per section: every stacked block in a column starts on the column's edge
     D  heroes are deep and carry a faint tint
     E  phones keep the single-column flow that already worked
   Tokens: 6 type sizes, 8 spacing steps, 2 radii, one palette. Nothing outside them.
   ===================================================================================================== */

/* CASCADE LAYERS (29 Oct 2026, Fable process review step 3): tokens < primitives < components < pages.
   A later layer beats an earlier one whatever the specificity: a component rule cannot be beaten by an accidental
   higher-specificity rule in an earlier layer, and a rule scoped to one page (main.site--home and the other
   one-page templates) belongs in `pages`. New rules go in the layer they belong to, never outside a layer.
   Layered with ZERO computed-style and pixel change (tools/computed_style_diff.py, tools/ripple.py): where an
   older rule used to win by specificity, it sits in the layer it has to beat (9 rules, listed in audit/reset/CALIBRATION.md). */
@layer tokens, primitives, components, pages;

@layer tokens{
/* ---------- 1. tokens ---------- */
:root{
  --ink:#10201b; --body:#25332e; --muted:#45534c; --line:#d8ded9;
  --green:#1f5a47; --accent:#16654b; --deep:#123b31; --tint:#eef4f0; --pale:#9fd4bd; --paper:#ffffff;
  --hero-a:#f4f8f6; --hero-b:#e6f0ea;
  --sans:'Work Sans','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  /* type: six sizes (phone values; desktop values below) */
  --t1:14px;  /* eyebrow, caption, small print */
  --t2:18px;  /* body */
  --t3:20px;  /* lead, card and sub titles */
  --t4:28px;  /* section title (H2) */
  --t5:36px;  /* page title (H1) */
  --t6:40px;  /* stat number (<= 1.5 x H2, taste V24) */
  /* spacing: eight steps */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --r-box:16px; --r-photo:12px;   /* superseded on main.site by section 38 (Apple design, 26 Oct 2026): 28 / 20 / 14 */
  /* ONE container (root fix, 28 Oct 2026; the approved blank sheet's .wrap): min(1120px, 100% - 2 x gutter), gutter
     22/32/56. The header bar takes the same expression (section 3), so the logo, every section edge, every CTA band and
     the Book button share one left and one right edge at every width. --measure is a reading width that sits ON that
     left edge (never centred). No other selector may set a container width (tools/css_width_lint.py). */
  --gutter:22px; --max:1120px; --measure:760px;
  /* --mid (2 Nov 2026, width lint): a stat row, cost bars, a figure or a decision flow centred in its section: wider than
     prose, narrower than the container. Only section 3 may apply it */
  --mid:52rem;
  --section:var(--s7); --gap:var(--s4);
  /* hero depth (Mark 2 Nov 2026 H1, O2, OC1): air above the eyebrow and under the Book button; deeper on desktop */
  --hero-top:var(--s8); --hero-trust-gap:var(--s6);
  /* L50 (Mark 1 Nov 2026, O3): the gutter between the two columns of a text + visual row */
  --gutter-2:var(--s6);
}
@media (min-width:601px){:root{--gutter:32px}}
@media (min-width:1101px){:root{--gutter:56px}}
@media (min-width:1024px){:root{
  --t1:15px; --t2:19px; --t3:22px; --t4:34px; --t5:52px; --t6:48px;
  --section:var(--s8); --gap:var(--s5);
  --hero-top:var(--s8); --hero-trust-gap:calc(var(--s8) + var(--s5)); --gutter-2:clamp(var(--s7),7vw,var(--s8));
}}
}

@layer primitives{
/* ---------- 2. base ---------- */
body.layout-site{margin:0;background:var(--paper)}
.site{font-family:var(--sans);font-size:var(--t2);line-height:1.6;color:var(--body);-webkit-font-smoothing:antialiased}
.site *,.site *::before,.site *::after{box-sizing:border-box}
/* zero-specificity reset, so every spacing rule below wins without fighting it */
:where(.site) :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,table){margin:0}
.site img,.site svg{display:block;max-width:100%}


.site a:hover{color:var(--deep)}
.site a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.site strong,.site b{font-weight:600;color:var(--ink)}
.site sup{font-size:.6em;line-height:0}
.site [lang|="zh"]{font-family:var(--sans),'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif}

/* ---------- 3. container, column, sections ---------- */
.c{width:min(var(--max),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.c--wide,main.site--home #eyewear>.c{width:min(1360px,calc(100% - 2 * var(--gutter)))}   /* Mark 1 Nov 2026 C5: a row of four tiles uses more of the page width (cards width: wide) */
.col{width:min(var(--measure),100%);margin-inline:auto}
.narrow{width:min(var(--measure),100%);margin-inline:auto}
.cards--1,.site--clinic .cl-grid--1{width:min(var(--measure),100%);margin-inline:auto}   /* v26 (L17, Mark 16 Oct: two columns only when one side is a picture): text-only option cards stack in the reading column */
/* Mark 28 Oct 2026 (after the root fix): a CENTRED style on ONE axis, the page centre. Two widths only: the container
   (grids, cards, rows) and the reading column (--measure: heads' leads, prose, FAQ, single lists), both centred.
   Text inside a reading column stays left-aligned (centred as a block, never ragged). */
.site--clinic .cl-measure{width:min(var(--measure),100%);margin-inline:auto}
.faq-full{width:min(var(--measure),100%);margin:var(--s5) auto 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);interpolate-size:allow-keywords}
.after--wide>:is(p,.small),.related.related--1,.site--clinic .cl-wide>.cl-urgent,.site--clinic #self-check .cl-check,.site .cl-cap--centre{margin-inline:auto}
/* v22 components (Mark 9 Nov 2026): the green stat panel and the video moment take the --mid column, centred on the section axis */
.wide>:is(.stat-panel,.vidloop,.drnote){width:min(var(--mid),100%);margin-inline:auto}
main.site--post .hero--post .c>:is(.post-answer,.byline){width:min(var(--measure),100%);margin-inline:auto}
@media (min-width:700px){main.site--post .post-sub{margin-inline:auto}}
/* overnight 2 Nov 2026 components (width lint, integration): a box centred inside its own section or card takes the
   reading column or --mid; declared here once, the components keep only their vertical spacing */
main.site :is(.vs-foot--centre,.vs-pnote--box,.ft-note),.cl-not,main.site .vs-flowfoot{max-width:var(--measure)}
main.site :is(.vs-foot--centre,.vs-pnote--box,.kit-after,.ft-note,.dc>.vs-flowfoot),.cl-not{margin-inline:auto}
main.site .vs-flow,.cl-wide:has(>.cl-factcards)+.cl-wide>.fig,.cl-trio,.cl-bars,main.site [data-section$="ortho-k-safety/numbers"] .cl-factcards{max-width:var(--mid);margin-inline:auto}
.cl-seq.cl-seq--plain .cl-seq-dot,.cl-seq.cl-seq--plain>li>p:last-child,.cl-team--banner>.head,.cl-phase .cl-phase-x,.cl-answer .cl-answer-x{margin-inline:auto}
@media (max-width:699px){.cl-tv-media>.fig{margin-inline:auto}}
.wide>.rows[data-n="1"]>div{grid-column:1/-1!important;width:min(var(--measure),100%);justify-self:center}
/* centred style, the parts around grids (tablet and desktop; phones keep everything left-set for reading): group
   heads, sub-heads, notes and lone links or buttons under a grid sit on the axis; a pull quote and a byline row are a
   reading column; drawings in a reading column are centred in it */
@media (min-width:700px){
  .group-head,.wide>:is(h3,h4,.small,.eyebrow,.kicker),.site--clinic .cl-wide>:is(h3,h4,.small,.kicker,.cl-cap){text-align:center;align-items:center}
  .s--prose .col.flow:has(+.wide)>:last-child:is(h3,h4,.small,.eyebrow,.kicker){text-align:center}
  .after--wide>:is(p,.small),.site--clinic .cl-measure>p:only-child:has(>a:only-child){text-align:center}
  :is(.after--wide,.site--clinic .cl-center,.col.flow,.site--clinic .cl-measure)>.actions,.site--clinic .cl-visit-ctl,.site--clinic .cl-choose-pills{justify-content:center}}
.wide>.quote,.after--wide>.quote,.s--feature .tv:not(:has(.head)){max-width:var(--measure);margin-inline:auto}
.col>:is(.fig,figure)>:is(svg,img),.figs>figure>:is(svg,img),.site--clinic .cl-measure>.fig>:is(svg,img){margin-inline:auto}
.col>.fig:has(>svg)+.labels,.col>.labels:has(+.fig>svg){max-width:min(100%,560px);margin-inline:auto}   /* labels over a drawing share its width */
/* the shared header's bar uses the SAME container (header.css is generated with 1380px; on these pages it follows .c) */

.s{padding-block:var(--section)}
.s.bg-white{background:var(--paper)}
.s.bg-tint{background:var(--tint)}
.s.s--seam{box-shadow:inset 0 1px 0 var(--line)}   /* V49 (Mark 2 Nov 2026): same-background neighbours get a hairline seam */
/* stacked rhythm: one gap between blocks in any flow, one tighter gap between running paragraphs */
.flow>*+*{margin-top:var(--gap)}
.flow>:is(p,ul,ol)+:is(p,ul,ol){margin-top:var(--s3)}
.flow>:is(h3,h4)+*{margin-top:var(--s3)}
/* the floor applies to EVERY heading, wherever it sits (root fix: one token raised once instead of per-section patches) */


.flow>.title--in{margin-top:var(--s6)}
.flow>.title--in+*{margin-top:var(--s3)}

@media (min-width:1101px){main.site--home :is(#eyewear,#find-us)>.c{width:min(1560px,calc(100% - 64px))}}   /* Mark 5 Nov 2026 (batch 05b): eyewear photos and the Find us map use more of the page width */

/* ---------- 4. type roles ---------- */
.eyebrow{font-family:var(--sans);font-size:var(--t1);font-weight:600;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.title{font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.15;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.title em,.htitle em{font-style:italic;color:var(--accent)}
.htitle{font-family:var(--serif);font-weight:400;font-size:var(--t5);line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sub{font-family:var(--sans);font-size:var(--t3);font-weight:600;line-height:1.3;color:var(--ink)}
.lead{font-size:var(--t3);line-height:1.5;color:var(--body)}
.small{font-size:var(--t1);line-height:1.55;color:var(--muted)}
.site ul.list,.site ol.list{padding-left:1.25em}

.site ul.checks{list-style:none;padding:0}
.site ul.checks li{position:relative;padding-left:1.6em}
.site ul.checks li+li{margin-top:var(--s2)}
.site ul.checks li::before{content:"";position:absolute;left:.15em;top:.5em;width:.7em;height:.38em;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
}

@layer components{
.site img{height:auto}
.site a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
main.site :is(h3,h4):not(.q):not([data-tracks]>*):not(.wide>*)+*{margin-top:var(--s3)}
main.site h2:not(.eyebrow):not(.head>*):not(.q)+*{margin-top:var(--s4)}
.site ul.list li+li,.site ol.list li+li{margin-top:var(--s2)}
/* ---------- 5. section head: eyebrow + title + lead, ALWAYS above the body (rule A) ---------- */
.head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);padding-bottom:var(--s2)}   /* +8px head to body: Mark 29 Oct hub note 6a */
.head>.title+*{margin-top:var(--s2)}   /* +8px title to lead: Mark 29 Oct hub note 6a */
.head+*{margin-top:var(--s5)}
.head--centre{text-align:center;align-items:center}
.head--centre .lead,.head--centre>p{max-width:var(--measure)}
.head .title{max-width:30ch}
.head--centre .title{max-width:28ch}

/* ---------- 6. buttons and the Book/Call group (one centred group, taste L13) ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border-radius:999px;background:var(--accent);color:#fff!important;font-weight:600;font-size:var(--t2);line-height:1.2;text-decoration:none!important;text-align:center}
.btn:hover{background:var(--deep)}
.btn--light{background:#fff;color:var(--deep)!important}
.btn--light:hover{background:var(--tint)}
.call{font-weight:600;color:var(--ink);text-decoration:none!important;font-size:var(--t2);line-height:1.3}
.call:hover{text-decoration:underline!important}
/* v26 (L13, Mark 15 Oct: Book and Call one centred group, every width): a hero pair that stacks shares one centre line. Phones: the pair sits on the page axis; the deep two-column hero, whose column is too narrow for the pair on one row, keeps the Book pill on the column edge with Call centred under it */
@media (max-width:699px){main.site .hero:not(.hero--landing) .hero-copy>.actions{flex-direction:column;align-items:center}}
@media (min-width:700px){main.site .hero--deep .hero-copy>.actions{display:inline-flex;flex-direction:column;align-items:center;align-self:flex-start}}
.more{font-weight:600}

/* ---------- 7. HERO (deep, tinted: rule D) ---------- */
.hero{position:relative;background:linear-gradient(170deg,var(--hero-a) 0%,var(--hero-b) 100%);padding-block:var(--s7)}
.hero .flow{gap:0}
.hero-grid{display:grid;gap:var(--s6);align-items:start}
.hero-copy>*+*{margin-top:var(--s4)}
.hero-copy .htitle+*{margin-top:var(--s4)}
.hero-copy .actions{margin-top:var(--s5)}
.hero-media img,.hero-media svg{width:100%;border-radius:var(--r-photo)}
.hero-media img{aspect-ratio:4/3;object-fit:cover}
.hero-media img[data-orient~="whole"]{aspect-ratio:auto;object-fit:contain}
.hero-media:has(img[data-orient~="compact"]){max-width:400px}   /* M1: a compact product photo is never wider than 400px, phones and tablets too */
.hero-media img[data-orient~="compact"]{aspect-ratio:1/1;object-fit:cover;object-position:52% 50%}
.hero-media:has(img[data-orient~="compact"]) figcaption{text-align:right}   /* a labelled clinical image is never cropped, phones too (batch C critic, MGD hero) */
.hero-media figcaption{margin-top:var(--s2)}
.hero .c>.hero-eyebrow{margin-bottom:var(--s4)}.hero .c>.cl-crumbs+.hero-eyebrow{margin-top:var(--s3)}   /* Mark 7 Nov 2026: eyebrow above the hero row, media top = H1 top */
.hero-trust{list-style:none;margin:0;display:grid;grid-template-columns:1fr;gap:var(--s4) 0;padding:var(--s5) 0 0;position:relative;isolation:isolate}   /* Mark 1 Nov note 12 + W48: the approved hairline strip; below the line the band is white edge to edge, to the hero's foot */
.hero-trust::before{content:"";position:absolute;z-index:-1;top:0;bottom:-40rem;left:calc(50% - 50vw);right:calc(50% - 50vw);background:#fff;border-top:1px solid var(--line)}
.hero .hero-trust,.site--clinic .hero .c>.hero-trust{margin-top:var(--hero-trust-gap)}
@media (min-width:1024px){.hero:has(.hero-trust){--hero-top:calc(var(--s8) + var(--s5))}}   /* only a hero with a trust strip goes deeper (H1, O2, OC1) */   /* the air under the Book button (H1, O2, OC1); beats the clinic stack gap */
.hero:has(.hero-trust){overflow:clip;border-bottom:1px solid var(--line)}   /* V49 (Mark 2 Nov 2026, H2 O1 OC1 M2 G1 T1): the strip is framed by a hairline above and below */
.hero-trust li{display:flex;flex-direction:column;gap:var(--s1);line-height:1.35}
.hero-trust:is([data-n="2"],[data-n="4"]){grid-template-columns:1fr 1fr}   /* even strips 2-up on phones; 3 items stack (no orphan) */
@media (max-width:699px){.hero-trust:is([data-n="2"],[data-n="4"])>li:nth-child(even){border-left:1px solid var(--line);padding-left:var(--s4)}
  .hero-trust:is([data-n="2"],[data-n="4"])>li:nth-child(odd){padding-right:var(--s3)}}   /* phones: two across, a thin divider between the pair */
.hero-trust strong{font-family:var(--serif);font-weight:400;font-size:var(--t3);color:var(--deep)}
.hero-trust li>span{font-size:var(--t1);color:var(--muted)}   /* the small "who" line only: a name inside the bold line (ortho-K) keeps the bold line's size (W48) */
.hero--centred{text-align:center;min-height:auto}
.hero--centred .hero-copy{max-width:var(--measure);margin-inline:auto}
.hero--centred .actions{justify-content:center}
@media (min-width:700px){.hero-trust{grid-template-columns:repeat(3,1fr);gap:0;padding:var(--s5) 0 0}.hero-trust>li{padding-inline:var(--s5)}.hero-trust>li:first-child{padding-left:0}.hero-trust li{display:flex;flex-direction:column;gap:var(--s1)}   /* the caption sits directly under its own bold line (critic, 1 Nov 2026: a shared caption row left 70px gaps under one-line heads) */.hero-trust li+li{border-left:1px solid var(--line)}.hero-trust[data-n="2"]{grid-template-columns:repeat(2,1fr)}.hero-trust[data-n="4"]{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){
  .hero{padding-block:var(--hero-top) var(--s8);min-height:min(72vh,820px);display:flex;flex-direction:column;justify-content:center}
  .hero--split .hero-grid{grid-template-columns:1fr 1fr;gap:var(--s7)}
  .hero--centred{min-height:min(52vh,560px)}
  .hero-media img{aspect-ratio:1/1;max-height:600px}
  .hero-media img[data-orient="landscape"]{aspect-ratio:4/3}
  .hero--split .hero-grid,.site--clinic .hero--light .hero-grid:has(.cl-hero-photo){align-items:stretch}
  .hero--split .hero-media{display:flex;flex-direction:column}
  .hero--split .hero-media img:not([data-orient~="drawing"]){flex:1 1 auto;height:100%;min-height:360px;max-height:none;aspect-ratio:auto;object-fit:cover}
  .hero--split .hero-grid:has(img[data-orient~="compact"]){grid-template-columns:minmax(0,1fr) 400px;gap:var(--s8);align-items:start}   /* Mark 2 Nov 2026 M1 (Fable spec): a compact product photo is a fixed 400px column beside the text */
  .hero--split .hero-media img[data-orient~="compact"]{flex:none;width:100%;height:auto;min-height:0;aspect-ratio:1/1;object-fit:cover}   /* Mark 2 Nov 2026 M1: about a third of the height, square, the whole lens with air round it */
  .hero--split .hero-media img[data-orient~="whole"]{flex:none;height:auto;min-height:0;object-fit:contain;border-radius:var(--r-md)}
  .hero--split .hero-media:has(img[data-orient~="drawing"],img[data-orient~="whole"]){justify-content:center;align-items:center;background:#fff;border-radius:var(--r-lg);padding:var(--s5)}   /* a drawing sits on a tile the height of the text */
  .hero--split .hero-media:has(img[data-orient~="whole"]){background:#0d0f0e}   /* a labelled clinical image sits in a dark viewer the height of the text */
  .hero--split .hero-media:has(img[data-orient="square whole"]){background:none;padding:0}   /* Mark 7 Nov note 6 (MiyoSmart): a near-square product photo fills the column on desktop; whole:true only stops the phone 4:3 crop */
  .hero--split .hero-media img[data-orient="square whole"]{flex:1 1 auto;height:100%;object-fit:cover;border-radius:var(--r-photo)}   /* Mark 7 Nov note 6: same fill as the default split hero */
  .hero--split .hero-media:has(img[data-orient="portrait whole"]){background:none;padding:0}.hero--split .hero-media img[data-orient="portrait whole"]{border-radius:var(--r-photo)}   /* Front Desk 8 Nov 2026 (colour vision): a portrait photo shown whole sits plain like every hero photo, no dark viewer */
  .site--clinic .hero--light .cl-hero-media:has(.cl-hero-photo){display:flex;flex-direction:column}
  .site--clinic .hero--light .cl-hero-photo{flex:1 1 auto;display:flex;margin:0}
  .site--clinic .hero--light .cl-hero-photo img{height:100%;min-height:360px;aspect-ratio:auto!important}
}
/* landing hero (home): full-bleed photo, text over a scrim, centred as a unit (Mark 22 Oct: "move toward the middle") */
.hero--landing{background:var(--deep);color:#fff;min-height:64vh;display:flex;align-items:center;overflow:hidden;padding-block:clamp(40px,4.5vw,64px)}   /* Mark 1 Nov 2026 C1: at least 20% shorter than 86vh */
.hero--landing .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;border-radius:0}
.hero--landing::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,30,24,.62) 0%,rgba(9,30,24,.70) 100%)}
.hero--landing .c{position:relative;z-index:1}
.hero--landing .hero-copy{max-width:44rem;margin-inline:auto;text-align:center}
.hero--landing .actions{justify-content:center}
.hero--landing :is(.htitle,.htitle em,.lead,.lead p,.eyebrow,.call,.rating,.rating *){color:#fff}
.hero--landing .eyebrow{color:var(--pale)}
.hero--landing .htitle em{color:var(--pale)}
.rating{font-size:var(--t2);font-weight:600}
@media (max-width:699px){.hero--landing{min-height:62vh}}   /* Mark 1 Nov 2026 C1: phone 10-20% shallower than 74vh; words/size/capitals stay */
main.site--home .hero--landing{min-height:67vh}   /* Mark 7 Nov 2026 home review 1: home hero about 5% deeper (64vh to 67vh); about.html keeps 64vh */
@media (max-width:699px){main.site--home .hero--landing{min-height:65vh}}   /* Mark 7 Nov 2026: phone 62vh to 65vh */

/* ---------- 8. PROSE: one centred reading column ---------- */

/* ---------- 9. ANSWER: the short answer, a framed box in the column ---------- */
.answer{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);padding:var(--s5)}
.bg-white .answer{background:var(--tint);border-color:transparent}
@media (min-width:1024px){.answer{padding:var(--s6)}}

/* ---------- 10. SPLIT: text beside a REAL visual only (rule A) ---------- */
.split{display:grid;gap:var(--s5);align-items:start}
.split-text>.head+*{margin-top:var(--s4)}
.split-visual img{width:100%;border-radius:var(--r-photo)}
.split-visual--photo img{aspect-ratio:4/5;object-fit:cover}
.split-visual--photo img[data-orient="landscape"]{aspect-ratio:4/3}
.split-visual figcaption{margin-top:var(--s2)}
.split-visual .table-wrap,.split-visual .price{margin:0}
/* collage (Mark 1 Nov 2026 C10; 2 Nov 2026: square corners, pictures touching, one box): four brand campaign pictures in two
   columns that meet with a small step in the middle. Left column: 1st picture on top, 3rd stretched down to the box foot;
   right column: 2nd stretched up to the box top, 4th below it. Rows = picture | step (--lift) | picture; cover, never stretched. */
.collage{--lift:var(--s6);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto var(--lift) auto;gap:0}
.collage-i{margin:0;position:relative;min-height:0;overflow:hidden}
.collage-i:nth-child(1){grid-area:1/1/2/2}
.collage-i:nth-child(2){grid-area:1/2/3/3}
.collage-i:nth-child(3){grid-area:2/1/4/2}
.collage-i:nth-child(4){grid-area:3/2/4/3}
.collage-i img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0}
.collage-i:is(:nth-child(2),:nth-child(3)) img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
@media (min-width:700px){.collage{--lift:var(--s7)}}
@media (min-width:1024px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:stretch}
  .split--wide-text{grid-template-columns:7fr 5fr}
  .split--right .split-visual{order:2}
  .split--left .split-visual{order:-1}
  .split-text{align-self:start}
  .split-visual--photo{display:flex}
  .split-visual--photo figure{display:flex;flex-direction:column;width:100%}
  .split-visual--photo img{flex:1 1 auto;height:100%;min-height:360px;max-height:600px;aspect-ratio:auto}
  .split-visual--figure{align-self:start}
  .split--long .split-visual{position:sticky;top:96px;align-self:start}
  .split--long .split-visual--photo img{height:auto;min-height:0;aspect-ratio:4/5}
  .split--long .split-visual--photo img[data-orient="landscape"]{aspect-ratio:4/3}
}

/* ---------- 11. CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4)}
.cards>*{grid-column:span 12;min-width:0}
/* rows of 2, 3 or 4 on a 12-track grid; a short last row stretches to fill it (no orphan beside an empty cell, L10) */
@media (min-width:700px){
  :is(.cards--2,.cards--3,.cards--4)>*{grid-column:span 6}
  :is(.cards--2,.cards--3,.cards--4)>:last-child:nth-child(odd){grid-column:span 12}
}
@media (min-width:1024px){
  .cards{gap:var(--s5)}
  .cards--3>*{grid-column:span 4}
  .cards--3>:last-child:nth-child(3n+1){grid-column:span 12}
  .cards--3>:nth-last-child(2):nth-child(3n+1),.cards--3>:last-child:nth-child(3n+2){grid-column:span 6}
  .cards--3>:last-child:nth-child(3n){grid-column:span 4}
  .cards--4>*{grid-column:span 3}
  .cards--4>:last-child:nth-child(4n+1){grid-column:span 12}
  .cards--4>:nth-last-child(2):nth-child(4n+1),.cards--4>:last-child:nth-child(4n+2){grid-column:span 6}
  .cards--4>:nth-last-child(3):nth-child(4n+1),.cards--4>:nth-last-child(2):nth-child(4n+2),.cards--4>:last-child:nth-child(4n+3){grid-column:span 4}
  .cards--4>:last-child:nth-child(4n){grid-column:span 3}
}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);padding:var(--s5);color:var(--body)}
.bg-white .card{background:var(--paper)}
.card>*+*{margin-top:var(--s3)}
.card .sub{font-size:var(--t3)}
.card-img{margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;border-radius:var(--r-box) var(--r-box) 0 0;overflow:hidden}
.card-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-img--square img{aspect-ratio:1/1}
.card-img+*{margin-top:var(--s4)}
.card .icon{width:44px;height:44px;color:var(--accent)}
.card .kicker{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.card .tag{align-self:flex-start;font-size:var(--t1);font-weight:600;line-height:1.3;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--deep)}
.card--link{text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
.card--link:hover{border-color:var(--accent);box-shadow:0 6px 24px rgba(18,59,49,.08)}
.card--link .sub{color:var(--ink)}
.card--link .go{margin-top:auto;padding-top:var(--s3);font-weight:600;color:var(--accent)}
.card--tint{background:var(--tint)}
.bg-tint .card--tint{background:var(--paper)}
.group-head{display:flex;flex-direction:column;gap:var(--s1)}
.group-head .sub{font-size:var(--t3)}
.group-head+.cards{margin-top:var(--s4)}
.cards+.group-head{margin-top:var(--s6)}
/* one shape of card shares row tracks: titles, figures and ruled rows line up across the row (subgrid) */
.cards--aligned{align-items:stretch}
.cards--aligned>.card[data-tracks]{display:grid;grid-template-rows:subgrid;row-gap:var(--s3);align-content:start}
.cards--aligned>.card>*+*{margin-top:0}
.cards--aligned>.card[data-tracks="2"]{grid-row:span 2}
.cards--aligned>.card[data-tracks="3"]{grid-row:span 3}
.cards--aligned>.card[data-tracks="4"]{grid-row:span 4}
.cards--aligned>.card[data-tracks="5"]{grid-row:span 5}
.cards--aligned>.card[data-tracks="6"]{grid-row:span 6}
.cards--aligned>.card[data-tracks="7"]{grid-row:span 7}
.cards--aligned>.card[data-tracks="8"]{grid-row:span 8}
.cards--aligned>.card[data-tracks="9"]{grid-row:span 9}
.cards--aligned>.card[data-tracks="10"]{grid-row:span 10}
.cards--aligned>.card[data-tracks="11"]{grid-row:span 11}
.cards--aligned>.card[data-tracks="12"]{grid-row:span 12}
.cards--aligned>.card[data-tracks="13"]{grid-row:span 13}
.cards--aligned>.card[data-tracks="14"]{grid-row:span 14}
.cards--aligned>.card[data-tracks="15"]{grid-row:span 15}
@media (max-width:699px){.cards--aligned>.card[data-tracks]{display:flex;flex-direction:column;grid-row:auto}.cards--aligned>.card>*+*{margin-top:var(--s3)}}
.row1{border-top:1px solid var(--line);padding-top:var(--s3)}
.row1>*+*{margin-top:var(--s2)}
.card-pre{font-weight:600;color:var(--accent)}
.card-pre .p,.card-pre p{font-size:var(--t3);line-height:1.3}
/* people: portraits level, heads on one line (taste V14) */
.cards--people .card{padding:0;border:0;background:transparent;text-align:left}
.cards--people .card>*+*{margin-top:var(--s2)}
.cards--people .card-img{margin:0 0 var(--s2);border-radius:var(--r-photo)}
.cards--people .card-img img{aspect-ratio:4/5;object-position:50% 22%}
.cards--people .card-img img[data-orient="landscape"]{aspect-ratio:1/1;object-position:50% 30%}
.cards--people .role{font-size:var(--t1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
/* logos: luxury marks with room (taste V13) */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6);align-items:center;justify-items:center}
.logos img{max-height:44px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.85}
.logos--2{grid-template-columns:repeat(2,minmax(0,200px));justify-content:center}
@media (min-width:1024px){.logos{grid-template-columns:repeat(4,1fr)}.logos--2{grid-template-columns:repeat(2,minmax(0,220px))}}

/* ---------- 12. STEPS (once per page) ---------- */
.steps{list-style:none;padding:0;display:grid;gap:var(--s4);counter-reset:step}
.steps>li{counter-increment:step;position:relative;padding:var(--s5);padding-top:calc(var(--s5) + 44px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box)}
.steps>li::before{content:counter(step);position:absolute;top:var(--s5);left:var(--s5);width:36px;height:36px;border-radius:50%;background:var(--deep);color:#fff;font-weight:600;font-size:var(--t1);display:flex;align-items:center;justify-content:center}
.steps>li>*+*{margin-top:var(--s2)}
@media (min-width:1024px){.steps{grid-template-columns:repeat(var(--n,4),1fr);gap:var(--s5)}.steps[data-n="2"]{--n:2}.steps[data-n="3"]{--n:3}.steps[data-n="5"]{--n:3}.steps[data-n="6"]{--n:3}}

/* ---------- 13. PRICING ---------- */
.prices{display:grid;gap:var(--s4)}
.price{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);padding:var(--s5) var(--s5) var(--s6);display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
.price>.slot:not(:empty){padding-bottom:var(--s3)}
.price>.slot:last-child{padding-bottom:0}
.flow>.price,.split-visual>.price{grid-template-rows:none;grid-row:auto;display:flex;flex-direction:column}
.price .kicker{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.price .amount{font-family:var(--serif);font-size:var(--t6);line-height:1;color:var(--deep)}
.price .amount-sub{font-size:var(--t2);color:var(--muted)}
.price--feature{border:2px solid var(--accent);box-shadow:0 18px 40px -24px rgba(18,59,49,.35)}
.price .flow ul.list li+li{margin-top:var(--s3)}   /* V48: list lines in a box get room (Mark 1 Nov note 30) */
@media (min-width:700px){.prices--2,.prices--3,.prices--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.prices--3{grid-template-columns:repeat(3,1fr)}.prices--4{grid-template-columns:repeat(4,1fr)}.prices{gap:var(--s6)}.price{padding:var(--s6) var(--s5) var(--s7)}}   /* V48 (Mark 1 Nov note 30): 48px between and inside the boxes */
@media (min-width:700px){.prices--3>.price:last-child:nth-child(odd){grid-column:auto}}

/* ---------- 14. FAQ (answers visible, taste L18) ---------- */
.faq{display:flex;flex-direction:column}
.faq-item{padding-block:var(--s5);border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item>.q{font-family:var(--sans);font-size:var(--t3);font-weight:600;line-height:1.35;color:var(--ink)}
.faq-item>.q+*{margin-top:var(--s3)}
.faq-item>:is(p,ul,ol)+:is(p,ul,ol){margin-top:var(--s3)}

/* ---------- 15. RELATED (whole card is the link) ---------- */
.related{display:grid;gap:var(--s4)}
@media (min-width:700px){.related{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.related--3{grid-template-columns:repeat(3,1fr)}.related--4{grid-template-columns:repeat(4,1fr)}.related{gap:var(--s5)}}

/* ---------- 16. END: reviewed-by + references (centred as a unit) ---------- */
.end{text-align:center}
.end .people{display:flex;justify-content:center;align-items:flex-start;gap:var(--s3)}
.end .people img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.end .who{margin-top:var(--s4)}
.end .bio{margin-top:var(--s2);color:var(--muted)}
.end .refs{margin-top:var(--s6);text-align:left;padding-top:var(--s5);border-top:1px solid var(--line)}
.end .refs ol{margin-top:var(--s3);padding-left:1.5em;font-size:var(--t1);line-height:1.55;color:var(--muted)}
.end .refs ol li+li{margin-top:var(--s2)}

/* ---------- 17. CTA bands: slim mid, deep close (taste L15/L18) ---------- */
.cta{background:var(--deep);color:#fff;text-align:center}
.cta--mid{padding-block:var(--s6)}
.cta--close{padding-block:var(--s7)}
.cta .col{display:flex;flex-direction:column;align-items:center;gap:var(--s4);margin-inline:auto}
.cta .eyebrow{color:var(--pale)}
.cta .title{color:#fff;max-width:26ch}
.cta .title em{color:var(--pale)}
.cta .lead,.cta p{color:#e4efe9}
.cta .actions{justify-content:center}
.cta .btn{background:#fff;color:var(--deep)!important}
.cta .btn:hover{background:var(--tint)}
.cta .call{color:#fff}
.cta a:not(.btn){color:#fff}
@media (min-width:1024px){.cta--close{padding-block:var(--s8)}}

/* ---------- 18. LOCATION (address, hours, map) ---------- */
.loc{display:grid;gap:var(--s6)}   /* Mark 1 Nov 2026 C12: more space between address, hours and map */
.loc-info{display:grid;gap:var(--s6)}
.loc-map iframe{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:var(--r-photo)}
.loc-map p{margin-top:var(--s3)}
.hours{list-style:none;padding:0}
.hours li+li{margin-top:var(--s1)}
@media (min-width:700px){.loc-info{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.loc{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}}

/* ---------- 19. blocks used inside a flow ---------- */
.fig img,.fig svg{width:100%;height:auto;border-radius:var(--r-photo)}
.fig--diagram svg,.fig--diagram img{border-radius:0;background:transparent}
.col>.fig>svg{max-width:min(100%,560px)}   /* a drawing in a reading column starts on the edge at a readable size (critic 28 Oct) */
.fig figcaption,.figs figcaption{margin-top:var(--s2);font-size:var(--t1);line-height:1.55;color:var(--muted)}
.figs{display:grid;gap:var(--s5)}
.figs .fig-title{font-weight:600;color:var(--ink);margin-bottom:var(--s2)}
.figs svg+svg{margin-top:var(--s2)}
@media (min-width:700px){.figs{grid-template-columns:repeat(2,1fr)}}
.box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);padding:var(--s5)}
.bg-white .box{background:var(--tint);border-color:transparent}
.box>*+*{margin-top:var(--s3)}
.box--urgent{background:#fff;border:2px solid var(--deep)}
.bg-white .box--urgent{background:#fff;border-color:var(--deep)}
.quote{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:var(--s5)}
.quote p.q{font-family:var(--serif);font-size:var(--t3);line-height:1.4;color:var(--ink)}
.quote p.q+p{margin-top:var(--s3)}
.stats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--s4);text-align:left}
.stats[data-n="1"]{--n:1}.stats[data-n="2"]{--n:2}.stats[data-n="4"]{--n:2}
@media (min-width:700px){.stats[data-n="4"]{--n:4}}
.stat .num{display:block;font-family:var(--serif);font-size:var(--t6);line-height:1.05;color:var(--deep)}
.stat .lab{display:block;margin-top:var(--s2);font-size:var(--t1);line-height:1.4;color:var(--muted)}
.rows{border-top:1px solid var(--line)}
.rows>div{padding-block:var(--s4);border-bottom:1px solid var(--line)}
.rows>div>*+*{margin-top:var(--s2)}
.chip{display:inline-block;font-size:var(--t1);font-weight:600;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--deep)}
.bg-tint .chip{background:var(--paper)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-box);background:var(--paper)}
.site table{width:100%;border-collapse:collapse;font-size:var(--t2);line-height:1.45}
.site caption{caption-side:top;text-align:left;padding:var(--s3) var(--s4) 0;font-size:var(--t1);color:var(--muted)}
.site th,.site td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.site thead th{background:var(--tint);font-weight:600;color:var(--ink);font-size:var(--t1);letter-spacing:.02em}
.site tbody tr:last-child>*{border-bottom:0}
.site tbody th{font-weight:600;color:var(--ink)}
@media (max-width:699px){.site table{font-size:var(--t1)}.site th,.site td{padding:12px 12px;min-width:120px}}
.details{border:1px solid var(--line);border-radius:var(--r-box);background:var(--paper)}
.details>summary{cursor:pointer;padding:var(--s4) var(--s5);font-weight:600;color:var(--ink)}
.details>.flow{padding:0 var(--s5) var(--s5)}
.post-meta{font-size:var(--t1);color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.post+.post{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--line)}
.post .htitle{font-size:var(--t4)}
.post .htitle a{color:var(--ink);text-decoration:none}

/* ---------- 20. ortho-K mechanism diagram (pending Mark's clinical sign-off, Sitting 1) ---------- */
.mech{display:grid;gap:var(--s5)}
.mech figure{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-box);padding:var(--s4)}
@media (min-width:700px){.mech{grid-template-columns:1fr 1fr}}

/* ---------- 21. utilities the templates use (never page-authored) ---------- */
.centre{text-align:center}
.centre .actions{justify-content:center}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 22. section stacks: head column, reading runs and full-width grids, one rhythm ---------- */
.stack>*+*{margin-top:var(--s5)}
.c>.stack.after,.c>.stack.intro{margin-top:var(--s5)}
.c>.head+.stack{margin-top:var(--s5)}
.card .p{display:block}
/* a split's follow-on content keeps the split's left edge (rule C): left-aligned reading column, not re-centred */
/* under a split: full-width things only, one left edge with the split; link lines and footnotes centred under the grid */
.s--split .after--wide{margin-top:var(--s6)}
.wide>.cards+.group-head{margin-top:var(--s6)}

/* ---------- 23. small context rules ---------- */
.hero .title--in{font-size:var(--t3);margin-top:var(--s2);font-family:var(--serif)}
.hero .flow>.title--in:first-child{margin-top:0}
.card .role{font-size:var(--t1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.card .tags{font-size:var(--t1);color:var(--muted)}
/* a link line under a centred grid is centred with it */

/* a diagram pair beside text stacks (night above day), so the picture column is as tall as the words */
.split-visual .figs{grid-template-columns:1fr}
/* the shell's call link: the number keeps the link colour on every background */
.call b,.call strong,.call small{color:inherit;font-weight:inherit;font-size:inherit}
/* text that follows a centred grid is centred with it */
/* (text after a centred grid stays left-aligned in the centred reading column: centred running text fails CENTRED) */

.s:has(.head--centre) .stats,.centre .stats{text-align:center}   /* L51 (Mark 2 Nov 2026, T8): figures follow the centred head */
.s .flow>:is(h3,h4,ul,ol)+.stats{text-align:left}   /* a figure under left-set reading text stays on the text's left edge; one right under the centred head (L51) is not a .flow sibling of these, so it stays centred (7 Nov 2026, critic) */
figure>.pause{margin-top:var(--s2);font:600 var(--t1)/1 var(--sans);padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--deep);cursor:pointer}
.hero .actions+.flow{margin-top:var(--s4)}
/* a subheading over a ruled or framed block keeps a full step of air above the rule (CROWD, 20 Oct rhythm rule) */
.flow>:is(h3,h4)+:is(.rows,.quote,.table-wrap,.box,.cards,.figs,.stats,.details,.price,.mech,.faq){margin-top:var(--s4)}
.details>.flow{padding-top:var(--s2)}
/* registered icons are line drawings in the accent colour */
.card .icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.end .more{margin-top:var(--s5)}

/* phones: a centred head would set its lead as a long centred block; on a narrow screen everything starts on the left edge */
@media (max-width:699px){.head--centre{text-align:left;align-items:flex-start}.prose .centre,.col.centre{text-align:left}.col.centre .actions{justify-content:flex-start}}
html:lang(zh) .site{font-family:var(--sans),"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}

/* ---------- 24. one left edge per section (calibration, 22 Oct) ---------- */
@media (min-width:1024px){.s--prose .cards{gap:var(--s4)}}
.s--prose .card{padding:var(--s4)}
.s--prose .card-img{margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0}
:is(.s--cards,.s--pricing,.s--steps) .after--wide{margin-top:var(--s6)}
:is(.s--cards,.s--pricing,.s--steps) .intro{margin-bottom:var(--s5)}
/* price cards: the figure lines up across a row whatever the description length */
.price>.desc{flex-grow:1}
/* a split photo meets the bottom of its text */
@media (min-width:1024px){
  /* the photo takes exactly the text's height (never adds its own): it fills an absolutely placed frame */
  .s--split .split-visual--photo figure{display:flex;flex-direction:column;height:100%}
  .s--split .split-visual--photo .ph{position:relative;flex:1 1 auto}
  /* the frame never gets so flat that the photo is cut hard: its floor follows the photo's own shape */
  .s--split .split-visual--photo .ph::before{content:"";display:block;padding-top:62%}
  .s--split .split-visual--photo .ph:has(img[data-orient="square"])::before{padding-top:70%}
  .s--split .split-visual--photo .ph:has(img[data-orient~="portrait"])::before{padding-top:80%}
  .s--split .split-visual--photo .ph img{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover}
  .s--split .split--long .split-visual--photo .ph{position:relative;flex:none}
  .s--split .split--long .split-visual--photo .ph::before{content:none}   /* ROWTOP found it 28 Oct: the frame's spacer pushed a sticky photo 422px below its heading */
  .s--split .split--long .split-visual--photo .ph img{position:static;height:auto}
  .s--split .split-visual .figs{max-width:440px;margin-inline:auto}}
@media (min-width:1024px){.s--split .split-visual--photo .ph:has(img[data-orient~="tall"])::before{padding-top:100%}}

/* ---------- 25. critic round-2 fixes (22 Oct) ---------- */
.end{text-align:left}.end .people{justify-content:flex-start}
@media (min-width:1024px){.s--split .split-visual .figs{margin-inline:auto 0}}
@media (max-width:699px){.site th:last-child,.site td:last-child{padding-right:20px}}
.table-wrap{background:linear-gradient(90deg,var(--paper) 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,linear-gradient(270deg,var(--paper) 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgba(18,59,49,.18),transparent) right/14px 100% no-repeat scroll,var(--paper)}
.site a[href^="tel:"]{white-space:nowrap}
.flow>.quote+.quote{margin-top:0;border-top:0}
@media (max-width:699px){.stats[data-n="3"] .num{font-size:var(--t3)}}

.flow>.title+*,.answer>.title+*{margin-top:var(--s4)}
.post+.post{margin-top:var(--s8);padding-top:var(--s8)}
.post>.htitle{margin-top:var(--s3)}.post>.flow{margin-top:var(--s5)}
.loc-map iframe{background:var(--tint)}
.hours li{white-space:nowrap}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.tags li{font-size:var(--t1);line-height:1.3;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--deep)}
.bg-tint .tags li{background:var(--paper)}
.flow>.eyebrow+*{margin-top:var(--s2)}
.card-img>svg{width:100%;height:auto;background:var(--tint);padding:var(--s4)}
.after--wide>:is(p,.small){max-width:var(--measure)}
.site a.card--link,.site a.card--link .p{color:var(--body)}

/* ---------- 26. critic round-2 fixes ---------- */
.nw{white-space:nowrap}
.tags li{white-space:nowrap}
.centre .tags{justify-content:center}
.labels{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:var(--s4);text-align:center}
.labels[data-n="3"]{--n:3}
.end .people img{width:120px;height:150px;border-radius:var(--r-photo);object-position:50% 30%}
.flow>.eyebrow{margin-top:var(--s6)}
.flow>.eyebrow:first-child{margin-top:0}
.split-text .logos{justify-items:start}
.loc .sub{font-size:var(--t2)}
@media (min-width:1024px){.s--split .split-visual .figs{max-width:380px}}
@media (max-width:699px){.site td,.site th{min-width:150px}}
.table-wrap{box-shadow:inset -14px 0 12px -12px rgba(18,59,49,.28)}
.end .people img{width:128px;height:auto;aspect-ratio:1;min-width:0;flex:0 1 auto}.end .people img[data-orient~="portrait"]{width:120px;height:150px;aspect-ratio:auto}

/* ---------- 27. critic round-3 fixes ---------- */
.stat--long .num{font-size:var(--t4)}
@media (max-width:699px){
  /* a table with column heads becomes stacked cards on a phone: every cell names its column, nothing is cut off */
  .table-wrap--stack{border:0;background:none;box-shadow:none;overflow:visible}
  .table-wrap--stack table,.table-wrap--stack tbody,.table-wrap--stack tr,.table-wrap--stack th,.table-wrap--stack td{display:block;width:100%;min-width:0}
  .table-wrap--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table-wrap--stack tr{border:1px solid var(--line);border-radius:var(--r-box);background:var(--paper);padding:var(--s3) var(--s4)}
  .table-wrap--stack tr+tr{margin-top:var(--s3)}
  .table-wrap--stack :is(td,th){padding:6px 0;border:0}
  .table-wrap--stack :is(td,th)[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:var(--t1);font-weight:600;color:var(--muted)}
  .table-wrap--stack tbody th{font-size:var(--t3)}
}
.sc{display:inline-block;text-transform:lowercase}
.sc::first-letter{text-transform:uppercase}
.split-text .logos--2{justify-content:start}
.split-text .logos{justify-items:start}
.logos img{background:#fff;padding:6px 10px;border-radius:var(--r-sm)}
.hero--landing::after{background:linear-gradient(180deg,rgba(9,30,24,.62) 0%,rgba(9,30,24,.74) 60%,rgba(9,30,24,.80) 100%)}
.end .people+*{margin-top:var(--s5)}
.end .bio+.bio{margin-top:var(--s3)}
.tags{align-content:flex-start;align-items:flex-start}
@media (max-width:699px){.table-wrap--stack table{font-size:var(--t2)}}

/* a drawing or product render (PNG artwork) is shown whole: never cover-cropped */
.site img[data-orient~="drawing"]{object-fit:contain;background:transparent}
/* ---------- 28. critic round-4 fixes ---------- */
/* figures on one line and captions on one line across a stat row, whatever wraps (subgrid) */
.stats{grid-template-rows:auto auto;row-gap:0}
.stat{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start}
.stat .lab{margin-top:var(--s2);align-self:start}
.s--prose .flow>.stats:not(:only-child)>.stat{row-gap:0}
.stat .num{align-self:end}
.site caption{padding-bottom:var(--s3)}
@media (max-width:699px){.table-wrap--stack caption{display:block;width:100%;padding:0 0 var(--s3);font-size:var(--t1)}}
.post .title--in{font-size:var(--t3)}
.post>.htitle{font-size:var(--t4)}
.split-text .logos{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:flex-start}
.split-text .logos img{padding-left:0}
.sc{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;letter-spacing:0}
@media (min-width:700px){
  .end{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s5);align-items:start}
  .end>.people{grid-row:span 4;grid-column:1;align-self:stretch}
  .end>:not(.people){grid-column:2}
  .end>.people+*{margin-top:0}
  .end>:is(.refs,.more){grid-column:1/-1}
}
.flow>:is(h3,h4)+.actions{margin-top:var(--s4)}
/* ---------- 29. critic round-6 fixes ---------- */
.stats:has(.stat--long) .num{font-size:var(--t3)}
.post .stats{text-align:left}
/* ---------- 30. critic round-7 fixes ---------- */
.table-wrap{box-shadow:none}
.price>.slot{align-self:start}
.price>.slot:last-child{align-self:stretch;display:flex;flex-direction:column}
.price>.slot:last-child>.flow{display:flex;flex-direction:column;flex:1 1 auto}
.price>.slot:last-child>.flow>p:last-child:has(>strong:first-child){margin-top:auto;padding-top:var(--s3)}   /* a card's closing line (e.g. 'Maintenance from year 3') sits on the card's bottom in every card of the row: Mark 29 Oct, third critic round on ortho-k-cost */
@media (min-width:1024px){:is(.prices--3,.prices--4) .price .amount{font-size:var(--t4)}}
.stats[data-n="1"] .stat .num{font-size:var(--t6)}
@media (max-width:699px){.stats:not([data-n="1"]):has(.stat--long) .num{font-size:var(--t2)}}
/* price cards: the parent grid's row gap leaked between a card's six subgrid rows; cards keep their gap by margin */
.prices{row-gap:0}
.prices>.price{margin-bottom:var(--s5)}
.prices{margin-bottom:calc(-1 * var(--s5))}
/* three price cards on a two-column tablet row: the third is centred under the pair (no card beside an empty cell) */
@media (min-width:700px) and (max-width:1023px){.prices--3{grid-template-columns:repeat(4,1fr)}.prices--3>.price{grid-column:span 2}.prices--3>.price:last-child:nth-child(odd){grid-column:1/-1}}
/* illustrated card icons (drawn on a 120 grid with built-in margin) show at their drawn size, not shrunk to a glyph */
.card .icon:has(svg[viewBox="0 0 120 120"]){width:72px;height:72px;margin:-8px 0 -8px -12px}
.card .icon svg[viewBox="0 0 120 120"]{stroke-width:2.4}
/* a label above an in-section sub-heading keeps the same gap as a section head */
.flow>.eyebrow+*{margin-top:var(--s3)}
/* location: the hours label sits on the same line box as the info labels beside it */
.loc .sub{line-height:inherit;font-weight:600}
/* phones: a long figure (a name, not a number) takes its own row instead of wrapping beside short ones */
@media (max-width:699px){.stats[data-n="3"]:has(.stat--long){--n:2;row-gap:var(--s4)}.stats[data-n="3"] .stat--long,.stats[data-n="3"] .stat--long+.stat:has(+.stat--long){grid-column:1/-1}}

/* ---------- 31. reference pass (23 Oct 2026, Mark's staging review + the claude.com/product/design study) ----------
   Study and measurements: brain repo page-factory/site-build/reset/REFERENCE-claude-com-2026-10-23.md
   In-house benchmark: the children's myopia assessment page (Mark: "fantastic, clean, this is sort of what I was after").
   One centre axis per section: heads centred, reading text in the centred measure, scannable things wider on the
   same axis (--wide). Warm neutral alternating bands. Motion only for visitors who allow it (site.js adds .rv-on). */
:root{--warm:#faf8f4;--wide:100%;--rule-warm:#e4dfd5}   /* --wide = the container (root fix, 28 Oct 2026) */
.s.bg-tint{background:var(--warm)}


.tv-visual>.tv-photo>img[data-orient~="whole"]{object-fit:contain;height:auto}   /* a labelled image is never cropped, any width */
/* a photo's focal point travels with the photo (taste V38): a few registered values, no inline style */
.site img[data-focus="50% 0%"]{object-position:50% 0%}
.site img[data-focus="50% 12%"]{object-position:50% 12%}
.site img[data-focus="50% 20%"]{object-position:50% 20%}
.site img[data-focus="50% 30%"]{object-position:50% 30%}
.site img[data-focus="78% 40%"]{object-position:78% 40%}
.site img[data-focus="30% 50%"]{object-position:30% 50%}   /* Mark 7 Nov 2026 note 14: the axial hero is 10-20% deeper; keep the child in frame */

@media (min-width:1024px){
  .s--split .split{column-gap:var(--s7)}
  .s--split .split-visual .figs{margin-inline:auto;max-width:440px}
}

.s--prose .col>.head .lead{max-width:var(--measure)}

/* a ruled list of 4+ short items becomes a scannable grid (taste L33): check mark, short bold line, one line under it */
.wide>.rows{border-top:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4) var(--s5)}
.wide>.rows>div{grid-column:1/-1;border-bottom:0;border-top:1px solid var(--rule-warm);padding:var(--s4) 0 0}
/* the check mark sits inside the title line, so the title and its line share one left edge */
.wide>.rows>div>.sub::before{content:"";display:inline-block;width:.8em;height:.42em;margin:0 .6em .22em .1em;vertical-align:middle;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.wide>.rows>div>.sub{font-size:var(--t3);line-height:1.3}
.wide>.rows>div>p:not(.sub){color:var(--muted)}
@media (min-width:700px){.wide>.rows>div{grid-column:span 3}}
@media (min-width:1024px){
  .wide>.rows>div{grid-column:span 2}
  .wide>.rows[data-n="4"]>div{grid-column:span 3}
  .wide>.rows[data-n="5"]>div:nth-last-child(-n+2),.wide>.rows[data-n="8"]>div:nth-last-child(-n+2){grid-column:span 3}
  .wide>.rows[data-n="7"]>div:last-child{grid-column:1/-1}
}
@media (min-width:700px) and (max-width:1023px){.wide>.rows:is([data-n="5"],[data-n="7"])>div:last-child{grid-column:1/-1}}

/* eyewear: luxury marks 50% larger, and twice the air between the photo, the words and the logo row (Mark 23 Oct) */
@media (min-width:700px){.after--wide .logos{gap:var(--s6) var(--s7)}.after--wide .logos img{max-height:66px;max-width:210px}}
.after--wide .logos img{max-width:100%}
@media (min-width:1024px){
  .s--split .after--wide:has(.logos){margin-top:var(--s8)}
}

/* trust marks (Medicare, HICAPS, funds) show in their own colours; only the luxury brand row stays monochrome */
.col .logos img,.split-text .logos img{filter:none;opacity:1}

/* ---------- 31b. Google review strip (claude.com testimonial anatomy, continuous drift; pauses on hover/focus) ---------- */
.wide:has(>.reviews){width:100%}
.reviews{position:relative;display:flex;overflow:hidden;margin-block:var(--s2)}
.rv-track{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.rvw{flex:0 0 auto;width:min(340px,86vw);display:flex;flex-direction:column;gap:var(--s3);padding:var(--s2) var(--s5);border-left:1px solid var(--rule-warm);text-align:left}
.rvw:first-child{border-left:0}
.rv-stars{color:#8a6416;letter-spacing:.12em;font-size:var(--t2);line-height:1}
.rv-q p{font-family:var(--serif);font-size:var(--t2);line-height:1.55;color:var(--ink)}
.rv-who{margin-top:auto;font-size:var(--t1);color:var(--muted);font-weight:600}
/* static (no JS or reduced motion): a wrapped, centred row */
.rv-track{row-gap:var(--s5)}
.reviews.is-moving{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reviews.is-moving .rv-track{flex-wrap:nowrap;justify-content:flex-start;animation:rv-drift 90s linear infinite}
.reviews.is-moving .rvw:first-child{border-left:1px solid var(--rule-warm)}
.reviews.is-moving:hover .rv-track,.reviews.is-moving:focus-within .rv-track,.reviews.is-held .rv-track,.reviews.is-stopped .rv-track{animation-play-state:paused}
.rv-pause{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s3);padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--body);font:600 var(--t1)/1 var(--font-text,inherit);cursor:pointer}
.rv-pause:hover{border-color:var(--ink);color:var(--ink)}
.rv-pause:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@keyframes rv-drift{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.reviews .rv-track{animation:none!important}}

/* ---------- 31c. FAQ: claude.com pattern (serif questions, hairline rules, a drawn plus, collapsed) ---------- */
.faq{border-bottom:1px solid var(--rule-warm)}
.faq-item{padding:0;border-top:1px solid var(--rule-warm)}
.faq-item:last-child{border-bottom:0}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:28px}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary>.q{font-family:var(--serif);font-weight:400;font-size:var(--t3);line-height:1.35;color:var(--ink)}
.faq-item>summary:hover>.q{color:var(--accent)}
.faq-item>summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
.pm{position:relative;flex:0 0 18px;width:18px;height:18px}
.pm::before,.pm::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:var(--ink);transition:transform .3s cubic-bezier(.165,.84,.44,1)}
.pm::after{transform:rotate(90deg)}
.faq-item[open] .pm::after{transform:rotate(0deg)}
.faq-item>.a{padding-bottom:var(--s5)}
.faq-item>.a>.a-in>:is(p,ul,ol)+:is(p,ul,ol){margin-top:var(--s3)}
.faq-item>.a p{color:var(--body)}
@media (prefers-reduced-motion:no-preference){
  .faq-item>.a{animation:faq-open .4s cubic-bezier(.165,.84,.44,1)}
}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 31d. scroll reveal (only when site.js runs and motion is allowed) ---------- */
.rv-on .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1)}
.rv-on .rv.in{opacity:1;transform:none}
.rv-on .rv-title .rv-w{opacity:0;transition:opacity .9s cubic-bezier(.25,1,.5,1)}
.rv-on .rv-title.in .rv-w{opacity:1}
@media (prefers-reduced-motion:reduce){.rv-on .rv,.rv-on .rv-title .rv-w{opacity:1!important;transform:none!important;transition:none!important}}
/* a sub-heading that introduces a wide grid travels with the grid: centred on the axis; and the grid gets a full
   section-step of air before the reading column resumes */
.s--prose .wide:has(>.rows)+.col{margin-top:var(--s7)}
.s--prose .col+.wide:has(>.rows){margin-top:var(--s5)}

/* ---------- 31e. reference pass, round 2 (critic round 12) ---------- */
.wide>:is(h3,h4).sub+p.small{margin-top:var(--s1)}
.wide>:is(h3,h4,.small,.eyebrow)+:is(.rows,.list,.table-wrap,.cards){margin-top:var(--s5)}
.wide>.small+:is(h3,h4){margin-top:var(--s2)}
/* two- and three-item ruled lists */
@media (min-width:1024px){.wide>.rows[data-n="2"]>div{grid-column:span 3}}
/* a ruled list of 1-3 items in the reading column keeps its plain rules */
/* bullet lists that are really grids: short items (checks, 3 across) and bold-led items (3 columns) */
.wide>.list--grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3) var(--s5)}
.wide>.list--grid>li{grid-column:1/-1;margin:0!important;border-top:1px solid var(--rule-warm);padding-top:var(--s3)}
.wide>.list--short>li::before{content:"";display:inline-block;width:.75em;height:.4em;margin:0 .6em .22em .1em;vertical-align:middle;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.wide>.list--lead>li>strong:first-child{display:block;font-size:var(--t3);line-height:1.3;margin-bottom:var(--s2)}
.wide>.list--lead>li{color:var(--body)}
@media (min-width:700px){.wide>.list--grid>li{grid-column:span 3}.wide>.list--grid:is([data-n="3"],[data-n="5"],[data-n="7"])>li:last-child{grid-column:1/-1}}
@media (min-width:1024px){
  .wide>.list--grid>li{grid-column:span 2}
  .wide>.list--grid[data-n="4"]>li{grid-column:span 3}
  .wide>.list--grid[data-n="5"]>li:nth-last-child(-n+2),.wide>.list--grid[data-n="8"]>li:nth-last-child(-n+2){grid-column:span 3}
  .wide>.list--grid[data-n="7"]>li:last-child{grid-column:1/-1}
  .wide>.list--grid:is([data-n="3"],[data-n="5"])>li:last-child{grid-column:span 2}
  .wide>.list--grid[data-n="5"]>li:last-child{grid-column:span 3}
}
/* a split whose visual is a drawing: the text sits level with the drawing's middle, no dead area under it */
/* a tag hugs its text inside an aligned card */
.cards--aligned>.card .tag,.card .tag{justify-self:start;width:max-content;max-width:100%}
.reviews{justify-content:flex-start}
@media (min-width:700px) and (max-width:1023px){.wide>.rows[data-n="2"]>div{grid-column:1/-1}}

/* ---------- 32. CENTERPIECE: the living diagram (Mark 23 Oct 2026; claude.com's product stage, our own drawing) ----------
   One animated explainer per treatment page, drawn in code (SVG), on a soft stage under the hero. Its steps light up in
   time with the drawing's 8-second cycle (registered windows below; sitegen refuses any other). Reduced motion: the
   drawing is paused by the svg-pause behaviour and every step is shown at full strength. */
.s--centerpiece .stage{margin-top:var(--s5);border-radius:var(--r-md);padding:var(--s5) var(--s4);background:linear-gradient(160deg,#ffffff 0%,var(--warm) 45%,#eef4f0 100%);border:1px solid var(--rule-warm)}
.bg-tint.s--centerpiece .stage{background:linear-gradient(160deg,#ffffff 0%,#ffffff 40%,#eef4f0 100%)}
.stage-fig{max-width:860px;margin-inline:auto}
.stage-fig svg{width:100%;height:auto}
.stage-fig>.pause{display:block;margin-inline:auto}
.stage-steps{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s4)}
.stage-steps>li{position:relative;padding-top:var(--s4);border-top:2px solid var(--rule-warm)}
.stage-steps>li::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.stage-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--deep);color:#fff;font:600 var(--t1)/1 var(--sans);margin-bottom:var(--s2)}
.stage-steps p{font-size:var(--t2);line-height:1.5}
.stage-notes{margin:var(--s4) 0 0;display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center}
@media (min-width:700px){.stage-steps{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}.stage-steps[data-n="2"]{--n:2}.stage-steps[data-n="4"]{--n:4}}
@media (min-width:1024px){.s--centerpiece .stage{padding:var(--s6) var(--s6) var(--s5)}}
@media (prefers-reduced-motion:no-preference){
  .rv-on .stage-steps>li{transition:opacity .4s}
  .stage-steps>li.cp-0-25{animation:cp-a 8s linear infinite}
  .stage-steps>li.cp-25-50{animation:cp-b 8s linear infinite}
  .stage-steps>li.cp-50-85{animation:cp-c 8s linear infinite}
  .stage-steps>li.cp-0-25::before{animation:cp-bar-a 8s linear infinite}
  .stage-steps>li.cp-25-50::before{animation:cp-bar-b 8s linear infinite}
  .stage-steps>li.cp-50-85::before{animation:cp-bar-c 8s linear infinite}
  .stage.is-paused .stage-steps>li,.stage.is-paused .stage-steps>li::before{animation-play-state:paused}
}
@keyframes cp-a{0%,24%{opacity:1}26%,100%{opacity:.5}}
@keyframes cp-b{0%,24%{opacity:.5}26%,49%{opacity:1}51%,100%{opacity:.5}}
@keyframes cp-c{0%,49%{opacity:.5}51%,84%{opacity:1}86%,100%{opacity:.5}}
@keyframes cp-bar-a{0%{transform:scaleX(0)}25%{transform:scaleX(1)}26%,100%{transform:scaleX(0)}}
@keyframes cp-bar-b{0%,25%{transform:scaleX(0)}50%{transform:scaleX(1)}51%,100%{transform:scaleX(0)}}
@keyframes cp-bar-c{0%,50%{transform:scaleX(0)}85%{transform:scaleX(1)}86%,100%{transform:scaleX(0)}}
@media (max-width:699px){.s--centerpiece .stage{padding:var(--s3) var(--s3) var(--s4)}}

/* ---------- 31f. critic round 13 (one batch) ---------- */
/* a list grid has no list indent (the .site ul.list rule outranked it: a 24px inset off the axis) */
.site .wide>ul.list--grid{padding-left:0}
/* static review strip (no JS / reduced motion): three across at most, centred, never a lone fifth beside empty cells */
.reviews:not(.is-moving) .rv-track{max-width:calc(3 * min(340px,86vw) + 2px);margin-inline:auto}
/* supplier marks beside multifocal copy: readable size */
.split-text .logos img{max-height:52px;max-width:150px}
/* trust marks sit on the band without an extra white tile */
.col .logos img{padding:0;border-radius:4px}
/* myopia split: text starts level with the drawings, drawings sized to the text column */
@media (min-width:1024px){.s--split .split:has(>.split-visual--figure)>.split-text{align-self:start}.s--split .split-visual .figs{max-width:360px}}
@media (min-width:1024px){.s--split .split:has(>.split-visual .collage)>.split-text{position:sticky;top:120px}}   /* C10: the short words stay in view beside the taller collage (no dead column) */
/* a one-item ruled list on the wide axis is one centred reading block, not a third of a grid */

/* ---------- 31g. critic round 14 (one batch) ---------- */
/* split drawings sit flush with the section's right edge (the cards under them end there too) */
@media (min-width:1024px){.s--split .split-visual .figs{max-width:400px;margin-inline:auto 0}}
/* static review strip: a fixed column grid, so a short last row starts on the same column edges */
.reviews:not(.is-moving) .rv-track{display:grid;grid-template-columns:1fr;row-gap:var(--s5);max-width:none;width:100%}
@media (min-width:700px){.reviews:not(.is-moving) .rv-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.reviews:not(.is-moving) .rv-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reviews:not(.is-moving) .rvw{width:auto}
@media (max-width:699px){.reviews:not(.is-moving) .rvw{border-left:0;padding:var(--s4) 0 0;border-top:1px solid var(--rule-warm)}}
@media (min-width:700px){.reviews:not(.is-moving) .rvw{border-left:1px solid var(--rule-warm)}}
/* ruled items with a title and one line: titles and lines share row tracks across the grid (subgrid) */
@media (min-width:700px){
  .wide>.rows:not(:has(>div>:nth-child(3))){grid-auto-rows:auto;row-gap:0}
  .wide>.rows:not(:has(>div>:nth-child(3)))>div{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:var(--s2);margin-bottom:var(--s4)}
}

/* ---------- 33. ZEISS consumer-page patterns (Mark 23 Oct 2026: "build our treatment pages on those patterns, with our
   own twist"). Measured on zeiss.com/vision-care (myopia management, single vision and progressive lens pages) in Chrome;
   patterns and interaction only, CEC green instead of ZEISS blue, CEC type and radii. Study + side-by-side proof:
   brain repo page-factory/site-build/reset/zeiss-parity/. ---------- */

/* 33a. TEXT + VISUAL row (ZEISS "benefits"): the visual fills one half, square, to the container edge; the text sits
   in the other half, vertically centred. A two-column row is always text + a visual (taste L39; gate TEXTTEXT). */
.s--feature .tv{display:grid;gap:0}
.tv-visual{min-width:0}
.tv-visual>figure{margin:0}
.tv-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-photo)}
.tv-visual figcaption{margin-top:var(--s2);font-size:var(--t1);line-height:1.55;color:var(--muted)}
.tv-text{display:flex;flex-direction:column;min-width:0}
.tv-in{padding-top:var(--s5)}
.tv-in>.head+.flow{margin-top:var(--s4)}
.tv-in .head .title{max-width:22ch}
.s--feature .after--wide{margin-top:var(--s6)}
@media (max-width:699px){
  /* phones: the visual runs edge to edge above the words, as on zeiss.com */
  .tv-visual{margin-inline:calc(-1 * var(--gutter))}
  .tv-visual :is(.tv-photo img,.cmp-stage,.zones-img,.fig--diagram img){border-radius:0}
  .tv-visual figcaption{padding-inline:var(--gutter)}
}
@media (min-width:1024px){
  /* the text half stretches (its words centred in it); a visual shorter than long text sits level with its middle */
  .s--feature .tv{grid-template-columns:1fr 1fr;align-items:start}
  .tv-visual{align-self:start}
  .tv--visual-right .tv-visual{order:2}
  .tv-in{width:100%;max-width:36rem;padding:0 0 0 var(--s6)}
  .tv--visual-right .tv-in{padding:0 var(--s6) 0 0}
  /* a photo beside text fills the text's height (L6/L7: start together, end together); drawings, sliders and zone
     figures keep their own shape and sit at the top */
  .s--feature .tv:has(>.tv-visual>.tv-photo){align-items:stretch}
  .tv-visual:has(>.tv-photo){align-self:stretch;display:flex;flex-direction:column}
  .tv-visual>.tv-photo{flex:1 1 auto;display:flex;flex-direction:column}
  .tv-visual>.tv-photo>img{flex:1 1 auto;height:100%;min-height:420px;aspect-ratio:auto!important;object-fit:cover}
  /* a document or labelled image (whole: true) is never cropped: it sits on a tile the height of the text */
  .s--feature .tv:has(img[data-orient~="whole"]){align-items:stretch}
  .tv-visual:has(>.tv-photo>img[data-orient~="whole"]){align-self:stretch;max-width:none;display:flex;flex-direction:column;justify-content:center;background:#ececef;border-radius:var(--r-lg);padding:var(--s4)}
  .tv-visual>.tv-photo:has(>img[data-orient~="whole"]){flex:none}
  .tv-visual>.tv-photo>img[data-orient~="whole"]{flex:none;height:auto;min-height:0;object-fit:contain;border-radius:0}
  /* a drawing beside text sits on its own grey tile that spans the text's height, the drawing centred in the tile */
  .s--feature .tv:has(>.tv-visual>.fig--diagram){align-items:stretch}
  .tv-visual:has(>.fig--diagram){align-self:stretch;display:flex;align-items:center;justify-content:center;background:var(--grey);border-radius:var(--r-lg);padding:var(--s5)}
  .s.bg-tint .tv-visual:has(>.fig--diagram){background:#fff}
}
/* a feature row without a heading is a byline (a person and one or two lines): a small portrait, not a half-width photo */
.s--feature .tv:not(:has(.head)) .tv-visual{max-width:160px;margin-inline:0}
.s--feature .tv:not(:has(.head)) .tv-visual>.tv-photo>img{border-radius:var(--r-md)}
@media (min-width:1024px){
  .s--feature .tv:not(:has(.head)){grid-template-columns:200px minmax(0,1fr);align-items:start}
  .s--feature .tv:not(:has(.head)) .tv-visual{max-width:200px}
  .s--feature .tv:not(:has(.head)) .tv-visual>.tv-photo>img{min-height:0;aspect-ratio:1/1!important;height:auto}
  .s--feature .tv:not(:has(.head)) .tv-in{max-width:none}}
/* a landscape photo keeps 4:3 (faces at the frame edge stay whole); a drawing is shown whole on a square stage */
.tv-photo img[data-orient="landscape"]{aspect-ratio:4/3}
.tv-visual .fig--diagram img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-photo)}
/* (24 Oct) a PNG drawing in a text + visual row keeps its own shape, shown whole: the square crop cut a landscape
   measurement drawing by 61% (gate CLIP on progressive-lenses) */
.tv-visual .fig--diagram img[data-orient~="drawing"]{aspect-ratio:auto;object-fit:contain}

/* 33b. COMPARISON SLIDER (ZEISS image-comparison): one scene twice; drag the line (mouse, touch) or use the arrow keys
   on the slider control. 2px line in the accent, a 48px white knob with an accent ring, labels in HTML. */
.cmp{margin:0}
.cmp-stage{--pos:50%;position:relative;overflow:hidden;aspect-ratio:1/1;border-radius:var(--r-photo);background:var(--tint);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;pointer-events:none}
.cmp-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--accent);pointer-events:none}
.cmp-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 10px rgba(18,59,49,.18)}
.cmp-knob::before,.cmp-knob::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.cmp-knob::before{left:11px;transform:rotate(45deg)}
.cmp-knob::after{right:11px;transform:rotate(-135deg)}
.cmp-tag{position:absolute;top:var(--s3);margin:0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:600 var(--t1)/1.2 var(--sans);pointer-events:none}
.cmp-tag--before{left:var(--s3)}
.cmp-tag--after{right:var(--s3)}
.cmp-range{position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none}
.cmp-stage:has(.cmp-range:focus-visible) .cmp-knob{outline:3px solid var(--accent);outline-offset:3px}
.cmp>figcaption{margin-top:var(--s2);font-size:var(--t1);line-height:1.55;color:var(--muted)}
.wide>.cmp{max-width:720px;margin-inline:auto}

/* 33c. LABELLED ZONE FIGURE (ZEISS interactive image): a photo with dots; each dot carries a label card that opens to
   one line. Native <details> (works without JS, one open at a time); positions on a registered 5% grid. */
.zones{margin:0}
.zones-stage{position:relative}
.zones-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-photo)}
.zone{position:absolute;z-index:1;margin:-24px 0 0 32px;background:#fff;box-shadow:8px 11px 35px rgba(25,25,25,.24);border-radius:var(--r-sm);min-width:150px;max-width:min(300px,62vw)}
.zone--left{margin:-24px 32px 0 0}
.zone[open]{z-index:3;width:min(300px,62vw)}
.zone>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--s3);padding:12px 16px}
.zone>summary::-webkit-details-marker{display:none}
.zone>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
.zone-dot{position:absolute;top:14px;left:-42px;width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(22,101,75,.35)}
.zone--left .zone-dot{left:auto;right:-42px}
.zone-label{display:flex;flex-direction:column;gap:2px}
.zone-kicker{font-size:var(--t1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.zone-title{font-size:var(--t1);font-weight:600;color:var(--ink);line-height:1.35}
.zone-x{display:none;position:relative;flex:0 0 14px;width:14px;height:14px;margin-left:auto;margin-top:2px}
.zone[open] .zone-x{display:block}
.zone-x::before,.zone-x::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--ink);transform:rotate(45deg)}
.zone-x::after{transform:rotate(-45deg)}
.zone-body{padding:0 16px 16px}
.zone-body p{font-size:var(--t1);line-height:1.5;color:var(--body)}
.zones>figcaption{margin-top:var(--s2);font-size:var(--t1);line-height:1.55;color:var(--muted)}
@media (max-width:699px){
  /* phones: dots only until tapped, as on zeiss.com */
  /* closed: a zero-size anchor at the zone's point; the 44px tap target and its dot are centred on it */
  .zone:not([open]){margin:0;width:0;height:0;min-width:0;background:none;box-shadow:none}
  .zone:not([open]) .zone-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .zone:not([open])>summary{position:absolute;left:-22px;top:-22px;width:44px;height:44px;padding:0;margin:0}
  .zone:not([open]) .zone-dot{top:12px;left:12px;right:auto}
  /* an open card drops below the photo, full width, so it never runs off a narrow screen */
  .zone[open]{position:static;margin:var(--s3) 0 0;width:auto;max-width:none}
  .zone[open] .zone-dot{display:none}
}
.zone[data-x="0"]{left:0%}.zone--left[data-x="0"]{left:auto;right:100%}
.zone[data-x="5"]{left:5%}.zone--left[data-x="5"]{left:auto;right:95%}
.zone[data-x="10"]{left:10%}.zone--left[data-x="10"]{left:auto;right:90%}
.zone[data-x="15"]{left:15%}.zone--left[data-x="15"]{left:auto;right:85%}
.zone[data-x="20"]{left:20%}.zone--left[data-x="20"]{left:auto;right:80%}
.zone[data-x="25"]{left:25%}.zone--left[data-x="25"]{left:auto;right:75%}
.zone[data-x="30"]{left:30%}.zone--left[data-x="30"]{left:auto;right:70%}
.zone[data-x="35"]{left:35%}.zone--left[data-x="35"]{left:auto;right:65%}
.zone[data-x="40"]{left:40%}.zone--left[data-x="40"]{left:auto;right:60%}
.zone[data-x="45"]{left:45%}.zone--left[data-x="45"]{left:auto;right:55%}
.zone[data-x="50"]{left:50%}.zone--left[data-x="50"]{left:auto;right:50%}
.zone[data-x="55"]{left:55%}.zone--left[data-x="55"]{left:auto;right:45%}
.zone[data-x="60"]{left:60%}.zone--left[data-x="60"]{left:auto;right:40%}
.zone[data-x="65"]{left:65%}.zone--left[data-x="65"]{left:auto;right:35%}
.zone[data-x="70"]{left:70%}.zone--left[data-x="70"]{left:auto;right:30%}
.zone[data-x="75"]{left:75%}.zone--left[data-x="75"]{left:auto;right:25%}
.zone[data-x="80"]{left:80%}.zone--left[data-x="80"]{left:auto;right:20%}
.zone[data-x="85"]{left:85%}.zone--left[data-x="85"]{left:auto;right:15%}
.zone[data-x="90"]{left:90%}.zone--left[data-x="90"]{left:auto;right:10%}
.zone[data-x="95"]{left:95%}.zone--left[data-x="95"]{left:auto;right:5%}
.zone[data-x="100"]{left:100%}.zone--left[data-x="100"]{left:auto;right:0%}
.zone[data-y="0"]{top:0%}
.zone[data-y="5"]{top:5%}
.zone[data-y="10"]{top:10%}
.zone[data-y="15"]{top:15%}
.zone[data-y="20"]{top:20%}
.zone[data-y="25"]{top:25%}
.zone[data-y="30"]{top:30%}
.zone[data-y="35"]{top:35%}
.zone[data-y="40"]{top:40%}
.zone[data-y="45"]{top:45%}
.zone[data-y="50"]{top:50%}
.zone[data-y="55"]{top:55%}
.zone[data-y="60"]{top:60%}
.zone[data-y="65"]{top:65%}
.zone[data-y="70"]{top:70%}
.zone[data-y="75"]{top:75%}
.zone[data-y="80"]{top:80%}
.zone[data-y="85"]{top:85%}
.zone[data-y="90"]{top:90%}
.zone[data-y="95"]{top:95%}
.zone[data-y="100"]{top:100%}

/* 33d. RESULTS SCROLLER (ZEISS key figures): big figures in a row that scrolls sideways (snap) when there are more than
   fit, a pager and arrows; every figure carries its citation line (sitegen refuses a figure without a source). */
.results{text-align:center}   /* a row of big figures is centred on the axis (centred style, 28 Oct) */
.results-title{font-family:var(--sans);font-size:var(--t3);font-weight:600;line-height:1.3;color:var(--ink);margin-bottom:var(--s5)}
.results-title:has(+.results-sub){margin-bottom:var(--s1)}
.results-sub{font-size:var(--t1);color:var(--muted);margin-bottom:var(--s5)}
.results-view{position:relative}
.results-track{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.results-track::-webkit-scrollbar{display:none}
.results-track:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:var(--r-sm)}
.result{scroll-snap-align:start;padding-inline:var(--s4);min-width:0}
.result-num{font-family:var(--serif);font-size:var(--t6);line-height:1.1;color:var(--accent);font-variant-numeric:lining-nums}
.result-text{margin-top:var(--s3);font-size:var(--t2);line-height:1.5;color:var(--body)}
.result-cite{margin-top:var(--s2);font-size:var(--t1);line-height:1.5;color:var(--muted)}
.result-cite a{color:var(--muted)}
.result-pending{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--tint);color:var(--deep);font-weight:600}
.bg-tint .result-pending{background:var(--paper)}
.results [hidden]{display:none!important}
.results-pager{display:flex;justify-content:center;gap:4px;margin-top:var(--s5)}
.results-pager>span{width:72px;height:3px;border-radius:2px;background:var(--line)}
.results-pager>span.on{background:var(--ink)}
.results-go{position:absolute;top:calc(var(--t6) * .55);width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;box-shadow:0 2px 10px rgba(18,59,49,.12)}
.results-go::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;margin:-5px 0 0 -3px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
.results-go--prev{left:-6px}
.results-go--next{right:-6px}
.results-go--next::before{margin-left:-7px;transform:rotate(-135deg)}
.results-go:disabled{opacity:.35;cursor:default}
.results-go:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (min-width:700px){.results-track{grid-auto-columns:calc((100% - var(--s5)) / 2)}}
@media (min-width:1024px){.results-track{grid-auto-columns:calc((100% - 2 * var(--s5)) / 3)}.results-go--prev{left:-22px}.results-go--next{right:-22px}}
.wide>.results+*,.wide>*+.results{margin-top:var(--s6)}
.wide>:is(h3,h4,.small,.eyebrow)+.results{margin-top:var(--s4)}

/* 33e. PRODUCT FAMILY CARDS (ZEISS feature-abstract): name first, then the lens picture, then what it does; hairline
   frame, generous padding, equal height across the row. */
.cards--family .card{padding:40px 32px}
.cards--family .card>.sub{font-size:var(--t3)}
.cards--family .card-img--family{margin:0;border-radius:var(--r-photo);overflow:hidden;background:#fff;border:1px solid var(--line)}
.cards--family .card-img--family img{width:100%;aspect-ratio:1/1;object-fit:contain}
@media (max-width:699px){.cards--family .card{padding:var(--s5) var(--s4)}}

/* 33f. FAQ, full width (ZEISS accordion): the list spans the wide axis, a 2px ink rule above and below, hairlines between,
   a chevron at the right, the open question on a tint, the answer opening smoothly (height animates where supported). */
.faq-full .faq-item{padding:0;border-top:1px solid var(--line)}
.faq-full .faq-item:first-child{border-top:0}
.faq-full .faq-item:last-child{border-bottom:0}
.faq-full .faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:28px var(--s3);transition:background-color .4s}
.faq-full .faq-item>summary::-webkit-details-marker{display:none}
.faq-full .faq-item>summary>.q{font-family:var(--sans);font-size:var(--t2);font-weight:600;line-height:1.4;color:var(--ink)}
.faq-full .faq-item>summary:hover>.q{color:var(--accent)}
.faq-full .faq-item[open]>summary{background:var(--tint)}
.bg-tint .faq-full .faq-item[open]>summary{background:var(--paper)}
.chev{position:relative;flex:0 0 12px;width:12px;height:12px;margin-right:4px}
.chev::before{content:"";position:absolute;inset:0;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .35s cubic-bezier(.165,.84,.44,1)}
.faq-full .faq-item[open] .chev::before{transform:translateY(3px) rotate(-135deg)}
.faq-full .faq-item>.a{padding:var(--s4) var(--s3) var(--s5)}
.faq-full .a-in{max-width:var(--measure)}
.faq-full .faq-item::details-content{block-size:0;overflow:clip;transition:block-size .4s cubic-bezier(.165,.84,.44,1),content-visibility .4s allow-discrete}
.faq-full .faq-item[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){.faq-full .faq-item::details-content,.faq-full .faq-item>summary,.chev::before{transition:none}}
@media (max-width:699px){.faq-full .faq-item>summary{padding:var(--s4) var(--s2)}.faq-full .faq-item>.a{padding:var(--s3) var(--s2) var(--s4)}}
/* a price figure inside a card of an aligned row stays on the row's line when a neighbour's caption wraps (critic, ZEISS round) */
.card .stats{align-content:start}

/* ---------- 34. STATE STAGE + BLUR SLIDER (24 Oct 2026; Fable visual strategy + Codex stage contract, Mark's go) ----------
   34a. The state stage: the centerpiece the VISITOR drives. Numbered buttons under the drawing (real buttons,
   aria-pressed, arrow keys), one explanation at a time; the drawing's layers marked data-st="N" stay at full strength for
   state N and fall back for the others. Nothing advances on its own: one short ambient idle (data-idle="N": three soft
   breaths, under 5 seconds) on each state change, only when the visitor allows motion. Without the script (or with
   reduced motion, at first) the drawing shows every layer and every explanation is listed: the complete still. */
.stage--states .stage-fig{max-width:none}   /* full stage width, legible (Mark 29 Oct hub note 2.3: restore the SightTrack stage, legible and full width) */
.stage--states .stage-fig [data-st]{transition:opacity .45s ease}
.stage--states[data-on="1"] .stage-fig [data-st]:not([data-st~="1"]),
.stage--states[data-on="2"] .stage-fig [data-st]:not([data-st~="2"]),
.stage--states[data-on="3"] .stage-fig [data-st]:not([data-st~="3"]),
.stage--states[data-on="4"] .stage-fig [data-st]:not([data-st~="4"]){opacity:.16}
.stage-ctl{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--s2);max-width:760px;margin:var(--s5) auto 0}
.stage-ctl[data-n="2"]{--n:2}.stage-ctl[data-n="4"]{--n:4}
.stage-ctl[hidden]{display:none}
.stage-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:600 var(--t2)/1.25 var(--sans);text-align:center;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.stage-btn .stage-n{margin:0;background:var(--tint);color:var(--deep);flex:0 0 auto}
.stage-btn:hover{border-color:var(--accent)}
.stage-btn[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.stage-btn[aria-pressed="true"] .stage-n{background:#fff;color:var(--deep)}
.stage-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.stage-panels{list-style:none;padding:0;margin:var(--s5) auto 0;display:grid;gap:var(--s4);max-width:var(--measure)}
.stage-panel p{font-size:var(--t2);line-height:1.55}
.stage-ptitle{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);font:600 var(--t3)/1.3 var(--sans);color:var(--ink)}
.stage-ptitle .stage-n{margin:0;flex:0 0 auto}
@media (min-width:700px){
  .stage-btn{flex-direction:row;gap:10px;padding:12px 16px}
  .stage-panels{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .stage-panels[data-n="2"]{--n:2}.stage-panels[data-n="4"]{--n:4}
}
/* live, one state picked: its explanation alone, in a short reading column under the buttons; the pressed button is its
   title, so the title stays in the page for screen readers and search but is not shown twice */
.stage--states.is-live:not([data-on="0"]) .stage-panels{display:block;max-width:40rem;min-height:calc(var(--t2) * 1.55 * 3)}
.stage--states.is-live:not([data-on="0"]) .stage-panel{display:none}
.stage--states.is-live[data-on="1"] .stage-panel[data-n="1"],
.stage--states.is-live[data-on="2"] .stage-panel[data-n="2"],
.stage--states.is-live[data-on="3"] .stage-panel[data-n="3"],
.stage--states.is-live[data-on="4"] .stage-panel[data-n="4"]{display:block}
.stage--states.is-live:not([data-on="0"]) .stage-ptitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (prefers-reduced-motion:no-preference){
  .stage--states.is-live[data-on="1"] [data-idle="1"],
  .stage--states.is-live[data-on="2"] [data-idle="2"],
  .stage--states.is-live[data-on="3"] [data-idle="3"],
  .stage--states.is-live[data-on="4"] [data-idle="4"]{animation:stage-idle 1.5s ease-in-out 3}
}
@media (prefers-reduced-motion:reduce){.stage--states .stage-fig [data-st],.stage-btn{transition:none}}
/* phones: the buttons are a short list (number, then the scene name on one line), never three squeezed columns */
@media (max-width:519px){.stage-ctl{grid-template-columns:1fr;max-width:none}.stage-btn{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 16px;text-align:left}}
@keyframes stage-idle{50%{opacity:.35}}
.stage--states+.stage-notes .small{max-width:46rem}

/* 34b. BLUR SLIDER ("what your child sees"): condition education only. One photo, blurred by the prescription the
   visitor drags, on the shared compare knob (48px white, accent ring, the same two chevrons) and the same 2px accent
   line. THE registered strength: 0.4% of the picture's width of blur per dioptre (an approximation, labelled so). */
.cmp--blur{--d:2}
.cmp--blur[data-d="0"]{--d:0}.cmp--blur[data-d="1"]{--d:1}.cmp--blur[data-d="3"]{--d:3}.cmp--blur[data-d="4"]{--d:4}.cmp--blur[data-d="5"]{--d:5}.cmp--blur[data-d="6"]{--d:6}
.cmp--blur .blur-stage{aspect-ratio:4/3;cursor:default;container-type:inline-size;background:var(--rule-warm)}
.cmp--blur .blur-img{height:100%;object-position:50% 40%;filter:blur(calc(var(--d) * .4cqi))}
.cmp--blur>figcaption{margin-top:var(--s3)}
.blur-out{font-variant-numeric:tabular-nums}
.blur-ctl{margin-top:var(--s3)}
.blur-title{margin-bottom:var(--s1);font:600 var(--t2)/1.3 var(--sans);color:var(--ink);text-align:center}
.blur-range{display:block;width:100%;height:48px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.blur-range[hidden]{display:none}
.blur-range:focus{outline:none}
.blur-range::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:var(--accent)}
.blur-range::-moz-range-track{height:2px;border-radius:1px;background:var(--accent)}
.blur-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:48px;height:48px;margin-top:-23px;border-radius:50%;border:2px solid var(--accent);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%2316654b' stroke-width='2'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 2px 10px rgba(18,59,49,.18)}
.blur-range::-moz-range-thumb{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%2316654b' stroke-width='2'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 2px 10px rgba(18,59,49,.18)}
.blur-range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--accent);outline-offset:3px}
.blur-range:focus-visible::-moz-range-thumb{outline:3px solid var(--accent);outline-offset:3px}
.blur-scale{list-style:none;padding:0;margin:0;display:flex;justify-content:space-between;font-size:var(--t1);line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.blur-scale>li{width:48px;text-align:center}
.cmp--blur:not(.is-live) .blur-scale{display:none}
@media (max-width:699px){.tv-visual .blur-ctl{padding-inline:var(--gutter)}}
/* 34c. the blur slider on Mark's own phoropter footage (31 Oct 2026): the lens does the blurring, so no CSS blur; the
   clip sits over the still; the dioptre chips are buttons (tap a stop) */
.cmp--blur-video .blur-img{filter:none}
.cmp--blur-video .blur-stage{position:relative;overflow:hidden;aspect-ratio:1/1}   /* Mark 2 Nov hub note 4: the footage is cropped tight on the letter chart (square, the tilted mirror cut out); shown whole */
.cmp--blur-video .blur-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity .2s}
.cmp--blur-video.has-video .blur-vid{opacity:1}
.cmp--blur-video .cmp-tag{z-index:1}
.blur-chips>li{width:auto}
.blur-chip{min-width:44px;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:999px}
.blur-chip:hover{color:var(--deep)}
.blur-chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.loop-pause{position:absolute;right:12px;bottom:12px;z-index:2;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(16,32,27,.72);color:#fff;font:600 var(--t1)/1 var(--sans);cursor:pointer}
.loop-pause:focus-visible{outline:3px solid #fff;outline-offset:2px}
.loop-replay{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(16,32,27,.55);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s,transform .2s}   /* replay (Mark 2 Nov 2026): small, round, quiet */
.loop-replay[hidden]{display:none}
.loop-replay:hover{background:rgba(16,32,27,.75)}
.loop-replay:active{transform:scale(.94)}
.loop-replay:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- 35. Mark's 24 Oct preview notes (one batch; taste L41-L44) ----------
   L42 a reading column on desktop is not noticeably narrower than the grids it sits with: 50rem from 1280px (gate NARROW)
   L43 a visual beside text never dominates it: the visual half holds a picture at most 460px wide, centred (gate IMGBAL)
   references use the wide axis in two columns (no tall narrow list) */
@media (min-width:1024px){
  .s--feature .tv-visual{justify-self:start;width:100%;max-width:460px}
  .s--feature .tv--visual-right .tv-visual{justify-self:end}   /* the visual meets the container edge on its side (root fix 28 Oct 2026) */
  .end .refs{max-width:none}
  .end .refs ol{columns:2;column-gap:var(--s6)}
  .end .refs ol li{break-inside:avoid}
}
/* L44 (Mark 24 Oct): a text + photo section breathes: about 10% more height on desktop ("We're not a chain") */
@media (min-width:1024px){.s--split{padding-block:calc(var(--section) + var(--s5))}}
/* (24 Oct critic) a related row with ONE card sits on the section's centre axis, one card wide (not flush left) */
.related.related--1{max-width:560px;grid-template-columns:minmax(0,1fr)}
/* (24 Oct critic) the "Serving ..." line under the two-column references runs on the same wide axis */
/* (24 Oct) a static review grid of two sits as two centred columns, not two of three (IPL sat to the left) */
@media (min-width:700px){.reviews:not(.is-moving) .rv-track:has(>.rvw:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,360px))}}

/* ---------- 36. the clinic template (25 Oct 2026): Fable's blank-sheet treatment page ----------
   Approved by Mark 24 Oct ("this is the way to go"). Canvas https://claude.ai/artifact/VYV2acYk3LiHWPYfhzdVjz;
   rationale brain repo page-factory/site-build/reset/BLANK-SHEET-RATIONALE-2026-10-24.md. Everything here is scoped to
   main.site--clinic, so no page on another template changes. One type scale (six steps, redefined for this template),
   Source Serif 4 for display (scoped here; site-wide adoption is a separate decision), the site palette plus one job
   colour (amber, light in diagrams only), a 1180px content axis, white / warm bands, deep hero and CTA bands. */
.site--clinic{
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --t1:14px; --t2:18px; --t3:20px; --t4:30px; --t5:40px; --t6:40px;
  --warm:#faf8f4; --rule-warm:#e6e2d8; --amber:#d9962e;
}
@media (min-width:1024px){.site--clinic{--t1:15px; --t2:19px; --t3:22px; --t4:38px; --t5:60px; --t6:48px}}
.site--clinic .title,.site--clinic .htitle{font-weight:500;letter-spacing:-.01em}
.site--clinic .s.bg-tint{background:var(--warm)}
.site--clinic .s.bg-deep{background:var(--deep);color:#e9f1ec}
.site--clinic .s.bg-deep :is(.title,.cl-h3,.cl-t){color:#fff}
.site--clinic .kicker{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.site .cl-h3{font-family:var(--serif);font-size:var(--t3);font-weight:600;line-height:1.3;color:var(--ink)}
.site--clinic .cl-h4{font-family:var(--sans);font-size:var(--t2);font-weight:600;line-height:1.35;color:var(--ink)}
.site--clinic .cl-t{font-weight:600;color:var(--ink)}
.site .cl-cap{font-size:var(--t1);line-height:1.5;color:var(--muted)}
.site .cl-cap--centre{max-width:var(--measure);margin-top:var(--s4);text-align:center}
.site--clinic .cl-num{font-family:var(--serif);font-size:var(--t6);line-height:1;color:var(--deep);font-weight:500}
.site--clinic .cl-wide{width:100%}
.site--clinic .c>*+*{margin-top:var(--s6)}
.site--clinic .c>.head+*{margin-top:var(--s6)}
.site--clinic .cl-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.site--clinic .cl-card--tint{background:var(--tint);border-color:transparent}
.site--clinic .bg-tint .cl-card--tint{background:var(--tint)}
.site--clinic .cl-pic{width:100%;border-radius:var(--r-photo);object-fit:cover}
/* a product render (PNG) beside text never towers over it (L43): at most 460px tall */
@media (min-width:960px){.site--clinic .cl-two img.cl-pic[data-orient~="drawing"],.site--clinic .cl-two .fig img[data-orient~="drawing"]{max-height:460px;width:auto;max-width:100%}}

/* hero: deep green, the copy left, one visual right */
.site--clinic .hero--deep{background:radial-gradient(1200px 600px at 20% -10%,#1f5a47 0%,#123b31 55%,#0f2f28 100%);color:#e9f1ec;padding-block:var(--s7) var(--s7)}
.site--clinic .hero--deep :is(.htitle,.cl-t){color:#fff}
.site--clinic .hero--deep .htitle em{color:var(--pale)}
.site--clinic .hero--deep .eyebrow{color:var(--pale)}
.site--clinic .hero--deep .lead{color:#d6e5dc}
.site--clinic .hero--deep .btn{background:#fff;color:var(--deep)!important}
.site--clinic .hero--deep .btn:hover{background:var(--tint)}
.site--clinic .hero--deep .call{color:#fff}
.site--clinic .hero--deep a:not(.btn){color:#e9f1ec}
.site--clinic .cl-crumbs{font-size:var(--t1);color:var(--pale)}
.site--clinic .cl-trust{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t1);color:#c9dcd2}
.site--clinic .cl-trust strong{color:#fff}
.site--clinic .cl-byline{margin-top:var(--s3);font-size:var(--t1);color:var(--pale)}
.site--clinic .cl-hero-media{display:flex;flex-direction:column}
.site--clinic .cl-hero-media .cl-ph{min-height:320px}
@media (min-width:1024px){.site--clinic .hero--deep .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}.site--clinic .hero--deep{padding-block:var(--s8)}}

/* the hero player: a drawn sequence over a still, captions in HTML; nothing moves until the visitor presses play */
.site--clinic .cl-play{margin:0}
.site--clinic .cl-play-stage{position:relative;border-radius:var(--r-photo);overflow:hidden;background:#fff;aspect-ratio:7/4}
.site--clinic .cl-play-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important;aspect-ratio:auto!important;filter:blur(10px);transform:scale(1.04);transition:filter 1.2s cubic-bezier(.25,1,.5,1)}
.site--clinic .cl-play-draw{position:absolute;inset:6% 4%;background:rgba(255,255,255,.93);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease}
.site--clinic .cl-play-draw svg{width:100%;height:100%;border-radius:0}
.site--clinic .cl-play [data-st]{transition:opacity .5s ease}
.site--clinic .cl-play.is-live [data-st]{opacity:0}
.site--clinic .cl-play.is-live[data-on="1"] [data-st~="1"],.site--clinic .cl-play.is-live[data-on="2"] [data-st~="2"],.site--clinic .cl-play.is-live[data-on="3"] [data-st~="3"],.site--clinic .cl-play.is-live[data-on="0"] [data-st~="0"]{opacity:1}
.site--clinic .cl-play.is-live[data-on="4"] .cl-play-draw{opacity:0}
.site--clinic .cl-play.is-live[data-on="4"] .cl-play-still,.site--clinic .cl-play.is-live[data-on="0"] .cl-play-still{filter:none}
.site--clinic .cl-play-bar{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.site--clinic .cl-play-go{align-self:flex-start;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:inherit;font-size:var(--t1);font-weight:600;cursor:pointer}
.site--clinic .cl-play-go:hover{border-color:#fff}
.site--clinic .cl-play-go:focus-visible{outline:3px solid var(--pale);outline-offset:2px}
.site--clinic .cl-play-steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2);font-size:var(--t1);color:#d6e5dc}
.site--clinic .cl-play-steps strong{color:#fff}
.site--clinic .cl-play.is-live:not([data-on="0"]) .cl-play-steps>li{display:none}
.site--clinic .cl-play.is-live[data-on="1"] .cl-play-steps>li[data-n="1"],.site--clinic .cl-play.is-live[data-on="2"] .cl-play-steps>li[data-n="2"],.site--clinic .cl-play.is-live[data-on="3"] .cl-play-steps>li[data-n="3"],.site--clinic .cl-play.is-live[data-on="4"] .cl-play-steps>li[data-n="4"]{display:block}
.site--clinic .cl-play figcaption{color:#c9dcd2;margin-top:var(--s2)}
@media (prefers-reduced-motion:reduce){.site--clinic .cl-play *{transition:none!important}}

/* placeholder slot for a photo still to come */
.site--clinic .cl-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);text-align:center;border:2px dashed #9fbfb0;border-radius:var(--r-photo);background:var(--tint);color:var(--muted);padding:var(--s4);aspect-ratio:4/3;width:100%}
.site--clinic .cl-ph--16x9{aspect-ratio:16/9}.site--clinic .cl-ph--3x2{aspect-ratio:3/2}.site--clinic .cl-ph--1x1{aspect-ratio:1}.site--clinic .cl-ph--4x5{aspect-ratio:4/5}
.site--clinic .cl-ph--dark{background:rgba(255,255,255,.07);border-color:rgba(159,212,189,.6);color:#c9dcd2}
.site--clinic .cl-ph-ico{width:72px;height:54px;flex:none}
.site--clinic .cl-ph-lab{font-size:var(--t1);line-height:1.45;max-width:30ch}
.site--clinic .cl-ph-lab::before{content:"Photo to come: ";font-weight:600}

/* the night-to-morning timeline: one continuous band, the moments joined by one line (Mark 25 Oct, item 22) */
.site--clinic .cl-beats{border-radius:var(--r-md);overflow:hidden;background:linear-gradient(90deg,#123b31 0%,#1f5a47 52%,#e9c98d 80%,#fbf1dc 100%);padding:var(--s5) var(--s4)}
.site--clinic .cl-beats-row{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);position:relative}
.site--clinic .cl-beats-row::before{content:"";position:absolute;left:14%;right:14%;top:23px;height:2px;background:linear-gradient(90deg,#f3d27a,#f3d27a 60%,#9a5b12)}
.site--clinic .cl-beat{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding-inline:var(--s3)}
.site--clinic .cl-beat-top{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.site--clinic .cl-beat-dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#123b31;border:2px solid #f3d27a}
.site--clinic .cl-beat--dusk .cl-beat-dot{background:#1f5a47}
.site--clinic .cl-beat--morning .cl-beat-dot{background:#fbf1dc;border-color:#9a5b12}
.site--clinic .cl-beat-word{font-family:var(--serif);font-size:var(--t4);font-weight:500;line-height:1.1;color:#fff}
.site--clinic .cl-beat--morning .cl-beat-word{color:var(--ink)}
.site--clinic .cl-beat-pic{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:#24503f}
.site--clinic .cl-beat-pic>img,.site--clinic .cl-beat-pic>svg{width:100%;height:100%;object-fit:cover;border-radius:0}
.site--clinic .cl-beat-pic>.cl-ph{height:100%;aspect-ratio:auto;border-radius:var(--r-sm)}
.site--clinic .cl-beat-cap{color:#e9f1ec;text-align:center}
.site--clinic .cl-beat--morning .cl-beat-cap{color:#3a2a0c}
.site--clinic .cl-inset{position:absolute;right:10px;bottom:10px;width:46%;background:#fff;border-radius:var(--r-sm);padding:5px;box-shadow:0 6px 18px rgba(0,0,0,.2);display:grid;gap:3px}
.site--clinic .cl-inset-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
.site--clinic .cl-inset-lab{font-size:var(--t1);font-weight:600;color:#3a2a0c;text-align:center;line-height:1.2}
.site--clinic .is-blur{filter:blur(2.5px)}
/* Mark 25 Oct evening, item 5: the 'before' must read as the same board, soft but recognisable */
.site--clinic .cl-inset-img.is-blur{filter:blur(1.1px);object-position:30% 30%}
@media (min-width:900px){.site--clinic .cl-beats-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){.site--clinic .cl-beats{background:linear-gradient(180deg,#123b31 0%,#1f5a47 55%,#e9c98d 82%,#fbf1dc 100%)}
  .site--clinic .cl-beats-row::before{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto;background:linear-gradient(180deg,#f3d27a,#f3d27a 60%,#9a5b12)}
  .site--clinic .cl-beat{padding-left:64px;padding-inline-end:0}.site--clinic .cl-beat-top{flex-direction:row;text-align:left;margin-left:-64px;gap:var(--s3)}
  .site--clinic .cl-beat-cap{text-align:left}}

/* one eye, three rows */
.site--clinic .cl-eyerows{display:grid;gap:var(--s5)}
.site--clinic .cl-eyerow{display:grid;gap:var(--s5);align-items:center;padding:var(--s5);border-radius:var(--r-md);border:1px solid var(--rule-warm);background:#fff}
.site--clinic .cl-eyerow--night{background:var(--tint);border-color:#cfe3d8}
.site--clinic .cl-eyerow--morning{background:var(--warm);border-color:var(--rule-warm)}
.site--clinic .cl-eyerow-fig svg{width:100%;height:auto}
.site--clinic .cl-eyerow-view{display:grid;gap:var(--s2);align-content:start}
.site--clinic .cl-eyerow-text{color:var(--ink)}
.site--clinic .cl-view{width:100%;aspect-ratio:1344/768;object-fit:cover;border-radius:var(--r-sm);margin-top:var(--s2)}
@media (min-width:860px){.site--clinic .cl-eyerow{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}

/* sourced figure tiles */
.site--clinic .cl-tiles{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.site--clinic .cl-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.site--clinic .cl-src{margin-top:auto;padding-top:var(--s3);border-top:1px solid #e6ebe7;font-size:var(--t1);line-height:1.4;color:var(--muted)}

/* two columns: text beside a visual */
.site--clinic .cl-two{display:grid;gap:var(--s6);align-items:start}
.site--clinic .cl-two--start{align-items:start}
@media (min-width:960px){.site--clinic .cl-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6) var(--s7)}
  .site--clinic .cl-two--left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .site--clinic .cl-two--right{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.site--clinic .cl-two .head .title{max-width:none}
/* a labelled clinical image or a product on white (image field whole: true) beside text: it takes the text's height and
   is shown whole, never cropped (root fix 28 Oct 2026: rows start AND end together, L6/L7) */
@media (min-width:960px){
  .site--clinic .cl-two:has(img[data-orient~="whole"]){align-items:stretch}
  .site--clinic .cl-two-b:has(>.fig img[data-orient~="whole"]){display:flex;flex-direction:column}
  .site--clinic .cl-two-b>.fig:has(img[data-orient~="whole"]){flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0}
  .site--clinic .cl-two-b>.fig img[data-orient~="whole"]{flex:1 1 0;height:0;min-height:320px;max-height:none;width:100%;object-fit:contain;aspect-ratio:auto!important;object-position:100% 0}}
.site--clinic .cl-rows{display:grid}
.site--clinic .cl-rows>div{padding:var(--s4) 0;border-top:1px solid var(--line)}
.site--clinic .cl-urgent{background:var(--deep);color:#fff;border-radius:var(--r-md);padding:var(--s5)}
.site--clinic .cl-urgent .cl-t{color:#fff}
.site--clinic .cl-urgent p+p{margin-top:var(--s2)}

/* reasons (who it is not for) */
.site--clinic .cl-reasons>*+*{margin-top:var(--s3)}
.site--clinic .cl-reasons-grid{display:grid;gap:0 var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));margin-top:var(--s4)!important}
.site--clinic .cl-reasons-grid>div{padding:var(--s4) 0;border-top:1px solid var(--line);display:grid;gap:var(--s1);align-content:start}
.site--clinic .cl-reasons-foot{padding-top:var(--s4);border-top:1px solid var(--line)}

/* the rebuilt expander: sub-heads, bullets, figures and fact panels to the right of the text */
.site--clinic .details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s4) 0}
.site--clinic .details+.details{border-top:0}
.site--clinic .details>summary{cursor:pointer;list-style:none;display:block;position:relative;padding-right:56px;min-height:44px;line-height:1.45;font-weight:600;font-size:var(--t2);color:var(--deep)}
.site--clinic .details>summary::-webkit-details-marker{display:none}
.site--clinic .details>summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:26px;line-height:1;color:var(--accent)}
.site--clinic .details[open]>summary::after{content:"\2013"}
.site--clinic .details>.flow{padding-top:var(--s5);display:grid;gap:var(--s6)}
.site--clinic .details>.flow>*+*{margin-top:0}
.site--clinic .details>.flow>:is(p,ul,ol,h3,h4){max-width:50rem}
.site--clinic .cl-xrow{display:grid;gap:var(--s5) 56px;align-items:start}
@media (min-width:900px){.site--clinic .cl-xrow--side{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.site--clinic .cl-xrow .flow ul,.site--clinic .cl-xcard ul{padding-left:1.3em}
.site--clinic .cl-xrow .flow li+li,.site--clinic .cl-xcard li+li{margin-top:var(--s2)}
.site--clinic .cl-xcards{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.site--clinic .cl-xcard{padding:var(--s4) var(--s5)}
.site--clinic .cl-xcards>.cl-xcard>.kicker{font-family:var(--font-display,var(--sans));font-size:var(--t3);font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}   /* V50 (Mark 1 Nov 2026, O11) */
.site--clinic .cl-facts{margin:0;display:grid;border-top:1px solid var(--line)}
.site--clinic .cl-facts>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);align-items:baseline}
.site--clinic .cl-facts dt{font-family:var(--serif);font-size:var(--t3);font-weight:600;color:var(--deep);line-height:1.1}
.site--clinic .cl-facts dd{margin:0;font-size:var(--t1);line-height:1.5}
.site--clinic .cl-facts--long>div{grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s4) 0}
@media (min-width:768px){.site--clinic .cl-facts--long>div{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s5)}}
.site--clinic .cl-facts--long dt{font-size:var(--t2);line-height:1.35}
.site--clinic .cl-facts--long dd{font-size:var(--t2);line-height:1.6}
.site--clinic .cl-further-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin-top:var(--s3)}
.site--clinic .cl-link-card{display:flex;flex-direction:column;gap:var(--s1);text-decoration:none!important;padding:var(--s4)}
.site--clinic .cl-link-card:hover{border-color:var(--accent)}
.site--clinic .cl-link-text{color:var(--muted);font-size:var(--t1);line-height:1.5}

/* visit calendar strip: unnumbered, scrolls sideways */
.site--clinic .cl-cal{list-style:none;margin:0;padding:4px 4px var(--s3);display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory}
.site--clinic .cl-cal-v{flex:0 0 250px;scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4)}
/* the visit timeline (Mark 28 Oct 2026, ortho-K 3.6: "too many boxes"; a simple numbered timeline) ----------
   No card per visit: a number on a hairline, the moment, the visit and one line. Phones keep the sideways scroll. */
.site--clinic .cl-cal{counter-reset:calstep}
.site--clinic .cl-cal>.cl-cal-v{counter-increment:calstep;background:none;border:0;border-radius:0;box-shadow:none;padding:var(--s4) var(--s3) 0 0;border-top:2px solid var(--line);position:relative}
.site--clinic .cl-cal>.cl-cal-v::before{content:counter(calstep);position:absolute;top:-17px;left:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font:700 var(--t1)/32px var(--font-text,inherit);text-align:center}
.site--clinic .cl-cal>.cl-cal-v>.cl-when{margin-top:var(--s3)}
.site--clinic .cl-cal{padding-top:20px}
@media (min-width:1024px){.site--clinic .cl-cal{row-gap:var(--s7);column-gap:var(--s5)}}
/* phones and tablets: the timeline reads top to bottom (no hidden sideways scroll that clipped "Builds on improvem...", critic 28 Oct) */
@media (max-width:1023px){.site--clinic .cl-cal{display:grid;grid-template-columns:1fr;row-gap:var(--s6);overflow:visible;scroll-snap-type:none;padding-inline:0}.site--clinic .cl-cal>.cl-cal-v{flex:none}}
@media (min-width:700px) and (max-width:1023px){.site--clinic .cl-cal{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}}
/* phones: a row of three figures with long captions stacks, left-set (critic 28 Oct, progressive-lenses s01) */
@media (max-width:699px){main.site .stats[data-n="3"]:not(:has(.stat--long)){--n:1;text-align:left;row-gap:var(--s4)}}
@media (max-width:699px){main.site .stats[data-n="3"]:not(:has(.stat--long))>.stat{row-gap:0}}   /* Mark 7 Nov 2026 note 10 (colour-vision hero, three stats on a phone): each label sits under its figure, the stack gap is between stats only */
.site--clinic .cl-when{font-size:var(--t1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);line-height:1.4}

/* price cards (the shared price macro, restyled) */
.site--clinic .cl-prices .price{border-radius:var(--r-md)}
.site--clinic .cl-prices .price .amount{font-size:var(--t6)}

/* card grid */
.site--clinic .cl-grid{display:grid;gap:var(--s5)}
.site--clinic .cl-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.site--clinic .cl-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.site--clinic .cl-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.site--clinic .cl-grid--5{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.site--clinic .cl-gcard{display:flex;flex-direction:column;gap:var(--s3)}
.site--clinic .cl-gcard .flow>*+*{margin-top:var(--s3)}
.site--clinic .cl-card--link{text-decoration:none!important;color:inherit}
.site--clinic .cl-card--link:hover{border-color:var(--accent)}
.site--clinic .cl-gcard-pic{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:var(--tint);border:1px solid var(--line)}
.site--clinic .cl-gcard-pic>img,.site--clinic .cl-gcard-pic>svg{width:100%;height:100%;object-fit:cover;border-radius:0}
.site--clinic .cl-gcard-pic>.cl-ph{height:100%;aspect-ratio:auto}
.site--clinic .cl-gcard--split{display:grid}
.site--clinic .cl-meter{display:flex;gap:var(--s3);align-items:center;padding-top:var(--s3);margin-top:auto;border-top:1px solid #e6ebe7;font-size:var(--t1);color:var(--muted);line-height:1.4}
.site--clinic .cl-meter-bars{display:inline-flex;gap:3px;align-items:flex-end;flex:none}
.site--clinic .cl-meter-bars i{display:block;width:7px;border-radius:2px;background:var(--line)}
.site--clinic .cl-meter-bars i:nth-child(1){height:8px}.site--clinic .cl-meter-bars i:nth-child(2){height:13px}.site--clinic .cl-meter-bars i:nth-child(3){height:18px}
.site--clinic .cl-meter--strong i,.site--clinic .cl-meter--moderate i:nth-child(-n+2){background:var(--green)}
.site--clinic .cl-meter--early i:nth-child(1){background:var(--amber)}

/* Measure, Match, Track, Adjust: one line joins the steps (Mark 25 Oct, item 27) */
.site--clinic .cl-seq{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);position:relative}
.site--clinic .cl-seq>li{position:relative;display:grid;gap:var(--s1);padding-left:64px}
.site--clinic .cl-seq::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--pale)}
.site--clinic .cl-seq-dot{position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--t2)}
.site--clinic .cl-seq .cl-t{font-family:var(--serif);font-size:var(--t3)}
@media (min-width:900px){.site--clinic .cl-seq{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s5)}
  .site--clinic .cl-seq[data-n="3"]{--n:3}.site--clinic .cl-seq[data-n="5"]{--n:5}
  .site--clinic .cl-seq::before{left:calc(100% / var(--n,4) / 2);right:calc(100% / var(--n,4) / 2);top:23px;bottom:auto;width:auto;height:2px}
  .site--clinic .cl-seq>li{padding-left:0;padding-top:64px;text-align:center;justify-items:center}
  .site--clinic .cl-seq-dot{top:0;left:calc(50% - 24px)}}   /* Mark 2 Nov 2026 O10 + L50: number above the heading, item text centred */

/* the school-day handle */
.site--clinic .cl-day{display:flex;flex-direction:column;gap:var(--s3)}
.site--clinic .cl-day-tracks{display:grid;gap:var(--s2);margin-top:var(--s2)}
.site--clinic .cl-day-track{position:relative;height:40px;border-radius:var(--r-sm);background:var(--pale);overflow:hidden}
.site--clinic .cl-day-svg{position:absolute;inset:0;width:100%;height:100%}
.site--clinic .cl-day-off{fill:#e5dccb}
.site--clinic .cl-day-in{position:absolute;inset:0;display:flex;align-items:center;padding:0 14px;font-size:var(--t1);font-weight:600;color:var(--ink)}
.site--clinic .cl-day-now{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--deep);display:none}
.site--clinic .cl-day.is-live .cl-day-now{display:block}
.site--clinic .cl-day-ticks{list-style:none;margin:0;padding:0;position:relative;height:24px;font-size:var(--t1);font-weight:600;color:var(--muted)}
.site--clinic .cl-day-ticks>li{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;line-height:1.5}
.site--clinic .cl-day-ticks>li[data-at="0"]{transform:none}.site--clinic .cl-day-ticks>li[data-at="100"]{transform:translateX(-100%)}
.site--clinic .cl-day-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--t1);color:var(--muted)}
.site--clinic .cl-day-key i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px;background:var(--pale)}
.site--clinic .cl-day-key i.off{background:#e5dccb}
.site--clinic .cl-day-range{appearance:none;-webkit-appearance:none;width:100%;height:44px;background:transparent;margin:0}
.site--clinic .cl-day-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line)}
.site--clinic .cl-day-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;border-radius:50%;background:var(--deep);border:4px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.25);margin-top:-19px;cursor:grab}
.site--clinic .cl-day-range::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
.site--clinic .cl-day-range::-moz-range-thumb{width:44px;height:44px;border-radius:50%;background:var(--deep);border:4px solid #fff;cursor:grab}
.site--clinic .cl-day-range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--pale);outline-offset:2px}
.site--clinic .cl-day-moment{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.site--clinic .cl-day-moment>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);display:grid;gap:var(--s1);align-content:start}
.site--clinic .cl-day-moment>.cl-day-b-box{background:var(--tint);border-color:#cfe3d8}
.site--clinic .cl-day-list{margin:0;padding-left:1.2em;font-size:var(--t1);display:grid;gap:var(--s1)}
.site--clinic .cl-day-list .cl-day-ga,.site--clinic .cl-day-list .cl-day-gb{display:block}
.site--clinic .cl-day.is-live .cl-day-list{display:none}
.site--clinic .cl-day .flow ul{padding-left:1.2em}.site--clinic .cl-day .flow li+li{margin-top:var(--s2)}
.site--clinic .cl-day-ticks>li[data-at="5"]{left:5%}

/* the SightTrack report: clinical paper */
.site .cl-rep{background:#fff;border:1px solid #d9d4c9;border-radius:var(--r-sm);box-shadow:0 1px 0 #e9e5dc,0 28px 70px rgba(16,32,27,.13);overflow:hidden;font-size:var(--t1);color:var(--body)}
.site .cl-rep-head{background:var(--deep);color:#fff;padding:var(--s4) 36px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s4);align-items:center}
.site .cl-rep-mark{font-family:var(--serif);font-size:var(--t4);font-weight:600;line-height:1;color:#fff}
.site .cl-rep-mark span{color:var(--pale)}
.site .cl-rep-mark sup{font-size:.45em;color:#c9dcd2}
.site .cl-rep-sub{color:#c9dcd2;margin-top:var(--s2)}
.site .cl-rep-practice{text-align:right}
.site .cl-rep-name{font-family:var(--serif);font-size:var(--t3);font-weight:600;color:#fff}
.site .cl-rep-stamp{display:inline-block;margin-top:var(--s2);background:#f4e2bf;color:#5e3f07;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:4px}
.site .cl-rep-strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);align-items:center;padding:14px 36px;background:var(--warm);border-bottom:1px solid var(--rule-warm);color:var(--muted)}
.site .cl-rep-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--pale);background:var(--tint);color:var(--deep);font-weight:600;letter-spacing:.04em}
.site .cl-rep-pill i{width:10px;height:10px;border-radius:50%;background:var(--green)}
.site .cl-rep-body{display:grid;gap:var(--s5);padding:30px 36px}
@media (min-width:900px){.site .cl-rep-body{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.site .cl-rep-title{font-family:var(--serif);font-size:var(--t3);font-weight:600;color:var(--ink)}
.site .cl-rep-chart{border:1px solid var(--rule-warm);border-radius:var(--r-sm);padding:12px 12px 6px;margin-top:var(--s3)}
.site .cl-rep-chart svg{width:100%;height:auto}
.site .cl-rep-legend{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);color:var(--muted)}
.site .cl-rep-legend i{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.site .sw-child{background:var(--ink)}
.site .sw-fast{background:repeating-linear-gradient(90deg,#b3261e 0 5px,transparent 5px 8px);border:1px solid #b3261e}
.site .sw-typical{background:var(--tint);border:1px solid #cfe3d8}
.site .sw-above{background:#faf0dc;border:1px solid #efdcb6}
.site .sw-top{background:#f4e2bf}
.site .cl-rep-side{display:grid;gap:var(--s3);align-content:start}
.site .cl-rep-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.site .cl-rep-tile{border:1px solid var(--rule-warm);border-radius:var(--r-sm);padding:14px 16px;display:grid;gap:4px}
.site .cl-rep-tile .k{font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site .cl-rep-tile .v{font-family:var(--serif);font-size:var(--t3);line-height:1.15;color:var(--ink);font-weight:600}
.site .cl-rep-tile .n{color:var(--muted)}
.site .cl-rep-tile.ok{background:var(--tint);border-color:#cfe3d8}
/* Mark 25 Oct evening, item 11: the illustrative excessive-growth example reads red (chart data colour) */
.site .cl-rep-tile.bad{background:#fbeeec;border-color:#efc9c4}
.site .cl-rep-tile.bad .v{color:#b3261e}
.site .cl-rep-tile.bad .k{color:#8c1d17}
.site .cl-rep-note{border:1px solid var(--rule-warm);border-radius:var(--r-sm);padding:16px 18px;display:grid;gap:6px}
.site .cl-rep-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);padding:12px 36px;border-top:1px solid var(--rule-warm);background:var(--warm);color:var(--muted)}
@media (max-width:899px){.site .cl-rep-head,.site .cl-rep-strip,.site .cl-rep-foot,.site .cl-rep-body{padding-left:20px;padding-right:20px}.site .cl-rep-practice{text-align:left}}

/* team */
.site--clinic .cl-team .cl-two-a>*+*{margin-top:var(--s4)}
.site--clinic .cl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s5)}
@media (max-width:499px){.site--clinic .cl-stats{grid-template-columns:1fr}}
.site--clinic .cl-stats p{display:grid;gap:var(--s1)}
.site--clinic .cl-stat-lab{font-size:var(--t1);color:var(--muted);line-height:1.35}
.site--clinic .cl-team-photo{margin:0;justify-self:center;width:100%;max-width:440px}
.site--clinic .cl-team-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--r-photo)}
.site--clinic .cl-people{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.site--clinic .cl-person{padding:0;overflow:hidden}
.site--clinic .cl-person>img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%}
.site--clinic .cl-person-in{padding:var(--s4) var(--s4) var(--s5);display:grid;gap:var(--s1)}
.site--clinic .cl-more,.site--clinic .cl-center{text-align:center}

/* W42: the resources grid beside a real photo */
.site--clinic .cl-topics{display:grid;gap:var(--s5);align-items:stretch}
.site--clinic .cl-topics-photo{margin:0;border-radius:var(--r-md);overflow:hidden;min-height:280px}
.site--clinic .cl-topics-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
.site--clinic .cl-topics-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.site--clinic .cl-topic{position:relative;display:flex;flex-direction:column;gap:var(--s1);height:100%;padding:var(--s4) 64px var(--s4) var(--s4);text-decoration:none!important;color:inherit;transition:border-color .2s ease}
.site--clinic .cl-topic:hover{border-color:var(--accent)}
.site--clinic .cl-topic .cl-t{font-family:var(--serif);font-size:var(--t3);line-height:1.25}
.site--clinic .cl-arrow{position:absolute;right:20px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--deep)}
.site--clinic .cl-arrow::after{content:"";position:absolute;left:9px;top:12px;width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}
@media (min-width:1024px){.site--clinic .cl-topics{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}}

/* self-check */
.site .cl-check{display:grid;gap:var(--s4)}
.site .cl-q{border:0;margin:0;padding:0;display:grid;gap:var(--s2)}
.site .cl-q legend{font-weight:600;color:var(--ink);padding:0;margin-bottom:var(--s2)}
.site .cl-opts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.site .cl-opt{display:block;width:100%;min-height:52px;padding:12px 18px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:var(--t1);text-align:left;line-height:1.4;cursor:pointer}
.site .cl-opt[aria-pressed="true"]{background:var(--tint);border-color:var(--green)}
.site .cl-opt:focus-visible,.site--clinic .cl-pill:focus-visible{outline:3px solid var(--pale);outline-offset:2px}
.site .cl-check-btn{border:0;cursor:pointer;font-family:inherit}
.site .cl-check-res{background:var(--tint);border-radius:var(--r-sm);padding:var(--s4);display:grid;gap:var(--s2)}
.site .cl-check-res[hidden]{display:none}

/* visit stage + feel-it message */
/* visit steps (IPL item 26, 25 Oct): one code-drawn diagram per step. No script = every step as a card in a grid;
   live = one step at a time, drawing beside its caption, the pills under it pick the step */
.site--clinic .cl-visit{max-width:none}
.site--clinic .cl-visit-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.site--clinic .cl-visit-step{display:grid;align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.site--clinic .cl-visit-fig{background:var(--tint);line-height:0}
.site--clinic .cl-visit-fig>svg{display:block;width:100%;height:auto}
.site--clinic .cl-visit-cap{display:grid;gap:6px;padding:var(--s4) var(--s5) var(--s5)}
.site--clinic .cl-visit-cap .cl-t{font-family:var(--serif);font-size:var(--t3);line-height:1.2;color:var(--deep)}
.site--clinic .cl-visit.is-live .cl-visit-steps{display:block}
.site--clinic .cl-visit.is-live .cl-visit-step{display:none}
.site--clinic .cl-visit.is-live[data-on="1"] .cl-visit-step[data-n="1"],.site--clinic .cl-visit.is-live[data-on="2"] .cl-visit-step[data-n="2"],.site--clinic .cl-visit.is-live[data-on="3"] .cl-visit-step[data-n="3"],.site--clinic .cl-visit.is-live[data-on="4"] .cl-visit-step[data-n="4"],.site--clinic .cl-visit.is-live[data-on="5"] .cl-visit-step[data-n="5"]{display:grid}
@media (min-width:768px){.site--clinic .cl-visit.is-live .cl-visit-step{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center}
  .site--clinic .cl-visit.is-live .cl-visit-cap{padding:var(--s5) var(--s6)}}
@media (prefers-reduced-motion:no-preference){.site--clinic .cl-visit.is-live .cl-visit-step{animation:cl-visit-in .35s ease-out}}
@keyframes cl-visit-in{from{opacity:0}to{opacity:1}}
/* drop-down (IPL item 23): button + aria-expanded, closed by default once the script runs; same 2px-ruled look as the expanders */
.site--clinic .cl-reveal{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.site--clinic .cl-reveal-h{margin:0;font:inherit}
.site--clinic .cl-reveal-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s4);min-height:48px;padding:22px var(--s3);border:0;background:none;color:var(--ink);font:inherit;font-family:var(--serif);font-size:var(--t3);font-weight:600;line-height:1.3;text-align:left;cursor:default}
.site--clinic .cl-reveal.is-live .cl-reveal-btn{cursor:pointer;transition:background-color .4s}
.site--clinic .cl-reveal.is-live .cl-reveal-btn:hover{color:var(--accent)}
.site--clinic .cl-reveal-btn[aria-expanded="true"]{background:var(--tint)}
.site--clinic .bg-tint .cl-reveal-btn[aria-expanded="true"]{background:var(--paper)}
.site--clinic .cl-reveal-btn:focus-visible{outline:3px solid var(--pale);outline-offset:2px}
.site--clinic .cl-reveal-chev{flex:none;width:12px;height:12px;margin:-6px 8px 0 0;transform:rotate(45deg);border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.site--clinic .cl-reveal:not(.is-live) .cl-reveal-chev{display:none}
.site--clinic .cl-reveal-btn[aria-expanded="true"] .cl-reveal-chev{margin-top:6px;transform:rotate(-135deg)}
.site--clinic .cl-reveal-panel{padding:var(--s5) var(--s3)}
.site--clinic .cl-reveal-panel[hidden]{display:none}
.site--clinic .cl-reveal-panel .cl-xcards{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
@media (min-width:768px){.site--clinic .cl-reveal-panel .cl-xcard{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--s5);row-gap:var(--s2);align-items:start}
  .site--clinic .cl-reveal-panel .cl-xcard>.kicker{grid-column:1;grid-row:1;margin:0}
  .site--clinic .cl-reveal-panel .cl-xcard>.cl-h4{grid-column:1;grid-row:2;margin:0}
  .site--clinic .cl-reveal-panel .cl-xcard>:not(.kicker):not(.cl-h4){grid-column:2;grid-row:1/span 3;margin:0}}
@media (max-width:699px){.site--clinic .cl-reveal-btn{padding:var(--s4) var(--s2)}.site--clinic .cl-reveal-panel{padding:var(--s4) 0}}
/* numbered marks on grid cards (IPL item 20): every card opens on its number; a picture becomes a thumbnail beside it */
.site--clinic .cl-gcard-mark{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px}
.site--clinic .cl-mark-num{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--tint);border:1.5px solid var(--pale);color:var(--deep);font-family:var(--serif);font-size:var(--t3);font-weight:600;line-height:1}
.site--clinic .cl-mark-thumb{width:128px;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--tint)}
.site--clinic .cl-mark-thumb>img{width:100%;height:100%;object-fit:cover;border-radius:0}
.site--clinic .cl-visit-ctl,.site--clinic .cl-feel-ctl{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.site--clinic .cl-pill{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:600;font-size:var(--t1);cursor:pointer}
.site--clinic .cl-pill[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.site--clinic .cl-visit-after{margin-top:var(--s4)}
.site--clinic .cl-feel{background:var(--warm);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s3)}
.site--clinic .cl-feel-ctl{justify-content:flex-start;margin-top:0}
.site--clinic .cl-msg{background:#fff;border-radius:20px 20px 20px 6px;padding:16px 20px;box-shadow:0 6px 20px rgba(16,32,27,.10);max-width:92%;display:grid;gap:6px}
.site--clinic .cl-msg-from{font-size:var(--t1);font-weight:600;color:var(--muted)}
.site--clinic .cl-msg-text{font-size:var(--t3);line-height:1.4;color:var(--ink);transition:filter .7s ease}
.site--clinic .cl-feel[data-blur="1"] .cl-msg-text{filter:blur(1px)}.site--clinic .cl-feel[data-blur="2"] .cl-msg-text{filter:blur(2px)}.site--clinic .cl-feel[data-blur="3"] .cl-msg-text{filter:blur(3.5px)}.site--clinic .cl-feel[data-blur="4"] .cl-msg-text{filter:blur(5px)}
.site--clinic .cl-feel-text{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:var(--t1);color:var(--muted)}
.site--clinic .cl-feel.is-live .cl-feel-text>li{display:none}
.site--clinic .cl-feel.is-live[data-on="1"] li[data-n="1"],.site--clinic .cl-feel.is-live[data-on="2"] li[data-n="2"],.site--clinic .cl-feel.is-live[data-on="3"] li[data-n="3"]{display:block}
@media (prefers-reduced-motion:reduce){.site--clinic .cl-msg-text{transition:none}}

/* tile boards, pairs, key rows, tests, badges, callout */
.site--clinic .cl-tile3{display:flex;flex-direction:column;gap:var(--s3)}
.site--clinic .cl-pair{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.site--clinic .cl-pair-fig{margin:0;display:grid;gap:var(--s2);align-content:start}
.site--clinic .cl-pair-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm);background:var(--ink)}
.site--clinic .cl-pair-fig figcaption{font-size:var(--t1);line-height:1.5}
.site--clinic .cl-keyrow{display:grid;gap:0 var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.site--clinic .cl-keyrow>div{padding:var(--s3) 0;border-top:1px solid var(--line);display:grid;gap:var(--s1)}
.site--clinic .cl-tests{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.site--clinic .cl-test{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);align-items:start}
.site--clinic .cl-test>svg{width:96px;height:96px}
.site--clinic .cl-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.site--clinic .cl-badges li{padding:6px 12px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);font-size:var(--t1);font-weight:600;color:var(--ink)}
.site--clinic .cl-callout{display:grid;gap:var(--s4);align-items:center;background:var(--tint);border:0}
@media (min-width:900px){.site--clinic .cl-callout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.site--clinic .cl-callout>div>*+*{margin-top:var(--s2)}
.site--clinic .table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}

/* the shared tail (faq, end, cta, reviews) in this template's type */
.site--clinic .end{text-align:left}
.site--clinic .faq-full .q{font-family:var(--serif);font-weight:500}
@media (max-width:699px){.site--clinic .hero--deep .htitle{font-size:var(--t5)}}
/* the handle's tick positions: one registered rule per whole percent (no inline style) */
.site--clinic .cl-day-ticks>li[data-at="0"]{left:0}
.site--clinic .cl-day-ticks>li[data-at="1"]{left:1%}.site--clinic .cl-day-ticks>li[data-at="2"]{left:2%}.site--clinic .cl-day-ticks>li[data-at="3"]{left:3%}.site--clinic .cl-day-ticks>li[data-at="4"]{left:4%}.site--clinic .cl-day-ticks>li[data-at="5"]{left:5%}.site--clinic .cl-day-ticks>li[data-at="6"]{left:6%}.site--clinic .cl-day-ticks>li[data-at="7"]{left:7%}.site--clinic .cl-day-ticks>li[data-at="8"]{left:8%}.site--clinic .cl-day-ticks>li[data-at="9"]{left:9%}.site--clinic .cl-day-ticks>li[data-at="10"]{left:10%}
.site--clinic .cl-day-ticks>li[data-at="11"]{left:11%}.site--clinic .cl-day-ticks>li[data-at="12"]{left:12%}.site--clinic .cl-day-ticks>li[data-at="13"]{left:13%}.site--clinic .cl-day-ticks>li[data-at="14"]{left:14%}.site--clinic .cl-day-ticks>li[data-at="15"]{left:15%}.site--clinic .cl-day-ticks>li[data-at="16"]{left:16%}.site--clinic .cl-day-ticks>li[data-at="17"]{left:17%}.site--clinic .cl-day-ticks>li[data-at="18"]{left:18%}.site--clinic .cl-day-ticks>li[data-at="19"]{left:19%}.site--clinic .cl-day-ticks>li[data-at="20"]{left:20%}
.site--clinic .cl-day-ticks>li[data-at="21"]{left:21%}.site--clinic .cl-day-ticks>li[data-at="22"]{left:22%}.site--clinic .cl-day-ticks>li[data-at="23"]{left:23%}.site--clinic .cl-day-ticks>li[data-at="24"]{left:24%}.site--clinic .cl-day-ticks>li[data-at="25"]{left:25%}.site--clinic .cl-day-ticks>li[data-at="26"]{left:26%}.site--clinic .cl-day-ticks>li[data-at="27"]{left:27%}.site--clinic .cl-day-ticks>li[data-at="28"]{left:28%}.site--clinic .cl-day-ticks>li[data-at="29"]{left:29%}.site--clinic .cl-day-ticks>li[data-at="30"]{left:30%}
.site--clinic .cl-day-ticks>li[data-at="31"]{left:31%}.site--clinic .cl-day-ticks>li[data-at="32"]{left:32%}.site--clinic .cl-day-ticks>li[data-at="33"]{left:33%}.site--clinic .cl-day-ticks>li[data-at="34"]{left:34%}.site--clinic .cl-day-ticks>li[data-at="35"]{left:35%}.site--clinic .cl-day-ticks>li[data-at="36"]{left:36%}.site--clinic .cl-day-ticks>li[data-at="37"]{left:37%}.site--clinic .cl-day-ticks>li[data-at="38"]{left:38%}.site--clinic .cl-day-ticks>li[data-at="39"]{left:39%}.site--clinic .cl-day-ticks>li[data-at="40"]{left:40%}
.site--clinic .cl-day-ticks>li[data-at="41"]{left:41%}.site--clinic .cl-day-ticks>li[data-at="42"]{left:42%}.site--clinic .cl-day-ticks>li[data-at="43"]{left:43%}.site--clinic .cl-day-ticks>li[data-at="44"]{left:44%}.site--clinic .cl-day-ticks>li[data-at="45"]{left:45%}.site--clinic .cl-day-ticks>li[data-at="46"]{left:46%}.site--clinic .cl-day-ticks>li[data-at="47"]{left:47%}.site--clinic .cl-day-ticks>li[data-at="48"]{left:48%}.site--clinic .cl-day-ticks>li[data-at="49"]{left:49%}.site--clinic .cl-day-ticks>li[data-at="50"]{left:50%}
.site--clinic .cl-day-ticks>li[data-at="51"]{left:51%}.site--clinic .cl-day-ticks>li[data-at="52"]{left:52%}.site--clinic .cl-day-ticks>li[data-at="53"]{left:53%}.site--clinic .cl-day-ticks>li[data-at="54"]{left:54%}.site--clinic .cl-day-ticks>li[data-at="55"]{left:55%}.site--clinic .cl-day-ticks>li[data-at="56"]{left:56%}.site--clinic .cl-day-ticks>li[data-at="57"]{left:57%}.site--clinic .cl-day-ticks>li[data-at="58"]{left:58%}.site--clinic .cl-day-ticks>li[data-at="59"]{left:59%}.site--clinic .cl-day-ticks>li[data-at="60"]{left:60%}
.site--clinic .cl-day-ticks>li[data-at="61"]{left:61%}.site--clinic .cl-day-ticks>li[data-at="62"]{left:62%}.site--clinic .cl-day-ticks>li[data-at="63"]{left:63%}.site--clinic .cl-day-ticks>li[data-at="64"]{left:64%}.site--clinic .cl-day-ticks>li[data-at="65"]{left:65%}.site--clinic .cl-day-ticks>li[data-at="66"]{left:66%}.site--clinic .cl-day-ticks>li[data-at="67"]{left:67%}.site--clinic .cl-day-ticks>li[data-at="68"]{left:68%}.site--clinic .cl-day-ticks>li[data-at="69"]{left:69%}.site--clinic .cl-day-ticks>li[data-at="70"]{left:70%}
.site--clinic .cl-day-ticks>li[data-at="71"]{left:71%}.site--clinic .cl-day-ticks>li[data-at="72"]{left:72%}.site--clinic .cl-day-ticks>li[data-at="73"]{left:73%}.site--clinic .cl-day-ticks>li[data-at="74"]{left:74%}.site--clinic .cl-day-ticks>li[data-at="75"]{left:75%}.site--clinic .cl-day-ticks>li[data-at="76"]{left:76%}.site--clinic .cl-day-ticks>li[data-at="77"]{left:77%}.site--clinic .cl-day-ticks>li[data-at="78"]{left:78%}.site--clinic .cl-day-ticks>li[data-at="79"]{left:79%}.site--clinic .cl-day-ticks>li[data-at="80"]{left:80%}
.site--clinic .cl-day-ticks>li[data-at="81"]{left:81%}.site--clinic .cl-day-ticks>li[data-at="82"]{left:82%}.site--clinic .cl-day-ticks>li[data-at="83"]{left:83%}.site--clinic .cl-day-ticks>li[data-at="84"]{left:84%}.site--clinic .cl-day-ticks>li[data-at="85"]{left:85%}.site--clinic .cl-day-ticks>li[data-at="86"]{left:86%}.site--clinic .cl-day-ticks>li[data-at="87"]{left:87%}.site--clinic .cl-day-ticks>li[data-at="88"]{left:88%}.site--clinic .cl-day-ticks>li[data-at="89"]{left:89%}.site--clinic .cl-day-ticks>li[data-at="90"]{left:90%}
.site--clinic .cl-day-ticks>li[data-at="91"]{left:91%}.site--clinic .cl-day-ticks>li[data-at="92"]{left:92%}.site--clinic .cl-day-ticks>li[data-at="93"]{left:93%}.site--clinic .cl-day-ticks>li[data-at="94"]{left:94%}.site--clinic .cl-day-ticks>li[data-at="95"]{left:95%}.site--clinic .cl-day-ticks>li[data-at="96"]{left:96%}.site--clinic .cl-day-ticks>li[data-at="97"]{left:97%}.site--clinic .cl-day-ticks>li[data-at="98"]{left:98%}.site--clinic .cl-day-ticks>li[data-at="99"]{left:99%}.site--clinic .cl-day-ticks>li[data-at="100"]{left:100%}

/* 36b. gate-driven corrections (25 Oct 2026) */
.site .cl-fig{margin:0}
.site--clinic .cl-ph-ico{width:96px;height:72px}
.site--clinic .cl-beat-top{gap:var(--s4)}
.site--clinic .cl-two ul.list{list-style:none;padding:0;display:grid}
.site--clinic .cl-two ul.list>li{padding:var(--s3) 0;border-top:1px solid var(--line)}
.site--clinic .cl-two ul.list>li:last-child{border-bottom:1px solid var(--line)}
.site--clinic .cl-two ul.list>li+li{margin-top:0}
.site--clinic .cl-two>div:has(>.cl-card:only-child){background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.site--clinic .cl-two>div>.cl-card:only-child{border:0;padding:0;background:none;border-radius:0}
@media (min-width:960px){.site--clinic .cl-two--start>div:not(:has(>.cl-card:only-child)){position:sticky;top:110px}}
.site--clinic .cl-reasons-grid{gap:var(--s4)}
.site--clinic .cl-reasons-grid>div{border-top:0;background:var(--warm);border-radius:var(--r-sm);padding:var(--s4)}
.site--clinic .bg-tint .cl-reasons-grid>div{background:var(--tint)}
@media (min-width:1024px){.site--clinic .cl-cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow:visible;padding:0}.site--clinic .cl-cal-v{flex:none}}
.site--clinic .cl-two>.flow>*+*{margin-top:var(--s5)}
.site--clinic .cl-wide>.cl-urgent{max-width:var(--measure)}

/* 35b. "how it compares" chooser (Mark 25 Oct, IPL item 15): situation pills over option cards that light up */
.site--clinic .cl-choose-ctl{display:grid;gap:var(--s3);justify-items:center;text-align:center;margin-bottom:var(--s5)}
.site--clinic .cl-choose-ctl[hidden]{display:none}
.site--clinic .cl-choose-pills{display:flex;flex-wrap:wrap;gap:var(--s2)}
.site--clinic .cl-choose-opts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
@media (min-width:1000px){.site--clinic .cl-choose-opts[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.site--clinic .cl-choose-opt{display:grid;align-content:start;gap:var(--s3);transition:opacity .3s ease,border-color .3s ease,box-shadow .3s ease}
.site--clinic .cl-choose-opt.is-ours{border-color:var(--green)}
.site--clinic .cl-choose-opt.is-dim{opacity:.4}
.site--clinic .cl-choose-opt.is-lit{border-color:var(--green);box-shadow:0 0 0 2px var(--green),0 14px 34px rgba(16,32,27,.10)}
.site--clinic .cl-choose-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2)}
.site--clinic .cl-choose-tags .kicker{width:100%;margin:0}
.site--clinic .cl-choose-tag{font-size:var(--t1);line-height:1.3;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--deep)}
@media (prefers-reduced-motion:reduce){.site--clinic .cl-choose-opt{transition:none}}

/* ---------- 25 Oct home critic round: system fixes ---------- */
/* a hero subline never ends on a one-word line */
.hero--landing .lead,.hero--landing .lead p{text-wrap:balance}
/* reviews grid: an odd last row is centred, never a hole (2+2+1 at tablet, 3+2 at desktop) */
@media (min-width:700px){
  .reviews:not(.is-moving) .rv-track:has(>.rvw:nth-child(4)){display:flex;flex-wrap:wrap;justify-content:center;max-width:none;width:100%}
  .reviews:not(.is-moving) .rv-track:has(>.rvw:nth-child(4))>.rvw{flex:0 0 50%;box-sizing:border-box;margin-bottom:var(--s5)}
}
@media (min-width:1024px){.reviews:not(.is-moving) .rv-track:has(>.rvw:nth-child(4))>.rvw{flex-basis:33.3333%}}
/* location: transport lines get their own air; the hours list matches the address column rhythm */
.loc-info p{line-height:1.8}
.hours li+li{margin-top:var(--s2)}
@media (min-width:1024px){.loc{grid-template-columns:1.45fr 1fr}.loc-info{grid-template-columns:1.9fr 1fr}.loc-info p{line-height:1.7}.hours li+li{margin-top:var(--s3)}}
/* 25 Oct IPL critic round: phones (tests stack icon over text; the session caption sits under the still, not over it) */
@media (max-width:560px){.site--clinic .cl-test{grid-template-columns:1fr;gap:var(--s2)}}

/* ---------- 37. batched clinic-template + home pass (25 Oct 2026 critic round 3; one pass, system level) ---------- */
/* home Q8: a text row whose visual is a PAIR of drawings sets them side by side in a wider visual half, the text centred
   beside them (stacked, the pair ran ~250px past the text column) */
@media (min-width:1024px){
  .s--split .split:has(>.split-visual .figs>figure:nth-child(2)){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .s--split .split-visual:has(.figs>figure:nth-child(2)) .figs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin-inline:0;align-items:start}}
@media (min-width:560px) and (max-width:1023px){.s--split .split-visual:has(.figs>figure:nth-child(2)) .figs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin-inline:0}}
/* card grid: picture on top (never a small picture beside a narrow column, IPL Q8); one shape of card shares row tracks so
   kickers, titles, evidence rows and links line up across a row (Q15) */
.site--clinic .cl-grid--2 .cl-gcard-pic{aspect-ratio:16/9}
@media (min-width:700px){
  .site--clinic .cl-grid>.cl-gcard[data-tracks]{display:grid;grid-template-rows:subgrid;row-gap:var(--s3);align-content:start}
  .site--clinic .cl-grid>.cl-gcard[data-tracks="2"]{grid-row:span 2}
  .site--clinic .cl-grid>.cl-gcard[data-tracks="3"]{grid-row:span 3}
  .site--clinic .cl-grid>.cl-gcard[data-tracks="4"]{grid-row:span 4}
  .site--clinic .cl-grid>.cl-gcard[data-tracks="5"]{grid-row:span 5}
  .site--clinic .cl-grid>.cl-gcard[data-tracks="6"]{grid-row:span 6}
  .site--clinic .cl-gcard>.flow{display:flex;flex-direction:column}
  .site--clinic .cl-gcard>.flow>p:last-child:not(:first-child):has(>a:only-child){margin-top:auto;padding-top:var(--s3)}
  .site--clinic .cl-gcard>.cl-meter{align-self:end;margin-top:0}}
/* sourced figure tiles: figure, line and source share row tracks, so every source rule sits on one line (Q15) */
@media (min-width:700px){
  .site--clinic .cl-tiles{grid-auto-rows:auto}
  .site--clinic .cl-tile{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--s2)}
  .site--clinic .cl-tile>.cl-src{margin-top:0;align-self:start}}
/* visit calendar: four to a row on desktop; a short last row sits on the centre axis, never beside an empty cell (Q8) */
@media (min-width:1024px){
  .site--clinic .cl-cal{grid-template-columns:repeat(8,minmax(0,1fr))}
  .site--clinic .cl-cal>.cl-cal-v{grid-column:span 2}
  /* L49 (Mark 1 Nov 2026, O8): five or more steps SNAKE: 1-4 across, a loop down at the right, 5-8 back right to left */
  .site--clinic .cl-cal:has(>:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s6)}
  .site--clinic .cl-cal:has(>:nth-child(5))>.cl-cal-v{grid-column:auto}
  .site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(5){grid-area:2/4}.site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(6){grid-area:2/3}
  .site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(7){grid-area:2/2}.site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(8){grid-area:2/1}
  .site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(-n+3)::after,.site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(n+6):nth-child(-n+8)::after{content:"";position:absolute;top:-2px;left:100%;width:var(--s6);border-top:2px solid var(--line)}   /* the track runs on through the gaps */
  .site--clinic .cl-cal:has(>:nth-child(5))>:nth-child(4)::after{content:"";position:absolute;top:-2px;left:100%;width:var(--s5);height:calc(100% + var(--s7) + 2px);border:2px solid var(--line);border-left:0;border-radius:0 var(--r-lg,28px) var(--r-lg,28px) 0}   /* the loop down to step 5 */
}
@media (max-width:1023px){.site--clinic .cl-cal:has(>:nth-child(5)){grid-template-columns:minmax(0,1fr)}}   /* L49: one clear column below desktop */
.site--clinic .cl-measure:has(>:is(h3,h4):only-child)+.cl-wide{margin-top:var(--s4)}
/* the link under a review strip: centred, with a full block of air (IPL/ortho-K Q6) */
.site--clinic .reviews+.cl-center{margin-top:var(--s6)}
/* price cards: the closing note is the card's footer, on one line across the row (IPL Q8, the short $50 card) */
.site--clinic .cl-prices .price>.slot:last-child{align-self:stretch;display:flex;flex-direction:column}
.site--clinic .cl-prices .price>.slot:last-child>.flow{display:flex;flex-direction:column;flex:1 1 auto}
.site--clinic .cl-prices .price>.slot:last-child>.flow>p.small:last-child{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
.site--clinic .cl-prices .price>.slot:last-child>.flow>:nth-last-child(2):has(+p.small:last-child){margin-bottom:var(--s4)}
/* team: the group photo ends on the card row's right edge; a full block of air between photo, cards and the link (Q5/Q6) */
@media (min-width:960px){.site--clinic .cl-team-photo{justify-self:end}}
.site--clinic .cl-team+.cl-people{margin-top:var(--s6)}
.site--clinic .cl-people+.cl-more{margin-top:var(--s5)}
/* text + photo + warning: the warning card joins the text column and the photo fills the row's height (ortho-K safety Q8) */
@media (min-width:960px){
  .site--clinic .cl-two:has(>.cl-two-b>.cl-urgent):has(>.cl-two-b>.fig){grid-template-rows:auto 1fr;align-items:start;row-gap:var(--s5)}
  .site--clinic .cl-two:has(>.cl-two-b>.cl-urgent):has(>.cl-two-b>.fig)>.cl-two-a{grid-column:1;grid-row:1;position:static}
  .site--clinic .cl-two:has(>.cl-two-b>.cl-urgent):has(>.cl-two-b>.fig)>.cl-two-b{display:contents}
  .site--clinic .cl-two-b>.fig:has(~.cl-urgent){grid-column:2;grid-row:1/span 2;align-self:stretch;margin:0;display:flex;flex-direction:column}
  .site--clinic .cl-two-b>.fig:has(~.cl-urgent) img{flex:1 1 auto;height:100%;min-height:0;object-fit:cover}
  .site--clinic .cl-two-b>.fig~.cl-urgent{grid-column:1;grid-row:2;align-self:end;margin-top:0}}
/* list beside the school-day slider (Mark 25 Oct evening, item 7: restore the side-by-side version; the one-column
   stack read as a wall of text). The list starts level with the card and keeps itself in view beside it. */
@media (min-width:960px){
  .site--clinic .cl-two:has(>.cl-two-b .cl-day){grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);align-items:start}
  .site--clinic .cl-two:has(>.cl-two-b .cl-day)>.cl-two-a{position:sticky;top:96px;align-self:start}}
/* "we don't fit every child" and the self-check are separate blocks: real air and a rule between them (item 7) */
.site--clinic .cl-wide:has(>.cl-reasons){margin-top:clamp(56px,7vw,88px)}
.site--clinic .cl-wide:has(>.cl-reasons)+.cl-wide{margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
/* the school-day handle: the "nothing to wear" words sit on their own chip, so the time marker passes behind them (Q14);
   on phones the axis labels alternate between two lines so neighbours never touch */
.site--clinic .cl-day-in{inset:auto;left:10px;top:50%;transform:translateY(-50%);z-index:1;padding:2px 8px;border-radius:var(--r-sm);background:var(--pale);display:block;line-height:1.4;max-width:calc(100% - 20px)}
@media (max-width:699px){
  .site--clinic .cl-day-ticks{height:44px}
  .site--clinic .cl-day-ticks>li:nth-child(even){top:20px}}
/* expanders: the same ruled accordion as the FAQ (2px ink rules, chevron), never a tall boxed "+" row (Q10) */
.site--clinic .details{border:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);border-radius:0;background:none;padding:0}
.site--clinic .details+.details{border-top:0}
.site--clinic .details>summary{display:block;position:relative;padding:22px 56px 22px var(--s3);min-height:0;color:var(--ink);transition:background-color .4s}
.site--clinic .details>summary:hover{color:var(--accent)}
.site--clinic .details[open]>summary{background:var(--tint)}
.site--clinic .bg-tint .details[open]>summary{background:var(--paper)}
.site--clinic .details>summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;margin-top:-9px;transform:rotate(45deg);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);font-size:0}
.site--clinic .details[open]>summary::after{content:"";margin-top:-3px;transform:rotate(-135deg)}
.site--clinic .details>.flow{padding:var(--s5) var(--s3) var(--s5)}
@media (max-width:699px){.site--clinic .details>summary{padding:var(--s4) 48px var(--s4) var(--s2)}.site--clinic .details>summary::after{right:12px}.site--clinic .details>.flow{padding:var(--s4) var(--s2)}}
/* 37b. round-3 critic (768 tablet pass): a group of exactly three sits three across from 700px, never 2 + an oversized or
   lonely third; review strips run three to a row on tablets as on desktop (3+2 centred for five) */
@media (min-width:700px){
  :is(.site--home,.site--clinic) .cards--3[data-count="3"]>*,:is(.site--home,.site--clinic) .cards--3[data-count="3"]>:last-child:nth-child(odd){grid-column:span 4}
  .site--clinic .cl-people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site--clinic .cl-keyrow{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}}
@media (min-width:1024px){.site--clinic .cl-grid[data-n="3"],.site--clinic .cl-tiles[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* tablets: a three-card text grid is one full-width column (three across left 110px text columns; 2+1 left a hole);
   review strips run one review per row, ruled like phones (three narrow columns left tall holes under short reviews) */
@media (min-width:700px) and (max-width:1023px){
  .site--clinic .cl-grid[data-n="3"],.site--clinic .cl-tiles[data-n="3"]{grid-template-columns:minmax(0,1fr)}
  .site--clinic .cl-tiles[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.site--home,.site--clinic) .reviews:not(.is-moving) .rv-track{display:flex;flex-wrap:wrap;width:100%;max-width:none}
  :is(.site--home,.site--clinic) .reviews:not(.is-moving) .rv-track>.rvw,:is(.site--home,.site--clinic) .reviews:not(.is-moving) .rv-track:has(>.rvw:nth-child(4))>.rvw{flex:0 0 100%;box-sizing:border-box;margin-bottom:0;border-left:0;padding:var(--s4) 0;border-top:1px solid var(--rule-warm)}}
/* key rows: each column starts at its top (THE GAP's line sat lower than its neighbours, Q15) */
.site--clinic .cl-keyrow>div{align-content:start}
/* two tiles side by side are one height (the "See it" tile ended short of "Feel it", Q8) */
.site--clinic .cl-two:has(>.cl-two-a>.cl-card:only-child):has(>.cl-two-b>.cl-card:only-child){align-items:stretch}
/* the night-to-morning band stays green under the middle caption (contrast, Q9) */
.site--clinic .cl-beats{background:linear-gradient(90deg,#123b31 0%,#1f5a47 60%,#e9c98d 78%,#fbf1dc 100%)}
@media (max-width:899px){.site--clinic .cl-beats{background:linear-gradient(180deg,#123b31 0%,#1f5a47 60%,#e9c98d 80%,#fbf1dc 100%)}}
/* the hero player's drawing fills the stage on a solid card: no ghost of the still around or through it (IPL/ortho-K Q11/Q14);
   the still shows on its own at the last step */
.site--clinic .cl-play-draw{inset:0;background:#fff;border-radius:0}
/* resources photo: a square when stacked (it ran ~1100px tall on tablets, IPL); the subject kept in frame on desktop */
@media (max-width:1023px){.site--clinic .cl-topics-photo{min-height:0}.site--clinic .cl-topics-photo img{aspect-ratio:1/1;height:auto}}
.site--clinic .cl-topics-photo img{object-position:65% 40%}
@media (min-width:700px) and (max-width:1023px){
  .site--clinic .cl-prices.prices--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site--clinic .cl-prices.prices--3>.price,.site--clinic .cl-prices.prices--3>.price:last-child:nth-child(odd){grid-column:auto}
  .site--clinic .cl-prices.prices--3>.price{padding:var(--s4)}
}
/* round-4 critic */
@media (max-width:959px){.site--clinic .cl-team-photo{justify-self:start}}
.site--clinic .cl-topic{padding-right:80px}
.site--clinic .cl-wide:has(>.details:last-child)+.cl-wide:has(>.details:first-child){margin-top:0}
.site--clinic .cl-wide:has(>.details:last-child)+.cl-wide>.details:first-child{border-top:0}
.site--clinic .cl-person .cl-t a{color:inherit;text-decoration:none}
.site--clinic .cl-person .cl-t a:hover{text-decoration:underline}
@media (min-width:700px){
  .site--clinic .cl-choose-opts{align-items:stretch}
  .site--clinic .cl-choose-opt[data-tracks]{grid-template-rows:subgrid;row-gap:var(--s3)}
  .site--clinic .cl-choose-opt[data-tracks="3"]{grid-row:span 3}
  .site--clinic .cl-choose-opt[data-tracks="4"]{grid-row:span 4}
  .site--clinic .cl-choose-opt>.cl-choose-tags{align-self:start}}
/* round-5 critic: the stacked night-to-morning band stays green through the "Tomorrow" heading (white on green), turning gold
   behind its picture, so no heading or caption sits on the olive mid-tone (Q9); the classroom picture keeps its sums whole (Q11) */
@media (max-width:899px){
  .site--clinic .cl-beats{background:linear-gradient(180deg,#123b31 0%,#1f5a47 70%,#e9c98d 82%,#fbf1dc 100%)}
  .site--clinic .cl-beat--morning .cl-beat-word{color:#fff}}
.site--clinic .cl-beat--morning .cl-beat-pic>img{object-position:0 50%}
/* team group photo on tablets: full column width, a landscape crop of the group (no 440px island beside empty space) */
@media (max-width:959px){.site--clinic .cl-team-photo{max-width:none;justify-self:stretch}.site--clinic .cl-team-photo img{aspect-ratio:4/3;object-position:50% 20%}}
.site--clinic .cl-topics-photo img{object-position:72% 40%}
/* round-6 critic: sequence steps start their text at the top (a wrapped neighbour pushed "Match" down 15px at 1690, Q15);
   the home review strip sits on the same wide axis as the page's other grids at 1690 */
.site--clinic .cl-seq>li{align-content:start}
/* round-7 critic (IPL Q8): two price cards whose lists differ in length. On desktop the featured card's long list runs in two
   columns so both cards end level (no 200px hole in the short card); on tablets the pair stacks, one card per row */
@media (min-width:1024px){.site--clinic .cl-prices.prices--2:has(>.price--feature:last-child){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}   /* critic 2 Nov Q8: the short card narrower, so neither card carries a dead area */
  .site--clinic .cl-prices.prices--2 .price--feature ul.list[data-n]:not([data-n="1"]):not([data-n="2"]):not([data-n="3"]):not([data-n="4"]){columns:2;column-gap:var(--s5)}
  .site--clinic .cl-prices.prices--2 .price--feature ul.list>li{break-inside:avoid;margin-top:0;padding-bottom:var(--s2)}}
@media (min-width:700px) and (max-width:1023px){.site--clinic .cl-prices.prices--2{grid-template-columns:minmax(0,1fr)}.site--clinic .cl-prices.prices--2>.price{grid-column:auto}}
/* Mark 25 Oct evening, item 10: the 1-2-3-4 sequence sits on the section's centre axis (dots and words centred in
   each step, the connector running dot centre to dot centre) instead of hanging off the left edge */
@media (min-width:900px){
  .site--clinic .cl-seq>li>p:not(.cl-t){max-width:26ch}}

/* 38. ortho-K "movie" (Mark 25 Oct evening, item 6): one continuous animation of the three eye states. Shown only when
   site.js runs and the visitor allows motion; otherwise the three static rows below it (always in the HTML) show. */
.site .cl-fig.has-movie>.cl-eyerows{display:none}
.site--clinic .cl-movie[hidden]{display:none}
.site--clinic .cl-movie{--night:0;position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid #cfe3d8;
  background:linear-gradient(180deg,#fff,#f6faf7);box-shadow:0 30px 70px rgba(16,32,27,.10)}
.site--clinic .cl-movie .mv-stage{position:relative;display:grid;gap:var(--s5);padding:clamp(20px,3vw,36px);align-items:center;isolation:isolate}
.site--clinic .cl-movie .mv-stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--night);
  background:radial-gradient(120% 90% at 30% 20%,#2a6b55 0%,#123a2f 55%,#0d2a22 100%);transition:opacity .2s linear}
@media (min-width:900px){.site--clinic .cl-movie .mv-stage{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.site--clinic .cl-movie .mv-eye{background:radial-gradient(90% 80% at 50% 40%,#fff 0%,#eef4f0 70%,#e2ece6 100%);border-radius:var(--r-md);padding:var(--s3);box-shadow:0 8px 24px rgba(16,32,27,.08)}
.site--clinic .cl-movie .mv-eye svg{width:100%;height:auto;display:block}
.site--clinic .cl-movie .mv-eye{filter:brightness(calc(1 - var(--night) * .14))}
.site--clinic .cl-movie .mv-side{display:grid;gap:var(--s3);align-content:center}
.site--clinic .cl-movie .mv-view{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(16,32,27,.10)}
.site--clinic .cl-movie .mv-view img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:8% 40%;border-radius:0!important;transform:scale(1.03)}
.site--clinic .cl-movie .mv-view figcaption{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--ink);font-size:var(--t1);font-weight:600;padding:4px 10px;border-radius:999px}
.site--clinic .cl-movie .mv-caps{position:relative;min-height:7.5em}
.site--clinic .cl-movie .mv-cap{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;
  background:rgba(255,255,255,.94);border-radius:var(--r-sm);padding:14px 16px;display:grid;gap:4px}
.site--clinic .cl-movie .mv-cap.is-on{opacity:1;transform:none}
.site--clinic .cl-movie .mv-cap .kicker{margin:0}
.site--clinic .cl-movie .mv-cap p{margin:0;color:var(--ink)}
.site--clinic .cl-movie .mv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px clamp(20px,3vw,36px) 18px;border-top:1px solid #dfe9e3;background:#fff}
.site--clinic .cl-movie .mv-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--deep);
  background:var(--deep);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.site--clinic .cl-movie .mv-btn--ghost{background:#fff;color:var(--deep)}
.site--clinic .cl-movie .mv-btn svg{width:14px;height:14px}
.site--clinic .cl-movie .mv-btn .i-pause{display:none}
.site--clinic .cl-movie.is-playing .mv-play .i-play{display:none}
.site--clinic .cl-movie.is-playing .mv-play .i-pause{display:inline}
.site--clinic .cl-movie .mv-track{flex:1 1 260px;display:grid;gap:8px}
.site--clinic .cl-movie .mv-bar{height:4px;border-radius:4px;background:#e3ece7;overflow:hidden}
.site--clinic .cl-movie .mv-bar i{display:block;height:100%;width:0;background:var(--green)}
.site--clinic .cl-movie .mv-ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.site--clinic .cl-movie .mv-tick{font:inherit;font-size:var(--t1);color:var(--muted);background:none;border:0;padding:2px 0;text-align:left;cursor:pointer}
.site--clinic .cl-movie .mv-tick.is-past{color:var(--deep);font-weight:600}
.site--clinic .cl-movie .mv-tick:focus-visible,.site--clinic .cl-movie .mv-btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (max-width:599px){.site--clinic .cl-movie .mv-ticks{grid-template-columns:repeat(3,minmax(0,1fr))}.site--clinic .cl-movie .mv-caps{min-height:9em}}
.site--clinic .cl-movie .mv-note{margin:0;padding:0 clamp(20px,3vw,36px) 18px;background:#fff;text-align:left}

/* ---------- 38. THE APPLE DESIGN SYSTEM (Mark 26 Oct 2026: "Apple's font and type scale is preferred") ----------
   Decision: brain repo page-factory/site-build/reset/MARK-FEEDBACK-APPLE-VS-CURRENT-2026-10-26.md. Approved look:
   content-studio/proposals/apple-blank-sheet-2026-10-26/ (NOTES.md). Method: .claude/skills/apple-design (s1 press
   feedback, s14 reduced motion, s15 tracking and leading by size, s16 one accent for actions).
   Supersedes taste rules V10 (photo radius), V18/V26 (italic accent words), V40 (warm cream bands), L6/L24 (tracked
   capital eyebrows), L36 (serif FAQ), L37 (word-by-word titles). Reversible: git tag pre-apple-2026-10-26.
   Every reset page inherits it: the tokens below sit on main.site, so they win over every template's own scale.
     type    one system font (SF Pro on Apple devices, Segoe UI Variable on Windows): no web font download.
             hierarchy from weight + size; tracking tightens as size grows, leading tightens with it; no italics, no serif.
     colour  white and Apple grey (#f5f5f7) bands; ink #1d1d1f; the green marks what you can act on (buttons, links)
             and the small section label; dark bands only where a page asks for one.
     radii   three: 28 (big photos, bands), 20 (cards, panels), 14 (small boxes, chips); pills for buttons.
     motion  press feedback on buttons and cards (scale .97 on press, 100-120ms); blocks fade up 8px in 300ms; no
             word-by-word titles; reduced motion = everything simply there. */
:root{
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --grey:#f5f5f7; --accent-press:#155440; --accent-tint:#e7f2ed; --night:#0f1412; --night-2:#18201d;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
}
main.site{
  --sans:var(--font-text); --serif:var(--font-display);
  --ink:#1d1d1f; --body:#424245; --muted:#5f5f64; --line:#d9d9de;
  --accent:#1c6b52; --tint:var(--grey); --warm:var(--grey); --rule-warm:var(--line); --hero-a:var(--grey); --hero-b:var(--grey);
  --r-box:var(--r-md); --r-photo:var(--r-md);
  /* Apple's scale (phone / tablet / desktop): t1 label + small print, t2 body, t3 lead + card titles, t4 section title,
     t5 page title, t6 big numbers, t7 the landing hero's display line (home only) */
  --t1:14px; --t2:18px; --t3:20px; --t4:32px; --t5:40px; --t6:40px; --t7:44px;
}
@media (min-width:700px){main.site{--t3:21px; --t4:40px; --t5:52px; --t6:44px; --t7:64px}}
@media (min-width:1024px){main.site{--t2:19px; --t3:24px; --t4:52px; --t5:64px; --t6:52px; --t7:80px; --r-photo:var(--r-lg)}}

/* base: the system font, a hair of negative tracking on body text, Apple ink */
main.site{font-family:var(--font-text);letter-spacing:-.005em;color:var(--body);text-rendering:optimizeLegibility}
main.site ::selection{background:var(--accent-tint)}
main.site a{text-decoration:none}
main.site a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
main.site :is(p,li,dd,td) a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(28,107,82,.35)}
main.site :is(p,li,dd,td) a:hover{text-decoration-color:currentColor}

/* type roles: tracking and leading set per size (skill s15) */
main.site :is(.title,.htitle,.sub,.cl-h3,.cl-h4,.q,.fig-title,.cl-t,.who){font-family:var(--font-display)}
main.site .htitle{font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
main.site .hero--landing .htitle{font-size:var(--t7);line-height:1.04;letter-spacing:-.032em;color:#fff}
main.site .title{font-weight:700;line-height:1.08;letter-spacing:-.026em;color:var(--ink)}
main.site .head .title,main.site .head--centre .title{max-width:20ch}
main.site :is(.sub,.cl-h3){font-weight:600;line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
main.site .cl-h4,main.site .cl-t{font-weight:600;letter-spacing:-.01em}
main.site :is(.title,.htitle,.sub,.cl-h3) em{font-style:normal!important;color:inherit!important}   /* V18/V26 superseded: no accent words */
main.site .lead{line-height:1.5;letter-spacing:-.012em;color:var(--body)}
main.site :is(.small,.cl-cap,.cl-src){letter-spacing:.004em}
main.site :is(h1,h2,h3,.lead){text-wrap:balance}
.nk{font-kerning:none}   /* Front Desk 8 Nov 2026: Segoe UI Variable Display kerns "y?" apart ("deficiency ?"); sitegen wraps that "?" in a heading */
/* the small section label: sentence case, green, no tracked capitals (L6/L24 superseded) */
main.site .eyebrow{font-family:var(--font-text);font-size:var(--t1);font-weight:600;line-height:1.3;letter-spacing:.01em;text-transform:none;color:var(--accent)}
main.site .kicker{font-family:var(--font-text);font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--muted)}
main.site :is(.cta,.hero--landing,.hero--deep,.bg-deep,.bg-dark) .eyebrow{color:#9fd8c1}
/* numbers: display weight, tight */
main.site :is(.cl-num,.stat .num,.num){font-family:var(--font-display);font-weight:700;letter-spacing:-.035em}
main.site .hero-trust strong{font-family:var(--font-display);font-weight:700;font-size:var(--t3);line-height:1.15;letter-spacing:-.022em;color:var(--ink)}

/* bands: white and Apple grey; a tinted box on a grey band turns white so it still reads as a box */
main.site .s.bg-tint{background:var(--grey)}
main.site .s.bg-tint :is(.card--tint,.cl-card--tint,.box,.answer-box){background:#fff}
main.site .hero:not(.hero--landing):not(.hero--deep){background:var(--grey)}

/* buttons: real pills that answer the press (skill s1), the green kept for actions */
main.site .btn{min-height:54px;padding:15px 28px;border-radius:999px;background:var(--accent);font-family:var(--font-text);font-size:var(--t2);font-weight:600;line-height:1.2;letter-spacing:-.005em;
  transition:transform 120ms ease-out,background-color 120ms ease-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
main.site .btn:hover{background:var(--accent-press);text-decoration:none!important}
main.site .btn:active{transform:scale(.97)}
main.site .btn--ghost{background:rgba(0,0,0,.05);color:var(--ink)!important}
main.site .btn--ghost:hover{background:rgba(0,0,0,.08)}
main.site :is(.cta,.hero--landing,.hero--deep,.bg-deep,.bg-dark) .btn--ghost{background:rgba(255,255,255,.14);color:#fff!important}
main.site :is(.cta,.hero--landing,.hero--deep,.bg-deep,.bg-dark) .btn--ghost:hover{background:rgba(255,255,255,.22)}
main.site .cta .btn:not(.btn--ghost){background:#fff;color:var(--accent)!important}
main.site .cta .btn:not(.btn--ghost):hover{background:#eef6f2}
main.site .call{font-family:var(--font-text);font-weight:600;letter-spacing:-.005em}
/* cards that are links answer the press too */
main.site :is(a.card,a.cl-card,a.cl-topic,a.cl-link-card,.cl-opt,.cl-pill){transition:transform 160ms ease-out,background-color 160ms ease-out,border-color 160ms ease-out}
main.site :is(a.card,a.cl-card,a.cl-topic,a.cl-link-card):active{transform:scale(.985)}
main.site :is(.cl-opt,.cl-pill):active{transform:scale(.97)}
main.site :is(a.card,a.cl-card,a.cl-topic,a.cl-link-card):hover{text-decoration:none}

/* radii: three sizes. Big photos 28 (desktop), cards and panels 20, small boxes 14 */
main.site :is(.card,.cl-card,.box,.price,.prices>*,.answer-box,.details,.cl-rep,.cl-day,.cl-check,.rel-card){border-radius:var(--r-md)}
main.site :is(.split-visual img:not(:where(.collage img)),.hero-media img,.cl-team-photo img,.cl-topics-photo img,.tv-visual img){border-radius:var(--r-photo)}   /* a collage picture keeps square corners (Mark 2 Nov 2026); :where adds no specificity */
main.site :is(.chip,.tags li,.cl-badges li){border-radius:999px}

/* FAQ: Apple's list (hairline rules, a chevron, display-weight questions, no tinted open row) */
main.site .faq-full{border-top:1px solid var(--line);border-bottom:0}
main.site .faq-full .faq-item{border-top:0;border-bottom:1px solid var(--line)}
main.site .faq-full .faq-item:last-child{border-bottom:1px solid var(--line)}
main.site .faq-full .faq-item>summary{padding:22px 4px 22px 0;transition:none}
main.site .faq-full .faq-item[open]>summary{background:transparent}
main.site .s.bg-tint .faq-full .faq-item[open]>summary{background:transparent}
main.site .faq-full .faq-item>summary>.q,main.site.site--clinic .faq-full .q{font-family:var(--font-display);font-size:var(--t2);font-weight:600;line-height:1.35;letter-spacing:-.012em;color:var(--ink)}
main.site .faq-full .faq-item>.a{padding:0 0 var(--s4)}
main.site .faq-full .a-in{max-width:720px;color:var(--body)}
main.site .chev::before{border-color:var(--body);transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
@media (max-width:699px){main.site .faq-full .faq-item>summary{padding:var(--s4) 2px var(--s4) 0}main.site .faq-full .faq-item>.a{padding:0 0 var(--s4)}}

/* review strip: Apple grey cards' quiet type (the strip itself, its drift and its edges are unchanged) */
main.site .rv-q p{font-family:var(--font-text);letter-spacing:-.008em}

/* restrained motion (L37 superseded): one short fade-up for blocks, no word-by-word titles */
.rv-on main.site .rv{transform:translateY(8px);transition:opacity 300ms ease-out,transform 300ms ease-out}
.rv-on main.site .rv.in{transform:none}
main.site .faq-item>.a{animation-duration:.25s}
@media (prefers-reduced-motion:reduce){
  main.site :is(.btn,a.card,a.cl-card,a.cl-topic,a.cl-link-card,.cl-opt,.cl-pill){transition:none}
  main.site :is(.btn,a.card,a.cl-card,a.cl-topic,a.cl-link-card,.cl-opt,.cl-pill):active{transform:none}
}
@media (prefers-contrast:more){main.site :is(.card,.cl-card){outline:1px solid #6e6e73}}

/* the shell on these pages speaks the same type: header and footer take the system font (no Work Sans, no Urbanist) */



main.site .hero--landing .hero-copy{max-width:62rem}
main.site .hero--landing .lead{max-width:40rem;margin-inline:auto}
/* dark bands keep white type: the Apple ink above must not reach the CTA bands */
main.site .cta :is(.title,.htitle,.sub){color:#fff}
main.site .cta :is(.lead,p){color:#e4efe9}
main.site .cta .call:not(.btn){color:#fff}
/* a landscape photo beside text keeps its own shape (Apple: the picture is never cropped to the height of the words);
   it sits on the text's centre line. Portrait and square photos still meet the text top and bottom (L6/L7). */
@media (min-width:1024px){
  main.site .s--split .split-visual--photo .ph:has(img[data-orient~="landscape"]){position:relative;flex:none}
  main.site .s--split .split-visual--photo .ph:has(img[data-orient~="landscape"])::before{content:none}
  main.site .s--split .split-visual--photo .ph img[data-orient~="landscape"]{position:static;height:auto;aspect-ratio:4/3}
}
/* critic round 1 (26 Oct): no tracked capitals anywhere; drawings speak the system font; one disclosure style
   (Apple hairlines + chevron) for every read-more, drop-down and FAQ */
main.site :is(.eyebrow,.kicker,.role,.zone-kicker,.cl-when,.cl-rep-tile .k,.card .kicker,.price .kicker){text-transform:none;letter-spacing:.01em}
main.site svg text{font-family:var(--font-text)}
main.site .details,main.site.site--clinic .details{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0}
main.site .details+.details,main.site.site--clinic .details+.details{border-top:0}
main.site .details>summary,main.site.site--clinic .details>summary{list-style:none;position:relative;padding:22px 40px 22px 0;min-height:0;font-family:var(--font-display);font-weight:600;font-size:var(--t2);letter-spacing:-.012em;line-height:1.35;color:var(--ink)}
main.site .details>summary::-webkit-details-marker{display:none}
main.site .details>summary::after,main.site.site--clinic .details>summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--body);border-bottom:2px solid var(--body);transform:translateY(-70%) rotate(45deg);font-size:0;transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
main.site .details[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
main.site .details>.flow,main.site.site--clinic .details>.flow{padding:0 0 var(--s5)}
main.site.site--clinic .cl-reveal{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
main.site.site--clinic .cl-reveal-btn{padding:22px 4px 22px 0;font-family:var(--font-display);font-weight:600;font-size:var(--t2);letter-spacing:-.012em}
main.site.site--clinic .cl-reveal-btn[aria-expanded="true"],main.site.site--clinic .bg-tint .cl-reveal-btn[aria-expanded="true"]{background:transparent}
main.site.site--clinic .cl-reveal-chev{border-color:var(--body)}
/* critic round 1 (26 Oct, continued): matching parts of a card row line up (Q15): the closing line of each plain card
   (a label + link) sits on the card's bottom edge */
@media (min-width:700px){
  main.site .cards>.card:not(.card--link):not([data-tracks]){display:flex;flex-direction:column}
  main.site .cards>.card:not(.card--link):not([data-tracks])>.flow{display:flex;flex-direction:column;flex:1 1 auto}
  main.site .cards>.card:not(.card--link):not([data-tracks])>.flow>p:last-child:has(a){margin-top:auto;padding-top:var(--s3)}
}
/* every CTA band headline is white (mid and close alike); emphasis inside a section's lead is plain, not italic */
main.site .cta :is(.title,.htitle){color:#fff!important}
main.site .head :is(.lead,p) :is(em,i){font-style:normal}
main.site.site--clinic .cl-beat-word{font-weight:600}
/* prices and figures read as figures: display weight, ink, balanced when an amount runs to two lines */
main.site .price .amount{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;color:var(--deep);text-wrap:balance}   /* Mark 1 Nov note 30: 'a bit flat (colour removed?)': prices back in deep green */
main.site .price .kicker{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--deep);font-weight:600}
main.site .card .flow>.lead{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
/* Chinese headings break at phrase boundaries, never inside a two-character word, unless a line would overflow */
main.site [lang|="zh"] :is(h1,h2,h3,.title,.htitle,.sub),main.site:lang(zh) :is(h1,h2,h3,.title,.htitle,.sub){word-break:keep-all;overflow-wrap:anywhere;hyphens:manual}
main.site:lang(zh) .head .title{max-width:32ch}
/* critic round 2 (26 Oct): bold inside a headline stays the headline's weight; hero pictures keep their rounded card at
   every width; tablets (700-1023): a group of exactly three cards sits three across on every page (it was home and
   clinic only), and a row of three related links too */
main.site :is(.title,.htitle,.sub,.cl-h3) :is(strong,b){font-weight:inherit;color:inherit}
main.site .hero-media img,main.site .hero-media svg{border-radius:var(--r-md)}
@media (min-width:1024px){main.site .hero-media img,main.site .hero-media svg{border-radius:var(--r-lg)}}
@media (min-width:700px) and (max-width:1023px){
  main.site .cards--3[data-count="3"]>*,main.site .cards--3[data-count="3"]>:last-child:nth-child(odd){grid-column:span 4}
  main.site .related--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
main.site.site--clinic .cl-beat-word{font-size:var(--t3);white-space:nowrap}
/* critic round 3 (26 Oct): stacked disclosures share their rules with no gap between rows; a drawing in a hero is its
   own rounded card at its natural size; on tablets three ruled items and three reviews sit three across on every
   page; emphasis inside a hero lead is plain */
main.site .flow>.details+.details,main.site .details+.details{margin-top:0}
main.site .hero-media img[data-orient~="drawing"]{width:auto;max-width:min(100%,560px);height:auto;aspect-ratio:auto;margin-inline:auto;object-fit:initial}
main.site .hero .lead :is(em,i){font-style:normal}
@media (min-width:700px) and (max-width:1023px){
  main.site .wide>.rows[data-n="3"]>div{grid-column:span 2}
  main.site:not(.site--home):not(.site--clinic) .reviews:not(.is-moving) .rv-track:not(:has(>.rvw:nth-child(4))){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  main.site:not(.site--home):not(.site--clinic) .reviews:not(.is-moving) .rv-track:not(:has(>.rvw:nth-child(4)))>.rvw{width:auto;padding-inline:var(--s3)}
}
main.site.site--clinic .cl-stats p{align-content:start}
/* critic round 4 (26 Oct): Chinese headings are bold throughout (the Latin part of a mixed title no longer looks lighter
   than the CJK fallback) and never start a line with punctuation; a ruled item's wrapped title hangs under its text,
   not under its tick; a small low-resolution photo is shown at its own size, never stretched */
main.site:lang(zh) :is(.title,.htitle,.sub,.cl-h3){font-weight:700}
main.site:lang(zh) :is(h1,h2,h3,h4,.title,.htitle,.sub){line-break:strict}
main.site .wide>.rows>div>.sub{padding-left:1.5em;text-indent:-1.5em}
main.site .wide>.rows>div>.sub~*{padding-left:calc(1.5 * var(--t3))}   /* Mark 29 Oct hub note 2.4: words under the title, not left of it (gate ROWINDENT) */
main.site img[src*="pantoscopic-tilt"]{width:auto;max-width:100%;margin-inline:0}
@media (max-width:699px){main.site:lang(zh) .htitle{font-size:var(--t4)}}
@media (min-width:1024px){main.site:lang(zh) .hero .htitle{font-size:var(--t4);line-height:1.25}}   /* two-column hero: phrases stay whole */
main.site .wide>.list--short>li{padding-left:1.45em;text-indent:-1.45em}
main.site:lang(zh){line-break:strict}

/* ---------- 40. HOME, Apple mix (Mark 26 Oct 2026, the mix table in brain page-factory/site-build/reset/
   MARK-FEEDBACK-APPLE-VS-CURRENT-2026-10-26.md). Scoped to main.site--home: no other page changes.
   Current hero photo with Apple's display type; Apple "What brings you in"; the current moving review strip on Apple
   grey with even edges; bigger dry-eye picture; title -> one-line subtitle -> paragraph; ZEISS and HOYA marks about
   five times larger; a bigger, squarer children's photo; Apple's dark Myopia Clinic; current frame-brand logos;
   Apple FAQ; Apple find-us with the current map; Apple type on the current dark closing band. Heads sit left, as on
   the Apple page. ---------- */



/* hero: the photo stays; the line is Apple's display size; the buttons are Apple pills */




/* what brings you in: four grey cards in a row, square pictures, the label in green; the children's row below */












/* reviews: Apple grey band; big figures on hairlines; the moving strip as white cards with even fades both sides */













/* text + photo rows: Apple proportions, photos never cropped to the words */
@media (min-width:1024px){
  
  
  main.site--home .s--split .split-visual--photo .ph{position:relative;flex:none}   /* relative (1 Nov 2026): a clip over the photo (home dry eye) stays inside its photo once the reveal transform ends */
  main.site--home .s--split .split-visual--photo .ph::before{content:none}
  main.site--home .s--split .split-visual--photo .ph img{position:static;height:auto;min-height:0;max-height:none}
  
  
  
  
  
  
}





/* ZEISS and HOYA: about five times larger (Mark: "much bigger") */






/* The Myopia Clinic: Apple's dark band; photo-led cards that glow on it */

















/* FAQ: head on the left, the list on the container */

/* find us: Apple layout (contact facts, a white hours card) and the current Google map */




main.site--home .hours{list-style:none;padding:0;margin-top:var(--s3)}







/* closing band: Apple type on the current full dark background */













/* ---------- 41. Apple batch A (27 Oct 2026): home critic fixes + the looping 360 tile ----------
   The Myopia Clinic notes run the full container as two left-set panels (critic 26 Oct: narrow, centred islands);
   the children's box reads as one row on wide screens and one left edge on phones. The looping tile: site.js 16. */











main.site :is(.card-img,.ph,.fig).has-loop{position:relative}
main.site :is(.card-img,.ph,.fig) .loopvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none}
main.site :is(.card-img,.ph,.fig) .loopvid.is-on{opacity:1}
main.site .fig.has-loop .loopvid{bottom:auto;height:auto;aspect-ratio:auto}   /* an explainer in a figure: the clip covers the picture only, never its caption (batch B, 1 Nov 2026) */
main.site .fig.has-loop :is(.loop-pause,.loop-replay){bottom:auto;top:12px}   /* over the picture, never on its caption (critic 5 Nov 2026) */
main.site .ph>.loopvid{border-radius:var(--r-photo)}   /* a split photo's clip (home dry eye, Mark 29 Oct) keeps the photo's corners */


/* ---------- 39. SCRUB STAGE: the reusable "what happens, step by step" control (Apple design, 26 Oct 2026) ----------
   Block `scrub` (sitegen.py CL), macro in components.html.j2, behaviour site.js block 15. A dark stage holds the drawing,
   a "what they see" picture and a slider with named stops; the numbered step list sits beside it (below it on phones).
   --dim (0..1, from the steps) darkens the stage and the picture for night moments. Without script the controls stay
   hidden and every step is listed. Topics it suits next: IPL session, MiyoSmart / Stellest optics, MiSight, atropine,
   dry eye (meibomian glands), keratoconus cross-linking, multifocal corridor (see brain page-factory/site-build/reset/
   SCRUB-COMPONENT.md). */
main.site .scrub{margin:0}
main.site .scrub-grid{display:grid;gap:var(--s5);align-items:start}
@media (min-width:1024px){main.site .scrub-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--gutter-2)}}   /* L50 (O3) */
main.site .scrub-stage{--dim:0;position:relative;border-radius:var(--r-lg);overflow:hidden;color:#f5f5f7;padding:var(--s4);
  background-color:rgb(calc(18 - 11 * var(--dim)) calc(25 - 15 * var(--dim)) calc(22 - 8 * var(--dim)))}
@media (min-width:700px){main.site .scrub-stage{padding:var(--s5)}}
main.site .scrub-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
main.site .scrub-chip{display:inline-flex;align-items:center;font-size:var(--t1);font-weight:600;line-height:1.2;background:rgba(255,255,255,.1);padding:6px 12px;border-radius:999px;color:#fff}
main.site .scrub-hint{font-size:var(--t1);line-height:1.3;color:#a9b2ae}
main.site .scrub-draw svg{width:100%;height:auto;display:block;margin-top:var(--s2)}
main.site .scrub-see{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s3);align-items:center;margin-top:var(--s2)}
main.site .scrub-see-img{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:16/10;background:#000}
main.site .scrub-see-img img{width:100%;height:100%;object-fit:cover;border-radius:0;will-change:filter}
main.site .scrub-see-img[data-b="2"] img{filter:blur(2px)}
main.site .scrub-see-img[data-b="4"] img{filter:blur(4px)}
main.site .scrub-see-img[data-b="6"] img{filter:blur(6px)}
main.site .scrub-shade{position:absolute;inset:0;background:#05080a;opacity:calc(var(--dim) * .82)}
main.site .scrub-see-text{margin:0;font-size:var(--t1);line-height:1.45;color:#c9d1cd}
main.site .scrub-see-text b{display:block;color:#fff;font-weight:600}
main.site .scrub-ctl{margin-top:var(--s4)}
main.site .scrub-track{position:relative;height:44px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;border-radius:999px}
main.site .scrub-track:active{cursor:grabbing}
main.site .scrub-track:focus-visible{outline:3px solid #9fd8c1;outline-offset:2px}
main.site .scrub-rail{position:absolute;left:12px;right:12px;top:20px;height:4px;border-radius:4px;background:rgba(255,255,255,.16)}
main.site .scrub-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#8fd6b8;width:0}
main.site .scrub-thumb{position:absolute;top:10px;left:12px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:transform 100ms ease-out}
main.site .scrub-track.is-pressed .scrub-thumb{transform:scale(1.18)}
main.site .scrub-stops{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
main.site .scrub-stops button{background:none;border:0;color:#a9b2ae;font:600 var(--t1)/1.2 var(--font-text);padding:12px 2px;min-height:44px;cursor:pointer;border-radius:var(--r-sm)}
main.site .scrub-stops button[aria-pressed="true"]{color:#fff}
main.site .scrub-stops button:first-child{text-align:left}
main.site .scrub-stops button:last-child{text-align:right}
main.site .scrub-stops button:focus-visible{outline:3px solid #9fd8c1;outline-offset:-3px}
main.site .scrub-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s2)}
main.site .scrub-foot .btn{min-height:40px;padding:8px 20px;font-size:var(--t1)}
main.site .scrub-note{margin:0;font-size:var(--t1);line-height:1.45;color:#a9b2ae;text-align:right;max-width:30ch}
main.site .scrub-steps{list-style:none;margin:0;padding:0;counter-reset:scrub}
main.site .scrub-steps li{position:relative;padding:var(--s3) 0 var(--s3) 52px;border-top:1px solid var(--line);color:var(--muted);line-height:1.5;transition:color 200ms ease}
main.site .scrub-steps li:last-child{border-bottom:1px solid var(--line)}
main.site .scrub-steps li::before{counter-increment:scrub;content:counter(scrub);position:absolute;left:0;top:14px;width:32px;height:32px;border-radius:50%;background:var(--grey);color:var(--muted);font-weight:700;font-size:var(--t1);display:flex;align-items:center;justify-content:center;transition:background-color 200ms ease,color 200ms ease}
main.site .s.bg-tint .scrub-steps li::before{background:#fff}
main.site .scrub-steps li b{display:block;color:var(--ink);font-family:var(--font-display);font-size:var(--t2);letter-spacing:-.01em;margin-bottom:2px}
main.site .scrub.is-live .scrub-steps li{cursor:pointer}
main.site .scrub.is-live .scrub-steps li.is-on{color:var(--body)}
main.site .scrub.is-live .scrub-steps li.is-on::before{background:var(--accent);color:#fff}
main.site .scrub:not(.is-live) .scrub-steps li{color:var(--body)}
main.site .scrub-fine{margin-top:var(--s3)}
@media (max-width:699px){main.site .scrub-see{grid-template-columns:96px minmax(0,1fr)}main.site .scrub-foot{flex-direction:column;align-items:flex-start}main.site .scrub-note{text-align:left}}
@media (prefers-reduced-motion:reduce){main.site .scrub-steps li,main.site .scrub-steps li::before,main.site .scrub-thumb{transition:none}}

/* ---------- 42. Apple batch B (27 Oct 2026): ortho-K page to Mark's notes 1-15 (brain page-factory/site-build/reset/
   MARK-FEEDBACK-APPLE-VS-CURRENT-2026-10-26.md). The clinic hero gets a LIGHT variant (note 1-2: short H1, the rest a
   subtitle inside the H1, the current hero picture kept); the SightTrack report gains a green/amber/red scale (note 10);
   the self-check is its own small tinted widget (note 7); the care box loses the stripe (note 8); the resource links are
   big cards without the photo (note 14). ---------- */
.site--clinic .hero--light{background:var(--grey);color:var(--ink);padding-block:var(--s7)}
@media (min-width:1024px){.site--clinic .hero--light .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}.site--clinic .hero--light{padding-block:var(--hero-top) var(--s8)}}
.site--clinic .hero--light .htitle{color:var(--ink)}
.site--clinic .hero--light .htitle-sub{display:block;margin-top:var(--s3);font-size:var(--t4);line-height:1.15;font-weight:600;letter-spacing:-.015em;color:var(--body)}
@media (max-width:699px){.site--clinic .hero--light .htitle-sub{font-size:var(--t3)}}
.site--clinic .hero--light .eyebrow{color:var(--accent)}
.site--clinic .hero--light .lead{color:var(--body)}
.site--clinic .hero--light .cl-trust{color:var(--muted)}
.site--clinic .hero--light .cl-trust strong{color:var(--ink)}
.site--clinic .hero--light .cl-crumbs,.site--clinic .hero--light .cl-byline{color:var(--muted)}
.site--clinic .hero--light .cl-play{background:var(--night);border-radius:var(--r-lg);padding:var(--s3);overflow:hidden}
.site--clinic .hero--light .cl-hero-photo img{border-radius:var(--r-lg);width:100%;aspect-ratio:3/2;object-fit:cover}
.site--clinic #safety .cl-urgent.box{background:#fff;color:var(--body);border:1px solid var(--line)}
.site--clinic #safety .cl-urgent.box .cl-t{color:var(--ink)}
.site--clinic #self-check .cl-check{max-width:none;background:#fff;border:0;padding:var(--s6) var(--s4);gap:var(--s5);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(16,32,27,.08)}   /* Mark 2 Nov note 12: a feature card on the full container (was the 760px tint card) */
.site--clinic #self-check .cl-check :is(button,label):not(.cl-check-btn):not(.btn){background:#fff}
.site .cl-rep-scale{list-style:none;margin:0;padding:12px 36px;display:flex;flex-wrap:wrap;gap:8px var(--s5);border-bottom:1px solid var(--rule-warm);background:#fff;font-size:var(--t1);line-height:1.4;color:var(--muted)}
.site .cl-rep-scale li{display:flex;align-items:baseline;gap:8px;margin:0}
.site .cl-rep-scale strong{color:var(--ink);white-space:nowrap}
.site .cl-rep-scale i{flex:none;width:10px;height:10px;border-radius:50%;transform:translateY(1px)}
.site .cl-rep-scale .lvl-green i{background:#2e8b57}
.site .cl-rep-scale .lvl-amber i{background:#d4900f}
.site .cl-rep-scale .lvl-red i{background:#c0392b}
@media (max-width:899px){.site .cl-rep-scale{padding-left:20px;padding-right:20px;flex-direction:column}}
/* further reading (Mark 28 Oct 2026, ortho-K 3.8): the big link cards of "More resources"; five links sit 3 + 2 */
@media (min-width:1024px){
  .site--clinic .cl-further .cl-topics-grid[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .site--clinic .cl-further .cl-topics-grid[data-n="5"]>li>a{grid-column:span 2}
  .site--clinic .cl-further .cl-topics-grid[data-n="5"]>li:nth-child(n+4)>a{grid-column:span 3}}
.site--clinic .cl-topics--nophoto{display:block}
.site--clinic .cl-topics--nophoto .cl-topics-grid{grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:700px){.site--clinic .cl-topics--nophoto .cl-topics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.site--clinic .cl-topics--nophoto .cl-topics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.site--clinic .cl-topics--nophoto .cl-topics-grid>li{display:contents}
.site--clinic .cl-topics--nophoto .cl-topics-grid>li>a{flex:1;min-height:150px;padding:var(--s5) 64px var(--s5) var(--s5)}
.site--clinic .cl-topics--nophoto .cl-topics-grid .cl-t{font-size:var(--t3);line-height:1.2}
main.site .scrub-stage .btn--ghost{background:rgba(255,255,255,.14);color:#fff!important;border:0}
main.site .scrub-stage .btn--ghost:hover{background:rgba(255,255,255,.22)}
@media (min-width:900px){.site .cl-rep-scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
/* batch B critic round 1: the step names under the slider never touch on phones (only the ends and the current step are
   named below 500px; the others stay tappable); the suitability list stays in view beside the tall school-day chart */
@media (max-width:499px){main.site .scrub-stops button{font-size:var(--t1);padding-inline:0}
  main.site .scrub-stops button:not(:first-child):not(:last-child):not([aria-pressed="true"]){color:transparent}}
@media (min-width:1024px){.site--clinic #suitability .cl-two-a{position:sticky;top:96px;align-self:start}}

/* ---------- 43. Apple batch C (27 Oct 2026): the IPL hero VIDEO (Mark approved 26 Oct). site.js 17 plays it; the still and
   the full list of beats are the reduced-motion and no-script view. Desktop: the beats sit on the empty left of the 16:9
   frame, one at a time; phones: the square file with the current beat under it. ---------- */
.site--clinic .cl-vid{margin:0}
.site--clinic .cl-vid-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff}
.site--clinic .cl-vid-still{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.site--clinic .cl-vid-v{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;opacity:1}
.site--clinic .cl-vid.is-playing .cl-vid-v{opacity:1}
.site--clinic .cl-vid-beats{list-style:none;margin:0;padding:var(--s3) var(--s4) var(--s4);counter-reset:beat;display:grid;gap:6px;color:var(--body);font-size:var(--t1);line-height:1.4}
.site--clinic .cl-vid-beats li{counter-increment:beat}
.site--clinic .cl-vid-beats li::before{content:counter(beat) ". ";font-weight:700;color:var(--accent)}
.site--clinic .cl-vid.is-live:not(.is-phone) .cl-vid-beats{position:absolute;left:4%;top:0;width:34%;aspect-ratio:34/56.25;padding:0;display:block;color:var(--ink);font-weight:600;font-size:var(--t2);line-height:1.25}
.site--clinic .cl-vid.is-live .cl-vid-beats li{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity 400ms ease}
.site--clinic .cl-vid.is-live .cl-vid-beats li::before{content:none}
.site--clinic .cl-vid.is-live .cl-vid-beats li.is-on{opacity:1}
.site--clinic .cl-vid.is-phone .cl-vid-still,.site--clinic .cl-vid.is-phone .cl-vid-v{aspect-ratio:1/1}
.site--clinic .cl-vid.is-phone .cl-vid-beats{position:relative;min-height:3.2em;padding:var(--s3) var(--s4);display:block;color:var(--ink);font-weight:600}
.site--clinic .cl-vid.is-phone .cl-vid-beats li{left:var(--s4);right:var(--s4)}
.site--clinic .cl-vid-bar{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.site--clinic .cl-vid-btn{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:var(--t1);font-weight:600;cursor:pointer}
.site--clinic .cl-vid-btn[hidden]{display:none}
.site--clinic .cl-vid-btn:hover{background:rgba(255,255,255,.22)}
.site--clinic .cl-vid-btn:focus-visible{outline:3px solid var(--pale);outline-offset:2px}
.site--clinic .cl-vid-note{margin:0;font-size:var(--t1);color:#d6e5dc}
@media (prefers-reduced-motion:reduce){.site--clinic .cl-vid-v{transition:none}}
.site--clinic .cl-vid .cl-vid-stage img.cl-vid-still{aspect-ratio:16/9;height:auto;min-height:0;max-height:none;object-fit:cover}
.site--clinic .cl-vid.is-phone .cl-vid-stage img.cl-vid-still{aspect-ratio:1/1}
.site--clinic .hero--deep .cl-vid .cl-cap{color:#b9cfc4}
/* Mark 7 Nov 2026 note 5 (IPL hero): video much more prominent, about double the area and square (45/55 split; right-hand square of the 16:9 clip), caption beats in a strip under the stage */
@media (min-width:1024px){.site--clinic .hero--deep .hero-grid:has(.cl-vid){grid-template-columns:45fr 55fr}
  .site--clinic .hero--deep .hero-grid:has(.cl-vid)>.hero-copy{padding-bottom:var(--s7)}   /* Mark 8 Nov 2026 H1 (V55): the words centre on the picture card, not on the card plus its caption lines */
  .site--clinic .hero--deep .cl-vid .cl-vid-stage img.cl-vid-still,.site--clinic .hero--deep .cl-vid .cl-vid-v{aspect-ratio:1/1;object-fit:cover;object-position:100% 50%}
  .site--clinic .hero--deep .cl-vid.is-live:not(.is-phone) .cl-vid-beats{position:relative;left:auto;top:auto;width:auto;aspect-ratio:auto;min-height:3.2em;padding:var(--s3) var(--s4)}
  .site--clinic .hero--deep .cl-vid.is-live:not(.is-phone) .cl-vid-beats li{left:var(--s4);right:var(--s4)}}
@media (max-width:699px){.site--clinic .hero--deep .cl-vid .cl-vid-stage img.cl-vid-still{aspect-ratio:1/1;object-position:100% 50%}}   /* critic 8 Nov (IPL hero, Mark note 5): the phone still is square like the phone clip, the eye stays in frame */

/* ---------- 44. consistency pass (27 Oct 2026): one way to show a box inside a box ----------
   impeccable "card inside card" (ortho-K 12, the school-day card and the SightTrack sample report): a box that sits
   inside a card is a borderless grey fill, the same as the "we don't fit every child" reasons; only a card has a rule. */
.site--clinic .cl-day-moment>div,.site .cl-rep-tile,.site .cl-rep-note{border-color:transparent;background:var(--grey)}
.site--clinic .cl-day-moment>.cl-day-b-box,.site .cl-rep-tile.ok{border-color:transparent;background:var(--accent-tint)}
.site .cl-rep-tile.bad{border-color:transparent}
.site .cl-rep-chart{border-color:transparent;padding-inline:0}
/* the static review grid (reduced motion, no script): a short last row is centred on the page axis */




/* the results figures were missed by the Apple type pass (serif-weight green); they now read like every other figure:
   display weight, tight, the deep green of .stat .num */
main.site .result-num{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;color:var(--deep)}
/* a hero whose subline was authored as headings (Rhodes: two h2 lines) reads as the one hero lead every other page has,
   not as two bold 24px titles (consistency pass, 27 Oct) */
main.site .hero .hero-copy>.flow>.title--in{font-family:var(--font-text);font-size:var(--t3);font-weight:400;line-height:1.5;letter-spacing:-.012em;color:var(--body)}
main.site .hero .hero-copy>.flow>.title--in em{font-style:normal}
main.site .hero .hero-copy>.flow:has(>.title--in)+.flow:has(>.title--in){margin-top:0}
/* tablets (critic, 27 Oct, taste L10): a clinic card grid that falls to two columns never leaves its odd last card beside
   an empty cell; it takes the full row */
@media (min-width:700px) and (max-width:1023px){
  .site--clinic .cl-xcards,.site--clinic .cl-further-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site--clinic .cl-xcards>:last-child:nth-child(odd),.site--clinic .cl-further-grid>:last-child:nth-child(odd){grid-column:1/-1}}
/* a chip in a grey hero is a white pill (the tint is grey in the Apple palette, so the chip vanished and its text sat
   12px in from the hero's edge; critic, ortho-K, 27 Oct) */
main.site .hero:not(.hero--landing):not(.hero--deep) .chip{background:#fff}
}

@layer pages{
main.site--home .s .head .title{max-width:18ch}
main.site--home .s .head .lead{max-width:var(--measure)}
main.site--home .hero--landing .eyebrow{font-size:var(--t2)}
main.site--home .hero--landing .rating{color:#e9efec;margin-top:var(--s6)}   /* Mark 1 Nov 2026 C2: the reviews line lower down */
main.site--home .hero--landing .actions{gap:var(--s4) var(--s5);margin-top:var(--s6)}   /* C2: more space round the buttons */
main.site--home .hero--landing .btn{min-height:64px;padding:18px 38px;font-size:var(--t3)}   /* C2: Book and Call larger */
@media (max-width:699px){main.site--home .hero--landing{padding-block:32px}main.site--home .hero--landing .actions{gap:var(--s3);margin-top:var(--s5)}main.site--home .hero--landing .rating{margin-top:var(--s5)}main.site--home .hero--landing .btn{min-height:58px;padding:16px 34px}}   /* C1 phone: 10-20% shallower with the larger buttons */
main.site--home #start-here .cards{gap:var(--s4)}
@media (min-width:1024px){main.site--home #start-here .cards{gap:var(--s6)}}   /* Mark 1 Nov 2026 C5: more space between the four tiles */
@media (min-width:1024px){main.site--home #start-here .cards--4>*{grid-column:span 3}
}
main.site--home #start-here .card{background:var(--grey);border:0;border-radius:var(--r-md);overflow:hidden;padding:0}
main.site--home #start-here .card-img{margin:0;border-radius:0}
main.site--home #start-here .card-img img{aspect-ratio:1/1;width:100%;object-fit:cover;border-radius:0}
main.site--home #start-here .card>:not(.card-img){margin-inline:var(--s4)}
main.site--home #start-here .card>:last-child{margin-bottom:var(--s5)}
main.site--home #start-here .card .tag{background:none;padding:0;margin-top:var(--s4);font-size:var(--t1);font-weight:600;color:var(--accent);letter-spacing:.01em}
main.site--home #start-here .after .card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);padding:var(--s4) var(--s5);text-align:left}
main.site--home #start-here .after .card>*{margin:0}
main.site--home #start-here .after .cards{display:block}
main.site--home #reviews .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);text-align:left}
main.site--home #reviews .stat{border-top:1px solid var(--line);padding-top:var(--s4);align-items:flex-start;text-align:left}
main.site--home #reviews .stat .num{color:var(--ink)}
main.site--home #reviews .rvw{background:#fff;border:0!important;border-radius:var(--r-md);padding:var(--s5);margin:0 var(--s2);width:min(360px,82vw)}
main.site--home #reviews .reviews{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
main.site--home #reviews .reviews:not(.is-moving){-webkit-mask-image:none;mask-image:none}
main.site--home #reviews .reviews:not(.is-moving) .rv-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
main.site--home #reviews .reviews:not(.is-moving) .rv-track>.rvw{width:auto;margin:0;flex:none}
main.site--home #reviews .logos{display:flex;gap:var(--s4);justify-content:center;align-items:center}   /* Mark 2 Nov evening (staging item 3): Medicare and HICAPS centred */
main.site--home #reviews .logos img{max-height:32px;padding:0;background:none}
main.site--home #reviews .col.flow{text-align:left}
@media (max-width:699px){main.site--home #reviews .stats{grid-template-columns:1fr}
}
@media (min-width:1024px){main.site--home .s--split .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s7)}
main.site--home .s--split .split-visual{align-self:start}
main.site--home #why-us .split-visual--photo .ph img{aspect-ratio:4/5}
main.site--home #dry-eye .split{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
main.site--home #dry-eye .split-visual--photo .ph img{aspect-ratio:1/1}
main.site--home #dry-eye .ph :is(img,.loopvid){object-position:62% 50%}   /* the IPL clip (Mark 29 Oct): square frame, eye and handpiece kept in view */
/* #children (Mark 7 Nov 2026 home review 3, no blank right side): the 1.15fr photo column and square crop removed, so it takes the equal columns above, as multifocals; the lead sits on one line */
main.site--home #multifocals .split-visual--photo .ph img{aspect-ratio:4/5;max-height:640px}
}
main.site--home .split-visual--photo .ph img{border-radius:var(--r-photo)}
main.site--home .tags{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0}
main.site--home .tags li{background:var(--accent-tint);color:var(--accent);font-weight:600;font-size:var(--t1);line-height:1.2;padding:8px 14px;border-radius:999px}
main.site--home .split-text .head .lead{font-size:var(--t3)}
main.site--home #multifocals .split-text .logos{gap:var(--s6);margin-top:var(--s4)}
main.site--home #multifocals .split-text .logos img{max-height:none;max-width:none;padding:0;background:none}
main.site--home #multifocals .split-text .logos img[alt="Logo of Carl Zeiss"]{height:170px;width:auto}
main.site--home #multifocals .split-text .logos img[alt="HOYA"]{height:96px;width:auto}
@media (max-width:699px){main.site--home #multifocals .split-text .logos img[alt="Logo of Carl Zeiss"]{height:120px}
main.site--home #multifocals .split-text .logos img[alt="HOYA"]{height:68px}
}
main.site--home .s.bg-dark{background:var(--night);color:#f5f5f7}
main.site--home .s.bg-dark :is(.title,.sub){color:#fff}
main.site--home .s.bg-dark .lead,main.site--home .s.bg-dark p{color:#c9d1cd}
main.site--home .s.bg-dark .eyebrow{color:#9fd8c1}
main.site--home .s.bg-dark a{color:#9fd8c1}
main.site--home .s.bg-dark .head .lead:first-of-type{color:#fff;font-weight:600}
main.site--home .s.bg-dark .card{background:var(--night-2);border:0;border-radius:var(--r-md);overflow:hidden;padding:0;color:#f5f5f7}
main.site--home .s.bg-dark .card-img{margin:0;background:#000}
main.site--home .s.bg-dark .card-img img{aspect-ratio:3/2;width:100%;object-fit:cover;border-radius:0}
main.site--home .s.bg-dark .card-img img[src*="misight"]{object-fit:contain;background:#fff}
main.site--home .s.bg-dark .card>:not(.card-img){margin-inline:var(--s4)}
main.site--home .s.bg-dark .card .sub{margin-top:var(--s4)}
main.site--home .s.bg-dark .card .p{color:#c9d1cd}
main.site--home .s.bg-dark .card .go{color:#9fd8c1;font-weight:600;margin-bottom:var(--s5)}
main.site--home .s.bg-dark .after{display:grid;gap:var(--s4);background:var(--night-2);border-radius:var(--r-md);padding:var(--s5)}
@media (min-width:1024px){main.site--home .s.bg-dark .after{grid-template-columns:1fr 1fr}
main.site--home .s.bg-dark .after>*{margin:0}
}
@media (min-width:1024px){main.site--home .loc{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1.05fr) minmax(0,1.5fr);gap:40px;align-items:stretch}
main.site--home .loc-map{display:flex;flex-direction:column}main.site--home .loc-map iframe{flex:1 1 auto;aspect-ratio:auto;min-height:420px}   /* Mark 1 Nov 2026 C12/C13: address, hours and map as three boxes filling the page grid (the map keeps its locked share), more space between them */
main.site--home .loc-info{display:contents}
}
main.site--home .loc-info strong{display:block;font-size:var(--t1);font-weight:600;color:var(--muted);letter-spacing:.01em;margin-bottom:2px}
main.site--home .loc-info .flow>p+p{margin-top:var(--s4)}
main.site--home .loc-info>div{background:var(--grey);border-radius:var(--r-md);padding:var(--s5) var(--s4)}   /* C11: the Find us band is white, its boxes grey */
main.site--home .hours li{padding:10px 0;border-bottom:1px solid var(--line)}
main.site--home .hours li:last-child{border-bottom:0}
main.site--home .hours li+li{margin-top:0}
main.site--home .loc-map iframe{border-radius:var(--r-md);aspect-ratio:1/1}   /* Mark 29 Oct home note 1.14: bigger, closer to square */
main.site--home .loc-map p{margin-top:var(--s3)}
main.site--home #team .head+.cards{margin-top:var(--s7)}   /* Mark 29 Oct home note 1.12a: more space between the paragraph and the team photos */
main.site--home .loc-map p a{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;background:rgba(0,0,0,.05);color:var(--ink);font-weight:600;text-decoration:none}
main.site--home .cta--close .title{font-size:var(--t4);max-width:16ch}
main.site--home .loc-info strong+br{display:none}
main.site--home #multifocals .split-text .logos{flex-wrap:nowrap;align-items:center}
main.site--home #multifocals .split-text .logos img[alt="Logo of Carl Zeiss"]{width:150px;height:150px;object-fit:cover}
main.site--home #multifocals .split-text .logos img[alt="HOYA"]{height:90px}
@media (max-width:699px){main.site--home #multifocals .split-text .logos img[alt="Logo of Carl Zeiss"]{width:112px;height:112px}
main.site--home #multifocals .split-text .logos img[alt="HOYA"]{height:64px}
}
main.site--home #reviews .stat .num{font-size:var(--t6)}
@media (max-width:699px){main.site--home .loc-info>div{background:none;padding:0}
}
main.site--home .s.bg-dark .after .cards{gap:var(--s4)}
main.site--home .s.bg-dark .after{background:none;padding:0}
main.site--home .s.bg-dark .after .card{padding:var(--s5)}
main.site--home .s.bg-dark .after .card>*{margin-inline:0}
main.site--home .s.bg-dark .after{display:block;width:100%}
main.site--home .s.bg-dark .after .cards{display:grid;grid-template-columns:1fr;gap:var(--s4);width:100%;max-width:none;margin:0}
@media (min-width:700px){main.site--home .s.bg-dark .after .cards{grid-template-columns:1fr 1fr}
}
main.site--home .s.bg-dark .after .card{width:auto;max-width:none;text-align:left;padding:var(--s5)}
main.site--home .s.bg-dark .after .card p{text-align:left;max-width:none;margin:0}
main.site--home #start-here .after .card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t g" "p g";align-items:center;justify-items:start;gap:6px var(--s5);text-align:left}
main.site--home #start-here .after .card>*{text-align:left;margin:0}
main.site--home #start-here .after .card .sub{grid-area:t}
main.site--home #start-here .after .card .p{grid-area:p}
main.site--home #start-here .after .card .go{grid-area:g}
@media (max-width:699px){main.site--home #start-here .after .card{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "p" "g";gap:var(--s2)}
}
main.site--home #reviews .reviews:not(.is-moving) .rv-track{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4)}
main.site--home #reviews .reviews:not(.is-moving) .rv-track>.rvw{flex:1 0 100%}   /* L10 (round-4 critic Q8): a short last row stretches to fill the row */
@media (min-width:700px){main.site--home #reviews .reviews:not(.is-moving) .rv-track>.rvw{flex-basis:calc((100% - var(--s4)) / 2)}
}
@media (min-width:1024px){main.site--home #reviews .reviews:not(.is-moving) .rv-track>.rvw{flex-basis:calc((100% - 2 * var(--s4)) / 3)}
}
}

/* UNLAYERED on purpose (end of file): rules that restyle the shared header/footer (header.css, chrome.css and the
   footer style are unlayered, so these keep their old standing against them), and any rule that has to keep
   beating one of those. */
body.layout-site .cec-hd-bar,body.layout-site .cec-mm-wrap{width:min(var(--max),calc(100% - 2 * var(--hd-gutter)))}
body.layout-site .cec-hd{--hd-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif}
body.layout-site .cec-site-footer :is(p,li,a,span,div){font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif!important}
body.layout-site .cec-site-footer :is(h1,h2,h3,h4){font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important}

/* ---------- 51. OVERNIGHT KIT (2 Nov 2026; Fable's blank-sheet MiyoSmart spec, brain repo page-factory/site-build/reset/
   overnight-2026-11-02/miyosmart/SPEC.md, Mark's notes M1-M11). Generic blocks any reset page may use (sitegen CL:
   factlist, medianotes, sources, faces, versus, fitstage, steplist, ftiles, daybar, pcards, practice, timeline). Two widths
   only: a block sits in the reading column (--measure) or, for fitstage / ftiles / pcards / timeline, on the container.
   Cards and panels are white on a grey band and grey on a white band. Behaviour: site.js 19 (fit stage). ---------- */
@layer components{
/* factlist: a hairline fact list (hero facts) */
main.site .facts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
main.site .facts li{margin:0;padding:12px 0;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink);line-height:1.4}
/* medianotes: the required text under an explainer, ruled cells (one row from 700px) */
main.site .media-notes{display:grid;border-top:1px solid var(--line);text-align:left}
main.site .media-notes>div{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){main.site .media-notes{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:auto auto}   /* round-3 critic Q15: one subgrid, a wrapped title never pushes its line lower */
  main.site .media-notes>div{padding:var(--s4) var(--s4) var(--s4) 0;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}
  main.site .media-notes>div+div{padding-left:var(--s4);border-left:1px solid var(--line)}}
main.site .media-notes .mn-t{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
main.site .media-notes .mn-p{margin:var(--s2) 0 0;font-size:var(--t1);line-height:1.45;color:var(--muted)}
/* sources: one source per line, bold lead-in; two columns from 900px */
main.site .sources{list-style:none;margin:0;padding:0;font-size:var(--t1);line-height:1.45;color:var(--muted);text-align:left}
main.site .sources li{margin:0;padding:6px 0}
main.site .sources strong{font-weight:600;color:var(--ink)}
@media (min-width:900px){main.site .sources{columns:2;column-gap:var(--s6)}main.site .sources li{break-inside:avoid}}
/* faces: drawings side by side at one scale; lens drawings (lens-face, fit-svg) are hairlines + a computed grid, ink only */
main.site .faces{display:grid;gap:var(--s5)}
@media (min-width:700px){main.site .faces{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s6)}}
main.site .faces figure{margin:0;display:grid;justify-items:center;text-align:center}
main.site .faces svg{display:block;width:min(100%,380px);height:auto}
main.site .faces figcaption{margin-top:var(--s3);font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
main.site .faces figcaption small{display:block;margin-top:var(--s1);font-family:var(--font-text);font-weight:400;font-size:var(--t1);letter-spacing:0;color:var(--muted)}
main.site :is(.lens-face,.fit-svg) .disc{stroke:#c9ccd1;stroke-width:1.2}
main.site .lens-face .seg{fill:rgba(29,29,31,.16)}
main.site .fit-svg .seg{fill:#d2d3d8;opacity:.95}
main.site .lens-face .tzone{fill:none;stroke:#1d1d1f;stroke-opacity:.22;stroke-width:1.2;stroke-dasharray:4 6}
main.site :is(.lens-face,.fit-svg) .clear{fill:none;stroke:#1d1d1f;stroke-opacity:.6;stroke-width:1.6}
main.site :is(.lens-face,.fit-svg) .dim line{stroke:#1d1d1f;stroke-opacity:.7;stroke-width:1.4}
main.site :is(.lens-face,.fit-svg) .dim text{font-size:22px;font-weight:600;fill:#1d1d1f;letter-spacing:-.01em;paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
/* versus: label | A | B on hairlines; measured values in display size, the B column (the newer option) in 600 weight */
main.site .versus{border-top:1px solid var(--line);text-align:left}
main.site .versus-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:var(--s3);padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
main.site .versus-row>:first-child{color:var(--muted);font-weight:500}
main.site .versus-row>:nth-child(2){color:var(--body)}
main.site .versus-row>:nth-child(3){color:var(--ink);font-weight:600}
main.site .versus-row--head>*{font-size:var(--t1);font-weight:600;letter-spacing:.01em;color:var(--muted)!important}
main.site .versus .big{font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.2;letter-spacing:-.016em}
main.site .versus-row>:nth-child(2) .big{font-weight:500}
@media (max-width:699px){main.site .versus-row{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
  main.site .versus-row>:first-child{grid-column:1/-1;font-size:var(--t1)}
  main.site .versus-row--head>:first-child{display:none}}
main.site .versus-note{margin:var(--s5) 0 0;text-align:center;color:var(--body)}
/* fitstage: a state-switched drawing on a panel, beside its side text (one text + visual row from 900px) */
main.site .fit-row{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){main.site .fit-row:not(.fit-row--solo){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter-2)}}
main.site .fit-stage{margin:0;display:grid;justify-items:center;background:#fff;border-radius:var(--r-lg);padding:var(--s4);text-align:center}
main.site .bg-white .fit-stage{background:var(--grey)}
main.site .fit-stage svg{display:block;width:min(100%,460px);height:auto}
main.site .fit-svg [data-move]{transition:transform 520ms cubic-bezier(.2,.8,.2,1)}
main.site .fit-stage[data-state="2"] [data-move="10"]{transform:translateY(10px)}
main.site .fit-stage[data-state="2"] [data-move="20"]{transform:translateY(20px)}
main.site .fit-stage[data-state="2"] [data-move="30"]{transform:translateY(30px)}
@media (prefers-reduced-motion:reduce){main.site .fit-svg [data-move]{transition:none}}
main.site .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s4)}
main.site .fit-stage:not(.is-live) .pills{display:none}
main.site .pill{min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 18px;font:600 var(--t1)/1.2 var(--font-text);cursor:pointer;transition:transform 120ms ease-out,background-color 120ms ease-out}
main.site .pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
main.site .pill:active{transform:scale(.97)}
main.site .pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
main.site .fit-caption{margin-top:var(--s3);min-height:3.2em;color:var(--body)}
main.site .fit-caption>span{display:block}
main.site .fit-stage.is-live[data-state="1"] .cap-2,main.site .fit-stage.is-live[data-state="2"] .cap-1{display:none}
main.site .fit-side{text-align:left}
/* steplist: a short ruled step list */
main.site .steplist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);text-align:left}
main.site .steplist li{margin:0;display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
main.site .steplist .n{font-family:var(--font-display);font-weight:700;font-size:var(--t3);line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
main.site .steplist .sl-t{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.25;letter-spacing:-.016em;color:var(--ink)}
main.site .steplist .sl-t+p{margin:var(--s1) 0 0;color:var(--body)}
/* ftiles: sourced figure tiles with ONE anatomy; from 1024px (stacked below: 3-up at tablet width wrapped the figures) the parts share row tracks (subgrid), so figures, titles and
   sources line up across the row (M6) */
main.site .ftiles{display:grid;gap:var(--s4)}
main.site .ftile{display:flex;flex-direction:column;border-radius:var(--r-md);padding:var(--s6) var(--s5);background:#fff;text-align:left}   /* Mark 2 Nov M6: more space, less text per box */
main.site .bg-white .ftile{background:var(--grey)}
@media (min-width:1024px){main.site .ftiles{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:var(--s5);row-gap:0}
  main.site .ftile{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}}
main.site .ftile>*{margin:0}
main.site .ftile .k{font-size:var(--t1);font-weight:600;line-height:1.4;letter-spacing:.01em;color:var(--muted)}
main.site .ftile .num{margin-top:var(--s3);font-family:var(--font-display);font-size:var(--t6);font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--ink)}
main.site .ftile .ft-t{margin-top:var(--s3);font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.25;letter-spacing:-.016em;color:var(--ink)}
main.site .ftile .ft-p{margin-top:var(--s3);color:var(--body)}
main.site .ftile .src{margin-top:var(--s4);align-self:start;border-top:1px solid var(--line);padding-top:var(--s3);font-size:var(--t1);line-height:1.45;color:var(--muted)}
main.site .ft-note{margin-top:var(--s6);text-align:center;text-wrap:balance;color:var(--body)}
@media (max-width:699px){main.site :is(.ft-note,.versus-note){text-align:left}}   /* phones keep everything left-set (section 3) */
/* daybar: a day (6am-9pm) on one bar; positions are registered per whole hour */
main.site .daybar{margin:0}
main.site .db-track{position:relative;height:14px;border-radius:999px;background:#e3e3e8}
main.site .db-on{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--ink)}
main.site .db-marks{position:relative;height:1.6em;margin-top:var(--s3);font-size:var(--t1);color:var(--muted)}
main.site .db-marks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
main.site .db-marks span[data-h="0"]{left:0%;transform:none}main.site .db-marks span[data-h="1"]{left:6.667%}main.site .db-marks span[data-h="2"]{left:13.333%}main.site .db-marks span[data-h="3"]{left:20%}main.site .db-marks span[data-h="4"]{left:26.667%}main.site .db-marks span[data-h="5"]{left:33.333%}main.site .db-marks span[data-h="6"]{left:40%}main.site .db-marks span[data-h="7"]{left:46.667%}main.site .db-marks span[data-h="8"]{left:53.333%}main.site .db-marks span[data-h="9"]{left:60%}main.site .db-marks span[data-h="10"]{left:66.667%}main.site .db-marks span[data-h="11"]{left:73.333%}main.site .db-marks span[data-h="12"]{left:80%}main.site .db-marks span[data-h="13"]{left:86.667%}main.site .db-marks span[data-h="14"]{left:93.333%}main.site .db-marks span[data-h="15"]{left:100%;transform:translateX(-100%)}
main.site .db-on[data-from="0"]{left:0%}main.site .db-on[data-from="1"]{left:6.667%}main.site .db-on[data-from="2"]{left:13.333%}main.site .db-on[data-from="3"]{left:20%}main.site .db-on[data-from="4"]{left:26.667%}main.site .db-on[data-from="5"]{left:33.333%}main.site .db-on[data-from="6"]{left:40%}main.site .db-on[data-from="7"]{left:46.667%}main.site .db-on[data-from="8"]{left:53.333%}main.site .db-on[data-from="9"]{left:60%}main.site .db-on[data-from="10"]{left:66.667%}main.site .db-on[data-from="11"]{left:73.333%}main.site .db-on[data-from="12"]{left:80%}main.site .db-on[data-from="13"]{left:86.667%}main.site .db-on[data-from="14"]{left:93.333%}main.site .db-on[data-from="15"]{left:100%}
main.site .db-on[data-to="0"]{right:0%}main.site .db-on[data-to="1"]{right:6.667%}main.site .db-on[data-to="2"]{right:13.333%}main.site .db-on[data-to="3"]{right:20%}main.site .db-on[data-to="4"]{right:26.667%}main.site .db-on[data-to="5"]{right:33.333%}main.site .db-on[data-to="6"]{right:40%}main.site .db-on[data-to="7"]{right:46.667%}main.site .db-on[data-to="8"]{right:53.333%}main.site .db-on[data-to="9"]{right:60%}main.site .db-on[data-to="10"]{right:66.667%}main.site .db-on[data-to="11"]{right:73.333%}main.site .db-on[data-to="12"]{right:80%}main.site .db-on[data-to="13"]{right:86.667%}main.site .db-on[data-to="14"]{right:93.333%}main.site .db-on[data-to="15"]{right:100%}
main.site .db-moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3);text-align:center}
@media (min-width:700px){main.site .db-moments{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
main.site .flow>.db-moments{margin-top:var(--s6)}
main.site .db-moments p{margin:0}
main.site .db-moments .db-t{font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
main.site .db-moments .db-p{margin-top:var(--s1);font-size:var(--t1);color:var(--muted)}
main.site .db-rule{text-align:center;font-family:var(--font-display);font-weight:600;font-size:var(--t3);letter-spacing:-.016em;color:var(--ink)}
/* pcards: product cards, a real supplier image (4:3) + maker, name, one line, price, credit */
main.site .pcards{display:grid;gap:var(--s4)}
@media (min-width:700px){main.site .pcards{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
main.site .pcard{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-md);background:#fff;text-align:left}
main.site .bg-white .pcard{background:var(--grey)}
main.site .pcard .ph{aspect-ratio:4/3;overflow:hidden;background:#fff}
main.site .pcard .ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
main.site .pc-body{flex:1;display:flex;flex-direction:column;padding:var(--s4) var(--s4) var(--s5)}
main.site .pc-body>*{margin:0}
main.site .pcard .maker{font-size:var(--t1);font-weight:600;color:var(--muted)}
main.site .pcard .pc-t{margin-top:var(--s1);font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
main.site .pcard .pc-p{margin-top:var(--s3);color:var(--body)}
main.site .pcard .price-line{margin-top:auto;padding-top:var(--s4);font-family:var(--font-display);font-weight:700;font-size:var(--t3);letter-spacing:-.02em;color:var(--deep)}
main.site .pcard .price-line small{display:block;margin-top:2px;font:400 var(--t1)/1.4 var(--font-text);letter-spacing:0;color:var(--muted)}
main.site .pcard .credit{margin-top:var(--s3);font-size:var(--t1);color:var(--muted)}
/* practice: a practice-experience statement, tinted box with a bold lead-in */
main.site .practice{padding:var(--s4) var(--s5);border-radius:var(--r-md);background:#fff;color:var(--body);text-align:left}
main.site .bg-white .practice{background:var(--grey)}
main.site .practice strong{color:var(--ink)}
/* timeline: visit nodes on one hairline (horizontal from 900px, vertical below); tone b = the clinician (green) */
main.site .timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);position:relative;text-align:left}
main.site .timeline li{position:relative;margin:0}
main.site .timeline li::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--ink)}
main.site .timeline li.tl-b::before{background:var(--accent)}
main.site .timeline::before{content:"";position:absolute;background:var(--line)}
@media (min-width:900px){main.site .timeline{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s4)}
  main.site .timeline::before{left:0;right:0;top:7px;height:2px}
  main.site .timeline li{padding-top:var(--s5)}
  main.site .timeline li::before{left:0;top:0}}
@media (max-width:899px){main.site .timeline{padding-left:var(--s5)}
  main.site .timeline::before{left:7px;top:4px;bottom:4px;width:2px}
  main.site .timeline li::before{left:calc(-1 * var(--s5));top:6px}}
main.site .timeline p{margin:0}
main.site .timeline .when{font-family:var(--font-display);font-weight:700;font-size:var(--t3);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
main.site .timeline .who{margin-top:var(--s1);font-size:var(--t1);font-weight:600;color:var(--muted)}
main.site .timeline .tl-p{margin-top:var(--s2);color:var(--body)}
main.site .timeline-key{margin:var(--s5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s4);font-size:var(--t1);color:var(--muted)}
@media (min-width:700px){main.site .timeline-key{justify-content:center;text-align:center}}   /* G8: under a centred head the key sits on the axis; phones left-set */
main.site .timeline-key>span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--ink);vertical-align:middle}
main.site .timeline-key>span.tl-b::before{background:var(--accent)}
/* after: notes + read-mores under a container-wide block, reading measure on the container's left edge */
main.site .kit-after{max-width:var(--measure);margin-top:var(--s6);text-align:left}
}   /* end @layer components (overnight lane section) */
@layer components{
/* ---------- 55. COMPARISON COMPONENTS (overnight 2 Nov 2026, compare lane: Fable specs glasses-compared G2-G16 and
   treatments-compared T2-T9; sitegen CMP, components.html.j2 cmpb, site.js 19). Generic: any page body may use them.
   A card on a white band is Apple grey; on a grey band it is white. Hairlines, not boxes, inside a card (V46: no
   stripes). Numbers in display type. Phones: one column, photos 4:3. ---------- */
main.site{--vs-card:var(--grey)}
main.site .s.bg-tint{--vs-card:#fff}
main.site :is(.vs-trio,.vs-opts,.vs-ladder,.vs-plist,.vs-factors,.vs-words,.vs-fa ul,.vs-rows){list-style:none;margin:0;padding:0}
main.site :is(.vs-trio,.vs-opts,.vs-news,.vs-prices,.vs-fa,.vs-words,.vs-fees,.vs-factors,.vs-points,.vs-grid,.vs-ladder,.vs-flow) p{margin:0}
main.site .vs-card,main.site .vs-trio--tile>li{background:var(--vs-card);border-radius:var(--r-md);overflow:hidden}
main.site .vs-name{font-family:var(--font-display);font-size:var(--t3);font-weight:700;line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
main.site .vs-maker{font-size:var(--t1);color:var(--muted)}
main.site .vs-credit{text-align:center;margin-top:var(--s3)}
main.site .vs-foot{margin-top:var(--s4)}
main.site .col.centre>.details{text-align:left}   /* a disclosure under a centred lead opens on its own left edge, like every other disclosure (critic 2 Nov Q10) */
main.site .vs-foot--centre{text-align:center;margin-top:var(--s5)}
/* the photo frame: cover by default; contain = a pack shot whole on white; zoom = a closer crop (the real dots); crop =
   a product shot whose own white margin is cut away; a placeholder photo is faded with its tag (launch gate catches it) */
main.site .vs-ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:#eaeaee}
main.site .vs-ph>img{width:100%;height:100%;object-fit:cover;border-radius:0}
main.site .vs-ph--contain{background:var(--grey)}main.site .bg-tint .vs-ph--contain{background:#eaeaee}   /* critic 2 Nov Q10: a contain-fit product shot sits on its own tile */
main.site .vs-ph--contain>img{object-fit:contain;padding:5%}
main.site .vs-ph--zoom>img{transform:scale(1.9)}
main.site .vs-ph--crop>img{transform:scale(1.45);transform-origin:52% 50%}
main.site .vs-ph.is-pending{background:#eaeaee}
main.site .vs-ph.is-pending>img{object-fit:contain;padding:12%;opacity:.55}
main.site .vs-tag{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--muted);font-size:var(--t1);line-height:1.3;padding:4px 10px;border-radius:999px}

/* 55a. photo trio (lens-trio, G3/G4): three equal tiles, square photo, text centred; bare = photos without the tile */
main.site .vs-trio{display:grid;gap:var(--s4)}
main.site .vs-trio>li,main.site .vs-opts>li{display:flex;flex-direction:column}
main.site .vs-trio--bare .vs-ph{border-radius:var(--r-md)}
main.site .vs-trio .vs-body{display:flex;flex-direction:column;gap:var(--s2);text-align:center;flex:1}main.site .vs-trio .vs-body>.vs-price{margin-top:auto}   /* critic 2 Nov Q15: price pinned to the card foot (margin-top:auto) so prices line up */
main.site .vs-trio--tile .vs-body{padding:var(--s4) var(--s4) var(--s5)}
main.site .vs-trio--bare .vs-body{padding-top:var(--s4)}
main.site .vs-line{color:var(--body)}
main.site .vs-price{font-family:var(--font-display);font-size:var(--t3);font-weight:700;letter-spacing:-.02em;color:var(--deep);margin-top:auto;padding-top:var(--s2)}
main.site .vs-price small{display:block;font-family:var(--font-text);font-weight:400;font-size:var(--t1);letter-spacing:0;color:var(--muted)}
@media (min-width:700px){main.site .vs-trio{grid-template-columns:repeat(3,minmax(0,1fr))}main.site .vs-trio .vs-ph{aspect-ratio:1/1}}

/* 55b. comparison grid (compare-grid + seg-control, G5): options as columns with a thumbnail head, questions as rows;
   below 900px the pills show one column (script) or every column is listed with its name (no script) */
main.site .vs-heads{display:none}
main.site .vs-row{display:grid;gap:var(--s2);border-top:1px solid var(--line);padding:var(--s4) 0}
main.site .vs-row:last-child,main.site .vs-plist>li:last-child,main.site .vs-ladder>li:last-child,main.site .vs-fa li:last-child,main.site .vs-rows>li:last-child{border-bottom:1px solid var(--line)}
main.site .vs-k,main.site .vs-when,main.site .vs-unit,main.site .vs-fees dt{font-size:var(--t1);font-weight:600;color:var(--muted)}
main.site .vs-v{color:var(--ink);line-height:1.4}
main.site .vs-v b{font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;color:var(--ink)}
main.site .vs-v .small{margin-top:2px}
main.site .vs-lens{font-size:var(--t1);font-weight:600;color:var(--accent);margin-bottom:2px}
main.site .vs-seg[hidden]{display:none}
@media (max-width:899px){
  main.site .vs-seg:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--vs-card);padding:4px;border-radius:999px;margin-bottom:var(--s4)}
  main.site .s.bg-tint .vs-seg{background:#e8e8ed}
  main.site .vs-seg button{border:0;background:transparent;font:inherit;font-size:var(--t1);font-weight:600;line-height:1.25;color:var(--ink);padding:10px 6px;border-radius:999px;cursor:pointer;min-height:44px}
  main.site .vs-seg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
  main.site .vs-grid.is-live .vs-v,main.site .vs-grid.is-live .vs-lens{display:none}
  main.site .vs-grid.is-live .vs-v.is-on{display:block}}
@media (min-width:900px){
  main.site .vs-seg{display:none}
  main.site .vs-heads{display:grid;grid-template-columns:200px repeat(3,minmax(0,1fr));gap:var(--s4);align-items:end;padding-bottom:var(--s4)}
  main.site .vs-colhead{display:grid;gap:var(--s2);justify-items:start}
  main.site .vs-colhead img{width:88px;height:88px;object-fit:cover;border-radius:var(--r-sm)}
  main.site .vs-colhead img[data-orient~="drawing"]{object-fit:contain;background:#fff}
  main.site .vs-row{grid-template-columns:200px repeat(3,minmax(0,1fr));gap:var(--s4);align-items:start}
  main.site .vs-k{font-size:var(--t2);color:var(--ink)}
  main.site .vs-grid[data-n="2"] :is(.vs-heads,.vs-row){grid-template-columns:200px repeat(2,minmax(0,1fr))}   /* critic 8 Nov (MGD types): a two-option grid fills the row, no empty third column */
  main.site .vs-lens{display:none}}

/* 55c. starting points + practice note (G7): hairline rows beside a photo; the note is a calm grey box, bold first line */
main.site .vs-points{display:grid;gap:var(--s5);align-items:center}
main.site .vs-plist>li{display:grid;gap:var(--s1);border-top:1px solid var(--line);padding:var(--s4) 0}
main.site .vs-pnote{background:var(--vs-card);border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-top:var(--s5)}
main.site .vs-pnote-k{font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;color:var(--ink);margin-bottom:var(--s2)}
main.site .vs-side{margin:0}
main.site .vs-side img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-photo)}
main.site .vs-side figcaption{margin-top:var(--s2)}
@media (min-width:1024px){main.site .vs-points--side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:stretch}
  main.site .vs-side{display:flex;flex-direction:column}
  main.site .vs-side img{flex:1 1 0;min-height:0;height:100%;aspect-ratio:auto}
  main.site .vs-side:has(img[data-orient~="whole"]){position:sticky;top:96px;align-self:start}   /* Mark 7 Nov 2026 (images whole): a 'whole' photo beside a long list keeps its shape and travels with the words */
  main.site .vs-side img[data-orient~="whole"]{flex:none;height:auto;aspect-ratio:1/1}}

/* 55d. evidence ladder (G10): hairline rows; who, two figures, a status chip and one note */
main.site .vs-ladder>li{display:grid;gap:var(--s3);border-top:1px solid var(--line);padding:var(--s4) 0;align-items:start}
main.site .vs-stat .num{font-size:var(--t4);line-height:1;color:var(--ink)}   /* Mark 2 Nov G5: evidence smaller, not the centre of the page */
main.site .vs-stat .num.is-soft{color:var(--muted)}
main.site .vs-stat .small{margin-top:var(--s1)}
main.site .vs-note p+p{margin-top:var(--s2)}
@media (min-width:700px) and (max-width:899px){main.site .vs-ladder>li{grid-template-columns:repeat(2,minmax(0,1fr))}main.site .vs-who,main.site .vs-note{grid-column:1/-1}}
@media (min-width:900px){main.site .vs-ladder>li{grid-template-columns:1.1fr 1fr 1fr 1.4fr;gap:var(--s5)}}

/* 55e. news pair (G11): two cards, 16:10 picture, a green date line */
main.site .vs-news{display:grid;gap:var(--s4)}
main.site .vs-news .vs-ph{aspect-ratio:16/10}
main.site .vs-news .vs-body{display:grid;gap:var(--s2);padding:var(--s4) var(--s5) var(--s5)}
main.site .vs-news .vs-when{font-size:var(--t1);font-weight:600;color:var(--accent)}
@media (min-width:700px){main.site .vs-news{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 55f. price tiles (G13, T7): name, big figure, unit, one line, the basis in small type under a hairline */
main.site .vs-prices{display:grid;gap:var(--s4)}
main.site .vs-prices>.vs-card{padding:var(--s6) var(--s5);display:grid;gap:var(--s2);align-content:start}
/* round 4 (Mark 2 Nov, treatments cost): "price text too big, three boxes squashed": the figure one step down, more room
   in the tile; a second part of the price (frames) a little smaller than the main figure but still readable */
main.site .vs-prices .vs-name{font-size:var(--t2)}   /* the price is the biggest type on the tile (V50), the name a step under it */
main.site .vs-amount{font-family:var(--font-display);font-size:var(--t3);font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--deep)}
main.site .vs-more{display:inline-block;font-size:var(--t2);font-weight:600;letter-spacing:-.01em;color:var(--deep)}
main.site .vs-amount.is-tbc{font-size:var(--t3);letter-spacing:-.016em;color:var(--ink);padding-top:8px}
main.site .vs-extra{color:var(--body)}
main.site .vs-basis{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s2)!important}
@media (min-width:700px){main.site .vs-prices{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto)}   /* round 4 (critic Q15): name, figure, unit, line and basis level across the tiles */
  main.site .vs-prices>.vs-card{grid-row:span 5;grid-template-rows:subgrid}}

/* 55g. fee grid (G13): hairline-topped facts, label over value, centred */
main.site .vs-fees{display:grid;gap:var(--s3) var(--s5);margin:var(--s6) 0 0;text-align:center}
main.site .vs-fees>div{border-top:1px solid var(--line);padding-top:var(--s3)}
main.site .vs-fees dd{margin:2px 0 0;font-family:var(--font-display);font-weight:700;letter-spacing:-.012em;color:var(--ink)}
@media (min-width:700px){main.site .vs-fees{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){main.site .vs-fees{grid-template-columns:repeat(4,minmax(0,1fr))}main.site .vs-fees[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* a row of three fills the container (round-4 critic Q1)

/* 55h. for and against (G15): three cards, small grey labels, hairline rows, no ticks or crosses */
main.site .vs-fa{display:grid;gap:var(--s4)}
main.site .vs-fa>.vs-card{padding:var(--s5)}
main.site .vs-fa .vs-falbl{font-size:var(--t1);font-weight:600;color:var(--muted);margin:var(--s4) 0 var(--s2)}
main.site .vs-fa li,main.site .vs-rows>li{border-top:1px solid var(--line);padding:10px 0;color:var(--ink);line-height:1.4}
main.site .vs-fatag{color:var(--muted);font-size:var(--t1);white-space:nowrap}
@media (min-width:900px){main.site .vs-fa{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 55i. numbered factors (G16, L50): number above the heading, text centred, hairline-topped */
main.site .vs-factors{display:grid;gap:var(--s5) var(--s6)}
main.site .vs-factors>li{border-top:1px solid var(--line);padding-top:var(--s3);text-align:center}
main.site .vs-fnum{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--t1);color:var(--accent)}
main.site .vs-factors .sub{margin:var(--s1) 0 var(--s2)}
@media (max-width:699px){main.site .vs-factors>li{text-align:left}}
@media (min-width:700px){main.site .vs-factors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){main.site .vs-factors{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 55j. key words (four-up, T2): the message as big words in tiles, one short line under each; 2x2 on phones */
main.site .vs-words{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
main.site .vs-words>li{background:var(--vs-card);border-radius:var(--r-md);padding:var(--s5) var(--s4);display:grid;gap:var(--s2);align-content:start;text-align:left}
main.site .vs-word{font-family:var(--font-display);font-size:var(--t3);font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--ink);overflow-wrap:normal;hyphens:manual}
@media (max-width:420px){main.site .vs-words>li{padding:var(--s4) var(--s3)}}
@media (min-width:700px){main.site .vs-words{gap:var(--s4)}main.site .vs-words>li{text-align:center}}
@media (min-width:1024px){main.site .vs-words{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:899px){main.site .vs-opts .vs-ph{aspect-ratio:16/9}}

/* 55k. option cards (option-tiles T3, fit-cards T5): photo, name, one line, facts (dl), hairline points, a cost pinned
   to the foot with its arithmetic in small type */
main.site .vs-opts{display:grid;gap:var(--s4)}
main.site .vs-opts--16x10 .vs-ph{aspect-ratio:16/10}
main.site .vs-opts .vs-body{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
main.site .vs-opts .vs-line{margin-top:calc(-1 * var(--s2))}
main.site .vs-opts .vs-body>.sub{margin:0}
main.site .vs-facts{margin:0}
main.site .vs-facts>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s3);border-top:1px solid var(--line);padding:10px 0}
main.site .vs-facts dt{font-size:var(--t1);font-weight:600;color:var(--muted);padding-top:3px}
main.site .vs-facts dd{margin:0;color:var(--ink);line-height:1.4}
main.site .vs-cost{margin-top:auto;border-top:1px solid var(--line);padding-top:var(--s4);display:grid;gap:var(--s1)}
main.site .vs-cost .vs-unit{font-family:var(--font-text);font-size:var(--t1);letter-spacing:0;white-space:nowrap}
@media (min-width:900px){main.site .vs-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the parts of every card share row tracks (subgrid): names, facts, figures and their basis line up across the row */
  main.site .vs-opts>li{display:grid;grid-template-rows:subgrid;row-gap:0}
  main.site .vs-opts>li[data-tracks="4"]{grid-row:span 4}main.site .vs-opts>li[data-tracks="5"]{grid-row:span 5}
  main.site .vs-opts>li[data-tracks="6"]{grid-row:span 6}main.site .vs-opts>li[data-tracks="7"]{grid-row:span 7}
  main.site .vs-opts .vs-body{grid-row:2/-1;display:grid;grid-template-rows:subgrid;row-gap:var(--s3)}
  main.site .vs-opts .vs-cost{display:contents}
  main.site .vs-opts .vs-cost>.vs-amount{border-top:1px solid var(--line);padding-top:var(--s4);align-self:end}}

/* 55l. wide disclosure (table-disclosure, T4): the shared hairline disclosure on the full container; a table inside
   scrolls sideways on phones */
main.site .vs-wdetails{margin-top:var(--s6)}
main.site .vs-wdetails>.flow{max-width:none}

/* 55m. decision flow (T6): start pill, question nodes, labelled legs, tinted results; 2px hairline connectors, no
   arrow glyphs (V16); phones read it as one column top to bottom */
main.site .vs-flow{display:grid;justify-items:center;text-align:center}
main.site .vs-node{background:var(--vs-card);border-radius:var(--r-md);padding:var(--s4) var(--s5);width:100%;max-width:560px;display:grid;gap:var(--s1)}
main.site .vs-q{font-family:var(--font-display);font-size:var(--t3);font-weight:700;line-height:1.25;letter-spacing:-.016em;color:var(--ink)}
main.site .vs-n{color:var(--body)}
main.site .vs-node--start{background:var(--deep);max-width:440px;padding:var(--s3) var(--s4)}
main.site .vs-node--start .vs-q{color:#fff;font-size:var(--t2)}
main.site .vs-node--result{background:var(--accent-tint)}
main.site .vs-node--result .vs-q{color:var(--deep)}
main.site .vs-stem{width:2px;height:36px;background:var(--line)}
main.site .vs-stem--short{height:var(--s3)}
main.site .vs-branch{display:grid;width:100%;gap:var(--s5);position:relative;align-items:start}
main.site .vs-leg{display:grid;justify-items:center;align-content:start;width:100%}
main.site .vs-lbl{display:inline-block;padding:4px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:var(--t1);font-weight:600;line-height:1.35;color:var(--ink)}
main.site .vs-flowfoot{margin-top:var(--s6);background:var(--vs-card);border-radius:var(--r-md);padding:var(--s4) var(--s5);text-align:left}
main.site .vs-branch[data-n="1"]>.vs-leg>.vs-stem--leg{display:none}
@media (max-width:699px){main.site .vs-leg>.vs-stem--leg{display:none}}
@media (min-width:700px){main.site .vs-branch[data-n="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  main.site .vs-branch[data-n="2"]::before{content:"";position:absolute;left:25%;right:25%;top:0;height:2px;background:var(--line)}
  main.site .vs-branch .vs-node{max-width:440px}}
/* 55n. THE myopia decision flow (Mark 2 Nov 2026, G16 + T6; sitegen CMP 'decide', one data file): a spine of numbered
   question cards down the left column, each question's exits branching right to tinted result cards (a 2px bracket),
   a labelled stem to the next question, the spine ending in one deep result card. Phones: one column, exits indented. */
main.site .dc :is(p,ul,ol){margin:0}main.site .dc :is(ul,ol){list-style:none;padding:0}
/* Round 4 (Mark 2 Nov 2026, V52): a conventional yes/no flowchart. A spine of plain question boxes down the left; from each,
   a line runs right to its result with the answer written ON the line; the other answer is written on the line down to
   the next question; the spine ends in one result. Every result has the same calm tint (the lean to ortho-K comes from
   the questions, not a louder box). Phones: one column, the side result indented under its question. */
main.site .dc-start{text-align:center;margin-bottom:var(--s5);font-weight:600;color:var(--ink)}
main.site .dc-step{display:grid;text-align:left}
main.site .dc-q{background:var(--vs-card);border:2px solid var(--accent);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s2);align-content:center}
main.site .dc-k{display:flex;align-items:center;gap:var(--s2);font-size:var(--t1);font-weight:600;color:var(--accent)}
main.site .dc-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--accent);color:#fff;font-size:var(--t1);font-weight:700}
main.site .dc-qt,main.site .dc-rt{font-family:var(--font-display);font-size:var(--t3);font-weight:700;line-height:1.25;letter-spacing:-.016em;color:var(--ink)}
main.site .dc-n{color:var(--body);font-size:var(--t1);line-height:1.5}
/* Mark 5 Nov 2026: "green writing on a green background, not great": every result is a white box with the same border, titles in dark ink */
main.site .dc-res{background:#fff;border:2px solid var(--accent);border-radius:var(--r-md);padding:var(--s4);display:grid;gap:var(--s1);align-content:center}
main.site .dc-res .dc-rt{color:var(--ink)}
main.site .dc-rt a{color:var(--ink);text-decoration-color:var(--accent)}
main.site .dc-sub{font-weight:700;color:var(--ink)}
main.site .dc-res>p:not(.dc-rt):not(.dc-sub){color:var(--body)}
main.site .dc-ans>span{display:inline-block;background:#fff;border:2px solid var(--accent);border-radius:999px;padding:3px 14px;font-size:var(--t1);font-weight:700;line-height:1.3;color:var(--deep)}
main.site .dc-side{display:grid;margin-left:var(--s5);padding-left:var(--s5);border-left:2px solid var(--accent)}
main.site .dc-ans--side{padding-block:var(--s3)}
main.site .dc-ans--down{display:flex;padding:var(--s5) 0;background:linear-gradient(var(--accent),var(--accent)) var(--s5) 0/2px 100% no-repeat}
/* the end of the flow: one wide box, two columns, ortho-K first; stacks on phones (Mark 5 Nov 2026) */
main.site .dc-ends{display:grid;background:#fff;border:2px solid var(--accent);border-radius:var(--r-md)}
main.site .dc-res--end{border:0;border-radius:0;background:none;gap:var(--s2);align-content:start}
main.site .dc-res--end+.dc-res--end{border-top:1px solid var(--line)}
@media (min-width:700px){main.site .dc-ends{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.site .dc-res--end+.dc-res--end{border-top:0;border-left:1px solid var(--line)}}
@media (max-width:899px){
  main.site .dc-step:not(.dc-step--end){position:relative}
  main.site .dc-step:not(.dc-step--end)::before{content:"";position:absolute;left:calc(var(--s4) - 1px);top:0;bottom:0;border-left:2px solid var(--accent)}
  main.site .dc-q{position:relative;z-index:1}
  main.site .dc-side{margin-left:var(--s7)}
  main.site .dc-ans--side>span{margin-left:calc(-1 * var(--s5) - 1px);transform:translateX(-50%)}
  main.site .dc-ans--down{background:none;padding:var(--s4) 0}
  main.site .dc-ans--down>span{margin-left:var(--s4);transform:translateX(-50%)}}
@media (min-width:900px){
  main.site .dc-step{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:stretch}
  main.site .dc-q{grid-column:1;grid-row:1}
  main.site .dc-side{grid-column:2;grid-row:1;margin:0;padding:0;border:0;grid-template-columns:150px minmax(0,1fr);align-items:center}
  main.site .dc-ans--side{display:flex;justify-content:center;align-items:center;padding:0;align-self:stretch;background:linear-gradient(var(--accent),var(--accent)) 0 50%/100% 2px no-repeat}
  main.site .dc-ans--down{grid-column:1;justify-content:center;padding:var(--s6) 0;background-position:50% 0}
  main.site .dc-step--end{grid-template-columns:minmax(0,1fr)}}
}   /* end @layer components (overnight lane section) */
/* ---------- 56. MARK'S 2 NOV NOTES, lane A (unlayered on purpose: these beat the base hero and CTA rules) ----------
   Trust strip (O3, OC2, G1): each item sized to its content (the long qualifications line gets the room, the 5-star item
   less) and a little less white under the strip. CTA bands (site-wide G14): more air between the lead and the buttons;
   Book and Call match the larger home-hero buttons Mark approved (C2). Ortho-K cost hero (OC1): more air top and bottom
   from 1600px, the Book button a step lower. */
@media (min-width:700px){.hero-trust[data-n="4"]{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}}   /* rating, qualifications (the long one), children, lenses: the order on every 4-item strip */
@media (min-width:1024px){.hero:has(.hero-trust){padding-bottom:var(--s7)}}
main.site .cta .actions{margin-top:var(--s4);gap:var(--s3) var(--s5)}
main.site .cta .btn{min-height:62px;padding:17px 34px;font-size:var(--t3)}
main.site .cta .call{font-size:var(--t3);font-weight:600}
@media (min-width:1600px){main.site [data-section="myopia-clinic/ortho-k-cost/hero"]{--hero-top:calc(var(--s8) * 2);--hero-trust-gap:calc(var(--s8) * 2)}
  main.site [data-section="myopia-clinic/ortho-k-cost/hero"] .hero-copy .actions{margin-top:var(--s6)}}

/* Ortho-K self-check (Mark 2 Nov: "looks flat, like a boring questionnaire"; content unchanged): a feature card on the
   full container, a centred display title, the four questions as numbered tiles two by two, answers as pills */
.site--clinic #self-check .cl-check>:is(.kicker,.cl-h3,p:not(.cl-cap)){text-align:center;margin-inline:auto}
.site--clinic #self-check .cl-check>.kicker{display:inline-block;justify-self:center;padding:6px 14px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font-size:var(--t1);font-weight:600}
.site--clinic #self-check .cl-check>.cl-h3{margin-bottom:calc(var(--s3) - var(--s5));font-family:var(--font-display);font-size:var(--t4);font-weight:700;line-height:1.08;letter-spacing:-.026em;color:var(--ink);max-width:24ch;text-wrap:balance}
.site--clinic #self-check .cl-check>p:not(.cl-cap){max-width:46rem;color:var(--body)}
.site--clinic #self-check .cl-q{background:var(--grey);border-radius:var(--r-md);padding:var(--s5) var(--s4);gap:var(--s3);align-content:start}
.site--clinic #self-check .cl-q legend{float:left;width:100%;font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.25;margin-bottom:var(--s3)}
.site--clinic #self-check .cl-opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.site--clinic #self-check .cl-opt{width:auto;min-height:48px;padding:10px 20px;border-radius:999px;font-size:var(--t2);background:#fff;border:1.5px solid var(--line)}
.site--clinic #self-check .cl-opt:hover{border-color:var(--accent)}
.site--clinic #self-check .cl-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.site--clinic #self-check .cl-check-go{justify-content:center;margin-top:var(--s3)}
.site--clinic #self-check :is(.cl-check-res,.cl-check-inc){text-align:center}
@media (max-width:699px){.site--clinic #self-check .cl-check>:is(.kicker,.cl-h3,p:not(.cl-cap)){text-align:left;justify-self:start;margin-inline:0}}   /* phones keep heads left-set for reading */
@media (min-width:1024px){.site--clinic #self-check .cl-check{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4);row-gap:var(--s4);padding:var(--s7)}
  .site--clinic #self-check .cl-check>:not(.cl-q){grid-column:1/-1}}

/* ---------- 60. D LANE (overnight 2 Nov 2026): Mark's 1-2 Nov rules applied to the pages he has not reviewed yet ----------
   brain page-factory/site-build/reset/overnight-2026-11-02/d-lane/BUILD-NOTES.md. Three generic behaviours, no page selectors. */
@layer components{
/* 60a. no AI-looking tick rows (Mark 2 Nov G16, 1 Nov OC5): a row title or a short grid item in a ruled grid opens on its
   hairline, not on a little tick; the indent the tick needed goes with it */
.wide>.rows>div>.sub::before,.wide>.list--short>li::before{content:none}
main.site .wide>.rows>div>.sub{padding-left:0;text-indent:0}
main.site .wide>.rows>div>.sub~*{padding-left:0}
main.site .wide>.list--short>li{padding-left:0;text-indent:0}
/* 60b. L49 (Mark 1 Nov 2026, O8) for numbered cards: five or more cards numbered 1..n (sitegen is_seq -> .cards--seq)
   SNAKE on desktop: 1-4 across, a loop down at the right, 5-8 back right to left, one line joining them; one column below
   desktop, never an ambiguous 3 + 2 or 2 + 2 + 1 wrap. The number is the step's key label (V50): display size, not a kicker */
main.site .cards.cards--seq>.card>.kicker{font-family:var(--font-display,var(--sans));font-size:var(--t3);font-weight:700;letter-spacing:-.01em;line-height:1.2;text-transform:none;color:var(--accent)}
@media (min-width:700px) and (max-width:1023px){.cards.cards--seq>.card.card{grid-column:1/-1}}
@media (min-width:1024px){
  .cards.cards--seq{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s6);row-gap:var(--s6)}
  .cards.cards--seq>.card.card{grid-column:auto}
  .cards.cards--seq>.card.card:nth-child(5){grid-column:4}.cards.cards--seq>.card.card:nth-child(6){grid-column:3}
  .cards.cards--seq>.card.card:nth-child(7){grid-column:2}.cards.cards--seq>.card.card:nth-child(8){grid-column:1}
  .cards.cards--seq:not(.cards--aligned)>.card.card:nth-child(n+5){grid-row:2}
  .cards--seq.cards--aligned>.card[data-tracks="2"]:nth-child(n+5){grid-row:3/span 2}
  .cards--seq.cards--aligned>.card[data-tracks="3"]:nth-child(n+5){grid-row:4/span 3}
  .cards--seq.cards--aligned>.card[data-tracks="4"]:nth-child(n+5){grid-row:5/span 4}
  .cards--seq.cards--aligned>.card[data-tracks="5"]:nth-child(n+5){grid-row:6/span 5}
  .cards--seq.cards--aligned>.card[data-tracks="6"]:nth-child(n+5){grid-row:7/span 6}
  .cards--seq>.card:is(:nth-child(-n+3),:nth-child(n+6))::after{content:"";position:absolute;top:50%;left:100%;width:var(--s6);border-top:2px solid var(--line)}   /* the line runs on through the gaps */
  .cards--seq>.card:nth-child(4):not(:last-child)::after{content:"";position:absolute;top:100%;left:50%;height:var(--s6);border-left:2px solid var(--line)}   /* the loop down to step 5 */
  .cards--seq>.card:nth-child(8)::after{content:none}
}
/* 60c. PICTURE STEPS (checklist X1, IPL session): three real pictures in one row on desktop, each with its number and label
   set in the page; one column on phones. A step's photo can take a silent loop later (site.js 16): the clip covers the
   picture only. */
.site--clinic .cl-psteps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.site--clinic .cl-psteps{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--s5)}}
.site--clinic .cl-psteps[data-n="2"]{--n:2}.site--clinic .cl-psteps[data-n="4"]{--n:4}
@media (min-width:1024px){.site--clinic .cl-psteps{gap:var(--s6)}}
.site--clinic .cl-pstep{display:flex;flex-direction:column;gap:var(--s3);margin:0}
.site--clinic .cl-pstep-fig{position:relative;margin:0;line-height:0;border-radius:var(--r-photo);overflow:hidden;background:var(--tint)}
.site--clinic .cl-pstep-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0}
.site--clinic .cl-pstep-fig .loopvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site--clinic .cl-pstep-lab{display:flex;align-items:center;gap:var(--s3);margin:0;font-family:var(--font-display,var(--sans));font-size:var(--t3);font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.site--clinic .cl-pstep-n{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--deep);color:#fff;font-size:var(--t2);font-weight:700;letter-spacing:0}
.site--clinic .cl-pstep-text{margin:0;color:var(--muted)}
.site--clinic .cl-pstep-note{margin-top:var(--s3);font-size:var(--t1);color:var(--muted)}
@media (min-width:700px){.site--clinic .cl-pstep-note{text-align:center}}
}   /* end @layer components (overnight lane section) */
/* ---------- 52. OVERNIGHT 2 NOV 2026, hub + ortho-K + ortho-K cost (Fable specs, brain page-factory/site-build/reset/
   overnight-2026-11-02/): fact-cards, step-snake, numbered-steps, choice-cards, link-cards, stat-trio team banner,
   text-video row, cover grid, phase cards, answer cards, cost bars. Generic components: any page may use them;
   nothing here targets one page. ---------- */
@layer components{
/* fact-cards (ortho-K O4): big figure, label, one line; three across from 700px; white on a grey band */
.cl-factcards{display:grid;gap:var(--s4)}
@media (min-width:700px){.cl-factcards{grid-template-columns:repeat(var(--fc-n,3),minmax(0,1fr))}.cl-factcards[data-n="2"]{--fc-n:2}.cl-factcards[data-n="4"]{--fc-n:4}.cl-factcards>.cl-factcard:has(>.cl-fc-fig){display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}.cl-factcards>.cl-factcard>.cl-fc-fig{align-self:end}}   /* critic 2 Nov Q15: labels on one line across the cards */
.cl-factcard,.cl-choice,.cl-answer{background:var(--grey);border-radius:var(--r-md);padding:var(--s6) var(--s5);text-align:center}
.bg-tint .cl-factcard{background:#fff}
.cl-factcard .cl-fc-fig{font-family:var(--font-display);font-size:var(--t6);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ink);margin:0;text-wrap:balance}
.cl-factcard .cl-fc-fig--words{font-size:var(--t4);line-height:1.05}
.cl-factcard .cl-fc-k{font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.2;letter-spacing:-.016em;color:var(--ink);margin:var(--s3) 0 0}
.cl-factcard>.cl-fc-k:first-child{margin-top:0}
.cl-factcard .cl-fc-t{font-size:var(--t2);line-height:1.45;margin:var(--s2) 0 0}
.cl-wide:has(>.cl-factcards)+.cl-wide>.fig{margin-top:var(--s6);margin-bottom:0}
.cl-wide:has(>.cl-factcards)+.cl-wide>.fig img{border-radius:var(--r-lg);width:100%;height:auto}
.cl-wide:has(>.cl-factcards)+.cl-wide>.fig figcaption{text-align:center}
.cl-wide:has(>.cl-snake)+.cl-wide:has(>.cl-factcards){margin-top:var(--s7)}
.cl-wide:has(>.cl-snake)+.cl-wide>.cl-factcards .cl-factcard{padding:var(--s5);text-align:left}   /* L51 + critic 2 Nov Q13: the two plan boxes under the snake are running text, left-set at every width */

/* step-snake (ortho-K O8, L49): desktop 1-4 across, down at the right edge, 5-7 back; a 2px rail through the bubbles */
.cl-snake{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.cl-sn{position:relative;text-align:left;padding:0 0 0 64px}
.cl-sn-n{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 var(--t2)/1 var(--font-display);z-index:1}
.cl-sn .cl-when,.cl-choice .cl-choice-if,.cl-phase .cl-phase-when,.cl-answer .cl-answer-q{font-size:var(--t1);font-weight:600;color:var(--accent);margin:0}
.cl-sn .cl-sn-t{font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.2;letter-spacing:-.016em;color:var(--ink);margin:var(--s2) 0 0}
.cl-sn>p:not(.cl-when):not(.cl-cap){font-size:var(--t2);line-height:1.45;margin:var(--s3) 0 0}
.cl-sn>.cl-cap{margin:var(--s2) 0 0}
.cl-sn::before{content:"";position:absolute;top:40px;bottom:calc(-1 * var(--s5));left:19px;border-left:2px solid var(--accent)}
.cl-sn:last-child::before{display:none}
@media (min-width:1024px){
  .cl-snake{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;row-gap:var(--s7)}
  .cl-sn{text-align:center;padding:56px var(--s4) 0}
  .cl-sn-n{left:50%;transform:translateX(-50%)}
  .cl-sn::before,.cl-sn:last-child::before{display:block;top:19px;bottom:auto;left:0;right:0;border-left:0;border-top:2px solid var(--accent)}
  /* L53 (Mark 2 Nov 2026; L54 overshoot withdrawn 2 Nov evening, staging item 4: "you had it right before"): typewriter
     return. Row 2 reads left to right again; after 4 the line drops, runs back to the left above row 2 and drops straight
     into 5, never past it (green lines) */
  .cl-sn:first-child::before,.cl-sn:nth-child(5)::before{left:50%}
  .cl-sn:last-child::before,.cl-sn:nth-child(4):last-child::before{right:50%}
  .cl-sn:first-child:last-child::before{display:none}
  .cl-sn:nth-child(4):not(:last-child)::after{content:"";position:absolute;top:19px;right:0;bottom:calc(var(--s7) / -2);border-right:2px solid var(--accent)}
  .cl-sn:nth-child(5)::after{content:"";position:absolute;top:calc(var(--s7) / -2);left:calc(50% - 1px);width:350%;height:calc(var(--s7) / 2 + 19px);border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
  .cl-sn:nth-child(5):last-child::before{display:none}}
@media (min-width:1024px){   /* Mark 7 Nov 2026 (ortho-k-safety): six steps snake 1 2 3 left to right, then 4 5 6 (L53 typewriter return); five steps (Mark 11 Nov 2026, step 6 removed) snake 1 2 3, then 4 5 */
  .cl-snake:is([data-n="5"],[data-n="6"]){grid-template-columns:repeat(3,minmax(0,1fr))}.cl-snake:is([data-n="5"],[data-n="6"]) .cl-sn:nth-child(4)::before{left:50%}.cl-snake:is([data-n="5"],[data-n="6"]) .cl-sn:nth-child(5)::before{display:block;left:0}.cl-snake:is([data-n="5"],[data-n="6"]) .cl-sn:nth-child(5)::after{display:none}
  .cl-snake:is([data-n="5"],[data-n="6"]) .cl-sn:nth-child(3)::after{content:"";position:absolute;top:19px;right:0;bottom:calc(var(--s7) / -2);border-right:2px solid var(--accent)}
  .cl-snake:is([data-n="5"],[data-n="6"]) .cl-sn:nth-child(4)::after{content:"";position:absolute;top:calc(var(--s7) / -2);bottom:auto;right:auto;left:calc(50% - 1px);width:250%;height:calc(var(--s7) / 2 + 19px);border:0;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}}

/* numbered-steps (ortho-K O10): the sequence without its rail; four across from 700px, the number above the heading */
.cl-seq.cl-seq--plain::before{display:none}
.cl-seq.cl-seq--plain>li{padding:0;text-align:center;justify-items:center}
.cl-seq.cl-seq--plain .cl-seq-dot{position:static;width:44px;height:44px;background:var(--ink);font-family:var(--font-display);font-weight:700;margin-top:0;margin-bottom:var(--s2)}
.cl-seq.cl-seq--plain .cl-t{font-family:var(--font-display);font-weight:600;letter-spacing:-.016em;color:var(--ink);margin:0}
.cl-seq.cl-seq--plain>li>p:last-child{max-width:17rem}
@media (min-width:700px){.cl-seq.cl-seq--plain{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s5)}
  .cl-seq.cl-seq--plain[data-n="3"]{--n:3}.cl-seq.cl-seq--plain[data-n="5"]{--n:5}}

/* choice-cards (ortho-K O11, V50): the situation is the biggest type on the card */
.cl-choices{display:grid;gap:var(--s4)}
@media (min-width:700px){.cl-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bg-tint .cl-choice{background:#fff}
.cl-choice .cl-choice-t{font-family:var(--font-display);font-size:var(--t3);font-weight:700;line-height:1.2;letter-spacing:-.016em;color:var(--ink);margin:var(--s2) 0 0;text-wrap:balance}   /* Mark 2 Nov O11: a touch smaller than the section title */
@media (min-width:700px) and (max-width:1023px){.cl-choice{padding:var(--s5) var(--s4)}}   /* three narrow tablet columns: the label still the biggest type, never wider than its card */
.cl-choice>p:last-child{font-size:var(--t2);line-height:1.45;margin:var(--s4) 0 0}

/* link-cards (ortho-K O12): title, one line, a plain word link; 3 across at 1024, 2 at 700 */
.cl-linkcards{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
@media (min-width:700px){.cl-linkcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cl-linkcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cl-linkcards>li{display:flex}
.cl-linkcard{display:flex;flex-direction:column;align-items:center;width:100%;background:var(--grey);border-radius:var(--r-md);padding:var(--s5);text-decoration:none;color:inherit;text-align:center}
.bg-tint .cl-linkcard{background:#fff}
.cl-linkcard .cl-lc-t{font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
.cl-linkcard .cl-lc-x{font-size:var(--t2);line-height:1.45;margin-top:var(--s2);color:var(--body)}
.cl-linkcard .cl-lc-go{font-size:var(--t2);font-weight:600;color:var(--accent);margin-top:auto;padding-top:var(--s3)}
.cl-linkcard,.cl-linkcard>span{text-decoration:none!important}
@media (min-width:1024px){.cl-linkcards[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}.cl-linkcards[data-n="5"]>li{grid-column:span 2}.cl-linkcards[data-n="5"]>li:nth-child(n+4){grid-column:span 3}}   /* L10 (critic 2 Nov Q8): the short last row stretches to fill */
.cl-linkcard:hover .cl-lc-go,.cl-linkcard:focus-visible .cl-lc-go{text-decoration:underline}

/* stat-trio team banner (ortho-K O13): centred head, three figures with thin dividers, the group photo as a 21:9 banner */
.cl-team--banner>.head{margin-top:0;margin-bottom:var(--s6)}
.cl-trio{display:grid;gap:var(--s5);margin-top:0;margin-bottom:var(--s7)}
.cl-trio>p{margin:0;text-align:center;padding:var(--s3) var(--s4);display:flex;flex-direction:column;align-items:center}
.cl-trio-num{font-family:var(--font-display);font-size:var(--t6);font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.cl-trio-lab{font-size:var(--t2);line-height:1.4;margin-top:var(--s2);color:var(--body)}
@media (min-width:700px){.cl-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.cl-trio>p+p{border-left:1px solid var(--line)}}
.cl-team-banner{margin:0}
.cl-team-banner img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 20%;border-radius:var(--r-lg)}
@media (max-width:699px){.cl-team-banner img{aspect-ratio:4/3;border-radius:var(--r-md)}}
.cl-team--banner+.cl-people{margin-top:var(--s6)}
/* text-video-row (ortho-K cost OC2/OC7): words left (5fr), the explainer right (7fr) in a 16:9 card; phones: clip first */
.cl-tv{display:grid;gap:var(--s6);align-items:center;text-align:left}
.cl-tv-words>.eyebrow{margin:0 0 var(--s3)}
.cl-tv-words>.title{text-align:left;margin:0}
.cl-tv-sub{font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.3;letter-spacing:-.016em;color:var(--ink);margin:var(--s4) 0 0}
.cl-tv-rows{margin:var(--s5) 0 0;border-top:1px solid var(--line)}
.cl-tv-rows>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t2);line-height:1.45}
.cl-tv-rows dt{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.012em}
.cl-tv-rows dd{margin:0}
.cl-tv-line{margin:var(--s4) 0 0;font-size:var(--t2);line-height:1.5;font-weight:600;color:var(--ink)}
.cl-tv-after{margin-top:var(--s5)}
.cl-tv-after>.details{margin:0;max-width:none}
.cl-tv-media>.fig{margin-block:0}
.cl-tv-media>.fig img,.cl-tv-media>.fig .loopvid{border-radius:var(--r-lg);background:var(--grey)}
.cl-tv-media>.fig figcaption{text-align:left}
@media (min-width:1024px){.cl-tv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7)}}
@media (max-width:1023px){.cl-tv-media{order:-1}}
@media (max-width:699px){.cl-tv-rows>div{grid-template-columns:6rem minmax(0,1fr)}.cl-tv-media>.fig{width:min(100%,360px)}.cl-tv-media>.fig img,.cl-tv-media>.fig .loopvid{border-radius:var(--r-md)}}

/* cover-grid (ortho-K cost OC5): six equal tiles, 3 x 2 from 1024; "not included" is a quiet hairline list under it */
.cl-covers{display:grid;gap:var(--s4)}
@media (min-width:700px){.cl-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.cl-covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.cl-covers[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}   /* four tiles in one row, no orphan (Mark 7 Nov note 6: MiyoSmart package readable in 3 seconds) */
.cl-cover{background:var(--grey);border-radius:var(--r-md);padding:var(--s6) var(--s5);text-align:center;min-height:200px;display:flex;flex-direction:column;justify-content:flex-start}
.bg-tint .cl-cover{background:#fff}
.cl-cover .cl-cover-k{font-family:var(--font-display);font-size:var(--t3);font-weight:600;line-height:1.2;letter-spacing:-.016em;color:var(--ink);margin:0}
.cl-cover>p:last-child{font-size:var(--t2);line-height:1.45;margin:var(--s3) 0 0}
.cl-not{margin-top:var(--s6);margin-bottom:0;text-align:center}
.cl-not .cl-not-t{font-family:var(--font-display);font-size:var(--t2);font-weight:600;color:var(--ink);margin:0 0 var(--s3)}
.cl-not ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cl-not li{padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t2);line-height:1.45;margin:0}
.cl-not li::before{content:none}

/* phase-cards (ortho-K cost OC8): two phases, each a centred head over a hairline tier list (name left, amount right) */
.cl-phases{display:grid;gap:var(--s4)}
@media (min-width:700px){.cl-phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cl-phase{background:var(--grey);border-radius:var(--r-lg);padding:var(--s6) var(--s5);text-align:center}
.bg-tint .cl-phase{background:#fff}
.cl-phase .cl-phase-t{font-family:var(--font-display);font-size:var(--t4);font-weight:700;line-height:1.08;letter-spacing:-.026em;color:var(--ink);margin:var(--s2) 0 0}
.cl-phase .cl-phase-x{font-size:var(--t2);line-height:1.45;margin-top:var(--s3);margin-bottom:0;max-width:26rem}
.cl-phase dl{margin:var(--s5) 0 0;border-top:1px solid var(--line);text-align:left}
.cl-phase dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cl-phase dt{font-size:var(--t2);color:var(--body)}
.cl-phase dd{margin:0;text-align:right}
.cl-phase dd b{font-family:var(--font-display);font-size:var(--t3);font-weight:700;letter-spacing:-.02em;color:var(--deep)}
.cl-phase dd small{display:block;font-size:var(--t1);color:var(--muted)}

/* answer-cards (ortho-K cost OC9): question label, a big short answer, two lines */
.cl-answers{display:grid;gap:var(--s4)}
@media (min-width:1024px){.cl-answers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bg-tint .cl-answer{background:#fff}
.cl-answer .cl-answer-big{font-family:var(--font-display);font-size:var(--t4);font-weight:700;line-height:1.05;letter-spacing:-.026em;color:var(--ink);margin:var(--s3) 0 0}
.cl-answer .cl-answer-big small{display:block;font-size:var(--t3);font-weight:600;letter-spacing:-.016em;margin-top:var(--s2)}
.cl-answer .cl-answer-x{font-size:var(--t2);line-height:1.5;margin-top:var(--s4);margin-bottom:0;max-width:30rem}

/* cost-bars (ortho-K cost OC9): hairline rows, a bar proportional to the four-year total (registered 1% steps), figures right */
.cl-bars{margin-block:0}
.cl-bars-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cl-bar-row{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line);margin:0}
.cl-bar-row::before{content:none}
.cl-bar-name{margin:0;text-align:left}
.cl-bar-name b{display:block;font-family:var(--font-display);font-size:var(--t2);font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.25}
.cl-bar-name b a{color:inherit;text-decoration:none;background:none;border:0;box-shadow:none}
.cl-bar-name b a:hover{text-decoration:underline}
.cl-bar-name>span{display:block;font-size:var(--t1);color:var(--muted);margin-top:4px}
.cl-bar-track{display:grid;grid-template-columns:minmax(0,1fr) 13rem;align-items:center;gap:var(--s3)}
.cl-bar-lane{display:block;min-width:0}
.cl-bar{display:block;height:22px;border-radius:999px;background:var(--line)}
.cl-bar--ink{background:var(--ink)}
.cl-bar-val{margin:0;text-align:right;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-size:var(--t2);white-space:nowrap}
.cl-bar-val small{display:block;font-family:var(--font-text,inherit);font-weight:400;font-size:var(--t1);color:var(--muted);letter-spacing:0}
.cl-bar-key{font-size:var(--t1);color:var(--muted);text-align:center;margin:var(--s4) 0 0}
@media (max-width:699px){.cl-bar-row{grid-template-columns:minmax(0,1fr);gap:var(--s2)}.cl-bar{height:16px}.cl-bar-track{grid-template-columns:minmax(0,1fr) auto}.cl-bar-key{text-align:left}}
.cl-bar[data-w="1"]{width:1%}
.cl-bar[data-w="2"]{width:2%}
.cl-bar[data-w="3"]{width:3%}
.cl-bar[data-w="4"]{width:4%}
.cl-bar[data-w="5"]{width:5%}
.cl-bar[data-w="6"]{width:6%}
.cl-bar[data-w="7"]{width:7%}
.cl-bar[data-w="8"]{width:8%}
.cl-bar[data-w="9"]{width:9%}
.cl-bar[data-w="10"]{width:10%}
.cl-bar[data-w="11"]{width:11%}
.cl-bar[data-w="12"]{width:12%}
.cl-bar[data-w="13"]{width:13%}
.cl-bar[data-w="14"]{width:14%}
.cl-bar[data-w="15"]{width:15%}
.cl-bar[data-w="16"]{width:16%}
.cl-bar[data-w="17"]{width:17%}
.cl-bar[data-w="18"]{width:18%}
.cl-bar[data-w="19"]{width:19%}
.cl-bar[data-w="20"]{width:20%}
.cl-bar[data-w="21"]{width:21%}
.cl-bar[data-w="22"]{width:22%}
.cl-bar[data-w="23"]{width:23%}
.cl-bar[data-w="24"]{width:24%}
.cl-bar[data-w="25"]{width:25%}
.cl-bar[data-w="26"]{width:26%}
.cl-bar[data-w="27"]{width:27%}
.cl-bar[data-w="28"]{width:28%}
.cl-bar[data-w="29"]{width:29%}
.cl-bar[data-w="30"]{width:30%}
.cl-bar[data-w="31"]{width:31%}
.cl-bar[data-w="32"]{width:32%}
.cl-bar[data-w="33"]{width:33%}
.cl-bar[data-w="34"]{width:34%}
.cl-bar[data-w="35"]{width:35%}
.cl-bar[data-w="36"]{width:36%}
.cl-bar[data-w="37"]{width:37%}
.cl-bar[data-w="38"]{width:38%}
.cl-bar[data-w="39"]{width:39%}
.cl-bar[data-w="40"]{width:40%}
.cl-bar[data-w="41"]{width:41%}
.cl-bar[data-w="42"]{width:42%}
.cl-bar[data-w="43"]{width:43%}
.cl-bar[data-w="44"]{width:44%}
.cl-bar[data-w="45"]{width:45%}
.cl-bar[data-w="46"]{width:46%}
.cl-bar[data-w="47"]{width:47%}
.cl-bar[data-w="48"]{width:48%}
.cl-bar[data-w="49"]{width:49%}
.cl-bar[data-w="50"]{width:50%}
.cl-bar[data-w="51"]{width:51%}
.cl-bar[data-w="52"]{width:52%}
.cl-bar[data-w="53"]{width:53%}
.cl-bar[data-w="54"]{width:54%}
.cl-bar[data-w="55"]{width:55%}
.cl-bar[data-w="56"]{width:56%}
.cl-bar[data-w="57"]{width:57%}
.cl-bar[data-w="58"]{width:58%}
.cl-bar[data-w="59"]{width:59%}
.cl-bar[data-w="60"]{width:60%}
.cl-bar[data-w="61"]{width:61%}
.cl-bar[data-w="62"]{width:62%}
.cl-bar[data-w="63"]{width:63%}
.cl-bar[data-w="64"]{width:64%}
.cl-bar[data-w="65"]{width:65%}
.cl-bar[data-w="66"]{width:66%}
.cl-bar[data-w="67"]{width:67%}
.cl-bar[data-w="68"]{width:68%}
.cl-bar[data-w="69"]{width:69%}
.cl-bar[data-w="70"]{width:70%}
.cl-bar[data-w="71"]{width:71%}
.cl-bar[data-w="72"]{width:72%}
.cl-bar[data-w="73"]{width:73%}
.cl-bar[data-w="74"]{width:74%}
.cl-bar[data-w="75"]{width:75%}
.cl-bar[data-w="76"]{width:76%}
.cl-bar[data-w="77"]{width:77%}
.cl-bar[data-w="78"]{width:78%}
.cl-bar[data-w="79"]{width:79%}
.cl-bar[data-w="80"]{width:80%}
.cl-bar[data-w="81"]{width:81%}
.cl-bar[data-w="82"]{width:82%}
.cl-bar[data-w="83"]{width:83%}
.cl-bar[data-w="84"]{width:84%}
.cl-bar[data-w="85"]{width:85%}
.cl-bar[data-w="86"]{width:86%}
.cl-bar[data-w="87"]{width:87%}
.cl-bar[data-w="88"]{width:88%}
.cl-bar[data-w="89"]{width:89%}
.cl-bar[data-w="90"]{width:90%}
.cl-bar[data-w="91"]{width:91%}
.cl-bar[data-w="92"]{width:92%}
.cl-bar[data-w="93"]{width:93%}
.cl-bar[data-w="94"]{width:94%}
.cl-bar[data-w="95"]{width:95%}
.cl-bar[data-w="96"]{width:96%}
.cl-bar[data-w="97"]{width:97%}
.cl-bar[data-w="98"]{width:98%}
.cl-bar[data-w="99"]{width:99%}
.cl-bar[data-w="100"]{width:100%}
/* L51 on phones: panel heads are left-set below 700px (sitewide), so these components follow them at that width */
@media (max-width:699px){
  .cl-factcard,.cl-choice,.cl-linkcard,.cl-seq.cl-seq--plain>li,.cl-cover,.cl-phase,.cl-answer,.cl-not{text-align:left}
  .cl-cover,.cl-phase,.cl-answer{padding:var(--s5)}.cl-cover{min-height:0}.cl-phase .cl-phase-x,.cl-answer .cl-answer-x{margin-inline:0}
  .cl-linkcard{align-items:flex-start}
  .cl-factcard,.cl-choice{padding:var(--s5)}
  .cl-wide:has(>.cl-factcards)+.cl-wide>.fig figcaption{text-align:left}
  .cl-seq.cl-seq--plain>li{justify-items:start}.cl-seq.cl-seq--plain .cl-seq-dot{margin:0 0 var(--s2)}.cl-seq.cl-seq--plain>li>p:last-child{margin-inline:0}
  .cl-trio{gap:var(--s4)}.cl-trio>p{text-align:left;align-items:flex-start;padding:0}}
}
/* == 2 Nov notes, lane B (keratoconus, MGD, IPL, axial, eikance, home) == */
/* keratoconus split-1: a box under the photo; the photo takes the remaining height so both columns balance */
.split-under{margin-top:var(--s5)}
@media (min-width:1024px){main.site .s--split .split-visual--photo:has(>.split-under){flex-direction:column;align-self:stretch}
  main.site .s--split .split-visual--photo:has(>.split-under)>figure{flex:1 1 auto;height:auto}
  main.site .s--split .split-visual--photo:has(>.split-under) .ph{position:relative;flex:1 1 auto;min-height:420px}
  main.site .s--split .split-visual--photo:has(>.split-under) .ph img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .split-under>.box{margin:0}}
/* W56: a title the author broke by hand takes the width its two lines need (MGD "How we diagnose / meibomian gland dysfunction") */
main.site:not(:lang(zh)) .s--prose .head .title:has(br){max-width:none}   /* prose sections only: split, panel and Chinese heads keep their own measure */
/* L53 typewriter return for five numbered cards (Eikance prescribing): 1-2-3 across, the line drops and returns to the
   LEFT, 4-5 read left to right and fill their row (no lone fifth card) */
@media (min-width:1024px){
  .cards.cards--seq[data-count="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards.cards--seq[data-count="5"]>.card.card{grid-column:span 2}
  .cards.cards--seq[data-count="5"]>.card.card:nth-child(4){grid-column:1/span 3}
  .cards.cards--seq[data-count="5"]>.card.card:nth-child(5){grid-column:4/span 3}
  .cards--seq[data-count="5"]>.card:nth-child(3)::after{top:100%;left:50%;width:0;height:calc(var(--s6)/2);border-top:0;border-left:2px solid var(--line)}
  .cards--seq[data-count="5"]>.card:nth-child(4)::after{content:"";position:absolute;top:50%;left:100%;width:var(--s6);height:0;border-top:2px solid var(--line);border-left:0}
  .cards--seq[data-count="5"]>.card:nth-child(4)::before{content:"";position:absolute;top:calc(var(--s6)/-2);left:50%;width:calc(116.667% + var(--s6)*7/6 + 1px);height:calc(var(--s6)/2);border-top:2px solid var(--line);border-left:2px solid var(--line)}}
/* IPL session (2 Nov notes): the click-through steps show pictures as well as drawings; one 3:2 frame for every step so
   the stage keeps its height; the session clip sits inside the same frame (vertical clip on phones keeps its own shape) */
.site--clinic .cl-visit-fig{position:relative}
.site--clinic .cl-visit-fig>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#eef3ef}
.site--clinic .cl-visit-fig .loopvid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
@media (max-width:699px){.site--clinic .cl-visit-fig>img[data-orient~="tall"]{aspect-ratio:9/16}}
/* IPL "See it" tile (2 Nov still-open list): beside a taller tile the gland pictures grow and the caption sits on the
   tile's bottom edge, level with its neighbour's, so no white gap is left under it */
@media (min-width:1024px){.site--clinic .cl-two-b>.cl-tile3:only-child{height:100%;box-sizing:border-box}
  .site--clinic .cl-two-b .cl-pair-fig img{aspect-ratio:1/1;object-fit:contain}
  .site--clinic .cl-two-b>.cl-tile3>.cl-cap{margin-top:auto}}
/* home eyewear collage (Mark 2 Nov follow-up): GUCCI is the tall tile on the left reaching down to the step, BOSS beside
   it on top, Saint Laurent below GUCCI, Face a Face tall on the right starting higher, so the outer edges stay square */
.collage-i:nth-child(1){grid-area:1/1/3/2}
.collage-i:nth-child(2){grid-area:1/2/2/3}
.collage-i:nth-child(3){grid-area:3/1/4/2}
.collage-i:nth-child(4){grid-area:2/2/4/3}
/* the tall tiles keep their whole 4:5 picture (the GUCCI wordmark is never cut); the short tiles take the space left */
.collage-i:is(:nth-child(1),:nth-child(4)) img{position:static;height:auto;aspect-ratio:4/5}   /* Mark 2 Nov part 2: a little taller (was 4/5, then 20/27); 2 Nov evening (staging item 2): taller again to match the words column with its 2 x 4 logos */
.collage-i:is(:nth-child(2),:nth-child(3)) img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.collage-i:nth-child(2) img{object-position:50% 85%}   /* the BOSS wordmark sits low in its picture: keep it whole */
/* home dry-eye clip (Mark 2 Nov, questions box 7): the frame shows the right of the picture, where the gland row runs */
.site img[data-focus="82% 60%"],.site .has-loop:has(>img[data-focus="82% 60%"])>.loopvid{object-position:82% 60%}
/* W56 (Mark 2 Nov 2026: "headings wrap in two balanced lines at most ... widen the measure or break at the phrase"):
   a long title with a colon or a question breaks at the phrase. The words before it keep the title size; the rest is a
   sub-line on the type scale (24px, semibold) under it, the ortho-K hero pattern Mark approved, without leaving the scale */
main.site .htitle--split .htitle-sub{display:block;margin-top:var(--s3);font-size:var(--t3);line-height:1.3;font-weight:600;letter-spacing:-.01em;color:inherit;opacity:.82;text-wrap:balance}   /* inherits the title colour: ink on light bands, white on dark heroes and CTA bands */
main.site .htitle--split .htitle-sub::first-letter{text-transform:uppercase}
/* a long page title with no phrase to break at takes the next step of the scale down (52px, the section-title size) */
@media (min-width:1024px){main.site .hero .htitle--long{font-size:var(--t4)}}
main.site .hero .htitle--xlong{font-size:var(--t4)}@media (min-width:1024px){.hero--split .hero-grid:has(.htitle--xlong){grid-template-columns:1.2fr 1fr}}   /* Mark 7 Nov 2026: a 40+ character hero title stays two lines in its column, never set across the page */
/* home eyewear (Mark 2 Nov, part 2): the four brand photos a little taller; the eight logos move into the words column as
   two rows of four on the paragraph's left edge (Prada, Gucci, ProDesign, Face a Face above BOSS, Saint Laurent, Kate
   Spade, Carolina Herrera), so the row reads photo left, words right; two by four on phones */
/* Mark 2 Nov evening (staging item 2): two across, four rows, still under the paragraph, at every width.
   Mark 5 Nov (round 5 item 1): "fashion needs size and dynamics": the brand pictures 30 to 50% larger (a wider picture column
   on the wide container, whole 4:5 pictures), the logos larger with more empty space between them */
.split-text .logos:has(>img:nth-child(8)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.3 * var(--s6)) calc(1.3 * var(--s5));justify-items:start;align-items:center;margin-top:var(--s7)}
.split-text .logos:has(>img:nth-child(8)) img{max-height:53px;max-width:min(180px,100%);padding:0;background:none;border-radius:0}
/* a vertical explainer clip inside a reading column (axial length, Mark 2 Nov 2026): phone-shaped, centred in the column,
   its source line under it */
main.site .flow>.fig:has(>img[data-orient~="tall"]){display:grid;grid-template-columns:minmax(0,340px);justify-content:center}
main.site .flow>.fig:has(>img[data-orient~="tall"])>figcaption{font-size:var(--t1);line-height:1.5}
/* IPL session (Mark 2 Nov, part 2): the four step buttons are numbered 1 2 3 4 so they read as a sequence */
.cl-visit-ctl .cl-pill{display:inline-flex;align-items:center;gap:8px}
.cl-pill-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--accent-tint);color:var(--deep);font-size:var(--t1);font-weight:700;line-height:1}
.cl-pill[aria-pressed="true"] .cl-pill-n{background:#fff;color:var(--deep)}
/* round-3 critic Q5 (hub, ortho-K cost): the line under a review carousel ("View all reviews", the rating chips) sits on
   the section's centre axis like the head above it, not on the reading column's left edge */
@media (min-width:700px){main.site :has(>[data-marquee])+.col{text-align:center}
  main.site :has(>[data-marquee])+.col .tags{justify-content:center}}
/* round-3 critic (treatments compared): one alignment per section (L51): the line under a centred figure follows it */
.s:has(.head--centre) .flow>.stats+p:last-child,.centre .flow>.stats+p:last-child{text-align:center}
/* a link inside a CTA band's lead takes the band's text colour and underline (no stray dark-green underline on the band) */
main.site .cta .lead a{color:inherit;text-decoration-color:currentColor}
/* round-3 critic Q15 (treatments compared): in option cards with three facts, the name, the one-liner and each fact row
   ("Worn", "From age", "Prescription") start level across the three cards (one subgrid down photo, body and facts) */
@media (min-width:900px){
  main.site .vs-opts:has(.vs-facts>div:nth-child(3):last-child){grid-template-rows:repeat(6,auto);row-gap:0}
  main.site .vs-opts:has(.vs-facts>div:nth-child(3):last-child)>.vs-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  main.site .vs-opts:has(.vs-facts>div:nth-child(3):last-child) .vs-body{grid-row:2/span 5;display:grid;grid-template-rows:subgrid;row-gap:var(--s3)}
  main.site .vs-opts:has(.vs-facts>div:nth-child(3):last-child) .vs-line{margin-top:0}
  main.site .vs-opts:has(.vs-facts>div:nth-child(3):last-child) .vs-facts{grid-row:3/span 3;display:grid;grid-template-rows:subgrid;row-gap:0}}
/* W56 (Mark 2 Nov 2026: "never three lines ... widen the measure"): sitegen marks a long title with data-tch (about
   half its length, in ch). Its measure widens to that (never past its column); a long title over the 760px reading
   column widens past the column towards the container, centred on the section axis, at the title size */
main.site :is(.s,.hero,.cta) :is(.title,.htitle)[data-tch]{max-width:100%}
@media (min-width:1024px){
  main.site .s .col>.head>.title[data-tch="22"]{width:22ch;max-width:none;margin-inline:calc(50% - 11.0ch)}
  main.site .s .col>.head>.title[data-tch="24"]{width:24ch;max-width:none;margin-inline:calc(50% - 12.0ch)}
  main.site .s .col>.head>.title[data-tch="26"]{width:26ch;max-width:none;margin-inline:calc(50% - 13.0ch)}
  main.site .s .col>.head>.title[data-tch="28"]{width:28ch;max-width:none;margin-inline:calc(50% - 14.0ch)}
  main.site .s .col>.head>.title[data-tch="30"]{width:30ch;max-width:none;margin-inline:calc(50% - 15.0ch)}
  main.site .s .col>.head>.title[data-tch="32"]{width:32ch;max-width:none;margin-inline:calc(50% - 16.0ch)}
  main.site .s .col>.head>.title[data-tch="34"]{width:34ch;max-width:none;margin-inline:calc(50% - 17.0ch)}
  main.site .s .col>.head>.title[data-tch="36"]{width:36ch;max-width:none;margin-inline:calc(50% - 18.0ch)}
  main.site .s .col>.head>.title[data-tch="38"]{width:38ch;max-width:none;margin-inline:calc(50% - 19.0ch)}
  main.site .s .col>.head>.title[data-tch="40"]{width:38ch;max-width:none;margin-inline:calc(50% - 19.0ch)}
}
/* the same for a long CTA band title (a whole-centred band) */
@media (min-width:1024px){
  main.site .cta .col .title[data-tch="22"]{width:22ch;max-width:none;margin-inline:calc(50% - 11.0ch)}
  main.site .cta .col .title[data-tch="24"]{width:24ch;max-width:none;margin-inline:calc(50% - 12.0ch)}
  main.site .cta .col .title[data-tch="26"]{width:26ch;max-width:none;margin-inline:calc(50% - 13.0ch)}
  main.site .cta .col .title[data-tch="28"]{width:28ch;max-width:none;margin-inline:calc(50% - 14.0ch)}
  main.site .cta .col .title[data-tch="30"]{width:30ch;max-width:none;margin-inline:calc(50% - 15.0ch)}
  main.site .cta .col .title[data-tch="32"]{width:32ch;max-width:none;margin-inline:calc(50% - 16.0ch)}
  main.site .cta .col .title[data-tch="34"]{width:34ch;max-width:none;margin-inline:calc(50% - 17.0ch)}
  main.site .cta .col .title[data-tch="36"]{width:36ch;max-width:none;margin-inline:calc(50% - 18.0ch)}
  main.site .cta .col .title[data-tch="38"]{width:38ch;max-width:none;margin-inline:calc(50% - 19.0ch)}
  main.site .cta .col .title[data-tch="40"]{width:38ch;max-width:none;margin-inline:calc(50% - 19.0ch)}
}
/* MGD hero (Mark 2 Nov: the full-height picture back): on phones the square meibography picture is shown whole, so its
   own "Meibomian Glands" label is never cut (round-4 critic Q11) */
@media (max-width:1023px){main.site .hero-media img[data-orient="square"][data-focus="40% 100%"]{aspect-ratio:1/1;object-position:50% 50%}}
/* Chinese headings (W56): a section title takes the whole reading column, so its authored phrase breaks (wbr) give two
   lines; the hero title breaks after its question into the smaller sub-line, as the English titles do */
@media (min-width:1024px){main.site:lang(zh) .s .head .title{max-width:none}main.site:lang(zh) .s .col>.head>.title{width:17em;margin-inline:calc(50% - 8.5em)}}
/* the wide head (W56, Front Desk round 4): a title too long for two lines in one column of a row sits above the row on
   the container's left edge, at its usual size, then the row follows */
main.site .widehead{margin-bottom:var(--s6)}
main.site .s .widehead{text-align:center}   /* a section head on the page's one centre axis (28 Oct centred style); a hero's stays left */
main.site .head--up{display:none}   /* the row's head was set above it; the empty marker keeps the row's two-column layout */
main.site :is(.tv-in,.split-text)>.head--up+.flow,main.site :is(.tv-in,.split-text)>.head--up+.flow>:first-child{margin-top:0}   /* round 5 (Mark OK): the words start level with the picture beside them (Q20 row tops) */
main.site .widehead>.title,main.site .widehead>.htitle{max-width:none}
main.site .widehead>.eyebrow+*{margin-top:var(--s3)}
@media (min-width:1024px){main.site .widehead>.htitle--long{font-size:var(--t5)}}
/* under a wide head the row's photo takes the height of the words beside it (start and end together), never shorter
   than 360px, so no hole opens under the shorter text */
@media (min-width:1024px){main.site .c:has(>.widehead)>.split>.split-visual--photo .ph{min-height:400px}
  main.site .c:has(>.widehead)>.split>.split-visual--photo .ph img{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover}}
/* a hero under a wide head: the photo a calm 16:9 beside the shorter copy, the copy centred on it */
@media (min-width:1024px){main.site .hero .c:has(>.widehead) .hero-grid{align-items:center}
  main.site .hero .c:has(>.widehead) .hero-media img:not([data-orient~="drawing"]){height:auto;min-height:0;max-height:none;aspect-ratio:16/9;object-fit:cover}}

/* ---------- side rail (Mark 5 Nov 2026: "flow rail looks good"; on any page with 5 or more H2 sections, like an index; desktop only;
   built by site.js, mockup page-factory/site-build/reset/mockups/section-rail-mockup.html). Hidden at 1100px and under; the content's
   gutter is 56px above that, and the rail ends at 42px ---------- */
.rail{display:none}
@media (min-width:1101px){.rail{display:block;font-family:var(--sans);position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:5}
  .rail-ticks{list-style:none;margin:0;padding:8px 6px;display:grid;gap:9px;background:rgba(255,255,255,.82);border-radius:8px}
  .rail-ticks span{display:block;width:16px;height:3px;border-radius:2px;background:var(--line);transition:width .2s,background .2s}
  .rail-ticks span.on{width:22px;background:var(--accent)}
  .rail-panel{position:absolute;left:0;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(16,32,27,.12);padding:12px 8px;width:300px;max-height:80vh;overflow:auto;opacity:0;pointer-events:none;transition:opacity .15s}
  .rail:hover .rail-panel,.rail:focus-within .rail-panel{opacity:1;pointer-events:auto}
  .rail-panel ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .rail-panel a{display:flex;gap:10px;align-items:baseline;color:var(--body);text-decoration:none;font-size:var(--t1);line-height:1.3;padding:6px 10px;border-radius:8px}
  .rail-panel a::before{content:"";flex:none;width:12px;height:3px;border-radius:2px;background:var(--line);transform:translateY(-3px)}
  .rail-panel a:hover{background:var(--accent-tint)}
  .rail-panel a.on{color:var(--deep);font-weight:600}
  .rail-panel a.on::before{background:var(--accent)}
  .rail-panel a:focus-visible{outline:3px solid var(--accent);outline-offset:-1px}}
@media (prefers-reduced-motion:reduce){.rail-ticks span,.rail-panel{transition:none}}
@media print{.rail{display:none}}
/* Mark 5 Nov 2026 (after round 6, batch 05b). Home #eyewear: brand photos another 20% larger, logos 20% larger, 30% more space
   between logos across and down; no radius on a logo image (4px was cutting the BOSS "B", whose ink sits 1.6px from the corner).
   From 1600px: two by four under the words. 1101 to 1599px the three sizes cannot share a row, so the logos run as one band
   under photo and words, four across. Stacked widths: the photos are already full width. */
@media (min-width:1101px){
  main.site--home #eyewear .split{position:relative;grid-template-columns:minmax(0,1fr) minmax(400px,30%);column-gap:40px;padding-bottom:244px}
  main.site--home #eyewear .split>.split-text{position:static;align-self:center}
  main.site--home #eyewear .split-text>.flow.rv{transform:none}   /* the reveal slide made this column the anchor for the absolute logo band, so the page scrolled sideways until the section appeared */
  main.site--home #eyewear .split-text .logos:has(>img:nth-child(8)){position:absolute;left:0;right:0;bottom:0;margin:0;grid-template-columns:repeat(4,228px);grid-auto-rows:68px;justify-content:space-between;gap:52px 62px}
  main.site--home #eyewear .split-text .logos:has(>img:nth-child(8)) img{max-height:67px;max-width:100%}
  main.site--home #eyewear .split-text .logos img[src*="prodesign"]{width:228px;height:auto}
}
@media (min-width:1600px){
  main.site--home #eyewear .split{grid-template-columns:925px minmax(0,1fr);column-gap:64px;padding-bottom:0}
  main.site--home #eyewear .split>.split-text{position:sticky;align-self:start}
  main.site--home #eyewear .split-text .logos:has(>img:nth-child(8)){position:static;margin-top:var(--s6);grid-template-columns:repeat(2,228px);grid-auto-rows:auto;justify-content:start;gap:52px 90px}
}
/* Home Find us: the map about 30% larger; the section uses the page width, less empty space left and right */
@media (min-width:1024px){
  main.site--home #find-us .loc{grid-template-columns:300px minmax(0,1fr);gap:32px}
  main.site--home #find-us .loc-map{grid-column:2;grid-row:1/3}
  main.site--home #find-us .loc-map iframe{aspect-ratio:auto;min-height:560px}
  main.site--home #find-us .loc-info>div:last-child{display:flex;flex-direction:column}
  main.site--home #find-us .hours{flex:1;display:flex;flex-direction:column;justify-content:space-between}
}
@media (min-width:1200px){
  main.site--home #find-us .loc{grid-template-columns:clamp(270px,22vw,320px) 291px minmax(0,1fr)}
  main.site--home #find-us .loc-map{grid-column:auto;grid-row:auto}
}
/* Mark 8 Nov 2026 H1-H3 (taste V55, every two-column hero): the words sit still, centred on the picture; more air under the H1; the Book row drops lower so the column fills the height */
@media (min-width:1024px){main.site .hero .hero-grid:has(>.hero-media)>.hero-copy{position:static;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  main.site .hero .hero-grid:has(>.hero-media)>.hero-copy>.htitle+*{margin-top:var(--s5)}main.site .hero .hero-grid:has(>.hero-media)>.hero-copy>.actions{margin-top:var(--s6)}
  main.site .hero .hero-grid:has(>.hero-media)>.hero-copy::after{content:"";order:1;flex:1 1 0;max-height:var(--s7)}main.site .hero .hero-grid:has(>.hero-media)>.hero-copy>:is(.actions,.actions~*){order:2}}
/* Codex stat design 8 Nov 2026 (Mark v20 notes 2, 11, 12, 14; codex-reviews/2026-11-08-stat-design.md; taste W61): big number, bold plain meaning, small source */
main.site .stat .stat-k{display:block;font-size:var(--t3);font-weight:600;line-height:1.25;color:var(--ink);margin-top:var(--s2)}main.site .stat .stat-source{display:block;font-size:var(--t1);line-height:1.45;margin-top:var(--s2);color:inherit}
main.site [data-section$="ortho-k-safety/hero"] .stats,main.site [data-section$="axial-length-measurement/hero"] .stats{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:var(--s4);text-align:left}   /* no left stripe (gate CALLOUT rule); Codex had a 3px rule */
main.site :is([data-section$="ortho-k-safety/hero"],[data-section$="axial-length-measurement/hero"]) .stat{display:block;grid-row:auto}main.site :is([data-section$="ortho-k-safety/hero"],[data-section$="axial-length-measurement/hero"]) .stat .num{font-size:var(--t6)}
main.site [data-section$="ortho-k-safety/hero"] .stat+.stat .num{font-size:var(--t4)}
main.site [data-section$="ortho-k-safety/numbers"] .cl-factcards{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
main.site [data-section$="ortho-k-safety/numbers"] .cl-factcard{display:grid;grid-row:auto;grid-template-columns:var(--s8) minmax(0,1fr);grid-template-rows:auto auto;gap:0 var(--s4);text-align:left;background:transparent;border-radius:0;border-bottom:1px solid var(--line);padding:var(--s4) 0}
main.site [data-section$="ortho-k-safety/numbers"] .cl-fc-fig{grid-row:1/3;align-self:center;font-size:var(--t6)}main.site [data-section$="ortho-k-safety/numbers"] .cl-fc-k{margin:0;align-self:end}main.site [data-section$="ortho-k-safety/numbers"] .cl-fc-t{margin:var(--s1) 0 0;font-size:var(--t1)}
main.site [data-section="meibomian-gland-dysfunction/hero"] .stats{display:block;background:var(--deep);color:var(--paper);padding:var(--s5);border-radius:var(--r-md);text-align:left}
main.site [data-section="meibomian-gland-dysfunction/hero"] .stat{display:block}main.site [data-section="meibomian-gland-dysfunction/hero"] .stat :is(.num,.stat-k,.lab){color:var(--paper)}main.site [data-section="meibomian-gland-dysfunction/hero"] .stat .num{font-size:var(--t6)}
main.site [data-section="meibomian-gland-dysfunction/hero"] .stat::after{content:"";display:block;height:var(--s2);margin-top:var(--s4);border-radius:var(--s1);background:linear-gradient(90deg,var(--pale) 86%,var(--muted) 86%)}
@media (min-width:1024px){main.site [data-section="meibomian-gland-dysfunction/hero"] .hero-grid>.hero-copy>.flow:has(.stats){order:3;margin-top:auto;padding-top:var(--s6)}main.site [data-section="meibomian-gland-dysfunction/hero"] .hero-grid>.hero-copy{justify-content:flex-start}}   /* the panel's foot lines up with the photo's foot; the title with its top */

/* ---------- 61. v22 components (Mark 9 Nov 2026, v21 review notes 2-4, 8, 10; brain COMPONENT-MAP-2026-11-08.md) ---------- */
/* STAT PANEL, GREEN, WITH BAR (approved on MGD 9 Nov; taste W62): deep green, pale label, big number with its unit small, the
   bold plain meaning, one short line, the source, bars at the foot. Motion (site.js 21, taste L57): count up + bars grow, once. */
.stat-panel{background:var(--deep);color:var(--paper);border-radius:var(--r-md);padding:var(--s5);text-align:left;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.stat-panel .sp-label{font-size:var(--t1);font-weight:600;line-height:1.35;color:var(--pale)}
.stat-panel .sp-num{font-family:var(--font-display);font-weight:700;font-size:var(--t6);line-height:1.05;letter-spacing:-.035em;color:var(--paper);font-variant-numeric:tabular-nums}
.stat-panel .sp-num small{font-size:.5em;font-weight:600;letter-spacing:-.02em}
.stat-panel .sp-k{font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.25;letter-spacing:-.014em;color:var(--paper);text-wrap:balance}
.stat-panel .sp-t{margin-top:var(--s2);font-size:var(--t2);line-height:1.5;color:#e4efe9}
.stat-panel .sp-src{margin-top:var(--s2);font-size:var(--t1);line-height:1.45;color:var(--pale)}
.stat-panel .sp-src a{color:inherit}
.stat-panel .sp-bars{display:grid;gap:var(--s3);margin-top:var(--s2)}
.stat-panel .sp-bl{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t1);line-height:1.4;color:#e4efe9;margin-bottom:var(--s3)}
.stat-panel .sp-bl b{color:var(--paper);font-weight:600}
.stat-panel .sp-track{height:var(--s2);border-radius:var(--s1);background:rgba(255,255,255,.14);overflow:hidden}
.stat-panel .sp-fill{display:block;height:100%;border-radius:var(--s1);background:var(--pale)}
.stat-panel .sp-bar--hi .sp-fill{background:var(--paper)}
@media (min-width:700px){
  .stat-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s5) var(--s7);padding:var(--s6);align-items:center}
  .stat-panel .sp-label,.stat-panel .sp-bars{grid-column:1/-1}
  .stat-panel .sp-bars[data-n="2"]{grid-template-columns:1fr 1fr;gap:var(--s4)}
}
@media (min-width:1024px){.stat-panel{padding:var(--s7)}}
@media (prefers-reduced-motion:no-preference){
  .stat-panel.is-armed .sp-fill{transform:scaleX(0);transform-origin:left center}
  .stat-panel.is-armed.is-in .sp-fill{transform:none;transition:transform 1.2s cubic-bezier(.33,1,.68,1)}   /* final pass 10 Nov 2026: transition on entry only, so arming never animates a shrink; same ease-out cubic as the number */
}
/* the MGD hero carries the panel in its copy column (approved 9 Nov): one column inside the hero, no outer padding change */
main.site .hero .stat-panel{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s5)}
main.site .hero .stat-panel .sp-label,main.site .hero .stat-panel .sp-bars{grid-column:auto}
@media (min-width:1024px){main.site [data-section="meibomian-gland-dysfunction/hero"] .hero-grid>.hero-copy>.flow:has(.stat-panel){order:3;margin-top:auto;padding-top:var(--s6)}}

/* PICTURE CARDS (taste W63): each linked page's own hero picture, title, one line. Phones: picture beside the words;
   from 700px two across, from 1024px three or four across. Press feedback only, no arrow glyphs (V16). */
.pics{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s5)}
.pic{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s3);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform 160ms ease-out,box-shadow 160ms ease-out}
.pic:hover{box-shadow:0 10px 30px -18px rgba(18,59,49,.35)}
.pic:active{transform:scale(.985)}
.pic .pic-ph{display:block;aspect-ratio:1;overflow:hidden;background:var(--grey)}
.pic .pic-ph img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pic .pic-ph img[data-orient~="drawing"]{object-fit:contain;background:var(--paper)}
.pic .pic-tx{display:block;padding:var(--s3) var(--s3) var(--s3) 0}
.pic .pic-t{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t2);line-height:1.3;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.pic .pic-p{display:block;margin-top:var(--s3);font-size:var(--t1);line-height:1.45;color:var(--muted)}
.pic .pic-cite{display:block;margin-top:var(--s2);font-size:var(--t1);font-weight:600;color:var(--accent)}
.bg-tint .pic,.bg-grey .pic{border-color:transparent}
@media (min-width:700px){
  .pics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .pic{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}
  .pic .pic-ph{aspect-ratio:4/3}
  .pic .pic-tx{padding:var(--s4) var(--s4) var(--s5)}
  .pic .pic-t{font-size:var(--t3)}
}
@media (min-width:1024px){.pics[data-n="3"],.pics[data-n="5"],.pics[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}.pics[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.pics[data-n="4"] .pic .pic-t{font-size:var(--t2)}}

/* VIDEO MOMENT (blog template): rounded frame, soft shadow, Pause pill; desktop file from 700px, phone file below; poster
   under reduced motion and before the script runs */

.vidloop .vl-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--grey);box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px -30px rgba(18,59,49,.25)}
.vidloop video,.vidloop .vl-poster{display:block;width:100%;height:auto;border-radius:0}
.vidloop video{display:none}
.vidloop .vl-poster--phone{display:none}
.vidloop.is-live .vl-poster{display:none}
.vidloop.is-live .vl-desk{display:block}
@media (max-width:699px){.vidloop--phone .vl-poster--desk{display:none}.vidloop--phone .vl-poster--phone{display:block}.vidloop--phone.is-live .vl-poster--phone{display:none}.vidloop--phone.is-live .vl-desk{display:none}.vidloop--phone.is-live .vl-phone{display:block}}
.vidloop .vl-ctl{position:absolute;right:var(--s3);bottom:var(--s3);min-height:40px;padding:0 var(--s3);border:0;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);font:600 14px/1 var(--font-text);cursor:pointer;transition:transform 120ms ease-out}
.vidloop .vl-ctl:active{transform:scale(.97)}
.vidloop .vl-cap{margin-top:var(--s3);font-size:var(--t1);line-height:1.5;color:var(--muted)}

/* DOCTOR'S NOTE (blog template; V46: hairline box, no stripe) */
.drnote{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.drnote .dn-photo{width:64px;height:64px;border-radius:50%;object-fit:cover}
.drnote blockquote{margin:0}
.drnote .dn-q{margin-top:var(--s2);font-family:var(--font-display);font-weight:500;font-size:var(--t3);line-height:1.4;letter-spacing:-.014em;color:var(--ink)}
.drnote .dn-who{font-size:var(--t1);color:var(--muted)}
@media (min-width:700px){.drnote{grid-template-columns:64px minmax(0,1fr);column-gap:var(--s5);padding:var(--s6)}.drnote .dn-who{grid-column:2}}

/* TAKEAWAYS (blog template): numbered in accent green, ruled top, three across from 700px */
.takes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.takes li{border-top:1px solid var(--line);padding-top:var(--s4)}
.takes .tk-n{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--t6);line-height:1;letter-spacing:-.035em;color:var(--accent)}
.takes .tk-t{margin-top:var(--s3);font-weight:600;font-size:var(--t3);line-height:1.3;color:var(--ink);text-wrap:balance}
.takes .tk-p{margin-top:var(--s1);font-size:var(--t1);line-height:1.5;color:var(--muted)}
@media (min-width:700px){.takes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}}

/* PHOTO STRIP (About equipment): the review strip's drift with photo tiles; still = a grid (the review strip's own rules) */
.photostrip .ps-tile{border-left:0;padding:0;gap:var(--s3)}
.photostrip.is-moving .ps-tile,.photostrip.is-moving .ps-tile:first-child{border-left:0;padding:0 var(--s2)}
.photostrip .ps-ph{display:block;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.photostrip .ps-ph img{width:100%;height:100%;object-fit:contain;border-radius:0}
.photostrip .ps-ph img[data-orient~="landscape"]:not([data-orient~="drawing"]){object-fit:cover}
.photostrip .ps-t{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t3);line-height:1.3;color:var(--ink)}
.photostrip .ps-p{display:block;margin-top:var(--s1);font-size:var(--t1);line-height:1.5;color:var(--muted)}

/* POST TEMPLATE (Mark 9 Nov 2026, blog template TEMPLATE.md): title block, a post's section titles one step under a page's */
main.site--post{--post-h2:28px;--post-sub:20px;--post-h1:40px}
@media (min-width:700px){main.site--post{--post-h2:32px;--post-sub:22px;--post-h1:52px}}
@media (min-width:1024px){main.site--post{--post-h2:36px;--post-sub:26px;--post-h1:64px}}
main.site--post .hero--post{background:var(--paper);padding-block:var(--s6) var(--s6)}
main.site--post .hero--post .crumb{font-size:var(--t1);color:var(--muted)}
main.site--post .hero--post .crumb a{color:var(--muted);text-decoration:none}
main.site--post .post-h1{font-family:var(--font-display);font-weight:700;font-size:var(--post-h1);line-height:1.02;letter-spacing:-.032em;color:var(--ink);text-wrap:balance;margin-top:var(--s4)}
main.site--post .post-sub{font-family:var(--font-display);font-weight:500;font-size:var(--post-sub);line-height:1.3;letter-spacing:-.016em;color:var(--body);text-wrap:balance;margin-top:var(--s3)}
main.site--post .byline{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);text-align:left}
main.site--post .byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
main.site--post .byline .who{font-weight:600;color:var(--ink);font-size:var(--t2);line-height:1.3}
main.site--post .byline .meta{font-size:var(--t1);color:var(--muted);line-height:1.5;margin-top:2px}
main.site--post .byline .meta span{display:block}
main.site--post .post-answer{margin-top:var(--s6);background:var(--accent-tint);border-radius:var(--r-md);padding:var(--s5);text-align:left}
main.site--post .post-answer .lead{margin-top:var(--s2);font-family:var(--font-display);font-weight:500;color:var(--ink)}
main.site--post .s .title{font-size:var(--post-h2)}
@media (min-width:700px){
  main.site--post .hero--post{text-align:center;padding-block:var(--s7) var(--s6)}
  main.site--post .post-sub{max-width:30ch}
  main.site--post .byline{justify-content:center}
  main.site--post .byline .meta{display:flex;flex-wrap:wrap;gap:0 var(--s2)}
  main.site--post .byline .meta span{display:inline}
  main.site--post .byline .meta span+span::before{content:"·";margin-right:var(--s2);color:var(--line)}
}
@media (min-width:1024px){main.site--post .hero--post{padding-block:var(--s8) var(--s7)}main.site--post .post-answer{padding:var(--s6)}}
.sp-fill[data-w="1"]{width:1%}
.sp-fill[data-w="2"]{width:2%}
.sp-fill[data-w="3"]{width:3%}
.sp-fill[data-w="4"]{width:4%}
.sp-fill[data-w="5"]{width:5%}
.sp-fill[data-w="6"]{width:6%}
.sp-fill[data-w="7"]{width:7%}
.sp-fill[data-w="8"]{width:8%}
.sp-fill[data-w="9"]{width:9%}
.sp-fill[data-w="10"]{width:10%}
.sp-fill[data-w="11"]{width:11%}
.sp-fill[data-w="12"]{width:12%}
.sp-fill[data-w="13"]{width:13%}
.sp-fill[data-w="14"]{width:14%}
.sp-fill[data-w="15"]{width:15%}
.sp-fill[data-w="16"]{width:16%}
.sp-fill[data-w="17"]{width:17%}
.sp-fill[data-w="18"]{width:18%}
.sp-fill[data-w="19"]{width:19%}
.sp-fill[data-w="20"]{width:20%}
.sp-fill[data-w="21"]{width:21%}
.sp-fill[data-w="22"]{width:22%}
.sp-fill[data-w="23"]{width:23%}
.sp-fill[data-w="24"]{width:24%}
.sp-fill[data-w="25"]{width:25%}
.sp-fill[data-w="26"]{width:26%}
.sp-fill[data-w="27"]{width:27%}
.sp-fill[data-w="28"]{width:28%}
.sp-fill[data-w="29"]{width:29%}
.sp-fill[data-w="30"]{width:30%}
.sp-fill[data-w="31"]{width:31%}
.sp-fill[data-w="32"]{width:32%}
.sp-fill[data-w="33"]{width:33%}
.sp-fill[data-w="34"]{width:34%}
.sp-fill[data-w="35"]{width:35%}
.sp-fill[data-w="36"]{width:36%}
.sp-fill[data-w="37"]{width:37%}
.sp-fill[data-w="38"]{width:38%}
.sp-fill[data-w="39"]{width:39%}
.sp-fill[data-w="40"]{width:40%}
.sp-fill[data-w="41"]{width:41%}
.sp-fill[data-w="42"]{width:42%}
.sp-fill[data-w="43"]{width:43%}
.sp-fill[data-w="44"]{width:44%}
.sp-fill[data-w="45"]{width:45%}
.sp-fill[data-w="46"]{width:46%}
.sp-fill[data-w="47"]{width:47%}
.sp-fill[data-w="48"]{width:48%}
.sp-fill[data-w="49"]{width:49%}
.sp-fill[data-w="50"]{width:50%}
.sp-fill[data-w="51"]{width:51%}
.sp-fill[data-w="52"]{width:52%}
.sp-fill[data-w="53"]{width:53%}
.sp-fill[data-w="54"]{width:54%}
.sp-fill[data-w="55"]{width:55%}
.sp-fill[data-w="56"]{width:56%}
.sp-fill[data-w="57"]{width:57%}
.sp-fill[data-w="58"]{width:58%}
.sp-fill[data-w="59"]{width:59%}
.sp-fill[data-w="60"]{width:60%}
.sp-fill[data-w="61"]{width:61%}
.sp-fill[data-w="62"]{width:62%}
.sp-fill[data-w="63"]{width:63%}
.sp-fill[data-w="64"]{width:64%}
.sp-fill[data-w="65"]{width:65%}
.sp-fill[data-w="66"]{width:66%}
.sp-fill[data-w="67"]{width:67%}
.sp-fill[data-w="68"]{width:68%}
.sp-fill[data-w="69"]{width:69%}
.sp-fill[data-w="70"]{width:70%}
.sp-fill[data-w="71"]{width:71%}
.sp-fill[data-w="72"]{width:72%}
.sp-fill[data-w="73"]{width:73%}
.sp-fill[data-w="74"]{width:74%}
.sp-fill[data-w="75"]{width:75%}
.sp-fill[data-w="76"]{width:76%}
.sp-fill[data-w="77"]{width:77%}
.sp-fill[data-w="78"]{width:78%}
.sp-fill[data-w="79"]{width:79%}
.sp-fill[data-w="80"]{width:80%}
.sp-fill[data-w="81"]{width:81%}
.sp-fill[data-w="82"]{width:82%}
.sp-fill[data-w="83"]{width:83%}
.sp-fill[data-w="84"]{width:84%}
.sp-fill[data-w="85"]{width:85%}
.sp-fill[data-w="86"]{width:86%}
.sp-fill[data-w="87"]{width:87%}
.sp-fill[data-w="88"]{width:88%}
.sp-fill[data-w="89"]{width:89%}
.sp-fill[data-w="90"]{width:90%}
.sp-fill[data-w="91"]{width:91%}
.sp-fill[data-w="92"]{width:92%}
.sp-fill[data-w="93"]{width:93%}
.sp-fill[data-w="94"]{width:94%}
.sp-fill[data-w="95"]{width:95%}
.sp-fill[data-w="96"]{width:96%}
.sp-fill[data-w="97"]{width:97%}
.sp-fill[data-w="98"]{width:98%}
.sp-fill[data-w="99"]{width:99%}
.sp-fill[data-w="100"]{width:100%}
/* About (v22, Mark 9 Nov note 10, mockup A): the proof numbers at stat size on a short band; the four eye-test cards two by two so each line reads */
main.site [data-section="about/proof"]{padding-block:var(--s6)}
main.site [data-section="about/proof"] .stat .num{font-size:var(--t6)}
@media (max-width:699px){main.site [data-section="about/proof"] .stats{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--s5);text-align:center}main.site [data-section="about/proof"] .stats>.stat{display:block;grid-row:auto}}
@media (min-width:1024px){main.site [data-section="about/eye-test"] .cl-factcards[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 62. v23 (Mark 9 Nov 2026, MARK-NOTES-2026-11-09-v21-review.md 5, 6, 14) */
/* a hero whose visual is the video moment (when-to-start SightTrack loop): the clip and its posters are shown whole, never cropped to the photo frame */
main.site .hero-media--vid{display:flex;flex-direction:column;justify-content:center}
main.site .hero-media--vid .vidloop{width:100%;margin:0}
main.site .hero-media--vid :is(.vl-poster,video){width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;object-fit:initial;border-radius:0}
/* tap targets at least 44px (note 14, WCAG 2.5.5): the hit box grows, the layout does not (equal negative margin) */
main.site a.call:not(.btn){display:inline-block;padding-block:11px;margin-block:-11px}
main.site a.more:not(.btn){display:inline-block;padding-block:8px;margin-block:-8px}
main.site a[href="https://g.page/concordeyecare"]{display:inline-block;padding-block:10px;margin-block:-10px}
.vidloop .vl-ctl,.site--clinic .cl-vid-btn{min-height:44px}
/* a link on its own line, and the names in a comparison bar: inline links take vertical padding, which grows the hit box but not the line */
main.site p.solo-link>a,main.site .cl-bar-name a,main.site .dc-rt>a{padding-block:10px}