/* ============================================================
   Kietah AI Consulting – SEO/AEO Dashboard
   Design system: KAI brand voice + Kinso modern SaaS chops
   ============================================================ */

:root {
  /* === Chrome (KAI brand) === */
  --coral:        #D97757;
  --coral-dark:   #B85E3A;
  --coral-pale:   #FDF0E8;
  --apricot:      #F7E4D4;
  --white:        #FFFFFF;
  --canvas:       #FBFAF8;
  --surface:      #FFFFFF;
  --surface-2:    #F7F4F0;
  --grey-light:   #F4F3F1;
  --cream:        #FAF7F4;
  --charcoal:     #14110F;
  --ink:          #2A2522;
  --mid:          #6B6360;
  --soft:         #A29B98;
  --hairline:        rgba(20, 17, 15, 0.07);
  --hairline-strong: rgba(20, 17, 15, 0.10);

  /* === Status === */
  --good:      #2F8F5E; --good-soft: #E2F2EA;
  --warn:      #B57A1F; --warn-soft: #FBEFD5;
  --bad:       #B23A48; --bad-soft:  #F8E1E4;

  /* === Client palette (defaults = Kietah coral for admin/no-client pages;
        overridden inline by base.html per client brand) === */
  --client-primary:   #D97757;
  --client-secondary: #B85E3A;
  --client-accent:    #F7E4D4;
  --client-soft:      #F7DEC9;
  --client-tint:      #FBEDE4;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(20,17,15,0.04);
  --shadow-sm: 0 1px 2px rgba(20,17,15,0.04), 0 2px 6px rgba(20,17,15,0.03);
  --shadow-md: 0 1px 2px rgba(20,17,15,0.04), 0 4px 12px rgba(20,17,15,0.04), 0 16px 32px rgba(20,17,15,0.03);
  --shadow-lg: 0 1px 2px rgba(20,17,15,0.04), 0 8px 24px rgba(20,17,15,0.06), 0 32px 64px rgba(20,17,15,0.04);

  /* === Radii === */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--canvas);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(217,119,87,0.10) 0%, transparent 55%),
    radial-gradient(circle at 92% 4%, var(--client-soft) 0%, transparent 48%);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}
.app { max-width: 1440px; margin: 0 auto; padding: 0 36px 88px; }

h1, h2, h3, h4, h5 { font-family: 'Inter Tight', -apple-system, sans-serif; letter-spacing: -0.02em; color: var(--charcoal); font-weight: 700; }
.serif { font-family: 'PT Serif', Georgia, serif; letter-spacing: -0.01em; }
a { color: inherit; }

/* === Header === */
.header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: rgba(251,250,248,0.78); padding: 18px 0; border-bottom: 1px solid var(--hairline); margin-bottom: 32px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 0 36px; }
.header-left { display: flex; align-items: center; gap: 14px; }
.logo-wrap { display: flex; align-items: center; gap: 12px; }
.logo { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%); color: var(--white); display: grid; place-items: center; font-family: 'PT Serif', serif; font-weight: 700; font-size: 20px; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.18); }
.logo-mark { display: flex; flex-direction: column; line-height: 1.1; }
.logo-mark .name { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 15px; color: var(--charcoal); letter-spacing: -0.01em; }
.logo-mark .sub { color: var(--soft); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-top: 1px; }
.divider { width: 1px; height: 28px; background: var(--hairline); margin: 0 4px; }

.client-switcher { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 6px 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: var(--shadow-xs); transition: all 0.15s; position: relative; }
.client-switcher:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.client-switcher .swatch { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--client-primary) 0%, var(--client-primary) 70%, var(--client-accent) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); flex-shrink: 0; }
.client-switcher .name { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 14px; color: var(--charcoal); letter-spacing: -0.01em; }
.client-switcher .domain { color: var(--soft); font-size: 11px; }
.client-switcher .chev { color: var(--soft); margin-left: 2px; font-size: 11px; }
.client-switcher select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }

.pill-group { display: flex; gap: 6px; }
.pill { background: var(--white); border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--mid); font-weight: 500; box-shadow: var(--shadow-xs); text-decoration: none; }
.pill.active { background: var(--charcoal) !important; color: var(--white) !important; border-color: var(--charcoal) !important; }
.pill-ident { background: var(--surface-2, #F7F4F0) !important; color: var(--charcoal); font-weight: 600; }
.pill.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 6px; box-shadow: 0 0 0 3px rgba(47,143,94,0.15); animation: pulse 2s infinite; vertical-align: middle; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(47,143,94,0.15);} 50% { box-shadow: 0 0 0 5px rgba(47,143,94,0.05);} }

.header-right { display: flex; gap: 8px; align-items: center; }
.btn { background: var(--charcoal); color: var(--white); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; box-shadow: var(--shadow-sm); font-family: 'Inter Tight', sans-serif; letter-spacing: -0.01em; text-decoration: none; display: inline-block; }
.btn:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn.client { background: var(--client-primary); }
.btn.client:hover { background: var(--client-secondary); }

/* === Section titles === */
.section-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 22px; margin: 44px 0 18px; color: var(--charcoal); display: flex; align-items: baseline; gap: 12px; letter-spacing: -0.02em; }
.section-title:first-of-type { margin-top: 0; }
.section-title .sub { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--soft); letter-spacing: 0; }

/* === Exec summary === */
.exec-summary { background: linear-gradient(135deg, var(--white) 0%, var(--client-tint) 100%); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 32px 36px; margin-bottom: 28px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.exec-summary::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--client-primary) 0%, var(--client-accent) 100%); }
.exec-summary h2 { font-family: 'PT Serif', serif; font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 12px; color: var(--charcoal); letter-spacing: -0.015em; max-width: 760px; }
.exec-summary p { color: var(--mid); font-size: 15px; line-height: 1.6; max-width: 720px; }
.exec-summary p strong { color: var(--charcoal); font-weight: 600; }
.exec-summary .stat-block { text-align: right; padding-left: 28px; border-left: 1px solid var(--hairline); flex-shrink: 0; }
.exec-summary .stat-block .number { font-family: 'Inter Tight', sans-serif; font-size: 44px; font-weight: 700; color: var(--good); line-height: 1; letter-spacing: -0.03em; }
.exec-summary .stat-block .label { font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; font-weight: 500; }

/* === KPIs === */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px 24px 20px; box-shadow: var(--shadow-sm); transition: all 0.2s; position: relative; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--hairline-strong); }
.kpi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-label { font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.kpi-fresh { font-size: 10px; color: var(--soft); font-family: 'JetBrains Mono', monospace; }
.kpi-value { font-family: 'Inter Tight', sans-serif; font-size: 38px; font-weight: 700; line-height: 1; color: var(--client-primary); letter-spacing: -0.03em; }
.kpi-value .unit { color: var(--soft); font-weight: 500; font-size: 24px; margin-left: 2px; }
.kpi-delta { font-size: 12px; margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 500; }
.kpi-delta.good { background: var(--good-soft); color: var(--good); }
.kpi-delta.warn { background: var(--warn-soft); color: var(--warn); }
.kpi-delta.bad  { background: var(--bad-soft);  color: var(--bad); }
.kpi-delta.neutral { background: var(--surface-2); color: var(--mid); }

/* === English panel === */
.english-panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.english-row { display: grid; grid-template-columns: 1fr 1.15fr; border-bottom: 1px solid var(--hairline); }
.english-row:last-child { border-bottom: none; }
.english-row:hover .english-data { background: var(--surface-2); }
.english-row:hover .english-trans { background: #FFE9D6; }
.english-data { padding: 28px 30px; background: var(--surface); border-right: 1px solid var(--hairline); transition: background 0.2s; }
.english-data .stat-line { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--soft); margin-bottom: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.english-data .marketing-term { font-family: 'Inter Tight', sans-serif; font-size: 17px; line-height: 1.55; color: var(--charcoal); font-weight: 500; letter-spacing: -0.01em; }
.english-data .marketing-term em { color: var(--client-primary); font-style: normal; font-weight: 700; background: var(--client-soft); padding: 1px 6px; border-radius: var(--r-xs); }
.english-trans { padding: 28px 32px; background: var(--coral-pale); position: relative; transition: background 0.2s; }
.english-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--white); color: var(--coral-dark); font-family: 'Inter Tight', sans-serif; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; box-shadow: var(--shadow-xs); }
.english-trans .what-it-means { font-family: 'PT Serif', serif; font-size: 17px; line-height: 1.55; color: var(--charcoal); font-weight: 400; letter-spacing: -0.005em; }
.english-trans .what-it-means strong { color: var(--coral-dark); font-weight: 700; }
.english-trans .what-to-do { margin-top: 16px; font-size: 14px; color: var(--ink); padding: 12px 16px; background: rgba(255,255,255,0.7); border-left: 3px solid var(--coral); border-radius: 0 var(--r-sm) var(--r-sm) 0; line-height: 1.6; }
.english-trans .what-to-do strong { color: var(--coral-dark); display: block; font-family: 'Inter Tight', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; font-weight: 700; }

/* === Generic panels === */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s; }
.panel:hover { box-shadow: var(--shadow-md); }
.panel h3 { font-family: 'Inter Tight', sans-serif; font-size: 16px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; letter-spacing: -0.01em; font-weight: 700; }
.panel .muted-note { color: var(--mid); font-size: 13.5px; line-height: 1.6; margin-bottom: 18px; }

.badge { font-family: 'Inter Tight', sans-serif; font-size: 10px; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad  { background: var(--bad-soft);  color: var(--bad); }
.badge.client { background: var(--client-soft); color: var(--client-primary); }
.badge.muted { background: var(--surface-2); color: var(--mid); }

/* === Tables === */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--soft); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 8px; border-bottom: 1px solid var(--hairline); font-family: 'Inter Tight', sans-serif; }
td { padding: 13px 8px; border-bottom: 1px solid var(--hairline); color: var(--ink); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--surface-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--charcoal); }
.opp-impact { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.opp-impact.high { background: var(--client-primary); box-shadow: 0 0 0 3px var(--client-soft); }
.opp-impact.med  { background: var(--client-accent); box-shadow: 0 0 0 3px rgba(108,229,223,0.18); }

/* === AEO Matrix === */
.aeo-matrix { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 6px; font-size: 13px; }
.aeo-cell { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-sm); text-align: center; font-weight: 500; transition: transform 0.15s; }
.aeo-cell:hover { transform: scale(1.02); }
.aeo-cell.head { background: transparent; color: var(--soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 14px; font-weight: 700; font-family: 'Inter Tight', sans-serif; }
.aeo-cell.query { text-align: left; padding: 12px 16px; font-size: 13px; background: var(--client-tint); color: var(--charcoal); font-weight: 500; }
.aeo-cell.cited   { background: var(--good-soft); color: var(--good); font-weight: 700; }
.aeo-cell.partial { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.aeo-cell.absent  { background: var(--bad-soft);  color: var(--bad);  font-weight: 600; }
.aeo-cell.empty   { background: var(--surface-2); color: var(--soft); font-weight: 500; }

/* === Branded donut === */
.branded-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.donut { width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-sm); position: relative; }
.donut::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.donut .inner { width: 96px; height: 96px; border-radius: 50%; background: var(--white); display: grid; place-items: center; text-align: center; box-shadow: var(--shadow-xs); }
.donut .inner .pct { font-family: 'Inter Tight', sans-serif; font-size: 26px; font-weight: 700; color: var(--client-primary); letter-spacing: -0.03em; line-height: 1; }
.donut .inner .lbl { font-size: 9px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; font-weight: 600; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 10px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-row .lbl { color: var(--mid); }
.legend-row .num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--charcoal); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

/* === Inset English === */
.english-inset { margin-top: 18px; padding: 16px 18px; background: var(--coral-pale); border-radius: var(--r-md); color: var(--ink); font-family: 'PT Serif', serif; font-size: 14px; line-height: 1.6; border: 1px solid rgba(217,119,87,0.15); }
.english-inset strong { color: var(--coral-dark); }

/* === GBP === */
.gbp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.gbp-stat { background: var(--client-tint); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px 16px; }
.gbp-stat .lbl { font-size: 10px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; font-weight: 600; }
.gbp-stat .val { font-family: 'Inter Tight', sans-serif; font-size: 22px; font-weight: 700; color: var(--client-primary); letter-spacing: -0.02em; line-height: 1; }
.gbp-stat.warn { background: var(--bad-soft); border-color: rgba(178,58,72,0.2); }
.gbp-stat.warn .val { color: var(--bad); }

/* === Highlights === */
.highlights { display: grid; gap: 0; }
.highlight-row { display: grid; grid-template-columns: 84px 76px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px; align-items: start; }
.highlight-row:last-child { border-bottom: none; padding-bottom: 0; }
.highlight-row:first-child { padding-top: 0; }
.highlight-row .date { color: var(--soft); font-size: 11px; font-family: 'JetBrains Mono', monospace; padding-top: 2px; }
.highlight-row .type { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; text-align: center; font-family: 'Inter Tight', sans-serif; }
.highlight-row .type.seo { background: var(--client-soft); color: var(--client-primary); }
.highlight-row .type.aeo { background: var(--coral-pale); color: var(--coral-dark); }
.highlight-row .type.gbp { background: var(--warn-soft); color: var(--warn); }
.highlight-row .type.ads { background: var(--good-soft); color: var(--good); }
.highlight-row .text { color: var(--ink); line-height: 1.55; padding-top: 1px; }

/* === Page status grid (legacy on-page audit data) === */
.status-grid { display: grid; gap: 6px; font-size: 12.5px; }
.status-row { display: grid; grid-template-columns: 2fr repeat(8, 1fr); gap: 4px; align-items: center; }
.status-row.head { color: var(--soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 0 8px; font-family: 'Inter Tight', sans-serif; font-weight: 700; }
.status-row .url { color: var(--charcoal); font-weight: 500; padding: 8px 12px; font-size: 13px; }
.status-cell { padding: 8px; text-align: center; border-radius: var(--r-sm); font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.status-cell.ok { background: var(--good-soft); color: var(--good); }
.status-cell.fail, .status-cell.missing { background: var(--bad-soft); color: var(--bad); }
.status-cell.warn { background: var(--warn-soft); color: var(--warn); }
.status-cell.skip { background: var(--surface-2); color: var(--soft); }
.status-cell.none { background: var(--surface-2); color: var(--soft); }

/* === Mock note === */
.mock-note { margin-top: 56px; padding: 22px 26px; background: var(--white); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); color: var(--mid); font-size: 13px; line-height: 1.65; box-shadow: var(--shadow-xs); }
.mock-note strong { color: var(--charcoal); }

/* === Empty state === */
.empty { background: var(--surface); border: 2px dashed var(--hairline-strong); border-radius: var(--r-lg); padding: 48px 32px; text-align: center; color: var(--mid); }
.empty h3 { font-size: 18px; margin-bottom: 8px; color: var(--charcoal); }
.empty p { font-size: 14px; max-width: 480px; margin: 0 auto 16px; }

/* === Util === */
.muted { color: var(--soft); }
.actions { display: flex; gap: 8px; margin: 16px 0; }
.actions form { display: inline-block; }
/* ============================================================
   v2 additions: sparklines, Day-0 badges, tracked keywords,
   tabs, mobile breakpoints, annotations.
   Append to style.css.
   ============================================================ */

/* === Day-0 baseline badge === */
.day0-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.day0-badge { background: var(--white); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; color: var(--mid); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-xs); }
.day0-badge strong { font-family: 'Inter Tight', sans-serif; font-weight: 700; color: var(--charcoal); letter-spacing: -0.01em; }
.day0-badge .delta { font-family: 'Inter Tight', sans-serif; font-size: 12px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.day0-badge .delta.good { background: var(--good-soft); color: var(--good); }
.day0-badge .delta.bad  { background: var(--bad-soft);  color: var(--bad); }
.day0-badge .delta.neutral { background: var(--surface-2); color: var(--mid); }
.day0-badge .since { color: var(--soft); font-size: 11px; }

/* === KPI sparklines === */
.kpi-sparkline { margin-top: 14px; height: 36px; width: 100%; display: block; }
.kpi-sparkline .line { fill: none; stroke: var(--client-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kpi-sparkline .area { fill: var(--client-primary); fill-opacity: 0.08; }
.kpi-sparkline .dot { fill: var(--client-primary); }
.kpi-sparkline .dot-end { fill: var(--client-primary); stroke: var(--white); stroke-width: 2; }
.kpi-sparkline.empty { display: flex; align-items: center; justify-content: center; color: var(--soft); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

/* === Tracked keyword tracker === */
.kw-table { width: 100%; }
.kw-table th { padding-bottom: 12px; }
.kw-row td { padding: 14px 8px; }
.kw-keyword { font-weight: 600; color: var(--charcoal); font-family: 'Inter Tight', sans-serif; font-size: 14px; }
.kw-target { color: var(--soft); font-size: 11px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; }
.kw-pos { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 14px; color: var(--charcoal); }
.kw-pos.on-target { color: var(--good); }
.kw-pos.off-target { color: var(--bad); }
.kw-spark { width: 80px; height: 24px; vertical-align: middle; }
.kw-spark .line { fill: none; stroke: var(--client-primary); stroke-width: 1.5; stroke-linecap: round; }
.kw-delta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: 'Inter Tight', sans-serif; }
.kw-delta.up { background: var(--good-soft); color: var(--good); }
.kw-delta.down { background: var(--bad-soft); color: var(--bad); }
.kw-delta.flat { background: var(--surface-2); color: var(--mid); }
.kw-target-bar { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.kw-target-bar.on { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.kw-target-bar.off { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.kw-target-bar.no-data { background: var(--soft); }

/* === Events / annotations === */
.events-list { display: grid; gap: 0; }
.event-row { display: grid; grid-template-columns: 90px 100px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: start; font-size: 13.5px; }
.event-row:last-child { border-bottom: none; }
.event-row .date { color: var(--soft); font-size: 12px; font-family: 'JetBrains Mono', monospace; padding-top: 1px; }
.event-row .type { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; text-align: center; font-family: 'Inter Tight', sans-serif; }
.event-row .type.shipped { background: var(--good-soft); color: var(--good); }
.event-row .type.milestone { background: var(--client-soft); color: var(--client-primary); }
.event-row .type.alert { background: var(--bad-soft); color: var(--bad); }
.event-row .type.baseline { background: var(--coral-pale); color: var(--coral-dark); }
.event-row .title-text { color: var(--charcoal); font-weight: 500; }
.event-row .desc { color: var(--mid); font-size: 12.5px; margin-top: 4px; }

/* === Tab nav (bigger, more prominent SEO/AEO toggle) === */
.tab-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.tab-row .tabs-prominent { margin-bottom: 0; }
.tabs-prominent { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 24px; box-shadow: var(--shadow-xs); border: 1px solid var(--hairline); }
.tab-pill { padding: 9px 22px; border-radius: 999px; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--mid); cursor: pointer; text-decoration: none; letter-spacing: -0.01em; transition: all 0.15s; }
.tab-pill:hover { color: var(--charcoal); }
.tab-pill.active { background: var(--white); color: var(--client-primary); box-shadow: var(--shadow-sm); }

/* === Mobile breakpoints === */
@media (max-width: 1024px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  body { padding: 0 !important; }
  .app { padding: 0 16px 48px !important; }
  .header { padding: 14px 0; margin: 0 0 20px; }
  .header-inner { padding: 0 16px; }
  .header-inner { flex-wrap: wrap; gap: 10px; }
  .header-left { flex-wrap: wrap; gap: 10px; }
  .logo-mark { display: none; }
  .divider { display: none; }
  .pill-group { flex-wrap: wrap; }
  .header-right { width: 100%; justify-content: flex-end; }

  .exec-summary { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
  .exec-summary h2 { font-size: 20px; }
  .exec-summary .stat-block { padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid var(--hairline); text-align: left; }
  .exec-summary .stat-block .number { font-size: 30px; }

  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 16px; }
  .kpi-value { font-size: 26px; }
  .english-row { grid-template-columns: 1fr; }
  .english-data { border-right: none; border-bottom: 1px solid var(--hairline); padding: 22px; }
  .english-trans { padding: 22px; }
  .english-data .marketing-term { font-size: 15px; }
  .english-trans .what-it-means { font-size: 15px; }

  .gbp-grid { grid-template-columns: 1fr 1fr; }
  .aeo-matrix { grid-template-columns: 1fr; gap: 4px; }
  .aeo-cell.head { display: none; }
  .aeo-cell.query { background: var(--client-soft); font-weight: 600; margin-top: 8px; }

  table { font-size: 12.5px; }
  td.num { font-size: 12px; }

  .day0-row { gap: 6px; }
  .day0-badge { font-size: 11.5px; padding: 6px 10px; }

  .tabs-prominent { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 3px; }
  .tab-pill { padding: 8px 14px; font-size: 12.5px; flex-shrink: 0; }

  .section-title { font-size: 18px; margin: 28px 0 12px; }
  .panel { padding: 18px 20px; }

  .kw-spark { width: 60px; height: 20px; }
  .highlight-row { grid-template-columns: 70px 64px 1fr; gap: 8px; }
}

@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr; }
  .gbp-grid { grid-template-columns: 1fr 1fr; }
  .header-left .pill-group .pill { padding: 5px 10px; font-size: 11px; }
}

/* === Print stylesheet (for Export PDF) === */
@media print {
  body { background: var(--white); padding: 20px; }
  .header { position: static; box-shadow: none; backdrop-filter: none; }
  .header-right, .actions, .btn, .tabs-prominent { display: none; }
  .panel, .kpi, .english-panel, .exec-summary { box-shadow: none; break-inside: avoid; }
  .section-title { break-after: avoid; }
}
/* ============================================================
   v2.1: trend chart with event annotations
   ============================================================ */

.trend-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 24px 24px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.trend-chart .axis { stroke: var(--hairline-strong); stroke-width: 1; }
.trend-chart .grid { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 2,3; }
.trend-chart .area { fill: var(--client-primary); fill-opacity: 0.08; }
.trend-chart .line { fill: none; stroke: var(--client-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-chart .dot { fill: var(--client-primary); fill-opacity: 0.7; }
.trend-chart .ax-label { fill: var(--soft); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.trend-chart .value-label { fill: var(--client-primary); font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 700; }
.trend-chart .event-line { stroke: var(--coral); stroke-width: 1; stroke-dasharray: 3,3; opacity: 0.45; }
.trend-chart .event-pin { stroke: var(--white); stroke-width: 2; cursor: pointer; }
.trend-chart .event-pin-shipped   { fill: var(--good); }
.trend-chart .event-pin-milestone { fill: var(--client-primary); }
.trend-chart .event-pin-baseline  { fill: var(--coral); }
.trend-chart .event-pin-alert     { fill: var(--bad); }

.event-legend {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 14px 90px 1fr;
  gap: 6px 10px;
  font-size: 12px;
}
.event-legend .event-pin-mini {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 4px;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--hairline);
}
.event-legend .event-pin-mini.event-pin-shipped { background: var(--good); }
.event-legend .event-pin-mini.event-pin-milestone { background: var(--client-primary); }
.event-legend .event-pin-mini.event-pin-baseline { background: var(--coral); }
.event-legend .event-pin-mini.event-pin-alert { background: var(--bad); }
.event-legend .event-date { color: var(--soft); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.event-legend .event-title { color: var(--ink); font-weight: 500; }

/* Mobile */
@media (max-width: 768px) {
  .trend-wrap { padding: 18px 16px 14px; }
  .event-legend { grid-template-columns: 14px 70px 1fr; font-size: 11.5px; }
}
/* ============================================================
   v2.2: traffic value strip + forecast grid + conversions
   ============================================================ */

/* === Traffic value strip (overview) === */
.value-strip {
  background: linear-gradient(135deg, var(--client-tint) 0%, var(--coral-pale) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 24px 28px;
  margin: 24px 0 8px;
  box-shadow: var(--shadow-sm);
}
.value-strip-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: center;
}
.value-strip .value-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--soft);
  margin-bottom: 6px;
}
.value-strip .value-amount {
  font-family: 'Inter Tight', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--client-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}
.value-strip .value-period { color: var(--mid); font-size: 22px; font-weight: 500; }
.value-strip .value-meta {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--mid);
  font-family: 'JetBrains Mono', monospace;
}
.value-strip .value-explainer {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-family: 'PT Serif', serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.value-strip .value-explainer strong { color: var(--coral-dark); }
.value-strip .value-explainer .english-badge { margin-bottom: 8px; }

/* === Forecast grid === */
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.forecast-cell {
  background: var(--client-tint);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
}
.forecast-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--soft);
  margin-bottom: 6px;
}
.forecast-value {
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--client-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.forecast-delta {
  margin-top: 8px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
}
.forecast-delta.good { background: var(--good-soft); color: var(--good); }
.forecast-delta.bad { background: var(--bad-soft); color: var(--bad); }
.forecast-delta.neutral { background: var(--surface-2); color: var(--mid); }

/* Mobile adjust */
@media (max-width: 768px) {
  .value-strip-inner { grid-template-columns: 1fr; gap: 18px; }
  .value-strip .value-amount { font-size: 32px; }
  .forecast-grid { grid-template-columns: 1fr 1fr; }
  .grid-2-equal { grid-template-columns: 1fr; }
}
/* ============================================================
   v2.3: range picker
   ============================================================ */

.range-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  box-shadow: var(--shadow-xs);
}
.range-picker .range-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--soft);
  font-weight: 600;
}
.range-custom { display: inline-flex; align-items: center; gap: 5px; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--hairline); }
.range-custom input[type=date] { font-family: 'Inter Tight', sans-serif; font-size: 12px; border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 7px; color: var(--charcoal); background: var(--surface-2); }
.range-custom .range-to { font-size: 11px; color: var(--soft); }
.range-apply { font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 600; color: #fff; background: var(--client-primary, var(--coral)); border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.range-apply:hover { filter: brightness(0.95); }
@media (max-width: 900px) { .range-custom { display: none; } }
.range-picker select {
  background: var(--surface-2);
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  outline: none;
  letter-spacing: -0.01em;
}
.range-picker select:hover { background: var(--client-soft); color: var(--client-primary); }

@media (max-width: 768px) {
  .range-picker { padding: 3px 4px 3px 8px; }
  .range-picker .range-label { display: none; }
  .range-picker select { font-size: 11.5px; padding: 4px 10px; }
}
/* ============================================================
   v2.4: calendar heatmap
   ============================================================ */

.heatmap-wrap {
  padding: 4px 0;
}
.heatmap {
  width: 100%;
  height: auto;
  display: block;
}
.heatmap .hm-day-label {
  fill: var(--soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
}
.heatmap .hm-cell {
  cursor: default;
  transition: stroke 0.1s;
  stroke: transparent;
  stroke-width: 1;
}
.heatmap .hm-cell:hover {
  stroke: var(--charcoal);
}

/* Tiers (0=empty/none, 5=highest). Use client-primary for hue. */
.hm-tier-0 { fill: var(--surface-2); }
.hm-tier-1 { fill: var(--client-primary); fill-opacity: 0.18; }
.hm-tier-2 { fill: var(--client-primary); fill-opacity: 0.36; }
.hm-tier-3 { fill: var(--client-primary); fill-opacity: 0.55; }
.hm-tier-4 { fill: var(--client-primary); fill-opacity: 0.78; }
.hm-tier-5 { fill: var(--client-primary); fill-opacity: 1; }

.heatmap-legend {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--soft);
  font-family: 'Inter Tight', sans-serif;
  flex-wrap: wrap;
}
.heatmap-legend .lbl {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.heatmap-legend .lbl-meta {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  text-transform: none;
  letter-spacing: 0;
}
.heatmap-legend .hm-cell-mini {
  width: 12px; height: 12px; border-radius: 2px;
  display: inline-block;
}
.heatmap-legend .hm-cell-mini.hm-tier-0 { background: var(--surface-2); }
.heatmap-legend .hm-cell-mini.hm-tier-1 { background: var(--client-primary); opacity: 0.18; }
.heatmap-legend .hm-cell-mini.hm-tier-2 { background: var(--client-primary); opacity: 0.36; }
.heatmap-legend .hm-cell-mini.hm-tier-3 { background: var(--client-primary); opacity: 0.55; }
.heatmap-legend .hm-cell-mini.hm-tier-4 { background: var(--client-primary); opacity: 0.78; }
.heatmap-legend .hm-cell-mini.hm-tier-5 { background: var(--client-primary); }

@media (max-width: 768px) {
  .heatmap-legend { font-size: 10px; }
  .heatmap-legend .lbl-meta { width: 100%; margin-left: 0; margin-top: 6px; }
}

/* ---------- Revenue / Timely / cross-ref / funnel (Niche Aesthetics + future clinic clients) ---------- */
.revenue-panel { padding: 24px 28px; }
.revenue-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.revenue-tile { background: var(--surface-soft, #fafaf7); border: 1px solid var(--hairline); border-radius: var(--r-md, 10px); padding: 18px 20px; }
.revenue-label { font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 8px; }
.revenue-value { font-family: 'Inter Tight', sans-serif; font-size: 32px; font-weight: 700; line-height: 1; color: var(--client-primary); letter-spacing: -0.03em; }
.revenue-delta { font-size: 12px; color: var(--soft); margin-top: 6px; }
.revenue-delta.up { color: #1d8a4b; }
.revenue-delta.down { color: #c44c3c; }
.revenue-services { margin-top: 8px; }
.revenue-services-title { font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.revenue-services ul { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--charcoal); }
.revenue-services li { padding: 4px 0; border-bottom: 1px dotted var(--hairline); }
.revenue-services li:last-child { border-bottom: 0; }

.cross-ref-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cross-ref-table th, .cross-ref-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.cross-ref-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--soft); font-weight: 600; }
.cross-ref-table td:nth-child(2) { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--client-primary); }

.funnel-stages { display: flex; align-items: stretch; gap: 8px; padding: 12px 0; flex-wrap: wrap; }
.funnel-stage { flex: 1; min-width: 140px; background: var(--surface-soft, #fafaf7); border: 1px solid var(--hairline); border-radius: var(--r-md, 10px); padding: 16px 18px; text-align: center; }
.funnel-num { font-family: 'Inter Tight', sans-serif; font-size: 28px; font-weight: 700; color: var(--client-primary); letter-spacing: -0.02em; line-height: 1; }
.funnel-lbl { font-size: 12px; color: var(--soft); margin-top: 6px; line-height: 1.3; }
.funnel-lbl .sub { display: block; font-size: 10px; opacity: 0.7; }
.funnel-arrow { display: flex; align-items: center; color: var(--soft); font-size: 18px; }
.funnel-rates { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 0 4px; font-size: 13px; color: var(--soft); }
.funnel-rates strong { color: var(--client-primary); font-family: 'JetBrains Mono', monospace; }

@media (max-width: 720px) {
  .revenue-tiles { grid-template-columns: 1fr; }
  .funnel-stages { flex-direction: column; }
  .funnel-arrow { transform: rotate(90deg); justify-content: center; padding: 4px 0; }
}

/* admin 'view as client' tab pill – differentiated */
.tab-pill.view-client { margin-left: auto; background: #14110F; color: #FDF0E8; border-color: #14110F; opacity: 0.85; }
.tab-pill.view-client:hover { opacity: 1; background: #2A2522; }

/* ============================================================
   v3 design refinements – 2026-05-07
   Aligns big numeric displays + section treatments to the
   "Luminate-demo aesthetic": PT Serif 400 editorial numbers,
   restrained charcoal coloring, cleaner spacing.
   Content unchanged – purely visual polish.
   ============================================================ */

/* === Editorial numeric displays === */
/* Switch from Inter Tight 700 to PT Serif 400 for big numbers.
   More elegant, more "Luminate-demo cleaner aesthetic". */

.kpi-value {
  font-family: 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 2.6rem !important;
  color: var(--charcoal) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.kpi-value .unit {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  color: var(--soft) !important;
}

.exec-summary .stat-block .number {
  font-family: 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 3rem !important;
  color: var(--coral) !important;
  letter-spacing: -0.02em !important;
}

.donut .inner .pct {
  font-family: 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.7rem !important;
  color: var(--charcoal) !important;
  letter-spacing: -0.02em !important;
}

.gbp-stat .val {
  font-family: 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.5rem !important;
  color: var(--charcoal) !important;
  letter-spacing: -0.01em !important;
}

.kw-pos {
  font-family: 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em !important;
}

/* === KPI card refinements === */
.kpi {
  padding: 24px 26px 22px;
  border-radius: 14px;
}
.kpi:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
}
.kpi-label {
  font-size: 10.5px;
  letter-spacing: 0.15em;
  font-weight: 500;
  color: var(--mid);
}
.kpi-delta {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* === Section title refinement === */
.section-title {
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin: 48px 0 20px;
}
.section-title .sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--mid);
  font-style: italic;
}

/* === Section eyebrow utility (for tiny coral uppercase labels) === */
.section-eyebrow {
  display: block;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  font-weight: 500;
  margin-bottom: 12px;
  font-family: 'DM Sans', sans-serif;
}

/* === Exec summary refinements === */
.exec-summary {
  border-radius: 16px;
  padding: 36px 40px;
}
.exec-summary h2 {
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.exec-summary .stat-block {
  padding-left: 32px;
}
.exec-summary .stat-block .label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--coral);
  margin-top: 10px;
}

/* === Panel hover refinement === */
.panel {
  border-radius: 14px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.panel:hover {
  transform: translateY(-1px);
  border-color: var(--hairline-strong);
}
.panel h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* === English panel polish === */
.english-trans .what-it-means {
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.english-data .marketing-term {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* === Badge polish === */
.badge {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 11px;
  border-radius: 12px;
}

/* === Day-0 badge refinement === */
.day0-badge {
  border-radius: 12px;
  padding: 9px 15px;
  font-size: 12px;
}
.day0-badge strong {
  font-family: 'PT Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

/* === Tab pill refinement === */
.tab-pill {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tab-pill.active {
  color: var(--coral);
  font-weight: 600;
}

/* === Mobile adjustments for new sizes === */
@media (max-width: 768px) {
  .kpi-value { font-size: 1.8rem !important; }
  .exec-summary .stat-block .number { font-size: 2rem !important; }
  .donut .inner .pct { font-size: 1.4rem !important; }
  .section-title { font-size: 1.3rem; margin: 32px 0 14px; }
}

/* ============================================================
   v3.1 – Brand-tinted gradient backdrop
   Strong client-primary gradient from top-right (Luminate-demo style).
   White cards stay crisp on top.
   ============================================================ */

body {
  background:
    radial-gradient(ellipse at 100% -10%,
      color-mix(in srgb, var(--client-primary) 38%, transparent) 0%,
      color-mix(in srgb, var(--client-primary) 18%, transparent) 30%,
      transparent 60%
    ),
    radial-gradient(circle at 0% 100%,
      color-mix(in srgb, var(--client-accent) 22%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 25% 0%, rgba(217,119,87,0.03) 0%, transparent 50%),
    var(--canvas) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Ensure all surface elements stay crisp white on top of the gradient */
.kpi,
.panel,
.exec-summary,
.english-panel,
.english-data,
.day0-badge,
.client-switcher,
.btn,
.tabs-prominent,
.trend-wrap,
.gbp-stat {
  background-color: var(--surface) !important;
}

.exec-summary {
  /* Was a subtle linear gradient blend – keep that subtle indoor tint */
  background: linear-gradient(135deg, var(--white) 0%, color-mix(in srgb, var(--client-primary) 4%, white) 100%) !important;
}

/* ============================================================
   v3.2 – Single diagonal gradient (top-right → bottom-left white)
   All info boxes pure white. No card gradients. Clean and crisp.
   ============================================================ */

body {
  background:
    linear-gradient(
      to bottom left,
      color-mix(in srgb, var(--client-primary) 38%, transparent) 0%,
      color-mix(in srgb, var(--client-primary) 18%, transparent) 35%,
      transparent 70%
    ) fixed,
    var(--canvas) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Force ALL info boxes to pure crisp white – no gradients */
.kpi,
.panel,
.exec-summary,
.english-panel,
.english-data,
.day0-badge,
.client-switcher,
.btn,
.tabs-prominent,
.trend-wrap,
.gbp-stat,
.mock-note,
.empty,
.pill {
  background: var(--surface) !important;
  background-image: none !important;
}