:root {
  --navy: #06152f;
  --navy-2: #0d2245;
  --navy-3: #17335f;
  --cream: #f6f1e5;
  --paper: #fffdf7;
  --ink: #122038;
  --muted: #677184;
  --rule: #d9d4c8;
  --sun: #f5c84d;
  --sun-soft: #fff1bb;
  --sky: #79bde8;
  --green: #16845b;
  --green-soft: #d8f0e5;
  --red: #d55345;
  --red-soft: #fae1dc;
  --white: #ffffff;
  --display: "Newsreader", Georgia, serif;
  --body: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
  --shell: 1220px;
  --radius: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.kicker { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -.035em; }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 62px; padding: 0 max(24px, calc((100vw - var(--shell)) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid #243b62; background: rgba(6, 21, 47, .96); color: var(--white); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; }
.brand__mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); color: var(--navy); font-family: var(--display); font-size: 19px; font-weight: 650; }
.topbar nav { display: flex; gap: 28px; }
.topbar nav a { color: #aebbd2; text-decoration: none; font-size: 12px; }
.topbar nav a:hover { color: var(--white); }
.topbar button { justify-self: end; padding: 8px 14px; border: 1px solid #45618f; border-radius: 999px; background: transparent; color: var(--white); cursor: pointer; font-size: 11px; font-weight: 700; }
.topbar button:hover { border-color: var(--sun); }

.hero { min-height: 535px; display: grid; grid-template-columns: 1.45fr .55fr; gap: 70px; align-items: end; padding-block: 76px 88px; }
.hero h1 { max-width: 14ch; color: var(--navy); font-size: clamp(58px, 7.5vw, 108px); line-height: .86; }
.hero__lede { max-width: 700px; margin: 30px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero__verdict { align-self: start; margin-top: 36px; padding: 24px; border: 2px solid var(--navy); box-shadow: 8px 8px 0 var(--sun); transform: rotate(1deg); }
.hero__verdict span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.hero__verdict strong { display: block; margin-top: 12px; color: var(--navy); font-family: var(--display); font-size: 30px; line-height: 1; }
.hero__verdict p { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

.scoreboard { background: var(--navy); color: var(--white); }
.scoreboard__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: 1px solid #29446f; }
.score { min-height: 150px; padding: 22px; border-right: 1px solid #29446f; display: flex; flex-direction: column; justify-content: space-between; }
.score--sun { background: var(--sun); color: var(--navy); }
.score small { color: #91a3c0; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.score--sun small { color: #66551f; }
.score strong { display: block; margin-top: 16px; font-family: var(--display); font-size: clamp(32px, 4vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score p { margin: 8px 0 0; color: #9aabc5; font-size: 11px; }
.score--sun p { color: #66551f; }
.change { margin-left: 5px; font-family: var(--mono); font-size: 10px; }
.change--up { color: #65d8a6; }
.change--down { color: #f18f83; }
.score--sun .change--up, .score--sun .change--down { color: var(--navy); }

.report-section { padding-block: 92px; }
.section-head { display: grid; grid-template-columns: 1fr minmax(280px, .55fr); gap: 72px; align-items: end; padding-bottom: 24px; border-bottom: 3px solid var(--navy); }
.section-head h2 { color: var(--navy); font-size: clamp(54px, 6.8vw, 88px); line-height: .9; }
.section-head > p { margin: 0; color: var(--muted); font-size: 13px; }
.section-head--inverse { color: var(--white); border-color: var(--white); }
.section-head--inverse h2 { color: var(--white); }
.section-head--inverse > p { color: #aebbd2; }

.chart-panel { margin-top: 42px; padding: 28px; border: 1px solid var(--rule); background: var(--cream); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.chart-legend i { display: inline-block; width: 18px; height: 7px; margin-right: 7px; vertical-align: middle; }
.legend-revenue { background: var(--navy); }
.legend-spend { background: var(--sky); }
.legend-profit { background: var(--sun); }
.daily-chart { min-width: 0; height: 360px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; align-items: end; padding: 24px 8px 0; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--navy); }
.day-column { position: relative; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 9px; }
.day-column::before { content: ""; position: absolute; inset: 0 -7px; background: transparent; z-index: 0; }
.day-column.is-yesterday::before { background: rgba(245, 200, 77, .22); border-top: 3px solid var(--sun); }
.day-column.is-partial::before { background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, rgba(13, 34, 69, .05) 7px, rgba(13, 34, 69, .05) 14px); }
.day-column > * { position: relative; z-index: 1; }
.day-value { font-family: var(--mono); font-size: 9px; white-space: nowrap; }
.day-bars { width: 100%; height: 245px; display: flex; align-items: end; justify-content: center; gap: 4px; }
.day-bar { width: min(25px, 38%); min-height: 1px; }
.day-bar--revenue { height: var(--revenue); background: var(--navy); }
.day-bar--spend { height: var(--spend); background: var(--sky); }
.day-profit { min-width: 44px; padding: 3px 5px; border-radius: 999px; background: var(--sun); color: var(--navy); font-family: var(--mono); font-size: 8px; text-align: center; white-space: nowrap; }
.day-profit.is-negative { background: var(--red-soft); color: var(--red); }
.day-label { font-family: var(--mono); font-size: 9px; text-align: center; white-space: nowrap; }
.day-label strong { display: block; color: var(--navy); font-size: 10px; }
.day-label span { color: var(--muted); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 960px; margin-top: 26px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th { padding: 11px 10px; border-bottom: 1px solid var(--navy); color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-align: right; text-transform: uppercase; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; text-align: left; }
.data-table td { padding: 14px 10px; border-bottom: 1px solid var(--rule); text-align: right; font-size: 12px; }
.data-table tr.is-yesterday td { background: var(--sun-soft); font-weight: 700; }
.data-table tr.is-partial td { color: var(--muted); }
.metric-positive { color: var(--green); font-weight: 700; }
.metric-negative { color: var(--red); font-weight: 700; }
.subtext { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }

.change-zone { padding-block: 96px; background: var(--navy); color: var(--white); }
.finding-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1px; margin-top: 42px; background: #29446f; }
.finding { min-height: 245px; padding: 28px; background: var(--navy-2); }
.finding:first-child { background: var(--sun); color: var(--navy); }
.finding__num { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.finding h3 { margin-top: 44px; font-size: 32px; line-height: 1; }
.finding p { margin: 16px 0 0; color: #aebbd2; font-size: 12px; line-height: 1.6; }
.finding:first-child p { color: #66551f; }
.finding strong { color: var(--white); }
.finding:first-child strong { color: var(--navy); }

.shift-panel { margin-top: 42px; padding: 30px; border: 1px solid #29446f; background: var(--navy-2); }
.shift-panel__head { display: flex; justify-content: space-between; gap: 32px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid #3a5683; }
.shift-panel__head h3 { color: var(--white); font-size: 40px; }
.shift-panel__head > p { margin: 0; color: #91a3c0; font-size: 11px; }
.shift-chart { margin-top: 28px; display: grid; gap: 22px; }
.shift-row { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px; align-items: center; }
.shift-row__name strong, .shift-row__name small { display: block; }
.shift-row__name strong { font-size: 12px; }
.shift-row__name small { margin-top: 4px; color: #91a3c0; font-size: 9px; }
.shift-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; }
.shift-bar { min-width: 0; }
.shift-bar__track { height: 11px; background: var(--navy-3); }
.shift-bar__track i { display: block; width: var(--width); height: 100%; background: var(--bar); }
.shift-bar span { display: flex; justify-content: space-between; gap: 4px; margin-top: 5px; color: #91a3c0; font-family: var(--mono); font-size: 8px; }

.split-tables { display: grid; grid-template-columns: 1fr; gap: 54px; margin-top: 42px; }
.table-title { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.table-title h3 { color: var(--navy); font-size: 32px; }
.table-title span { color: var(--muted); font-size: 10px; }
.data-table--compact { min-width: 650px; margin-top: 14px; }
.data-table--compact td { padding-block: 12px; font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status--scaled { background: var(--sun-soft); color: #7d640f; }
.status--resumed { background: #dbeafa; color: #2d6497; }
.status--steady { background: #ebe8df; color: var(--muted); }
.ad-name { display: block; max-width: 260px; font-weight: 700; }

.today-zone { padding-block: 82px; background: var(--sun); color: var(--navy); }
.today-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.today-grid h2 { font-size: clamp(50px, 6vw, 82px); line-height: .9; }
.today-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #caa333; }
.today-card { min-height: 170px; padding: 22px; background: #f8d66e; }
.today-card small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.today-card strong { display: block; margin-top: 18px; font-family: var(--display); font-size: 36px; line-height: 1; }
.today-card p { margin: 10px 0 0; color: #66551f; font-size: 10px; }
.today-note { grid-column: 1 / -1; padding: 18px 22px; background: var(--navy); color: var(--white); font-size: 12px; }

.methodology { padding-block: 84px; background: var(--cream); }
.methodology__grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 80px; }
.methodology h2 { color: var(--navy); font-size: 54px; line-height: .95; }
.method-row { display: grid; grid-template-columns: 125px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.method-row strong { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.method-row p { margin: 0; color: var(--muted); font-size: 11px; }

footer { background: var(--navy); color: var(--white); }
.footer__inner { min-height: 80px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer__inner p { margin: 0; color: #91a3c0; font-size: 10px; }
.footer__inner a { font-family: var(--mono); font-size: 10px; text-underline-offset: 4px; }

.loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 16px; background: var(--cream); text-align: center; transition: opacity .35s var(--ease), visibility .35s var(--ease); }
.loading.is-hidden { opacity: 0; visibility: hidden; }
.loading span { width: 180px; height: 4px; overflow: hidden; background: #ddd4c2; }
.loading span::after { content: ""; display: block; width: 45%; height: 100%; background: var(--sun); animation: load 1.1s infinite var(--ease); }
.loading p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(250%); } }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 32px; }
  .hero__verdict { justify-self: start; max-width: 370px; margin: 0; }
  .scoreboard__grid { grid-template-columns: repeat(2, 1fr); }
  .score:last-child { grid-column: 1 / -1; }
  .section-head, .today-grid, .methodology__grid { grid-template-columns: 1fr; gap: 28px; }
  .finding-grid { grid-template-columns: 1fr; }
  .finding { min-height: 0; }
  .finding h3 { margin-top: 26px; }
  .split-tables { grid-template-columns: 1fr; }
  .shift-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 640px) {
  .shell { width: min(var(--shell), calc(100% - 28px)); }
  .topbar { min-height: 56px; padding-inline: 14px; gap: 8px; }
  .brand { font-size: 9px; }
  .topbar button { padding-inline: 10px; font-size: 9px; }
  .hero { padding-block: 58px 68px; }
  .hero h1 { font-size: clamp(52px, 17vw, 70px); line-height: .89; }
  .hero__lede { margin-top: 22px; font-size: 15px; }
  .hero__verdict { max-width: calc(100% - 8px); }
  .scoreboard__grid { width: 100%; grid-template-columns: 1fr 1fr; }
  .score { min-height: 125px; padding: 16px; }
  .score:first-child { grid-column: 1 / -1; }
  .score strong { font-size: 32px; }
  .report-section, .change-zone { padding-block: 68px; }
  .section-head h2 { font-size: 52px; }
  .chart-panel { margin-inline: -14px; padding: 18px 12px; overflow-x: auto; }
  .daily-chart { width: 800px; height: 320px; }
  .finding { padding: 22px; }
  .shift-panel { padding: 20px; }
  .shift-panel__head { align-items: start; flex-direction: column; gap: 10px; }
  .shift-bars { grid-template-columns: 1fr 1fr; }
  .today-read { grid-template-columns: 1fr; }
  .today-note { grid-column: 1; }
  .method-row { grid-template-columns: 1fr; gap: 6px; }
  .footer__inner { padding-block: 22px; align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .loading { display: none !important; }
  .shell { width: 100%; }
  .hero { min-height: 0; padding-block: 36px; }
  .scoreboard { break-after: page; }
  .report-section, .change-zone, .today-zone, .methodology { padding-block: 32px; }
  .change-zone { break-before: page; }
  .shift-panel, .finding, .scoreboard, .today-zone { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}