:root {
    color-scheme: light;
    --bg: #f7f6f2;
    --surface: #fcfcfb;
    --ink: #1c1b18;
    --ink-2: #57544c;
    --ink-3: #8a877d;
    --rule: #e4e2da;
    --rule-2: #cfccc2;
    --accent: #1c5cab;
    --accent-soft: #e3edf9;
    --s1: #2a78d6;   /* series 1: pickup / leads */
    --s2: #eb6834;   /* series 2: meetings */
    --s1-wash: rgba(42,120,214,.12);
    --s2-wash: rgba(235,104,52,.12);
    --grey-mark: #c9c6bc;
    --warn-bg: #fff4e5;
    --warn-ink: #7a4a00;
    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #161614;
      --surface: #1e1e1c;
      --ink: #f1efe8;
      --ink-2: #c3c1b6;
      --ink-3: #8f8c82;
      --rule: #2d2d2a;
      --rule-2: #44443f;
      --accent: #7fb0f0;
      --accent-soft: #1f2d40;
      --s1: #3987e5;
      --s2: #d95926;
      --s1-wash: rgba(57,135,229,.16);
      --s2-wash: rgba(217,89,38,.16);
      --grey-mark: #4a4945;
      --warn-bg: #33270f;
      --warn-ink: #f0c98a;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #161614;
    --surface: #1e1e1c;
    --ink: #f1efe8;
    --ink-2: #c3c1b6;
    --ink-3: #8f8c82;
    --rule: #2d2d2a;
    --rule-2: #44443f;
    --accent: #7fb0f0;
    --accent-soft: #1f2d40;
    --s1: #3987e5;
    --s2: #d95926;
    --s1-wash: rgba(57,135,229,.16);
    --s2-wash: rgba(217,89,38,.16);
    --grey-mark: #4a4945;
    --warn-bg: #33270f;
    --warn-ink: #f0c98a;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .page { max-width: 1080px; margin: 0 auto; padding: 40px 28px 72px; display: flex; flex-direction: column; gap: 44px; }
  header.top { display: flex; flex-direction: column; gap: 14px; }
  .eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; max-width: 22ch; }
  h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
  h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0; letter-spacing: .02em; color: var(--ink-2); }
  p { margin: 0; max-width: 66ch; }
  p.lede { font-size: 20px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
  .muted { color: var(--ink-2); }
  .small { font-size: 14px; color: var(--ink-3); }
  section { display: flex; flex-direction: column; gap: 20px; }
  .section-head { display: flex; flex-direction: column; gap: 8px; }
  .section-head .num { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

  /* KPI row */
  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
  .kpi .label { font-size: 14px; color: var(--ink-2); line-height: 1.3; min-height: 2.6em; }
  .kpi .value { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -.02em; }
  .kpi .value small { font-size: 16px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 3px; }
  .kpi .delta { font-size: 14px; color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .kpi .delta b { font-weight: 600; color: var(--ink); }
  .kpi .delta.bad b { color: #b3392b; }
  .kpi .delta.good b { color: #0d7a3a; }
  :root[data-theme="dark"] .kpi .delta.bad b { color: #f08a7c; }
  :root[data-theme="dark"] .kpi .delta.good b { color: #6fd39a; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kpi .delta.bad b { color: #f08a7c; }
    :root:not([data-theme="light"]) .kpi .delta.good b { color: #6fd39a; }
  }
  @media (max-width: 780px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* charts */
  .charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .charts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 980px) { .charts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 860px) { .charts { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .charts.four { grid-template-columns: 1fr; } }
  .chart { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; position: relative; }
  .chart h3 { font-size: 14px; }
  .chart .sub { font-size: 13px; color: var(--ink-3); }
  .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
  .chart.wide { grid-column: 1 / -1; }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); align-items: center; }
  .legend span { display: inline-flex; align-items: center; gap: 7px; }
  .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
  .tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.35; padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 20; max-width: 260px; }
  .tip[hidden] { display: none; }
  .axis text { fill: var(--ink-3); font-family: var(--font-body); font-size: 12px; font-variant-numeric: tabular-nums; }
  .axis line, .grid line { stroke: var(--rule); stroke-width: 1; }
  .dl { fill: var(--ink-2); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
  .dl.strong { fill: var(--ink); }
  .bar.s1 { fill: var(--s1); } .bar.s2 { fill: var(--s2); } .bar.grey { fill: var(--grey-mark); }
  .hit { fill: transparent; }
  .hit:hover + .bar, .bar:hover { filter: brightness(.92); }

  /* tables */
  .tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
  table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
  th, td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
  th { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; vertical-align: bottom; line-height: 1.25; background: var(--surface); position: sticky; top: 0; }
  th:first-child, td:first-child { text-align: left; }
  tbody tr:last-child td { border-bottom: 0; }
  tr.total td { border-top: 2px solid var(--rule-2); font-weight: 600; }
  tr.subtle td { color: var(--ink-3); }
  td.hi { font-weight: 600; color: var(--ink); }
  td.dim { color: var(--ink-3); }
  thead th.group { text-align: center; border-bottom: 1px solid var(--rule-2); color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: 12px; }
  .cap { font-size: 14px; color: var(--ink-3); line-height: 1.45; max-width: 80ch; }

  /* notes */
  .notes { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  @media (max-width: 780px) { .notes { grid-template-columns: 1fr; } }
  .note { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
  .note h3 { font-size: 13px; }
  .note ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
  .callout { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; }
  .reading { background: var(--accent-soft); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
  .reading b { font-weight: 600; }
  .reading ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

  @media print {
    body { background: #fff; color: #000; font-size: 12.5px; }
    .page { padding: 0; gap: 22px; max-width: none; }
    .kpi, .chart, .tablewrap, .note { break-inside: avoid; border-color: #ccc; }
    .tip { display: none !important; }
    h1 { font-size: 26px; }
  }

/* ---- multi-page additions (lab site) ---- */
.topnav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.topnav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--ink); }
.topnav a.current { color: var(--accent); border-bottom-color: var(--accent); }
.topnav .pill { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--warn-ink); background: var(--warn-bg); padding: 3px 9px; border-radius: 999px; }
.bottomnav { padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.bottomnav a { color: var(--accent); text-decoration: none; }
.tldr { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; max-width: 72ch; font-size: 17.5px; line-height: 1.5; }
.tldr li::marker { font-family: var(--font-display); font-weight: 600; color: var(--accent); }
.tldr b { font-weight: 600; }
.links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 780px) { .links { grid-template-columns: 1fr; } }
.linkcard { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; color: inherit; text-decoration: none; transition: border-color .15s; }
.linkcard:hover { border-color: var(--accent); }
.linkcard .num { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.linkcard h3 { font-size: 17px; color: var(--ink); line-height: 1.3; }
.linkcard p { font-size: 15px; color: var(--ink-2); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@media print { .topnav, .bottomnav { display: none; } }

/* ---- language switcher ---- */
.langs { display: inline-flex; gap: 2px; margin-left: auto; }
.langs a { padding: 3px 9px; border-radius: 6px; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); text-decoration: none; border-bottom: 0; }
.langs a:hover { color: var(--ink); background: var(--rule); }
.langs a.current { color: var(--accent); background: var(--accent-soft); }
.topnav .pill { margin-left: 0; }
@media print { .langs { display: none; } }

/* ---- pages 4 and 5: routine + board rules ---- */
.stack { display: flex; flex-direction: column; gap: 44px; }
.callout.soft { background: var(--accent-soft); color: var(--ink); font-size: 15.5px; }
.day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 780px) { .day { grid-template-columns: 1fr; } }
.dayblock { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.dayblock .time { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--accent); }
.dayblock h3 { font-size: 15px; color: var(--ink); }
.dayblock p { font-size: 15px; color: var(--ink-2); }
.habits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.habit { display: grid; grid-template-columns: 44px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; }
.habit.first { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.habit .hn { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--accent); }
.habit h3 { font-size: 17px; color: var(--ink); line-height: 1.3; margin-bottom: 6px; }
.habit p { font-size: 15.5px; color: var(--ink-2); max-width: 78ch; }
.minor { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 74ch; font-size: 16px; }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rule { display: grid; grid-template-columns: 26px 1fr; gap: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; font-size: 16px; line-height: 1.5; }
.rule .rn { font-family: var(--font-display); font-weight: 700; color: var(--accent); }
.rule b { font-weight: 600; }
.col { font-family: var(--font-display); font-size: .84em; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--rule); color: var(--ink); white-space: nowrap; }
.colgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 780px) { .colgroups { grid-template-columns: 1fr; } }
.colgroup { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.colgroup h3 { font-size: 13px; }
.colgroup .cols { display: flex; flex-wrap: wrap; gap: 6px; }
.colgroup.yours { border-color: var(--accent); }
.colgroup.yours .col { background: var(--accent-soft); color: var(--accent); }

/* ---- five KPI tiles (strongest vs weakest month + meetings lost) ---- */
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1060px) { .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .kpis.five { grid-template-columns: 1fr; } }
.kpi .value { font-size: 30px; }
.kpi .value small { font-size: 14px; margin-left: 5px; }
.kpi .value.bad { color: #b3392b; }
.kpi .value.good { color: #0d7a3a; }
:root[data-theme="dark"] .kpi .value.bad { color: #f08a7c; }
:root[data-theme="dark"] .kpi .value.good { color: #6fd39a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi .value.bad { color: #f08a7c; }
  :root:not([data-theme="light"]) .kpi .value.good { color: #6fd39a; }
}
.kpi .label { min-height: 3.9em; }