/* ============================================================
   SaluVista — Shared Site Styles
   Load AFTER saluvista-theme.css. Powers every page's layout,
   navigation, components and the research-backed engagement layer.
   ============================================================ */

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;}

/* Draft notice — remove before launch */
.draft-bar{background:#FEF3C7;color:#92400E;font-size:12.5px;text-align:center;padding:8px 16px;border-bottom:1px solid #FDE68A;}
.draft-bar b{font-weight:600;}
.draft-bar svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px;}

/* Placeholder marker */
.ph{background:rgba(254,243,199,.9);border-bottom:1.5px dashed #D97706;padding:0 3px;border-radius:3px;color:#92400E;font-style:normal;}

/* Reading progress bar */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:transparent;z-index:100;pointer-events:none;}
.reading-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--salu-blue),var(--salu-blue-light));box-shadow:0 0 8px rgba(39,62,212,.5);}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:.5px solid var(--salu-border);transition:box-shadow .2s ease;}
.nav.scrolled{box-shadow:0 6px 24px rgba(22,32,92,.08);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links>a{font-size:14px;color:var(--salu-text-muted);}
.nav-links>a:hover{color:var(--salu-blue);}
.nav-links>a[aria-current="page"]{color:var(--salu-blue);font-weight:600;}
.nav-links a.salu-btn--primary{color:#fff;}
.nav-toggle{display:none;background:none;border:0;font-size:22px;color:var(--salu-ink);cursor:pointer;line-height:1;}
.nav-toggle::before{content:"☰";}
.nav-toggle[aria-expanded="true"]::before{content:"✕";}
.nav-toggle[aria-expanded="true"]{font-size:19px;}

/* Treatments dropdown (native <details>) */
.dropdown{position:relative;}
.dropdown>summary{list-style:none;cursor:pointer;font-size:14px;color:var(--salu-text-muted);display:inline-flex;align-items:center;gap:5px;}
.dropdown>summary::-webkit-details-marker{display:none;}
.dropdown>summary::after{content:"▾";font-size:11px;}
.dropdown[open]>summary{color:var(--salu-blue);}
.dropdown-menu{position:absolute;top:150%;left:0;background:#fff;border:.5px solid var(--salu-border);border-radius:12px;box-shadow:0 12px 30px rgba(22,32,92,.12);padding:8px;min-width:190px;display:flex;flex-direction:column;gap:2px;z-index:30;}
.dropdown-menu a{font-size:14px;color:var(--salu-text-muted);padding:9px 12px;border-radius:8px;}
.dropdown-menu a:hover{background:var(--salu-tint-1);color:var(--salu-blue);}

@media(max-width:820px){
  .nav-toggle{display:block;}
  .nav-links{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:.5px solid var(--salu-border);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;box-shadow:0 12px 24px rgba(22,32,92,.08);display:none;}
  .nav-links.open{display:flex;}
  .nav-links>a,.dropdown>summary{padding:12px 4px;border-bottom:.5px solid var(--salu-tint-2);}
  .nav-links a.salu-btn--primary{margin-top:10px;justify-content:center;border-bottom:0;}
  .dropdown-menu{position:static;box-shadow:none;border:0;padding:0 0 6px 12px;}
}

/* ---------- HERO ---------- */
.hero-inner{padding-top:76px;padding-bottom:64px;}
.breadcrumb{font-size:12.5px;color:var(--salu-text-muted);margin-bottom:16px;}
.breadcrumb a{color:var(--salu-blue);}
.salu-h1 .accent{background:linear-gradient(100deg,var(--salu-blue),var(--salu-blue-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.salu-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 420px at 72% -12%,rgba(91,114,240,.18),transparent 60%);pointer-events:none;z-index:0;}
.cta-row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.trust{display:flex;gap:24px;margin-top:30px;flex-wrap:wrap;font-size:14px;color:var(--salu-text-muted);}
.trust b{color:var(--salu-blue);}

/* ---------- SECTIONS ---------- */
section{padding:52px 0;position:relative;}
section>.wrap{position:relative;z-index:1;}
.h2{font-size:clamp(23px,3.3vw,31px);font-weight:600;color:var(--salu-ink);margin:0 0 8px;}
.h3{font-size:19px;font-weight:600;color:var(--salu-ink);margin:24px 0 8px;}
.sec-eyebrow{font-size:13px;color:var(--salu-blue);font-weight:600;letter-spacing:.3px;display:inline-flex;align-items:center;gap:8px;}
.sec-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--salu-blue);animation:salu-pulse 2.4s ease-out infinite;}
@keyframes salu-pulse{0%{box-shadow:0 0 0 0 rgba(39,62,212,.45);}70%{box-shadow:0 0 0 9px rgba(39,62,212,0);}100%{box-shadow:0 0 0 0 rgba(39,62,212,0);}}
.muted{color:var(--salu-text-muted);}
p.body{color:var(--salu-text-muted);margin:0 0 14px;font-size:17px;}
.tint{background:var(--salu-tint-1);}

/* ---------- SNAPSHOT ---------- */
.snapshot{border-radius:16px;padding:26px 28px;margin-top:34px;box-shadow:0 22px 54px rgba(39,62,212,.10);background:linear-gradient(var(--salu-tint-1),var(--salu-tint-1)) padding-box,linear-gradient(120deg,var(--salu-blue-lilac),var(--salu-blue-light)) border-box;border:1.5px solid transparent;}
.snapshot h2{font-size:18px;margin:0 0 14px;color:var(--salu-ink);}
.snap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.snap-item{background:#fff;border:.5px solid var(--salu-border);border-radius:12px;padding:14px 16px;transition:transform .18s ease,box-shadow .18s ease;}
.snap-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(39,62,212,.10);}
.snap-item .k{font-size:12px;color:var(--salu-text-muted);text-transform:uppercase;letter-spacing:.4px;}
.snap-item .v{font-size:17px;font-weight:600;color:var(--salu-ink);margin-top:4px;}

/* ---------- CARDS / TREATMENT CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px;}
.card{border:.5px solid var(--salu-border);border-radius:16px;padding:22px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(39,62,212,.12);border-color:var(--salu-blue-lilac);}
.card h4{font-size:16px;font-weight:600;margin:0 0 6px;color:var(--salu-ink);}
.card p{font-size:14px;color:var(--salu-text-muted);margin:0 0 10px;}
.card a.more{font-size:13px;font-weight:500;color:var(--salu-blue);}

.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:24px;}
.tcard{border:.5px solid var(--salu-border);border-radius:16px;padding:24px;background:#fff;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.tcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(39,62,212,.10);border-color:var(--salu-blue-lilac);}
.tcard .ico{width:60px;height:60px;margin:0 auto 14px;border-radius:50%;background:rgba(39,62,212,.07);display:flex;align-items:center;justify-content:center;}
.tcard h4{font-size:16px;font-weight:600;color:var(--salu-ink);margin:0 0 6px;}
.tcard p{font-size:13px;color:var(--salu-text-muted);margin:0 0 12px;}
.tcard a{font-size:13px;font-weight:500;color:var(--salu-blue);}

/* ---------- STEPS ---------- */
.steps{counter-reset:step;margin-top:22px;display:grid;gap:14px;}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:.5px solid var(--salu-border);border-radius:12px;padding:16px 18px;transition:transform .18s ease,box-shadow .18s ease;}
.step:hover{transform:translateX(4px);box-shadow:0 8px 22px rgba(39,62,212,.08);}
.step::before{counter-increment:step;content:counter(step);flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--salu-blue);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.step h4{margin:0 0 3px;font-size:15px;color:var(--salu-ink);}
.step p{margin:0;font-size:14px;color:var(--salu-text-muted);}

/* ---------- TABLES ---------- */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;}
th{text-align:left;background:var(--salu-tint-1);color:var(--salu-ink);font-weight:600;padding:12px 14px;border-bottom:.5px solid var(--salu-border);}
td{padding:12px 14px;color:var(--salu-text-muted);border-bottom:.5px solid #EEF0FB;}
caption{caption-side:bottom;font-size:12px;color:var(--salu-text-muted);text-align:left;padding-top:8px;}

/* ---------- FAQ ---------- */
.faq{margin-top:20px;}
.faq details{border:.5px solid var(--salu-border);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-size:15.5px;font-weight:500;color:var(--salu-ink);display:flex;justify-content:space-between;align-items:center;gap:12px;transition:color .15s ease;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--salu-blue);font-size:22px;line-height:1;transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--salu-blue);}
.faq .ans{padding:0 18px 16px;color:var(--salu-text-muted);font-size:14.5px;}

/* ---------- BLOG ---------- */
.blog{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px;}
.post{position:relative;border:.5px solid var(--salu-border);border-radius:16px;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease;}
.post h4 a::after{content:"";position:absolute;inset:0;}
.post .read{font-size:12px;font-weight:500;color:var(--salu-blue);}
.post:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(39,62,212,.08);}
.post .img{height:120px;background:linear-gradient(160deg,var(--salu-tint-2),var(--salu-border));display:flex;align-items:center;justify-content:center;color:var(--salu-blue-lilac);font-size:28px;}
.post .img svg{width:46px;height:46px;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.post:hover .img svg{transform:scale(1.08);}
@media (prefers-reduced-motion:reduce){.post:hover .img svg{transform:none;}}
.post .pb{padding:16px 18px;}
.post .cat{font-size:11px;color:var(--salu-blue);background:var(--salu-tint-1);padding:3px 10px;border-radius:20px;}
.post h4{font-size:15.5px;font-weight:600;color:var(--salu-ink);margin:10px 0 4px;line-height:1.35;}
.post .soon{font-size:12px;color:var(--salu-text-muted);}

/* ---------- APP CTA ---------- */
.appcta{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;background:var(--salu-navy);border-radius:20px;padding:40px;color:#fff;overflow:hidden;position:relative;}
.appcta h2{color:#fff;}
.appcta p{color:var(--salu-text-soft);}
.appcta .phone{aspect-ratio:9/16;max-width:210px;margin:0 auto;background:linear-gradient(160deg,var(--salu-blue-light),var(--salu-navy-deep));border-radius:26px;border:6px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:40px;}
.store-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
/* These sit in .salu-hero, which is a LIGHT gradient (white -> tints). The old rule
   painted white text on a translucent-white fill and then dropped it to opacity .62 —
   white-on-white, effectively invisible on all 7 pages that use it. Matches
   .salu-btn--ghost now: the design system's existing light-surface button. */
.store-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border:.5px solid var(--salu-border);color:var(--salu-ink);padding:10px 18px;border-radius:12px;font-size:14px;transition:background .18s ease,border-color .18s ease;}
.store-btn:hover{background:#fff;border-color:var(--salu-blue-light);}
/* Disabled = the store links aren't live yet. Signal that with muted ink and no hover,
   NOT with opacity — dropping opacity is what destroyed the contrast in the first place.
   --salu-text-muted (#404A82) on white still clears WCAG AA comfortably. */
.store-btn[aria-disabled="true"]{color:var(--salu-text-muted);cursor:default;}
.store-btn[aria-disabled="true"]:hover{background:rgba(255,255,255,.8);border-color:var(--salu-border);}
@media(max-width:720px){.appcta{grid-template-columns:1fr;padding:28px;}}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--salu-navy);text-align:center;color:#fff;}
.cta-inner{position:relative;z-index:1;padding:56px 24px;}
.cta-band h2{color:#fff;}
.cta-band p{color:var(--salu-text-soft);max-width:460px;margin:12px auto 22px;}

/* ---------- FOOTER ---------- */
footer{background:var(--salu-navy-deep);color:var(--salu-text-soft);font-size:13px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;padding:34px 24px;}
.foot-grid strong{color:#fff;}
.foot-grid a{color:var(--salu-text-soft);display:block;margin:6px 0;}
.foot-grid a:hover{color:#fff;}
.foot-h{color:#fff;font-weight:600;margin-bottom:6px;font-size:13px;}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* ---------- ORBS + REVEAL (engagement layer) ---------- */
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.orbs span{position:absolute;border-radius:50%;filter:blur(60px);}
.orbs .o1{width:340px;height:340px;background:radial-gradient(circle,rgba(91,114,240,.30),transparent 70%);top:-90px;left:-70px;animation:salu-drift-a 26s ease-in-out infinite;}
.orbs .o2{width:300px;height:300px;background:radial-gradient(circle,rgba(139,155,245,.34),transparent 70%);bottom:-90px;right:-50px;animation:salu-drift-b 30s ease-in-out infinite;}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.salu-btn--primary{position:relative;overflow:hidden;z-index:0;color:#fff !important;font-weight:600;text-shadow:0 1px 1px rgba(16,24,74,.18);}
.salu-btn--primary::after{content:"";position:absolute;top:0;left:-70%;width:38%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);z-index:-1;animation:salu-shine 4.4s ease-in-out infinite;}
@keyframes salu-shine{0%{left:-70%;}62%,100%{left:150%;}}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .orbs span,.salu-btn--primary::after,.sec-eyebrow::before{animation:none;}
  .salu-hero{animation:none;}
  .salu-hero::after{animation:none;}
}

/* ===== Focus-visible system (site had none — UA default outline everywhere) ===== */
:focus-visible{outline:2px solid var(--salu-blue);outline-offset:2px;border-radius:4px;}
.salu-btn:focus-visible{outline-offset:3px;border-radius:999px;}
.faq summary:focus-visible,.dropdown>summary:focus-visible{outline-offset:-2px;border-radius:10px;}
.cta-band :focus-visible,.article-cta :focus-visible,footer :focus-visible{outline-color:#fff;}
.salu-btn--ghost:hover{border-color:var(--salu-blue-lilac);}

/* ===== Responsive tables — 234 pages have bare <table>s crushed on phones ===== */
@media(max-width:640px){
  table,.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table tr{white-space:normal;}
  th,td{min-width:130px;}
}

/* ============================================================
   ARTICLE / BLOG POST LAYOUT
   ============================================================ */
.article{max-width:812px;margin:0 auto;padding:0 24px;}
/* ===== Article/blog HERO BAND — one shared animated hero across ALL content
   pages, identical language to the hub .salu-hero the owner signed off on.
   Full-bleed via padding math (no 100vw → no scrollbar overflow); the 812px
   reading column is centred by symmetric padding. Pure CSS so it propagates to
   every one of the 242 article pages with zero per-page markup changes. ===== */
.article.article-head{
  position:relative;max-width:none;
  padding-top:74px;padding-bottom:32px;
  padding-left:max(24px,calc((100% - 812px)/2));
  padding-right:max(24px,calc((100% - 812px)/2));
  overflow:hidden;
  background:linear-gradient(150deg,#FFFFFF 0%,var(--salu-tint-1) 44%,var(--salu-tint-2) 82%,#DCE3FB 100%);
  background-size:200% 200%;animation:salu-herobg 22s ease-in-out infinite;
  border-bottom:.5px solid var(--salu-border);
}
/* drifting "smoke" orbs — same colours + keyframes as the hub hero */
.article-head::before{content:"";position:absolute;top:-100px;left:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(39,62,212,.34),transparent 68%);filter:blur(52px);pointer-events:none;z-index:0;animation:salu-drift-a 26s ease-in-out infinite;}
.article-head::after{content:"";position:absolute;bottom:-130px;right:-60px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(139,155,245,.42),transparent 68%);filter:blur(56px);pointer-events:none;z-index:0;animation:salu-drift-b 30s ease-in-out infinite;}
.article-head>*{position:relative;z-index:1;}
.article-cat{font-size:12px;font-weight:600;color:var(--salu-blue);background:rgba(255,255,255,.72);padding:4px 12px;border-radius:20px;box-shadow:0 2px 10px rgba(39,62,212,.06);}
.article h1{font-size:clamp(28px,4.4vw,40px);line-height:1.18;font-weight:700;color:var(--salu-ink);margin:16px 0 12px;}
.article-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--salu-text-muted);}
.article-head .article-meta{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.article-meta span{display:inline-flex;align-items:center;gap:5px;}
@media (prefers-reduced-motion:reduce){
  .article.article-head{animation:none;}
  .article-head::before,.article-head::after{animation:none;}
}

/* Key-takeaways / TL;DR — the AEO + AIO answer magnet */
.tldr{border-radius:16px;padding:22px 24px;margin:26px 0;background:linear-gradient(var(--salu-tint-1),var(--salu-tint-1)) padding-box,linear-gradient(120deg,var(--salu-blue-lilac),var(--salu-blue-light)) border-box;border:1.5px solid transparent;}
.tldr h2{font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--salu-blue);margin:0 0 10px;}
.tldr ul{margin:0;padding-left:18px;}
.tldr li{color:var(--salu-ink);font-size:15px;margin:6px 0;}

/* Table of contents */
.toc-box{background:#fff;border:.5px solid var(--salu-border);border-radius:12px;padding:18px 20px;margin:24px 0;}
.toc-box h2{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--salu-text-muted);margin:0 0 10px;}
.toc-box ol{margin:0;padding-left:18px;}
.toc-box li{margin:6px 0;}
.toc-box a{color:var(--salu-blue);font-size:14.5px;}

/* Prose body */
.prose{font-size:18px;color:#26305f;}
.prose h2{font-size:27px;font-weight:600;color:var(--salu-ink);margin:36px 0 10px;scroll-margin-top:80px;}
.prose h3{font-size:21px;font-weight:600;color:var(--salu-ink);margin:26px 0 8px;}
.prose p{margin:0 0 18px;line-height:1.78;}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;}
.prose li{margin:8px 0;line-height:1.72;}
.prose strong{color:var(--salu-ink);}
.prose a{color:var(--salu-blue);text-decoration:underline;text-underline-offset:2px;}
.prose blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--salu-blue);background:var(--salu-tint-1);border-radius:0 10px 10px 0;color:var(--salu-text-muted);font-size:16.5px;}

/* Callout / quick-answer box */
.callout{background:var(--salu-tint-1);border:.5px solid var(--salu-border);border-radius:12px;padding:16px 20px;margin:20px 0;font-size:15px;color:var(--salu-text-muted);}
.callout b,.callout strong{color:var(--salu-ink);}

/* Disclaimer */
.disclaimer{font-size:13px;color:var(--salu-text-muted);background:var(--salu-tint-1);border-radius:10px;padding:14px 18px;margin:28px 0;border:.5px solid var(--salu-border);}

/* Related + article CTA */
.article-cta{background:var(--salu-navy);border-radius:18px;padding:30px;text-align:center;color:#fff;margin:34px 0;}
.article-cta h3{color:#fff;font-size:20px;margin:0 0 8px;}
.article-cta p{color:var(--salu-text-soft);margin:0 0 18px;font-size:15px;}
.related-h{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--salu-text-muted);margin:34px 0 4px;}
/* Article hero illustration (brand SVG — sized to avoid layout shift) */

/* ===== Article polish — premium, consistent across all 241 articles ===== */
/* byline icons (replace emoji) */
.article-meta span{gap:6px;}
.article-meta .m-ico{width:15px;height:15px;flex:0 0 auto;stroke:var(--salu-blue);vertical-align:-2px;}
/* section rhythm: accent bar above every H2 */
.prose h2{position:relative;}
.prose h2::before{content:"";display:block;width:46px;height:3px;border-radius:3px;margin:0 0 15px;background:linear-gradient(90deg,var(--salu-blue),var(--salu-blue-lilac));}
#faq.prose h2::before,.prose h2#faq::before{margin-top:6px;}
/* branded comparison tables */
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:26px 0;font-size:15px;border:1px solid var(--salu-border);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(16,24,74,.06);}
.prose table caption{caption-side:top;text-align:left;font-size:13px;color:var(--salu-text-muted);margin-bottom:9px;}
.prose th{background:linear-gradient(120deg,var(--salu-blue),#3B51D9);color:#fff;font-weight:600;text-align:left;padding:12px 16px;font-size:14px;}
.prose td{padding:11px 16px;border-top:1px solid var(--salu-border);color:var(--salu-ink);line-height:1.55;}
.prose tbody tr:nth-child(even) td{background:var(--salu-tint-1);}
.prose .table-wrap{margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.prose .table-wrap table{margin:0;}
/* callout: accent bar + soft depth */
.callout{position:relative;padding:16px 20px 16px 24px;box-shadow:0 6px 18px rgba(16,24,74,.04);}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;background:linear-gradient(180deg,var(--salu-blue),var(--salu-blue-lilac));}
/* key-figure emphasis inside prose (prices etc.) */
.prose .keyfig{color:var(--salu-blue);font-weight:700;white-space:nowrap;}
/* gentle scroll-reveal for article section blocks uses the shared .reveal/.in
   mechanism (see site.js targets + .reveal rule) — smooth, not per-paragraph. */

/* ============================================================
   TYPE PAIRING — Lora serif headings, Inter body
   (small uppercase labels stay in Inter for legibility)
   ============================================================ */
.salu-h1,.h2,.h3,.article h1,.article-cta h3,.snapshot h2,
.prose h2,.prose h3,.appcta h2,.cta-band h2,.salu-wordmark{
  font-family:var(--salu-font-head);
}
.salu-h1,.article h1{letter-spacing:-0.3px;}
.h2,.prose h2{letter-spacing:-0.2px;}
/* keep small uppercase labels in clean Inter */
.tldr h2,.toc-box h2,.sec-eyebrow,.foot-h,.article-cat{font-family:var(--salu-font);letter-spacing:normal;}

/* ============================================================
   ALIVE v2 — richer animated background, colour & imagery
   ============================================================ */
/* Living hero: the gradient itself gently drifts + a soft glowing orb */
.salu-hero{background:linear-gradient(150deg,#FFFFFF 0%,var(--salu-tint-1) 42%,var(--salu-tint-2) 78%,#DCE3FB 100%);background-size:180% 180%;animation:salu-herobg 22s ease-in-out infinite;}
@keyframes salu-herobg{0%,100%{background-position:0% 0%;}50%{background-position:100% 100%;}}
.salu-hero::after{content:"";position:absolute;top:-120px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(39,62,212,.16),rgba(139,155,245,.10) 45%,transparent 70%);filter:blur(10px);pointer-events:none;z-index:0;animation:salu-drift-c 26s ease-in-out infinite;}
/* stronger, more visible smoke */
.salu-hero__smoke.a{filter:blur(52px);}
.salu-hero__smoke.b{filter:blur(56px);}

/* Section rhythm: gentle tinted gradient on plain sections + accent bar under eyebrows */
section:not(.tint):not(.cta-band):nth-of-type(even){background:linear-gradient(180deg,#fff, #FBFCFF);}
.tint{background:linear-gradient(180deg,var(--salu-tint-1),#EFF1FD);}
.sec-eyebrow{position:relative;}
.h2{position:relative;}
.h2::after{content:"";display:block;width:54px;height:3px;margin-top:12px;border-radius:3px;background:linear-gradient(90deg,var(--salu-blue),var(--salu-blue-light));}
.article .h2::after,.tldr h2::after,.snapshot h2::after,.toc-box h2::after,.appcta h2::after{display:none;}

/* Cards: coloured top accent + livelier icon circles */
.tcard{position:relative;overflow:hidden;}
.tcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--salu-blue),var(--salu-blue-light));transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.tcard:hover::before{transform:scaleX(1);}
.tcard .ico{background:linear-gradient(140deg,rgba(39,62,212,.12),rgba(139,155,245,.18));}
.card{position:relative;overflow:hidden;}
.card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--salu-blue),var(--salu-blue-light));transform:scaleY(0);transform-origin:top;transition:transform .25s ease;}
.card:hover::before{transform:scaleY(1);}

/* Imagery — sized to avoid layout shift (CLS) */
.media{display:block;width:100%;height:auto;border-radius:16px;border:.5px solid var(--salu-border);}
figure{margin:22px 0;}
figure figcaption{font-size:13px;color:var(--salu-text-muted);margin-top:8px;text-align:center;}
.hero-illus{width:100%;max-width:420px;height:auto;}
img{height:auto;}
/* Hero two-column when an illustration is present */
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;}
@media(max-width:820px){.hero-split{grid-template-columns:1fr;} .hero-illus{max-width:320px;margin:8px auto 0;}}

/* ============================================================
   CONTACT FORM (FormSubmit AJAX + branded success panel)
   ============================================================ */
.contact-form{display:grid;gap:14px;margin-top:22px;max-width:620px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:600px){.cf-row{grid-template-columns:1fr;}}
.cf-phone{grid-template-columns:170px 1fr;}
@media(max-width:600px){.cf-phone{grid-template-columns:1fr;}}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:var(--salu-ink);}
.contact-form input,.contact-form textarea,.contact-form select{font-family:var(--salu-font);font-size:15px;color:var(--salu-ink);background:#fff;border:1px solid var(--salu-border);border-radius:10px;padding:11px 13px;transition:border-color .15s ease,box-shadow .15s ease;width:100%;}
.contact-form select{height:44px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23273ED4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--salu-blue);box-shadow:0 0 0 3px rgba(39,62,212,.12);}
.contact-form textarea{resize:vertical;min-height:110px;}
.contact-form button{justify-content:center;margin-top:4px;}
.cf-note{font-size:12.5px;color:var(--salu-text-muted);margin:2px 0 0;}
.cf-note a{color:var(--salu-blue);}
.cf-success{margin-top:22px;background:linear-gradient(var(--salu-tint-1),var(--salu-tint-1)) padding-box,linear-gradient(120deg,var(--salu-blue-lilac),var(--salu-blue-light)) border-box;border:1.5px solid transparent;border-radius:14px;padding:22px 24px;color:var(--salu-ink);}
.cf-success strong{color:var(--salu-blue);}
.cf-error{margin-top:22px;background:#FFF6F5;border:1.5px solid #F3B7AE;border-radius:14px;padding:22px 24px;color:var(--salu-ink);}
.cf-error strong{color:#C0392B;}
.cf-error a{color:var(--salu-blue);}
/* JS-off fallback notice (only rendered inside <noscript>) */
.cf-noscript{margin:0 0 18px;background:#FFFBEB;border:1.5px solid #FCD79B;border-radius:14px;padding:16px 20px;color:var(--salu-ink);font-size:.95rem;}
.cf-noscript a{color:var(--salu-blue);font-weight:600;}
/* Honeypot: hide with clip (not left:-9999px, which overflows in RTL) */
.cf-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---- Confirmed bug fixes (CTA band readability) ---- */
/* CTA band: navy stays navy — the light hero gradient must never win here */
.cta-band.salu-hero{
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(91,114,240,.25), transparent 60%),
    linear-gradient(160deg, var(--salu-navy) 0%, var(--salu-navy-deep) 100%);
  background-size:auto;
  animation:none;
}
.cta-band .h2::after{margin:12px auto 0;}

/* ---- Custom line-art department/procedure icons ---- */
.tcard .ico svg { width:38px; height:38px; display:block; }
.tcard .ico svg { overflow:visible; }

/* ---- Icon draw-on animation (fires with each card's scroll-reveal) ---- */
.tcard.reveal .ico svg path{ stroke-dasharray:220; stroke-dashoffset:220; }
.tcard.in .ico svg path{ animation:ico-draw 1.15s cubic-bezier(.62,.04,.24,1) forwards; }
.tcards .tcard:nth-child(2) .ico svg path{ animation-delay:.1s; }
.tcards .tcard:nth-child(3) .ico svg path{ animation-delay:.2s; }
.tcards .tcard:nth-child(4) .ico svg path{ animation-delay:.3s; }
@keyframes ico-draw{ to{ stroke-dashoffset:0; } }
.tcard .ico svg{ transition:transform .32s cubic-bezier(.2,.7,.2,1); }
.tcard:hover .ico svg{ transform:scale(1.09); }
@media (prefers-reduced-motion:reduce){
  .tcard.reveal .ico svg path{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .tcard:hover .ico svg{ transform:none; }
}

/* ---- Doctor / surgeon profile cards ---- */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:24px;margin-top:28px;}
.doc{border:.5px solid var(--salu-border);border-radius:18px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;}
.doc:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(39,62,212,.13);}
.doc-photo{position:relative;aspect-ratio:1/1;background:#eaeefb;overflow:hidden;}
.doc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.doc:hover .doc-photo img{transform:scale(1.04);}
.doc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(16,24,74,.34) 68%,rgba(16,24,74,.82) 100%);}
.doc-tags{position:absolute;top:13px;left:13px;right:13px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;}
.doc-tag{background:rgba(255,255,255,.94);color:var(--salu-blue);font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(16,24,74,.12);backdrop-filter:saturate(1.2);}
.doc-name{position:absolute;left:18px;right:18px;bottom:15px;z-index:2;color:#fff;}
.doc-name b{display:block;font-family:var(--salu-font-head);font-size:21px;font-weight:600;line-height:1.15;}
.doc-name span{font-size:12.5px;opacity:.92;}
.doc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.doc-body>p{font-size:14.5px;color:var(--salu-text-muted);line-height:1.66;margin:0 0 15px;}
.doc-cv{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:.5px solid var(--salu-border);}
.doc-cv li{display:flex;gap:9px;font-size:12.8px;color:var(--salu-ink);margin:0 0 9px;line-height:1.5;}
.doc-cv li:last-child{margin-bottom:0;}
.doc-cv .k{color:var(--salu-blue);font-weight:600;flex:0 0 74px;}
@media (prefers-reduced-motion:reduce){ .doc:hover{transform:none;} }
/* Surgeons department filter */
.doc-filter{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 4px;}
.df-chip{font-family:var(--salu-font);font-size:14px;font-weight:500;color:var(--salu-ink);background:#fff;border:1px solid var(--salu-border);padding:9px 18px;border-radius:999px;cursor:pointer;transition:background .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;}
.df-chip:hover{border-color:var(--salu-blue-lilac);color:var(--salu-blue);transform:translateY(-1px);}
.df-chip:focus-visible{outline:2px solid var(--salu-blue);outline-offset:2px;}
.df-chip.is-active{background:var(--salu-blue);border-color:var(--salu-blue);color:#fff;box-shadow:0 8px 20px rgba(39,62,212,.26);}
.docs .doc.is-hidden{display:none;}
.docs .doc.is-filtering{animation:doc-in .46s cubic-bezier(.2,.7,.2,1) both;}
@keyframes doc-in{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}
.doc-filter-empty{margin:18px 0 0;color:var(--salu-text-muted);font-size:15px;}
@media (prefers-reduced-motion:reduce){.docs .doc.is-filtering{animation:none;}.df-chip:hover{transform:none;}}

/* ============================================================
   MICRO-INTERACTIONS v2 (2026-07-13) — premium polish layer.
   Shared CSS + JS-injected behaviours only (no per-page HTML), so
   every page gains these at once. All motion gated by
   prefers-reduced-motion. Curated to feel calm, not busy.
   ============================================================ */

/* Branded text selection */
::selection{background:rgba(39,62,212,.16);color:var(--salu-navy);}

/* Language switcher (injected by site.js on translatable pages) */
.lang-switch>summary{display:inline-flex;align-items:center;gap:5px;font-weight:500;}
.lang-switch>summary svg{opacity:.8;}
.lang-switch .lang-menu{min-width:158px;right:0;left:auto;}
.lang-switch .lang-menu a{display:flex;justify-content:space-between;}
.lang-switch .lang-menu a[aria-current="true"]{color:var(--salu-blue);font-weight:600;background:var(--salu-tint-1);}
@media(max-width:820px){ .lang-switch .lang-menu{right:auto;} }

/* Smooth in-page anchor scrolling (TOC + back-to-top) — motion-safe */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }

/* Nav links: animated brand underline that grows from the left (desktop) */
@media (min-width:821px){
  .nav-links>a:not(.salu-btn){position:relative;}
  .nav-links>a:not(.salu-btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--salu-blue);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.2,.7,.2,1);}
  .nav-links>a:not(.salu-btn):hover::after,.nav-links>a[aria-current="page"]:not(.salu-btn)::after{transform:scaleX(1);}
}

/* Hero content entrance — breadcrumb → headline → lead → CTA rise + fade in
   on load, staggered. Ties the article hero to the hub hero. Motion-safe. */
@media (prefers-reduced-motion:no-preference){
  .salu-hero__content>*,.article-head>*{animation:salu-rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .salu-hero__content>*:nth-child(1),.article-head>*:nth-child(1){animation-delay:.03s;}
  .salu-hero__content>*:nth-child(2),.article-head>*:nth-child(2){animation-delay:.11s;}
  .salu-hero__content>*:nth-child(3),.article-head>*:nth-child(3){animation-delay:.19s;}
  .salu-hero__content>*:nth-child(4),.article-head>*:nth-child(4){animation-delay:.27s;}
  .salu-hero__content>*:nth-child(5),.article-head>*:nth-child(5){animation-delay:.35s;}
}
@keyframes salu-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* Card "read" affordance nudges toward its arrow on hover */
.post .read,.tcard a,.card a.more{transition:transform .2s cubic-bezier(.2,.7,.2,1);}
.post:hover .read,.tcard:hover a,.card:hover a.more{transform:translateX(3px);}

/* Floating back-to-top button (injected by site.js on long pages) */
.to-top{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;border:0;border-radius:50%;background:var(--salu-blue);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(39,62,212,.34);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.2,1),background .18s ease;}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--salu-blue-hover);transform:translateY(-2px);}
.to-top:focus-visible{outline:2px solid var(--salu-blue);outline-offset:3px;}
.to-top svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:600px){.to-top{right:16px;bottom:16px;width:42px;height:42px;}}
@media (prefers-reduced-motion:reduce){
  .post:hover .read,.tcard:hover a,.card:hover a.more{transform:none;}
  .to-top{transition:opacity .2s ease;transform:none;}
  .to-top.show{transform:none;}
  .to-top:hover{transform:none;}
}

/* ---- Medically-reviewed byline (article head) ---- */
.med-reviewed{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;color:var(--salu-text-muted);background:rgba(255,255,255,.66);border:.5px solid var(--salu-border);border-radius:20px;padding:6px 14px 6px 11px;box-shadow:0 2px 10px rgba(39,62,212,.06);}
.med-reviewed .mr-ico{width:16px;height:16px;flex:0 0 auto;}
.med-reviewed b{font-weight:600;color:var(--salu-blue);}