/* ============================================================
   MedGrid — Modern Luxury Design System
   Pure CSS, Frappe Web Builder safe.
   ============================================================ */

:root{
  /* Brand */
  --mg-navy:        #0B0A4E;
  --mg-navy-deep:   #07063A;
  --mg-navy-soft:   #1A1A6E;
  --mg-cobalt:      #1E90FF;
  --mg-cobalt-soft: #4DA8FF;
  --mg-cobalt-deep: #0E6BD6;

  /* Neutrals (paper-leaning, cool) */
  --mg-paper:       #FAFAF7;
  --mg-paper-2:     #F4F4EF;
  --mg-white:       #FFFFFF;
  --mg-ink-900:     #0A0B14;
  --mg-ink-700:     #1F2230;
  --mg-ink-500:     #4A4F62;
  --mg-ink-400:     #6E7488;
  --mg-ink-300:     #9AA0B4;
  --mg-ink-200:     #D5D8E2;
  --mg-ink-100:     #E8EAF0;
  --mg-ink-50:      #F2F3F7;

  /* Hairlines */
  --mg-line:        rgba(11,10,78,0.08);
  --mg-line-strong: rgba(11,10,78,0.16);
  --mg-line-on-dark: rgba(255,255,255,0.10);

  /* Type */
  --mg-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mg-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mg-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mg-font-serif:   "Newsreader", "Source Serif 4", Georgia, serif;

  /* Scale (steady, big-feeling) */
  --fs-eyebrow: 12px;
  --fs-body:    16px;
  --fs-lg:      18px;
  --fs-h4:      20px;
  --fs-h3:      28px;
  --fs-h2:      48px;
  --fs-h1:      72px;
  --fs-hero:    96px;

  --container: 1240px;
  --gutter: 24px;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-1: 0 1px 2px rgba(11,10,78,0.06), 0 1px 0 rgba(11,10,78,0.04);
  --shadow-2: 0 4px 16px rgba(11,10,78,0.06), 0 1px 2px rgba(11,10,78,0.04);
  --shadow-3: 0 12px 40px rgba(11,10,78,0.10), 0 4px 12px rgba(11,10,78,0.06);
  --shadow-lift: 0 24px 60px -12px rgba(11,10,78,0.22), 0 8px 24px -8px rgba(11,10,78,0.12);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 400ms;
  --ease:  cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--mg-font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--mg-ink-900);
  background: var(--mg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }

/* ---------- Type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mg-font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  font-weight: 500;
}
.eyebrow::before{
  content:""; width:18px; height:1px; background: var(--mg-ink-300);
}
.eyebrow.on-dark{ color: rgba(255,255,255,0.6); }
.eyebrow.on-dark::before{ background: rgba(255,255,255,0.3); }
.eyebrow.cobalt{ color: var(--mg-cobalt); }
.eyebrow.cobalt::before{ background: var(--mg-cobalt); width: 24px; }

h1, h2, h3, h4{
  font-family: var(--mg-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--mg-navy);
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.035em; }
h2{ font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.03em; }
h3{ font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; }
h4{ font-size: var(--fs-h4); line-height: 1.3;  letter-spacing: -0.01em; font-weight:600; }

.display{
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 600;
}

p{ margin:0; color: var(--mg-ink-500); }
.lede{ font-size: var(--fs-lg); line-height:1.55; color: var(--mg-ink-500); max-width: 56ch; }

.mono{ font-family: var(--mg-font-mono); font-feature-settings: "tnum","ss01"; }

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width: calc(var(--container) + var(--gutter)*2);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin: 0 auto;
}
section{ position:relative; }
.section{ padding: 128px 0; }
.section-sm{ padding: 96px 0; }
.section-header{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 64px;
  max-width: 760px;
}
.section-header.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-header.split{
  grid-template-columns: 1fr auto;
  align-items: end;
  max-width: none;
  gap: 32px;
}
.section-header.split .lede{ margin-left:auto; max-width: 38ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--mg-navy);
  color: var(--mg-white);
}
.btn-primary:hover{ background: var(--mg-navy-deep); transform: translateY(-1px); }
.btn-cobalt{
  background: var(--mg-cobalt);
  color: var(--mg-white);
  box-shadow: 0 8px 24px -8px rgba(30,144,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-cobalt:hover{ background: var(--mg-cobalt-deep); transform: translateY(-1px); }
.btn-ghost{
  background: transparent; color: var(--mg-navy);
  border-color: var(--mg-line-strong);
}
.btn-ghost:hover{ background: var(--mg-white); border-color: var(--mg-navy); }
.btn-on-dark{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--mg-white);
  backdrop-filter: blur(8px);
}
.btn-on-dark:hover{ background: rgba(255,255,255,0.12); }
.btn .arrow{ transition: transform var(--dur-2) var(--ease); }
.btn:hover .arrow{ transform: translateX(3px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--mg-navy);
  font-weight: 500;
  border-bottom: 1px solid var(--mg-line-strong);
  padding-bottom: 4px;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.link-arrow:hover{ color: var(--mg-cobalt); border-color: var(--mg-cobalt); }
.link-arrow .arrow{ transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover .arrow{ transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(250,250,247,0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav.scrolled{ border-color: var(--mg-line); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
  gap: 32px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.nav-brand-logo{ height: 28px; }
.nav-links{ display:flex; align-items:center; gap: 4px; }
.nav-link{
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--mg-ink-700);
  font-weight: 500;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-link:hover{ background: rgba(11,10,78,0.05); color: var(--mg-navy); }
.nav-cta{ display:flex; align-items:center; gap: 8px; }

/* ---------- Nav search ---------- */
.nav-search{
  display:flex; align-items:center; gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mg-paper-2);
  border: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  min-width: 220px;
}
.nav-search:focus-within{ border-color: var(--mg-line-strong); background: var(--mg-white); }
.nav-search svg{ color: var(--mg-ink-400); flex-shrink:0; }
.nav-search input{
  border: 0; outline: 0; background: transparent;
  font-family: var(--mg-font-body); font-size: 14px;
  color: var(--mg-ink-900); width: 100%;
}
.nav-search input::placeholder{ color: var(--mg-ink-400); }
.nav-search-kbd{
  margin-left: 4px;
  font-family: var(--mg-font-mono, monospace);
  font-size: 10.5px; font-weight: 600;
  color: var(--mg-ink-400);
  background: var(--mg-paper-2);
  border: 1px solid var(--mg-line);
  border-radius: 6px; padding: 2px 6px;
  white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 1200px){ .nav-search-kbd{ display: none; } }
@media (max-width: 1100px){ .nav-search{ display: none; } }

/* ---------- Nav icon buttons (wishlist / cart) ---------- */
.nav-icon-only{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--mg-ink-700); text-decoration: none;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav-icon-only:hover{ background: rgba(11,10,78,0.06); color: var(--mg-navy); }
.nav-badge{
  position: absolute; top: -6px; right: -6px;
  background: #EF4444; color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 50%; padding: 0 4px;
}
.nav-badge-dot{
  min-width: 8px !important; height: 8px !important;
  background: #EF4444; border: 2px solid #fff; border-radius: 50%;
  top: 6px !important; right: 6px !important; padding: 0 !important;
}

/* ---------- Skip-to-content (a11y) ---------- */
.nav-skip{
  position: absolute; top: -100px; left: 16px; z-index: 100;
  background: var(--mg-navy); color: #fff; padding: 12px 18px;
  border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none;
  transition: top var(--dur-2) var(--ease);
}
.nav-skip:focus{ top: 16px; outline: 2px solid var(--mg-cobalt); outline-offset: 2px; }

/* ---------- Solutions dropdown ---------- */
.nav-dropdown{ position: relative; }
.nav-dropdown-toggle{
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-dropdown-toggle .nav-caret{ transition: transform var(--dur-2) var(--ease); opacity: 0.7; }
.nav-dropdown.is-open .nav-dropdown-toggle .nav-caret{ transform: rotate(180deg); opacity: 1; }
.nav-dropdown.is-open .nav-dropdown-toggle{ color: var(--mg-navy); background: rgba(11,10,78,0.05); border-radius: 999px; }
.nav-dropdown-menu{
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 360px; max-width: 380px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(11,10,78,0.08);
  border-radius: 20px;
  box-shadow: 0 24px 48px -12px rgba(11,10,78,0.22), 0 8px 24px -8px rgba(11,10,78,0.10);
  padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease);
  z-index: 60;
}
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-item{
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  color: var(--mg-ink-900); transition: background var(--dur-2) var(--ease);
}
.nav-dd-item:hover{ background: rgba(30,144,255,0.06); }
.nav-dd-icon{
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(11,10,78,0.06) 0%, rgba(30,144,255,0.10) 100%);
  color: var(--mg-cobalt);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-dd-title{ font-weight: 600; font-size: 14.5px; color: var(--mg-navy); line-height: 1.2; }
.nav-dd-sub{ font-size: 12.5px; color: var(--mg-ink-500); margin-top: 2px; line-height: 1.4; }
.nav-dd-divider{ height: 1px; background: var(--mg-line); margin: 6px; }
.nav-dd-cta{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--mg-cobalt);
  transition: background var(--dur-2) var(--ease);
}
.nav-dd-cta:hover{ background: rgba(30,144,255,0.08); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  /* dotted grid */
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image: radial-gradient(rgba(11,10,78,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -14px -14px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 75%);
}
.hero::after{
  /* soft glow */
  content:"";
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(30,144,255,0.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(11,10,78,0.07), transparent 60%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-eyebrow-row{
  display:flex; align-items:center; gap:16px;
  margin-bottom: 32px;
}
.hero-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px 6px 6px;
  background: var(--mg-white);
  border:1px solid var(--mg-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--mg-ink-700);
  box-shadow: var(--shadow-1);
}
.hero-pill-tag{
  background: var(--mg-navy);
  color: var(--mg-white);
  font-family: var(--mg-font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.hero-title{
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 0.97;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--mg-navy);
  margin-bottom: 28px;
}
.hero-title em{
  font-style: normal;
  color: var(--mg-cobalt);
  font-family: var(--mg-font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.hero-sub{
  font-size: var(--fs-lg);
  color: var(--mg-ink-500);
  max-width: 52ch;
  margin-bottom: 40px;
  line-height: 1.5;
}
.hero-ctas{ display:flex; gap:12px; flex-wrap: wrap; margin-bottom: 64px; }

.hero-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--mg-line);
}
.hero-stat-num{
  font-family: var(--mg-font-display);
  font-size: 40px;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--mg-navy);
  line-height: 1;
}
.hero-stat-label{
  font-size: 13px;
  color: var(--mg-ink-400);
  margin-top: 6px;
}

/* ---------- 3D hero stack ---------- */
.hero-3d{
  position: relative;
  perspective: 1800px;
  perspective-origin: 60% 40%;
  height: 600px;
}
.hero-stage{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-22deg) rotateZ(2deg);
  animation: stage-float 8s ease-in-out infinite alternate;
}
@keyframes stage-float{
  from{ transform: rotateX(7deg) rotateY(-22deg) rotateZ(2deg) translateY(-4px); }
  to  { transform: rotateX(9deg) rotateY(-20deg) rotateZ(2deg) translateY(4px); }
}
.h3-card{
  position: absolute;
  background: var(--mg-white);
  border:1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 20px;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Main dashboard card */
.h3-main{
  width: 460px; height: 320px;
  top: 80px; left: 40px;
  transform: translateZ(60px);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.h3-main-bar{
  display:flex; align-items:center; gap:8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mg-line);
  background: var(--mg-paper-2);
}
.h3-main-dot{ width:10px; height:10px; border-radius:50%; background: var(--mg-ink-200); }
.h3-main-dot:nth-child(1){ background:#FF6058; }
.h3-main-dot:nth-child(2){ background:#FFBD2F; }
.h3-main-dot:nth-child(3){ background:#28C941; }
.h3-main-url{
  margin-left: 12px;
  font-family: var(--mg-font-mono);
  font-size: 11px;
  color: var(--mg-ink-400);
  background: var(--mg-white);
  border:1px solid var(--mg-line);
  padding: 4px 10px;
  border-radius: 999px;
}
.h3-main-body{ padding: 18px; }
.h3-main-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 12px;
}
.h3-main-title{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--mg-navy);
}
.h3-tab{
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}
.h3-tab.active{ color: var(--mg-cobalt); }
.h3-chart{
  height: 130px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(30,144,255,0.10), rgba(30,144,255,0) 70%),
    repeating-linear-gradient(to right, transparent 0 24px, rgba(11,10,78,0.04) 24px 25px),
    repeating-linear-gradient(to top, transparent 0 26px, rgba(11,10,78,0.04) 26px 27px);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.h3-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
.h3-mini-row{ display:flex; gap: 8px; }
.h3-mini{
  flex:1;
  background: var(--mg-paper-2);
  border-radius: 6px;
  padding: 8px 10px;
}
.h3-mini-label{ font-size:10px; color: var(--mg-ink-400); font-family: var(--mg-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.h3-mini-val{ font-size: 14px; color: var(--mg-navy); font-weight: 600; margin-top: 2px; font-family: var(--mg-font-display); letter-spacing: -0.01em; }

/* Floating product cards */
.h3-prod{
  width: 220px;
  padding: 14px;
  border-radius: var(--radius);
}
.h3-prod-tag{
  display:inline-block;
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(30,144,255,0.10);
  color: var(--mg-cobalt-deep);
  margin-bottom: 10px;
}
.h3-prod-img{
  height: 90px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mg-navy), var(--mg-cobalt));
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.h3-prod-img::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%);
}
.h3-prod-img.green{ background: linear-gradient(135deg, #064E3B, #10B981); }
.h3-prod-img.amber{ background: linear-gradient(135deg, #422006, #F59E0B); }
.h3-prod-name{ font-family: var(--mg-font-display); font-weight:600; font-size: 14px; color: var(--mg-navy); }
.h3-prod-price{ display:flex; justify-content:space-between; align-items:baseline; margin-top: 6px; }
.h3-prod-price-val{ font-family: var(--mg-font-mono); font-size: 13px; color: var(--mg-navy); font-weight: 500; }
.h3-prod-price-rate{ font-size: 11px; color: var(--mg-ink-400); }

.h3-prod-1{ top: 0;   right: 30px;  transform: translateZ(120px); }
.h3-prod-2{ top: 220px; right: -20px; transform: translateZ(80px); }
.h3-prod-3{ top: 380px; left: 280px;  transform: translateZ(160px); }

/* Floating chips */
.h3-chip{
  position:absolute;
  background: var(--mg-white);
  border:1px solid var(--mg-line);
  border-radius: 999px;
  padding: 8px 14px 8px 8px;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow: var(--shadow-2);
  font-size: 13px;
  color: var(--mg-navy);
  font-weight: 500;
}
.h3-chip-dot{
  width: 22px; height: 22px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--mg-navy), var(--mg-cobalt));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-family: var(--mg-font-mono); font-size: 10px; font-weight: 600;
}
.h3-chip-dot.green{ background: #10B981; }
.h3-chip-dot.cobalt{ background: var(--mg-cobalt); }
.h3-chip-1{ top: 40px; right: -30px; transform: translateZ(200px); }
.h3-chip-2{ top: 350px; left: -10px; transform: translateZ(220px); }

/* ---------- Logo strip ---------- */
.logo-strip{
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
  padding: 32px 0;
  background: var(--mg-paper);
}
.logo-strip-label{
  text-align:center;
  font-family: var(--mg-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  margin-bottom: 24px;
}
.logo-strip-row{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
}
.logo-strip-item{
  text-align:center;
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--mg-ink-300);
  letter-spacing: -0.01em;
  transition: color var(--dur-2) var(--ease);
}
.logo-strip-item:hover{ color: var(--mg-navy); }

/* ---------- Categories filter (Featured products) ---------- */
.cat-tabs{
  display:flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.cat-tab{
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--mg-line);
  background: var(--mg-white);
  color: var(--mg-ink-500);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--dur-2) var(--ease);
}
.cat-tab:hover{ border-color: var(--mg-navy); color: var(--mg-navy); }
.cat-tab.active{ background: var(--mg-navy); color: var(--mg-white); border-color: var(--mg-navy); }

/* ---------- Product grid ---------- */
.prod-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.prod-card{
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  display: flex; flex-direction: column;
}
.prod-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--mg-line-strong); }
.prod-card-img{
  aspect-ratio: 4/3;
  background: var(--mg-paper-2);
  position: relative;
  overflow: hidden;
}
.prod-card-img img{
  width:100%; height:100%; object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}
.prod-card:hover .prod-card-img img{ transform: scale(1.04); }
.prod-card-badge{
  position:absolute; top: 12px; left: 12px;
  font-family: var(--mg-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--mg-navy);
}
.prod-card-body{
  padding: 20px;
  display:flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.prod-card-sku{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  color: var(--mg-ink-400);
  letter-spacing: 0.06em;
}
.prod-card-title{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--mg-navy);
}
.prod-card-meta{
  display:flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 16px;
}
.prod-card-rating{
  display:flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--mg-ink-400);
}
.prod-card-rating .stars{ color: var(--mg-cobalt); letter-spacing: 1px; font-size: 11px;}
.prod-card-price{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--mg-navy);
  letter-spacing: -0.01em;
}

/* ---------- Specialty grid (login-gated marketplace) ---------- */
.spec-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.spec-card{
  position: relative;
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  display: flex; flex-direction: column;
  min-height: 280px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  text-decoration: none;
  color: inherit;
}
.spec-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--mg-line-strong);
}
.spec-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(11,10,78,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-navy);
  margin-bottom: 24px;
}
.spec-card:hover .spec-icon{
  background: var(--mg-cobalt);
  color: var(--mg-white);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.spec-num{
  position: absolute;
  top: 32px; right: 28px;
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mg-ink-300);
}
.spec-title{
  font-family: var(--mg-font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mg-navy);
  margin-bottom: 10px;
  line-height: 1.2;
}
.spec-desc{
  font-size: 14px;
  line-height: 1.55;
  color: var(--mg-ink-500);
  margin-bottom: 24px;
}
.spec-foot{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mg-line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.spec-locked{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}
.spec-arrow{
  font-size: 13px;
  font-weight: 500;
  color: var(--mg-cobalt);
}

/* Dark CTA spec card */
.spec-card-cta{
  background:
    radial-gradient(ellipse 90% 70% at 70% 0%, rgba(30,144,255,0.32), transparent 60%),
    linear-gradient(180deg, var(--mg-navy) 0%, var(--mg-navy-deep) 100%);
  color: var(--mg-white);
  border-color: var(--mg-navy);
}
.spec-card-cta .spec-cta-mark{
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-cobalt-soft);
  margin-bottom: 24px;
}
.spec-card-cta:hover .spec-cta-mark{
  background: rgba(255,255,255,0.16);
}

.spec-foot-line{
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: var(--mg-ink-400);
}
.spec-foot-line a{
  color: var(--mg-cobalt);
  font-weight: 500;
  margin-left: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.spec-foot-line a:hover{ border-color: var(--mg-cobalt); }

/* ============================================================
   FEATURED VENDOR (Skydell Medical)
   ============================================================ */
.featured-vendor{
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(30,144,255,0.22), transparent 60%),
    linear-gradient(180deg, var(--mg-navy) 0%, var(--mg-navy-deep) 100%);
  color: var(--mg-white);
  position: relative;
  overflow: hidden;
}
.featured-vendor::before{
  content:""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.featured-vendor .wrap{ position: relative; z-index: 1; }

.fv-head{
  max-width: 760px;
  margin-bottom: 72px;
}
.fv-eyebrow{
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}
.fv-launch{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-cobalt-soft);
  padding: 6px 12px;
  background: rgba(30,144,255,0.14);
  border: 1px solid rgba(30,144,255,0.32);
  border-radius: 999px;
}
.fv-title{
  font-family: var(--mg-font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--mg-white);
  font-weight: 600;
  margin-bottom: 20px;
  text-wrap: balance;
}
.fv-title em{
  font-style: normal;
  color: var(--mg-cobalt-soft);
  font-family: var(--mg-font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
}
.fv-lede{
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  max-width: 60ch;
}

.fv-triptych{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fv-card{
  background: var(--mg-navy);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  transition: background var(--dur-2) var(--ease);
}
.fv-card:hover{ background: var(--mg-navy-soft); }
.fv-card-num{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-cobalt-soft);
  margin-bottom: 24px;
}
.fv-card-title{
  font-family: var(--mg-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--mg-white);
  line-height: 1.15;
  margin-bottom: 12px;
}
.fv-card-desc{
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin-bottom: 28px;
}
.fv-card-list{
  list-style: none; padding: 0; margin: 0 0 28px 0;
  display: grid; gap: 0;
}
.fv-card-list li{
  font-family: var(--mg-font-body);
  font-size: 14px;
  color: var(--mg-white);
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  letter-spacing: -0.005em;
}
.fv-card-list li:last-child{ border-bottom: 1px solid rgba(255,255,255,0.08); }
.fv-card-meta{
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.fv-foot{
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.fv-foot-text{
  font-family: var(--mg-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ============================================================
   MEDGRID PARTNERS GRID
   ============================================================ */
.partners-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.partner-card{
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-height: 240px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  text-decoration: none;
  color: inherit;
}
.partner-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--mg-line-strong); }
.partner-head{
  display: flex; align-items: center; justify-content: space-between;
}
.partner-mono{
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}
.partner-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mg-ink-300);
  position: relative;
}
.partner-dot.live{
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
.partner-dot.onboarding{
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.16);
}
.partner-dot.open{ background: var(--mg-cobalt-soft); box-shadow: 0 0 0 4px rgba(30,144,255,0.22); }
.partner-logo-box{
  flex: 1;
  background: var(--mg-paper-2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  min-height: 96px;
}
.partner-logo-text{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--mg-navy);
  display: flex; align-items: center; gap: 8px;
}
.partner-logo-mark{
  display: inline-block;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--mg-navy), var(--mg-cobalt));
  border-radius: 3px;
  position: relative;
}
.partner-logo-mark::before, .partner-logo-mark::after{
  content:""; position: absolute; background: #fff;
}
.partner-logo-mark::before{ left: 7px; top: 3px; width: 4px; height: 12px; }
.partner-logo-mark::after{ left: 3px; top: 7px; width: 12px; height: 4px; }
.partner-placeholder{
  font-family: var(--mg-font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.04em;
  color: var(--mg-ink-300);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mg-white);
  border: 1px dashed var(--mg-ink-200);
  border-radius: 50%;
}
.partner-meta{
  display: flex; flex-direction: column; gap: 4px;
}
.partner-name{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--mg-navy);
}
.partner-tag{
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}

/* Live partner gets cobalt accent */
.partner-live{ border-color: rgba(30,144,255,0.32); background: linear-gradient(180deg, var(--mg-white), rgba(30,144,255,0.04)); }
.partner-live .partner-mono{ color: var(--mg-cobalt-deep); }
.partner-live .partner-logo-box{ background: var(--mg-white); border: 1px solid var(--mg-line); }

/* CTA partner card (dark) */
.partner-cta{
  background:
    radial-gradient(ellipse 100% 70% at 80% 0%, rgba(30,144,255,0.28), transparent 60%),
    linear-gradient(180deg, var(--mg-navy) 0%, var(--mg-navy-deep) 100%);
  color: var(--mg-white);
  border-color: var(--mg-navy);
}
.partner-cta .partner-logo-box{ background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.18); }
.partner-cta .partner-plus{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-cobalt-soft);
  border: 1px solid rgba(255,255,255,0.14);
}

/* ============================================================
   COMPLIANCE BAND SECTION
   ============================================================ */
.compliance-band-section{
  background: var(--mg-paper-2);
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}
.compliance-band-head{
  text-align: center;
  margin-bottom: 40px;
}
.compliance-band-head .eyebrow{ display: inline-flex; margin-bottom: 16px; }
.compliance-band-h{
  font-family: var(--mg-font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--mg-navy);
  line-height: 1.1;
  max-width: 18ch;
  margin: 0 auto;
}
.compliance-pill-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}
.compliance-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-navy);
  font-weight: 500;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.compliance-pill:hover{ border-color: var(--mg-line-strong); transform: translateY(-1px); }
.compliance-pill .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #10B981;
}
.compliance-pill.progress .dot{ background: #F59E0B; }
.compliance-pill.progress{ color: #B45309; }
.compliance-band-foot{
  text-align: center;
  font-size: 13px;
  color: var(--mg-ink-400);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.55;
}
.compliance-band-foot a{
  color: var(--mg-cobalt);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.compliance-band-foot a:hover{ border-color: var(--mg-cobalt); }

/* ============================================================
   THREE PILLARS (The MedGrid Standard)
   ============================================================ */
.pillars-section{
  background: var(--mg-paper-2);
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}
.pillars-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.pillar-card{
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  padding: 40px 32px 32px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pillar-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.pillar-num{
  position: absolute;
  top: 28px; right: 32px;
  font-family: var(--mg-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mg-ink-300);
}
.pillar-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(30,144,255,0.10);
  color: var(--mg-cobalt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.pillar-title{
  font-family: var(--mg-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mg-navy);
  line-height: 1.15;
  margin-bottom: 14px;
}
.pillar-desc{
  font-size: 14px;
  color: var(--mg-ink-500);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 38ch;
}
.pillar-list{
  list-style: none; padding: 0; margin: auto 0 0;
  display: grid; gap: 0;
}
.pillar-list li{
  font-size: 13px;
  color: var(--mg-ink-700);
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--mg-line);
  position: relative;
}
.pillar-list li:last-child{ border-bottom: 1px solid var(--mg-line); }
.pillar-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background:
    radial-gradient(circle, var(--mg-cobalt) 30%, transparent 32%) center / 14px no-repeat;
  opacity: 0.7;
}

/* Ratings explainer */
.ratings-explainer{
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.rt-row{
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.rt-tag{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  min-width: 160px;
}
.rt-pills{
  display: flex; gap: 8px; flex-wrap: wrap;
}
.rt-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--mg-paper-2);
  border: 1px solid var(--mg-line);
  font-size: 13px;
  font-weight: 500;
  color: var(--mg-navy);
}
.rt-pill.cobalt{
  background: rgba(30,144,255,0.08);
  border-color: rgba(30,144,255,0.24);
  color: var(--mg-cobalt-deep);
}
.rt-pill-icon{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mg-cobalt);
  box-shadow: 0 0 0 3px rgba(30,144,255,0.14);
}
.rt-foot{
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}

/* ============================================================
   PARTNER CARD ADDITIONS (rating)
   ============================================================ */
.partner-rating{
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--mg-line);
  margin-top: 12px;
}
.partner-rating-star{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--mg-cobalt);
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.partner-rating-star strong{ font-weight: 600; }
.partner-rating-lbl{
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}
.partner-foot{
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  padding-top: 4px;
}
.partner-live .partner-rating-star{ color: var(--mg-cobalt-deep); }

.partners-foot{
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--mg-ink-500);
}
.partners-foot a{
  color: var(--mg-cobalt);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.partners-foot a:hover{ border-color: var(--mg-cobalt); }

/* ============================================================
   EDUCATION PARTNERS
   ============================================================ */
.edu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.edu-card{
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  text-decoration: none;
  color: inherit;
}
.edu-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--mg-line-strong); }
.edu-mark{
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(11,10,78,0.05);
  color: var(--mg-navy);
  display: flex; align-items: center; justify-content: center;
}
.edu-card:hover .edu-mark{ background: var(--mg-cobalt); color: var(--mg-white); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.edu-tag{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-cobalt);
}
.edu-name{
  font-family: var(--mg-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mg-navy);
  line-height: 1.15;
}
.edu-desc{
  font-size: 14px;
  color: var(--mg-ink-500);
  line-height: 1.55;
  max-width: 48ch;
}
.edu-foot{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mg-line);
  display: flex; justify-content: space-between; align-items: center;
}
.edu-meta{
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
}
.edu-arrow{
  font-size: 13px;
  font-weight: 500;
  color: var(--mg-cobalt);
}

@media (max-width: 1024px){
  .pillars-grid{ grid-template-columns: 1fr; }
  .edu-grid{ grid-template-columns: 1fr; }
  .rt-row{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .rt-tag{ min-width: 0; }
}
@media (max-width: 720px){
  .ratings-explainer{ padding: 20px 22px; }
  .partners-foot{ flex-direction: column; align-items: flex-start; }
}


@media (max-width: 1024px){
  .fv-triptych{ grid-template-columns: 1fr; }
  .partners-grid{ grid-template-columns: repeat(2, 1fr); }
  .fv-foot{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px){
  .partners-grid{ grid-template-columns: 1fr; }
  .fv-card{ padding: 28px 24px; }
}


/* ---------- Pharmacy Access (2 paths) ---------- */
.access-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.access-card{
  position: relative;
  padding: 48px 44px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--mg-line);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.access-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.access-light{ background: var(--mg-white); color: var(--mg-navy); }
.access-dark{
  background:
    radial-gradient(ellipse 100% 80% at 80% 0%, rgba(30,144,255,0.28), transparent 60%),
    linear-gradient(180deg, var(--mg-navy) 0%, var(--mg-navy-deep) 100%);
  color: var(--mg-white);
  border-color: var(--mg-navy);
}
.access-dark .path-title, .access-dark h3{ color: var(--mg-white); }
.access-dark .path-desc{ color: rgba(255,255,255,0.72); }
.access-dark .access-req-label{ color: rgba(255,255,255,0.5); }
.access-dark .req-name{ color: var(--mg-white); }
.access-dark .req-desc{ color: rgba(255,255,255,0.6); }
.access-dark .access-reqs li{ border-top-color: rgba(255,255,255,0.10); }
.access-dark .access-reqs li:last-child{ border-bottom-color: rgba(255,255,255,0.10); }
.access-dark .req-num{ background: rgba(255,255,255,0.08); color: var(--mg-cobalt-soft); border-color: rgba(255,255,255,0.10); }
.access-dark .path-num{ color: rgba(255,255,255,0.6); }

.access-top{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.access-mark{
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(11,10,78,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-navy);
}
.access-dark .access-mark{
  background: rgba(255,255,255,0.10);
  color: var(--mg-cobalt-soft);
  border: 1px solid rgba(255,255,255,0.12);
}

.access-req-label{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  margin: 32px 0 16px;
}

.access-reqs{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.access-reqs li{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--mg-line);
}
.access-reqs li:last-child{
  border-bottom: 1px solid var(--mg-line);
}
.req-num{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mg-paper-2);
  border: 1px solid var(--mg-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mg-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--mg-navy);
}
.req-name{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--mg-navy);
  letter-spacing: -0.01em;
}
.req-desc{
  font-size: 13px;
  color: var(--mg-ink-500);
  margin-top: 2px;
  line-height: 1.5;
}

.access-foot{
  margin-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.access-tag{
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-cobalt);
  padding: 6px 12px;
  background: rgba(30,144,255,0.08);
  border-radius: 999px;
}
.access-tag-dark{
  background: rgba(30,144,255,0.18);
  color: var(--mg-cobalt-soft);
}

.access-footnote{
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius);
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px;
  color: var(--mg-ink-500);
  line-height: 1.55;
}
.access-footnote a{
  color: var(--mg-cobalt);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.access-footnote a:hover{ border-color: var(--mg-cobalt); }

@media (max-width: 1024px){
  .access-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .access-card{ padding: 36px 24px; }
}


/* ---------- Two paths ---------- */
.paths-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.path-card{
  position: relative;
  padding: 56px 48px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 460px;
  display: flex; flex-direction: column;
  border: 1px solid var(--mg-line);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.path-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.path-light{ background: var(--mg-white); color: var(--mg-navy); }
.path-dark{
  background:
    radial-gradient(ellipse 100% 80% at 80% 0%, rgba(30,144,255,0.32), transparent 60%),
    linear-gradient(180deg, var(--mg-navy) 0%, var(--mg-navy-deep) 100%);
  color: var(--mg-white);
  border-color: var(--mg-navy);
}
.path-num{
  font-family: var(--mg-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 32px;
  display:flex; gap: 12px; align-items:center;
}
.path-num .slash{ opacity: 0.4; }
.path-light .path-num{ color: var(--mg-ink-400); }
.path-dark .path-num{ color: rgba(255,255,255,0.6); }

.path-title{
  font-family: var(--mg-font-display);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 20px;
}
.path-dark .path-title{ color: var(--mg-white); }
.path-desc{ font-size: 16px; line-height: 1.55; margin-bottom: 32px; max-width: 38ch; }
.path-light .path-desc{ color: var(--mg-ink-500); }
.path-dark .path-desc{ color: rgba(255,255,255,0.72); }

.path-list{
  list-style: none; padding: 0; margin: 0 0 40px 0;
  display: grid; gap: 12px;
}
.path-list li{
  display:flex; align-items: center; gap: 12px;
  font-size: 15px;
  padding: 14px 0;
  border-top: 1px solid var(--mg-line);
}
.path-dark .path-list li{ border-top-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.92); }
.path-list li:last-child{ border-bottom: 1px solid var(--mg-line); }
.path-dark .path-list li:last-child{ border-bottom-color: rgba(255,255,255,0.10); }
.path-list .num{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  color: var(--mg-ink-400);
  width: 28px;
}
.path-dark .path-list .num{ color: rgba(255,255,255,0.4); }

.path-cta{ margin-top: auto; }

/* ---------- Four Journeys ---------- */
.journeys-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.jcard{
  position: relative;
  padding: 48px 44px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 440px;
  display: flex; flex-direction: column;
  border: 1px solid var(--mg-line);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.jcard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.jcard-light{ background: var(--mg-white); color: var(--mg-navy); }
.jcard-light .path-title{ color: var(--mg-navy); }
.jcard-light .path-desc{ color: var(--mg-ink-500); }
.jcard-light .path-list li{ border-top-color: var(--mg-line); }
.jcard-light .path-list li:last-child{ border-bottom-color: var(--mg-line); }
.jcard-light .path-num{ color: var(--mg-ink-400); }

.jcard-dark{
  background:
    radial-gradient(ellipse 100% 80% at 80% 0%, rgba(30,144,255,0.28), transparent 60%),
    linear-gradient(180deg, var(--mg-navy) 0%, var(--mg-navy-deep) 100%);
  color: var(--mg-white);
  border-color: var(--mg-navy);
}
.jcard-dark .path-title{ color: var(--mg-white); }
.jcard-dark .path-desc{ color: rgba(255,255,255,0.72); }
.jcard-dark .path-list li{ border-top-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.92); }
.jcard-dark .path-list li:last-child{ border-bottom-color: rgba(255,255,255,0.10); }
.jcard-dark .path-num{ color: rgba(255,255,255,0.6); }
.jcard-dark .path-list .num{ color: rgba(255,255,255,0.4); }

.jcard-top{
  display:flex; align-items:center; justify-content: space-between;
  margin-bottom: 28px;
}
.jcard-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(11,10,78,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--mg-navy);
}
.jcard-dark .jcard-icon{
  background: rgba(255,255,255,0.08);
  color: var(--mg-cobalt-soft);
  border: 1px solid rgba(255,255,255,0.10);
}

/* ---------- Trust strip ---------- */
.trust-strip{
  margin-top: 56px;
  padding: 32px 40px;
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow-1);
}
.trust-item{ text-align: center; }
.trust-num{
  font-family: var(--mg-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--mg-navy);
  letter-spacing: -0.01em;
}
.trust-item .trust-num:not(:has(span)){
  /* allow stars to color */
}
.trust-item:nth-child(1) .trust-num{ color: var(--mg-cobalt); letter-spacing: 3px; font-family: var(--mg-font-body); font-size: 18px; }
.trust-lbl{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  margin-top: 6px;
}
.trust-divider{
  width: 1px; height: 36px; background: var(--mg-line);
}

/* ---------- How it works ---------- */
.steps{
  position: relative;
}
.steps-row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.steps-row::before{
  content:"";
  position:absolute;
  top: 36px; left: 6%; right: 6%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--mg-ink-200) 0 4px, transparent 4px 10px);
  z-index: 0;
}
.step{
  position: relative;
  background: var(--mg-paper);
  padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 1;
}
.step-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  font-family: var(--mg-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--mg-navy);
  letter-spacing: 0.02em;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.step:hover .step-num{ background: var(--mg-navy); color: var(--mg-white); border-color: var(--mg-navy); }
.step-label{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  color: var(--mg-ink-400);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
}
.step-title{
  font-family: var(--mg-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mg-navy);
  margin: 0;
}
.step-desc{
  font-size: 14px;
  color: var(--mg-ink-500);
  line-height: 1.5;
}

/* ---------- Doctors ---------- */
.docs-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.doc-card{
  background: var(--mg-white);
  border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.doc-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.doc-img{
  aspect-ratio: 1/1.15;
  background: var(--mg-paper-2);
  overflow: hidden;
  position: relative;
}
.doc-img img{ width:100%; height:100%; object-fit: cover; filter: saturate(0.9); transition: filter var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.doc-card:hover .doc-img img{ filter: saturate(1); transform: scale(1.04); }
.doc-meta{ padding: 16px; }
.doc-name{
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--mg-navy);
}
.doc-role{
  font-size: 12px;
  color: var(--mg-ink-400);
  margin-top: 2px;
}
.doc-link{
  display:inline-flex; align-items: center; gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mg-cobalt);
  margin-top: 10px;
}
.doc-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Courses ---------- */
.courses-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.course-card{
  background: var(--mg-white);
  border:1px solid var(--mg-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display:flex; flex-direction: column;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.course-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-3); }
.course-img{
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  background: var(--mg-paper-2);
}
.course-img img{ width:100%; height:100%; object-fit: cover; }
.course-img-tag{
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(11,10,78,0.85);
  color: var(--mg-white);
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.course-body{ padding: 24px; display:flex; flex-direction: column; gap: 12px; flex: 1; }
.course-title{
  font-family: var(--mg-font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--mg-navy);
  line-height: 1.2;
}
.course-desc{
  font-size: 14px;
  color: var(--mg-ink-500);
  line-height: 1.5;
}
.course-footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--mg-line);
  display:flex; justify-content: space-between; align-items:center;
}
.course-meta{ font-family: var(--mg-font-mono); font-size: 11px; color: var(--mg-ink-400); letter-spacing: 0.06em; text-transform: uppercase; }
.course-arrow{ color: var(--mg-cobalt); font-size: 14px; }

/* ---------- Testimonials ---------- */
.testi-section{
  background: var(--mg-navy);
  color: var(--mg-white);
  position: relative;
  overflow: hidden;
}
.testi-section::before{
  content:"";
  position:absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.testi-section .eyebrow{ color: rgba(255,255,255,0.55); }
.testi-section .eyebrow::before{ background: rgba(255,255,255,0.3); }
.testi-section h2{ color: var(--mg-white); }
.testi-section h2 em{ font-style: normal; color: var(--mg-cobalt-soft); font-family: var(--mg-font-serif); font-weight: 400; }
.testi-section .lede{ color: rgba(255,255,255,0.65); }
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 32px;
  display:flex; flex-direction: column;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.testi-card:hover{ background: rgba(255,255,255,0.05); transform: translateY(-4px); }
.testi-quote-mark{
  font-family: var(--mg-font-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--mg-cobalt);
  margin-bottom: 16px;
}
.testi-title{
  font-family: var(--mg-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--mg-white);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.testi-text{
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 24px;
}
.testi-author{
  display:flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.testi-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mg-cobalt);
  overflow: hidden;
}
.testi-avatar img{ width:100%; height:100%; object-fit: cover; }
.testi-author-name{
  font-size: 14px; color: var(--mg-white); font-weight: 500;
}
.testi-author-role{
  font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 1px;
}

/* ---------- CTA band ---------- */
.cta-band{
  padding: 96px 0;
  text-align: center;
}
.cta-band h2{ font-size: clamp(40px, 5vw, 72px); margin-bottom: 24px; }
.cta-band h2 em{ font-family: var(--mg-font-serif); font-weight: 400; color: var(--mg-cobalt); font-style: normal; }
.cta-band .lede{ margin: 0 auto 40px; }
.cta-band-ctas{ display:flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer{
  background: var(--mg-navy-deep);
  color: rgba(255,255,255,0.75);
  padding: 96px 0 32px;
  position: relative;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-brand img{ height: 32px; margin-bottom: 24px; filter: brightness(0) invert(1); }
.footer-brand p{
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  max-width: 36ch;
  margin-bottom: 24px;
  line-height: 1.55;
}
.footer-subscribe{
  display:flex; gap: 8px; max-width: 360px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
}
.footer-subscribe input{
  flex:1; background: transparent; border: 0; outline: 0;
  color: var(--mg-white);
  font-size: 14px;
  padding: 8px 0;
  font-family: var(--mg-font-body);
}
.footer-subscribe input::placeholder{ color: rgba(255,255,255,0.4); }
.footer-subscribe button{
  background: var(--mg-cobalt);
  color: var(--mg-white);
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.footer-subscribe button:hover{ background: var(--mg-cobalt-deep); }

.footer-col h5{
  font-family: var(--mg-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin: 0 0 20px 0;
}
.footer-col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-col a, .footer-col li{
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  transition: color var(--dur-1) var(--ease);
}
.footer-col a:hover{ color: var(--mg-white); }
.footer-contact-item{ display:flex; align-items: flex-start; gap: 10px; }
.footer-contact-item svg{ flex-shrink: 0; margin-top: 2px; }

.footer-bot{
  display:flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}
.footer-bot a{ color: rgba(255,255,255,0.6); margin-left: 24px; }
.footer-bot a:hover{ color: var(--mg-white); }

/* ---------- Section: Marketplace (categories) ---------- */
.featured-head{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 40px;
  gap: 32px;
}
.featured-head .lede{ max-width: 36ch; }

/* ---------- Animations: reveal-on-scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal].is-in{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--i,0) * 80ms);
}
[data-reveal-stagger].is-in > *{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Tweaks panel (design-only; remove for Frappe) ---------- */
.tweaks{
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background: var(--mg-white);
  border: 1px solid var(--mg-line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  width: 280px;
  font-family: var(--mg-font-body);
  font-size: 13px;
  color: var(--mg-ink-900);
  overflow: hidden;
  transform: translateY(8px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.tweaks.open{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.tweaks-header{
  display:flex; align-items:center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mg-line);
  background: var(--mg-paper-2);
}
.tweaks-title{ font-family: var(--mg-font-display); font-weight: 600; font-size: 14px; color: var(--mg-navy); letter-spacing: -0.01em;}
.tweaks-close{ background: transparent; border: 0; color: var(--mg-ink-400); font-size: 18px; line-height: 1;}
.tweaks-body{ padding: 14px 16px; display: grid; gap: 16px; }
.tweaks-section-label{
  font-family: var(--mg-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-ink-400);
  margin-bottom: 8px;
}
.tweaks-segments{
  display:flex; gap: 4px;
  background: var(--mg-paper-2);
  padding: 4px;
  border-radius: 8px;
}
.tweaks-seg{
  flex:1;
  background: transparent;
  border: 0;
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--mg-ink-500);
  font-weight: 500;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tweaks-seg:hover{ color: var(--mg-navy); }
.tweaks-seg.active{ background: var(--mg-white); color: var(--mg-navy); box-shadow: var(--shadow-1); }
.tweaks-toggle{
  position: fixed; bottom: 20px; right: 20px;
  z-index: 9998;
  background: var(--mg-navy);
  color: var(--mg-white);
  border: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  box-shadow: var(--shadow-3);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.tweaks-toggle:hover{ transform: scale(1.05); background: var(--mg-navy-deep); }
.tweaks-toggle.hidden{ opacity: 0; pointer-events: none; }

/* ============================================================
   Tweak: palette
   ============================================================ */
body[data-palette="navy-emerald"]{
  --mg-navy: #07242E;
  --mg-navy-deep: #03161D;
  --mg-navy-soft: #0F3F4F;
  --mg-cobalt: #00A878;
  --mg-cobalt-soft: #2AD09B;
  --mg-cobalt-deep: #007D5A;
}
body[data-palette="black"]{
  --mg-navy: #0A0A0A;
  --mg-navy-deep: #000000;
  --mg-navy-soft: #1A1A1A;
  --mg-cobalt: #C9A24E;
  --mg-cobalt-soft: #E4C172;
  --mg-cobalt-deep: #997A33;
}
body[data-palette="teal"]{
  --mg-navy: #0F4C5C;
  --mg-navy-deep: #07303B;
  --mg-navy-soft: #1B6B7F;
  --mg-cobalt: #14B8A6;
  --mg-cobalt-soft: #2DD4BF;
  --mg-cobalt-deep: #0F8A7E;
}

/* ============================================================
   Tweak: display font
   ============================================================ */
body[data-display="serif"]{
  --mg-font-display: "Newsreader", "Source Serif 4", Georgia, serif;
}
body[data-display="serif"] h1,
body[data-display="serif"] h2,
body[data-display="serif"] h3,
body[data-display="serif"] h4,
body[data-display="serif"] .hero-title,
body[data-display="serif"] .path-title,
body[data-display="serif"] .display{
  font-weight: 400;
  letter-spacing: -0.02em;
}
body[data-display="serif"] .hero-title em,
body[data-display="serif"] .testi-section h2 em,
body[data-display="serif"] .cta-band h2 em{
  font-family: var(--mg-font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
}

body[data-display="grotesk"]{
  --mg-font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
}

/* ============================================================
   Tweak: hero layout
   ============================================================ */
body[data-hero="centered"] .hero-grid{
  grid-template-columns: 1fr;
  text-align: center;
}
body[data-hero="centered"] .hero-eyebrow-row{ justify-content: center; }
body[data-hero="centered"] .hero-ctas{ justify-content: center; }
body[data-hero="centered"] .hero-sub{ margin-left: auto; margin-right: auto; }
body[data-hero="centered"] .hero-stats{ max-width: 760px; margin-left:auto; margin-right:auto; }
body[data-hero="centered"] .hero-3d{ display: none; }
body[data-hero="centered"] .hero-centered-img{
  display: block;
  margin: 64px auto 0;
  max-width: 1000px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--mg-line);
}

body[data-hero="asymmetric"] .hero-grid{
  grid-template-columns: 1fr;
}
body[data-hero="asymmetric"] .hero-3d{ display: none; }
body[data-hero="asymmetric"] .hero-title{ font-size: clamp(64px, 11vw, 160px); letter-spacing: -0.05em; }
body[data-hero="asymmetric"] .hero-asym-callouts{ display: grid; }

.hero-centered-img{ display: none; }
.hero-asym-callouts{
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--mg-line);
}
.hero-asym-callout-label{
  font-family: var(--mg-font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mg-ink-400);
  margin-bottom: 8px;
}
.hero-asym-callout-val{
  font-family: var(--mg-font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mg-navy);
}
.hero-asym-callout-desc{ font-size: 14px; color: var(--mg-ink-500); max-width: 28ch; margin-top: 6px;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; gap: 64px; }
  .hero-3d{ height: 520px; }
  .prod-grid{ grid-template-columns: repeat(2, 1fr); }
  .spec-grid{ grid-template-columns: repeat(2, 1fr); }
  .docs-grid{ grid-template-columns: repeat(3, 1fr); }
  .courses-grid{ grid-template-columns: 1fr; }
  .paths-grid{ grid-template-columns: 1fr; }
  .journeys-grid{ grid-template-columns: 1fr; }
  .trust-strip{ grid-template-columns: 1fr 1fr; gap: 20px; }
  .trust-strip .trust-divider{ display: none; }
  .testi-grid{ grid-template-columns: 1fr; }
  .steps-row{ grid-template-columns: repeat(2, 1fr); }
  .steps-row::before{ display:none; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .logo-strip-row{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  :root{ --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 24px; --fs-hero: 56px; }
  .section{ padding: 80px 0; }
  .section-sm{ padding: 64px 0; }
  .nav-links{ display: none; }
  .hero-stats{ grid-template-columns: 1fr; gap: 20px; }
  .prod-grid{ grid-template-columns: 1fr; }
  .spec-grid{ grid-template-columns: 1fr; }
  .docs-grid{ grid-template-columns: 1fr 1fr; }
  .steps-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; gap: 40px; }
  .section-header.split{ grid-template-columns: 1fr; }
  .path-card{ padding: 40px 28px; min-height: 0; }
  .jcard{ padding: 36px 24px; min-height: 0; }
  .trust-strip{ grid-template-columns: 1fr; padding: 24px; }
}

/* ============================================================================
   Portal pages — on-brand restyle
   ----------------------------------------------------------------------------
   The /portal/* pages use a `.mg-3d` wrapper and `.mg-card / .mg-grid / .mg-pill`
   etc. classes (and inline styles that reference `--mg-text-muted` / `--mg-accent`).
   Previously these tokens were either undefined or lived in a separate
   `medgrid_portal_3d.css` that wasn't actually injected on portal pages.
   This block restyles those classes using the brand tokens above so portals
   feel like rooms in the same building as the homepage:
     navy headings, cobalt accent, paper background, pill buttons,
     soft shadow, Inter Tight display + Inter body + JetBrains Mono eyebrow.
============================================================================ */

.mg-3d {
  /* Aliases for the inline-style CSS vars hub.html and friends reference */
  --mg-accent:       var(--mg-cobalt);
  --mg-accent-deep:  var(--mg-cobalt-deep);
  --mg-card:         var(--mg-white);
  --mg-text:         var(--mg-ink-900);
  --mg-text-muted:   var(--mg-ink-500);
  --mg-line:         var(--mg-line);

  /* Layout */
  font-family: var(--mg-font-body);
  color: var(--mg-ink-900);
  background: var(--mg-paper);
  min-height: 100vh;
  padding: 48px 24px 80px;
}

/* Per-portal class hooks — kept for HTML compatibility but no longer
   shuffle the accent. Every portal uses the brand cobalt; only the
   background gets a subtle paper-tint so pages feel distinct. */
.mg-3d--rep      { background: linear-gradient(180deg, var(--mg-paper) 0%, #F3F5FA 100%); }
.mg-3d--vendor   { background: linear-gradient(180deg, var(--mg-paper) 0%, #F2F7F4 100%); }
.mg-3d--admin    { background: linear-gradient(180deg, var(--mg-paper) 0%, #F0F4FA 100%); }
.mg-3d--insights { background: linear-gradient(180deg, var(--mg-paper) 0%, #FBF7F0 100%); }

/* ── Layout primitives ─────────────────────────────────────────────────── */
.mg-3d .mg-container { max-width: 1240px; margin: 0 auto; }

.mg-3d .mg-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px; gap: 16px;
}
.mg-3d .mg-header h1 {
  margin: 0;
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--mg-navy);
  /* Solid navy — NOT gradient text */
}
.mg-3d .mg-header .mg-sub {
  font-family: var(--mg-font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mg-ink-400);
}

.mg-3d .mg-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mg-3d .mg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-3d .mg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-3d .mg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mg-3d .mg-grid--3, .mg-3d .mg-grid--4, .mg-3d .mg-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* ── Cards — flat, paper-weight elevation, soft hover ──────────────────── */
.mg-3d .mg-card {
  position: relative;
  background: var(--mg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mg-line);
  box-shadow: var(--shadow-1);
  padding: 24px;
  transition:
    transform     var(--dur-2) var(--ease),
    box-shadow    var(--dur-2) var(--ease),
    border-color  var(--dur-2) var(--ease);
}
.mg-3d .mg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--mg-line-strong);
}
.mg-3d .mg-card--interactive { cursor: pointer; text-decoration: none; }
.mg-3d .mg-card--accent {
  background: var(--mg-navy);
  color: var(--mg-white);
  border-color: transparent;
}
.mg-3d .mg-card--accent h2,
.mg-3d .mg-card--accent h3 { color: var(--mg-white); }
.mg-3d .mg-card--accent .mg-kpi-label { color: rgba(255,255,255,0.65); }
.mg-3d .mg-card--accent .mg-pill { background: rgba(255,255,255,0.12); color: var(--mg-white); }

/* KPI cells */
.mg-3d .mg-kpi-label {
  font-family: var(--mg-font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mg-ink-400);
}
.mg-3d .mg-kpi-value {
  font-family: var(--mg-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.025em; line-height: 1.05;
  color: var(--mg-navy);
}

/* ── Pills, badges, chips ──────────────────────────────────────────────── */
.mg-3d .mg-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mg-font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--mg-ink-50); color: var(--mg-ink-700);
  font-weight: 500;
}
.mg-3d .mg-pill--accent { background: rgba(30,144,255,0.10); color: var(--mg-cobalt-deep); }
.mg-3d .mg-pill--success { background: rgba(15,155,108,0.10);  color: #0F9B6C; }
.mg-3d .mg-pill--warn    { background: rgba(199,120,0,0.10);   color: #C77800; }
.mg-3d .mg-pill--danger  { background: rgba(200,42,42,0.10);   color: #C82A2A; }

/* ── Section headers ───────────────────────────────────────────────────── */
.mg-3d .mg-section-h {
  display: flex; align-items: center; gap: 10px;
  margin: 40px 0 18px; padding: 0 4px;
}
.mg-3d .mg-section-h h2 {
  margin: 0;
  font-family: var(--mg-font-display);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mg-navy);
}
.mg-3d .mg-section-h .mg-section-h-tag {
  font-family: var(--mg-font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mg-ink-400);
  padding: 3px 8px; border-radius: 999px;
  background: var(--mg-ink-50);
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.mg-3d .mg-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--mg-white); border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--mg-line);
  box-shadow: var(--shadow-1);
}
.mg-3d .mg-table th, .mg-3d .mg-table td {
  padding: 14px 16px; text-align: left; vertical-align: middle;
  font-size: 14px; border-bottom: 1px solid var(--mg-line);
}
.mg-3d .mg-table th {
  font-family: var(--mg-font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mg-ink-400); font-weight: 500;
  background: var(--mg-paper-2);
}
.mg-3d .mg-table tbody tr { transition: background var(--dur-2) var(--ease); }
.mg-3d .mg-table tbody tr:hover { background: var(--mg-ink-50); }
.mg-3d .mg-table tbody tr:last-child td { border-bottom: none; }

/* ── Buttons inside portals (matches .btn-cobalt) ──────────────────────── */
.mg-3d .mg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--mg-font-body);
  font-weight: 500; font-size: 14px;
  letter-spacing: -0.005em;
  background: var(--mg-cobalt); color: var(--mg-white);
  border: 1px solid transparent; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(30,144,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  text-decoration: none;
}
.mg-3d .mg-btn:hover { background: var(--mg-cobalt-deep); transform: translateY(-1px); }
.mg-3d .mg-btn--ghost {
  background: transparent; color: var(--mg-navy);
  border-color: var(--mg-line-strong); box-shadow: none;
}
.mg-3d .mg-btn--ghost:hover { background: var(--mg-white); border-color: var(--mg-navy); }

/* ── Leaderboard rows ──────────────────────────────────────────────────── */
.mg-3d .mg-leader {
  display: grid; grid-template-columns: 32px 36px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  transition: background var(--dur-2) var(--ease);
}
.mg-3d .mg-leader:hover { background: var(--mg-ink-50); }
.mg-3d .mg-leader-rank {
  font-family: var(--mg-font-mono);
  font-size: 13px; font-weight: 600; color: var(--mg-ink-400);
}
.mg-3d .mg-leader-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mg-navy); color: var(--mg-white);
  font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.mg-3d .mg-leader-name { font-weight: 500; font-size: 14px; color: var(--mg-ink-900); }
.mg-3d .mg-leader-metric {
  font-family: var(--mg-font-mono);
  font-weight: 600; font-size: 14px; color: var(--mg-cobalt-deep);
}

/* ── Badges (gamification) ─────────────────────────────────────────────── */
.mg-3d .mg-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 12px; border-radius: var(--radius);
  background: var(--mg-white); border: 1px solid var(--mg-line);
  text-align: center; font-size: 12px; font-weight: 500;
  color: var(--mg-ink-400);
  transition: border-color var(--dur-2) var(--ease);
}
.mg-3d .mg-badge--earned {
  color: var(--mg-ink-900);
  border-color: var(--mg-cobalt);
  box-shadow: 0 0 0 3px rgba(30,144,255,0.08);
}
.mg-3d .mg-badge .mg-badge-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mg-ink-50); color: var(--mg-ink-300);
  font-size: 20px;
}
.mg-3d .mg-badge--earned .mg-badge-icon {
  background: var(--mg-cobalt); color: var(--mg-white);
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
.mg-3d .mg-progress {
  width: 100%; height: 8px;
  background: var(--mg-ink-100); border-radius: 999px;
  overflow: hidden;
}
.mg-3d .mg-progress-fill {
  height: 100%;
  background: var(--mg-cobalt);
  border-radius: 999px;
  transition: width 700ms var(--ease);
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.mg-3d .mg-empty {
  text-align: center; padding: 64px 24px;
  color: var(--mg-ink-400);
}

/* ── Certificates page (the only other portal with bespoke styles) ─────── */
.mg-3d .mg-portal-section { padding: 48px 0; }
.mg-3d .mg-portal-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.mg-3d .mg-portal-head h1 {
  font-family: var(--mg-font-display);
  font-size: clamp(28px, 3vw, 36px); font-weight: 600;
  color: var(--mg-navy); letter-spacing: -0.025em; margin: 0;
}
.mg-3d .mg-portal-sub { color: var(--mg-ink-500); font-size: 15px; line-height: 1.55; }
.mg-3d .mg-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mg-font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mg-ink-400); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.mg-3d .mg-back-link:hover { color: var(--mg-navy); border-bottom-color: var(--mg-line-strong); }
.mg-3d .mg-cert-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.mg-3d .mg-cert-card {
  background: var(--mg-white); border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-1);
}
.mg-3d .mg-cert-meta { font-size: 13px; color: var(--mg-ink-500); margin-bottom: 12px; }
.mg-3d .mg-cert-actions { margin-top: 16px; display: flex; gap: 8px; }
.mg-3d .mg-mono { font-family: var(--mg-font-mono); font-size: 12px; }
.mg-3d .mg-empty-state {
  text-align: center; padding: 80px 24px;
  color: var(--mg-ink-400);
  background: var(--mg-white); border: 1px solid var(--mg-line);
  border-radius: var(--radius-lg);
}

/* ── Motion-reduced + print ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mg-3d * { transition: none !important; animation: none !important; }
}
@media print {
  .mg-3d * { box-shadow: none !important; }
  .mg-3d .mg-card { border: 1px solid #ccc; break-inside: avoid; }
}