@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* Dark is the default theme (matches the Prescient marketing site). Light is opt-in via [data-theme="light"] on , toggled + persisted by theme.js. */ :root { color-scheme: dark; --ink: #fafafa; --muted: #a3a3a3; --line: #3a3a3a; --line-subtle: #2a2a2a; --panel: #141414; --surface: #0a0a0a; --rail: #171717; --black: #0a0a0a; --pearl-highlighter: #e7ff59; --teal: #38de68; --teal-dark: #7ee9a3; --teal-soft: rgba(56, 222, 104, 0.15); --coral: #ff9a6a; --coral-soft: rgba(255, 154, 106, 0.18); --blue: #5ccfcf; --blue-soft: rgba(92, 207, 207, 0.16); --purple: #b47fff; --gold: #c4ee38; --gold-soft: rgba(196, 238, 56, 0.16); --green: #22c55e; --green-soft: rgba(34, 197, 94, 0.16); --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, 0.16); --bar-neutral: #656a70; --bar-neutral-hover: #7b8087; --data-surface: #141414; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; --font-code: 'JetBrains Mono', monospace; } [data-theme="light"] { color-scheme: light; --ink: #111111; --muted: #5a5a5a; --line: #8e8e8e; --line-subtle: #f0f0f0; --panel: #ffffff; --surface: #fbfcfb; --rail: #f5f5f5; --black: #111111; --teal-dark: #166534; --teal-soft: #d1fae0; --green: #117d38; --green-soft: #d1fae0; --danger: #c0392b; --danger-soft: #fde7e7; --data-surface: #141414; --shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); font-family: var(--font-body); background: var(--surface); letter-spacing: 0; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.01em; } button, input, select { font: inherit; } /* Plain anchors inherit surrounding text color instead of the browser's default link blue — every intentionally-colored link (nav, buttons, pills, CTAs) sets its own color and wins on specificity. */ a { color: inherit; } .product-bar { height: 56px; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--black); } .product-logo { display: flex; align-items: center; width: 112px; height: 24px; color: inherit; } .product-logo svg, .product-logo img { display: block; width: 100%; height: auto; } .product-user { display: flex; align-items: center; gap: 16px; font-size: 13px; } .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: transparent; color: #fff; cursor: pointer; flex: 0 0 auto; } .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.4); } .theme-toggle svg { width: 17px; height: 17px; display: block; } .theme-toggle .sun-ray, .theme-toggle .sun-body { display: none; } [data-theme="light"] .theme-toggle .sun-ray, [data-theme="light"] .theme-toggle .sun-body { display: block; } [data-theme="light"] .theme-toggle .moon-path { display: none; } .toggle { display: inline-flex; align-items: center; gap: 7px; color: #fff; } .toggle-track { width: 30px; height: 16px; border-radius: 999px; background: #5a5c61; position: relative; display: inline-block; } .toggle-track::after { content: ""; width: 14px; height: 14px; border-radius: 999px; background: #fff; position: absolute; top: 1px; left: 1px; } .avatar { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: #262626; border: 1px solid rgba(255,255,255,0.18); font-weight: 800; font-size: 13px; } .app-shell { min-height: calc(100vh - 56px); display: grid; grid-template-columns: 248px minmax(0, 1fr); width: 100%; overflow-x: hidden; transition: grid-template-columns 180ms ease; } .app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); } aside { background: var(--rail); color: var(--ink); padding: 28px 12px 14px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow: auto; border-right: 1px solid var(--line); transition: opacity 140ms ease, visibility 140ms ease; } .app-shell.sidebar-collapsed aside { opacity: 0; visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; border-right: 0; } .sidebar-close, .sidebar-restore { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; } .sidebar-close { position: absolute; top: 10px; right: 10px; } .sidebar-restore { display: none; flex: 0 0 auto; margin: 2px 2px 0 0; font-size: 16px; } .app-shell.sidebar-collapsed .sidebar-restore { display: inline-grid; } .brand-block { padding: 0 12px 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .eyebrow { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-code); margin: 0 0 8px; } .brand-block h1 { margin: 0; font-size: 18px; line-height: 1.12; letter-spacing: 0; } nav { display: grid; gap: 4px; margin-bottom: 26px; } nav a { color: var(--muted); text-decoration: none; border-radius: 2px; padding: 12px 14px; font-size: 14px; display: flex; align-items: center; gap: 12px; font-weight: 500; } nav a.active { background: var(--rail); color: var(--ink); font-weight: 800; } .dot { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--muted); background: transparent; flex: 0 0 auto; } .client-benchmark { border-top: 1px solid var(--line); padding: 16px 0 0; margin: 0 0 18px; } .client-benchmark h2 { margin: 0 12px 10px; color: var(--muted); font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .client-tab { width: 100%; border: 0; border-radius: 4px; background: transparent; color: var(--muted); display: grid; gap: 6px; padding: 10px 12px; text-align: left; cursor: pointer; } .client-tab.active { background: var(--rail); color: var(--ink); box-shadow: inset 3px 0 0 var(--teal); } .client-tab strong { font-size: 13px; line-height: 1.15; } .client-tab span { display: flex; justify-content: space-between; gap: 8px; color: inherit; font-family: var(--font-code); font-size: 10px; line-height: 1.2; text-transform: uppercase; } main { min-width: 0; padding: 28px 30px 36px; background: var(--panel); } .topbar { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--ink); } .title-group h2 { margin: 0 0 8px; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; } .report-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-family: var(--font-code); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .report-tag::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--teal); display: inline-block; } .subtitle { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 820px; } .actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--ink); cursor: pointer; box-shadow: none; } .secondary-button { height: 38px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--ink); padding: 0 14px; font-weight: 500; cursor: pointer; box-shadow: none; } .primary-button { height: 38px; border: 0; border-radius: 3px; background: var(--black); color: #fff; padding: 0 14px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .pdf-status { color: var(--muted); font-size: 12px; min-height: 16px; text-align: right; } .filter-strip { background: var(--panel); border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 0; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 24px; } .filter { min-width: 0; border: 1px solid var(--line-subtle); border-radius: 6px; padding: 10px 12px; background: var(--panel); min-height: 62px; box-shadow: var(--shadow); } .filter label { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; font-family: var(--font-code); letter-spacing: 0.06em; margin-bottom: 7px; } .filter strong { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; } .client-select { width: 100%; min-height: 32px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 800; padding: 4px 8px; } section { margin-bottom: 24px; } .section-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; } .section-header h3 { margin: 0; font-size: 18px; font-weight: 800; } .section-header span { color: var(--muted); font-size: 13px; } .trend-heading, .halo-title, .wallet-title { display: grid; gap: 3px; } .trend-controls, .halo-controls, .wallet-controls { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: var(--rail); flex: 0 0 auto; } .trend-toggle, .halo-toggle, .wallet-toggle { min-width: 68px; height: 28px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .halo-toggle { min-width: 0; padding: 0 10px; } .trend-toggle.active, .halo-toggle.active, .wallet-toggle.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .kpi-card, .panel, .table-panel { background: var(--panel); border: 1px solid var(--line-subtle); border-radius: 6px; box-shadow: var(--shadow); } .kpi-card { padding: 16px; min-height: 116px; display: grid; align-content: start; gap: 16px; } .kpi-label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; font-family: var(--font-code); letter-spacing: 0.06em; } .kpi-value { font-size: 28px; line-height: 1; font-weight: 800; margin: 8px 0; letter-spacing: 0; } .kpi-foot { color: var(--muted); font-size: 13px; line-height: 1.35; } .two-column { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr); gap: 14px; align-items: stretch; } #halo-effects.two-column { grid-template-columns: 1fr; } .panel { padding: 18px; min-width: 0; } .data-panel { background: var(--panel); color: var(--ink); border-color: var(--line-subtle); } .data-panel .section-header span, .data-panel .stack-label, .data-panel .mini-metric small { color: var(--muted); } .data-panel .mini-metric { border-color: var(--line); background: var(--panel); } .chart-wrap { height: 310px; display: grid; grid-template-rows: 1fr auto; gap: 12px; position: relative; } .bar-chart { height: 100%; display: grid; grid-template-columns: repeat(10, minmax(20px, 1fr)); align-items: end; gap: 10px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 14px 0; min-width: 0; } .roas-bubble { position: absolute; left: 50%; bottom: calc(var(--bubble-bottom, 60%) + 10px); z-index: 3; min-width: 42px; padding: 4px 6px; border: 1px solid rgba(17, 17, 17, 0.16); border-radius: 999px; background: var(--pearl-highlighter); color: var(--black); font-family: var(--font-code); font-size: 10.5px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); transform: translateX(-50%); } .bar-pair { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: end; min-width: 0; position: relative; } .bar { min-height: 5px; border-radius: 3px 3px 0 0; } .spend-stack { min-height: 5px; display: flex; flex-direction: column; justify-content: flex-start; align-self: end; border-radius: 3px 3px 0 0; overflow: hidden; background: #101010; } .spend-segment { display: block; min-height: 3px; flex: 0 0 auto; } .spend-segment.web { background: var(--teal); } .spend-segment.gmv-max { background: var(--blue); } .mer-line { position: absolute; left: 1px; right: 1px; border-top: 2px dashed var(--coral); z-index: 2; pointer-events: none; } .mer-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); } .bar.revenue { position: relative; background: var(--bar-neutral); cursor: help; outline: none; } .bar.revenue:hover, .bar.revenue:focus-visible { background: var(--bar-neutral-hover); } .revenue-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 4; width: 188px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26); opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 150ms ease, transform 150ms ease; } .revenue-tooltip::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -6px; width: 12px; height: 12px; background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); } .bar.revenue:hover .revenue-tooltip, .bar.revenue:focus-visible .revenue-tooltip { opacity: 1; transform: translate(-50%, 0); } .revenue-tooltip small { display: block; margin-bottom: 7px; color: var(--muted); font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .tooltip-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.55; } .tooltip-row strong { font-size: 11px; line-height: 1.55; font-weight: 800; } .chart-axis { display: grid; grid-template-columns: repeat(10, minmax(20px, 1fr)); gap: 10px; color: var(--muted); font-size: 11px; text-align: center; } .legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .swatch.teal { background: var(--teal); } .swatch.coral { background: var(--coral); } .swatch.blue { background: var(--blue); } .swatch.gold { background: var(--gold); } .swatch.gray { background: var(--bar-neutral); } .stacked-list { display: grid; gap: 14px; } .stack-row { display: grid; gap: 7px; } .stack-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); } .stack-track { height: 12px; background: var(--rail); border-radius: 999px; overflow: hidden; display: flex; } .stack-track b { display: block; height: 100%; } .wallet-panel { display: grid; gap: 16px; } .wallet-chart { display: grid; gap: 12px; } .wallet-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 178px; gap: 12px; align-items: center; } .wallet-period { color: var(--muted); font-size: 12px; font-weight: 800; } .wallet-bar { height: 18px; display: flex; overflow: hidden; border-radius: 999px; background: var(--rail); } .wallet-bar i { display: block; min-width: 2px; height: 100%; } .wallet-bar .web { background: var(--teal); } .wallet-bar .gmv-max { background: var(--blue); } .wallet-bar .remainder { background: var(--line-subtle); } .wallet-readout { display: grid; gap: 2px; min-width: 0; font-size: 12px; color: var(--muted); } .wallet-readout strong { color: var(--ink); font-size: 13px; } .metric-footnote { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; } .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } #halo-effects .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mini-metric { border: 1px solid var(--line); border-radius: 6px; padding: 10px; min-height: 74px; } .mini-metric small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; font-size: 10px; } .mini-metric strong { font-size: 18px; } .table-panel { overflow: hidden; } .table-panel { overflow-x: auto; } table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; } th, td { text-align: center; padding: 12px 14px; border-bottom: 1px solid var(--line-subtle); vertical-align: top; white-space: nowrap; } th { color: var(--muted); font-size: 11px; font-family: var(--font-code); text-transform: uppercase; background: var(--surface); font-weight: 800; } tr:last-child td { border-bottom: 0; } .num { text-align: center; font-variant-numeric: tabular-nums; } tbody td:first-child, #channel-breakdown tbody td:nth-child(2), #halo-effects tbody td:last-child { text-align: left; } #channel-breakdown th:first-child, #channel-breakdown th:nth-child(2), #halo-effects th:first-child, #halo-effects th:last-child, #monthly th:first-child { text-align: left; } .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .pill.teal { color: var(--teal-dark); background: var(--teal-soft); } .pill.coral { color: var(--coral); background: var(--coral-soft); } .pill.blue { color: var(--blue); background: var(--blue-soft); } .pill.gold { color: var(--black); background: var(--pearl-highlighter); } .pill.green { color: var(--green); background: var(--green-soft); } .partner-heading { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .section-logo { width: 72px; height: auto; display: block; } .partner-heading h3 { margin: 0; } .mono-code { font-family: var(--font-code); font-size: 12px; color: var(--muted); } .channel-code { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--line-subtle); border-radius: 4px; background: var(--rail); color: var(--ink); font-family: var(--font-code); font-size: 12px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; } .channel-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .toggle-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; line-height: 1; transition: transform 160ms ease; } .channel-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(90deg); } .tactic-row[hidden] { display: none; } .tactic-row td { padding: 0; background: var(--rail); } .tactic-panel { padding: 14px 16px 16px; border-top: 1px solid var(--line-subtle); } .tactic-panel h4 { margin: 0 0 10px; font-size: 13px; } .tactic-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(92px, 0.7fr)) 1.4fr; gap: 8px 12px; align-items: center; font-size: 12px; } .tactic-grid .head { color: var(--muted); font-family: var(--font-code); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .tactic-grid .num { text-align: center; } .admin-disclosure { border: 1px solid var(--line-subtle); border-radius: 6px; background: var(--panel); box-shadow: var(--shadow); } .admin-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; } .admin-disclosure summary::-webkit-details-marker { display: none; } .admin-summary-title { display: grid; gap: 4px; } .admin-summary-title h3 { margin: 0; } .admin-summary-title span, .upload-box p, .callout p { color: var(--muted); font-size: 13px; line-height: 1.4; margin-bottom: 0; } .admin-chevron { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); transition: transform 0.16s ease; } .admin-disclosure[open] .admin-chevron { transform: rotate(90deg); } .admin-body { padding: 0 18px 18px; border-top: 1px solid var(--line-subtle); } .admin-upload-grid { display: grid; grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(130px, 0.7fr)); gap: 10px; margin-top: 18px; } .upload-box, .callout { border: 1px solid var(--line-subtle); border-radius: 6px; padding: 12px; background: var(--surface); } .upload-box label, .callout strong { display: block; margin-bottom: 8px; font-weight: 800; } .upload-box input { width: 100%; margin-bottom: 10px; } .status-band { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .callout { border-left: 4px solid var(--teal); } .callout.warning { border-left-color: var(--gold); } .admin-preview { margin-top: 14px; } .mobile-only { display: none; } @media (max-width: 860px) { .app-shell { grid-template-columns: 1fr; } aside { position: static; height: auto; } nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } .filter-strip, .kpi-grid, .two-column, .admin-upload-grid, .status-band { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { aside, .sidebar-restore { display: none !important; } .app-shell { grid-template-columns: 1fr; } main { padding: 18px; } .topbar { flex-direction: column; } .title-group h2 { font-size: 22px; line-height: 1.15; } .topbar { display: grid; } .actions { justify-content: flex-start; flex-wrap: wrap; } nav, .filter-strip, .kpi-grid, .two-column, .admin-upload-grid, .status-band, .summary-grid { grid-template-columns: 1fr; } .title-group h2 { font-size: 24px; } .table-panel { overflow-x: auto; } .desktop-only { display: none; } .mobile-only { display: block; } .bar-chart { padding-top: 38px; gap: 7px; } .roas-bubble { min-width: 36px; padding: 3px 5px; font-size: 9.5px; } .trend-controls { width: 100%; } .trend-toggle { flex: 1; } } @media print { @page { size: letter; margin: 0.42in; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background: #fff; overflow: visible; } .product-bar, aside, .sidebar-restore, .actions, .pdf-status { display: none !important; } .app-shell { display: block; min-height: auto; overflow: visible; } main { padding: 0; background: #fff; } .topbar { break-after: avoid; page-break-after: avoid; margin-bottom: 18px; padding-bottom: 16px; } section { break-inside: avoid; page-break-inside: avoid; margin-bottom: 18px; } .kpi-grid { grid-template-columns: repeat(4, 1fr); } .two-column { grid-template-columns: 1fr 1fr; } #halo-effects.two-column { grid-template-columns: 1fr; } .table-panel { overflow: visible; } table { min-width: 0; font-size: 10.5px; } th, td { padding: 8px 9px; white-space: normal; } .chart-wrap { height: 220px; } .roas-bubble { box-shadow: none; } .kpi-card, .panel, .table-panel { box-shadow: none; } } /* Prescient Impact — consolidated narrative panel */ .impact-hero { display: flex; align-items: center; gap: 22px; padding: 4px 4px 18px; border-bottom: 1px solid var(--line-subtle); margin-bottom: 16px; } .impact-hero-num { font-family: var(--font-heading); font-size: 52px; font-weight: 800; line-height: 1; color: var(--green); letter-spacing: -0.02em; flex: 0 0 auto; } .impact-hero-txt strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 4px; } .impact-hero-txt span { color: var(--muted); font-size: 13px; line-height: 1.45; } .impact-proof-head { font-family: var(--font-code); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .proof { border: 1px solid var(--line-subtle); border-radius: 8px; padding: 13px 14px; background: var(--surface); } .proof .q { display: block; font-weight: 700; font-size: 13px; margin-bottom: 7px; } .proof .proof-stat { display: block; font-family: var(--font-heading); font-size: 22px; font-weight: 800; margin-bottom: 5px; } .proof .a { color: var(--muted); font-size: 12px; line-height: 1.45; } .proof select { margin-top: 6px; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 5px; border: 1px solid var(--line-subtle); border-radius: 4px; } @media (max-width: 720px) { .proof-grid { grid-template-columns: 1fr; } .impact-hero { flex-direction: column; align-items: flex-start; gap: 8px; } .impact-hero-num { font-size: 40px; } } /* Monthly Export Preview: month subtotal vs per-sales-channel breakout */ #monthlyTableBody tr.month-total td { border-top: 2px solid var(--line); } #monthlyTableBody tr.sc-sub td { color: var(--muted); font-size: 0.92em; border-top: 1px solid var(--line-subtle); } #monthlyTableBody tr.sc-sub td:nth-child(2) { padding-left: 22px; }