:root { color-scheme: light dark; --max: 1040px; }
html { scrollbar-gutter: stable; }
body {
    margin: 0;
    overflow-y: scroll;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.55;
}
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 28px 18px; }

/* Header */
.top { display:flex; gap:16px; align-items:center; }
.icon {
    width: 64px; height: 64px; border-radius: 14px;
    border: 1px solid rgba(127,127,127,.25);
    background: rgba(127,127,127,.08);
}
.badge {
    display:inline-block; padding:6px 10px;
    border:1px solid rgba(127,127,127,.35);
    border-radius: 999px; font-size: 13px; opacity:.9;
}
h1 { margin: 8px 0 6px; font-size: 40px; letter-spacing:-0.02em; }
.lead { font-size: 18px; opacity:.9; max-width: 75ch; }

.cta { display:flex; gap:10px; flex-wrap: wrap; margin-top: 14px; }
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding: 12px 16px; border-radius: 12px;
    border: 1px solid rgba(127,127,127,.35);
    text-decoration:none; font-weight: 650;
}
.btn.primary { background:#635bff; color:white; border-color:transparent; }

.muted { opacity:.85; font-size: 14px; margin-top: 10px; }

/* Cards */
.card {
    border:1px solid rgba(127,127,127,.25);
    border-radius: 16px;
    padding: 18px;
    background: rgba(127,127,127,.05);
    margin-top: 18px;
}
h2 { margin: 0 0 10px; font-size: 18px; }

ul { margin: 0; padding-left: 18px; }
li { margin: 6px 0; }

/* Layout */
.grid {
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
}
@media (max-width: 900px){
    .grid { grid-template-columns: 1fr; }
}

/* Device code */
.codegrid {
    display:grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 14px;
    align-items:start;
}
@media (max-width: 900px){
    .codegrid { grid-template-columns: 1fr; }
}
.steps { padding-left: 18px; }
.callout {
    border:1px dashed rgba(127,127,127,.35);
    border-radius:14px;
    padding:12px 14px;
    background: rgba(127,127,127,.04);
    margin-top:12px;
}

/* Screenshots */
.shots {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 900px){
    .shots { grid-template-columns: repeat(2, 1fr); }
}
.shot {
    width:100%;
    border-radius:14px;
    border:1px solid rgba(127,127,127,.25);
    background: rgba(127,127,127,.06);
}

/* Daily stats */
.daygrid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px;
}
@media (max-width: 900px){
    .daygrid { grid-template-columns: 1fr; }
}
.daylabel {
    font-weight: 650;
    margin-bottom: 6px;
    font-size: 14px;
    opacity: .9;
}

footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top:1px solid rgba(127,127,127,.25);
    font-size: 13px;
    opacity:.9;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* Hero screens (used on index only, harmless elsewhere) */
.heroscreens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 22px;
}
@media (max-width: 900px) {
    .heroscreens { grid-template-columns: 1fr; }
}
.herocard {
    border: 1px solid rgba(127,127,127,.25);
    border-radius: 18px;
    padding: 14px;
    background: rgba(127,127,127,.05);
}
.herolabel {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    opacity: .9;
}
.heroscreen {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(127,127,127,.25);
}
.herodesc {
    font-size: 14px;
    opacity: .85;
    margin-top: 8px;
}
/* =========================================================
   Caffeine levels – shared color definitions
   ========================================================= */

:root {
    --lvl-stm: #00AA00;   /* Garmin green */
    --lvl-high: #FF5500;  /* Garmin orange */
    --lvl-max: #FF0000;   /* Garmin red */
}

/* Inline level highlights (text) */
.lvl.sleep {
    color: inherit;
    opacity: .85;
}
.lvl.stm { color: var(--lvl-stm); }
.lvl.high { color: var(--lvl-high); }
.lvl.max { color: var(--lvl-max); }

/* Threshold badges (used on how-it-works) */
.tbadge.stm {
    color: var(--lvl-stm);
    background: rgba(0,170,0,.14);
    border-color: rgba(0,170,0,.45);
}

.tbadge.high {
    color: var(--lvl-high);
    background: rgba(255,85,0,.16);
    border-color: rgba(255,85,0,.45);
}

.tbadge.max {
    color: var(--lvl-max);
    background: rgba(255,0,0,.18);
    border-color: rgba(255,0,0,.50);
}