/* ==========================================================================
   Business Overview — house stylesheet
   Derived from AKAM-Business-Overview.html. Drop-in for the same markup:
   <link rel="stylesheet" href="business-overview.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --cream: #FAF6EF;
  --paper: #FFFFFF;
  --ink: #2B2B2B;
  --muted: #6E675C;
  --line: #E5DDD0;
  --terracotta: #C75B39;
  --terracotta-soft: #F3E2DA;
  --terracotta-pale: #F0C9B8;
  --good: #3E6B4F;
  --gold: #C79A3A;
  --blue: #3C6E8F;

  /* Type */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: Calibri, 'Segoe UI', Arial, sans-serif;
  --fs-body: 19px;
  --fs-small: 15px;
  --fs-caption: 14px;
  --fs-micro: 13px;
  --lh-body: 1.58;

  /* Shape & space */
  --radius: 10px;
  --accent-bar: 5px;
  --measure: 900px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 44px 24px 80px;
}

a {
  color: var(--terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

strong { font-weight: bold; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

/* --------------------------------------------------------------------------
   3. Headings & text roles
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: bold;
  line-height: 1.2;
}

h1 { font-size: 38px; margin: .2em 0 .3em; }

h2 {
  font-size: 27px;
  margin: 2em 0 .6em;
  padding-top: .6em;
  border-top: 1px solid var(--line);
}

h3 { font-size: 21px; margin: 1.5em 0 .5em; }
h4 { font-size: 18px; margin: 0 0 .3em; }

.kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--fs-caption);
  color: var(--terracotta);
  font-weight: bold;
}

.srcline {
  color: var(--muted);
  font-size: var(--fs-small);
}

.cap {
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: 1.45;
  margin: 4px 0 18px;
}

.muted { color: var(--muted); }

/* One-sentence thesis under the title */
.restate {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.45;
  border-left: var(--accent-bar) solid var(--terracotta);
  padding: 6px 0 6px 20px;
  margin: 28px 0;
}

/* --------------------------------------------------------------------------
   4. Lists
   -------------------------------------------------------------------------- */
ul, ol { padding-left: 24px; }
li { margin: .35em 0; }

/* --------------------------------------------------------------------------
   5. Panels
   -------------------------------------------------------------------------- */

/* Dark "unit of economics" panel */
.engine {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 28px 0;
}
.engine .u {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: bold;
  color: var(--terracotta-pale);
  margin-bottom: 8px;
}
.engine p { margin: 0; }
.engine p + p { margin-top: .6em; }

/* Generic white card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}

/* Callout with terracotta tint (non-quote use) */
.note {
  background: var(--terracotta-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
}

/* --------------------------------------------------------------------------
   6. KPI tiles
   -------------------------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.kpi .v {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--terracotta);
  font-weight: bold;
  line-height: 1.1;
}
.kpi .l {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */
.tbl {
  overflow-x: auto;
  margin: 14px 0 6px;
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--paper);
  font-size: 16px;
  border: 1px solid var(--line);
}

th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  border-bottom: 2px solid var(--ink);
}

td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}

/* Total / summary row */
tr.total td {
  font-weight: bold;
  border-top: 2px solid var(--ink);
}

/* Indented sub-row ("of which …") */
tr.sub td:first-child { padding-left: 26px; color: var(--muted); }

/* Two-column label/value snapshot table */
table.snap td:first-child {
  font-weight: bold;
  width: 26%;
}

/* Verdict cells for "claims tested" tables */
td.v-yes     { color: var(--good); font-weight: bold; }
td.v-partial { color: var(--gold); font-weight: bold; }
td.v-no      { color: var(--terracotta); font-weight: bold; }

/* --------------------------------------------------------------------------
   8. Ranked drivers ("levers")
   -------------------------------------------------------------------------- */
.lever {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: var(--accent-bar) solid var(--terracotta);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 12px 0;
}
.lever .lt {
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 18px;
}
.lever .rank {
  color: var(--muted);
  margin-right: 4px;
}
.lever .tag {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-left: 8px;
}
.lever p { margin: .3em 0 0; }

/* Driver-type modifiers (replace inline border/color styles) */
.lever.structural        { border-left-color: var(--good); }
.lever.structural .tag   { color: var(--good); }
.lever.management        { border-left-color: var(--gold); }
.lever.management .tag   { color: var(--gold); }
.lever.temporary         { border-left-color: var(--terracotta); }
.lever.temporary .tag    { color: var(--terracotta); }
.lever.cyclical          { border-left-color: var(--blue); }
.lever.cyclical .tag     { color: var(--blue); }

/* --------------------------------------------------------------------------
   9. Quotes
   -------------------------------------------------------------------------- */
blockquote {
  background: var(--terracotta-soft);
  border-radius: var(--radius);
  margin: 24px 0;
  padding: 18px 24px;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.45;
}
blockquote cite {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   10. Durable vs borrowed (two-up comparison)
   -------------------------------------------------------------------------- */
.dvb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
.dvb ul {
  margin: 0;
  padding-left: 20px;
  font-size: 17px;
}
.dvb .durable h4  { color: var(--good); }
.dvb .borrowed h4 { color: var(--terracotta); }

/* --------------------------------------------------------------------------
   11. Inline SVG charts
   -------------------------------------------------------------------------- */
.chart { margin: 20px 0; }
.chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart .grid  { stroke: var(--line); stroke-width: 1; }
.chart .ax    { font-size: var(--fs-micro); fill: var(--muted); }
.chart .lbl   { font-size: var(--fs-micro); font-weight: bold; }
.chart .sname { font-size: var(--fs-caption); font-weight: bold; }

/* Series helpers (use on polyline/circle/text instead of inline colors) */
.chart .s1 { stroke: var(--terracotta); fill: var(--terracotta); }
.chart .s2 { stroke: var(--blue);       fill: var(--blue); }
.chart .s3 { stroke: var(--gold);       fill: var(--gold); }
.chart .s4 { stroke: var(--good);       fill: var(--good); }
.chart polyline { fill: none; stroke-width: 3; }
.chart .guide   { stroke-dasharray: 6 5; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body     { font-size: 17px; }
  .wrap    { padding: 28px 16px 60px; }
  h1       { font-size: 30px; }
  h2       { font-size: 24px; }
  .kpis    { grid-template-columns: 1fr 1fr; }
  .dvb     { grid-template-columns: 1fr; }
  .restate { font-size: 20px; }
  .engine  { padding: 20px; }
  blockquote { font-size: 19px; padding: 16px 18px; }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */
@media print {
  html, body { background: #fff; }
  body       { font-size: 11pt; }
  .wrap      { max-width: none; padding: 0; }
  h2         { break-after: avoid; }
  .kpi, .lever, .card, blockquote, figure, table { break-inside: avoid; }
  .engine {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tbl { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}