/* -------- Brand tokens -------- */
:root{
  --brand-dark:#0f2e2a;      /* deep teal hero */
  --brand-dark-2:#0b2421;    /* darker teal */
  --brand-accent:#10b9a8;    /* mint/teal CTA */
  --brand-accent-2:#0ea99a;
  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-600:#475569;
  --muted:#64748b;
  --radius:1rem;
  --shadow:0 24px 40px -24px rgba(2,6,23,.25);

  /* Glucose impact colors */
  --glucose-high:#dc2626;    /* red for high impact */
  --glucose-medium:#f59e0b;  /* amber for medium impact */
  --glucose-low:#10b981;     /* green for low impact */
}

/* Optional logo utilities (only used if you add these classes) */
.logo-img{ height: 40px }
.logo-title{ font-weight:800; letter-spacing:-.02em }
.logo-subtitle{ font-weight:600; color:#94a3b8 }

/* Typography */
.h1{ font-size:clamp(2rem,3.2vw + 1rem,3.25rem); line-height:1.1; font-weight:800; }
.h2{ font-size:clamp(1.5rem,1.4vw + 1rem,2rem); font-weight:700; }
.lead{ font-size:1.125rem; color:var(--ink-600); }

/* Layout helpers */
.section{ padding:3.5rem 0; }
.section-sm{ padding:2rem 0; }
.container{ width:min(100%,76rem); margin:0 auto; padding:0 1rem; }
.max-w-md{ max-width:28rem; }

/* Surfaces */
.card{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:var(--shadow);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1.25rem; border-radius:.9rem;
  font-weight:600; transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 0 0 rgba(0,0,0,.03);
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid #a7f3d0; outline-offset:2px; }

.btn-primary{ background:var(--brand-accent); color:#fff; }
.btn-primary:hover{ background:var(--brand-accent-2); }

.btn-soft{
  background:#fff; color:var(--brand-dark);
  border:1px solid rgba(2,6,23,.08);
}
.btn-soft:hover{ background:#f8fafc; }

/* Header */
.navbar{
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(2,6,23,.06);
}
.nav-link{ color:var(--ink-900); }
.nav-link:hover{ color:var(--brand-accent-2); }

/* Product dropdown (pure CSS, stays open while you move down) */
.navbar .group{ position:relative; }
.navbar .dropdown-content{
  position:absolute; top:100%; left:0; margin-top:.5rem; display:none;
  width:14rem; background:#fff; border:1px solid rgba(2,6,23,.08);
  border-radius:.9rem; box-shadow:0 20px 40px -20px rgba(2,6,23,.35); padding:.5rem; z-index:50;
}
.navbar .group:hover .dropdown-content,
.navbar .group:focus-within .dropdown-content{ display:block; }
/* bridge the hover gap */
.navbar .dropdown-content::before{
  content:""; position:absolute; top:-12px; left:0; right:0; height:12px;
}

/* Hero (deep green) — applied when body has class is-landing */
body.is-landing .hero{
  color:#fff;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 380px at 85% -10%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, var(--brand-dark), var(--brand-dark-2));
}
body.is-landing .lead{ color:#e2f7f2; }

/* Footer */
.site-footer{ background:#fff; border-top:1px solid rgba(2,6,23,.06); }

/* ===== Footer refresh ===== */
.site-footer {
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-dark-2));
  color: #fff;
  border-top: 0;
}

.site-footer a {
  color: #e6fffa;
  text-decoration: none;
}
.site-footer a:hover { opacity: .9; }

.site-footer .brand-blurb {
  opacity: .9;
}

/* grid for the 3 columns */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* 16px */
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* card look for each column */
.footer-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
  padding: 1rem 1.25rem; /* 16–20px */
  box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .25);
}

.footer-heading {
  font-weight: 700;
  margin-bottom: .5rem;
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li + li { margin-top: .25rem; }

/* --- Icon badges for feature cards --- */
.icon-badge{
  width:44px; height:44px; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(16,185,168,.12);           /* teal tint */
  color: var(--brand-accent);
  box-shadow: inset 0 0 0 1px rgba(16,185,168,.16);
  margin-bottom:.5rem;
}
.icon-badge svg{ width:22px; height:22px; }

/* ---------- Footer spacing tightening ---------- */
.site-footer .inner-pad {
  /* was big; reduce overall vertical padding inside the footer */
  padding-top: 1rem;
  padding-bottom: 0.75rem;
  row-gap: 1rem; /* tighten the grid’s vertical gap */
}
.site-footer .brand-head { margin-bottom: 0.35rem; }
.site-footer .brand-blurb { margin: 0 0 0.75rem; }
.site-footer .footer-card { margin-bottom: 0; }
.site-footer .copyright {
  margin-top: 0.75rem;   /* less space between cards and the rule */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem; /* less space under the copyright */
}

/* ----- Dark hero area ----- */
.site-hero{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 500px at 85% -10%, rgba(255,255,255,.04), transparent 55%),
              linear-gradient(180deg, #0f2e2a, #0b2421);
  color:#fff;
}

/* card on dark (used by base_onboarding) */
.card-on-dark {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Onboarding form polish */
.form-row { display:flex; flex-direction:column; gap:.25rem; }
.form-label { font-size:.875rem; color:rgb(30 41 59); font-weight:600; }
.form-control-wrap input,
.form-control-wrap select,
.form-control-wrap textarea {
  width:100%; border:1px solid rgb(203 213 225); border-radius:.5rem;
  padding:.625rem .75rem; font-size:.95rem; color:rgb(15 23 42);
  background:#fff; outline:none; transition: box-shadow .15s, border-color .15s;
}
.form-control-wrap input:focus,
.form-control-wrap select:focus,
.form-control-wrap textarea:focus {
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgb(59 130 246 / .2);
}
.form-help { font-size:.75rem; color:rgb(100 116 139); }
.form-errors { margin:0; padding-left:1rem; color:rgb(244 63 94); font-size:.8125rem; }
.form-row.has-error .form-control-wrap input,
.form-row.has-error .form-control-wrap select,
.form-row.has-error .form-control-wrap textarea { border-color:rgb(244 63 94); }

.btn-primary, .btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1rem; border-radius:.75rem; font-weight:600; text-decoration:none;
}
.btn-primary { background:rgb(37 99 235); color:#fff; }
.btn-primary:hover { background:rgb(29 78 216); }
.btn-secondary { background:#fff; color:rgb(30 41 59); border:1px solid rgb(203 213 225); }
.btn-secondary:hover { background:rgb(248 250 252); }

.alert-error {
  background:#fff1f2; color:#9f1239; border:1px solid #fecdd3;
  border-radius:.75rem; padding:.75rem 1rem; margin-bottom:.75rem;
}

/* -------- Glucose Impact Badges -------- */
.ha-glucose-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  vertical-align: baseline;
  white-space: nowrap;
  line-height: 1;
}

.ha-glucose-high {
  background: var(--glucose-high);
  color: #fff;
}

.ha-glucose-medium {
  background: var(--glucose-medium);
  color: #fff;
}

.ha-glucose-low {
  background: var(--glucose-low);
  color: #fff;
}