/* ============================================================
   ALIGNESS premium blue/gold conversion system
   Ivory paper + clinical navy + antique gold. Built from the stronger
   Aligness brand direction, with conversion modules kept from the beta.
   ============================================================ */

:root{
  --paper:#FEF9EF; --paper-2:#F5EFE2; --surface:#FFFFFF; --sunken:#F5EEE1;
  --ink:#2C2C2C; --ink-2:#666766; --ink-3:#898F97; --copy-soft:#666766;
  --accent:#A87B22; --accent-deep:#8C6418; --accent-tint:#F5EEE1;
  --gold:#B2896B; --gold-deep:#A87B22; --gold-soft:#D1CAC0;
  --dark:#2A2B2F; --dark-2:#333333; --blue:#13213B; --blue-2:#182A4A;
  --line:#D1CAC0; --line-strong:#BFAF9E; --line-dark:rgba(209,202,192,.20);
  --ok:#3E6B4F;
  --shadow:0 1px 2px rgba(42,43,47,.04), 0 14px 36px -16px rgba(42,43,47,.12);
  --shadow-lg:0 30px 70px -34px rgba(42,43,47,.30);
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:clamp(3.15rem,5.2vw,4.9rem); --container:1200px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent-tint); color:var(--accent-deep)}

/* type */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; color:var(--ink); line-height:1.1; letter-spacing:0; text-wrap:balance}
.display{font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.14; letter-spacing:0; font-weight:400}
h2,.h2{font-size:clamp(2rem,3.8vw,3.1rem)}
h3,.h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.em{font-style:italic; color:var(--gold-deep)}
.em--gold{color:#8A6A1F}
.lead{font-family:var(--sans); font-size:clamp(1.02rem,1.14vw,1.16rem); line-height:1.62; color:var(--copy-soft); max-width:58ch; font-weight:400}
p{max-width:66ch}
.body-sm{font-size:.95rem; line-height:1.6; color:var(--ink-2)}
.caption{font-size:.8125rem; line-height:1.5; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); display:inline-block}
.eyebrow--gold{color:var(--gold)}

/* layout */
.container{max-width:var(--container); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:780px; margin-inline:auto}
section{padding:var(--pad) 0; position:relative}
section.section-compact{padding:clamp(4rem,6vw,5.8rem) 0}
section.section-tight{padding:clamp(2.2rem,3.6vw,3.2rem) 0}
.band-paper{background:var(--paper)}
.band-cream{
  background:var(--paper-2);
  box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
.band-blue{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 100%);
  color:rgba(254,249,239,.82);
  box-shadow:inset 0 1px 0 rgba(209,202,192,.18), inset 0 -1px 0 rgba(209,202,192,.18);
}
.band-dark{background:var(--dark); color:var(--paper)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-blue h1,.band-blue h2,.band-blue h3{color:var(--paper)}
.band-blue .lead{color:rgba(254,249,239,.72)}
.band-blue .eyebrow{color:var(--gold-soft)}
.band-blue .em{color:#E2B872}
.band-blue .tlink{color:#F5EEE1}
.band-blue .btn--secondary{border-color:rgba(209,202,192,.34); color:var(--paper)}
.band-blue .btn--secondary:hover{background:rgba(209,202,192,.12); border-color:var(--gold-soft); color:#fff}
.band-blue .btn--primary{background:#FEF9EF; color:var(--blue); box-shadow:none}
.band-blue .btn--primary:hover{background:#FFFFFF; color:var(--blue)}
.center{text-align:center}
.sec-head{max-width:880px; margin:0 auto clamp(1.65rem,3vw,2.45rem); text-align:center}
.sec-head .eyebrow{margin-bottom:.7rem}
.sec-head .lead{margin:.78rem auto 0; max-width:64ch}
.sec-head.left{margin-inline:0; text-align:left} .sec-head.left .lead{margin-inline:0}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.48rem; font-family:var(--sans); font-weight:600; font-size:.9rem; line-height:1.2; letter-spacing:0; text-transform:none; padding:.72rem 1.28rem; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.btn--lg{padding:.86rem 1.55rem; font-size:.96rem}
.btn--block{width:100%; justify-content:center}
.btn--primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn--primary:hover{background:var(--accent-deep); transform:translateY(-1px); box-shadow:var(--shadow-lg)}
.btn--secondary{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--secondary:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-tint)}
.band-dark .btn--secondary{border-color:var(--line-dark); color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.tlink{display:inline-flex; align-items:center; gap:.35rem; color:var(--accent); font-weight:600; font-size:.95rem}
.tlink .arr{transition:transform .2s} .tlink:hover .arr{transform:translateX(4px)}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(254,249,239,.97); border-bottom:1px solid transparent; transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav__inner{height:66px; display:flex; align-items:center; justify-content:space-between; gap:1.35rem}
.nav__logo img{height:30px}
@media(max-width:760px){.nav__logo img{height:40px}}
.nav__links{display:flex; gap:1.55rem}
.nav__links a{font-weight:500; font-size:.92rem; letter-spacing:0; text-transform:none; color:var(--ink); position:relative; padding:.28rem 0}
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .15s}
.nav__links a:hover::after,.nav__links a[aria-current=page]::after{transform:scaleX(1)}
.nav__cta{display:flex; align-items:center; gap:.9rem}
.nav__cta .btn{padding:.78rem 1.42rem; font-size:.92rem}
.nav__toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
.nav__toggle span{width:24px; height:2px; background:var(--ink); display:block; transition:.25s}
.nav__drawer{display:none}

/* hero */
.hero{padding-top:clamp(7rem,10vh,8.5rem); padding-bottom:clamp(2.8rem,5vw,4.4rem)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.03fr) minmax(320px,.86fr); gap:clamp(2rem,4.5vw,4.2rem); align-items:center}
.hero-copy .eyebrow{margin-bottom:1rem}
.hero-copy .display{max-width:14.5ch; margin-bottom:1.2rem}
.hero-copy .lead{margin-bottom:1.45rem; max-width:50ch}
.hero__cta{display:flex; gap:.78rem; flex-wrap:wrap}
.hero-note{margin:.85rem 0 0; color:var(--ink-3); font-size:.88rem; line-height:1.5; max-width:54ch}
.hero-proof{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem}
.hero-proof span{display:inline-flex; align-items:center; gap:.42rem; border:1px solid rgba(151,100,80,.32); background:rgba(255,255,255,.62); border-radius:999px; padding:.36rem .64rem; font-size:.79rem; color:var(--ink-2); font-weight:500}
.hero-proof span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(151,100,80,.12)}
.hero-media{min-width:0}
.hero-photo{position:relative; border-radius:18px; overflow:hidden; background:transparent; border:1px solid var(--line); box-shadow:var(--shadow-lg)}
.hero--split .hero-photo{border:0; box-shadow:none}
.hero-photo::before{display:none}
.hero-photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center; filter:saturate(.98) contrast(1.02); border-radius:inherit}
.hero-card{position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:2; background:#FFFFFF; border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; box-shadow:var(--shadow)}
.hero-card b{display:block; color:var(--ink); font-size:.94rem; line-height:1.25}
.hero-card span{display:block; color:var(--ink-2); font-size:.82rem; line-height:1.35; margin-top:.25rem}

/* trust strip */
.trust{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.95rem 0}
.trust__row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem 1.5rem; font-size:.85rem; font-weight:500; color:var(--ink-2)}
.trust__row span{display:inline-flex; align-items:center; gap:1.5rem}
.trust__row span::after{content:"·"; color:var(--accent)}
.trust__row span:last-child::after{display:none}

/* recognition */
.recognition-section{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.recognition{max-width:900px; margin:0 auto; text-align:center}
.recognition h2{margin:.7rem auto 0; max-width:20ch; font-size:clamp(2.45rem,5vw,4.15rem); line-height:1.03}
.recognition .lead{font-size:clamp(1rem,1.18vw,1.17rem); max-width:61ch; margin:1.05rem auto 0}
.recognition__cta{margin-top:1.05rem}
.recognition__soft{color:#8A6A1F; font-style:italic}

/* compare table */
.checkup-compare{border-top:0}
.compare{max-width:930px; margin:0 auto; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:0 18px 46px -30px rgba(42,43,47,.26)}
.compare__row{display:grid; grid-template-columns:minmax(0,1fr) 168px 150px; align-items:center; border-top:1px solid var(--line); min-height:62px}
.compare__row:first-child{border-top:0}
.compare__row.head{background:transparent}
.compare__row.head{min-height:82px}
.compare__row.head .compare__c{padding:.95rem .9rem}
.compare__lab{padding:.82rem clamp(1rem,2vw,1.35rem); font-size:.96rem; line-height:1.5; color:var(--ink); font-weight:600}
.compare__c{text-align:center; padding:.82rem .85rem; font-size:.95rem}
.compare__c--brand{background:var(--blue); color:#fff; height:100%; display:flex; align-items:center; justify-content:center; font-weight:600}
.compare__row.head .compare__c--brand{border-radius:10px 10px 0 0; flex-direction:column; gap:.3rem}
.compare__logo{width:70px; height:auto; margin-bottom:.18rem}
.compare__kicker{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); line-height:1.25}
.compare__c--brand .ico{color:#fff}
.compare__c--std{color:var(--ink-3)}
.compare__row.head .compare__c--std{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem}
.compare__std-title{font-family:var(--serif); font-size:1.22rem; color:var(--ink)}
.compare__row.head .compare__c--std .caption{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.compare__big{font-family:var(--serif); font-size:1.22rem}
.ico{display:inline-flex; width:24px; height:24px; border-radius:50%; align-items:center; justify-content:center; font-size:.85rem; font-weight:700}
.ico--yes{background:rgba(216,184,113,.22); color:#fff} .ico--no{background:var(--paper-2); color:var(--ink-3)}
.biomarker-strip{max-width:930px; margin:.95rem auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem}
.bio-chip{min-height:66px; background:rgba(255,255,255,.68); border:1px solid var(--line); border-radius:12px; padding:.85rem .95rem; display:flex; align-items:center; gap:.75rem; box-shadow:var(--shadow)}
.bio-chip i{font-style:normal; flex:0 0 auto; width:30px; height:30px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent-deep); font-size:.72rem; font-weight:700}
.bio-chip span{font-size:.92rem; color:var(--ink); font-weight:600; line-height:1.2}
.bio-chip--gold{background:var(--dark); border-color:var(--line-dark)}
.bio-chip--gold i{background:rgba(216,184,113,.18); color:var(--gold-soft)}
.bio-chip--gold span{color:var(--paper)}

/* proof snapshot */
.proof-snap{border-top:1px solid var(--line)}
.proof-snap__grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.proof-snap__copy h2{margin:.65rem 0 1rem}
.proof-snap__copy .lead{font-size:1rem; margin-bottom:1.25rem; max-width:48ch}
.proof-snap__media{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
.proof-snap__media figure{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow)}
.band-blue .proof-snap__media figure{border-color:rgba(209,202,192,.22); box-shadow:0 22px 60px -32px rgba(0,0,0,.65)}
.proof-snap__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.proof-snap__media figcaption{position:absolute; left:.55rem; bottom:.55rem; background:rgba(19,33,59,.86); color:#fff; border-radius:999px; padding:.22rem .55rem; font-size:.68rem; font-weight:600}

/* static review grid */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:1040px; margin:0 auto}
.review-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.25rem; box-shadow:var(--shadow); position:relative; overflow:hidden}
.review-card::after{content:none}
.review-card__icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--dark); color:var(--gold-soft); font-family:var(--serif); font-size:1.25rem; margin-bottom:.9rem; position:relative; z-index:1}
.review-card > span{display:block; color:var(--accent); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:.65rem}
.review-card h3{font-size:1.28rem; margin-bottom:.55rem}
.review-card p{font-size:.92rem; line-height:1.55; color:var(--ink-2)}
.review-card ul{list-style:none; display:grid; gap:.4rem; position:relative; z-index:1}
.review-card li{font-size:.92rem; line-height:1.55; color:var(--ink-2); display:flex; gap:.45rem}
.review-card li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto; margin-top:.5rem}

/* category grid */
.quote-row{display:flex; align-items:center; justify-content:center; gap:1rem; margin:0 auto 3rem; max-width:640px}
.quote-row img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.quote-row p{font-style:italic; color:var(--ink-2); font-size:1.02rem}
.quote-row b{display:block; font-style:normal; color:var(--ink); font-size:.85rem; margin-top:.2rem}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.cat{padding:2rem 1.5rem; border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
.cat__count{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem}
.cat h3{font-size:1.5rem; margin-bottom:1rem}
.cat ul{list-style:none} .cat li{color:var(--ink-2); padding:.28rem 0; font-size:.96rem}
.cat li:nth-child(n+4){color:var(--ink-3)}
.cat .more{color:var(--accent); font-weight:600; margin-top:.5rem}

/* interactive full-panel matrix */
.panel{max-width:1040px; margin:0 auto; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
.panel__tiers{display:flex; gap:.5rem; padding:1rem; background:var(--paper-2); border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center}
.panel__tiers .lbl{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-right:.4rem}
.panel__tiers button{background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; padding:.5rem 1.1rem; font:inherit; font-size:.88rem; font-weight:500; color:var(--ink-2); cursor:pointer; transition:.18s}
.panel__tiers button.on{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--shadow)}
.panel__main{display:grid; grid-template-columns:248px 1fr}
.panel__nav{background:var(--paper-2); border-right:1px solid var(--line); padding:.6rem; display:flex; flex-direction:column; gap:.15rem}
.panel__navbtn{width:100%; text-align:left; background:none; border:0; padding:.7rem .9rem; border-radius:10px; cursor:pointer; font:inherit; color:var(--ink-2); display:flex; justify-content:space-between; align-items:center; font-size:.92rem; transition:.15s}
.panel__navbtn:hover{background:rgba(176,90,54,.06)}
.panel__navbtn.on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}
.panel__navbtn .b{font-size:.72rem; color:var(--accent); font-weight:600; background:var(--accent-tint); border-radius:999px; padding:.1rem .5rem; min-width:1.6rem; text-align:center}
.panel__body{padding:1.4rem 1.6rem}
.panel__set h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; font-weight:600}
.panel__set .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 2.4rem}
.mk{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.6rem .1rem; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink); transition:opacity .2s}
.mk--locked{opacity:.32}
.mk--locked .mk-name{text-decoration:none}
.tag{font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.16rem .5rem; border-radius:999px; white-space:nowrap; flex:0 0 auto}
.tag--first{background:var(--accent-tint); color:var(--accent-deep)}
.tag--integrated{background:#EFE6D2; color:var(--gold-deep)}
.tag--concierge{background:#E7E1D6; color:var(--ink-2)}
.panel__foot{padding:1rem 1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--paper-2); font-size:.85rem; color:var(--ink-2)}

/* step cards */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.steps--4{grid-template-columns:repeat(4,1fr)}
.step-c{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.8rem 1.5rem; box-shadow:var(--shadow)}
.step-c__img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; margin-bottom:1.2rem}
.step-c__n{font-family:var(--serif); font-size:1.1rem; color:var(--gold-deep); display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border:1px solid var(--gold); border-radius:50%; margin-bottom:.8rem}
.step-c h3{font-size:1.3rem; margin-bottom:.5rem}

/* difference */
.diff{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.diff__img{border-radius:12px; overflow:hidden; position:relative}
.diff__img img{width:100%; display:block}
.diff__callout{position:absolute; left:1.1rem; bottom:1.1rem; background:var(--surface); color:var(--ink); border-radius:12px; padding:.7rem 1rem; box-shadow:var(--shadow-lg); font-size:.84rem; font-weight:600; max-width:62%}
.diff__callout small{display:block; color:var(--ink-3); font-weight:400; font-size:.72rem; margin-top:.1rem}
.diff__cols{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.6rem}
.diff__box{border:1px solid var(--line-dark); border-radius:14px; padding:1.4rem; background:rgba(255,255,255,.015)}
.diff__box--good{background:rgba(216,184,113,.08); border-color:rgba(216,184,113,.24)}
.diff__box h4{font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem}
.diff__box--bad h4{color:var(--ink-3)} .diff__box--good h4{color:var(--gold-soft)}
.diff__box ul{list-style:none; display:grid; gap:.7rem}
.diff__box li{font-size:.92rem; display:flex; gap:.55rem; align-items:flex-start; line-height:1.55}
.diff__box li::before{flex:0 0 auto; font-weight:600}
.diff__box--bad li{color:rgba(254,249,239,.4)} .diff__box--bad li::before{content:"✕"; color:rgba(254,249,239,.3)}
.diff__box--good li{color:rgba(254,249,239,.94)} .diff__box--good li::before{content:"✓"; color:var(--gold-soft)}

/* rich how-it-works steps (small numbers, tight text, preview cards) */
.hiw{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.hiw--4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.hiw-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.hiw-card__n{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; color:var(--accent); margin:.95rem 0 .55rem; font-weight:600}
.hiw-card h3{font-size:1.22rem; margin-bottom:.5rem; letter-spacing:0}
.hiw-card > p{font-size:.9rem; color:var(--ink-2); margin-bottom:.35rem; line-height:1.5}
.hiw-visual{height:168px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#FBF8F1 0%,var(--sunken) 100%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.hiw-visual::before{content:""; position:absolute; inset:auto -28px -46px auto; width:118px; height:118px; border-radius:50%; background:rgba(151,100,80,.08)}
.hiw-mark{position:absolute; left:1rem; top:1rem; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#FFFFFF; border:1px solid var(--line); box-shadow:var(--shadow)}
.hiw-mark svg{width:23px; height:23px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.mini-panel{position:relative; z-index:1; width:min(76%,210px); border:1px solid var(--line); border-radius:14px; background:#FFFFFF; padding:1rem; box-shadow:var(--shadow)}
.mini-panel--form{display:grid; gap:.55rem}
.mini-panel--form span{height:10px; border-radius:999px; background:var(--paper-2)}
.mini-panel--form span:nth-child(1){width:82%}
.mini-panel--form span:nth-child(2){width:64%}
.mini-panel--form span:nth-child(3){width:74%}
.mini-panel--form b{font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-top:.35rem}
.doctor-pair{position:relative; z-index:1; display:flex; gap:.75rem; align-items:center}
.doctor-pair span{width:56px; height:56px; border-radius:50%; background:#FFFFFF; border:1px solid var(--line); display:grid; place-items:center; font-weight:700; color:var(--accent); box-shadow:var(--shadow); font-size:.78rem}
.doctor-pair span + span{margin-left:-1rem}
.fit-seal{position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); margin-top:34px; padding:.38rem .75rem; border-radius:999px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em}
.signal-row{position:absolute; left:1.2rem; right:1.2rem; bottom:1.1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem}
.signal-row i{height:6px; border-radius:999px; background:rgba(151,100,80,.22)}
.signal-row i:nth-child(2),.signal-row i:nth-child(4){background:rgba(176,90,54,.45)}
.hiw-visual--room svg{position:relative; z-index:1; width:86%; height:86%; overflow:visible}
.hiw-visual--room circle,.hiw-visual--room path{fill:none; stroke:rgba(102,103,102,.22); stroke-width:1}
.hiw-visual--room polygon{fill:rgba(151,100,80,.14); stroke:var(--accent); stroke-width:2}
.hiw-visual--room text{font-family:var(--sans); font-size:9px; fill:var(--ink-3)}
.route-list{position:relative; z-index:1; display:grid; gap:.6rem; width:min(82%,230px)}
.route-list span{background:#FFFFFF; border:1px solid var(--line); border-radius:12px; padding:.72rem .8rem; display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--ink); box-shadow:var(--shadow)}
.route-list i{font-style:normal; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); font-weight:700; flex:0 0 auto}
.hiw-prev{background:var(--sunken); border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; margin-top:auto}
.hiw-row{display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.55rem .1rem; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--ink)}
.hiw-row:last-child{border-bottom:0}
.hiw-row .ic{color:var(--ok); flex:0 0 auto}
.hiw-row small{display:block; color:var(--ink-3); font-size:.74rem; font-weight:400}
.hiw-row .l{display:flex; align-items:center; gap:.55rem}
.hiw-prev--chart{display:flex; flex-direction:column; gap:.5rem; align-items:center; justify-content:center; min-height:120px}
.hiw-prev--chart svg{width:100%; height:64px}
.hiw-prev--chart span{font-size:.74rem; color:var(--ink-3)}

/* archetype cards */
.arch{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.arch-c{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s, border-color .2s}
.arch-c:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.arch-c:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.arch-c__img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--paper-2)}
.arch-c__body{padding:1.15rem 1.2rem 1.25rem; display:flex; flex-direction:column; min-height:100%; flex:1}
.arch-c__top{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1rem}
.arch-c__top img{width:44px; height:44px; border-radius:10px; object-fit:cover; flex:0 0 auto}
.arch-c h4{font-family:var(--serif); font-size:1.15rem; margin-bottom:.3rem}
.arch-c__q{font-size:.9rem; color:var(--ink-2)}
.arch-c__out{border-top:1px solid var(--line); margin-top:1rem; padding-top:.9rem; font-size:.85rem; color:var(--ink-2)}
.arch-c__out b{color:var(--accent); font-style:normal; display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.3rem}
.arch-c__out span{color:var(--accent); font-weight:700}

/* application flow */
.apply-flow{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.apply-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.5rem; box-shadow:var(--shadow); display:flex; min-height:100%; flex-direction:column}
.apply-card--primary{border-color:var(--accent); box-shadow:var(--shadow-lg)}
.apply-card > span{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); margin-bottom:.7rem}
.apply-card h3{font-size:1.28rem; margin-bottom:.65rem}
.apply-card p{font-size:.94rem; line-height:1.55; color:var(--ink-2); margin-bottom:1.1rem}
.apply-card .tlink{margin-top:auto}
.band-blue .apply-card{background:#FFFFFF; border-color:rgba(209,202,192,.65)}
.band-blue .apply-card h3{color:var(--ink)}
.band-blue .apply-card p{color:var(--ink-2)}
.band-blue .apply-card .tlink{color:var(--accent-deep)}
.band-blue .apply-card > span{color:var(--accent)}

/* doctors row (clean) */
.docs{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.docs--2{grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto}
.doc{text-align:center}
.doc img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; margin-bottom:1rem}
.doc h3{font-size:1.25rem; margin-bottom:.2rem}
.doc .role{font-size:.8rem; color:var(--ink-3); letter-spacing:.03em}

/* partner / big-number strip */
.bignums{display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
.bignum{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:2rem; box-shadow:var(--shadow)}
.bignum .n{font-family:var(--serif); font-size:clamp(3rem,6vw,4.5rem); line-height:1; color:var(--ink)}
.bignum .n .em{color:var(--gold-deep)}
.bignum .l{color:var(--ink-2); margin-top:.6rem}

/* tier / pricing cards */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:start}
.tier{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:2rem 1.6rem; box-shadow:var(--shadow); position:relative}
.tier--pop{border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-8px)}
.tier__badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .9rem; border-radius:999px}
.tier h3{font-size:1.5rem; margin-bottom:.3rem}
.tier__for{font-size:.85rem; color:var(--ink-3); margin-bottom:1.2rem}
.tier__price{font-family:var(--serif); font-size:2.6rem; color:var(--gold-deep)}
.tier__price small{font-size:.95rem; color:var(--ink-3); font-family:var(--sans)}
.tier__list{list-style:none; display:grid; gap:.6rem; margin:1.4rem 0; border-top:1px solid var(--line); padding-top:1.4rem}
.tier__list li{display:flex; gap:.5rem; font-size:.92rem; color:var(--ink-2)} .tier__list li::before{content:"✓"; color:var(--accent)}

/* faq */
.faq{max-width:780px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item__q{width:100%; background:none; border:0; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.4rem 0; text-align:left; font-family:var(--serif); font-size:1.2rem; color:var(--ink)}
.faq-item__q::after{content:"+"; color:var(--accent); font-size:1.4rem; transition:transform .18s}
.faq-item.is-open .faq-item__q::after{transform:rotate(45deg)}
/* SINGLE-TECHNIQUE accordion: grid-rows 0fr->1fr only. The inner <p> is the
   min-height:0 / overflow:hidden wrapper. JS toggles ONLY .is-open (no
   max-height, no scrollHeight, no transitionend). Smooth open AND close, no
   jump. Reduced-motion just snaps (handled at the bottom of this file). */
.faq-item__a{display:grid; grid-template-rows:0fr; min-height:0; overflow:hidden; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.faq-item.is-open .faq-item__a{grid-template-rows:1fr}
.faq-item__a > *{min-height:0; overflow:hidden}
/* Chrome leaves a ~1-line min-content sliver on a 0fr track; mask it with the
   inner copy's opacity (closed=0) so no answer text ever bleeds under a closed
   question. Opacity fades in just behind the height open, single clean motion. */
.faq-item__a p{padding:0 0 1.4rem; color:var(--ink-2); opacity:0; transition:opacity .22s ease}
.faq-item.is-open .faq-item__a p{opacity:1; transition:opacity .26s ease .06s}

/* form */
.form-card{background:var(--surface); max-width:640px; margin:0 auto; border-radius:20px; box-shadow:var(--shadow-lg); border:1px solid var(--line); padding:clamp(1.75rem,4vw,2.6rem)}
.field{margin-bottom:1.1rem}
.field label{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:.45rem}
.field input,.field textarea{width:100%; background:var(--sunken); border:1px solid var(--line); border-radius:11px; padding:.8rem; font-family:var(--sans); font-size:1rem; color:var(--ink)}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint)}
.field__honey{position:absolute; left:-9999px}
.consent{display:flex; gap:.6rem; align-items:flex-start; margin:1.1rem 0 1.4rem; font-size:.85rem; color:var(--ink-2)}
.consent input{margin-top:.2rem; accent-color:var(--accent)}
.form__success{background:var(--accent-tint); border:1px solid var(--accent); border-radius:12px; padding:1.2rem; color:var(--accent-deep)}
.form__note{font-size:.8rem; color:var(--ink-3); text-align:center; margin-top:1rem}

/* closing CTA + footer */
.closing-band{
  background:linear-gradient(180deg,var(--blue) 0%,#111D33 48%,#0E1522 100%);
  color:rgba(254,249,239,.82);
  box-shadow:inset 0 1px 0 rgba(209,202,192,.18);
}
.closing-band h1,.closing-band h2,.closing-band h3{color:var(--paper)}
.closing-band .eyebrow{color:var(--gold-soft)}
.closing-band .em{color:#D4BC7A}
.closing-band .btn--primary{background:#FEF9EF; color:var(--blue); box-shadow:none}
.closing-band .btn--primary:hover{background:#FFFFFF; color:var(--blue)}
.final-cta{
  padding:clamp(4rem,7vw,6.2rem) 0 clamp(2.35rem,4.2vw,3.55rem);
  overflow:hidden;
  isolation:isolate;
}
.final-cta .container{position:relative; z-index:1}
.final-cta .display{font-size:clamp(2.55rem,5.4vw,4.6rem)}

.footer{background:var(--dark); color:var(--paper)}
.footer--blue{
  background:transparent;
  border-top:0;
}
.footer__top{padding:clamp(2.3rem,4.4vw,3.5rem) 0 2.7rem; display:grid; grid-template-columns:1.35fr .85fr .85fr 1fr; gap:clamp(1.6rem,4vw,3.5rem)}
.footer__brand img{height:38px; margin-bottom:1.1rem; filter:brightness(0) invert(1)}
.footer--blue .footer__brand img{filter:none}
.footer__brand p{color:rgba(254,249,239,.68); font-size:.96rem; line-height:1.65; max-width:31ch}
.footer h4{color:var(--gold-soft); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-family:var(--sans); margin-bottom:.95rem}
.footer a{color:rgba(254,249,239,.72); font-size:.94rem; line-height:1.45; display:block; padding:.32rem 0}
.footer a:hover{color:var(--gold-soft)}
.footer__bottom{border-top:1px solid rgba(209,202,192,.17); padding:1.35rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:rgba(254,249,239,.52)}
.footer--blue .caption{color:rgba(254,249,239,.42)!important}

/* reveal */
/* base reveal styling lives here; the hidden START state is gated by html.js +
   prefers-reduced-motion in the canonical block near the end of this file so
   content is always visible if JS fails (no blank-on-fail). */
.reveal{transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1; transform:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:1.35rem}
  .hero-copy{text-align:center}
  .hero-copy .display,.hero-copy .lead,.hero-note{margin-left:auto; margin-right:auto}
  .hero__cta,.hero-proof{justify-content:center}
  .hero-photo{max-width:540px; margin:0 auto}
  .recognition h2{max-width:20ch}
  .proof-snap__grid{grid-template-columns:1fr}
  .proof-snap__copy{text-align:center}
  .proof-snap__copy .lead{margin-left:auto; margin-right:auto}
  .cat-grid{grid-template-columns:1fr 1fr}
  .biomarker-strip{grid-template-columns:repeat(2,1fr)}
  .review-grid,.apply-flow{grid-template-columns:1fr 1fr}
  .steps,.steps--4,.arch,.docs,.tiers,.bignums,.hiw{grid-template-columns:1fr}
  .diff{grid-template-columns:1fr} .panel__main{grid-template-columns:1fr}
  .panel__nav{flex-flow:row wrap; gap:.45rem; border-right:0; border-bottom:1px solid var(--line)}
  .panel__navbtn{width:auto; flex:0 1 auto; font-size:.82rem; padding:.5rem .85rem; border:1px solid var(--line); border-radius:999px}
  .panel__navbtn.on{border-color:var(--accent)}
  .panel__set .grid2{grid-template-columns:1fr} .footer__top{grid-template-columns:1fr 1fr}
  .tier--pop{transform:none}
}
@media (max-width:760px){
  :root{--pad:clamp(3rem,8vw,4.35rem)}
  .container{padding-left:1.25rem; padding-right:1.25rem}
  .display{font-size:clamp(2.35rem,10.5vw,3.15rem); overflow-wrap:break-word; hyphens:none}
  h2,.h2{font-size:clamp(1.85rem,8.2vw,2.55rem)}
  .hero .display{max-width:11.5ch; padding:0 .1rem}
  .hero .lead,.sec-head .lead{font-size:1rem}
  .eyebrow{letter-spacing:.13em; font-size:.66rem; white-space:normal; line-height:1.5}
  .hero{padding-top:6.5rem} section{padding:var(--pad) 0}
  section.section-compact{padding:clamp(2.75rem,7vw,3.75rem) 0}
  section.section-tight{padding:clamp(1.9rem,6vw,2.7rem) 0}
  .lead{font-size:1.05rem}
  .nav__links,.nav__cta .btn{display:none} .nav__toggle{display:flex}
  .nav__drawer{display:flex; position:fixed; inset:0; z-index:200; background:var(--paper); flex-direction:column; padding:6rem 2rem 2rem; transform:translateY(-100%); transition:transform .34s; visibility:hidden}
  .nav.is-open .nav__drawer,.nav__drawer.open{transform:translateY(0); visibility:visible}
  .nav__drawer a{font-family:var(--serif); font-size:1.5rem; padding:.7rem 0; border-bottom:1px solid var(--line)}
  .cat-grid{grid-template-columns:1fr}
  .review-grid,.apply-flow{grid-template-columns:1fr}
  .proof-snap__media{grid-template-columns:1fr}
  .biomarker-strip{grid-template-columns:1fr 1fr}
  .bio-chip{min-height:58px; padding:.75rem .8rem}
  .bio-chip i{width:26px; height:26px}
  .bio-chip span{font-size:.86rem}
  .hero-photo{border-radius:16px}
  .hero-card{position:static; margin:.75rem; background:#fff} .hero--split .hero-card{display:none}
  /* NOTE: mobile .compare table is the single fixed-grid implementation in the
     dedicated COMPARISON TABLE block below (~line 1318). The old card-stack
     rules that used to live here were removed (they conflicted: 1fr/1fr rows +
     head{display:none} fought the fixed grid and caused horizontal overflow). */
  .panel{border-radius:10px}
  .panel__tiers{display:grid; grid-template-columns:1fr; align-items:stretch}
  .panel__tiers .lbl{margin:0 0 .15rem}
  .panel__tiers button{width:100%; min-height:44px}
  .panel__nav{padding:.75rem}
  .panel__navbtn{font-size:.8rem; min-height:40px; flex:1 1 calc(50% - .45rem); justify-content:center; text-align:center}
  .panel__navbtn .b{margin-left:.35rem}
  .panel__body{padding:1rem}
  .mk{align-items:flex-start; flex-direction:column; gap:.25rem; padding:.7rem 0}
  .tag{font-size:.58rem}
  .trust__row{gap:.4rem 1rem; font-size:.78rem} .trust__row span{gap:1rem}
  .trust__row span{max-width:100%; white-space:normal; text-align:center; justify-content:center}
  .arch-c,.steps,.tiers{grid-template-columns:1fr} .footer__top{grid-template-columns:1fr 1fr; gap:1.3rem 1.6rem} .footer__brand{grid-column:1 / -1}
  .diff__cols{grid-template-columns:1fr}
  .footer__bottom{display:block}
  .footer__bottom span{display:block}
  .footer__bottom span + span{margin-top:.45rem}
  .btn--lg{width:100%; justify-content:center}
}
@media (max-width:430px){
  .container{padding-left:1rem; padding-right:1rem}
  .display{font-size:clamp(1.8rem,8.6vw,2.3rem)}
  .hero .display{max-width:10.8ch}
  .hero-copy .lead{max-width:31ch}
  .hero-proof{display:grid; grid-template-columns:1fr; text-align:left}
  .hero-proof span{justify-content:center}
  .biomarker-strip{grid-template-columns:1fr}
  .panel__navbtn{flex-basis:100%}
  .hiw-card{padding:1.35rem 1.15rem}
  .diff__callout{left:.75rem; right:.75rem; max-width:none}
}

/* ---- UI fixes: real how-it-works photos, big proof, cleaner compare ---- */
.hiw-card__img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; margin-bottom:1.15rem; filter:saturate(.96)}
.proof-ba{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,1.7rem); margin-top:1.5rem}
.proof-ba__item{margin:0}
.proof-ba__item img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:14px; border:1px solid rgba(209,202,192,.22); display:block}
.proof-ba__item figcaption{margin-top:.7rem; font-size:.86rem; color:rgba(254,249,239,.68)}
.proof-ba__item figcaption b{color:#fff; font-weight:600}
.proof-foot{display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:1.5rem}
.proof-foot .caption{color:rgba(254,249,239,.6); max-width:50ch; margin:0}
.compare__std-note{font-size:.8rem; color:var(--ink-3); font-style:italic}
@media (max-width:760px){ .proof-ba{grid-template-columns:1fr} .proof-foot{flex-direction:column; align-items:flex-start} }

/* ---- doctors bios + collaboration ---- */
.doc--bio{text-align:left}
.doc--bio img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%; border-radius:14px; margin-bottom:1rem}
.doc--bio h3{font-size:1.4rem; margin-bottom:.25rem}
.doc--bio .role{font-size:.8rem; color:var(--gold-deep); letter-spacing:.02em; text-transform:none; font-weight:600}
.doc-bio{font-size:.94rem; color:var(--ink-2); line-height:1.62; margin-top:.85rem; max-width:none}
.collab{max-width:760px; margin:clamp(2rem,4vw,3rem) auto 0; text-align:center}
.collab__lead{font-family:var(--serif); font-size:clamp(1.45rem,2.6vw,2rem); color:var(--ink); line-height:1.2; margin-bottom:.85rem}
.collab p{color:var(--ink-2); margin:0 auto 1.2rem; max-width:64ch}
.collab .tlink{justify-content:center}

/* ---- program / value ---- */
.checklist{list-style:none; display:grid; gap:.6rem; padding:0; margin:0}
.checklist li{display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-2); font-size:.95rem; line-height:1.45; max-width:none}
.checklist li::before{content:"✓"; color:var(--accent); font-weight:700; flex:0 0 auto}
.program-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:1.5rem; align-items:stretch}
.program-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(1.5rem,2.5vw,2.1rem); box-shadow:var(--shadow)}
.program-card .eyebrow{margin-bottom:.7rem}
.program-card h3{font-size:1.55rem; margin-bottom:.7rem}
.program-card .checklist{margin:1.2rem 0 1.5rem}
.program-card .btn{margin-top:auto}
.program-card--quiet{background:transparent; border-style:dashed; box-shadow:none}
.program-price{font-family:var(--serif); color:var(--ink); display:flex; align-items:baseline; gap:.6rem; font-size:2.7rem; line-height:1; margin-bottom:.2rem}
.program-price span{font-family:var(--sans); font-size:.88rem; color:var(--ink-3); font-weight:400}
.who-for{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:1.8rem}
.who-for__col{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.6rem}
.who-for__col h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1rem; font-weight:600}
.who-for__col--not h4{color:var(--ink-3)}
.who-not li::before{content:"✕"; color:var(--ink-3)}
@media (max-width:760px){ .program-grid,.who-for,.docs--2{grid-template-columns:1fr} }

/* ===== homepage polish fixes (2026-06-24) ===== */
/* FAQ answer copy density. The OPEN/CLOSE animation itself is the single
   grid-rows technique defined near line 355 (no max-height here, that was the
   competing technique that caused the sliver/jump bug). */
.faq-item__a p{padding:.1rem 0 1.4rem; color:var(--ink-2); max-width:52ch}
/* "what both doctors review": real icons, real bullets, no letter squares */
.review-card__icon{width:44px; height:44px; border-radius:12px; background:var(--blue); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:0}
.review-card__icon svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.review-card > span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; display:block; margin-bottom:.4rem}
.review-card h3{font-size:1.24rem; margin-bottom:.8rem}
.review-card ul{list-style:none; display:grid; gap:.5rem; padding:0; margin:0}
.review-card ul li{font-size:.94rem; color:var(--ink-2); display:flex; gap:.55rem; align-items:flex-start; max-width:none; line-height:1.4}
.review-card ul li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:.55rem; flex:0 0 auto}
/* any section-closing disclaimer is centered */
.sec-note{text-align:center; max-width:64ch; margin:1.4rem auto 0; color:var(--ink-3); font-size:.8rem; line-height:1.5}
/* one-line centered variant (eyeox airway note): lift the width cap so it sits on a single line on desktop, still wraps on small screens */
.sec-note--oneline{max-width:none}
/* proof: calmer images, centered to match the rest */
.proof-snap .sec-head{text-align:center; margin-left:auto; margin-right:auto; max-width:660px}
.proof-ba{max-width:800px; margin:1.7rem auto 0}
.proof-ba__item img{aspect-ratio:4/3; filter:saturate(.8) brightness(.97)}
.proof-foot{justify-content:center; text-align:center; flex-direction:column; gap:1rem}
.proof-foot .caption{margin-left:auto; margin-right:auto}

/* ===== brighter gold, CTA arrow (reveal handled by canonical block below) ===== */
.band-blue .eyebrow{color:#E2B872}
.btn .arr{display:inline-block; transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ===== FAQ page: Function-style grouped pills + jump nav ===== */
.faq-layout{display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.faq-jump{position:sticky; top:96px}
.faq-jump__link{display:block; padding:.5rem 0 .5rem .9rem; margin-left:-.9rem; font-size:.92rem; color:var(--ink-2); border-left:2px solid transparent; transition:color .18s, border-color .18s}
.faq-jump__link:hover{color:var(--ink)}
.faq-jump__link.is-active{color:var(--gold-deep); border-left-color:var(--gold-deep); font-weight:600}
.faq-groups .faq{max-width:none; margin:0}
.faq-group + .faq-group{margin-top:clamp(2.6rem,4.5vw,4rem)}
.faq-group__title{font-size:clamp(1.5rem,2.6vw,1.95rem); margin-bottom:1.1rem}
.faq-groups .faq-item{border-bottom:0; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; margin-bottom:.55rem; transition:border-color .18s, background .18s}
.faq-groups .faq-item:hover{border-color:var(--line-strong)}
.faq-groups .faq-item.is-open{background:var(--surface); border-color:var(--line-strong)}
.faq-groups .faq-item__q{padding:1.05rem 1.3rem; font-size:1.06rem; gap:1.2rem; align-items:center}
.faq-groups .faq-item__q::after{content:"+"; flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line-strong); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--gold-deep); line-height:1}
/* grouped FAQ cards inherit the single grid-rows technique; only the inner
   padding differs (card has horizontal padding) */
.faq-groups .faq-item__a p{padding:0 1.3rem 1.2rem; color:var(--ink-2); font-size:.96rem; max-width:60ch}
.faq-search{max-width:420px; margin-bottom:clamp(2.2rem,4vw,3.4rem); position:relative}
.faq-search input{width:100%; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); padding:.85rem 2.8rem .85rem 1.2rem; font:inherit; font-size:.95rem; color:var(--ink); box-shadow:var(--shadow)}
.faq-search svg{position:absolute; right:1.1rem; top:50%; transform:translateY(-50%)}
@media (max-width:760px){
  .faq-layout{grid-template-columns:1fr; gap:1.6rem}
  .faq-jump{position:static; display:flex; flex-wrap:wrap; gap:.4rem .9rem; border-bottom:1px solid var(--line); padding-bottom:1rem}
  .faq-jump .eyebrow{flex-basis:100%; margin-bottom:.4rem}
  .faq-jump__link{border-left:0; padding-left:0; margin-left:0; padding:.2rem 0}
  .faq-jump__link.is-active{border-left:0}
}

/* ===== compact horizontal how-it-works (Function 01/02/03 style, one CTA) ===== */
.hiw--4{grid-template-columns:repeat(4,1fr); max-width:1140px; margin:0 auto; gap:1.15rem}
.hiw--4 .hiw-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.35rem; box-shadow:var(--shadow); display:flex; flex-direction:column}
.hiw-step{font-family:var(--sans); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin-bottom:.7rem; display:block}
.hiw--4 .hiw-card h3{font-size:1.1rem; line-height:1.2; margin-bottom:.5rem}
.hiw--4 .hiw-card > p{font-size:.85rem; color:var(--ink-2); line-height:1.5; margin-bottom:1.2rem; max-width:none}
.hiw-mini{margin-top:auto; height:150px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; position:relative; overflow:hidden; padding:.9rem; border:1px solid rgba(209,202,192,.18)}
.hiw-mini .mini-panel{width:100%; max-width:172px}
.hiw-mini .hiw-prev{width:100%; max-width:166px; margin:0; background:rgba(255,255,255,.95); padding:.5rem .75rem}
.hiw-mini .hiw-row{font-size:.72rem; padding:.3rem .05rem}
.hiw-mini .route-list{gap:.4rem}
@media (max-width:960px){ .hiw--4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .hiw--4{grid-template-columns:1fr} }

/* ===== light, polished how-it-works minis (not heavy navy) ===== */
.hiw-mini{margin-top:auto; height:156px; border-radius:12px; background:var(--sunken); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; position:relative; overflow:hidden; padding:.95rem}
.mini-list{width:100%; display:grid; gap:.36rem}
.ml-row{display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.36rem .58rem; font-size:.73rem; color:var(--ink)}
.ml-row i{color:var(--ok); font-style:normal; font-size:.78rem}
.mini-fit{text-align:center}
.mf-docs{display:flex; justify-content:center; margin-bottom:.6rem}
.mf-docs span{width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:700; color:var(--blue); box-shadow:var(--shadow)}
.mf-docs span:last-child{margin-left:-12px}
.mf-tag{display:inline-block; background:var(--accent); color:#fff; font-size:.66rem; font-weight:600; padding:.3rem .78rem; border-radius:999px}
.mini-chart{width:100%; text-align:center}
.mini-chart svg{width:100%; height:66px; display:block}
.mini-chart span{font-size:.66rem; color:var(--ink-3); display:block; margin-top:.2rem}
.mini-route{width:100%; display:grid; gap:.36rem}
.mr-row{display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:8px; padding:.38rem .58rem; font-size:.75rem; color:var(--ink)}
.mr-row i{width:18px; height:18px; border-radius:50%; background:var(--paper-2); color:var(--ink-3); font-style:normal; font-size:.64rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.mr-dim{opacity:.5}
.mr-on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.mr-on i{background:var(--accent); color:#fff}

/* ===== mobile overhaul: tighten + align ===== */
/* CANONICAL REVEAL: content is visible by default. The hidden start state only
   applies when JS is alive (html.js) AND motion is allowed, so a JS failure or
   reduced-motion preference always shows full content (no blank-on-fail). */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal:not(.is-visible){opacity:0; transform:translateY(16px)}
}
@media (max-width:760px){
  section{padding:clamp(2.7rem,7vw,3.6rem) 0}
  section.section-compact{padding:clamp(2.5rem,6.5vw,3.3rem) 0}
  section.section-tight{padding:clamp(2rem,5.5vw,2.8rem) 0}
  .container{padding:0 1.25rem}
  .sec-head{margin-bottom:1.5rem}
  .sec-head .lead,.hero-copy .lead,.lead{font-size:1rem; line-height:1.55}
  /* trust strip: clean centered stack, no trailing dots */
  .trust{padding:.85rem 0}
  .trust__row{flex-direction:column; gap:.4rem; font-size:.8rem; line-height:1.4}
  .trust__row span{gap:0; max-width:92%; text-align:center; justify-content:center}
  .trust__row span::after{display:none}
  /* hero: full-width CTAs, centered */
  .hero{padding-top:6.5rem; text-align:center}
  .hero-copy{text-align:center}
  .hero-copy .display{max-width:none; margin-inline:auto}
  .hero-copy .lead{margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero__cta .btn{flex:1 1 auto; min-width:0}
  .hero-proof{justify-content:center}
  /* mini visuals: let them size naturally so cards never look empty */
  .hiw-mini{height:auto; min-height:128px}
  /* doctor portraits a touch shorter on phone */
  .doc--bio img{aspect-ratio:4/4.4}
}

/* ===== color discipline: one warm palette, clear section dividers ===== */
.band-cream{box-shadow:none}
.band-paper, .band-cream{border-top:1px solid var(--line)}
.hero{border-top:0}
.band-blue, .band-dark, .closing-band, .final-cta{border-top:0}
/* tasteful line-draw animation on the pattern chart (content stays visible) */
.mini-chart polyline{stroke-dasharray:260; stroke-dashoffset:260; animation:drawline 1.5s ease .3s forwards}
.mini-chart circle{opacity:0; animation:dotIn .3s ease forwards}
.mini-chart circle:nth-of-type(1){animation-delay:.5s}.mini-chart circle:nth-of-type(2){animation-delay:.8s}.mini-chart circle:nth-of-type(3){animation-delay:1.1s}.mini-chart circle:nth-of-type(4){animation-delay:1.4s}
@keyframes drawline{to{stroke-dashoffset:0}}
@keyframes dotIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mini-chart polyline{stroke-dashoffset:0; animation:none}.mini-chart circle{opacity:1; animation:none}}

/* ===== fix amateur hero strips + muddy CBCT box ===== */
.trust{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.05rem 0}
.trust__row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.45rem 1.8rem}
.trust__row span::after{display:none !important}
.trust__eyebrow{font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.trust__name{font-family:var(--serif); font-size:1.05rem; color:var(--ink); font-weight:400}
.cbct-card{max-width:720px; margin:0 auto; background:var(--paper); border-radius:18px; padding:clamp(1.2rem,2.6vw,1.8rem); box-shadow:0 36px 84px -38px rgba(0,0,0,.6)}
.cbct-card .proof-ba{margin:0; gap:clamp(.9rem,2vw,1.4rem)}
.cbct-card .proof-ba__item img{aspect-ratio:4/3; filter:none; border:1px solid var(--line); border-radius:12px}
.cbct-card .proof-ba__item figcaption{color:var(--ink-2); margin-top:.6rem; text-align:center; font-size:.92rem}
.cbct-card .proof-ba__item figcaption b{color:var(--ink); font-weight:600}
.cbct-card .cbct-win{color:var(--accent-deep); font-weight:600}
@media (max-width:560px){ .trust__name{font-size:.96rem} }

/* ============================================================
   DESIGN SYSTEM UPGRADE: warm gradient life (Path-inspired flow)
   One warm ivory-to-peach-to-gold family plus a single richer navy
   gradient moment. Adds and overrides only. Center-align is default.
   All gradients are cohesive, premium, with clean hairline dividers.
   ============================================================ */

:root{
  /* warm tonal scale, ivory base lifting into soft peach then gold */
  --warm-ivory:#FDF8EE;
  --warm-blush:#FBF1E4;
  --warm-peach:#F8E9D8;
  --warm-sand:#F3E3CF;
  --warm-glow:#F6D9B8;        /* peachy hero bloom */
  --warm-gold-glow:#EEC79A;   /* deeper gold edge of the bloom */
  /* richer navy gradient stops for the dark moments */
  --navy-1:#16263F;
  --navy-2:#1B3052;
  --navy-3:#0F1B2E;
  --navy-deep:#0C1525;
  /* hairline divider that reads on warm bands */
  --hair:rgba(176,138,94,.22);
  --hair-soft:rgba(176,138,94,.14);
  --shadow-soft:0 1px 2px rgba(42,43,47,.03), 0 20px 48px -26px rgba(96,64,40,.20);
}

body{background:var(--warm-ivory)}

/* ---- HERO: soft warm gradient glow over ivory ---- */
.hero.band-paper, .hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(246,217,184,.85) 0%, rgba(248,233,216,.42) 34%, rgba(253,248,238,0) 66%),
    radial-gradient(90% 70% at 12% 96%, rgba(238,199,154,.34) 0%, rgba(253,248,238,0) 58%),
    linear-gradient(168deg, #FEFAF2 0%, var(--warm-ivory) 42%, var(--warm-blush) 100%);
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent);
}

/* ---- SECTION BANDS: warm tones that flow into each other ---- */
/* paper band: faintest warm wash, not flat white */
.band-paper{
  background:linear-gradient(180deg, var(--warm-ivory) 0%, #FCF6EC 100%);
}
/* cream band: a soft step warmer, blends from the paper above */
.band-cream{
  background:linear-gradient(180deg, var(--warm-blush) 0%, var(--warm-peach) 100%);
  box-shadow:none;
}
/* warm band: the peachiest moment, the warm heart of the page */
.band-warm{
  background:linear-gradient(180deg, var(--warm-peach) 0%, var(--warm-sand) 100%);
}
/* sand band: warmest, used to lead into the dark navy moment */
.band-sand{
  background:linear-gradient(180deg, var(--warm-sand) 0%, #EFDCC4 100%);
}
/* every warm band gets a clean hairline divider, no hard seams */
.band-paper, .band-cream, .band-warm, .band-sand{
  position:relative; border-top:0;
}
.band-paper::before, .band-cream::before, .band-warm::before, .band-sand::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--hair-soft) 16%, var(--hair-soft) 84%, transparent);
}
.hero::before{display:none}

/* ---- THE DARK MOMENT: richer gradient navy, not flat #13213B ---- */
.band-blue{
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(45,72,112,.55) 0%, rgba(22,38,63,0) 60%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy-1) 52%, var(--navy-3) 100%);
  color:rgba(254,249,239,.84);
  box-shadow:inset 0 1px 0 rgba(209,202,192,.16), inset 0 -1px 0 rgba(209,202,192,.10);
}
.band-dark{
  background:
    radial-gradient(110% 90% at 15% 0%, rgba(45,72,112,.42) 0%, rgba(22,38,63,0) 58%),
    linear-gradient(165deg, var(--navy-1) 0%, var(--navy-3) 60%, var(--navy-deep) 100%);
  color:var(--paper);
}
.closing-band{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(46,74,114,.50) 0%, rgba(18,29,51,0) 62%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 50%, var(--navy-deep) 100%);
  color:rgba(254,249,239,.84);
  box-shadow:inset 0 1px 0 rgba(209,202,192,.16);
}

/* ---- CENTER-ALIGN AS DEFAULT ---- */
.sec-head{text-align:center; max-width:880px; margin-left:auto; margin-right:auto}
.sec-head .lead{margin-left:auto; margin-right:auto}
/* leads default to a centered measured column */
.lead{max-width:60ch}
.sec-head.left{text-align:center; margin-inline:auto}
.sec-head.left .lead{margin-inline:auto}
.proof-snap__copy{text-align:center}
.proof-snap__copy .lead{margin-left:auto; margin-right:auto}
.caption{text-align:center}
.proof-ba__item figcaption{text-align:center}
.bignum{text-align:center}
.review-card{text-align:center}
.review-card__icon{margin-left:auto; margin-right:auto}
.review-card ul{justify-items:center}
.review-card ul li{justify-content:center; text-align:left}
.diff__box h4{text-align:center}

/* ---- MEMORABLE PRESS / CREDIBILITY BAR ---- */
.trust{
  background:linear-gradient(180deg, var(--warm-blush) 0%, var(--warm-peach) 100%);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:clamp(1.4rem,2.6vw,2rem) 0;
}
.trust__row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.7rem clamp(1.4rem,3vw,2.6rem);
}
.trust__eyebrow{
  flex-basis:100%; text-align:center; margin-bottom:.55rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:600;
}
.trust__name{
  font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.32rem);
  color:var(--blue); font-weight:500; letter-spacing:.01em; line-height:1.1;
  position:relative; padding:.1rem 0;
}
.trust__name + .trust__name::before{
  content:""; position:absolute; left:calc(-1 * clamp(.7rem,1.5vw,1.3rem)); top:50%;
  transform:translateY(-50%); width:5px; height:5px; border-radius:50%;
  background:var(--gold); opacity:.6;
}
.trust__row span::after{display:none !important}

/* ---- CLEAN CENTERED PRICING / PROGRAM COMPONENT ---- */
.pricing{max-width:640px; margin:0 auto; text-align:center}
.pricing__focal{
  background:linear-gradient(180deg, var(--surface) 0%, #FFFDF8 100%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(2.2rem,4vw,3.1rem) clamp(1.6rem,3vw,2.6rem);
  box-shadow:0 30px 70px -38px rgba(96,64,40,.34);
  position:relative; overflow:hidden;
}
.pricing__focal::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--accent) 50%, var(--gold-deep) 100%);
}
.pricing__eyebrow{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:600;
  display:block; margin-bottom:.9rem;
}
.pricing__name{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:.4rem}
.pricing__price{
  font-family:var(--serif); font-size:clamp(3.2rem,6vw,4.4rem); line-height:1;
  color:var(--blue); display:flex; align-items:baseline; justify-content:center; gap:.4rem;
  margin:.5rem 0 .3rem;
}
.pricing__price .cur{font-size:.5em; color:var(--gold-deep)}
.pricing__price small{font-family:var(--sans); font-size:.9rem; color:var(--ink-3); font-weight:400}
.pricing__sub{font-size:.94rem; color:var(--ink-2); max-width:46ch; margin:0 auto 1.6rem}
.pricing__incl{
  list-style:none; display:grid; gap:.7rem; padding:1.6rem 0; margin:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left;
  max-width:380px; margin-left:auto; margin-right:auto;
}
.pricing__incl li{display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color:var(--ink-2); line-height:1.45; max-width:none}
.pricing__incl li::before{content:"✓"; color:var(--accent); font-weight:700; flex:0 0 auto; margin-top:.05rem}
.pricing__cta{margin-top:1.7rem}
.pricing__note{font-size:.8rem; color:var(--ink-3); margin:1rem auto 0; max-width:42ch}

/* quieter "path beyond" line under the focal price */
.pricing__beyond{
  max-width:660px; margin:1.6rem auto 0; text-align:center;
  font-size:.94rem; color:var(--ink-2); line-height:1.6; text-wrap:balance;
}
.pricing__beyond b{color:var(--ink); font-weight:600}

/* clean centered for-you / not-for-you pair */
.fit-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;
  max-width:760px; margin:clamp(2rem,4vw,3rem) auto 0; text-align:left;
}
.fit-col{
  background:linear-gradient(180deg, var(--surface) 0%, #FFFDF8 100%);
  border:1px solid var(--line); border-radius:16px;
  padding:clamp(1.5rem,2.6vw,1.9rem); box-shadow:var(--shadow-soft);
}
.fit-col--not{background:linear-gradient(180deg, var(--warm-blush) 0%, var(--warm-peach) 100%); border-color:var(--hair)}
.fit-col h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; margin-bottom:1rem; text-align:center;
}
.fit-col--for h4{color:var(--gold-deep)} .fit-col--not h4{color:var(--ink-3)}
.fit-col ul{list-style:none; display:grid; gap:.7rem; padding:0; margin:0}
.fit-col li{display:flex; gap:.55rem; align-items:flex-start; font-size:.94rem; color:var(--ink-2); line-height:1.45; max-width:none}
.fit-col--for li::before{content:"✓"; color:var(--accent); font-weight:700; flex:0 0 auto}
.fit-col--not li::before{content:"✕"; color:var(--ink-3); font-weight:600; flex:0 0 auto}

@media (max-width:640px){ .fit-pair{grid-template-columns:1fr} }

/* keep existing left-aligned program/who-for working but center the heads */
.program-grid, .who-for{text-align:left}
.program-card .eyebrow{display:inline-block}

/* ---- card content centering where it reads cleanly ---- */
.doc, .bignum, .step-c.center, .hiw-card.center{text-align:center}
.step-c.center .step-c__n{margin-left:auto; margin-right:auto}

/* center stray figcaptions (authority/conference photos) + cleaner mobile pricing qualifier */
figcaption{text-align:center}
.pricing__price small{display:block; margin-top:.35rem; font-size:.82rem; font-weight:500; color:var(--ink-3)}

/* ============================================================
   SHARED CONSISTENCY HARDENING (cross-page, loads last)
   Enforces three contracts Aryan demanded site-wide:
   1) center-align is the genuine default and hard to violate
   2) a readability density floor (no tiny, cramped text)
   3) button discipline, no orphan/floating buttons or empty gaps
   Add/override only. Keeps every existing class working.
   ============================================================ */

/* ---- 1) CENTER-ALIGN AS THE ENFORCED DEFAULT ---- */
/* every content section centers its own block of copy by default.
   The HOME split hero opts out via .hero--split (copy stays left). */
section{text-align:center}
section.text-left, .text-left{text-align:left}

/* section heads, leads, captions, eyebrows: always centered + measured */
.sec-head, .sec-head .eyebrow, .sec-head h1, .sec-head h2, .sec-head h3,
.sec-head .lead, .sec-head p{text-align:center}
.sec-head .lead, .sec-head p{margin-left:auto; margin-right:auto}
.lead{margin-left:auto; margin-right:auto}
.caption, .sec-note, .form__note{text-align:center; margin-left:auto; margin-right:auto}
.eyebrow{margin-left:auto; margin-right:auto}

/* cards, pricing, proof, doctors: centered card shells by default */
.review-card, .doc, .bignum, .pricing, .cbct-card,
.proof-snap__copy, .proof-foot, .collab, .recognition{text-align:center}

/* lists inside centered cards: center the list block, keep the row text
   left-read for scannability (a centered bullet line is hard to read) */
.review-card ul, .pricing__incl, .checklist{margin-left:auto; margin-right:auto}

/* the HOME hero is the single intentional split layout: copy stays left */
.hero--split, .hero--split .hero-copy{text-align:left}
.hero--split .hero-copy .display,
.hero--split .hero-copy .lead,
.hero--split .hero-copy .eyebrow{margin-left:0; margin-right:0}
/* all non-split heroes are centered single-column */
.hero:not(.hero--split){text-align:center}
.hero:not(.hero--split) .lead,
.hero:not(.hero--split) .display,
.hero:not(.hero--split) .eyebrow{margin-left:auto; margin-right:auto}
.hero:not(.hero--split) .hero__cta{justify-content:center}

/* form-card stays left-labelled (a centered form reads broken) */
.form-card, .form-card .field, .form-card label{text-align:left}

/* footer columns read left, that is correct for nav lists */
.footer, .footer__top, .footer__brand{text-align:left}

/* left-read content blocks that must NOT inherit the centered section default:
   accordion FAQ lists, doctor bios, program/who-for columns, comparison
   rows and panels. These are scannable left-aligned by design. */
.faq, .faq-layout, .faq-jump, .faq-groups, .faq-group,
.faq-item, .faq-item__q, .faq-item__a, .faq-item__a p{text-align:left}
.faq-group__title{text-align:left}
.doc--bio, .doc--bio h3, .doc--bio .role, .doc-bio{text-align:left}
.program-grid, .program-card, .who-for, .who-for__col,
.who-for__col li, .checklist, .checklist li{text-align:left}
.compare, .compare__lab, .panel, .panel__navbtn,
.diff__box, .diff__box li, .arch-c__body{text-align:left}

/* ---- 2) READABILITY DENSITY FLOOR ---- */
/* body + general paragraph copy: never below ~1rem, comfortable leading */
body{font-size:clamp(1rem,1.02vw,1.0625rem); line-height:1.6}
p{line-height:1.6}
p + p{margin-top:.85em}
/* leads stay readable, never shrink under 1rem */
.lead{font-size:clamp(1rem,1.14vw,1.16rem); line-height:1.62}
/* the small/caption utilities had sub-readable sizes: lift the floor.
   captions are deliberately the quiet legal line, kept at .82rem min. */
.body-sm{font-size:1rem; line-height:1.6}
.caption{font-size:.82rem; line-height:1.55}

/* card + list copy density floor: bullets and card paragraphs were as low
   as .85rem with 1.2 to 1.3 leading. Bring every list/card body up. */
.review-card p, .review-card ul li,
.cat li, .checklist li, .pricing__incl li, .fit-col li,
.tier__list li, .arch-c__q, .arch-c__out,
.apply-card p, .step-c p, .doc-bio,
.who-for__col li, .program-card p,
.diff__box li, .hiw-card > p, .hiw--4 .hiw-card > p{
  font-size:.96rem; line-height:1.6;
}
/* list rows: comfortable vertical rhythm so nothing reads cramped */
.review-card ul, .checklist, .pricing__incl,
.fit-col ul, .tier__list, .who-for__col ul{gap:.6rem}
.cat li{padding:.34rem 0}

/* ---- 3) BUTTON DISCIPLINE + KILL FLOATING / EMPTY GAPS ---- */
/* any standalone CTA wrapper centers its button and carries its own,
   measured spacing so buttons never float in a void or stack empty gaps */
.cta-row, .center > .btn, .sec-head + .btn, .reveal > .btn{
  display:inline-flex;
}
.cta-row{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.8rem; margin-top:clamp(1.6rem,3vw,2.4rem);
}
/* a lone centered button block: consistent top spacing, centered */
.center{margin-left:auto; margin-right:auto}
/* primary CTA cadence: at most one loud primary per section reads clean.
   Secondary navigation should be inline text links, so any .btn--secondary
   sitting directly beside a primary in a CTA row stays visually quieter. */
.hero__cta .btn, .cta-row .btn{margin:0}

/* remove orphan empty vertical gaps: empty inline-style spacers collapse */
.center:empty, .cta-row:empty, .reveal:empty{display:none; margin:0; padding:0}
[style*="margin-top"]:empty{margin-top:0 !important}

/* buttons keep a single consistent rhythm site-wide */
.btn--lg{padding:.86rem 1.55rem}
.btn + .btn{margin-left:0}

/* ---- BAND FLOW SAFETY: never two identical bands hard-seamed ---- */
/* if two same-color bands ever land back to back, the hairline keeps a
   visible separation so it never reads as one flat slab */
.band-paper + .band-paper::before,
.band-cream + .band-cream::before,
.band-warm + .band-warm::before,
.band-sand + .band-sand::before{
  background:linear-gradient(90deg, transparent, var(--hair) 14%, var(--hair) 86%, transparent);
  height:1px;
}

/* ---- MOBILE: keep the density floor + centering on small screens ---- */
@media (max-width:760px){
  body{font-size:1rem; line-height:1.6}
  .lead, .sec-head .lead, .hero-copy .lead{font-size:1rem; line-height:1.6}
  .review-card p, .review-card ul li, .checklist li, .pricing__incl li,
  .fit-col li, .tier__list li, .apply-card p, .doc-bio,
  .hiw-card > p, .hiw--4 .hiw-card > p{font-size:.96rem; line-height:1.6}
  /* the split hero collapses to centered single column on phones */
  .hero--split, .hero--split .hero-copy{text-align:center}
  .hero--split .hero-copy .display,
  .hero--split .hero-copy .lead,
  .hero--split .hero-copy .eyebrow{margin-left:auto; margin-right:auto}
  /* full-width stacked CTAs, no floating half-width buttons */
  .cta-row{flex-direction:column; align-items:stretch}
  .cta-row .btn{width:100%}
}

/* ============================================================
   VISUAL RICHNESS KIT  (add/override only, all classes above preserved)
   Shared media + diagram components for the sub-pages. Uses the existing
   ivory/navy/copper tokens so mixed-source photos read as one practice.
   ============================================================ */

/* ---- (1) responsive image / figure treatment for section media ---- */
.figure{margin:0; position:relative}
.figure img{width:100%; height:auto; display:block; border-radius:16px; object-fit:cover; aspect-ratio:4/3; box-shadow:0 26px 60px -34px rgba(42,43,47,.38), 0 1px 2px rgba(42,43,47,.05)}
.figure--tall img{aspect-ratio:4/5}
.figure--wide img{aspect-ratio:16/9}
.figure--square img{aspect-ratio:1/1}
.figure figcaption{margin-top:.7rem; font-size:.84rem; line-height:1.5; color:var(--ink-3); text-align:center}
.figure figcaption b{color:var(--ink-2); font-weight:600}
/* framed navy/ivory variant for premium portraits */
.figure--framed img{border:1px solid var(--line); padding:0; background:var(--surface)}
.figure--framed{padding:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg)}
.figure--framed img{border-radius:13px; box-shadow:none}
.band-blue .figure--framed,.band-dark .figure--framed,.closing-band .figure--framed{background:rgba(255,255,255,.05); border-color:rgba(209,202,192,.20)}
.band-blue .figure figcaption,.band-dark .figure figcaption,.closing-band .figure figcaption{color:rgba(254,249,239,.6)}
.band-blue .figure figcaption b,.closing-band .figure figcaption b{color:rgba(254,249,239,.85)}
/* duotone-ish grade so varied source photos feel cohesive (copper/navy wash) */
.figure--grade img{filter:saturate(.82) contrast(1.03) brightness(.99)}
.figure--grade::after{content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; mix-blend-mode:soft-light; background:linear-gradient(150deg,rgba(19,33,59,.34),rgba(151,100,80,.20))}
.figure--framed.figure--grade::after{inset:.5rem; border-radius:13px}
/* zoom-on-hover, motion-safe */
@media (hover:hover){.figure--zoom{overflow:hidden}.figure--zoom img{transition:transform .6s cubic-bezier(.22,1,.36,1)}.figure--zoom:hover img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.figure--zoom img{transition:none}}

/* ---- (2) authority strip: tidy row of conference photos + caption ---- */
.authority-strip{max-width:1040px; margin:0 auto}
.authority-strip__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.4vw,1.05rem)}
.authority-strip__grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.authority-strip__grid figure{margin:0; border-radius:13px; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow)}
.authority-strip__grid img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:saturate(.9) contrast(1.02)}
.band-blue .authority-strip__grid figure,.band-dark .authority-strip__grid figure,.closing-band .authority-strip__grid figure{border-color:rgba(209,202,192,.20); background:rgba(255,255,255,.04)}
.authority-strip__cap{margin:1rem auto 0; text-align:center; font-size:.86rem; line-height:1.5; color:var(--ink-3); max-width:62ch}
.authority-strip__cap b{color:var(--ink-2); font-weight:600}
.band-blue .authority-strip__cap,.band-dark .authority-strip__cap,.closing-band .authority-strip__cap{color:rgba(254,249,239,.62)}
.band-blue .authority-strip__cap b,.closing-band .authority-strip__cap b{color:rgba(254,249,239,.88)}
@media (max-width:760px){.authority-strip__grid,.authority-strip__grid.is-3{grid-template-columns:1fr 1fr}}
@media (max-width:430px){.authority-strip__grid,.authority-strip__grid.is-3{grid-template-columns:1fr 1fr; gap:.6rem}}

/* ---- (3) media-split row: image one side, copy the other, alternating ---- */
.media-split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:clamp(2rem,4.5vw,4.4rem); max-width:1080px; margin-inline:auto}
.media-split + .media-split{margin-top:clamp(2.6rem,5vw,4.6rem)}
.media-split__media{min-width:0}
.media-split__copy{min-width:0; text-align:center}
.media-split__copy .eyebrow{margin-bottom:.65rem}
.media-split__copy h2,.media-split__copy h3{margin-bottom:.7rem}
.media-split__copy p{margin-inline:auto}
.media-split__copy .btn,.media-split__copy .tlink{margin-top:1.1rem}
/* alternating: image to the right, copy to the left */
.media-split--rev .media-split__media{order:2}
.media-split--rev .media-split__copy{order:1}
@media (max-width:860px){
  .media-split{grid-template-columns:1fr; gap:1.6rem; text-align:center}
  .media-split--rev .media-split__media,.media-split--rev .media-split__copy{order:0}
  .media-split__media{max-width:540px; margin-inline:auto}
}

/* ---- (4) mechanism flow: labeled nodes + connectors, subtle draw-in ---- */
.flow{max-width:1080px; margin:0 auto; display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:nowrap}
.flow__node{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:0 .35rem; position:relative}
.flow__dot{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); position:relative; z-index:2}
.flow__dot svg{width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.flow__dot b{font-family:var(--serif); font-size:1.3rem; color:var(--accent); line-height:1}
.flow__label{font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--ink); line-height:1.25}
.flow__sub{font-size:.78rem; color:var(--ink-3); line-height:1.4; max-width:18ch}
/* connector line drawn behind the dots, animated draw-in on reveal */
.flow__node::before{content:""; position:absolute; top:29px; left:-50%; width:100%; height:2px; background:repeating-linear-gradient(90deg,var(--line-strong) 0 7px,transparent 7px 13px); z-index:1; transform:scaleX(0); transform-origin:left; transition:transform .6s ease}
.flow__node:first-child::before{display:none}
.flow.is-visible .flow__node::before,.reveal.is-visible .flow .flow__node::before{transform:scaleX(1)}
.flow__node:nth-child(2)::before{transition-delay:.05s}
.flow__node:nth-child(3)::before{transition-delay:.30s}
.flow__node:nth-child(4)::before{transition-delay:.55s}
.flow__node:nth-child(5)::before{transition-delay:.80s}
/* dark-band variant */
.band-blue .flow__dot,.band-dark .flow__dot,.closing-band .flow__dot{background:rgba(255,255,255,.06); border-color:rgba(209,202,192,.22)}
.band-blue .flow__dot svg,.band-dark .flow__dot svg,.closing-band .flow__dot svg{stroke:var(--gold-soft)}
.band-blue .flow__dot b,.closing-band .flow__dot b{color:#E2B872}
.band-blue .flow__label,.band-dark .flow__label,.closing-band .flow__label{color:var(--paper)}
.band-blue .flow__node::before,.closing-band .flow__node::before{background:repeating-linear-gradient(90deg,rgba(209,202,192,.4) 0 7px,transparent 7px 13px)}
/* vertical variant for narrow contexts */
.flow--vert{flex-direction:column; align-items:center; max-width:420px; gap:0}
.flow--vert .flow__node{flex:0 0 auto; flex-direction:row; align-items:center; text-align:left; gap:.95rem; padding:.8rem 0; width:100%}
.flow--vert .flow__node::before{top:-50%; left:28px; width:2px; height:100%; background:repeating-linear-gradient(180deg,var(--line-strong) 0 7px,transparent 7px 13px); transform:scaleY(0); transform-origin:top}
.flow--vert.is-visible .flow__node::before,.reveal.is-visible .flow--vert .flow__node::before{transform:scaleY(1)}
.flow--vert .flow__sub{max-width:none}
@media (prefers-reduced-motion:reduce){.flow__node::before{transition:none; transform:none !important}}
/* horizontal flow stacks to vertical on mobile */
@media (max-width:680px){
  .flow{flex-direction:column; align-items:center; max-width:420px; gap:0}
  .flow .flow__node{flex:0 0 auto; flex-direction:row; align-items:center; text-align:left; gap:.95rem; padding:.8rem 0; width:100%}
  .flow .flow__node::before{top:-50%; left:28px; width:2px; height:100%; background:repeating-linear-gradient(180deg,var(--line-strong) 0 7px,transparent 7px 13px); transform:scaleY(0); transform-origin:top}
  .flow.is-visible .flow__node::before,.reveal.is-visible .flow .flow__node::before{transform:scaleY(1)}
  .flow__sub{max-width:none}
}

/* ---- (5) before/after proof pair on a clean light card (reuses cbct-card) ---- */
/* .proof-pair builds on the .cbct-card / .proof-ba pattern but always sits on
   a light surface, for arch / posture / CBCT pairs outside a dark band. */
.proof-pair{max-width:760px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(1.2rem,2.8vw,2rem); box-shadow:var(--shadow-lg)}
.proof-pair__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,1.6rem); margin:0}
.proof-pair__item{margin:0; position:relative}
.proof-pair__item img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:13px; border:1px solid var(--line); display:block; background:var(--sunken)}
.proof-pair__item figcaption{margin-top:.6rem; text-align:center; font-size:.86rem; color:var(--ink-2); line-height:1.45}
.proof-pair__item figcaption b{color:var(--ink); font-weight:600}
.proof-pair__tag{position:absolute; top:.6rem; left:.6rem; z-index:2; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#fff; background:rgba(19,33,59,.95); padding:.28rem .55rem; border-radius:999px}
.proof-pair__item.is-after .proof-pair__tag{background:rgba(151,100,80,.92)}
.proof-pair__foot{margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); text-align:center; font-size:.9rem; line-height:1.55; color:var(--ink-2)}
.proof-pair__foot b{color:var(--accent-deep); font-weight:600}
@media (max-width:560px){.proof-pair__grid{grid-template-columns:1fr}}

/* ---- (6) small stat / figure style (e.g. 18.31 -> 28.09 cm3) ---- */
.statline{display:inline-flex; align-items:baseline; flex-wrap:wrap; justify-content:center; gap:.55rem; font-family:var(--serif); line-height:1}
.statline__from{font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ink-3); position:relative}
.statline__arrow{font-family:var(--sans); font-size:1.1rem; color:var(--accent); transform:translateY(-.08em)}
.statline__to{font-size:clamp(2.2rem,4.6vw,3.2rem); color:var(--accent-deep); font-weight:400}
.statline__unit{font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.04em; color:var(--ink-3); align-self:flex-end; transform:translateY(-.15em)}
.stat-figure{text-align:center; max-width:480px; margin-inline:auto}
.stat-figure .statline{margin-bottom:.5rem}
.stat-figure__label{font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; margin-bottom:.7rem; display:block}
.stat-figure__note{font-size:.86rem; line-height:1.5; color:var(--ink-2); margin-inline:auto; max-width:46ch}
.band-blue .statline__from,.closing-band .statline__from{color:rgba(254,249,239,.5)}
.band-blue .statline__to,.closing-band .statline__to{color:#E2B872}
.band-blue .statline__unit,.closing-band .statline__unit{color:rgba(254,249,239,.6)}
.band-blue .stat-figure__note,.closing-band .stat-figure__note{color:rgba(254,249,239,.7)}
.band-blue .stat-figure__label,.closing-band .stat-figure__label{color:var(--gold-soft)}

/* ===== Restrained 3-tone band system (brand: paper-white / soft warm / navy) =====
   Only two light tones so sections never fight: a barely-warm white and one
   soft warm ivory. Navy is the single dark moment. "As featured on" = pure white. */
.band-paper{background:#FCFBF8}
.band-cream{background:#F5EFE3}
.band-warm{background:#FCFBF8}
.band-sand{background:#EFE7D8}
.trust{background:#FFFFFF}
/* hero: a whisper-warm brand gradient easing into the white featured strip */
.hero{background:linear-gradient(180deg,#F7F1E7 0%, #FCFBF8 58%)}
/* ===== force-center the recurring offenders ===== */
.trust__row{flex-wrap:wrap; justify-content:center; row-gap:.4rem}
.trust__eyebrow{flex-basis:100%; text-align:center; display:block}
.proof-ba__item figcaption, .proof-pair__item figcaption{text-align:center; font-size:.95rem}
.doc--bio{text-align:center}
.doc--bio .doc-creds{display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; padding:0; margin:1.1rem auto 0; list-style:none; max-width:360px}
/* ===== proof caption: readable, not cramped ===== */
.proof-foot .caption{font-size:1rem; line-height:1.62; max-width:48ch}
/* ===== dallas authority grid: feature on top, 3 tiles below, no empty cell ===== */
.dallas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; max-width:1080px; margin:0 auto}
.dallas-feat{grid-column:1/-1; margin:0; border-radius:14px; overflow:hidden}
.dallas-feat img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block}
.dallas-tile{margin:0; border-radius:12px; overflow:hidden}
.dallas-tile img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
@media (max-width:640px){ .dallas-grid{grid-template-columns:1fr 1fr} }

/* ===== fix: proof-foot block was max-width but left-anchored (no auto margin) ===== */
.proof-foot{margin-left:auto !important; margin-right:auto !important; text-align:center; align-items:center; justify-content:center}
.proof-foot .caption{text-align:center; margin-left:auto; margin-right:auto; max-width:54ch; color:rgba(254,249,239,.82); font-size:1rem; line-height:1.62}
.band-paper .proof-foot .caption,.band-cream .proof-foot .caption,.band-warm .proof-foot .caption,.band-sand .proof-foot .caption{color:var(--ink-2)}

/* ===== trust/featured-on: robust block-centered (flex-basis trick was unreliable) ===== */
.trust .container{text-align:center}
.trust__row{display:block !important; text-align:center}
.trust__eyebrow{display:block; text-align:center; margin:0 auto .55rem; width:auto}
.trust__name{display:inline}

/* ===== trust bar: clean inline centered lockup with separator ===== */
.trust__row{display:block; text-align:center}
.trust__eyebrow{display:inline; margin-right:.6rem; vertical-align:middle}
.trust__name{display:inline; vertical-align:middle}
.trust__name + .trust__name::before{content:"\00B7"; margin:0 .55rem; color:var(--accent); font-weight:700}

/* ============================================================
   SHARED FIXES (loads last, add/override only, every page)
   1) Featured-on bar: label on its own centered line, items below
   2) Mobile nav drawer: open / scroll / close, animated burger -> X
   3) Hero media: capped height on phones so content is reachable
   4) Comparison table: Function fixed 3-column mobile pattern
   No em-dashes. Keeps every existing class working.
   ============================================================ */

/* ---- (1) FEATURED-ON: eyebrow on its OWN centered line on top, items
   centered below it on a single wrapping row, on every page ---- */
.trust__row{
  display:flex !important; flex-wrap:wrap; flex-direction:row;
  justify-content:center; align-items:center; text-align:center;
  gap:.4rem 0;
}
.trust__eyebrow{
  flex-basis:100%; width:100%; display:block; order:-1; margin:0 0 .6rem;
  text-align:center; font-family:var(--sans); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:600;
}
.trust__name{display:inline-flex; align-items:center; vertical-align:middle; position:relative; padding:0 clamp(.5rem,1.2vw,1rem)}
/* dot separator between adjacent items on the centered line */
.trust__name + .trust__name::before{
  content:"\00B7"; position:absolute; left:0; top:50%; transform:translate(-50%,-50%);
  margin:0; color:var(--accent); font-weight:700;
  width:auto; height:auto; background:none; border-radius:0;
}
@media (max-width:560px){
  .trust__row{flex-direction:column; gap:.32rem 0}
  .trust__name{padding:0}
  .trust__name + .trust__name::before{display:none}
}

/* ---- (2) MOBILE NAV DRAWER (robust open / scroll / close) ---- */
/* lock the page behind an open drawer without losing the drawer's own scroll */
html.nav-locked, body.nav-locked{overflow:hidden; touch-action:none}
@media (max-width:760px){
  .nav__links, .nav__cta .btn{display:none}
  .nav__toggle{display:flex; position:relative; z-index:260}
  /* burger -> X animation */
  .nav__toggle span{transition:transform .26s ease, opacity .2s ease}
  .nav__toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-active span:nth-child(2){opacity:0}
  .nav__toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* full-screen-ish, scrollable panel that slides down and closes cleanly */
  .nav__drawer{
    display:flex; position:fixed;
    top:0; left:0; right:0; bottom:0;
    width:100%; height:100vh; height:100dvh; min-height:100vh; max-height:none;
    z-index:200; background:var(--paper);
    flex-direction:column; align-items:stretch; gap:.1rem;
    padding:5.4rem 1.6rem 2rem;
    transform:translateY(-100%);
    transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
    visibility:hidden;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .nav.is-open .nav__drawer, .nav__drawer.open{
    transform:translateY(0); visibility:visible;
    transition:transform .34s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .nav__drawer a{
    font-family:var(--serif); font-size:1.45rem; line-height:1.2;
    padding:.85rem .2rem; border-bottom:1px solid var(--line); color:var(--ink);
  }
  /* the drawer CTA is a real button, not a borderless link */
  .nav__drawer a.btn{
    font-family:var(--sans); font-size:.96rem; border-bottom:0;
    margin-top:1.4rem; padding:.95rem 1.4rem;
  }
  .nav__drawer a.btn--primary{color:#fff}
}

/* ---- (3) HERO MEDIA: cap height on phones, cover-crop, content reachable ---- */
@media (max-width:760px){
  .hero{padding-top:5.8rem}
  .hero-media{max-width:460px; margin:0 auto}
  .hero-photo{border-radius:16px; max-height:52vh}
  .hero-photo img{
    aspect-ratio:auto; height:52vh; max-height:380px; min-height:240px;
    width:100%; object-fit:cover; object-position:center 28%;
  }
  /* card sits inside the capped frame again so the hero stays compact */
  .hero-card{position:absolute; left:.85rem; right:.85rem; bottom:.85rem; margin:0; background:rgba(255,255,255,.94)}
}
@media (max-width:430px){
  .hero-photo{max-height:46vh}
  .hero-photo img{height:46vh; max-height:330px; min-height:220px}
}

/* ---- (4) COMPARISON TABLE: Function fixed 3-column mobile pattern ----
   Rebuild .compare at small widths into a REAL fixed grid that holds shape:
   col 1 (wide) = feature label, left-aligned, wraps cleanly; col 2 (narrow) =
   Aligness as ONE continuous raised band with rounded top/bottom carrying the
   logo header chip; col 3 (narrow) = Standard, de-emphasized. Header shown once,
   zebra striping on the label column, no horizontal scroll, no relabeling. */
@media (max-width:760px){
  .checkup-compare{overflow:hidden}
  .compare{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 52px 46px;
    column-gap:0; row-gap:0;
    max-width:100%; margin:0 auto;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:var(--surface); box-shadow:0 18px 46px -30px rgba(42,43,47,.26);
    padding:0; position:relative;
  }
  /* every row becomes 3 grid cells in source order (auto-placement keeps the
     grid rectangular: head row first, then each body row, no collisions) */
  .compare__row{display:contents}
  .compare__row.head{display:contents}

  /* HEADER (shown once): empty label cell + Aligness chip + Standard chip */
  .compare__row.head .compare__lab{
    background:transparent; border:0; padding:.9rem .9rem .5rem; min-height:0;
  }
  .compare__row.head .compare__c--brand{
    background:transparent; color:#fff; border-radius:14px 14px 0 0;
    padding:.7rem .2rem .55rem; min-height:0; height:auto; border-top:0;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.25rem;
    position:relative; z-index:2;
  }
  /* the continuous raised band sits behind every brand cell, col 2 */
  .compare::before{
    content:""; position:absolute; top:0; bottom:0;
    /* align to col 2: rightmost two tracks are 52 + 46, so band starts 98px from right */
    right:46px; width:52px;
    background:var(--blue);
    z-index:0;
  }
  .compare__logo{width:52px; height:auto; margin:0; filter:brightness(0) invert(1)}
  .compare__kicker{display:none}
  .compare__row.head .compare__c--std{
    background:transparent; padding:.7rem .15rem .55rem; border-top:0;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.2rem;
  }
  .compare__std-title{font-family:var(--sans); font-size:.6rem; line-height:1.15; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:700; text-align:center}
  .compare__row.head .compare__c--std .caption{display:none}

  /* BODY ROWS: label (zebra) + brand check (on the band) + standard x */
  .compare__lab{
    grid-column:1; align-self:stretch;
    display:flex; align-items:center;
    padding:.7rem .9rem; min-height:48px;
    font-size:.88rem; line-height:1.3; font-weight:600; color:var(--ink);
    text-align:left; border:0; border-top:1px solid var(--line); background:transparent;
  }
  /* zebra striping on the label column for scanability */
  .compare__row:nth-of-type(odd) .compare__lab{background:rgba(246,233,213,.5)}
  .compare__c{
    border:0; border-top:1px solid rgba(255,255,255,.16);
    padding:.7rem .1rem; min-height:48px; font-size:.78rem;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .compare__c--brand{
    grid-column:2; position:relative; z-index:1;
    background:transparent; color:#fff; font-weight:600;
  }
  .compare__c--std{
    grid-column:3; background:transparent; color:var(--ink-3);
    border-top:1px solid var(--line);
  }
  /* the band caps: round the first body brand cell top is handled by header;
     round the last brand cell bottom so the pill extends just past the table */
  .compare__row:last-of-type .compare__c--brand{border-radius:0 0 14px 14px}
  /* white filled circle + check on each brand row */
  .compare__c--brand .ico, .compare__c--brand .ico--yes{
    background:#fff; color:var(--accent-deep); width:22px; height:22px; font-size:.74rem; box-shadow:0 1px 3px rgba(0,0,0,.18)}
  .compare__c--brand .compare__big{font-family:var(--serif); font-size:.86rem; color:#fff; line-height:1.1}
  /* standard column: thin outlined de-emphasized icon */
  .compare__c--std .ico--no{background:transparent; border:1px solid var(--line-strong); color:var(--ink-3); width:20px; height:20px; font-size:.64rem}
  .compare__c--std .compare__std-note,.compare__c--std{font-size:.72rem; color:var(--ink-3)}
  .compare__c--std .compare__big{font-size:.78rem; color:var(--ink-3)}
  /* kill the old per-cell ::before relabeling so labels never repeat */
  .compare__c::before, .compare__c--brand::before, .compare__c--std::before{content:none !important; display:none !important}
}
@media (max-width:380px){
  .compare{grid-template-columns:minmax(0,1fr) 48px 42px}
  .compare::before{right:42px; width:48px}
  .compare__logo{width:46px}
  .compare__lab{font-size:.84rem; padding:.65rem .7rem}
}

/* ===== featured-on: global stacked layout (label top-centered, items below) ===== */
.trust .container{text-align:center}
.trust__row{display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35rem 1.3rem; text-align:center}
.trust__eyebrow{flex:0 0 100% !important; order:-1; text-align:center; display:block; margin:0 0 .15rem}
.trust__name{display:inline-flex}
.trust__name + .trust__name::before{content:"\00B7"; margin:0 .55rem; color:var(--accent); font-weight:700}

/* ===== boldness pass: more weight + presence (was too light/passive) ===== */
h1, h2, h3, h4, .display{font-weight:500}
.sec-head h2{font-weight:500}
.lead, .sec-head .lead{color:var(--ink-2)}
.eyebrow{font-weight:700; letter-spacing:.2em}
.nav__links a{font-weight:600}
.faq-item__q{font-weight:600 !important; color:var(--ink)}
.faq-cat, .faq-group h3, .faq__cat-title{font-weight:700}
.trust__name{font-weight:600}
.compare__lab{font-weight:600}
.review-card h3, .hiw-card h3, .doc h3, .pricing__name{font-weight:500}

/* ============================================================
   (5) PREMIUM MOTION + MOBILE DENSITY  (appended, authoritative)
   Contract: content visible by default. Every hidden START state is gated
   behind html.js (JS alive) AND prefers-reduced-motion:no-preference, so a
   JS failure or reduced-motion user always sees full content. Transform/opacity
   only for 60fps. No layout-thrashing properties.
   ============================================================ */

/* CTA arrow micro-interaction: nudge right on hover AND tap-active */
.btn .arr, .tlink .arr{display:inline-block; transition:transform .2s ease; will-change:transform}
.btn:hover .arr, .btn:active .arr, .tlink:hover .arr, .tlink:active .arr{transform:translateX(3px)}

@media (prefers-reduced-motion:no-preference){

  /* ---- HERO soft parallax (index/airway/proof). transform only, capped in JS
          so it never reveals empty space above/below the image. ---- */
  html.js .hero-photo img, html.js .ap-hero-figure img{will-change:transform}
html.js .hero--split .hero-photo img{will-change:auto}

  /* ---- APPROACH mechanism-flow: tight staggered entrance (max ~180ms total),
          reads as one motion, not a slow pop sequence. Container gets
          .is-visible from the observer; steps + arrows slide up in sequence. */
  html.js .ap-flow .ap-step,
  html.js .ap-flow .ap-arrow{opacity:0; transform:translateY(10px); transition:opacity .42s ease, transform .42s ease}
  html.js .ap-flow.is-visible .ap-step,
  html.js .ap-flow.is-visible .ap-arrow{opacity:1; transform:none}
  html.js .ap-flow.is-visible .ap-step:nth-child(1){transition-delay:0ms}
  html.js .ap-flow.is-visible .ap-arrow:nth-child(2){transition-delay:50ms}
  html.js .ap-flow.is-visible .ap-step:nth-child(3){transition-delay:60ms}
  html.js .ap-flow.is-visible .ap-arrow:nth-child(4){transition-delay:110ms}
  html.js .ap-flow.is-visible .ap-step:nth-child(5){transition-delay:120ms}
  html.js .ap-flow.is-visible .ap-arrow:nth-child(6){transition-delay:170ms}
  html.js .ap-flow.is-visible .ap-step:nth-child(7){transition-delay:180ms}
  html.js .ap-flow.is-visible .ap-arrow:nth-child(8){transition-delay:200ms}
  html.js .ap-flow.is-visible .ap-step:nth-child(9){transition-delay:200ms}

  /* ---- SVG draw-in: line-chart + mechanism paths draw on when in view ----
          Gated by .is-visible so reduced-motion / no-JS render fully drawn. */
  html.js .draw-svg path, html.js .draw-svg polyline, html.js .draw-svg line{
    stroke-dasharray:var(--draw-len, 600); stroke-dashoffset:var(--draw-len, 600);
    transition:stroke-dashoffset 1.4s ease}
  html.js .draw-svg.is-visible path, html.js .draw-svg.is-visible polyline, html.js .draw-svg.is-visible line{
    stroke-dashoffset:0}

  /* ---- compare brand-band check circles: subtle one-time entrance, 40ms
          stagger down the column as the table enters view (mobile only below). */
  html.js .compare.is-visible .compare__c--brand .ico--yes{animation:checkPop .4s ease both}
  html.js .compare.is-visible .compare__row:nth-of-type(2) .ico--yes{animation-delay:.04s}
  html.js .compare.is-visible .compare__row:nth-of-type(3) .ico--yes{animation-delay:.08s}
  html.js .compare.is-visible .compare__row:nth-of-type(4) .ico--yes{animation-delay:.12s}
  html.js .compare.is-visible .compare__row:nth-of-type(5) .ico--yes{animation-delay:.16s}
  html.js .compare.is-visible .compare__row:nth-of-type(6) .ico--yes{animation-delay:.20s}
  html.js .compare.is-visible .compare__row:nth-of-type(7) .ico--yes{animation-delay:.24s}
}
@keyframes checkPop{from{transform:scale(.8); opacity:.4} to{transform:scale(1); opacity:1}}

/* hard stop for anyone who asked for less motion */
@media (prefers-reduced-motion:reduce){
  .ap-flow .ap-step, .ap-flow .ap-arrow{opacity:1 !important; transform:none !important; transition:none !important}
  .draw-svg path, .draw-svg polyline, .draw-svg line{stroke-dashoffset:0 !important; transition:none !important}
  .compare .ico--yes{animation:none !important}
}

/* ============================================================
   MOBILE DENSITY: cut low-value decoration on phones (conversion).
   Less scroll, more signal. Phones only (<=560px), keep desktop intact.
   ============================================================ */
@media (max-width:560px){
  /* hero supporting note is long; trim to signal on phones */
  .hero-note{font-size:.82rem; line-height:1.45; max-width:42ch; margin-top:.7rem}
  /* decorative hero proof pills: keep the first two, drop overflow noise */
  .hero-proof span:nth-child(n+3){display:none}
  /* redundant captions / fine print under visuals add scroll, little signal */
  .hiw-mini, .mini-chart span, .proof-foot .caption{}
  /* shorten over-long leads so the fold is reachable faster */
  .sec-head .lead{font-size:.97rem}
  /* mini decorative panels inside how-it-works cards are noise on a phone */
  .hiw-mini{display:none}
  /* utility hooks the HTML can opt into to drop/condense on mobile */
  .mobile-hide{display:none !important}
  .mobile-compact{margin-top:.4rem !important; margin-bottom:.4rem !important}
}

/* HERO media height: hard cap so the first real content sits within ~1.1
   screens on a phone (no scroll-forever before content). Tighten the hero
   stack spacing too so the section after the hero comes up sooner. */
@media (max-width:560px){
  .hero{padding-top:5.6rem; padding-bottom:1.4rem}
  .hero-copy .display{margin-bottom:.85rem}
  .hero-copy .lead{margin-bottom:1.1rem}
  .hero-motif{margin:.55rem 0 .85rem}
  .hero__cta{margin-bottom:.4rem}
  .hero-media{max-width:430px; margin:.85rem auto 0}
  .hero-photo{max-height:42vh}
  .hero-photo img{aspect-ratio:auto; height:42vh; max-height:300px; min-height:200px; object-fit:cover; object-position:center 28%}
}
@media (max-width:390px){
  .hero-photo{max-height:38vh}
  .hero-photo img{height:38vh; max-height:270px; min-height:188px}
}

/* ===== testimonials ===== */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; max-width:1080px; margin:0 auto}
.testi-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem; box-shadow:var(--shadow); margin:0; display:flex; flex-direction:column; gap:1rem}
.testi-card p{font-family:var(--serif); font-size:1.04rem; line-height:1.5; color:var(--ink); margin:0; position:relative}
.testi-card p::before{content:"\201C"; color:var(--accent); font-size:1.6rem; line-height:0; vertical-align:-.3em; margin-right:.1rem}
.testi-card cite{font-style:normal; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--gold-deep); margin-top:auto}
@media (max-width:820px){ .testi-grid{grid-template-columns:1fr; gap:.8rem} }

/* ============================================================
   SHARED FIXES v2 (loads last, authoritative, add/override only)
   Every page. No em-dashes. Reduced-motion safe. Keeps all classes working.
     2  Premium navy sticky header
     1  Featured-on: premium centered credibility lockup, all pages
     4  Mobile comparison table: white logo + cream text on brown, no clip
     5  Mobile how-it-works: real 01/02/03 numbers, no white dots
     6  CBCT count-up: reserve width so the number never overlaps text
     7  Line widths: tighter measure (no 5-6 line paragraphs)
     6b Testimonials sliding carousel (CSS half; JS in main.js)
   ============================================================ */

/* ---- (2) PREMIUM NAVY STICKY HEADER ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, var(--navy-2) 0%, var(--navy-1) 100%);
  border-bottom:1px solid rgba(226,184,114,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -22px rgba(0,0,0,.7);
  transition:box-shadow .3s ease, background .3s ease;
}
.nav.scrolled{
  box-shadow:0 8px 30px -20px rgba(0,0,0,.85);
  border-bottom-color:rgba(226,184,114,.24);
}
.nav__inner{height:68px}
/* logo to its light/ivory variant so it reads on navy */
.nav__logo img{filter:brightness(0) invert(1); opacity:.96}
.nav__links a{color:rgba(254,249,239,.82); font-weight:600}
.nav__links a:hover{color:#fff}
.nav__links a[aria-current=page]{color:#fff}
.nav__links a::after{background:var(--gold)}
/* burger turns ivory on the navy bar */
.nav__toggle span{background:#FEF9EF}
/* nav CTA button: warm copper primary reads great on navy */
.nav__cta .btn--primary{background:var(--accent); color:#fff; box-shadow:0 10px 24px -14px rgba(176,90,54,.8)}
.nav__cta .btn--primary:hover{background:var(--accent-deep)}
.nav__cta .btn--secondary{border-color:rgba(226,184,114,.4); color:#FEF9EF}
.nav__cta .btn--secondary:hover{background:rgba(226,184,114,.12); border-color:var(--gold); color:#fff}
/* the body already pads via hero padding-top; keep it comfortable */

/* ---- (1) FEATURED-ON: premium centered credibility lockup, every page ----
   Label on its own centered line, names below on a centered wrapping row with
   tasteful dot separators. Richer presence (serif names, gold dots). The
   earlier display:block / flex-basis attempts were unreliable across pages;
   this is the single source of truth and overrides them. */
.trust{
  background:#FFFFFF;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:clamp(1.5rem,3vw,2.3rem) 0;
}
.trust .container{text-align:center}
.trust__row{
  display:flex !important; flex-wrap:wrap; flex-direction:row;
  justify-content:center !important; align-items:center; text-align:center;
  gap:.55rem clamp(1rem,2.4vw,2rem); max-width:920px; margin:0 auto;
}
.trust__eyebrow{
  flex:0 0 100% !important; width:100%; order:-1; display:block;
  margin:0 0 .85rem; text-align:center;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:700;
}
.trust__name{
  display:inline-flex; align-items:center; position:relative; padding:0;
  font-family:var(--serif); font-weight:500; line-height:1.2;
  font-size:clamp(1rem,1.4vw,1.22rem); color:var(--blue); letter-spacing:.005em;
}
/* symmetric dot separator: equal margin both sides so the centered row stays
   truly centered (no rightward drift) */
.trust__name + .trust__name::before{
  content:""; position:static; transform:none;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
  margin:0 clamp(1rem,2.4vw,2rem) 0 0; opacity:.7; flex:0 0 auto;
}
@media (max-width:560px){
  .trust{padding:1.25rem 0}
  .trust__row{flex-direction:column; gap:.4rem 0; max-width:90%}
  .trust__name{font-size:1rem}
  .trust__name + .trust__name::before{display:none}
}

/* ---- (7) LINE WIDTHS: tighter measure so leads wrap to ~2 lines, not 5-6 ----
   Cap leads/paragraphs ~46-52ch site-wide. Centered blocks stay centered. */
.lead, .sec-head .lead, .hero-copy .lead{max-width:48ch}
.sec-head .lead{max-width:50ch}
p{max-width:60ch}
.proof-snap__copy .lead, .recognition .lead{max-width:46ch}
.cbct-delta__sub, .stat-figure__note{max-width:30ch}
/* hero lead a touch wider since it carries the promise */
.hero-copy .lead{max-width:46ch}
@media (max-width:760px){
  .lead, .sec-head .lead, .hero-copy .lead{max-width:34ch}
  p{max-width:38ch}
}

/* ---- (6) CBCT COUNT-UP: reserve horizontal room so the animating number
   (e.g. 0 -> +53) never overlaps the adjacent unit/label during the tween ---- */
.cbct-delta{min-width:200px}
.cbct-delta > div{display:inline-flex; align-items:baseline; justify-content:center; gap:.12em; white-space:nowrap}
.cbct-delta__num{font-variant-numeric:tabular-nums; min-width:3.2ch; text-align:right; display:inline-block}
.cbct-delta__unit{flex:0 0 auto}
/* the same guard for the inline statline figures used on sub-pages */
.statline__to, .statline__from{font-variant-numeric:tabular-nums}
.statline{flex-wrap:nowrap; white-space:nowrap}
/* before/after cm3 figures: stop the count-up digits jostling the caption */
.proof-ba__item figcaption [data-countup],
.cbct-card figcaption [data-countup]{display:inline-block; min-width:4ch; text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:680px){
  .cbct-delta{min-width:0; width:100%; padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:1rem; margin-top:.4rem}
}

/* ---- (5) MOBILE HOW-IT-WORKS: show real 01/02/03/04 numbers (no white dots) ----
   Any decorative dot-row inside a step visual is replaced/aided by a real
   numeral badge. The number badge is always rendered; decorative signal dots
   are hidden on phones so they never read as "blank dots instead of numbers". */
@media (max-width:760px){
  /* kill decorative dot rows that read as empty white dots on a phone */
  .signal-row, .doctor-pair span:empty{display:none}
  /* if a step uses the small .hiw-card__n badge, force the numeral visible */
  .hiw-card__n, .hiw-step{display:block !important; color:var(--gold-deep); font-weight:700}
  /* explicit big step numeral for any step card that opts in with data-step */
  .step-c__n, .hiw-mark{font-variant-numeric:tabular-nums}
}
/* a real numbered chip the HTML can render: <span class="step-num" data-n="01"> */
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.1rem; font-weight:500;
  width:40px; height:40px; border-radius:50%;
  color:var(--accent-deep); background:var(--accent-tint);
  border:1px solid rgba(176,90,54,.28); line-height:1;
}
.step-num::before{content:attr(data-n)}

/* ============================================================
   (6b) TESTIMONIALS SLIDING CAROUSEL
   Progressive enhancement: without JS the cards render as the existing grid.
   When JS adds .is-carousel the track becomes a horizontal scroll-snap rail
   with arrows + dots + drag. Auto-advance + drag handled in main.js.
   Reduced-motion: auto-advance is disabled in JS; scroll-snap still works.
   ============================================================ */
.testi{position:relative}
.testi-carousel{position:relative; max-width:1080px; margin:0 auto}
.testi-carousel.is-carousel .testi-grid{
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  padding:.4rem .2rem 1.2rem; margin:0;
  scrollbar-width:none;
}
.testi-carousel.is-carousel .testi-grid::-webkit-scrollbar{display:none}
.testi-carousel.is-carousel .testi-card{
  flex:0 0 clamp(280px, 86%, 360px); scroll-snap-align:center; margin:0;
}
@media (min-width:821px){
  .testi-carousel.is-carousel .testi-card{flex-basis:clamp(320px, 32%, 360px)}
}
.testi-carousel.is-dragging .testi-grid{scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none}
.testi-carousel.is-carousel .testi-card{cursor:grab}
/* arrows */
.testi-arrows{display:flex; justify-content:center; gap:.7rem; margin-top:.2rem}
.testi-carousel:not(.is-carousel) .testi-arrows,
.testi-carousel:not(.is-carousel) .testi-dots{display:none}
.testi-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--accent-deep); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); transition:background .18s, border-color .18s, transform .18s, opacity .18s;
}
.testi-arrow:hover{background:var(--accent-tint); border-color:var(--accent); transform:translateY(-1px)}
.testi-arrow:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.testi-arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.testi-arrow[disabled]{opacity:.4; cursor:default; transform:none}
/* dots */
.testi-dots{display:flex; justify-content:center; gap:.5rem; margin-top:1rem}
.testi-dot{
  width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(176,90,54,.28); transition:background .2s, transform .2s;
}
.testi-dot.is-active{background:var(--accent); transform:scale(1.35)}
.testi-dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .testi-carousel.is-carousel .testi-grid{scroll-behavior:auto}
}

/* ---- (4) MOBILE COMPARISON TABLE: contrast + no header clip ----
   Brand (brown) column: WHITE logo + cream text + white ticks (>=4.5:1).
   Standard header must NOT clip 'STANDARD CARE' (was losing the S). Widen the
   two value columns and let the standard header wrap. This block loads AFTER
   the earlier compare rules so it wins. */
@media (max-width:760px){
  .compare{
    grid-template-columns:minmax(0,1fr) 62px 60px;
  }
  /* re-anchor the continuous brown band to the wider brand track */
  .compare::before{right:60px; width:62px}
  /* brand HEADER: white logo on brown, cream kicker, never dark ink */
  .compare__logo{
    width:58px; height:auto; margin:0;
    /* force pure white regardless of which logo asset is wired */
    filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.25));
  }
  .compare__row.head .compare__c--brand{color:#FEF9EF}
  .compare__kicker{
    display:block; font-size:.5rem; letter-spacing:.1em; line-height:1.2;
    color:rgba(254,249,239,.82); text-transform:uppercase; max-width:9ch;
    margin:.1rem auto 0;
  }
  /* STANDARD header: allow wrap + shrink so the leading S is never clipped */
  .compare__row.head .compare__c--std{
    padding:.7rem .2rem .55rem; overflow:visible; min-width:0;
  }
  .compare__std-title{
    white-space:normal; overflow:visible; text-overflow:clip;
    font-size:.56rem; letter-spacing:.04em; line-height:1.2; max-width:100%;
    word-break:normal; hyphens:none;
  }
  /* brand body cells: cream text + bright white ticks on brown */
  .compare__c--brand{color:#FEF9EF}
  .compare__c--brand .compare__big{color:#fff; font-size:.8rem}
  .compare__c--brand .ico, .compare__c--brand .ico--yes{
    background:#fff; color:var(--accent-deep); width:22px; height:22px;
    font-size:.74rem; box-shadow:0 1px 3px rgba(0,0,0,.22);
  }
  /* standard column stays dark/gray on cream (already readable) */
  .compare__c--std{color:var(--ink-2)}
  .compare__c--std .compare__big{color:var(--ink-2); font-size:.76rem}
  .compare__c--std .compare__std-note{color:var(--ink-3); font-style:italic}
  /* label column stays dark on cream */
  .compare__lab{color:var(--ink); font-size:.86rem}
}
@media (max-width:380px){
  .compare{grid-template-columns:minmax(0,1fr) 56px 54px}
  .compare::before{right:54px; width:56px}
  .compare__logo{width:50px}
  .compare__std-title{font-size:.52rem}
  .compare__lab{font-size:.82rem; padding:.62rem .65rem}
}

/* ===== featured-on: real press-logo strip on a clean card, centered ===== */
.trust .container{text-align:center}
.trust__eyebrow{display:block; text-align:center; margin:0 auto}
.trust__logobar{display:inline-block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:.85rem 1.25rem; margin:.7rem auto 0; box-shadow:var(--shadow); max-width:480px}
.trust__logobar img{display:block; width:100%; height:auto; max-width:440px}

/* ===== Press strip: no box, real logos, spread full-width left -> right ===== */
.trust .container{max-width:1320px}
.press-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.8rem);
  width:100%; margin:clamp(1.1rem,2vw,1.6rem) auto 0;
}
.press-logo{
  height:clamp(36px,3.6vw,50px); width:auto; flex:0 0 auto;
  object-fit:contain; opacity:.95;
  transition:opacity .2s ease, transform .2s ease;
}
/* optical balance: compact/stacked marks need more height to read at equal weight */
.press-logo[src*="abc13"]{height:clamp(50px,5vw,72px)}
.press-logo[src*="wgem"]{height:clamp(48px,4.8vw,68px)}
.press-logo[src*="pix11"]{height:clamp(42px,4.1vw,60px)}
.press-logo:hover{opacity:1; transform:translateY(-1px)}
@media (max-width:760px){
  .press-row{justify-content:center; gap:1.4rem 1.8rem}
  .press-logo{height:30px}
  .press-logo[src*="abc13"]{height:44px}
  .press-logo[src*="wgem"]{height:42px}
  .press-logo[src*="pix11"]{height:36px}
}

/* eyeox airway: show the FULL illustration (whole skull), not a square crop.
   Slot hugs the image's 3:2 shape so nothing is cut off. */
.eyeox-air img{aspect-ratio:4/3; object-fit:cover; object-position:center}

/* ===================== COMPARISON TABLE — navy header, gold checks ===================== */
/* Brand column: navy header cap (gold logo + gold kicker), faint light body,
   gold filled checkmarks. No copper, no protrusion, no empty header box. */
.compare__logo{filter:none}                 /* gold logo as-is, never inverted */
@media (min-width:761px){
  /* no white card box: the table is transparent on the cream band; only the navy
     column is a raised, rounded, floating bar that protrudes above and below. */
  .compare{position:relative; overflow:visible; background:transparent; border:0; box-shadow:none}
  /* separators only on the label + standard columns, so the navy bar stays clean */
  .compare__row{position:relative; z-index:1; border-top:0}
  .compare__lab, .compare__c--std{border-top:1px solid rgba(176,138,94,.18)}
  .compare__row.head .compare__lab, .compare__row.head .compare__c--std{border-top:0}
  /* the raised NAVY column (Function structure, our colors) */
  .compare__highlight{
    position:absolute; z-index:0; top:-14px; bottom:-20px; right:148px; width:172px;
    background:linear-gradient(180deg,#172A46 0%, #11203A 100%);
    border-radius:18px;
    box-shadow:0 30px 60px -26px rgba(19,33,59,.55);
  }
  /* all brand cells transparent -> the navy column shows through; white text */
  .compare__c--brand{background:transparent; color:#fff}
  /* tighter header: logo only (kicker removed), standard-care centers to match it */
  .compare__row.head{min-height:64px}
  .compare__row.head .compare__c--brand{padding-top:.35rem}
  .compare__c--brand .compare__big{color:#fff}
  .compare__kicker{color:#C9A95E}            /* gold kicker on navy */
  .compare__logo{width:56px}
}
/* gold filled check; ghost ring + grey x for standard */
.compare__c--brand .ico--yes{
  background:#C6A24C; color:#fff;
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:800; box-shadow:0 2px 8px rgba(19,33,59,.3);
}
.compare__c--std .ico--no{
  background:transparent; color:var(--ink-3); border:1.5px solid var(--line-strong);
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:.72rem;
}
@media (max-width:760px){ .compare__highlight{display:none} }
/* MOBILE compare: match desktop — float the navy as a raised rounded card,
   drop the white table box + zebra, shrink the oversized logo (was 58px in a 62px col) */
@media (max-width:760px){
  .checkup-compare{overflow:visible}
  .compare{overflow:visible; background:transparent; border:0; box-shadow:none}
  .compare::before{
    background:linear-gradient(180deg,#172A46 0%,#11203A 100%);
    border-radius:16px; top:-8px; bottom:-10px;
    box-shadow:0 24px 48px -24px rgba(19,33,59,.5);
  }
  .compare__row:nth-of-type(odd) .compare__lab{background:transparent}
  .compare__c{border-top:0}
  .compare__lab, .compare__c--std{border-top:1px solid rgba(176,138,94,.18)}
  .compare__row.head .compare__lab, .compare__row.head .compare__c--std{border-top:0}
  .compare__logo{width:40px}
  .compare__row.head .compare__c--brand{padding:.8rem .2rem .5rem}
  .compare__kicker{display:none}
}

/* ===== six-lens cards: left-aligned list as a centered block (dots in one column) ===== */
.review-card ul{justify-items:start; width:fit-content; max-width:100%; margin-inline:auto}
.review-card ul li{justify-content:flex-start; text-align:left}

/* ===== doctor cards: equal height, View profile pinned to bottom so both align ===== */
.docs--2{align-items:stretch}
.doc--bio{display:flex; flex-direction:column}
.doc-linkedin{margin-top:1.9rem; align-self:center}

/* ===== FAQ (homepage): Function-style — bold sans questions, rounded-square +/x ===== */
.faq-groups .faq-item__q{font-family:var(--sans); font-weight:700; color:var(--ink); font-size:1.3rem; padding:1.05rem 1.4rem}
.faq-groups .faq-item__q::after{width:34px; height:34px; background:var(--surface); border:1px solid var(--line); border-radius:9px; color:var(--gold-deep); font-size:1.4rem; box-shadow:0 1px 2px rgba(42,43,47,.05)}
/* closed FAQ rows must fully collapse so the box = the question row (text + plus centered) */
.faq-groups .faq-item:not(.is-open) .faq-item__a{grid-template-rows:0fr}
.faq-groups .faq-item:not(.is-open) .faq-item__a > *{height:0; min-height:0; padding-top:0; padding-bottom:0; overflow:hidden}

/* ===== testimonials: drop the dots, keep the arrows (clean slideshow) ===== */
.testi-dots{display:none}

/* ===== footer + final CTA: no mobile horizontal overflow, slightly compact ===== */
.footer__top{padding:clamp(1.9rem,3.6vw,2.8rem) 0 2.2rem}
@media (max-width:760px){
  .final-cta h2, .final-cta p{max-width:100%; overflow-wrap:break-word}
  .footer__bottom{display:block; text-align:center}
  .footer__bottom span{display:block; max-width:100%; overflow-wrap:break-word}
  .footer__bottom span + span{margin-top:.5rem}
}

/* ============================================================
   CLOSEOUT DESIGN SYSTEM (shared, loads last, add/override only)
   Five reusable contracts for the Aligness site closeout. Uses ONLY the
   existing cream/navy/gold tokens. No new palette. No em-dashes. Reduced
   motion and no-JS safe. Every class above keeps working untouched.
     1) ON-IMAGE LABEL   .onimg / .onimg-cap / .onimg-tag   (kills boxed labels)
     2) EMPHASIS         .strong-ink / .key-gold            (scannable copy)
     3) PILL ROW         .pill-row / .pill                  (centered, never 2-then-1)
     4) FAQ (Function)   .faq-hero / .faq-search--sm / .faq-nav
     5) CBCT COUNT-UP    .cbct-meter                        (no overlap, no flash)
   ============================================================ */

/* ---- 1) ON-IMAGE LABEL: restrained, minimal, NO heavy boxes ----
   Replaces the clunky boxed figcaptions and chunky pill tags site-wide.
   The parent <figure> / wrapper must carry .onimg (sets position:relative).
   Two restrained styles, both type-on-image with no solid card:
     .onimg-cap = a low-opacity dark scrim caption along the image bottom
                  (soft navy gradient, no border, no solid box).
     .onimg-tag = a thin translucent pill (BEFORE/AFTER, "Patient of Aligness").
   Tag position modifiers: default bottom-left, plus --tl / --tr / --br. */
.onimg{position:relative; overflow:hidden}
.onimg-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; margin:0;
  padding:1.6rem .95rem .7rem; pointer-events:none; text-align:left;
  background:linear-gradient(180deg, rgba(12,21,37,0) 0%, rgba(12,21,37,.40) 58%, rgba(12,21,37,.64) 100%);
  color:#FEF9EF; font-family:var(--sans); font-weight:500;
  font-size:.82rem; line-height:1.35; letter-spacing:.005em;
}
.onimg-cap b{font-weight:600; color:#fff}
.onimg-cap small{display:block; font-weight:400; font-size:.72rem; color:rgba(254,249,239,.78); margin-top:.12rem}
.onimg-tag{
  position:absolute; bottom:.7rem; left:.7rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#FEF9EF;
  background:rgba(12,21,37,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid rgba(254,249,239,.16); border-radius:999px;
  padding:.26rem .62rem; line-height:1;
}
.onimg-tag--gold{color:#1c1305; background:rgba(226,184,114,.92); border-color:rgba(226,184,114,.55)}
.onimg-tag--tl{top:.7rem; bottom:auto; left:.7rem; right:auto}
.onimg-tag--tr{top:.7rem; bottom:auto; left:auto; right:.7rem}
.onimg-tag--br{bottom:.7rem; top:auto; left:auto; right:.7rem}
@media (max-width:560px){
  .onimg-cap{font-size:.78rem; padding:1.25rem .8rem .6rem}
  .onimg-tag{font-size:.58rem; padding:.24rem .55rem; bottom:.55rem; left:.55rem}
  /* top-anchored tags must clear bottom, and right-anchored tags must clear left,
     so they stay small pills (never full-height or full-width bars over the scans) */
  .onimg-tag--tl{top:.55rem; bottom:auto} .onimg-tag--tr{top:.55rem; right:.55rem; left:auto; bottom:auto} .onimg-tag--br{bottom:.55rem; top:auto; right:.55rem; left:auto}
}

/* ---- 2) EMPHASIS: scannable key phrases inside flat body copy ----
   Two inline classes wrapped around the load-bearing words in a paragraph,
   so prose reads like premium editorial instead of a flat grey wall.
     .strong-ink = subtle strong: heavier weight + full ink. The quiet bold
                   for a load-bearing phrase (use a few per block).
     .key-gold   = the single gold key-phrase accent. Use at MOST one per
                   paragraph for the most important phrase. Color only, no box. */
.strong-ink{font-weight:600; color:var(--ink)}
.key-gold{font-weight:600; color:var(--gold-deep)}
.band-blue .strong-ink,.band-dark .strong-ink,.closing-band .strong-ink{color:#FEF9EF}
.band-blue .key-gold,.band-dark .key-gold,.closing-band .key-gold{color:#E2B872}
/* In marker lists (.fit-col / .pricing__incl / .review-card) each <li> is a
   flex row: ::before marker + text. Inline emphasis (.strong-ink / .key-gold)
   placed as a direct child of the <li> would each become its own flex item and
   fragment the line into misaligned columns. Wrapping every <li>'s content in a
   single .li-txt keeps exactly two flex children (marker + one text block), so
   the line flows and wraps as one piece with the key phrase bolded inline. */
.li-txt{flex:1 1 auto; min-width:0}

/* ---- 3) PILL ROW: centered, balanced chip groups (never 2-then-1) ----
   .pill-row centers and symmetrically wraps its chips, so a 3-chip group
   reads as a balanced centered cluster (never a left-aligned 2-then-1
   orphan). On a phone it stacks into a clean centered column. */
.pill-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem .7rem; padding:0; margin:1.1rem auto 0; list-style:none; max-width:760px}
.pill{
  display:inline-flex; align-items:center; gap:.45rem; margin:0; white-space:nowrap;
  font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.5rem .95rem; line-height:1.2; box-shadow:var(--shadow-soft);
}
.pill__dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.band-blue .pill,.band-dark .pill,.closing-band .pill{background:rgba(255,255,255,.06); border-color:rgba(209,202,192,.22); color:var(--paper)}
@media (max-width:520px){
  .pill-row{flex-direction:column; align-items:center; gap:.5rem}
  .pill{width:auto; justify-content:center}
}

/* ---- 4) FAQ in the Function Health register ----
   Simple hero (drop the gold eyebrow, the decorative italic headline and the
   long subtext), one quiet subhead, a SMALLER search bar, and a clean vertical
   jump-to list. .faq-nav is a plain text list: NO floating pills, NO circular
   status rings, stays vertical on every screen. */
.faq-hero{text-align:left; max-width:760px; margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.faq-hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,4.4vw,3rem); line-height:1.08; color:var(--ink); margin:0; letter-spacing:0}
.faq-hero__sub{margin:.7rem 0 0; color:var(--ink-2); font-size:1.02rem; line-height:1.5; max-width:46ch}
/* smaller, calmer search field (overrides the wider .faq-search) */
.faq-search--sm{max-width:340px; margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.faq-search--sm input{padding:.62rem 2.4rem .62rem 1rem; font-size:.9rem; box-shadow:none}
.faq-search--sm svg{width:16px; height:16px; right:.95rem}
/* clean vertical jump-to list: hairline rail, gold active marker, no pills */
.faq-nav{display:flex; flex-direction:column; gap:.1rem; position:sticky; top:96px}
.faq-nav__link{
  display:block; padding:.5rem 0 .5rem .9rem; margin-left:-.9rem;
  font-size:.95rem; color:var(--ink-2); border-left:2px solid var(--line);
  transition:color .18s ease, border-color .18s ease;
}
.faq-nav__link:hover{color:var(--ink)}
.faq-nav__link.is-active{color:var(--gold-deep); border-left-color:var(--gold-deep); font-weight:600}
@media (max-width:760px){
  /* stays a clean VERTICAL list on phones, never a floating pill cluster */
  .faq-nav{position:static; gap:0; border-top:1px solid var(--line); padding-top:.3rem; margin-bottom:1.4rem}
  .faq-nav__link{border-left:2px solid transparent; padding:.6rem 0 .6rem .7rem; margin-left:0}
  .faq-nav__link.is-active{border-left:2px solid var(--gold-deep); padding-left:.7rem}
}

/* ---- 5) CBCT COUNT-UP: clean before -> after volume, NO overlap, NO flash ----
   The fix for the colliding / contradictory CBCT numbers. Two SEPARATE,
   non-overlapping figures on one baseline (no absolute-positioned markers
   stacked on a bar). Tabular digits + a reserved min-width hold the number's
   width constant during the tween, so digits never jitter, double up, or push
   the unit. The cm3 unit is a static sibling that stays on the same line.
   The BEFORE figure is STATIC; only the AFTER figure animates, counting up
   FROM the before value, so the two numbers never disagree mid-tween and never
   dip below the burned-in scan label. See the markup + JS contract returned
   to page agents. Keep the disclaimer caption; do NOT aria-hidden the meter. */
.cbct-meter{max-width:560px; margin:1.4rem auto 0; text-align:center}
.cbct-meter__track{position:relative; height:12px; border-radius:999px; background:var(--sunken); border:1px solid var(--line); overflow:hidden}
.cbct-meter__fill{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--accent)); width:65%}
.cbct-meter__row{display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; white-space:nowrap; gap:.5rem; margin:1rem 0 0; max-width:none}
.cbct-meter__fig{display:inline-flex; align-items:baseline; gap:.16em; font-family:var(--serif)}
.cbct-meter__num{font-variant-numeric:tabular-nums; display:inline-block; text-align:center; min-width:5ch; line-height:1}
.cbct-meter__fig--before .cbct-meter__num{color:var(--ink-3); font-size:clamp(1.4rem,3vw,2rem)}
.cbct-meter__fig--after .cbct-meter__num{color:var(--accent-deep); font-size:clamp(2.05rem,4.4vw,3rem)}
.cbct-meter__unit{flex:0 0 auto; font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.03em; color:var(--ink-3); align-self:flex-end; transform:translateY(-.2em)}
.cbct-meter__arrow{flex:0 0 auto; align-self:center; font-family:var(--sans); font-size:1.05rem; color:var(--accent); transform:translateY(-.04em)}
.cbct-meter__delta{display:inline-flex; align-items:baseline; gap:.4rem; margin:.7rem 0 0; font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--accent-deep)}
.cbct-meter__delta-l{font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); align-self:center}
.cbct-meter__cap{margin:.85rem auto 0; max-width:46ch; font-size:.82rem; line-height:1.5; color:var(--ink-3)}
/* dark-band mapping (the airway / proof CBCT proof sits on navy) */
.band-blue .cbct-meter__track,.band-dark .cbct-meter__track,.closing-band .cbct-meter__track{background:rgba(255,255,255,.08); border-color:rgba(209,202,192,.18)}
.band-blue .cbct-meter__fig--before .cbct-meter__num,.band-dark .cbct-meter__fig--before .cbct-meter__num,.closing-band .cbct-meter__fig--before .cbct-meter__num{color:rgba(254,249,239,.55)}
.band-blue .cbct-meter__fig--after .cbct-meter__num,.band-dark .cbct-meter__fig--after .cbct-meter__num,.closing-band .cbct-meter__fig--after .cbct-meter__num{color:#E2B872}
.band-blue .cbct-meter__unit,.band-dark .cbct-meter__unit,.closing-band .cbct-meter__unit{color:rgba(254,249,239,.6)}
.band-blue .cbct-meter__arrow,.closing-band .cbct-meter__arrow{color:#E2B872}
.band-blue .cbct-meter__delta,.band-dark .cbct-meter__delta,.closing-band .cbct-meter__delta{color:#E2B872}
.band-blue .cbct-meter__cap,.band-dark .cbct-meter__cap,.closing-band .cbct-meter__cap{color:rgba(254,249,239,.6)}
@media (max-width:560px){
  .cbct-meter__num{min-width:4.6ch}
  .cbct-meter__row{gap:.4rem}
}
@media (max-width:380px){
  .cbct-meter__fig--after .cbct-meter__num{font-size:1.85rem}
}