/* =========================================================
   GlucoClarity design tokens
   Direction: "clinical calm" — a lab-notebook / instrument-panel
   feel (grid-ruled backgrounds, mono numerals on results) built
   on a trustworthy deep-teal + warm-clay palette. Not a generic
   health-blue theme: numbers are the hero, so they're treated
   like readings on an instrument, not decorative stats.
   ========================================================= */
:root{
  /* Color */
  --color-ink:        #16241F;   /* body text */
  --color-teal-900:    #0E3A38;  /* primary — deep teal */
  --color-teal-700:    #155E59;
  --color-navy-900:    #142A3D;  /* secondary — for risk quiz / alt sections */
  --color-clay-500:    #D97A55;  /* accent — warm clay/coral, used sparingly */
  --color-sage-300:    #A9C2AE;  /* secondary accent — success/normal states */
  --color-bg:          #FBFAF7;  /* warm-white paper background */
  --color-bg-panel:    #FFFFFF;
  --color-line:        #E4E0D6;  /* hairline rules */
  --color-muted:       #5C6D66;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* Layout */
  --wrap-width: 1120px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  background-image: linear-gradient(var(--color-line) 1px, transparent 1px);
  background-size: 100% 32px;
  line-height: 1.6;
}
img{ max-width: 100%; display:block; }
a{ color: var(--color-teal-700); }
.wrap{ max-width: var(--wrap-width); margin: 0 auto; padding: 0 var(--space-3); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--color-teal-900); color:#fff; padding:.75rem 1rem; z-index:100; }
.skip-link:focus{ left: var(--space-2); }

h1,h2,h3{ font-family: var(--font-display); line-height:1.15; color: var(--color-teal-900); margin: 0 0 var(--space-2); }
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 var(--space-2); }

/* ---------- Header ---------- */
.site-header{ background: var(--color-bg-panel); border-bottom: 1px solid var(--color-line); position: sticky; top:0; z-index: 50; }
.site-header__row{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-2) var(--space-3); }
.logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color: var(--color-teal-900); }
.logo__text{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; }
.primary-nav ul{ display:flex; gap: var(--space-3); list-style:none; margin:0; padding:0; }
.primary-nav a{ text-decoration:none; color: var(--color-ink); font-weight:500; font-size:.95rem; }
.primary-nav a:hover{ color: var(--color-clay-500); }
.nav-toggle{ display:none; background:none; border:0; }

@media (max-width: 780px){
  .primary-nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--color-bg-panel); border-bottom:1px solid var(--color-line); }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .nav-toggle{ display:flex; flex-direction:column; gap:4px; padding:.5rem; }
  .nav-toggle span{ width:22px; height:2px; background:var(--color-ink); display:block; }
}

/* ---------- Hero ---------- */
.hero{ padding: var(--space-5) 0 var(--space-4); background: var(--color-teal-900); color:#fff; }
.hero h1{ color:#fff; }
.hero__eyebrow{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color: var(--color-sage-300); }
.hero__grid{ display:grid; gap: var(--space-4); align-items:center; }
@media(min-width:900px){ .hero__grid{ grid-template-columns: 1.1fr .9fr; } }
.hero p{ color: #D8E4DF; max-width: 46ch; }

/* ---------- Buttons / cards ---------- */
.btn{ display:inline-block; padding:.75rem 1.4rem; border-radius: var(--radius-sm); background: var(--color-clay-500); color:#fff; text-decoration:none; font-weight:600; }
.btn:hover{ background:#c2683f; }
.btn--outline{ background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; }

.tool-card-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; padding: var(--space-4) 0; }
@media(min-width:560px) and (max-width:1023px){ .tool-card-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .tool-card-grid{ grid-template-columns: repeat(4,1fr); } }
.tool-card{ background: var(--color-bg-panel); border:1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3); text-decoration:none; color: var(--color-ink); transition: transform .15s ease, box-shadow .15s ease; }
.tool-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,58,56,.08); }
.tool-card__tag{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; color: var(--color-clay-500); letter-spacing:.06em; }
.gc-icon{ color: var(--color-teal-700); margin-bottom: .5rem; }
.post-card .gc-icon{ color: var(--color-clay-500); }

/* Scroll-reveal (progressive enhancement — content is visible without JS) */
.reveal{ opacity:1; transform:none; }
.js-anim .reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js-anim .reveal.is-visible{ opacity:1; transform:none; }

/* Ad slots */
.ad-slot{ margin: var(--space-4) 0; text-align:center; }
.ad-slot__label{ font-family: var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-muted); margin-bottom:.35rem; }

/* Consent banner */
.consent-banner{ position:fixed; left:0; right:0; bottom:0; z-index:200; background: var(--color-navy-900); color:#fff; padding: var(--space-2) var(--space-3); display:flex; flex-wrap:wrap; gap: var(--space-2); align-items:center; justify-content:space-between; }
.consent-banner p{ margin:0; font-size:.85rem; max-width:60ch; color:#D8E1E8; }
.consent-banner__actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.consent-banner .btn{ padding:.5rem 1rem; font-size:.85rem; }
.consent-banner .btn--outline{ border-color:rgba(255,255,255,.4); }

/* ---------- Tool pages / calculator UI ---------- */
.tool-panel{ background: var(--color-bg-panel); border:1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) 0; }
.field-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-weight:600; font-size:.9rem; }
.field input, .field select{ font-family: var(--font-mono); font-size:1.1rem; padding:.6rem .75rem; border:1px solid var(--color-line); border-radius: var(--radius-sm); min-width:140px; }

.result-readout{ margin-top: var(--space-3); padding: var(--space-3); background: var(--color-teal-900); color:#fff; border-radius: var(--radius-md); }
.result-readout__value{ font-family: var(--font-mono); font-size: clamp(2rem,5vw,2.75rem); font-weight:600; }
.result-readout__label{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; color: var(--color-sage-300); }

table.ref-table{ width:100%; border-collapse:collapse; margin: var(--space-2) 0; font-size:.95rem; }
table.ref-table th, table.ref-table td{ border-bottom:1px solid var(--color-line); padding:.55rem .5rem; text-align:left; }
table.ref-table th{ font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; color: var(--color-muted); }

.disclaimer-box{ border-left:3px solid var(--color-clay-500); background:#FBF1EC; padding: var(--space-2) var(--space-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size:.92rem; }
.disclaimer-box--full{ border-left-color: var(--color-teal-900); background:#EEF4F2; }
.disclaimer-box a{ font-weight:600; }

.source-line{ font-size:.85rem; color: var(--color-muted); margin-top: var(--space-2); }

/* ---------- Glucose log tracker ---------- */
.log-summary{ display:grid; grid-template-columns: repeat(2,1fr); gap:.75rem; }
@media(min-width:640px){ .log-summary{ grid-template-columns: repeat(5,1fr); } }
.log-summary > div{ text-align:center; background: var(--color-bg); border:1px solid var(--color-line); border-radius: var(--radius-sm); padding:.75rem .5rem; }
.log-summary__num{ font-family: var(--font-mono); font-size:1.5rem; font-weight:600; color: var(--color-teal-900); }
.log-summary__label{ font-size:.72rem; color: var(--color-muted); margin-top:.2rem; }

/* ---------- Blog ---------- */
.post-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media(min-width:780px){ .post-grid{ grid-template-columns: repeat(3,1fr); } }
.post-card{ border:1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background:#fff; text-decoration:none; color:var(--color-ink); }
.post-card__cluster{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; color: var(--color-teal-700); }
article.post{ max-width: 72ch; margin: 0 auto; }
article.post .related{ background:#F3F1EA; padding: var(--space-3); border-radius: var(--radius-md); margin-top: var(--space-4); }

.quiz-progress{ height:6px; background: var(--color-line); border-radius:3px; overflow:hidden; margin: var(--space-2) 0; }
.quiz-progress__bar{ height:100%; width:0%; background: var(--color-clay-500); transition: width .3s ease; }

/* ---------- Homepage: trust bar, how-it-works, trust grid, FAQ ---------- */
.trust-bar{ display:flex; flex-wrap:wrap; gap: var(--space-1) var(--space-3); align-items:center; padding: var(--space-2) var(--space-3); background:#fff; border:1px solid var(--color-line); border-radius: var(--radius-md); margin-top: calc(-1 * var(--space-3)); position:relative; font-size:.85rem; }
.trust-bar__label{ font-family: var(--font-mono); text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; color: var(--color-muted); }
.trust-bar__item{ font-weight:600; color: var(--color-teal-900); }

.how-it-works{ background: var(--color-bg-panel); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); padding: var(--space-5) 0; margin: var(--space-5) 0; }
.how-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media(min-width:780px){ .how-grid{ grid-template-columns: repeat(3,1fr); } }
.how-step__num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: var(--color-teal-900); color:#fff; font-family: var(--font-mono); font-weight:600; margin-bottom:.75rem; }

.trust-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media(min-width:780px){ .trust-grid{ grid-template-columns: repeat(3,1fr); } }
.trust-card{ border:1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3); background:#fff; }
.trust-card h3{ font-size:1.05rem; }

.faq-block h3{ font-size:1.05rem; margin-top: var(--space-3); }
.faq-block p{ color: var(--color-muted); }

/* ---------- Animated hero demo box ---------- */
.demo-box{
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius: var(--radius-md);
  padding: var(--space-3); color:#fff; backdrop-filter: blur(2px);
}
.demo-box__mono{ font-family: var(--font-mono); }
.demo-box__gauge-track{ position:relative; height:10px; border-radius:6px; background: rgba(255,255,255,.15); overflow:hidden; margin-top:.6rem; }
.demo-box__gauge-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, var(--color-sage-300), var(--color-clay-500)); transition: width .7s ease; border-radius:6px; }
.demo-box__gauge-marker{ position:absolute; top:-4px; left:0%; width:2px; height:18px; background:#fff; transition: left .7s ease; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.demo-box__gauge-labels{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#B9CBC5; margin-top:.4rem; }
.demo-box__caption{ font-size:.8rem; color:#C7D6D1; margin-top:.75rem; margin-bottom:0; }
.result-readout .result-readout__value{ transition: none; }

/* ---------- Stats band ---------- */
.stats-band{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; padding: var(--space-4) 0 var(--space-2); }
@media(min-width:780px){ .stats-band{ grid-template-columns: repeat(3,1fr); } }
.stats-band__stat{ text-align:center; padding: var(--space-3); background:#fff; border:1px solid var(--color-line); border-radius: var(--radius-md); }
.stats-band__num{ font-family: var(--font-mono); font-size: clamp(1.8rem,4vw,2.4rem); font-weight:600; color: var(--color-teal-900); }
.stats-band__stat p{ margin: .4rem 0 0; color: var(--color-muted); font-size:.9rem; }

/* ---------- Icon hover motion ---------- */
.tool-card, .cluster-card, .post-card{ position:relative; overflow:hidden; }
.tool-card::before, .post-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--color-clay-500), var(--color-sage-300), var(--color-teal-700));
  background-size:200% 100%; transform:scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.tool-card:hover::before, .post-card:hover::before{ transform:scaleX(1); animation: gc-shimmer 2.5s linear infinite; }
.tool-card .gc-icon, .cluster-card .gc-icon, .post-card .gc-icon{ transition: transform .25s ease; }
.tool-card:hover .gc-icon, .cluster-card:hover .gc-icon, .post-card:hover .gc-icon{ transform: scale(1.12) rotate(-4deg); }
.how-step__num{ transition: transform .25s ease; }
.how-step:hover .how-step__num{ transform: scale(1.1); }

@keyframes gc-shimmer{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
@keyframes gc-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }
.js-anim .tool-card .gc-icon{ animation: gc-float 3.2s ease-in-out infinite; }
.js-anim .tool-card:nth-child(2) .gc-icon{ animation-delay: .3s; }
.js-anim .tool-card:nth-child(3) .gc-icon{ animation-delay: .6s; }
.js-anim .tool-card:nth-child(4) .gc-icon{ animation-delay: .9s; }

@media (prefers-reduced-motion: reduce){
  .js-anim .tool-card .gc-icon{ animation: none; }
  .tool-card:hover::before, .post-card:hover::before{ animation: none; }
}

/* ---------- Section rhythm ---------- */
.section{ padding: var(--space-4) 0; }
.section__head{ text-align:center; max-width:56ch; margin:0 auto var(--space-3); }
.section__head p{ color: var(--color-muted); margin:.3rem 0 0; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; font-size:.78rem; color:#B9CBC5; font-family:var(--font-mono); }
.stats-section{ background:#fff; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); padding: var(--space-4) 0; }

/* ---------- FAQ accordion ---------- */
.faq-accordion{ max-width:70ch; margin:0 auto; display:flex; flex-direction:column; gap:.6rem; }
.faq-accordion details{ border:1px solid var(--color-line); border-radius: var(--radius-md); background:#fff; padding: .9rem 1.1rem; }
.faq-accordion summary{ font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion summary::after{ content:'+'; font-family:var(--font-mono); font-size:1.3rem; color:var(--color-clay-500); flex-shrink:0; transition: transform .2s ease; }
.faq-accordion details[open] summary::after{ transform: rotate(45deg); }
.faq-accordion p{ margin:.75rem 0 0; color: var(--color-muted); }

/* ---------- Mobile tightening ---------- */
@media (max-width: 640px){
  .hero{ padding: var(--space-4) 0 var(--space-3); }
  .section{ padding: var(--space-3) 0; }
  .wrap{ padding: 0 1rem; }
  .hero__actions .btn, .hero__actions .btn--outline{ width:100%; text-align:center; }
  .demo-box{ margin-top: 1rem; }
  h1{ font-size: 1.7rem; }
  .stats-band__num{ font-size:1.6rem; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-navy-900); color:#D8E1E8; margin-top: var(--space-5); padding: var(--space-4) 0 var(--space-2); }
.site-footer__grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media(min-width:780px){ .site-footer__grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h3{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; font-family: var(--font-mono); }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer a{ color:#CBD6DD; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.site-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top: var(--space-3); padding-top: var(--space-2); font-size:.8rem; color:#9FB0B9; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}