/* Shared structure + motion for the sections every variant carries (media, payment, Q&A, newsletter).
   COLOUR-FREE by rule: every colour is a --x-* token that each variant maps onto its own palette (so D's dark theme just works).
   Motion is progressive: nothing is hidden unless boot.js AND site.js both ran; "prefers-reduced-motion" switches all of it off. */
.section-intro{max-width:66ch}
/* ---------- scroll reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
html.js .reveal.is-in{opacity:1;transform:none}
/* ---------- hero entrance (staggered) ---------- */
@keyframes kf-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kf-fade{from{opacity:0}to{opacity:1}}
@keyframes kf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes kf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes kf-sheen{from{background-position:-160% 0}to{background-position:260% 0}}
html.js .hero-copy>*{animation:kf-rise .8s cubic-bezier(.2,.7,.2,1) both}
html.js .hero-copy>*:nth-child(2){animation-delay:.08s}html.js .hero-copy>*:nth-child(3){animation-delay:.16s}html.js .hero-copy>*:nth-child(4){animation-delay:.24s}html.js .hero-copy>*:nth-child(5){animation-delay:.32s}
html.js .hero-art,html.js .hero-side,html.js .elig{animation:kf-fade 1s ease .25s both}
/* ---------- hover / press feedback ---------- */
.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.14)}.btn:active{transform:translateY(0);box-shadow:none}
.card,.panel,.media-card,.pay-card,.steps li,.trust li,.serve-list li{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.media-card:hover,.pay-card:hover,.steps li:hover,.trust li:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.10)}
.faq summary{transition:color .2s ease}.faq[open]>p{animation:kf-rise .35s ease both}
/* ---------- media ---------- */
.media-hero{position:relative;border-radius:var(--x-radius);overflow:hidden;background:var(--x-soft);margin:0 0 22px;aspect-ratio:16/9;box-shadow:0 18px 50px rgba(0,0,0,.16)}
.media-video{display:block;width:100%;height:100%;object-fit:cover}
.video-toggle{position:absolute;right:14px;bottom:14px;min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid var(--x-on-accent);background:var(--x-accent);color:var(--x-on-accent);font:inherit;font-weight:600;cursor:pointer}
.media-grid{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.media-card{background:var(--x-surface);border:1px solid var(--x-line);border-radius:var(--x-radius);overflow:hidden;display:flex;flex-direction:column}
.media-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.media-card:hover img{transform:scale(1.05)}
.media-body{padding:18px 20px 20px}.media-body h3{margin:0 0 6px;font-size:1.12rem}.media-body p{margin:0;color:var(--x-muted);font-size:1rem}
/* ---------- payment ---------- */
.pay-grid{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pay-card{background:var(--x-surface);border:1px solid var(--x-line);border-top:4px solid var(--x-accent);border-radius:var(--x-radius);padding:24px}
.pay-card h3{margin:12px 0 6px}.pay-card p{margin:0;color:var(--x-muted);font-size:1rem}
.pay-icon{display:block;width:46px;height:32px;border-radius:7px;background:var(--x-accent);position:relative}
.pay-icon::before{content:"";position:absolute;left:0;right:0;top:7px;height:6px;background:var(--x-on-accent);opacity:.85}
.pay-icon::after{content:"";position:absolute;left:7px;bottom:6px;width:14px;height:5px;border-radius:2px;background:var(--x-on-accent);opacity:.85}
.pay-medicare .pay-icon::before{top:50%;left:50%;right:auto;width:22px;height:6px;transform:translate(-50%,-50%)}
.pay-medicare .pay-icon::after{left:50%;bottom:auto;top:50%;width:6px;height:22px;border-radius:0;transform:translate(-50%,-50%)}
.pay-selfpay .pay-icon{border-radius:50%;width:38px;height:38px}.pay-selfpay .pay-icon::before{top:50%;left:50%;right:auto;width:4px;height:22px;transform:translate(-50%,-50%)}
.pay-selfpay .pay-icon::after{left:50%;bottom:auto;top:50%;width:16px;height:16px;border-radius:50%;background:transparent;border:3px solid var(--x-on-accent);transform:translate(-50%,-50%)}
/* ---------- Q&A ---------- */
.qa-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:12px 40px;margin-bottom:26px}
.qa-group>h3{margin:18px 0 6px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--x-muted)}
.qa-section .faq{border-top:1px solid var(--x-line);padding:4px 0}.qa-section .faq:last-of-type{border-bottom:1px solid var(--x-line)}
.qa-section .faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;padding:13px 40px 13px 0;list-style:none;position:relative;min-height:44px}
.qa-section .faq summary::-webkit-details-marker{display:none}
.qa-section .faq summary::after{content:"+";position:absolute;right:6px;top:7px;font-size:1.6rem;line-height:1;color:var(--x-accent-ink);transition:transform .25s ease}
.qa-section .faq[open] summary::after{transform:rotate(45deg)}
.qa-section .faq p{margin:0 0 16px;color:var(--x-muted)}.qa-cta{margin:0}
/* ---------- newsletter band ---------- */
.newsletter{background:var(--x-accent);color:var(--x-on-accent);padding:56px 0;position:relative;overflow:hidden}
.newsletter::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);background-size:220% 100%;animation:kf-sheen 9s linear infinite;pointer-events:none}
.nl-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;position:relative}@media(max-width:860px){.nl-grid{grid-template-columns:1fr}}
.newsletter h2{color:var(--x-on-accent);margin-bottom:.35em}.newsletter p{color:var(--x-on-accent)}
.nl-form{display:grid;gap:12px}.nl-form label{color:var(--x-on-accent)}.nl-form .hint{color:var(--x-on-accent);opacity:.9}
.nl-form input[type=email],.nl-form input[type=text]{background:var(--x-surface);color:var(--x-ink);border:2px solid transparent}
.nl-form input:focus{border-color:var(--x-on-accent)}
.nl-form .btn{background:var(--x-on-accent);color:var(--x-accent);border-color:var(--x-on-accent);justify-self:start}
.nl-form .form-status,.nl-form .form-status.is-ok,.nl-form .form-status.is-err{color:var(--x-on-accent)}
.nl-form :focus-visible{outline-color:var(--x-on-accent)}
/* ---------- all motion off on request ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover,.media-card:hover,.pay-card:hover,.steps li:hover,.trust li:hover,.media-card:hover img{transform:none}
}

/* ---- the BASE version (variant E): data-motion="off" — nothing animates, nothing transitions, nothing scrolls smoothly. boot.js is not even loaded,
   so html.js is never set and no element is ever hidden waiting for a reveal. This rule is the belt to that brace. ---- */
html[data-motion="off"],html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"] .reveal{opacity:1!important;transform:none!important}
.media-still img{display:block;width:100%;height:auto}