@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* =====================================================================
   BetaDocta — Continental Telehealth Design System
   ---------------------------------------------------------------------
   COLOR STRATEGY — the 60 / 30 / 10 rule  (fresh, distinctive palette)
     60%  DOMINANT : soft porcelain / mist neutrals (--bg, --surface)
     30%  SECONDARY: deep clinical teal family (--green-* token names) —
                     headers, footer, primary surfaces, buttons, blocks
     10%  ACCENT   : warm coral (--accent*) — emphasis, active states,
                     eyebrows, key highlights (a human, African-sunset warmth)

   Teal communicates clinical trust and calm; coral adds human warmth.
   Token NAMES are kept (--green-*) for compatibility; their VALUES are
   the new teal ramp, so every page re-skins from this one place.

   DESIGN PRINCIPLES: balance, contrast, unity, repetition, pattern,
   rhythm, movement, proportion, harmony — applied throughout.
   ===================================================================== */

:root{
  /* 60% — dominant porcelain / mist neutrals */
  --bg:#eef2f3;
  --paper:#f6f9fa;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,.74);

  /* 30% — secondary deep clinical-teal ramp (kept under --green-* names) */
  --green-900:#06262b;
  --green-800:#0a3942;
  --green-700:#0e4f5a;
  --green-600:#106877;
  --green-500:#138697;
  --green-400:#28a6b6;
  --green-300:#8fd0d8;

  /* 10% — warm coral accent */
  --accent:#ff6f5e;
  --accent-600:#ed5746;
  --accent-300:#ffb0a4;
  --accent-soft:#ffe7e2;

  /* supporting tones (used minimally) */
  --info:#2b6cb0;
  --danger:#c0392b;
  --danger-soft:#fbe6e3;

  /* ink */
  --text:#10242a;
  --muted:#54686e;
  --line:#dde6e8;
  --line-strong:#c6d3d6;

  /* depth — cool tinted shadows for unity */
  --shadow:0 26px 60px -28px rgba(6,38,43,.34);
  --shadow-sm:0 12px 30px -18px rgba(6,38,43,.26);
  --shadow-gold:0 18px 40px -20px rgba(237,87,70,.42);

  /* geometry — repetition + proportion */
  --radius:26px;
  --radius-sm:16px;
  --radius-xs:11px;
  --max:1200px;

  /* rhythm — spacing scale */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:72px;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  line-height:1.62;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  /* PATTERN: soft mist gradients + faint grid */
  background:
    radial-gradient(circle at 88% -4%, rgba(19,134,151,.10), transparent 34%),
    radial-gradient(circle at 2% 102%, rgba(255,111,94,.09), transparent 36%),
    radial-gradient(rgba(14,79,90,.045) 1px, transparent 1px),
    var(--bg);
  background-size:auto,auto,24px 24px,auto;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

h1,h2,h3,h4,.plan-price{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}

.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}

/* ---------- Top utility bar (SECONDARY 30% block) ---------- */
.topbar{
  background:linear-gradient(100deg,var(--green-900),var(--green-700));
  color:#e9fbfd;font-size:.9rem;position:relative;overflow:hidden
}
.topbar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -40%,rgba(255,111,94,.25),transparent 40%);pointer-events:none}
.topbar .inner{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:9px 0;position:relative;z-index:1}
.topbar .center{text-align:center;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .right{text-align:right;display:flex;justify-content:flex-end}
.notice-danger{color:#fff;background:rgba(255,111,94,.22);border:1px solid rgba(255,176,164,.45);padding:6px 14px;border-radius:999px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-size:.82rem;line-height:1}

/* ---------- Header / nav ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,238,.82);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid rgba(214,204,181,.7)
}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:18px}
.brand{display:flex;align-items:center;gap:14px;font-weight:800}
.brand span{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;white-space:nowrap}
.brand-mark{
  width:50px;height:50px;border-radius:16px;
  background:linear-gradient(150deg,var(--green-700),var(--green-500));
  color:#fff;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden
}
/* ACCENT 10%: a single gold spark on the mark */
.brand-mark::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);right:-3px;top:-3px;box-shadow:0 0 0 3px var(--surface)}
.brand small{display:block;font-size:.74rem;font-weight:600;color:var(--muted);font-family:var(--font-body);letter-spacing:0}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{font-weight:600;color:#1d4a52;padding:9px 14px;border-radius:999px;transition:.2s ease;position:relative}
.nav-links a:hover{background:rgba(19,134,151,.1);color:var(--green-700)}
.nav-links a.active{color:var(--green-800)}
.nav-links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
.actions{display:flex;gap:10px;align-items:center;position:relative}

/* ---------- Buttons (REPETITION: one pill language) ---------- */
.btn,.btn-outline,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:14px 24px;font-weight:700;font-family:var(--font-body);
  font-size:.98rem;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
  border:1px solid transparent;cursor:pointer;white-space:nowrap
}
.btn{background:linear-gradient(140deg,var(--green-700),var(--green-500));color:#fff;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-outline{border-color:var(--line-strong);background:var(--surface);color:var(--text)}
.btn-outline:hover{border-color:var(--green-500);color:var(--green-700);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--green-700);font-weight:700}
.btn-ghost:hover{background:rgba(19,134,151,.1)}
/* a gold CTA variant for the rare 10% emphasis moment */
.btn-accent{background:linear-gradient(140deg,var(--accent),var(--accent-600));color:#3a1410;box-shadow:var(--shadow-gold)}
.btn-accent:hover{transform:translateY(-2px)}

.mobile-toggle{display:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:10px 13px;font-size:1.1rem;cursor:pointer}
.mobile-menu{display:none;border-top:1px solid var(--line);padding:12px 0 18px}
.mobile-menu a{display:block;padding:12px 6px;font-weight:600}

/* ---------- Hero (BALANCE via asymmetry, PROPORTION ~1.1:.9) ---------- */
.hero{padding:var(--s-6) 0 var(--s-5);position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-4);align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;background:var(--accent-soft);
  border:1px solid var(--accent-300);padding:8px 16px;border-radius:999px;
  font-weight:700;color:#8a3a30;font-size:.88rem;letter-spacing:.01em
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-600)}
.hero h1{font-size:clamp(2.5rem,4.6vw,4.6rem);line-height:1.02;margin:18px 0 18px;font-weight:600}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:58ch}
.hero-card,.glass{
  background:var(--surface-2);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(16px);border-radius:var(--radius);box-shadow:var(--shadow)
}
.hero-card{padding:22px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:var(--s-3)}
.kpi{padding:18px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line)}
.kpi strong{display:block;font-size:1.2rem;color:var(--green-800);font-family:var(--font-display);margin-bottom:4px}
.kpi span{font-size:.92rem;color:var(--muted)}

/* ---------- Sections (RHYTHM) ---------- */
.section{padding:var(--s-5) 0}
.section-lg{padding:var(--s-6) 0}
.section h2{font-size:clamp(1.9rem,3.1vw,3rem);line-height:1.08;margin:0 0 14px;font-weight:600}
.section-intro{max-width:67ch;color:var(--muted);margin-bottom:var(--s-3);font-size:1.04rem}

/* ---------- Grids (BALANCE) ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ---------- Card system (UNITY + REPETITION) ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.card h3{margin:0 0 10px;font-size:1.2rem}
.card p{margin:0;color:var(--muted)}
.icon-badge{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--green-700),var(--green-500));color:#fff;
  font-size:1.3rem;margin-bottom:16px;box-shadow:var(--shadow-sm)
}
.steps .card{padding-top:28px}
.step-no{position:absolute;right:20px;top:18px;color:var(--accent-600);font-weight:800;font-family:var(--font-display);font-size:1.1rem}

/* ---------- Band (alternating section texture for RHYTHM) ---------- */
.band{
  background:
    radial-gradient(circle at 90% 10%,rgba(19,134,151,.06),transparent 40%),
    linear-gradient(180deg,var(--paper),#f1ecdf);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}

/* ---------- Plans ---------- */
.plan-card{position:relative;overflow:hidden}
.plan-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--green-600),var(--accent))}
.plan-tag{display:inline-flex;background:rgba(19,134,151,.1);color:var(--green-700);border:1px solid var(--green-300);padding:6px 12px;border-radius:999px;font-weight:700;font-size:.85rem}
.plan-price{font-size:2.2rem;font-weight:700;margin:16px 0 4px;color:var(--green-800)}

.list{display:grid;gap:11px;padding:0;margin:18px 0 0;list-style:none}
.list li{display:flex;gap:10px;color:#1c4148;align-items:flex-start}
.list li::before{content:"\2713";color:#fff;background:var(--green-500);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;flex:0 0 auto;margin-top:3px}

/* ---------- Feature banner / media ---------- */
.feature-banner{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;padding:26px}
.media{
  aspect-ratio:4/3;border-radius:22px;overflow:hidden;position:relative;
  background:
    linear-gradient(150deg,rgba(10,57,66,.78),rgba(19,134,151,.5)),
    url('../images/placeholders/hero-doctor-consultation.jpg') center/cover no-repeat;
}
.media.alt{background:linear-gradient(150deg,rgba(10,57,66,.8),rgba(43,108,176,.55)),url('../images/placeholders/patient-mobile-app.webp') center/cover no-repeat}
.media.tall{aspect-ratio:3/4}
.media .overlay{position:absolute;inset:auto 0 0 0;color:#fff;padding:22px;background:linear-gradient(transparent,rgba(6,32,22,.78))}
.media .overlay strong{font-family:var(--font-display);font-size:1.15rem}

.quote{font-size:1.1rem;font-weight:500;color:#163e46;font-family:var(--font-display);line-height:1.45}
.testimonial{padding:24px}
.testimonial::before{content:"\201C";font-family:var(--font-display);font-size:3.5rem;line-height:.4;color:var(--accent-300);display:block;height:28px}
.avatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,var(--green-700),var(--green-500));color:#fff;display:grid;place-items:center;font-weight:800}

.stat-row{display:flex;flex-wrap:wrap;gap:12px}
.stat-pill{border:1px solid var(--line-strong);background:var(--surface);padding:10px 16px;border-radius:999px;font-weight:700;color:#2a525a;font-size:.92rem}

/* ---------- Inner page hero ---------- */
.page-hero{padding:var(--s-5) 0 var(--s-2)}
.page-hero .glass{padding:30px}
.breadcrumbs{font-size:.92rem;color:var(--muted);margin-bottom:10px}
.breadcrumbs a:hover{color:var(--green-700)}

/* ---------- Filters / chips ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 20px}
.chip{border:1px solid var(--line-strong);background:var(--surface);color:#163e46;padding:10px 16px;border-radius:999px;font-weight:700;cursor:pointer;transition:.2s ease}
.chip:hover{border-color:var(--green-500)}
.chip.active{background:var(--green-700);border-color:var(--green-700);color:#fff}

/* ---------- Products ---------- */
.product-card .image{
  aspect-ratio:4/3;border-radius:var(--radius-sm);background:linear-gradient(150deg,#e6eff1,#e9f1f2);
  margin-bottom:16px;border:1px solid var(--line);background-size:cover;background-position:center
}
.price{font-size:1.25rem;font-weight:700;color:var(--green-800);font-family:var(--font-display)}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse}
th,td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left}
th{background:rgba(19,134,151,.07);color:var(--green-800);font-family:var(--font-body);font-weight:700;font-size:.92rem;letter-spacing:.02em}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(19,134,151,.04)}

/* ---------- Forms ---------- */
form .field{display:grid;gap:8px;margin-bottom:18px}
label{font-weight:700;font-size:.95rem}
input,select,textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:14px;
  background:var(--surface);color:var(--text);font:inherit;transition:.2s ease
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px rgba(19,134,151,.14)}
textarea{min-height:120px;resize:vertical}
.helper{font-size:.92rem;color:var(--muted)}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- Footer (SECONDARY 30% anchor block) ---------- */
.footer{
  background:
    radial-gradient(circle at 12% 0%,rgba(19,134,151,.28),transparent 42%),
    radial-gradient(circle at 92% 8%,rgba(255,111,94,.16),transparent 40%),
    linear-gradient(180deg,var(--green-900),#06251a);
  color:#e9fbfd;margin-top:var(--s-6);position:relative
}
.footer .grid{display:grid;grid-template-columns:1.3fr .8fr .8fr .8fr;gap:24px;padding:54px 0 30px}
.footer h4{margin:0 0 14px;font-family:var(--font-display);color:#fff;font-size:1.05rem}
.footer p,.footer a{color:#bfe0e4}
.footer a:hover{color:var(--accent-300)}
.footer .brand span{color:#fff}
.footer .brand small{color:#92b8bd}
.footer .small{padding:18px 0 26px;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem;color:#92b8bd}
.socials{display:flex;gap:12px}
.socials a{width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.2s ease}
.socials a:hover{background:rgba(255,111,94,.2);border-color:transparent;transform:translateY(-2px)}
.socials svg,.whatsapp-float svg{width:22px;height:22px}

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;
  background:#16a34a;color:#fff;display:grid;place-items:center;
  box-shadow:0 18px 38px rgba(18,134,97,.4);font-size:1.35rem;transition:.2s ease
}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.04)}

/* ---------- Badges & misc ---------- */
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(19,134,151,.1);border:1px solid var(--green-300);font-weight:700;color:var(--green-700);font-size:.86rem}
.empty-note{padding:16px 18px;border-radius:16px;background:var(--accent-soft);border:1px solid var(--accent-300);color:#8a3a30;font-weight:600}
.hidden{display:none!important}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
hr.soft{border:none;border-top:1px solid var(--line);margin:24px 0}
.notice-danger{font-weight:700}

/* ---------- Account menu ---------- */
.account-pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:9px 16px;background:rgba(19,134,151,.1);border:1px solid var(--green-300);color:var(--green-800);font-weight:800}
.account-pill .mini-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,var(--green-700),var(--green-500));color:#fff;font-size:.82rem;background-size:cover;background-position:center}
.account-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:8px;display:none;z-index:90}
.account-menu.open{display:block}
.account-menu a,.account-menu button{display:flex;width:100%;align-items:center;gap:10px;border:none;background:none;padding:12px 14px;border-radius:12px;font:inherit;font-weight:700;color:var(--text);cursor:pointer;text-align:left}
.account-menu a:hover,.account-menu button:hover{background:rgba(19,134,151,.1);color:var(--green-800)}

/* ---------- Cart count badge ---------- */
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#3a1410;font-size:.72rem;font-weight:800;margin-left:4px}

/* ---------- Flow strip (MOVEMENT) ---------- */
.hero-surface{color:#fff;background-size:cover;background-position:center;overflow:hidden}
.hero-surface .breadcrumbs,.hero-surface .section-intro,.hero-surface h1,.hero-surface h2,.hero-surface h3,.hero-surface p{color:#fff}
.hero-surface .section-intro{max-width:68ch}
.flow-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:14px;align-items:center}
.flow-node{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:transform .25s ease}
.flow-node:hover{transform:translateY(-4px)}
.flow-arrow{font-size:1.4rem;color:var(--accent-600);font-weight:900;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.section-copy p + p{margin-top:12px}
.map-box{min-height:380px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.contact-stack{display:grid;gap:18px}

/* ---------- MOVEMENT: load + scroll reveal ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero h1,.hero p.lead,.hero .badge-row,.hero .mt-3,.hero .kpis{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero p.lead{animation-delay:.08s}
.hero .badge-row{animation-delay:.16s}
.hero .mt-3{animation-delay:.24s}
.hero .kpis{animation-delay:.32s}
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Responsive (PROPORTION holds across breakpoints) ---------- */
@media (max-width:980px){
  .hero-grid,.grid-2,.feature-banner,.footer .grid,.dual{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .nav-links,.actions{display:none}
  .mobile-toggle{display:inline-flex}
  .mobile-menu.open{display:block}
  .topbar .inner{grid-template-columns:1fr;text-align:center}
  .topbar .right{justify-self:center;text-align:center}
  .flow-strip{grid-template-columns:1fr}
  .flow-arrow{display:none}
}
@media (max-width:640px){
  .container{width:min(var(--max),calc(100% - 24px))}
  .hero{padding:var(--s-5) 0 var(--s-3)}
  .grid-3,.grid-4,.kpis{grid-template-columns:1fr}
  .page-hero{padding-top:var(--s-4)}
}

/* =====================================================================
   Triage widget, AI assistant, and the "alive" hero — voice-note brief
   ===================================================================== */

/* ---- progressive triage ---- */
.triage-progress{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.triage-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green-600),var(--accent));transition:width .4s cubic-bezier(.2,.7,.2,1)}
.triage-result{padding:18px;border-radius:var(--radius-sm);background:var(--surface)}
#triageWidget .field input,#triageWidget .field select{font-size:1.02rem}

/* ---- AI assistant ---- */
.assistant-fab{
  position:fixed;right:20px;bottom:92px;z-index:70;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(150deg,var(--green-700),var(--green-500));color:#fff;font-size:1.4rem;
  box-shadow:var(--shadow);transition:transform .2s ease
}
.assistant-fab:hover{transform:translateY(-3px) scale(1.05)}
.assistant-panel{
  position:fixed;right:20px;bottom:160px;z-index:71;width:min(380px,calc(100% - 32px));height:520px;max-height:70vh;
  background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
  display:none;flex-direction:column;overflow:hidden
}
.assistant-panel.open{display:flex}
.assistant-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(110deg,var(--green-800),var(--green-600));color:#fff}
.assistant-head button{background:none;border:none;color:#fff;font-size:1rem;cursor:pointer}
.assistant-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.a-msg{max-width:84%;padding:11px 14px;border-radius:16px;line-height:1.5;font-size:.96rem}
.a-msg.bot{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.a-msg.user{background:var(--green-600);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.assistant-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface)}
.assistant-foot input{flex:1}
.assistant-foot .btn{padding:12px 16px}

/* ---- "alive" hero: a slow aurora sky + a wave that comes together ---- */
.hero.alive{position:relative;overflow:hidden;isolation:isolate}
.hero.alive::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;z-index:-2;
  background:
    radial-gradient(40% 55% at 20% 20%,rgba(55,168,123,.30),transparent 60%),
    radial-gradient(45% 60% at 80% 10%,rgba(255,111,94,.24),transparent 60%),
    radial-gradient(50% 60% at 60% 80%,rgba(19,134,151,.22),transparent 60%);
  filter:blur(8px);animation:auroraDrift 18s ease-in-out infinite alternate
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.04)}
}
.hero.alive .wave{
  position:absolute;left:0;right:0;bottom:-2px;z-index:-1;width:100%;height:120px;opacity:.5
}
.hero.alive .wave path{animation:waveShift 9s ease-in-out infinite alternate}
@keyframes waveShift{from{d:path("M0,40 C360,90 720,0 1080,40 C1260,60 1380,30 1440,45 L1440,120 L0,120 Z")}to{d:path("M0,55 C360,10 720,80 1080,45 C1260,25 1380,60 1440,40 L1440,120 L0,120 Z")}}
@media (prefers-reduced-motion:reduce){
  .hero.alive::before,.hero.alive .wave path{animation:none}
}

/* ---- partner logo strip + specialists rail ---- */
.partner-strip{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.partner-logo{display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-weight:700;color:#234a52;box-shadow:var(--shadow-sm)}
.partner-logo .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--green-700),var(--green-500));display:grid;place-items:center;color:#fff;font-size:.85rem}
.spec-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:18px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory}
.spec-rail::-webkit-scrollbar{height:8px}.spec-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.spec-card{scroll-snap-align:start}
.spec-card .ring{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(150deg,var(--green-700),var(--green-500));display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:1.6rem;box-shadow:var(--shadow-sm)}

/* =====================================================================
   v2 refinements — feedback pass (BetaDocta)
   ===================================================================== */

/* custom select with a clean caret (no default OS arrow) */
select{
  appearance:none;-webkit-appearance:none;-moz-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='%2354686e' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;cursor:pointer
}

/* SVG icons sit neatly inside badges/buttons */
.icon-badge svg{width:24px;height:24px}
.btn svg,.btn-outline svg,.btn-ghost svg{width:18px;height:18px}
.nav-ic svg{width:20px;height:20px;display:block}

/* header action grouping — keep Plans + Log in + Create account together,
   never let one button drift alone to the far right */
.navbar{gap:14px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.actions .btn,.actions .btn-outline,.actions .btn-ghost{padding:11px 18px;font-size:.94rem}
.nav-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;border:1px solid var(--line-strong);background:var(--surface);color:var(--green-700);cursor:pointer;position:relative;transition:.2s ease}
.nav-ic:hover{border-color:var(--green-500);color:var(--green-600)}
.lang-link{color:var(--green-700);font-weight:700;padding:9px 12px;border-radius:999px}
.lang-link:hover{background:rgba(19,134,151,.1)}

/* logout pill (always visible when signed in) */
.logout-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;background:var(--surface);border:1px solid var(--line-strong);color:var(--text);font-weight:700;cursor:pointer}
.logout-pill:hover{border-color:var(--accent);color:var(--accent-600)}

/* footer: richer, layered, organised */
.footer .grid{grid-template-columns:1.4fr .85fr .85fr 1.05fr;gap:28px;padding:60px 0 30px}
.footer .foot-newsletter{display:flex;gap:8px;margin-top:14px;max-width:320px}
.footer .foot-newsletter input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.footer .foot-newsletter input::placeholder{color:#9fbdc2}
.footer .foot-badge{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.84rem;color:#bfe0e4}
.socials a svg{width:20px;height:20px}

/* partners strip */
.partners{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm)}
.partner-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch}
.partner-logo{flex-direction:column;text-align:center;justify-content:center;gap:8px;padding:18px 14px;min-height:104px}
.partner-logo .dot{width:40px;height:40px;border-radius:12px;font-size:.92rem}
.partner-logo small{color:var(--muted);font-weight:600;font-size:.78rem}

/* testimonials with faces */
.tcard{display:grid;gap:14px;padding:24px}
.tcard .tquote{font-family:var(--font-display);font-size:1.06rem;line-height:1.5;color:#173b42}
.tperson{display:flex;align-items:center;gap:12px}
.tperson .face{width:52px;height:52px;border-radius:50%;background-size:cover;background-position:center;border:2px solid var(--surface);box-shadow:var(--shadow-sm);flex:0 0 auto;background-color:var(--green-300)}
.tperson .pmeta strong{display:block;color:var(--text)}
.tperson .pmeta span{font-size:.86rem;color:var(--muted)}
.stars{color:var(--accent);letter-spacing:2px;font-size:.95rem}

/* WhatsApp interval fade */
.whatsapp-float{transition:opacity .5s ease,transform .3s ease}
.whatsapp-float.wa-hidden{opacity:0;pointer-events:none;transform:translateY(12px) scale(.9)}

/* assistant fab — make it obvious it's "talk to a doctor/assistant" */
.assistant-fab{width:auto;height:54px;border-radius:999px;padding:0 20px;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.96rem;font-family:var(--font-body)}
.assistant-fab .alabel{white-space:nowrap}
.assistant-fab svg{width:22px;height:22px}

@media (max-width:980px){
  .footer .grid{grid-template-columns:1fr 1fr}
  .partner-strip{grid-template-columns:repeat(2,1fr)}
  .assistant-fab .alabel{display:none}
  .assistant-fab{width:54px;padding:0}
  .topbar .center{font-size:.68rem}
}

/* =====================================================================
   v3 — partner spotlight window
   ===================================================================== */
.partner-window{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  padding:26px;border-radius:var(--radius);
  background:radial-gradient(circle at 50% 0%,rgba(19,134,151,.08),transparent 60%),linear-gradient(180deg,#eef4f5,#e7eef0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}
.partner-img{
  width:170px;height:84px;object-fit:contain;border-radius:14px;background:var(--surface);
  padding:10px 14px;box-shadow:var(--shadow-sm);
  filter:grayscale(1) opacity(.62);transform:scale(.96);
  transition:filter .6s ease,transform .6s ease,box-shadow .6s ease
}
/* the spotlighted logo pops up and shines, then fades back into the line */
.partner-img.shine{
  filter:grayscale(0) opacity(1);transform:scale(1.08) translateY(-4px);
  box-shadow:0 22px 44px -18px rgba(16,134,151,.55)
}
@media (prefers-reduced-motion:reduce){
  .partner-img{filter:none;opacity:1;transform:none;transition:none}
}
@media (max-width:640px){ .partner-img{width:132px;height:66px} }

/* =====================================================================
   v3 — services page: featured rows + image-backed cards
   ===================================================================== */
.service-feature{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-bottom:var(--s-5)}
.service-feature.reverse .service-media{order:2}
.service-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.service-media img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.service-feature-copy .eyebrow{margin-bottom:6px}
.service-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-card .sc-media{height:150px;background-size:cover;background-position:center;position:relative}
.service-card .sc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(6,38,43,.12))}
.service-card .sc-body{padding:22px}
.service-card .sc-body h3{margin:0 0 8px;font-size:1.15rem}
.service-card .sc-body p{margin:0;color:var(--muted)}
@media (max-width:900px){
  .service-feature{grid-template-columns:1fr;gap:20px}
  .service-feature.reverse .service-media{order:0}
}

/* =====================================================================
   v4 — DEFINITIVE responsive rules (placed last so they always win)
   Fixes: header buttons spilling off-screen on mobile, stray overflow,
   tighter spacing, and comfortable tap targets.
   ===================================================================== */
html,body{max-width:100%;overflow-x:hidden}

@media (max-width:980px){
  /* hide desktop nav + action buttons; show the menu toggle */
  header .nav-links,
  header .navbar .actions{display:none !important}
  .mobile-toggle{display:inline-flex !important}
  .mobile-menu.open{display:block}
  /* the floating buttons can crowd small screens */
  .assistant-fab{bottom:84px}
}

@media (max-width:760px){
  :root{--s-5:36px;--s-6:52px;--radius:22px}
  .container{width:min(var(--max),calc(100% - 28px))}
  .hero{padding:40px 0 28px}
  .hero h1{font-size:clamp(2rem,8vw,2.8rem)}
  .grid-2,.grid-3,.grid-4,.kpis,.feature-banner,.dual,.service-feature,.hero-grid{grid-template-columns:1fr !important}
  .footer .grid{grid-template-columns:1fr 1fr !important;gap:22px}
  .partner-window{padding:18px;gap:12px}
  .flow-strip{grid-template-columns:1fr !important}
  .flow-arrow{display:none}
  /* comfortable touch targets */
  .btn,.btn-outline,.btn-ghost,.chip,.nav-ic{min-height:44px}
  .mobile-menu a{padding:14px 6px}
  table{font-size:.92rem}
  .assistant-panel{right:12px;left:12px;width:auto;bottom:150px;height:62vh}
}

@media (max-width:430px){
  .footer .grid{grid-template-columns:1fr !important}
  .partner-img{width:44%;min-width:120px}
  .topbar .inner{gap:6px}
  .hero h1{font-size:clamp(1.8rem,8.5vw,2.4rem)}
}

/* =====================================================================
   v5 — nav "Care" dropdown (keeps the header uncrowded)
   ===================================================================== */
.nav-dropdown{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;color:#1d4a52;background:none;border:none;cursor:pointer;padding:9px 14px;border-radius:999px;font-size:1rem;transition:.2s ease}
.nav-dd-btn:hover{background:rgba(19,134,151,.1);color:var(--green-700)}
.nav-dd-btn svg{transition:transform .2s ease}
.nav-dropdown.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:none;z-index:90}
.nav-dropdown.open .nav-dd-menu{display:block}
.nav-dd-menu a{display:block;padding:11px 14px;border-radius:10px;font-weight:600;color:#1d4a52}
.nav-dd-menu a:hover{background:rgba(19,134,151,.1);color:var(--green-700)}
.nav-dd-menu a.active::after{display:none}

/* =====================================================================
   v6 — mobile "Care" accordion + testing disclaimer banner
   ===================================================================== */
.m-care-toggle{display:flex;align-items:center;width:100%;background:none;border:none;font:inherit;font-weight:600;color:var(--text);cursor:pointer;padding:14px 6px;text-align:left}
.m-care-toggle svg{transition:transform .25s ease}
.m-care-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.m-care-sub{overflow:hidden}
.m-care-sub[hidden]{display:none}
.m-care-sub a{display:block}

/* testing / pre-launch banner */
.prelaunch-banner{background:var(--accent-soft);color:#7a2418;border-bottom:1px solid var(--accent-300);font-size:.82rem;font-weight:600;text-align:center;padding:7px 14px;line-height:1.35}
.prelaunch-banner strong{font-weight:800}
.footer .prelaunch-legal{font-size:.78rem;color:#9fbdc2;border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding-top:16px;line-height:1.55}

/* =====================================================================
   v7 — low-literacy friendly BIG answer buttons (one question at a time)
   ===================================================================== */
.bigopts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.bigopt{display:block;width:100%;text-align:left;padding:16px 18px;border-radius:14px;border:2px solid var(--line-strong);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:1.05rem;font-weight:600;line-height:1.35;cursor:pointer;transition:.15s ease;min-height:56px}
.bigopt:hover{border-color:var(--green-400);background:rgba(19,134,151,.05)}
.bigopt.active{border-color:var(--green-500);background:rgba(19,134,151,.12);box-shadow:inset 0 0 0 1px var(--green-500)}
.bigopt.active::before{content:"✓ ";color:var(--green-600);font-weight:800}
@media (max-width:560px){.bigopt{font-size:1.08rem;padding:18px}}

/* big patient quick-action cards */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.qa-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 14px;border-radius:18px;border:2px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;font-weight:700;transition:.15s ease;min-height:128px;justify-content:center}
.qa-card:hover{border-color:var(--green-400);background:rgba(19,134,151,.06);transform:translateY(-2px)}
.qa-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--green-100);color:var(--green-700)}
.qa-ic svg{width:24px;height:24px}
.qa-card span{font-size:1.02rem}
.qa-card small{font-weight:500;color:var(--muted);font-size:.82rem}

/* =====================================================================
   v8 — password show/hide, profile pill, colour-coded findings
   ===================================================================== */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:88px!important}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--green-700);font-weight:700;font-size:.86rem;cursor:pointer;padding:8px 10px;border-radius:8px;display:flex;align-items:center;gap:6px}
.pw-toggle:hover{background:rgba(19,134,151,.1)}
.pw-toggle svg{width:18px;height:18px}

/* profile pill in header */
.profile-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;color:var(--text);text-decoration:none;cursor:pointer;transition:.15s ease}
.profile-pill:hover{border-color:var(--green-400);background:rgba(19,134,151,.06)}
.profile-pill .avatar{width:30px;height:30px;border-radius:50%;background:var(--green-600);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:800}
.profile-pill .pname{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}

/* colour-coded result findings (green / yellow / red) */
.finding-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.finding-row{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.finding-row .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;margin-top:3px}
.finding-row.lvl-green{background:rgba(46,160,109,.08);border-color:#9bd6b6}
.finding-row.lvl-green .dot{background:#2ea06d}
.finding-row.lvl-yellow{background:rgba(214,158,46,.10);border-color:#e8c87a}
.finding-row.lvl-yellow .dot{background:#d69e2e}
.finding-row.lvl-red{background:rgba(214,69,58,.09);border-color:#eba49d}
.finding-row.lvl-red .dot{background:#d6453a}
.finding-row strong{font-weight:700}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.82rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.next-box{margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--green-100);border:1px solid var(--green-300)}
.next-box h4{margin:0 0 6px;font-size:1.05rem}
.next-box.urgent{background:rgba(214,69,58,.08);border-color:#eba49d}

/* v9 — demo: 4-up plan grid + muted list items */
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.list .muted{color:var(--muted);opacity:.8}
.plan-card .plan-price span{color:var(--muted)}

/* =====================================================================
   v10 — minimalist video hero carousel + icon "doors" + guide avatar
   ===================================================================== */
.vhero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;background:var(--green-900)}
.vhero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:center;pointer-events:none}
.vhero-slide.active{opacity:1;pointer-events:auto}
.vhero-media{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05)}
.vhero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,38,43,.92) 0%,rgba(4,38,43,.72) 45%,rgba(4,38,43,.35) 100%)}
.vhero-play{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;backdrop-filter:blur(3px);z-index:2}
.vhero-play svg{width:34px;height:34px;fill:#fff;margin-left:5px}
.vhero-inner{position:relative;z-index:2;max-width:640px}
.vhero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;margin:0 0 14px}
.vhero p{color:rgba(255,255,255,.9);font-size:1.15rem;margin:0 0 22px;max-width:34ch}
.vhero .eyebrow{color:var(--accent-200,#ffd7cf);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;margin-bottom:12px}
.vhero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.vhero-dots button{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.vhero-dots button.on{background:#fff;width:28px;border-radius:6px}
.vhero-tag{position:absolute;top:20px;right:20px;z-index:3;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:600}
@media(max-width:720px){.vhero-play{width:60px;height:60px;right:5%}.vhero{min-height:70vh}}

/* icon "doors" — progressive entry points */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.door{display:flex;flex-direction:column;gap:12px;padding:26px 20px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);text-decoration:none;color:var(--text);transition:.18s ease}
.door:hover{border-color:var(--green-400);transform:translateY(-3px);box-shadow:0 12px 30px rgba(4,38,43,.08)}
.door-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--green-100);color:var(--green-700)}
.door-ic svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2}
.door h3{margin:0;font-size:1.12rem}
.door p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.4}

/* floating guide avatar (the platform's AI face) */
.guide{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;align-items:flex-end;gap:10px;max-width:300px}
.guide-av{width:58px;height:58px;flex:0 0 auto;cursor:pointer;filter:drop-shadow(0 6px 14px rgba(4,38,43,.25));animation:guidebob 3.2s ease-in-out infinite}
@keyframes guidebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.guide-bubble{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:.9rem;box-shadow:0 10px 30px rgba(4,38,43,.14);position:relative}
.guide-bubble p{margin:0 0 8px}
.guide-bubble .g-actions{display:flex;gap:8px;flex-wrap:wrap}
.guide-bubble button{font:inherit;font-size:.82rem;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--green-300);background:var(--green-100);color:var(--green-800);cursor:pointer}
.guide-bubble .g-close{position:absolute;top:6px;right:8px;border:none;background:none;color:var(--muted);font-size:1.1rem;padding:2px 4px}
.guide.min .guide-bubble{display:none}

/* v11 — real brand logo */
.brand-logo{height:44px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:38px}}

/* v11 — hero polish: readable eyebrow, arrows, video */
.vhero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero .eyebrow{display:inline-block;background:rgba(255,255,255,.92);color:var(--green-800);padding:7px 16px;border-radius:999px;font-weight:800;letter-spacing:.06em;font-size:.8rem;box-shadow:0 4px 14px rgba(4,38,43,.25)}
.vhero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--green-800);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(4,38,43,.28);transition:.15s}
.vhero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.vhero-arrow.prev{left:16px}.vhero-arrow.next{right:16px}
.vhero-arrow svg{width:22px;height:22px}
@media(max-width:640px){.vhero-arrow{width:38px;height:38px}.vhero-arrow.prev{left:8px}.vhero-arrow.next{right:8px}}

/* v11 — picture cards: image background, text in front */
.pic-card{position:relative;border-radius:20px;overflow:hidden;min-height:250px;display:flex;align-items:flex-end;text-decoration:none;border:none;background-size:cover;background-position:center;transition:.18s ease}
.pic-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,38,43,.05) 20%,rgba(4,38,43,.82) 100%)}
.pic-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(4,38,43,.22)}
.pic-card .pc-body{position:relative;z-index:1;padding:18px}
.pic-card h3{color:#fff;margin:0 0 6px;font-size:1.12rem}
.pic-card p{color:rgba(255,255,255,.88);margin:0;font-size:.9rem;line-height:1.45}
.pic-card .pc-num{position:absolute;top:14px;left:14px;z-index:1;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--green-800);display:grid;place-items:center;font-weight:800}

/* v11 — product cards: image half + info half */
.prod-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.prod-img{background:var(--green-100);display:grid;place-items:center;padding:22px;min-height:170px}
.prod-img img{max-height:140px;width:auto;max-width:80%}
.prod-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-body p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.prod-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.prod-foot .price{font-weight:800;color:var(--green-800)}

/* v12 — guide label cycling, logo-only navbar */
.guide{align-items:center;gap:8px}
.guide-label{border:none;cursor:pointer;background:#fff;border:1.5px solid var(--green-300);color:var(--green-800);font:inherit;font-size:.88rem;font-weight:700;padding:9px 14px;border-radius:999px;box-shadow:0 8px 22px rgba(4,38,43,.16);opacity:0;transform:translateX(-6px);transition:opacity .22s ease,transform .22s ease;white-space:nowrap}
.guide-label.on{opacity:1;transform:translateX(0)}
.guide-label:hover{background:var(--green-100)}
.brand-logo{height:52px}
@media(max-width:560px){.brand-logo{height:42px}}