/* ============================================================
   Healthcare AI — Teal/Green Material Design 3 theme override
   Seeded from a calming teal primary (#006A60) with tertiary
   accent (#4A6363). Generated via Material Theme Builder logic.
   ============================================================ */

:root {
  /* ===== Custom teal primary tones ===== */
  --md-ref-primary-0:   #000000;
  --md-ref-primary-10:  #00201C;
  --md-ref-primary-20:  #003731;
  --md-ref-primary-30:  #005048;
  --md-ref-primary-40:  #006A60;
  --md-ref-primary-50:  #3E8478;
  --md-ref-primary-60:  #5B9F92;
  --md-ref-primary-70:  #76BAAC;
  --md-ref-primary-80:  #91D6C8;
  --md-ref-primary-90:  #AEF2E3;
  --md-ref-primary-95:  #C8FFF1;
  --md-ref-primary-99:  #F6FFFB;
  --md-ref-primary-100: #FFFFFF;

  /* ===== Custom secondary (muted teal-green) ===== */
  --md-ref-secondary-10: #0B201D;
  --md-ref-secondary-20: #203531;
  --md-ref-secondary-30: #374B47;
  --md-ref-secondary-40: #4F635F;
  --md-ref-secondary-50: #687C77;
  --md-ref-secondary-60: #819691;
  --md-ref-secondary-70: #9CB0AC;
  --md-ref-secondary-80: #B7CCC7;
  --md-ref-secondary-90: #D3E8E3;
  --md-ref-secondary-95: #E1F6F1;

  /* ===== Custom tertiary (cool blue-slate for trust) ===== */
  --md-ref-tertiary-10: #001F29;
  --md-ref-tertiary-20: #00363F;
  --md-ref-tertiary-30: #1C4C5A;
  --md-ref-tertiary-40: #366472;
  --md-ref-tertiary-50: #4F7D8C;
  --md-ref-tertiary-60: #6897A6;
  --md-ref-tertiary-70: #82B2C2;
  --md-ref-tertiary-80: #9DCDDD;
  --md-ref-tertiary-90: #BDE9FA;
  --md-ref-tertiary-95: #DFF4FF;

  /* Neutral bends slightly green */
  --md-ref-neutral-10: #191C1B;
  --md-ref-neutral-20: #2D3130;
  --md-ref-neutral-90: #E0E3E2;
  --md-ref-neutral-95: #EFF1F0;
  --md-ref-neutral-98: #F8FAF8;
  --md-ref-neutral-variant-30: #3F4947;
  --md-ref-neutral-variant-50: #6F7976;
  --md-ref-neutral-variant-80: #BEC9C6;
  --md-ref-neutral-variant-90: #DAE5E1;

  /* surface greens */
  --md-sys-surface:                 #F5FAF8;
  --md-sys-background:              #F5FAF8;
  --md-sys-surface-container-lowest:#FFFFFF;
  --md-sys-surface-container-low:   #EFF5F2;
  --md-sys-surface-container:       #E8F0ED;
  --md-sys-surface-container-high:  #DFE8E5;
  --md-sys-surface-container-highest:#D7E1DE;
}

[data-theme="dark"] {
  --md-sys-surface:                 #0E1513;
  --md-sys-background:              #0E1513;
  --md-sys-on-surface:              #DEE4E1;
  --md-sys-on-background:           #DEE4E1;
  --md-sys-surface-container-lowest:#080E0D;
  --md-sys-surface-container-low:   #151C1A;
  --md-sys-surface-container:       #1A211F;
  --md-sys-surface-container-high:  #232B29;
  --md-sys-surface-container-highest:#2E3634;
  --md-sys-outline:                 #899390;
  --md-sys-outline-variant:         #3F4947;
}

/* ---- App base ---- */
html, body {
  background: var(--md-sys-background);
  color: var(--md-sys-on-background);
  font-family: var(--md-sys-typeface-plain);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 400ms var(--md-sys-motion-easing-standard),
              color 400ms var(--md-sys-motion-easing-standard);
}

* { box-sizing: border-box; }

a { color: inherit; }

::selection { background: var(--md-sys-primary-container); color: var(--md-sys-on-primary-container); }

.material-symbols-outlined,
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* ---- Utility ---- */
.container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .container { padding: 0 40px; } }

.section { padding: 96px 0; }
@media (min-width: 900px) { .section { padding: 128px 0; } }

.eyebrow {
  font-family: var(--md-sys-typeface-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--md-sys-primary);
  font-weight: 500;
}

.surface-divider {
  border-top: 1px solid var(--md-sys-outline-variant);
}

/* Elevated card */
.m3-card-elevated {
  background: var(--md-sys-surface-container-low);
  border-radius: 12px;
  box-shadow: var(--md-sys-elevation-1);
  transition: box-shadow 250ms var(--md-sys-motion-easing-standard),
              transform 250ms var(--md-sys-motion-easing-standard);
}
.m3-card-elevated:hover {
  box-shadow: var(--md-sys-elevation-3);
  transform: translateY(-2px);
}
.m3-card-filled {
  background: var(--md-sys-surface-container-highest);
  border-radius: 12px;
}
.m3-card-outlined {
  background: var(--md-sys-surface);
  border: 1px solid var(--md-sys-outline-variant);
  border-radius: 12px;
}

/* Chip */
.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--md-sys-outline);
  background: transparent;
  color: var(--md-sys-on-surface-variant);
  font: 500 14px/1 var(--md-sys-typeface-plain);
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 120ms var(--md-sys-motion-easing-standard);
}
.m3-chip .material-symbols-outlined { font-size: 18px; }
.m3-chip.selected {
  background: var(--md-sys-secondary-container);
  color: var(--md-sys-on-secondary-container);
  border-color: transparent;
}
.m3-chip:hover { background: color-mix(in oklab, var(--md-sys-on-surface) 8%, transparent); }
.m3-chip.selected:hover { background: color-mix(in oklab, var(--md-sys-on-secondary-container) 8%, var(--md-sys-secondary-container)); }

/* Buttons */
.m3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: 9999px;
  border: none;
  font: 500 14px/40px var(--md-sys-typeface-plain);
  letter-spacing: 0.1px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 200ms, background 200ms, transform 120ms;
}
.m3-btn .material-symbols-outlined { font-size: 18px; }
.m3-btn:active { transform: scale(0.98); }
.m3-btn--filled { background: var(--md-sys-primary); color: var(--md-sys-on-primary); }
.m3-btn--filled:hover { box-shadow: var(--md-sys-elevation-1); background: color-mix(in oklab, var(--md-sys-primary) 92%, white); }
.m3-btn--tonal { background: var(--md-sys-secondary-container); color: var(--md-sys-on-secondary-container); }
.m3-btn--tonal:hover { box-shadow: var(--md-sys-elevation-1); }
.m3-btn--outlined { background: transparent; color: var(--md-sys-primary); border: 1px solid var(--md-sys-outline); }
.m3-btn--outlined:hover { background: color-mix(in oklab, var(--md-sys-primary) 8%, transparent); }
.m3-btn--text { background: transparent; color: var(--md-sys-primary); padding: 0 12px; }
.m3-btn--text:hover { background: color-mix(in oklab, var(--md-sys-primary) 8%, transparent); }
.m3-btn--elevated { background: var(--md-sys-surface-container-low); color: var(--md-sys-primary); box-shadow: var(--md-sys-elevation-1); }
.m3-btn--elevated:hover { box-shadow: var(--md-sys-elevation-2); }

/* FAB */
.m3-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  height: 56px;
  padding: 0 20px 0 16px;
  border-radius: 16px;
  border: none;
  background: var(--md-sys-primary-container);
  color: var(--md-sys-on-primary-container);
  box-shadow: var(--md-sys-elevation-3);
  font: 500 14px/1 var(--md-sys-typeface-plain);
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow 200ms, transform 300ms var(--md-sys-motion-easing-emphasized);
}
.m3-fab:hover { box-shadow: var(--md-sys-elevation-4); }
.m3-fab .material-symbols-outlined { font-size: 24px; }
.m3-fab--hidden { transform: translateY(120px); opacity: 0; pointer-events: none; }

/* Segmented button */
.m3-segmented {
  display: inline-flex;
  border: 1px solid var(--md-sys-outline);
  border-radius: 9999px;
  overflow: hidden;
  height: 40px;
}
.m3-segmented button {
  background: transparent;
  border: none;
  padding: 0 16px;
  font: 500 14px/1 var(--md-sys-typeface-plain);
  letter-spacing: 0.1px;
  color: var(--md-sys-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 150ms;
}
.m3-segmented button + button { border-left: 1px solid var(--md-sys-outline); }
.m3-segmented button.active {
  background: var(--md-sys-secondary-container);
  color: var(--md-sys-on-secondary-container);
}
.m3-segmented .material-symbols-outlined { font-size: 18px; }

/* Text field (outlined) */
.m3-textfield {
  position: relative;
  margin-top: 8px;
}
.m3-textfield input,
.m3-textfield textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--md-sys-outline);
  border-radius: 4px;
  color: var(--md-sys-on-surface);
  font: 400 16px/24px var(--md-sys-typeface-plain);
  padding: 16px;
  outline: none;
  transition: border 150ms, box-shadow 150ms;
  font-family: var(--md-sys-typeface-plain);
}
.m3-textfield textarea { resize: vertical; min-height: 120px; }
.m3-textfield input:focus,
.m3-textfield textarea:focus {
  border-color: var(--md-sys-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-primary);
}
.m3-textfield label {
  position: absolute;
  top: 14px;
  left: 12px;
  padding: 0 4px;
  color: var(--md-sys-on-surface-variant);
  background: var(--md-sys-background);
  font: 400 16px/1 var(--md-sys-typeface-plain);
  pointer-events: none;
  transition: all 150ms var(--md-sys-motion-easing-standard);
}
.m3-textfield input:focus + label,
.m3-textfield input:not(:placeholder-shown) + label,
.m3-textfield textarea:focus + label,
.m3-textfield textarea:not(:placeholder-shown) + label {
  top: -8px;
  font-size: 12px;
  color: var(--md-sys-primary);
}

/* Top app bar */
.m3-appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 50;
  background: transparent;
  backdrop-filter: blur(0);
  transition: background 300ms var(--md-sys-motion-easing-standard),
              backdrop-filter 300ms,
              box-shadow 300ms;
  display: flex;
  align-items: center;
}
.m3-appbar.scrolled {
  background: color-mix(in oklab, var(--md-sys-surface-container) 85%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--md-sys-elevation-2);
}
.m3-appbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
}
@media (min-width: 900px) { .m3-appbar__inner { padding: 0 40px; } }
.m3-appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--md-sys-on-surface);
  font: 500 20px/1 var(--md-sys-typeface-brand);
  letter-spacing: -0.01em;
}
.m3-appbar__brand-mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--md-sys-primary);
  color: var(--md-sys-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m3-appbar__brand-mark .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 1; }
.m3-appbar__nav {
  flex: 1;
  display: none;
  gap: 4px;
  margin-left: 16px;
}
@media (min-width: 900px) { .m3-appbar__nav { display: flex; } }
.m3-appbar__nav a {
  padding: 8px 14px;
  border-radius: 9999px;
  text-decoration: none;
  color: var(--md-sys-on-surface-variant);
  font: 500 14px/1 var(--md-sys-typeface-plain);
  letter-spacing: 0.1px;
  transition: background 150ms, color 150ms;
}
.m3-appbar__nav a:hover {
  background: color-mix(in oklab, var(--md-sys-on-surface) 8%, transparent);
  color: var(--md-sys-on-surface);
}
.m3-appbar__spacer { flex: 1; }
.m3-appbar__actions { display: inline-flex; align-items: center; gap: 8px; }

/* Icon button */
.m3-iconbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--md-sys-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
}
.m3-iconbtn:hover { background: color-mix(in oklab, var(--md-sys-on-surface) 8%, transparent); }
.m3-iconbtn .material-symbols-outlined { font-size: 24px; }

/* Hero */
.hero {
  position: relative;
  min-height: 100dvh;
  padding-top: 128px;
  padding-bottom: 80px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
}
.hero__meshbg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, color-mix(in oklab, var(--md-sys-primary) 12%, transparent), transparent 60%),
    radial-gradient(ellipse 500px 300px at 85% 40%, color-mix(in oklab, var(--md-sys-tertiary) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 500px 500px at 50% 100%, color-mix(in oklab, var(--md-sys-primary-container) 40%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__content { position: relative; z-index: 1; }
.hero__title {
  font-family: var(--md-sys-typeface-brand);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: var(--md-sys-on-surface);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--md-sys-primary), var(--md-sys-tertiary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  margin: 24px 0 0;
  max-width: 560px;
  font: 400 18px/28px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
}
@media (min-width: 900px) { .hero__sub { font-size: 20px; line-height: 30px; } }
.hero__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__chips {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 580px;
  margin-left: auto;
}

/* Section label with number */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; }
}
.sec-head h2 {
  font-family: var(--md-sys-typeface-brand);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 12px 0 0;
  color: var(--md-sys-on-surface);
}
.sec-head p {
  font: 400 18px/28px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
  margin: 0;
  max-width: 480px;
}

/* Reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--md-sys-motion-easing-emphasized),
              transform 700ms var(--md-sys-motion-easing-emphasized);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 400ms; }

/* Footer */
.m3-footer {
  background: var(--md-sys-surface-container);
  padding: 64px 0 24px;
  margin-top: 80px;
}
.m3-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 700px) {
  .m3-footer__grid { grid-template-columns: 1fr 1fr; }
}
.m3-footer h4 {
  font: 500 12px/16px var(--md-sys-typeface-plain);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--md-sys-on-surface-variant);
  margin: 0 0 16px;
}
.m3-footer a {
  display: block;
  text-decoration: none;
  color: var(--md-sys-on-surface);
  padding: 6px 0;
  font: 400 14px/20px var(--md-sys-typeface-plain);
  transition: color 150ms;
}
.m3-footer a:hover { color: var(--md-sys-primary); }

/* Snackbar */
.m3-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120px);
  background: var(--md-sys-inverse-surface);
  color: var(--md-sys-inverse-on-surface);
  border-radius: 4px;
  padding: 0 8px 0 16px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--md-sys-elevation-3);
  z-index: 70;
  opacity: 0;
  transition: transform 300ms var(--md-sys-motion-easing-emphasized-decel), opacity 300ms;
  font: 400 14px/20px var(--md-sys-typeface-plain);
  max-width: min(90vw, 560px);
}
.m3-snackbar.show { transform: translate(-50%, 0); opacity: 1; }
.m3-snackbar button {
  background: transparent;
  border: none;
  color: var(--md-sys-inverse-primary);
  font: 500 14px/1 var(--md-sys-typeface-plain);
  letter-spacing: 0.1px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 9999px;
}
.m3-snackbar button:hover { background: color-mix(in oklab, var(--md-sys-inverse-primary) 12%, transparent); }

/* Ripple */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
  content: "";
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}
.ripple:active::after {
  animation: rip 500ms var(--md-sys-motion-easing-standard);
}
@keyframes rip {
  0% { opacity: 0.18; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(40); }
}

/* Dotted BG grid for textures */
.dot-grid {
  background-image: radial-gradient(circle, var(--md-sys-outline-variant) 1px, transparent 1.5px);
  background-size: 20px 20px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--md-sys-primary);
  color: var(--md-sys-on-primary);
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

/* ============ Hero portal mockup ============ */
.hai-portal-mock { max-width: 100%; }
.hai-portal-topbar { overflow: hidden; }

/* ============ Problem diagram ============ */
.hai-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 24px 12px;
}

/* ============ Mobile responsive ============ */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; gap: 16px; }
  .sec-head h2 { font-size: clamp(28px, 7vw, 42px); }

  .hero { padding-top: 96px; padding-bottom: 48px; min-height: auto; }
  .hero__grid { gap: 32px; }
  .hero__title { font-size: clamp(36px, 9vw, 56px); }
  .hero__sub { font-size: 16px; line-height: 24px; }
  .hero__visual { max-width: 100%; aspect-ratio: auto; margin-left: 0; min-height: 420px; }

  .m3-fab { right: 16px; bottom: 16px; height: 48px; padding: 0 16px 0 14px; font-size: 13px; }
  .m3-fab .material-symbols-outlined { font-size: 20px; }

  .hai-problem-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 8px 0;
  }
  .hai-problem-divider { min-width: 0; }
  .hai-problem-divider svg { display: none; }
  .hai-problem-cloud { margin: 0 auto; }
}

@media (max-width: 900px) {
  .hai-cta-desktop { display: none !important; }
}

/* ============ Blog / article pages ============ */
.article-shell, .page-shell { background: var(--md-sys-surface); color: var(--md-sys-on-surface); }

.article-head, .blog-head {
  max-width: 820px;
  margin: 128px auto 48px;
  padding: 0 24px;
}
.blog-head { max-width: 1200px; }
.article-head h1, .blog-head h1 {
  margin: 16px 0 0;
  font: 400 clamp(36px, 5vw, 56px)/1.05 var(--md-sys-typeface-brand);
  letter-spacing: -0.02em;
  color: var(--md-sys-on-surface);
}
.article-head .lede, .blog-head p {
  margin: 24px 0 0;
  font: 400 20px/30px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
  max-width: 680px;
}
.blog-head p { font-size: 18px; line-height: 28px; }

.section-block, .blog-latest {
  max-width: 820px;
  margin: 48px auto;
  padding: 0 24px;
}
.blog-latest { max-width: 1200px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.section-block h2 {
  font: 400 32px/40px var(--md-sys-typeface-brand);
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  color: var(--md-sys-on-surface);
}
.section-block p {
  font: 400 17px/28px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
  margin: 0 0 16px;
}
.section-block p:last-of-type { margin-bottom: 0; }
.section-block a:not(.m3-btn) {
  color: var(--md-sys-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section-block a:not(.m3-btn):hover { color: var(--md-sys-on-surface); }

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.stat-card { padding: 24px; }
.stat-card__kicker {
  font: 500 11px/1 var(--md-sys-typeface-mono);
  letter-spacing: 0.22em;
  color: var(--md-sys-on-surface-variant);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.stat-card__stat {
  font: 400 24px/32px var(--md-sys-typeface-brand);
  color: var(--md-sys-primary);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.stat-card p {
  font: 400 14px/20px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
  margin: 0;
}

.workflow {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.workflow__step {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--md-sys-surface-container-lowest);
  border-radius: 12px;
  border: 1px solid var(--md-sys-outline-variant);
}
.workflow__step > .material-symbols-outlined {
  font-size: 24px;
  color: var(--md-sys-primary);
}
.workflow__title {
  font: 500 14px/20px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface);
}
.workflow__sub {
  font: 400 12px/16px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
}
.workflow__arrow {
  color: var(--md-sys-outline);
  font-size: 20px;
}
@media (max-width: 700px) {
  .workflow { flex-direction: column; align-items: stretch; }
  .workflow__arrow { transform: rotate(90deg); align-self: center; }
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.week-card { padding: 24px; }
.week-card__num {
  font: 500 11px/1 var(--md-sys-typeface-mono);
  letter-spacing: 0.22em;
  color: var(--md-sys-primary);
  margin-bottom: 12px;
}
.week-card__title {
  font: 500 16px/24px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface);
  margin-bottom: 8px;
}
.week-card p {
  font: 400 14px/20px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
  margin: 0;
}

.avoid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.avoid-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--md-sys-surface-container);
  border-radius: 8px;
  font: 400 15px/22px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface);
}
.avoid-list li .material-symbols-outlined {
  color: var(--md-sys-error);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.compare-table { overflow-x: auto; padding: 0; }
.compare-table table {
  width: 100%;
  border-collapse: collapse;
}
.compare-table th, .compare-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--md-sys-outline-variant);
  vertical-align: top;
  font: 400 14px/20px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
}
.compare-table th {
  font: 500 11px/1 var(--md-sys-typeface-mono);
  letter-spacing: 0.22em;
  color: var(--md-sys-on-surface);
  text-transform: uppercase;
  background: var(--md-sys-surface-container);
}
.compare-table td:first-child {
  font-weight: 500;
  color: var(--md-sys-on-surface);
}
.compare-table tr:last-child td { border-bottom: none; }

.further-reading ul { list-style: none; padding: 0; margin: 0; }
.further-reading li { padding: 10px 0; border-bottom: 1px solid var(--md-sys-outline-variant); }
.further-reading li:last-child { border-bottom: none; }

.blog-post-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  text-decoration: none;
  color: inherit;
}
.blog-post-card .kicker {
  font: 500 11px/1 var(--md-sys-typeface-mono);
  letter-spacing: 0.22em;
  color: var(--md-sys-on-surface-variant);
  text-transform: uppercase;
}
.blog-post-card h2 {
  margin: 0;
  font: 400 22px/28px var(--md-sys-typeface-brand);
  letter-spacing: -0.005em;
  color: var(--md-sys-on-surface);
}
.blog-post-card p {
  margin: 0;
  font: 400 15px/22px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
  flex: 1;
}
.blog-post-card .read {
  color: var(--md-sys-primary);
  font: 500 14px/20px var(--md-sys-typeface-plain);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-blurb {
  margin-top: 16px;
  max-width: 340px;
  font: 400 14px/20px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--md-sys-outline-variant);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font: 400 12px/16px var(--md-sys-typeface-plain);
  color: var(--md-sys-on-surface-variant);
}

@media (max-width: 768px) {
  .article-head, .blog-head { margin-top: 96px; }
  .article-head h1, .blog-head h1 { font-size: clamp(30px, 8vw, 42px); }
  .section-block h2 { font-size: 26px; line-height: 32px; }
  .section-block p { font-size: 16px; line-height: 26px; }
  .stat-cards, .week-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hai-portal-topbar__actions { display: none; }
  .m3-appbar__inner { gap: 8px; }
  .m3-segmented { height: 36px; }
  .m3-segmented button { padding: 0 10px; font-size: 13px; }
}