/* Klinik NurCahaya — site styles. Brand: #2596be blue, #bdecf8 sky, #e4e500 accent. */
@font-face{font-family:"Urbanist";src:url(/fonts/urbanist-latin.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{--control:#657b88;
  --blue:#2596be; --blue-d:#1b7a9c; --sky:#bdecf8; --sky-l:#eef9fd; --navy:#14222e;
  --accent:#e4e500; --ink:#16232d; --muted:#54656f; --line:#dfe8ec; --bg:#fff; --tint:#f4fafc;
  --r:16px; --shadow:0 6px 24px rgba(20,34,46,.07);
  --head:"Urbanist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-d)}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .5em;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.35rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
.narrow{max-width:720px}
.center{text-align:center}
p.center{margin:clamp(28px,4vw,44px) 0 0}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* bars */
.betabar{background:var(--accent);color:#222;text-align:center;font-size:14px;padding:6px 12px;font-weight:600}
.topbar{background:var(--navy);color:#d7e6ee;font-size:14px}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;padding-block:7px;flex-wrap:wrap}
.topbar__right{display:flex;align-items:center;gap:8px}
.ico{flex:none;display:block}
.tpill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font:600 .86rem var(--head);letter-spacing:.01em;transition:background .2s,border-color .2s,transform .15s}
.tpill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);transform:translateY(-1px)}
.tpill--wa{background:#25d366;border-color:#25d366;color:#fff}
.tpill--wa:hover{background:#1eb757;border-color:#1eb757}
.tsocial{display:inline-flex;gap:6px;margin-left:8px;padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}
.tsocial a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#cfe0e8;background:rgba(255,255,255,.08);transition:background .2s,color .2s,transform .15s}
.tsocial a:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;margin-right:6px;box-shadow:0 0 0 3px rgba(74,222,128,.25)}

/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{flex:none}
.brand__logo{width:170px;height:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav>a,.nav__drop>a{white-space:nowrap;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:500;display:inline-block}
.nav>a:hover,.nav__drop>a:hover{background:var(--sky-l)}
.nav a[aria-current=page]{color:var(--blue-d);font-weight:700}
.nav__drop{position:relative}
.caret{font-size:.7em}
.nav__menu{display:none;position:absolute;top:100%;left:-10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:10px;width:560px;columns:2;column-gap:4px}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{display:block}
.nav__menu a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:15px;break-inside:avoid}
.nav__menu a:hover{background:var(--sky-l);color:var(--blue-d)}
.nav .nav__cta{margin-left:8px;color:#fff}
.nav{order:2;margin-left:auto;min-width:0}
@media (min-width:1241px){
  /* Bahasa Melayu labels are longer. From here up the bar has room for them at the SAME type size and logo as
     English; only the padding tightens (11px vs 14px), which leaves ~26px spare even with the widest bold active item
     (/ms/perkhidmatan/) — room for a fallback font before Urbanist loads.
     23 Sep 2026: the old rule applied from 1101px on every screen and shrank BM to 15.2px with no gaps, so the
     BM header looked small and cramped next to EN, with 154px of dead space by the logo. */
  html[lang="ms"] .nav{gap:3px}
  html[lang="ms"] .nav>a,html[lang="ms"] .nav__drop>a{padding:10px 11px}
  html[lang="ms"] .header__in{gap:16px}
  /* Safety valve: if the bar ever runs short (a wider fallback font before Urbanist loads), the LOGO gives up
     to 42px instead of the menu sliding under the language switch. With Urbanist loaded it stays 170px. */
  html[lang="ms"] .brand{flex:0 1 auto;min-width:128px}
  html[lang="ms"] .brand__logo{width:170px;max-width:100%}
  html[lang="ms"] .nav{flex-shrink:0}
}
@media (min-width:1101px) and (max-width:1240px){
  .nav{gap:2px}.nav>a,.nav__drop>a{padding:10px 9px;font-size:.93rem}.nav .nav__cta{padding:11px 14px;margin-left:4px;font-size:.93rem}.header__in{gap:10px}.brand__logo{width:140px}
  /* narrow desktop: genuinely tight, so BM compacts further */
  html[lang="ms"] .nav{gap:0}
  html[lang="ms"] .nav>a,html[lang="ms"] .nav__drop>a{padding:10px 7px;font-size:.9rem}
  html[lang="ms"] .nav .nav__cta{padding:10px 12px;font-size:.9rem}
  html[lang="ms"] .brand__logo{width:128px}
}
.langsw{order:3;flex:none;display:inline-flex;gap:0;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;text-decoration:none;font:700 .8rem var(--head);margin-left:4px}
.langsw span{padding:6px 11px;color:var(--muted);white-space:nowrap}
.langsw .langsw__on{background:var(--blue);color:#fff}
.langsw:hover span:not(.langsw__on){background:var(--sky-l);color:var(--blue-d)}
.navtoggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;transition:.2s}

/* buttons */
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font-family:var(--head);font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(37,150,190,.3)}
.btn--primary:hover{background:var(--blue-d)}
.btn--outline{border-color:var(--blue);color:var(--blue-d);background:#fff}
.btn--outline:hover{background:var(--sky-l)}
.btn--light{background:#fff;color:var(--blue-d)}
.btn--ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn--block{display:block;width:100%;margin-top:10px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.2em}
.btnrow--center{justify-content:center}
.link{color:var(--blue-d);font-weight:600;text-decoration:none}

/* sections */
.section{padding-block:clamp(48px,8vw,96px)}
.section--tint{background:var(--tint)}
.section--dark{background:var(--navy);color:#cfdde5}
.section--dark h2,.section--dark h3{color:#fff}
.eyebrow{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--blue);margin-bottom:.8em}
.section--dark .eyebrow{color:var(--sky)}
.sechead{max-width:760px;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.lead{font-size:1.15rem;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.note{color:var(--muted);font-size:.95rem;margin-top:1.4em}

/* hero */
.hero{background:linear-gradient(160deg,var(--sky-l) 0%,#fff 60%);padding-block:clamp(36px,6vw,80px)}
.hero__in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero__img img{border-radius:24px;box-shadow:0 20px 50px rgba(20,34,46,.18);aspect-ratio:3/2;object-fit:cover;width:100%}
.hero__facts{list-style:none;padding:0;margin:2em 0 0;display:flex;gap:28px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.hero__facts strong{display:block;font-family:var(--head);font-size:1.35rem;color:var(--navy)}

/* hero slideshow (old-site behaviour: 4 photos, 5s, fade, Ken Burns zoom-in) */
.hero--slides{position:relative;padding:0;background:var(--navy);min-height:clamp(540px,80vh,840px);display:grid;place-items:center;overflow:hidden;text-align:center}
.hero__slides,.hero__slide{position:absolute;inset:0}
.hero__slide{opacity:0;transition:opacity 1.1s ease}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__slide.is-zoom img{animation:kenburns 8s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.13)}}
.hero__slides::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,62,88,.66),rgba(14,62,88,.52))}
.hero__center{position:relative;z-index:1;max-width:940px;padding-block:72px;color:#fff}
.hero__pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 22px}
.hero__pill{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:8px 24px;font:700 clamp(.85rem,1.6vw,1.05rem) var(--head);margin:0}
.hero__pill.hero__pill--open{display:inline-flex;align-items:center;gap:10px;background:rgba(20,34,46,.45);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);padding:7px 22px 7px 18px}
.hero__pill--open i{display:block;flex:none;width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.28)}
.hero__pill--open.is-closed i{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.28)}
.hero__pill--open b{font-weight:700}
.hero--slides h1{color:#fff;font-size:clamp(2.5rem,6.4vw,4.8rem);text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero--slides h1 em{color:var(--sky)}
.hero--slides .lead{color:#eef8fc;max-width:720px;margin-inline:auto}
.hero--slides .hero__facts{justify-content:center;color:#d5ebf4}
.hero--slides .hero__facts strong{color:#fff}
.btn--accent{background:var(--accent);color:#1b1b1b;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.btn--accent:hover{background:#f0f12a}

/* page head */
.pagehead{background:linear-gradient(160deg,var(--sky-l),#fff);padding-block:clamp(32px,5vw,64px);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:.3em}
.pagehead p{color:var(--muted);max-width:760px;margin:0}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs span{margin-inline:4px}

/* layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.split--form{align-items:start}
.split--doctor{grid-template-columns:380px 1fr;align-items:start}
.split__img img{border-radius:20px;width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow)}
.kncvideo{display:block;width:100%;height:auto;aspect-ratio:848/480;border-radius:20px;box-shadow:var(--shadow);background:#fff;object-fit:cover}
.split--gap{margin-bottom:clamp(32px,5vw,56px)}
.split__img--portrait img{aspect-ratio:2/3;object-position:center top}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(32px,5vw,64px)}
.feature{padding:24px}
.feature h3{font-size:1.08rem}
.feature p{color:var(--muted);font-size:.97rem;margin:0}
/* home "get to know us" cards with icons (23 Sep 2026 mockup) — modifier only, .feature is shared with other pages */
.feature--ico{text-align:center;padding:30px 24px 28px}
.feature--ico .fx__svg{display:block;width:58px;height:58px;margin:0 auto 16px;color:var(--blue)}
.feature--ico h3{font-size:1.1rem;margin-bottom:.45em}
.btn--arrow{display:inline-flex;align-items:center;gap:10px}
.btn--arrow span{transition:transform .15s}
.btn--arrow:hover span{transform:translateX(3px)}
.grid3 .feature{padding:28px}
.value{border-top:3px solid var(--blue);padding-top:20px}
/* home "why choose us" as a dark card, about "what makes us different" as a light card (23 Sep 2026 mockups) */
.whyc{background:var(--navy);color:#cfdde5;border-radius:26px;padding:clamp(26px,4.2vw,50px)}
.whyc .eyebrow{color:var(--sky)}
.whyc h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0;letter-spacing:-.02em}
.whyc__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px 48px;align-items:center;margin-bottom:30px}
.whyc__p{margin:0;padding-left:28px;border-left:1px solid rgba(255,255,255,.16);font-size:1.05rem;color:#cfdde5}
.whyc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.whyc__c{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px}
.whyc__c .fx__svg{display:block;width:40px;height:40px;margin-bottom:16px;color:var(--sky)}
.whyc__c h3{color:#fff;font-size:1.18rem;margin:0 0 .4em}
.whyc__c p{margin:0;color:#b9cad4;font-size:.97rem}
.diffc{background:var(--tint);border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,46px)}
.diffc .split{align-items:center}
.diffc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(26px,4vw,40px)}
.diffc__c{display:flex;gap:16px;align-items:flex-start;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px}
.diffc__c .fx__svg{flex:none;width:36px;height:36px;color:var(--blue-d)}
.diffc__c h3{font-size:1.08rem;margin:2px 0 .35em}
.diffc__c p{margin:0;color:var(--muted);font-size:.95rem}
.btn--ico{display:inline-flex;align-items:center;gap:9px}
.btn--ico .fx__svg{width:18px;height:18px}
@media (max-width:1100px){.diffc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.whyc__head{grid-template-columns:1fr}.whyc__p{padding-left:0;border-left:0}.whyc__grid{grid-template-columns:1fr}}
@media (max-width:640px){.diffc__grid{grid-template-columns:1fr}.diffc .split{grid-template-columns:1fr}}
.value p{margin:0}
.photogrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.photogrid img{border-radius:16px;aspect-ratio:1/1;object-fit:cover;width:100%}
.ticks{list-style:none;padding:0;margin:1.2em 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:var(--blue);width:20px;height:20px;border-radius:50%;font-size:12px;display:grid;place-items:center;margin-top:4px}

/* service cards */
.scard{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.scard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,34,46,.12)}
.scard__img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.scard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.scard__body p{color:var(--muted);font-size:.96rem;flex:1}

/* doctors */
.doctors{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.dcard{padding:0 0 20px;text-align:center;text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s}
.dcard:hover{transform:translateY(-4px)}
.dcard__img img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top}
.dcard h3{font-size:1rem;margin:16px 14px 4px}
.dcard p{color:var(--muted);font-size:.9rem;margin:0 0 8px}

/* reviews */
.revwrap{display:grid;grid-template-columns:330px minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.revsum{position:sticky;top:100px;background:linear-gradient(160deg,var(--navy),#1d3a4d);color:#cfe0e8;border-radius:22px;padding:30px 28px;box-shadow:var(--shadow)}
.revsum .eyebrow{color:var(--sky)}
.revsum h2{color:#fff;font-size:1.45rem;margin-top:18px}
.revsum__score{font:800 4.6rem/1 var(--head);color:#fff}
.revsum__count{font:700 1.05rem var(--head);color:#fff;margin:6px 0 0}
.revsum .btn{margin-top:12px}
.stars{color:#f5b301;letter-spacing:2px}
.stars--lg{font-size:1.6rem;letter-spacing:4px;margin-top:6px}
.reviews{columns:2;column-gap:20px}
.review{break-inside:avoid;margin:0 0 20px;padding:22px;transition:transform .2s,box-shadow .2s}
.review:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,34,46,.11)}
.review__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.review__tag{font:600 .75rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.review blockquote{margin:12px 0 16px;font-size:.98rem}
.review figcaption{display:flex;align-items:center;gap:12px}
.review figcaption strong{display:block;font-family:var(--head)}
.review figcaption small{color:var(--muted)}
.review__av{width:40px;height:40px;border-radius:50%;background:var(--sky);color:var(--blue-d);display:grid;place-items:center;font:800 1.05rem var(--head);flex:none}

/* faq + legal */
.faq{margin-top:2.4em}
.faq h2{font-size:1.5rem}
.faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font:700 1.02rem var(--head);color:var(--navy);position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 18px 18px;color:var(--muted)}
.faqwrap{margin-top:clamp(28px,4vw,48px)}
.reviewed{font-size:.85rem;color:var(--muted);margin-top:1.6em;padding-top:1em;border-top:1px solid var(--line)}
.legal h2{font-size:1.25rem;margin-top:1.8em}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.6em}
.prose ul.plain li{padding:0 0 0 1.4em;margin-bottom:8px;border:0;background:none;border-radius:0;position:relative}
.prose ul.plain li::before{content:"";position:absolute;left:.2em;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.form__note--consent a{color:var(--blue-d)}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-right:170px}
.footer__legal a{margin-left:18px;display:inline-block;padding:6px 0}
.footer__legal a:first-child{margin-left:0}

/* article */
.article{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,56px);align-items:start}
.article__img img{border-radius:20px;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:28px}
.prose h3{margin-top:1.6em;font-size:1.25rem}
.prose h2{margin-bottom:.7em}
.prose ul{padding-left:0;list-style:none}
.prose li{margin-bottom:14px;padding:16px 18px 16px 20px;border-left:3px solid var(--blue);background:var(--tint);border-radius:0 12px 12px 0}
.prose li strong:first-child{font-family:var(--head);color:var(--navy)}
.aside{position:sticky;top:96px}
.aside__box{padding:26px}
.aside__hours{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}

/* panels */
.panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.plogo{padding:16px;text-align:center;box-shadow:none}
.plogo img{width:100%;max-width:130px;margin:0 auto 8px;aspect-ratio:1/1;object-fit:contain}
.plogo span{font-size:.85rem;color:var(--muted);font-weight:500}

/* panel page */
.section--tight{padding-top:clamp(28px,4vw,48px)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.pstat{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px}
.pstat strong{display:block;font:800 clamp(1.4rem,3vw,2rem) var(--head);color:var(--blue-d);line-height:1.1}
.pstat span{color:var(--muted);font-size:.92rem}
.psearch{display:block;max-width:560px;margin:0 0 8px;font-weight:600}
.psearch span{display:block;margin-bottom:6px}
.psearch input{width:100%;padding:14px 18px;border:1.5px solid var(--line);border-radius:999px;font:inherit;background:#fff}
.psearch input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,150,190,.18)}
.pgroup{margin-top:clamp(28px,4vw,44px)}
.pgroup__h{font-size:1.25rem;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pgroup__h span{font:700 .8rem var(--head);background:var(--sky-l);color:var(--blue-d);border-radius:999px;padding:3px 10px}
.plogo{transition:transform .2s,border-color .2s,box-shadow .2s}
.plogo:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--shadow)}
.plogo__text{aspect-ratio:1/1;max-width:130px;margin:0 auto 8px;display:grid;place-items:center;font:800 1.05rem var(--head);color:var(--blue-d);background:var(--sky-l);border-radius:12px;padding:8px}
/* panel page, 24 Sep 2026 (Faiz: "panjang sgt, sekalikan, takyah categorized"): one A-Z grid of short tiles */
.ptop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:22px}
.ptop .psearch{flex:1 1 320px;margin:0}
.ptop .pstats{margin:0}
.panels--all{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.panels--all .plogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:118px;padding:14px 10px 12px}
.panels--all .plogo[hidden]{display:none}
.panels--all .plogo img{width:auto;max-width:118px;max-height:60px;height:auto;margin:0;aspect-ratio:auto;object-fit:contain;transition:transform .3s var(--ease)}
.panels--all .plogo:hover img{transform:scale(1.08)}
.panels--all .plogo__text{aspect-ratio:auto;width:100%;max-width:118px;height:60px;margin:0;font-size:.95rem}
.panels--all .plogo span{line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.panels--all{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.panels--all .plogo{min-height:100px;padding:10px 6px}.panels--all .plogo img{max-height:46px}.panels--all .plogo__text{height:46px;font-size:.8rem}}
.howto .feature{position:relative;padding-top:34px}
.howto__n{position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 1.05rem var(--head);box-shadow:0 6px 14px rgba(37,150,190,.35)}
.shopfront img{width:100%;border-radius:20px;aspect-ratio:21/9;object-fit:cover;object-position:center 82%;margin-top:clamp(28px,4vw,48px);box-shadow:var(--shadow)}

/* fees + areas */
.fees{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,56px);align-items:start}
.feegroup{margin-bottom:34px}
.feegroup h2{font-size:1.3rem;margin-bottom:12px}
.feetable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.feetable th{font:700 .75rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 18px;background:var(--tint)}
.feetable th:last-child,.feetable td:last-child{text-align:right;white-space:nowrap}
.feetable td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top}
.feetable td:last-child{font:700 1.05rem var(--head);color:var(--blue-d)}
.feetable small{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.feenotes{padding-left:1.1em;margin:0 0 1.2em;color:var(--muted);font-size:.93rem}
.feenotes li{margin-bottom:.6em}
.pricechip{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--sky-l);border:1px solid var(--sky);border-radius:12px;padding:10px 14px;margin:0 0 16px}
.pricechip strong{font:800 1.15rem var(--head);color:var(--blue-d)}
.pricechip a{font-size:.88rem;font-weight:600;color:var(--blue-d)}
.pstats--4{grid-template-columns:repeat(4,1fr)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mt{margin-top:1.4em}
.areas h2{font-size:1.5rem}
.areas__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:14px}
.areas__a{padding:16px 18px;text-decoration:none;color:inherit;box-shadow:none;transition:border-color .2s,transform .2s}
.areas__a:hover{border-color:var(--blue);transform:translateY(-2px)}
.areas__a strong{display:block;font-family:var(--head);color:var(--navy)}
.areas__a--home{background:var(--sky-l);border-color:#cde9f3}
.areas__a--home span{color:var(--blue-d);font-weight:600}
.areas__a span{color:var(--muted);font-size:.9rem}

/* "Finding us & parking" (contact + every area page). 23 Sep 2026 — bento layout from Faiz's mockup:
   wide parking card, three icon cards, full-width payment strip. 6-col grid -> 2 cols <=1100px -> 1 col <=640px. */
.fx__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 28px;flex-wrap:wrap;margin-bottom:26px}
.fx__head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.02em;margin:0 0 .25em}
.fx__eyebrow{display:flex;align-items:center;gap:10px}
.fx__eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor}
.fx__sub{margin:0;color:var(--muted);font-size:1.05rem;max-width:56ch}
.fx__go{display:flex;gap:10px;flex-wrap:wrap}
.fx__btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:.95rem}
.fx__btn .fx__svg{width:18px;height:18px}
.fx__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.fx__c{grid-column:span 2;display:flex;gap:18px;align-items:flex-start;min-width:0;padding:26px 26px 24px;background:#fff;border:1px solid var(--line);border-radius:20px}
.fx__c p{margin:0;color:var(--ink)}
.fx__c--park{grid-column:span 4;align-items:center;gap:30px;padding:32px 36px;background:var(--sky-l);border-color:#cde9f3}
.fx__c--pay{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:center}
.fx__art{flex:none;width:60px;height:auto;color:var(--blue)}
.fx__art--park{width:clamp(96px,11vw,132px);color:var(--blue-d)}
.fx__car{fill:#fff}
.fx__c--park .fx__car{fill:var(--sky-l)}
.fx__ico{flex:none;color:var(--blue);line-height:0}
.fx__ico .fx__svg{width:50px;height:50px}
.fx__k{font:700 .78rem var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)!important;margin:4px 0 8px!important}
.fx__park-h{font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.02em;margin:0 0 .3em}
.fx__c--park p:not(.fx__k){font-size:1.1rem}
.fx__grow{flex:1;min-width:0}
.fx__chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.fx__chips li{padding:5px 12px;border-radius:10px;border:1px solid var(--line);background:var(--tint);font:600 .88rem var(--head)}
.fx__rows{list-style:none;margin:0;padding:0}
.fx__rows li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.fx__rows li:first-child{padding-top:2px}
.fx__rows li:last-child{border-bottom:0;padding-bottom:0}
.fx__rows b{display:block;font:700 .98rem var(--head);color:var(--ink)}
.fx__rows small{display:block;color:var(--muted);font-size:.86rem}
.fx__dist{text-align:right;white-space:nowrap}
.fx__dist b{color:var(--blue-d)}
.fx__ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fx__ticks li{display:flex;align-items:center;gap:10px;color:var(--ink)}
.fx__tick{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sky-l);color:var(--blue-d)}
.fx__tick .fx__svg{width:13px;height:13px;stroke-width:2.6}
.fx__payinfo{display:flex;gap:18px;align-items:flex-start;min-width:0}
.fx__panel{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:600 .9rem var(--head);color:var(--blue-d);text-decoration:none}
.fx__panel .fx__svg{flex:none;width:18px;height:18px}
.fx__panel:hover span{text-decoration:underline}
.fx__pay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.fx__pay li{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:6px 10px;text-align:center;border-left:1px solid var(--line)}
.fx__pay .fx__svg{width:44px;height:44px;color:var(--blue)}
.fx__pay b{font:700 .95rem var(--head);color:var(--ink)}
.fx__pay small{margin-top:-5px;color:var(--muted);font-size:.8rem}
.fx__note{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--muted);font-size:.88rem}
.fx__note .fx__svg{flex:none;width:17px;height:17px}
@media (max-width:1100px){
  .fx__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx__c{grid-column:span 1}
  .fx__c--park,.fx__c--pay{grid-column:1/-1}
  .fx__c--pay{grid-template-columns:1fr}
  .fx__pay li:first-child{border-left:0}
}
@media (max-width:640px){
  .fx__grid{grid-template-columns:1fr}
  .fx__c{padding:22px;gap:14px}
  .fx__c--park{flex-direction:column;align-items:flex-start;gap:14px;padding:26px 24px}
  .fx__ico .fx__svg{width:40px;height:40px}
  .fx__art{width:50px}
  .fx__pay{grid-template-columns:1fr 1fr;row-gap:18px}
  .fx__pay li{border-left:0}
  .fx__head{align-items:flex-start}
}
.section--flushtop{padding-top:0}
/* A section that is only a card on white: the neighbours' padding already makes the gap, so it adds none —
   otherwise two paddings stack into ~190px of empty white (Faiz, 23 Sep: "rapat atas bawah"). */
.section--card{padding-block:0}
.section--link{padding-top:clamp(8px,1.5vw,20px);padding-bottom:clamp(40px,6vw,72px)}

.artmeta{font-size:.85rem;color:var(--muted);margin:0 0 .8em}
.prose--article h2{margin-top:1.9em;font-size:clamp(1.35rem,2.4vw,1.7rem)}
.prose--article .lead{font-size:1.12rem;color:var(--ink)}
.callout{background:#fff6e5;border:1px solid #f2d59b;border-left:4px solid #e0a100;border-radius:12px;padding:14px 18px}
.sources{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line)}
.sources h2{font-size:1.1rem;margin-top:0}
.sources ol{padding-left:1.2em;color:var(--muted);font-size:.9rem}
.sources li{margin-bottom:.5em;padding:0;border:0;background:none}
.guidelink{margin:1.6em 0 0;padding:14px 18px;background:var(--sky-l);border-radius:12px}
.aside__box .btn--wa{justify-content:center}

.tablewrap{overflow-x:auto;margin:1em 0 1.4em;max-width:100%}
.article>*{min-width:0}
.vaxtable td:first-child{font-weight:600;white-space:nowrap}
.vaxtable td:last-child{font:400 1rem var(--body);color:var(--ink);text-align:left;white-space:normal}
.vaxtable th:last-child{text-align:left}
.vaxtable td small{color:var(--muted)}
.schedfig{margin:1.6em 0 2em}
.schedfig img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.schedfig figcaption{font-size:.85rem;color:var(--muted);margin-top:8px}

.ulist{display:grid;gap:18px;margin-top:1.2em}
.ulist__i{display:flex;gap:16px;align-items:flex-start}
.ulist__i .howto__n{position:static;flex:none}
.ulist__i h3{margin:4px 0 4px;font-size:1.1rem}
.ulist__i p{margin:0;color:var(--muted)}
.form .btn--wa{justify-content:center}

.section--duty{padding-block:clamp(36px,5vw,64px)}
.duty{background:linear-gradient(160deg,var(--sky-l),#fff);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,3vw,36px)}
.duty__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.duty__head h2{font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.02em;margin:0}
.duty__head .eyebrow{margin:0 0 6px}
.duty__count{display:inline-flex;align-items:center;gap:8px;margin:0;flex:none;font:700 .9rem var(--head);color:var(--blue-d);background:var(--sky-l);border:1px solid #cfe9f4;border-radius:999px;padding:9px 16px}
.duty__count::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.duty__always{color:var(--muted);margin:14px 0 0;max-width:62ch}
.duty__panel{margin-top:22px;background:#f6fafc;border:1px solid #e2edf2;border-radius:18px;padding:clamp(14px,2vw,20px)}
.duty__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.duty__tabs{display:inline-flex;gap:4px;background:#eaf3f7;border-radius:14px;padding:4px}
.duty__tabs[hidden],.duty__q[hidden],.duty__count[hidden]{display:none}   /* their display:inline-flex beats the hidden attribute: empty chips showed whenever the endpoint was slow or down */
.duty__tab{font:700 .95rem var(--head);color:var(--control);background:none;border:1px solid transparent;border-radius:11px;padding:10px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.duty__tab span{font-size:.8rem;min-width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:#dceaf0;color:var(--navy)}
.duty__tab[aria-pressed=true]{background:#fff;color:var(--navy);border-color:var(--blue)}
.duty__tab[aria-pressed=true] span{background:var(--navy);color:#fff}
.duty__stamp{margin:0;font-size:.85rem;color:var(--muted)}
.duty__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.duty__card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2edf2;border-radius:16px;padding:16px 18px 14px}
.duty__badge{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;margin:0 0 14px;font:700 .82rem var(--head);border-radius:999px;padding:6px 12px;background:#e6f7ed;color:#0b7a3b}
.duty__badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none}
.duty__card--done .duty__badge{background:#eef2f4;color:var(--control)}
.duty__card--done .duty__badge::before{background:var(--control)}
.duty__card--soon .duty__badge{background:#fff6dd;color:#8a6100}
.duty__card--soon .duty__badge::before{background:#e0a800}
.duty__who{display:flex;align-items:center;gap:14px}
.duty__who img{width:84px;height:84px;border-radius:14px;object-fit:cover;object-position:center top;flex:none;background:var(--accent)}
.duty__initials{width:84px;height:84px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--navy);font-family:var(--head);font-size:2.1rem;font-weight:700;line-height:1}
.duty__who b{display:block;font-family:var(--head);font-size:1.25rem;line-height:1.2;color:var(--navy);letter-spacing:-.01em}
.duty__who small{display:block;margin-top:4px;color:var(--muted);font-size:.9rem}
.duty__when{border-top:1px solid #eef3f6;margin-top:14px;padding-top:12px}
.duty__when small{display:block;color:var(--muted);font-size:.85rem}
.duty__when b{display:block;margin-top:2px;font-family:var(--head);font-size:1.15rem;color:var(--navy)}
.duty__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #eef3f6;margin-top:12px;padding-top:12px;font-size:.88rem;color:var(--muted)}
.duty__link{font-weight:700;color:var(--blue-d);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.duty__link:hover{text-decoration:underline}
.duty--closed .duty__always{color:#8a6100}
@media (max-width:560px){
  .duty__bar{align-items:flex-start}
  .duty__tabs{width:100%}
  .duty__tab{flex:1;justify-content:center;padding:10px 8px}
  .duty__who img,.duty__initials{width:64px;height:64px}
  .duty__initials{font-size:1.7rem}
  .duty__who b{font-size:1.1rem}
}
.stock{margin-top:2.4em}
.stock h2{font-size:1.4rem}
.stock__list{list-style:none;padding:0;margin:1em 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.stock__i{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;margin:0}
.stock__n{font-size:.96rem}
.stock__s{font:700 .78rem var(--head);color:var(--muted);white-space:nowrap}
.stock__s--in{color:#0b7a3b}
.stock__s--out{color:#8a6100}
.stock .btn--wa{margin-top:6px}

/* forms */
.form{padding:clamp(22px,3vw,34px)}
.form h2{font-size:1.5rem}
.form label{display:block;font-weight:600;font-size:.95rem;margin-bottom:16px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,150,190,.18)}
.form .invalid{border-color:#d33}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__note{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.form__msg{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--sky-l);font-size:.95rem}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.infocards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info{padding:18px;text-decoration:none;color:inherit;display:block;box-shadow:none}
a.info:hover{border-color:var(--blue)}
.info__k{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:700;font-family:var(--head);margin-bottom:4px}
.info__v{display:block;font-weight:700;font-family:var(--head);font-size:1.08rem;word-break:break-word}
.info__s{display:block;color:var(--muted);font-size:.9rem}
.info--addr{margin-top:14px;font-style:normal}
.info--ico{display:flex;gap:14px;align-items:flex-start}
.info--ico .fx__svg{flex:none;width:28px;height:28px;margin-top:2px;color:var(--blue-d);transition:transform .25s var(--ease)}
.info__b{display:block;min-width:0}
@media (hover:hover){a.info--ico:hover .fx__svg{transform:translateY(-2px)}}
.map{margin-top:clamp(28px,4vw,48px);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:420px;border:0}

/* home hover panel (from the old site): 5 columns, hovering one swaps the full background */
.section--flush>.hovp{margin-block:clamp(8px,2vw,20px) clamp(28px,4vw,48px)}
.hovp{position:relative;height:clamp(420px,58vw,760px);overflow:hidden;background:var(--navy);margin-inline:clamp(0px,1vw,12px);border-radius:clamp(0px,1vw,14px)}
.hovp__bg,.hovp__img{position:absolute;inset:0}
.hovp__img{opacity:0;transition:opacity .6s ease}
.hovp__img.is-on{opacity:1}
.hovp__img img{width:100%;height:100%;object-fit:cover}
.hovp__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,34,46,.45) 0,rgba(20,34,46,.05) 38%,rgba(20,34,46,0) 100%)}
.hovp__cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.hovp__col{display:block;text-decoration:none;text-align:center;color:#fff;border-left:1px solid rgba(255,255,255,.35)}
.hovp__col:first-child{border-left:0}
.hovp__col>span{display:block;padding-inline:10px;transition:background .25s,color .25s}
.hovp__sub{padding-top:clamp(28px,4vw,52px);font:500 .75rem var(--body);letter-spacing:.32em;text-transform:uppercase}
.hovp__title{padding-block:14px clamp(28px,4vw,50px);font:700 clamp(1rem,1.6vw,1.35rem) var(--head);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hovp__col.is-on>span{background:#fff;color:var(--ink);text-shadow:none}
.hovp__col.is-on .hovp__title{color:var(--blue-d)}
.ticks--four{grid-template-columns:repeat(4,1fr);margin-top:0}

/* digital: app + whatsapp */
.digital{display:grid;grid-template-columns:1fr;gap:24px}
.dcol{padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(22px,4vw,56px);align-items:center;transition:transform .3s,box-shadow .3s}
.dcol:hover,.dcol:focus-within{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,34,46,.14)}
.dcol__main{display:flex;flex-direction:column;align-self:stretch}
.dcol--wa .dcol__peek{order:-1}
.dcol--wa{grid-template-columns:250px minmax(0,1fr)}
.dcol .ticks--one{grid-template-columns:1fr 1fr;gap:10px 28px;flex:0 0 auto;align-content:start}
.dcol__main>.stores,.dcol__main>.btn--wa{margin-top:auto}
.chat{font-size:.82rem}
.dcol__peek{opacity:.5;transform:translateY(16px) scale(.93);filter:saturate(.5);transition:opacity .4s,transform .4s,filter .4s}
.dcol:hover .dcol__peek,.dcol:focus-within .dcol__peek{opacity:1;transform:none;filter:none}
@media (hover:none){.dcol__peek{opacity:1;transform:none;filter:none}}
.phone{position:relative;border-radius:26px;border:5px solid var(--navy);box-shadow:0 14px 32px rgba(20,34,46,.22);background:#fff;overflow:hidden}
.phone__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.phone__track::-webkit-scrollbar{display:none}
.phone__track img{flex:0 0 100%;width:100%;scroll-snap-align:center;border:0;border-radius:0;box-shadow:none}
.phone__nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(20,34,46,.72);color:#fff;font:700 1.15rem/1 var(--head);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.phone:hover .phone__nav,.phone:focus-within .phone__nav{opacity:1}
@media (hover:none){.phone__nav{opacity:.85}}
.phone__nav--prev{left:6px}.phone__nav--next{right:6px}
.phone__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.phone__dots span{width:7px;height:7px;border-radius:50%;background:rgba(20,34,46,.25);transition:background .2s,transform .2s}
.phone__dots span.is-on{background:var(--blue);transform:scale(1.25)}
.chat{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 32px rgba(20,34,46,.16);background:#efe7dd;font-size:.74rem;line-height:1.35}
.chat__bar{background:#128c7e;color:#fff;display:flex;align-items:center;gap:8px;padding:8px 10px}
.chat__bar strong{display:block;font:700 .82rem var(--head)}
.chat__bar small{opacity:.85;font-size:.75rem}
.chat__av{width:26px;height:26px;border-radius:50%;background:#fff;color:#128c7e;display:grid;place-items:center;font:700 .8rem var(--head)}
.chat__body{padding:10px 8px 4px}
.chat__msg{margin:0 0 7px;padding:6px 9px;border-radius:10px;max-width:88%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.chat__msg--me{background:#d9fdd3;margin-left:auto;border-top-right-radius:2px}
.chat__msg--hana{background:#fff;border-top-left-radius:2px}
.chat__cap{text-align:center;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#7a6f63;padding:2px 0 8px}
.dcol--wa{border-top:4px solid #25d366}
.dcol:not(.dcol--wa){border-top:4px solid var(--blue)}
.dcol__head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.dcol__head h3{font-size:1.45rem;margin:0}
.dcol__head .eyebrow{margin-bottom:.3em}
.dcol__icon{width:60px;height:60px;border-radius:14px;flex:none}
.dcol__icon--wa{background:#25d366;color:#fff;display:grid;place-items:center}
.ticks--one{grid-template-columns:1fr;margin:0 0 1.4em;flex:1}
.stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stores a{display:block;transition:transform .15s}
.stores a:hover{transform:translateY(-2px)}
.stores img{height:50px;width:auto}
.btn--wa{background:#25d366;color:#fff;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;box-shadow:0 6px 16px rgba(37,211,102,.3)}
.btn--wa:hover{background:#1eb757}
.phones{display:flex;gap:18px;justify-content:center}
.phones img{width:min(46%,260px);border-radius:26px;border:6px solid var(--navy);box-shadow:0 18px 40px rgba(20,34,46,.2)}
.phones img:nth-child(2){margin-top:40px}
.steps{list-style:none;counter-reset:s;padding:0;margin:1.2em 0 1.6em}
.steps li{counter-increment:s;position:relative;padding:0 0 18px 54px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font:700 1.05rem var(--head);display:grid;place-items:center}
.steps strong{display:block;font-family:var(--head);font-size:1.1rem;color:var(--navy)}
.steps span{color:var(--muted)}

/* cta + footer */
.ctaband{background:linear-gradient(120deg,var(--blue),var(--blue-d));color:#fff}
.ctaband__in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(36px,5vw,56px);flex-wrap:wrap}
.ctaband h2{color:#fff;margin-bottom:.2em}
.ctaband p{margin:0;opacity:.92}
.ctaband__btns{display:flex;gap:12px;flex-wrap:wrap}
.footer{background:var(--navy);color:#b9c9d2;font-size:.95rem;padding-top:clamp(40px,6vw,72px)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.4fr;gap:36px}
.footer h3{color:#fff;font-size:1rem;margin-bottom:1em}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:8px}
.footer a{color:#dbe7ed;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer address{font-style:normal;margin-bottom:1em}
.footer__logo{width:190px;background:#fff;border-radius:12px;padding:10px;margin-bottom:16px}
.footer__social{display:flex;gap:10px;margin:0}
.footer__social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#dbe7ed;transition:background .2s,transform .15s}
.footer__social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px);text-decoration:none}
.footer__social--sm a{width:34px;height:34px}
.footer__hours{color:#fff}
.footer__base{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-block:20px;font-size:.85rem}
.wafab{position:fixed;right:18px;bottom:18px;z-index:60;background:#25d366;color:#fff;border-radius:999px;padding:12px 18px;display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-family:var(--head);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.wafab:hover{transform:translateY(-2px)}

/* responsive */
@media (max-width:1000px){
  .features,.ticks--four,.grid4,.pstats--4{grid-template-columns:1fr 1fr}
  .fees{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .article{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}
@media (max-width:1100px){
  .navtoggle{display:block;order:3}
  .langsw{order:2;margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 80px);overflow:auto}
  .nav.open{display:flex}
  .nav__menu{display:none!important}
  .nav .nav__cta{margin:10px 0 0}
}
@media (max-width:900px){
  .revwrap{grid-template-columns:1fr}
  .revsum{position:static}
  .hero__in,.split,.split--doctor,.digital{grid-template-columns:1fr}
  .split--rev>div:first-child{order:2}
  .hero__img{order:-1}
  .split--doctor .split__img{max-width:340px}
}
@media (max-width:760px){
  .hovp{height:auto;margin-inline:0;border-radius:0;display:flex;flex-direction:column}
  .hovp__bg{position:relative;inset:auto;order:2;aspect-ratio:4/3}
  .hovp__bg::after{display:none}
  .hovp__cols{position:static;display:flex;overflow-x:auto;background:var(--navy);scrollbar-width:none}
  .hovp__cols::-webkit-scrollbar{display:none}
  .hovp__col{flex:0 0 auto;border-left:0;min-width:34vw}
  .hovp__sub{padding-top:14px;letter-spacing:.18em;font-size:.62rem}
  .hovp__title{padding-block:4px 14px;font-size:.98rem;text-shadow:none}
}
@media (max-width:1100px){
  .nav>a,.nav__drop>a{padding:13px 14px;min-height:46px}
  .langsw span{padding:10px 14px}
  .navtoggle{padding:12px;min-width:48px;min-height:48px}
}
@media (max-width:640px){
  .footer__base{padding-right:20px;padding-bottom:88px}
  .footer li{margin-bottom:0}
  .footer li a,.footer address+p a{display:inline-block;padding:9px 0;min-height:40px}
  .footer__social a{width:44px;height:44px}
  .footer__social--sm a{width:40px;height:40px}
  .tpill{padding:9px 14px}
  .tsocial{display:none}
  .crumbs a{display:inline-block;padding:8px 0}
  .scard .link,.dcard .link,.link{display:inline-block;padding:8px 0}
  .phone__nav{width:40px;height:40px}
  .phone__dots span{width:9px;height:9px}
  .hovp__sub{font-size:.75rem}
  .chat{font-size:.85rem}.chat__cap{font-size:.75rem}.chat__bar small{font-size:.75rem}
  .review__tag{font-size:.75rem}
  .pgroup__h span,.plogo span{font-size:.8rem}
  .betabar{font-size:.8rem}
  .dcol,.dcol--wa{grid-template-columns:1fr}
  .dcol--wa .dcol__peek{order:0}
  .dcol .ticks--one{grid-template-columns:1fr}
  .dcol__peek{max-width:240px;margin-inline:auto}
  .pstats{grid-template-columns:1fr}
  body{font-size:16px}
  .topbar__hours{display:none}
  .topbar__in{justify-content:center}
  .grid3,.features,.ticks,.ticks--four,.infocards,.form__row,.grid4{grid-template-columns:1fr}
  .reviews{columns:1}
  .footer__grid{grid-template-columns:1fr}
  .wafab span{display:none}
  .wafab{padding:14px}
  .brand__logo{width:140px}
}
@media (prefers-reduced-motion:reduce){.hero__slide.is-zoom img{animation:none}*{transition:none!important;scroll-behavior:auto!important}}


/* ---------------------------------------------------------------- App & WhatsApp page (V6 layout)
   Scoped to body.dig — templates/digital.html. */
.digital-intro{padding-block:56px 40px;text-align:center}
.digital-intro h1{font-size:clamp(36px,4.2vw,60px);letter-spacing:-.035em;margin:0 auto 20px;max-width:800px}
.digital-lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:720px;margin:0 auto}
.product-nav{display:flex;justify-content:center;gap:24px;margin-top:20px}
.product-nav a{font-size:14px;font-weight:700;text-decoration:none;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.product-nav a:hover{border-color:var(--blue-d)}
.v-app{padding-bottom:72px}
.app-editorial{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:white;box-shadow:0 16px 48px #14222e08}
.app-copy{padding:40px;min-width:0}
.product-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.product-heading h2{font-size:28px;letter-spacing:-.02em;margin:0}
.product-heading .eyebrow{margin-bottom:8px;font-size:12px;letter-spacing:.07em}
.product-icon{height:52px;width:52px;border-radius:14px;flex:none}
.app-intro{font-size:16px;color:var(--muted);line-height:1.7}
.app-features{padding:0;list-style:none;margin:24px 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.app-features li{display:flex;gap:12px;align-items:flex-start;min-width:0;font-size:16px;line-height:1.6}
.app-features svg{color:var(--blue-d);margin-top:3px}
.app-more{border-top:1px solid var(--line);margin:24px 0}
.app-more summary{font-size:14px;font-weight:700;color:var(--blue-d);min-height:48px;padding:12px 0}
.app-more ul{padding-left:20px;color:var(--muted);font-size:16px}
.app-more li{margin:12px 0}
.app-copy .stores{gap:12px}
.app-visual{position:relative;min-height:610px;background:radial-gradient(ellipse at 35% 50%,#fff 0%,#eef9fd 55%,#d7eff7 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:72px 20px 84px}
.app-visual::before{content:'';position:absolute;width:460px;height:460px;border:1px solid #b5dbe8;border-radius:50%;top:80px;left:16px}
.app-visual::after{content:'';position:absolute;width:580px;height:580px;border:1px solid #c7e3ed;border-radius:50%;top:20px;left:-44px}
.visual-top{display:flex;justify-content:space-between;position:absolute;left:28px;right:28px;top:24px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--blue-d)}
.shot-count{font-variant-numeric:tabular-nums}
.phone-primary{position:relative;z-index:2;width:214px;flex:none;aspect-ratio:300/650;overflow:hidden;border:6px solid var(--navy);border-radius:30px;background:white;box-shadow:0 20px 36px #14222e29;margin-left:50px;margin-top:12px}
.phone-primary img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone-secondary{position:absolute;z-index:1;left:calc(50% - 168px);top:115px;width:178px;aspect-ratio:300/650;border:5px solid var(--control);border-radius:25px;overflow:hidden;background:white;transform:rotate(-8deg);box-shadow:0 16px 24px #14222e16}
.phone-secondary img{height:100%;width:100%;object-fit:cover;object-position:top}
.shot-tabs{position:absolute;z-index:3;bottom:24px;left:20px;right:20px;display:flex;justify-content:center;gap:4px}
.shot-tab{min-height:44px;min-width:64px;padding:8px 16px;background:transparent;border:1px solid transparent;border-radius:999px;font-size:14px;color:var(--muted)}
.shot-tab[aria-pressed=true]{background:white;color:var(--navy);border-color:var(--line);box-shadow:0 4px 12px #14222e08}
.shot-tab:hover{background:white}
.v-hana{background:var(--navy);padding-block:64px}
.hana-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:32px}
.hana-intro h2{color:white;font-size:40px;letter-spacing:-.03em;margin:0}
.hana-intro .eyebrow{color:var(--sky)}
.hana-intro>p{color:#d6e4ec;font-size:16px;line-height:1.7;margin:0;max-width:500px}
.hana-studio{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid #415563;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 24px 56px #00000018}
.hana-sidebar{background:#f6f9fb;border-right:1px solid var(--line);padding:24px 12px 16px;min-width:0}
.sidebar-label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--muted);margin:0 16px 16px}
.scenario-tabs{display:flex;flex-direction:column;gap:4px}
.scenario-tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 12px;min-height:72px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:inherit}
.scenario-tab>svg{flex:none;color:var(--muted)}
.scenario-tab[aria-selected=true]{background:white;border-color:var(--line);color:var(--blue-d);box-shadow:0 4px 12px #14222e06}
.scenario-tab[aria-selected=true]>svg{color:var(--blue-d)}
.scenario-tab:hover{background:#fff;color:var(--navy)}
.scenario-name{display:block;min-width:0;flex:1}
.scenario-name strong{display:block;font-size:14px;font-weight:700;line-height:1.5}
.scenario-name small{display:block;font-size:12px;font-weight:400;color:var(--muted);line-height:1.5;margin-top:2px}
.tab-arrow{font-size:22px;color:var(--control)}
.sidebar-help{font-size:12px;color:var(--muted);margin:20px 16px 0;line-height:1.7}
.conversation-panel{display:flex;flex-direction:column;min-width:0;background:white}
.conversation-head{display:flex;align-items:center;gap:12px;padding:20px 28px;border-bottom:1px solid var(--line)}
.hana-avatar{width:44px;height:44px;display:grid;place-items:center;background:var(--navy);color:var(--sky);border-radius:14px;font:700 24px var(--head)}
.conversation-head strong{display:block;font-family:var(--head);font-size:20px;line-height:1.3}
.conversation-head>div>span{display:block;font-size:12px;color:var(--muted)}
.conversation-area{background:#fbfcfd;flex:1;padding:24px 32px 32px;min-height:410px}
.conversation-caption{text-align:center;font-size:12px;color:var(--muted);margin-bottom:24px;letter-spacing:.02em}
.messages{display:flex;flex-direction:column;gap:16px}
.message{font-size:16px;line-height:1.7;padding:14px 18px;max-width:82%;border-radius:16px;border:1px solid var(--line);margin:0}
.message-user{align-self:flex-end;background:#e7f5fb;border-color:#c4e2ee;border-bottom-right-radius:4px}
.message-hana{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;box-shadow:0 2px 4px #14222e03}
.conversation-action{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 28px;border-top:1px solid var(--line)}
.conversation-action strong{display:block;font-size:14px}
.conversation-action span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.conversation-action .btn{border-radius:10px;font-size:16px;padding-inline:24px;flex-shrink:0}
.hana-bottom{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:24px;align-items:start}
.hana-scope{color:#d6e4ec}
.hana-scope summary{min-height:44px;padding:8px 0;font-size:14px;font-weight:700;cursor:pointer}
.hana-scope ul{padding-left:20px;font-size:16px}
.hana-scope li{margin-bottom:12px}
.hana-note{font-size:14px;line-height:1.7;color:#d6e4ec;margin:0}
.v-setup{padding-block:64px}
.v-setup h2{font-size:36px;margin-bottom:32px}
.setup-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;padding:0;margin:0}
.setup-steps li{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:24px}
.step-index{color:var(--blue-d);font:500 36px/1 var(--head)}
.setup-steps h3{font-size:20px;margin-bottom:8px}
.setup-steps p{font-size:16px;color:var(--muted);line-height:1.65}
.privacy-line{font-size:14px;line-height:1.65;color:var(--muted);margin-top:32px;max-width:850px}
.component-only .digital-intro{padding-top:64px}
.scenario-tab:focus-visible{outline-offset:-3px}
.dig .visual-top{color:var(--navy)}
/* V3: patient WhatsApp phone preview and an external feature sidebar. */
.dig #hana{background:linear-gradient(120deg,#f1f9fc,#fff 70%);padding:72px 0 40px;border-top:1px solid #e2edf2;border-bottom:1px solid #e2edf2}
.dig #hana .hana-studio{display:grid;grid-template-columns:480px minmax(0,1fr);gap:72px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;align-items:center}
.dig #hana .hana-sidebar{grid-column:2;grid-row:1;padding:0;background:transparent;border:0}
.dig #hana .hana-intro{display:block;margin:0 0 28px}
.dig #hana .hana-intro h2{color:var(--navy);font-size:46px;letter-spacing:-.035em;margin-bottom:18px}
.dig #hana .hana-intro .eyebrow{display:flex;align-items:center;gap:10px;color:var(--blue-d);margin:0 0 16px}
.dig #hana .hana-intro .eyebrow svg{color:#087a5e;width:24px;height:24px;order:-1}
.dig #hana .hana-intro>p{color:var(--muted);font-size:16px;line-height:1.75;max-width:540px}
.dig #hana .sidebar-label{font-family:var(--head);font-size:20px;color:var(--navy);letter-spacing:-.01em;text-transform:none;margin:0 0 12px}
.dig #hana .scenario-tabs{gap:5px}
.dig #hana .scenario-tab{min-height:65px;padding:10px 16px;border-radius:12px;gap:16px;border-color:transparent;color:var(--navy)}
.dig #hana .scenario-tab>svg{color:var(--blue-d)}
.dig #hana .scenario-tab[aria-selected=true]{background:#fff;border-color:#bbdce7;box-shadow:0 5px 16px #14222e06;color:var(--blue-d)}
.dig #hana .scenario-tab[aria-selected=true] .tab-arrow{color:var(--blue-d)}
.dig #hana .scenario-name strong{font-size:16px}
.dig #hana .scenario-name small{font-size:12px}
.dig #hana .sidebar-help{margin:12px 0 20px;font-size:12px}
.dig #hana .conversation-action{padding:20px 0 0;display:flex;flex-direction:column;align-items:start;gap:8px;border-top:1px solid var(--line)}
.dig #hana .conversation-action>div{max-width:none;order:2;margin:0}
.dig #hana .conversation-action>div strong{display:none}
.dig #hana .conversation-action>div span{font-size:12px}
.dig #hana .conversation-action .btn{width:auto;border-radius:999px;min-height:52px;padding:12px 28px;background:#25d366;color:#14222e;box-shadow:0 8px 24px #25d36622}
.dig #hana .wa-phone-stage{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;position:relative;padding:0 32px}
.dig #hana .wa-preview-label{font-size:12px;letter-spacing:.16em;font-weight:700;color:var(--muted);margin:0 0 20px}
.dig #hana .conversation-panel{width:364px;height:716px;max-width:100%;flex:none;border:8px solid #14222e;border-radius:42px;overflow:hidden;background:#efeae2;box-shadow:0 28px 58px #14222e24,0 0 0 1px #14222e12;isolation:isolate}
.dig #hana .wa-status{height:32px;padding:9px 22px 2px;flex:none;display:flex;align-items:center;justify-content:space-between;background:#075e54;color:white;font-size:12px;font-weight:700}
.dig #hana .wa-status-right{display:flex;gap:5px;align-items:center}
.dig #hana .wa-status-right svg{width:18px;height:18px}
.dig #hana .conversation-head{background:#075e54;color:#fff;gap:8px;padding:12px 10px 14px;border:0;flex:none}
.dig #hana .wa-back{display:flex;align-items:center;margin-right:-5px}
.dig #hana .wa-back svg{width:20px}
.dig #hana .hana-avatar{height:38px;width:38px;background:#e4f4ed;color:#075e54;border-radius:50%;font-size:20px;flex:none}
.dig #hana .conversation-head strong{font:700 18px/1.3 var(--body)}
.dig #hana .conversation-head>div>span{font-size:12px;color:#e0f0eb;white-space:nowrap}
.dig #hana .wa-header-icons{display:flex;align-items:center;gap:14px;margin-left:auto}
.dig #hana .wa-header-icons svg{width:18px;height:18px}
.dig #hana .wa-header-icons svg:last-child{width:8px;stroke-width:4}
.dig #hana .conversation-area{min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;padding:16px 12px;background-color:#efeae2;background-image:radial-gradient(#c8c2b655 .8px,transparent .8px);background-size:18px 18px}
.dig #hana .wa-today{display:table;margin:0 auto 20px;padding:4px 10px;border-radius:6px;background:#fffc;color:#52625b;font-size:12px;box-shadow:0 1px 1px #14222e10}
.dig #hana .messages{gap:12px}
.dig #hana .message{font:400 16px/1.5 var(--body);max-width:90%;border:0;padding:10px 12px 8px;color:#14222e;box-shadow:0 1px 1px #14222e18;border-radius:9px}
.dig #hana .message::after{content:'9:41';display:block;text-align:right;color:#53655b;font-size:12px;line-height:1.2;margin-top:5px}
.dig #hana .message-user{background:#d9fdd3;border-top-right-radius:2px}
.dig #hana .message-user::after{content:'9:41  ✓✓'}
.dig #hana .message-hana{background:white;border-top-left-radius:2px}
.dig #hana .wa-composer{display:flex;align-items:center;gap:8px;padding:8px;flex:none;color:#586a64}
.dig #hana .wa-input{height:44px;background:#fff;border-radius:24px;display:flex;align-items:center;gap:10px;padding:10px 12px;flex:1;min-width:0;font-size:16px}
.dig #hana .wa-input>span{flex:1}
.dig #hana .wa-mic{height:44px;width:44px;background:#087f69;color:white;border-radius:50%;display:grid;place-items:center;flex:none}
.dig #hana .wa-home-indicator{height:15px;flex:none;position:relative}
.dig #hana .wa-home-indicator::after{content:'';position:absolute;bottom:4px;width:100px;height:4px;background:#14222e;border-radius:3px;left:calc(50% - 50px)}
.dig #hana .conversation-caption{font-size:12px;line-height:1.5;letter-spacing:0;margin:18px 0 0;max-width:340px}
.dig #hana .hana-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);gap:72px}
.dig #hana .hana-scope,.dig #hana .hana-note{color:var(--muted)}
.dig #hana .wa-phone-stage{min-width:0}
/* Four original app views from the supplied local PC files. */
.dig #app .app-visual{min-height:690px;max-height:none;padding:64px 20px 176px;isolation:isolate}
.dig #app .phone-primary{height:444px;width:206px;aspect-ratio:auto;margin-top:0;margin-left:100px;border-radius:28px;border-width:6px;transition:none}
.dig #app .phone-primary[data-shape=tablet]{width:250px}
.dig #app .phone-secondary{height:358px;width:170px;aspect-ratio:auto;left:calc(50% - 206px);top:116px;transform:rotate(-7deg);border-radius:24px}
.dig #app .phone-secondary[data-shape=tablet]{width:205px}
.dig #app .app-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.dig #app .app-screen img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* Frame the app viewport; the original tablet screenshot files remain intact. */
.dig #app .screen-tablet img{position:absolute;width:128.125%;max-width:none;height:103.69%;left:-14.0625%;top:-1.93%;object-fit:fill}
.dig #app .app-shot-caption{position:absolute;left:20px;right:20px;bottom:135px;text-align:center;color:var(--navy);font-weight:700;font-size:16px;margin:0}
.dig #app .shot-tabs{bottom:24px;gap:8px;left:24px;right:24px;align-items:stretch}
.dig #app .shot-tab{flex:1;min-width:0;max-width:106px;min-height:92px;border:1px solid transparent;background:#ffffff65;border-radius:12px;padding:8px 4px;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;line-height:1.4;color:var(--muted)}
.dig #app .shot-tab[aria-pressed=true]{background:#fff;border-color:var(--blue-d);box-shadow:0 4px 12px #14222e10;color:var(--blue-d);font-weight:700}
.dig #app .shot-thumb{display:block;width:25px;height:46px;overflow:hidden;border:1px solid #687e87;border-radius:4px;background:#fff}
.dig #app .shot-thumb .screen-tablet{width:100%;height:100%}
/* Fresh September screenshots; preserve their full portrait proportions. */
.dig #app .app-visual{min-height:724px;padding-bottom:196px}
.dig #app .phone-primary{height:464px;width:218px;margin-left:100px}
.dig #app .phone-secondary{height:376px;width:177px;top:104px;left:calc(50% - 186px)}
.dig #app .app-shot-caption{bottom:158px}
.dig #app .shot-tabs{bottom:48px;gap:6px;left:20px;right:20px}
.dig #app .shot-tab{max-width:100px}
.dig #app .app-gallery-note{position:absolute;bottom:16px;left:16px;right:16px;margin:0;text-align:center;font-size:12px;color:var(--muted);line-height:1.4}
/* V6: stronger editorial heading, product choices and onboarding. */
.dig .digital-intro{position:relative;isolation:isolate;padding-top:64px;padding-bottom:52px}
.dig .digital-intro::before{content:'';position:absolute;z-index:-1;inset:0 -30px;background:radial-gradient(ellipse at 50% 18%,#eef9fd 0%,#ffffff00 67%);pointer-events:none}
.dig .digital-intro>.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--blue-d);padding:8px 14px;border:1px solid #c8e3ed;background:#f4fbfe;border-radius:999px;line-height:1;font-size:12px;font-weight:700;letter-spacing:.15em;margin:0 0 22px}
.dig .hero-dot{order:-1;width:6px;height:6px;background:var(--blue-d);border-radius:50%}
.dig .digital-intro h1{font-size:clamp(42px,5vw,68px);line-height:1.05;letter-spacing:-.045em;font-weight:700;max-width:860px;margin:0 auto 22px;color:var(--navy)}
.dig .hero-emphasis{display:block;color:var(--blue-d)}
.dig .digital-lead{max-width:730px;font-size:17px;line-height:1.75;color:var(--muted)}
.dig .product-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:660px;margin:30px auto 0;text-align:left}
.dig .product-nav .product-jump{display:flex;align-items:center;gap:15px;min-height:88px;padding:17px 20px;border:1px solid var(--navy);border-radius:16px;text-decoration:none;background:var(--navy);color:#fff;box-shadow:0 8px 20px #14222e0c;transition:transform .15s,box-shadow .15s}
.dig .product-nav .jump-hana{background:#fff;border-color:#c5ddd3;color:var(--navy)}
.dig .product-jump:hover{transform:translateY(-2px);box-shadow:0 10px 24px #14222e15}
.dig .jump-icon{display:grid;place-items:center;flex:none;height:44px;width:44px;border:1px solid #50606c;border-radius:12px;background:#243745;color:var(--sky)}
.dig .jump-hana .jump-icon{color:#087a5e;border-color:#d8ece3;background:#ecf8f1}
.dig .jump-label{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.dig .jump-label strong{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.015em}
.dig .jump-label small{color:#c2d9e4;font-size:12px;line-height:1.5;font-weight:400}
.dig .jump-hana .jump-label small{color:var(--muted)}
.dig .jump-arrow{display:flex;align-items:center;flex:none;color:#d5e9f3}
.dig .jump-hana .jump-arrow{color:#087a5e}
.dig .jump-arrow svg{width:19px;height:19px}
.dig .v-setup{padding-block:64px 72px}
.dig .setup-panel{padding:42px;border-radius:28px;background:var(--navy);box-shadow:0 16px 40px #14222e0d;position:relative;overflow:hidden}
.dig .setup-heading{margin-bottom:30px;max-width:850px}
.dig .setup-heading>.eyebrow{color:#bdecf8;font-size:12px;letter-spacing:.15em;margin:0 0 14px}
.dig .setup-heading h2{color:white;font-size:40px;line-height:1.15;letter-spacing:-.035em;margin:0}
.dig .setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;margin:0}
.dig .setup-steps>li{display:flex;flex-direction:column;gap:0;min-width:0;padding:24px;background:#fff;border-radius:18px;border:1px solid #dce8ef;color:var(--navy)}
.dig .setup-card-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.dig .step-index{font-size:32px;font-weight:500;line-height:1;color:var(--blue-d);letter-spacing:-.04em}
.dig .setup-icon{height:44px;width:44px;display:grid;place-items:center;border:1px solid #d4e7ef;background:#eef9fd;border-radius:12px;color:var(--blue-d)}
.dig .setup-steps h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:0 0 12px;color:var(--navy)}
.dig .setup-steps p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}
.dig .setup-stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.dig .setup-stores a{display:flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;flex:0 1 auto}
.dig .setup-stores img{height:38px;width:auto;max-width:134px}
.dig .setup-privacy{display:flex;align-items:flex-start;gap:14px;border-top:1px solid #3f5360;padding-top:22px;margin-top:26px}
.dig .setup-privacy>svg{width:22px;height:22px;flex:none;color:#bdecf8;margin-top:2px}
.dig .setup-privacy .privacy-line{font-size:14px;line-height:1.7;color:#c4d8e3;max-width:970px;margin:0}
.dig .digital-intro::before{inset:0}
@media(max-width:1100px){
  .app-copy{padding:32px}
  .app-editorial{grid-template-columns:1.1fr 1fr}
  .app-features{grid-template-columns:1fr;gap:16px}
  .app-visual{min-height:640px}
  .hana-studio{grid-template-columns:270px minmax(0,1fr)}
  .hana-intro{gap:32px}
  .conversation-area{padding-inline:24px}
  .conversation-action{gap:16px;padding-inline:24px}
  .conversation-action>div{max-width:140px}
  .conversation-action .btn{padding-inline:16px}
  .setup-steps{gap:24px}
  .product-heading h2{font-size:24px}
}
@media(max-width:760px){
  .digital-intro{padding-block:40px 32px}
  .digital-intro h1{font-size:40px}
  .digital-lead{font-size:16px}
  .app-editorial{grid-template-columns:1fr}
  .app-copy{padding:28px}
  .app-features{grid-template-columns:1fr 1fr;gap:24px}
  .app-visual{min-height:540px;max-height:540px;padding:48px 20px 76px}
  .phone-primary{width:196px}
  .phone-secondary{width:164px;top:82px;left:calc(50% - 156px)}
  .v-app{padding-bottom:48px}
  .hana-intro{grid-template-columns:1fr;gap:20px}
  .hana-intro h2{font-size:36px}
  .v-hana{padding-block:48px}
  .hana-studio{grid-template-columns:1fr}
  .hana-sidebar{padding:16px 12px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .scenario-tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:8px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .scenario-tab{flex:0 0 218px;width:218px;min-height:72px;scroll-snap-align:start;padding:12px}
  .sidebar-help{display:none}
  .sidebar-label{margin-left:0;margin-bottom:12px}
  .conversation-area{min-height:450px}
  .conversation-head{padding:20px}
  .conversation-action{padding:20px}
  .hana-bottom{grid-template-columns:1fr;gap:16px}
  .setup-steps{grid-template-columns:1fr}
  .v-setup{padding-block:48px}
  .v-setup h2{font-size:32px}
}
@media(max-width:480px){
  .digital-intro h1{font-size:36px;max-width:350px}
  .digital-intro .eyebrow{margin-bottom:16px}
  .product-nav{gap:24px;margin-top:16px}
  .product-nav a{font-size:14px}
  .app-copy{padding:24px}
  .product-heading{gap:12px;align-items:flex-start}
  .product-heading h2{font-size:24px}
  .product-heading .eyebrow{font-size:12px;line-height:1.6}
  .product-icon{height:44px;width:44px}
  .app-features{grid-template-columns:1fr;gap:20px}
  .app-features li{font-size:16px}
  .app-copy .stores{gap:8px}
  .app-copy .stores img{height:44px;max-width:142px}
  .app-visual{min-height:520px}
  .phone-primary{width:190px;margin-left:56px}
  .phone-secondary{width:155px;top:96px;left:calc(50% - 145px)}
  .visual-top{left:20px;right:20px}
  .shot-tab{padding:8px 12px;font-size:14px}
  .v-hana .wrap{padding-inline:16px}
  .hana-intro{padding-inline:4px}
  .hana-intro h2{font-size:36px}
  .hana-studio{border-radius:16px}
  .conversation-head{padding:16px 18px;gap:10px}
  .hana-avatar{width:40px;height:40px;font-size:22px}
  .conversation-head strong{font-size:20px}
  .conversation-head>div>span{font-size:12px}
  .conversation-area{padding:20px 16px 24px;min-height:440px}
  .conversation-caption{font-size:12px;margin-bottom:20px}
  .message{max-width:92%;padding:12px 14px;font-size:16px}
  .conversation-action{display:block;padding:20px}
  .conversation-action>div{max-width:none;margin-bottom:16px}
  .conversation-action .btn{width:100%;min-height:48px}
  .hana-bottom{padding-inline:4px}
  .privacy-line{font-size:14px}
}
@media(max-width:1100px){
  .dig #hana .hana-studio{grid-template-columns:390px minmax(0,1fr);gap:32px}
  .dig #hana .wa-phone-stage{padding:0 12px}
  .dig #hana .hana-intro h2{font-size:38px}
  .dig #hana .conversation-panel{width:350px}
  .dig #hana .scenario-tab{padding-inline:10px;gap:12px}
}
@media(max-width:850px) and (min-width:761px){
  .dig #hana .hana-studio{grid-template-columns:330px minmax(0,1fr);gap:24px}
  .dig #hana .wa-phone-stage{padding:0}
  .dig #hana .wa-header-icons{gap:9px}
  .dig #hana .hana-intro h2{font-size:34px}
  .dig #hana .scenario-name strong{font-size:14px}
}
@media(max-width:760px){
  .dig #hana{padding:48px 0 32px}
  .dig #hana .hana-studio{grid-template-columns:1fr;gap:28px}
  .dig #hana .hana-sidebar{grid-column:1;grid-row:1}
  .dig #hana .hana-intro{margin-bottom:24px}
  .dig #hana .hana-intro h2{font-size:36px}
  .dig #hana .scenario-tabs{flex-direction:row;overflow-x:auto;padding:2px 0 8px;gap:8px}
  .dig #hana .scenario-tab{flex:0 0 240px;width:240px;padding:12px;min-height:74px;background:#fff8;border:1px solid var(--line)}
  .dig #hana .sidebar-help{display:block;margin:10px 0 0}
  .dig #hana .conversation-action{margin-top:20px;padding-top:20px}
  .dig #hana .wa-phone-stage{grid-column:1;grid-row:2;padding:0 4px}
  .dig #hana .conversation-panel{width:364px;height:716px}
  .dig #hana .wa-preview-label{margin-bottom:16px}
  .dig #hana .hana-bottom{margin-top:28px;gap:16px}
  .dig #hana .conversation-head{padding-inline:8px}
  .dig #hana .wa-header-icons{gap:11px}
  .dig #hana .conversation-area{padding-inline:10px}
  .dig #hana .message{max-width:94%}
  .dig #hana .conversation-action .btn{width:100%}
  .dig #hana .conversation-action>div{align-self:center}
}
@media(max-width:760px){
  .dig #hana .hana-studio{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1100px){
  .dig #app .phone-primary{height:410px;width:191px;margin-left:58px}
  .dig #app .phone-primary[data-shape=tablet]{width:232px}
  .dig #app .phone-secondary{height:320px;width:152px;left:calc(50% - 167px);top:132px}
  .dig #app .phone-secondary[data-shape=tablet]{width:183px}
  .dig #app .shot-tabs{left:16px;right:16px;gap:6px}
  .dig #app .app-visual{min-height:675px}
}
@media(max-width:760px){
  .dig #app .app-visual{min-height:655px;max-height:655px}
  .dig #app .phone-primary{height:400px;width:186px;margin-left:62px}
  .dig #app .phone-primary[data-shape=tablet]{width:227px}
  .dig #app .phone-secondary{height:300px;width:142px;left:calc(50% - 171px);top:118px}
  .dig #app .phone-secondary[data-shape=tablet]{width:171px}
  .dig #app .app-shot-caption{bottom:132px}
}
@media(max-width:420px){
  .dig #app .app-visual{min-height:595px;max-height:595px;padding-top:52px}
  .dig #app .phone-primary{height:346px;width:163px;margin-left:60px;border-radius:23px;border-width:5px}
  .dig #app .phone-primary[data-shape=tablet]{width:197px}
  .dig #app .phone-secondary{height:262px;width:125px;left:calc(50% - 143px);top:105px;border-radius:21px;border-width:4px}
  .dig #app .phone-secondary[data-shape=tablet]{width:150px}
  .dig #app .shot-tabs{left:10px;right:10px;gap:4px}
  .dig #app .shot-tab{font-size:12px}
  .dig #app .app-shot-caption{font-size:14px;bottom:133px}
}
@media(max-width:1100px){
  .dig #app .phone-primary{height:430px;width:202px;margin-left:90px}
  .dig #app .phone-secondary{height:344px;width:163px;left:calc(50% - 161px);top:112px}
  .dig #app .app-visual{min-height:705px}
  .dig #app .shot-tabs{left:12px;right:12px;gap:4px}
}
@media(max-width:760px){
  .dig #app .app-visual{min-height:694px;max-height:694px}
  .dig #app .phone-primary{height:426px;width:200px;margin-left:90px}
  .dig #app .phone-secondary{height:336px;width:159px;top:104px;left:calc(50% - 165px)}
  .dig #app .app-shot-caption{bottom:158px}
}
@media(max-width:420px){
  .dig #app .app-visual{min-height:637px;max-height:637px}
  .dig #app .phone-primary{height:364px;width:171px;margin-left:80px}
  .dig #app .phone-secondary{height:294px;width:139px;left:calc(50% - 141px);top:92px}
  .dig #app .shot-tabs{left:8px;right:8px;gap:3px}
  .dig #app .shot-tab{padding-inline:2px}
  .dig #app .app-shot-caption{font-size:14px;bottom:156px}
  .dig #app .app-gallery-note{left:8px;right:8px;font-size:12px}
}
@media(max-width:1100px){
  .dig .setup-panel{padding:32px}
  .dig .setup-steps>li{padding:20px}
  .dig .setup-steps h3{font-size:21px}
  .dig .setup-stores{flex-direction:column;align-items:start}
}
@media(max-width:860px){
  .dig .setup-steps{grid-template-columns:1fr}
  .dig .setup-steps>li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:20px;padding:24px}
  .dig .setup-card-top{flex-direction:column;gap:14px;justify-content:flex-start;margin:0}
  .dig .setup-stores{grid-column:2;margin-top:0;flex-direction:row}
  .dig .setup-heading h2{font-size:36px}
  .dig .setup-steps h3{font-size:23px}
}
@media(max-width:760px){
  .dig .digital-intro{padding-top:42px;padding-bottom:36px}
  .dig .digital-intro::before{inset:0}
  .dig .digital-intro h1{font-size:48px}
  .dig .digital-lead{font-size:16px}
  .dig .product-nav{gap:10px;margin-top:24px}
  .dig .product-nav .product-jump{padding:16px;gap:12px}
  .dig .jump-label strong{font-size:17px}
  .dig .jump-arrow{display:none}
  .dig .v-setup{padding-block:40px}
  .dig .setup-panel{padding:28px}
  .dig .setup-heading{margin-bottom:24px}
}
@media(max-width:560px){
  .dig .product-nav{grid-template-columns:1fr;max-width:390px;text-align:left}
  .dig .product-nav .product-jump{min-height:80px;padding:15px 18px;gap:14px;border-radius:14px}
  .dig .jump-arrow{display:flex}
  .dig .jump-label strong{font-size:18px}
  .dig .digital-intro h1{font-size:44px;max-width:390px;margin-bottom:20px}
  .dig .digital-intro>.eyebrow{margin-bottom:20px}
  .dig .setup-panel{padding:24px 18px;border-radius:22px}
  .dig .setup-heading h2{font-size:34px}
  .dig .setup-steps>li{grid-template-columns:1fr;padding:22px;gap:0;border-radius:15px}
  .dig .setup-card-top{flex-direction:row;justify-content:space-between;margin-bottom:22px}
  .dig .setup-stores{grid-column:1;margin-top:20px;gap:6px}
  .dig .setup-stores img{height:34px;max-width:118px}
  .dig .setup-privacy{gap:10px}
  .dig .setup-privacy .privacy-line{font-size:14px}
  .dig .setup-privacy>svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  .dig .product-jump{transition:none}
}
/* Google attribution mark — official four-colour G, inline so no external request and no CSP exception. */
.gmark{flex:none;vertical-align:-.18em}
.eyebrow--g{display:flex;align-items:center;gap:8px}
.hero__facts--g .gmark{margin-right:5px}

/* Hana's real WhatsApp profile picture fills the chat avatar. */
.hana-avatar{overflow:hidden;padding:0}
.hana-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* "Powered by kliniX". The brand set reserves the dark chip field for LIGHT
   backgrounds — two of the four capsules are near-white and vanish on paper.
   Our footer is already navy, so the lockup sits straight on it. */
.klinix{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  opacity:.82;transition:opacity .2s;min-height:44px}
.klinix:hover,.klinix:focus-visible{opacity:1}
.klinix span{font:700 .95rem/1 var(--head);letter-spacing:.03em}
.klinix svg{flex:none}
.klinix--chip{background:#0b0c0b;color:#f4f6f1;border-radius:9px;padding:5px 8px;min-height:0}
.footer__powered{display:inline-flex;align-items:center}

/* Live queue, inside the duty header — same box, same question: do I go now?
   Reads as a chip beside the doctor count, not a card bolted on above it. */
.duty__chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;align-items:center}
.duty__q{display:inline-flex;align-items:baseline;gap:8px;margin:0;flex:none;
  font:700 .9rem var(--head);border-radius:999px;padding:9px 16px;border:1px solid}
.duty__q::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;align-self:center}
.duty__q em{font-style:normal;font-weight:400;font-size:.82rem;opacity:.85}
.duty__q--quiet{color:#0b7a3b;background:#e9f8ef;border-color:#b6e4c8}
.duty__q--quiet::before{background:#22c55e}
.duty__q--moderate{color:#8a6100;background:#fff7e3;border-color:#f0dcae}
.duty__q--moderate::before{background:#e0a800}
.duty__q--busy{color:#a83c25;background:#fdeee9;border-color:#f3c9bb}
.duty__q--busy::before{background:#e2603f}
@media (max-width:560px){
  .duty__chips{justify-content:flex-start;width:100%}
  .duty__q{font-size:.85rem;padding:8px 13px}
}

/* ===== Motion & hover system — 24 Sep 2026 (Faiz: "animated sket, hovering ada effect, ensure all") =====
   - Motion is transform/opacity only: nothing shifts layout.
   - The scroll reveal uses the `translate` property inside a keyframe, so it never fights the `transform`
     and `transition` rules that hover effects use.
   - Nothing is hidden without JS (.mo is added by site.js) and everything is off under reduced motion.
   - Cards that are NOT links get a gentle border/shadow change only — no pointer, no lift — so they don't
     pretend to be clickable. Link cards lift. Checked by ops/audit/hover_audit.mjs. */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
@keyframes rvUp{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.mo .rv{opacity:0}
.mo .rv.in{animation:rvUp .7s var(--ease) both;animation-delay:var(--rvd,0ms)}
@media print{.mo .rv{opacity:1!important;animation:none!important}}

.header{transition:box-shadow .25s}
.header.is-scrolled{box-shadow:0 6px 24px rgba(20,34,46,.08)}

/* text links */
.link,.crumbs a,.reviewed a,.pricechip a,.aside__hours a,.form__note a,.betabar a,main p a:not(.btn),main li a:not(.btn){transition:color .2s,text-decoration-color .2s}
.link:hover,.crumbs a:hover,.reviewed a:hover,.pricechip a:hover,.aside__hours a:hover,.form__note a:hover,.betabar a:hover,main p a:not(.btn):hover,main li a:not(.btn):hover{color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* logo */
.brand{transition:opacity .2s}
.brand__logo{transition:transform .3s var(--ease)}
.brand:hover{opacity:.9}
.brand:hover .brand__logo{transform:scale(1.03)}

/* tabs */
.duty__tab{transition:background .2s,color .2s,border-color .2s}
.duty__tab:hover:not([aria-pressed=true]){background:#fff;color:var(--navy);border-color:var(--line)}
.dig #app .shot-tab{transition:background .2s,border-color .2s,color .2s}
.dig #app .shot-tab:hover:not([aria-pressed=true]){background:#fff;border-color:var(--line);color:var(--navy)}
.scenario-tab{transition:background .2s,border-color .2s,color .2s}

/* disclosure rows */
details>summary{transition:color .2s,background .2s}
details>summary:hover{color:var(--blue-d)}
.faq summary:hover{background:var(--sky-l)}

/* form controls */
.form input,.form select,.form textarea{transition:border-color .2s,box-shadow .2s}
.form input:hover,.form select:hover,.form textarea:hover{border-color:#a9d3e4}

/* buttons: press feedback on top of the existing hover lift */
.btn:active{transform:translateY(0) scale(.98)}

/* link cards */
a.info{transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
a.info:hover{box-shadow:0 10px 26px rgba(20,34,46,.08);transform:translateY(-2px)}

/* WhatsApp float: two soft rings shortly after load, then still */
@keyframes waRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.mo .wafab{animation:waRing 1.6s ease-out 2.5s 2}

@media (hover:hover){
  .fx__c,.diffc__c,.feature,.pstat,.fx__pay li,.fx__chips li{transition:border-color .25s,box-shadow .25s}
  .fx__c:hover,.diffc__c:hover,.feature:hover,.pstat:hover{border-color:#cde9f3;box-shadow:0 12px 30px rgba(20,34,46,.08)}
  .fx__c--park:hover{border-color:#b7dff0}
  .fx__chips li:hover{border-color:#cde9f3}
  .whyc__c{transition:background .25s,border-color .25s}
  .whyc__c:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
  .fx__svg,.fx__art{transition:transform .3s var(--ease)}
  .fx__c:hover .fx__ico .fx__svg,.fx__c:hover .fx__art,.diffc__c:hover .fx__svg,.whyc__c:hover .fx__svg,.feature--ico:hover .fx__svg,.fx__pay li:hover .fx__svg{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.app-more summary:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}

/* ===== Motion level 2 — 24 Sep 2026 (Faiz: "animated kan website mcm lari") ===== */
main{overflow-x:clip}   /* a block sliding in from the side must never open a horizontal scrollbar */
/* hero and every page head arrive in steps on load (pure CSS: runs without JS, ends visible) */
@keyframes heroUp{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.hero--slides .hero__pills,.hero--slides h1,.hero--slides .lead,.hero--slides .btnrow,.hero--slides .hero__facts,
.pagehead .crumbs,.pagehead h1,.pagehead p{animation:heroUp .8s var(--ease) both}
.hero--slides h1,.pagehead h1{animation-delay:.12s}
.hero--slides .lead,.pagehead p{animation-delay:.26s}
.hero--slides .btnrow{animation-delay:.4s}
.hero--slides .hero__facts{animation-delay:.55s}
.hero__facts strong{font-variant-numeric:tabular-nums}
/* stronger scroll reveal: split sections come in from their side, cards pop up */
@keyframes rvL{from{opacity:0;translate:-36px 0}to{opacity:1;translate:0 0}}
@keyframes rvR{from{opacity:0;translate:36px 0}to{opacity:1;translate:0 0}}
@keyframes rvPop{from{opacity:0;translate:0 28px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.mo .rv.in{animation-duration:.8s}
.mo .rv.in.rv--l{animation-name:rvL}
.mo .rv.in.rv--r{animation-name:rvR}
.mo .rv.in.rv--pop{animation-name:rvPop}
@media (max-width:700px){.mo .rv.in.rv--l,.mo .rv.in.rv--r{animation-name:rvUp}}
/* panel logos run across the page; hover pauses them and brings the colour back */
.marq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px}
.marq-head h2{margin:0}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq__track{display:flex;width:max-content;list-style:none;margin:0;padding:8px 0;animation:marq 70s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq__track li{flex:none;width:184px;height:104px;margin-right:18px;display:grid;place-items:center;padding:10px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .25s,box-shadow .25s,transform .3s var(--ease)}
.marq__track li:hover{border-color:var(--blue);box-shadow:0 14px 30px rgba(20,34,46,.12);transform:translateY(-4px)}
.marq__img{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain;filter:grayscale(.55);opacity:.95;transition:filter .3s,opacity .3s,transform .35s var(--ease)}
.marq__track li:hover .marq__img{filter:none;opacity:1;transform:scale(1.14)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:640px){.marq__track li{width:140px;height:84px;margin-right:12px}.marq__img{max-height:58px}.marq__track{animation-duration:55s}}
@media (prefers-reduced-motion:reduce){
  .marq{-webkit-mask-image:none;mask-image:none}
  .marq__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:12px}
  .marq__track li{margin-right:0}
  .marq__track li[aria-hidden]{display:none}
}