/* Medvexis marketing site: shared design system.
   Every page on medvexis.co.za links this file, and the nav/footer come from
   site.js, so the header and footer are identical everywhere by construction. */

:root {
  --bg: #050816;
  --panel: rgba(255,255,255,0.05);
  --panel-2: rgba(255,255,255,0.035);
  --line: rgba(255,255,255,0.09);
  --line-hover: rgba(139,208,255,0.26);
  --text: #f5f7fb;
  --muted: #a7b0c5;
  --muted-2: #7b859d;
  --blue: #5b8cff;
  --blue-2: #8bd0ff;
  --green: #28d17c;
  --green-2: #5be0a8;
  --amber: #f5b84b;
  --danger: #ff6b6b;
  --white: #fff;
  --max: 1140px;
  --section-pad: clamp(3.5rem, 7vw, 6rem);
  --logo-h: 44px;
  --logo-h-footer: 32px;
  /* One accent per audience, used for its card, chart colour and CTA. */
  --a-practice: #5b8cff;
  --a-patient: #28d17c;
  --a-doctor: #8bd0ff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#050816}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:radial-gradient(circle at 15% 20%,rgba(91,140,255,0.16),transparent 28%),radial-gradient(circle at 85% 12%,rgba(139,208,255,0.08),transparent 24%),linear-gradient(180deg,#050816 0%,#08101e 50%,#050816 100%);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
img,svg{max-width:100%}
img{display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 2rem));margin:0 auto}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:12px}

.site{position:relative;z-index:1}
.section{padding:var(--section-pad) 0}
section[id]{scroll-margin-top:96px}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(91,140,255,0.18),transparent);margin:0 auto;max-width:640px}

/* ── Type ─────────────────────────────────────────────────────────────── */
.kicker{display:inline-block;font-size:0.74rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#bdd7ff;margin-bottom:0.8rem}
.h1{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-0.055em;font-weight:800}
.h1 .soft{display:block;color:rgba(255,255,255,0.55);font-weight:700}
.h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-0.045em;font-weight:780;max-width:22ch}
.lead{margin-top:1rem;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.7;color:var(--muted);max-width:56ch}
.lead strong{color:var(--white);font-weight:600}
.section-head{max-width:720px}
.section-head.center{margin:0 auto;text-align:center}
.section-head.center .h2,.section-head.center .lead{margin-left:auto;margin-right:auto}
.tier-link{color:var(--blue-2);font-weight:700;text-decoration:underline;text-decoration-color:rgba(139,208,255,0.35);text-underline-offset:3px}
.tier-link:hover{color:var(--white)}

/* ── Buttons (do not add one-off button styles) ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;min-height:48px;padding:0 1.3rem;border-radius:999px;border:1px solid transparent;cursor:pointer;font-weight:600;font-size:0.94rem;line-height:1;white-space:nowrap;font-family:inherit;transition:all 0.2s}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-lg{min-height:54px;padding:0 1.8rem;font-size:1rem}
.btn-primary{color:var(--white);background:linear-gradient(135deg,#4e7cff,#79c8ff);box-shadow:0 16px 40px rgba(91,140,255,0.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 20px 50px rgba(91,140,255,0.32)}
.btn-outline{color:var(--white);background:rgba(255,255,255,0.04);border-color:var(--line)}
.btn-outline:hover{border-color:var(--line-hover);background:rgba(255,255,255,0.07);transform:translateY(-1px)}
.btn-patient{color:var(--white);background:linear-gradient(135deg,#22c476,#5be0a8);box-shadow:0 16px 40px rgba(40,209,124,0.25)}
.btn-patient:hover{transform:translateY(-1px);box-shadow:0 20px 50px rgba(40,209,124,0.32)}
.btn[disabled]{opacity:0.6;cursor:not-allowed;transform:none}
.link-arrow{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.88rem;font-weight:700;color:var(--blue-2)}
.link-arrow:hover{color:var(--white)}

/* ── Global nav: identical on every page, always solid, always sticky ─── */
.site-nav{position:sticky;top:0;z-index:300;padding:0.6rem 0 0}
.site-nav .nav-shell{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.55rem 0.7rem 0.55rem 1.1rem;background:rgba(8,14,30,0.9);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:999px;box-shadow:0 10px 40px rgba(0,0,0,0.28)}
.site-nav .brand{display:flex;align-items:center;flex-shrink:0}
.site-nav .brand img{height:var(--logo-h);width:auto;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:0.2rem;margin:0 auto}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border-radius:999px;color:var(--muted);font-size:0.9rem;font-weight:600;white-space:nowrap;transition:color 0.2s,background 0.2s}
.nav-link:hover{color:var(--white);background:rgba(255,255,255,0.05)}
.nav-link[aria-current="page"]{color:var(--white);background:rgba(255,255,255,0.08)}
.nav-link .dot{width:7px;height:7px;border-radius:50%;margin-right:0.5rem;background:var(--dot,var(--blue))}
.nav-actions{display:flex;align-items:center;gap:0.4rem;flex-shrink:0}
.nav-signin{display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);color:var(--text);font-size:0.88rem;font-weight:600;white-space:nowrap;transition:all 0.2s}
.nav-signin:hover{border-color:var(--line-hover);background:rgba(255,255,255,0.05)}
.nav-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 1.15rem;border-radius:999px;background:linear-gradient(135deg,#4e7cff,#79c8ff);color:#fff;font-size:0.88rem;font-weight:700;white-space:nowrap;box-shadow:0 10px 28px rgba(91,140,255,0.25);transition:all 0.2s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(91,140,255,0.32)}
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,0.05);color:var(--white);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.nav-toggle svg{width:20px;height:20px}
.nav-menu{display:none;margin-top:0.5rem;padding:0.6rem;border-radius:24px;background:rgba(8,14,30,0.96);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.nav-menu.is-open{display:block}
.nav-menu a{display:flex;align-items:center;min-height:48px;padding:0 1rem;border-radius:16px;font-size:0.98rem;font-weight:600;color:var(--text)}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{background:rgba(255,255,255,0.07)}
.nav-menu .nav-menu-cta{margin-top:0.4rem;justify-content:center;background:linear-gradient(135deg,#4e7cff,#79c8ff);color:#fff;font-weight:700}
/* The full header (links, Sign in and the demo button) needs about 1130px; below 1180px it collapses to the menu button so nothing runs off the screen. */
@media(max-width:1180px){
  .nav-links,.nav-actions .nav-signin{display:none}
  .nav-toggle{display:inline-flex}
}
@media(max-width:900px){
  .site-nav .brand img{height:38px}
}
@media(max-width:420px){.nav-actions .nav-cta{display:none}}

/* ── Cards, tiles, chips ──────────────────────────────────────────────── */
.card{padding:1.6rem;border-radius:24px;background:var(--panel);border:1px solid var(--line)}
.icon-badge{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent,var(--blue)) 16%,transparent);color:var(--accent,var(--blue-2));flex-shrink:0}
.icon-badge svg{width:22px;height:22px}
.chip{display:inline-flex;align-items:center;gap:0.4rem;padding:0.35rem 0.75rem;border-radius:999px;font-size:0.76rem;font-weight:700;letter-spacing:0.02em;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,0.03)}
.chip.is-green{color:#9af0c8;border-color:rgba(40,209,124,0.35);background:rgba(40,209,124,0.08)}
.chip.is-blue{color:#bcd4ff;border-color:rgba(91,140,255,0.4);background:rgba(91,140,255,0.1)}
.check-list{display:flex;flex-direction:column;gap:0.65rem;list-style:none}
.check-list li{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.92rem;line-height:1.5;color:var(--muted)}
.check-list svg{width:16px;height:16px;margin-top:3px;flex-shrink:0;color:var(--accent,var(--blue-2))}

/* Stat tiles */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.9rem}
.stat{padding:1.3rem 1.2rem;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.stat .num{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-0.05em;line-height:1;background:linear-gradient(135deg,#fff,var(--stat-c,#8bd0ff));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{display:block;margin-top:0.5rem;font-size:0.84rem;line-height:1.4;color:var(--muted)}
@media(max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Charts ───────────────────────────────────────────────────────────── */
.donut{position:relative;width:clamp(150px,22vw,200px);aspect-ratio:1;flex-shrink:0}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:16;transition:stroke-dasharray 0.9s cubic-bezier(0.16,1,0.3,1),stroke-dashoffset 0.9s cubic-bezier(0.16,1,0.3,1)}
.donut .track{stroke:rgba(255,255,255,0.07)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-center b{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-0.04em}
.donut-center span{font-size:0.72rem;color:var(--muted);margin-top:2px}
.legend{display:flex;flex-direction:column;gap:0.6rem;font-size:0.86rem;color:var(--muted)}
.legend div{display:flex;align-items:center;gap:0.6rem}
.legend i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend b{color:var(--white);font-weight:700;margin-left:auto;padding-left:0.8rem;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.bar-row{margin-bottom:1rem}
.bar-row .bar-label{display:flex;justify-content:space-between;gap:1rem;font-size:0.84rem;color:var(--muted);margin-bottom:0.4rem}
.bar-row .bar-label b{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums}
.bar-track{height:12px;border-radius:999px;background:rgba(255,255,255,0.07);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:999px;background:var(--bar,var(--blue));transition:width 0.9s cubic-bezier(0.16,1,0.3,1)}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:0.7rem;margin-top:2rem;max-width:780px}
.faq-item{border-radius:18px;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:border-color 0.2s}
.faq-item[open]{border-color:var(--line-hover)}
.faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 1.35rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:0.98rem;font-weight:650;letter-spacing:-0.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--line);position:relative;transition:transform 0.25s,background 0.2s}
.faq-plus::before,.faq-plus::after{content:'';position:absolute;top:50%;left:50%;background:var(--muted);border-radius:2px;transform:translate(-50%,-50%)}
.faq-plus::before{width:9px;height:1.5px}
.faq-plus::after{width:1.5px;height:9px}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:rgba(91,140,255,0.14)}
.faq-answer{padding:0 1.35rem 1.25rem;font-size:0.92rem;line-height:1.75;color:var(--muted);max-width:64ch}

/* ── Contact form ─────────────────────────────────────────────────────── */
.contact-shell{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;margin-top:2rem}
.contact-form{padding:clamp(1.5rem,3vw,2.1rem);border-radius:24px;background:var(--panel);border:1px solid var(--line)}
.form-row{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1.05rem}
.form-row label{font-size:0.82rem;font-weight:650;color:var(--muted)}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:0.75rem 0.9rem;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid var(--line);color:var(--white);font-family:inherit;font-size:0.92rem;transition:border-color 0.2s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--line-hover)}
.form-row textarea{resize:vertical;min-height:110px;line-height:1.6}
.form-row select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b0c5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.9rem center}
.form-row select option{color:#12182b;background:#fff}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:0.9rem;padding:0.85rem 1rem;border-radius:12px;font-size:0.88rem;line-height:1.6;display:none}
.form-status.is-success{display:block;background:rgba(40,209,124,0.1);border:1px solid rgba(40,209,124,0.3);color:#8ff0c4}
.form-status.is-error{display:block;background:rgba(255,107,107,0.1);border:1px solid rgba(255,107,107,0.3);color:#ffb3b3}
.contact-side-item{display:flex;gap:0.8rem;align-items:flex-start;margin-bottom:1.3rem}
.contact-side-item svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--blue-2)}
.contact-side-item p{font-size:0.9rem;line-height:1.65;color:var(--muted)}
.contact-side-item strong{color:var(--white);font-weight:600;display:block;margin-bottom:0.15rem}
@media(max-width:820px){.contact-shell{grid-template-columns:1fr}.form-row-2{grid-template-columns:1fr}}

/* ── Footer: identical on every page ──────────────────────────────────── */
.site-footer{padding:3rem 0 2.5rem;margin-top:1rem}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.footer-brand img{height:var(--logo-h-footer);width:auto;margin-bottom:0.8rem}
.footer-brand p.footer-slogan{color:var(--white);font-weight:600;font-size:0.98rem;line-height:1.5;max-width:26ch;margin-bottom:0.55rem}
.footer-brand p{color:var(--muted);line-height:1.7;font-size:0.88rem;max-width:34ch}
.footer-col h4{font-size:0.74rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#bdd7ff;margin-bottom:0.9rem}
.footer-col a,.footer-col span{display:block;font-size:0.88rem;color:var(--muted);padding:0.22rem 0}
.footer-col a:hover{color:var(--white)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.6rem;margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:0.8rem;color:var(--muted-2)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}

/* ── Reveal on scroll (content is always visible without JS) ──────────── */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.js .reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ── Legal / long-form pages ──────────────────────────────────────────── */
.legal{padding:clamp(2rem,5vw,4rem) 0 3rem}
.legal .container{width:min(780px,calc(100% - 2rem))}
.legal h1{font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-0.05em;font-weight:800;margin-bottom:0.5rem}
.legal .updated{color:var(--muted-2);font-size:0.88rem;margin-bottom:2rem}
.legal h2{font-size:1.25rem;font-weight:700;margin:2.2rem 0 0.7rem;letter-spacing:-0.02em}
.legal h3{font-size:1.02rem;font-weight:700;margin:1.4rem 0 0.5rem}
.legal p,.legal li{color:var(--muted);line-height:1.75;font-size:0.96rem}
.legal p{margin-bottom:0.9rem}
.legal ul,.legal ol{margin:0 0 1rem 1.3rem}
.legal a{color:var(--blue-2);font-weight:600}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;font-size:0.9rem;display:block;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.legal th,.legal td{padding:0.8rem 0.9rem;text-align:left;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.legal th{color:var(--white);font-weight:700;background:rgba(255,255,255,0.04)}