/* ============================================================
   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;}}

/* ---------- FOOTER SOCIAL — the "follow" row (Instagram / TikTok / YouTube) ----------
   Custom monoline icons in the site's stroke style (no platform brand blobs):
   camera, note, play-lozenge — currentColor stroke so they inherit the footer's
   soft ink and brighten to white on hover like every other footer link.
   Motion (must be NOTICEABLE at a glance, not homeopathic): each icon bobs 7px
   (±3.5px) on a 3.8s ease loop, phase-staggered in thirds so the row undulates
   like the brand waterline; every second bob cycle (7.6s) a crest-light sheen
   sweeps diagonally across the tile, staggered to match. Icon has 9.5px slack
   inside its 38px tile, so the bob never clips. Hover lift + colour states kept;
   everything freezes under prefers-reduced-motion. */
.salu-social{margin-top:14px;}
.salu-social__h{color:#fff;font-weight:600;font-size:13px;margin-bottom:8px;}
.salu-social__row{display:flex;gap:12px;}
.foot-grid .salu-social__row a{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;border-radius:12px;color:var(--salu-text-soft);border:1px solid rgba(185,192,238,.26);background:rgba(234,240,255,.05);transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;}
.foot-grid .salu-social__row a:hover{color:#fff;border-color:var(--salu-blue-lilac);background:rgba(91,114,240,.22);transform:translateY(-2px);}
.salu-social__row svg{display:block;animation:salu-social-float 3.8s ease-in-out infinite;}
.salu-social__row a:nth-child(2) svg{animation-delay:-1.27s;}
.salu-social__row a:nth-child(3) svg{animation-delay:-2.53s;}
@keyframes salu-social-float{0%,100%{transform:translateY(3.5px);}50%{transform:translateY(-3.5px);}}
/* crest-light sheen: a soft EAF0FF gleam crossing the tile, one quick pass per
   7.6s (= two bob cycles), so each tile glints at the same point of its bob */
.salu-social__row a::after{content:"";position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(234,240,255,.42) 50%,transparent 100%);transform:translateX(-180%) skewX(-20deg);animation:salu-social-sheen 7.6s ease-in-out infinite;pointer-events:none;}
.salu-social__row a:nth-child(2)::after{animation-delay:-2.53s;}
.salu-social__row a:nth-child(3)::after{animation-delay:-5.07s;}
@keyframes salu-social-sheen{0%{transform:translateX(-180%) skewX(-20deg);}13%,100%{transform:translateX(380%) skewX(-20deg);}}
@media (prefers-reduced-motion:reduce){
  .salu-social__row svg{animation:none;}
  .salu-social__row a::after{animation:none;display:none;}
  .foot-grid .salu-social__row a:hover{transform:none;}
}

/* ---------- 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;}}
/* Country code + phone number read as ONE grouped control: a compact code
   column tight against the number input, side by side at every width. */
.cf-phone{grid-template-columns:150px 1fr;gap:10px;}
@media(max-width:600px){.cf-phone{grid-template-columns:132px 1fr;gap:10px;}}
@media(max-width:380px){.cf-phone{grid-template-columns:118px 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).
   MUST out-rank `.contact-form input{width:100%}` (0,1,1): a bare `.cf-hp`
   (0,1,0) lost that fight, so the honeypot was really a 375px-wide absolute
   box hanging ~24px past the inline edge — the sole cause of the horizontal
   scroll at 375px on every form page, LTR and RTL alike. Anchored to the
   containing block's start corner so its static grid position can't leak. */
.cf-hp,.contact-form input.cf-hp{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);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);}

/* ============================================================
   COUNTRY-CODE COMBOBOX — flag-first searchable dropdown that
   progressively enhances <select class="cf-country"> (site.js).
   Closed: flag + dial code. Open: search + flag/name/code rows.
   Flags are inline geometric SVGs (CSP-safe, NO emoji). Logical
   (inline-start/end) properties keep it RTL-correct for /ar/.
   ============================================================ */
.contact-form select.cfc-native{display:none;}
.cfc{position:relative;}
.cfc-btn,.contact-form .cfc-btn{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;height:44px;margin-top:0;padding:0 13px;font-family:var(--salu-font);font-size:15px;color:var(--salu-ink);background:#fff;border:1px solid var(--salu-border);border-radius:10px;cursor:pointer;text-align:start;transition:border-color .15s ease,box-shadow .15s ease;}
.cfc-btn:hover{border-color:var(--salu-blue-lilac);}
.cfc-btn:focus,.cfc-btn:focus-visible{outline:none;border-color:var(--salu-blue);box-shadow:0 0 0 3px rgba(39,62,212,.12);}
.cfc-flag{flex:0 0 auto;width:22px;height:15px;border-radius:3px;overflow:hidden;position:relative;background:var(--salu-tint-1);}
/* hairline ring as an overlay so it also paints over <img> content */
.cfc-flag::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,24,74,.14);pointer-events:none;}
.cfc-flag svg{display:block;width:100%;height:100%;}
/* vendored 4x3 flag-icons SVGs: fill the 22x15 chip, tiny crop top/bottom */
.cfc-flag img{display:block;width:100%;height:100%;object-fit:cover;}
.cfc-dial{font-weight:600;direction:ltr;unicode-bidi:isolate;}
.cfc-caret{margin-inline-start:auto;flex:0 0 auto;transition:transform .22s cubic-bezier(.2,.7,.2,1);}
.cfc.open .cfc-caret{transform:rotate(180deg);}
.cfc-panel{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:45;width:min(320px,calc(100vw - 48px));background:#fff;border:.5px solid var(--salu-border);border-radius:14px;box-shadow:0 18px 44px rgba(22,32,92,.18);opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility 0s linear .24s;}
.cfc.open .cfc-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s;}
.cfc-searchwrap{position:relative;padding:10px 10px 8px;border-bottom:.5px solid var(--salu-tint-2);}
.cfc-searchico{position:absolute;top:50%;inset-inline-start:22px;transform:translateY(-52%);pointer-events:none;}
/* double-class selectors: must out-rank `.contact-form input` (the panel lives inside the form) */
.cfc-search,.contact-form .cfc-search{width:100%;height:38px;font-family:var(--salu-font);font-size:15px;color:var(--salu-ink);background:var(--salu-tint-1);border:1px solid transparent;border-radius:9px;padding-block:0;padding-inline-start:34px;padding-inline-end:12px;box-shadow:none;transition:border-color .15s ease,background .15s ease;}
.cfc-search:focus,.contact-form .cfc-search:focus{outline:none;background:#fff;border-color:var(--salu-blue);box-shadow:none;}
.cfc-search::placeholder{color:var(--salu-text-muted);opacity:.75;}
.cfc-list{max-height:250px;overflow:auto;padding:6px;overscroll-behavior:contain;}
.cfc-list::-webkit-scrollbar{width:8px;}
.cfc-list::-webkit-scrollbar-thumb{background:var(--salu-border);border-radius:8px;}
.cfc-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--salu-ink);}
.cfc-opt.hide{display:none;}
.cfc-opt .cfc-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cfc-opt .cfc-code{flex:0 0 auto;font-size:13px;color:var(--salu-text-muted);direction:ltr;unicode-bidi:isolate;}
.cfc-opt:hover,.cfc-opt.active{background:var(--salu-tint-1);}
.cfc-opt[aria-selected="true"]{background:var(--salu-tint-1);}
.cfc-opt[aria-selected="true"] .cfc-name{color:var(--salu-blue);font-weight:600;}
.cfc-empty{padding:16px 12px;text-align:center;font-size:13.5px;color:var(--salu-text-muted);}
/* strict-phone hint pill — floats on the phone label's first line (no layout shift) */
.cf-phone label{position:relative;justify-content:flex-end;}
.cfc-hint{position:absolute;top:-3px;inset-inline-end:0;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;font-weight:500;color:var(--salu-blue);background:var(--salu-tint-1);border:.5px solid var(--salu-border);border-radius:20px;padding:2px 10px;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .22s ease,transform .22s ease;}
.cfc-hint.show{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .cfc-panel{transition:none;}
  .cfc-caret{transition:none;}
  .cfc-hint{transition:none;}
}