/* =========================================================
   LEVEL Docs — shared brand stylesheet
   https://docs.levelworkspace.com/brand/level.css

   Every document links this file. Tokens and rules come from
   the LEVEL Design System (colors_and_type.css + README).
   Changing this file changes every published document — put
   document-specific styles in that document's own <style>.
   See DESIGN.md for how to use the components.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

:root {
  /* Brand — yellow is the ONLY accent */
  --level-yellow:       #FFD643;
  --level-yellow-hover: #FFE998;   /* "Cream Brulee": hover lightens, never darkens */
  --level-yellow-muted: rgba(255, 214, 67, 0.35);
  --dark-green:         #152624;   /* dominant surface */
  --forest-green:       #1E3530;   /* elevated surface on dark */
  --forest-green-2:     #1A3C34;

  /* Neutrals */
  --white:          #FFFFFC;
  --off-white:      #F5F5F0;
  --bone:           #F9FAFC;
  --line-light:     #E5E7EB;
  --line-card:      #E4E4E4;
  --line-dark:      rgba(255, 255, 255, 0.4);
  --line-dark-soft: rgba(216, 216, 216, 0.2);
  --ink-900:        #111827;
  --ink-700:        #374151;
  --ink-500:        #6B7280;
  --ink-400:        #9CA3AF;
  --on-dark:        #FFFFFC;
  --on-dark-soft:   rgba(255, 255, 252, 0.85);
  --on-dark-muted:  rgba(255, 255, 252, 0.5);

  /* Functional */
  --error:   #E74C3C;
  --success: #2ECC71;

  /* Type — Inter for everything */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-h1: clamp(28px, 5vw, 51.2px);
  --fs-h2: clamp(22px, 3.5vw, 32px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  /* Layout */
  --wrap: 1024px;
  --prose: 700px;
  --gutter: 24px;
  --r-md: 8px;
  --r-pill: 9999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-pop:  0 8px 24px rgba(0,0,0,0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink-900);
  font: 400 var(--fs-md)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { border-bottom-color: var(--level-yellow); }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; margin: 0; color: inherit; }
h1 { font-size: var(--fs-h1); line-height: 1.1;  letter-spacing: -0.04em; }
h2 { font-size: var(--fs-h2); line-height: 1.2;  letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.2;  letter-spacing: -0.03em; }
h4 { font-size: var(--fs-h4); line-height: 1.2; }
p { margin: 0; }
strong { font-weight: 700; }

/* ── Layout ───────────────────────────────────────────── */
.wrap  { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.75em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }

/* Page rhythm comes from alternating solid colour blocks */
.section          { padding: 80px 0; }
.section--light   { background: var(--off-white); }
.section--dark    { background: var(--dark-green); color: var(--on-dark); }
.section--forest  { background: var(--forest-green); color: var(--on-dark); }
.section--yellow  { background: var(--level-yellow); color: var(--dark-green); }
.section--dark p, .section--forest p { color: var(--on-dark-soft); }
.section-head     { margin-bottom: 40px; max-width: var(--prose); }
.section-head p   { margin-top: 12px; }
@media (max-width: 640px) { .section { padding: 56px 0; } }

/* ── Header bar ───────────────────────────────────────── */
.doc-header { background: var(--dark-green); color: var(--on-dark); border-bottom: 1px solid var(--line-dark-soft); }
.doc-header .wrap { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.doc-header__logo { border: 0; }
.doc-header__logo img { width: 104px; }
.doc-header__label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.doc-header .btn { margin-left: auto; }
@media (max-width: 640px) { .doc-header__label { display: none; } }

/* ── Cover ────────────────────────────────────────────── */
.cover { background: var(--dark-green); color: var(--on-dark); padding: 112px 0 72px; }
.cover--photo { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), var(--cover-image) center / cover, var(--dark-green); }
.cover h1 { max-width: 16em; }
.cover .lead { margin-top: 24px; max-width: 38em; color: var(--on-dark-soft); }
.cover__meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 40px; font-size: var(--fs-sm); color: var(--on-dark-muted); }
.cover__meta strong { display: block; color: var(--on-dark); font-weight: 600; }
.cover .stats { margin-top: 64px; }
@media (max-width: 640px) { .cover { padding: 64px 0 48px; } }

/* ── Text patterns ────────────────────────────────────── */
.lead { font-size: var(--fs-lg); line-height: 1.55; }
.muted { color: var(--ink-500); }

/* Eyebrow: label above a heading. Grey caps on light; yellow rule + yellow caps on dark */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.cover .eyebrow, .section--dark .eyebrow, .section--forest .eyebrow { color: var(--level-yellow); font-weight: 700; letter-spacing: 0.14em; font-size: 13px; }
.cover .eyebrow::before, .section--dark .eyebrow::before, .section--forest .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--level-yellow); flex: none; }

/* Yellow highlight behind 2–4 words inside a heading — the signature LEVEL move */
.hl, .hl-yellow { background: var(--level-yellow); color: var(--dark-green); padding: 0 0.05em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.section--yellow .hl, .section--yellow .hl-yellow { background: var(--dark-green); color: var(--level-yellow); }

/* Pull quote — grey quote mark centred above, Inter 500 italic, no left rule */
blockquote, .quote { position: relative; margin: 25px 0; padding: 2rem 0 0.75rem; border: 0; font-weight: 500; font-size: 2rem; line-height: 1.2; letter-spacing: 0; text-align: left; color: inherit; }
blockquote::before, .quote::before { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 23px; transform: translateX(-50%); background: url("quote-mark.svg") 50% 0 / 24px 23px no-repeat; }
blockquote em, .quote em { font-style: italic; }
blockquote p, .quote p { font: inherit; }
@media (max-width: 991px) { blockquote, .quote { font-size: 30px; } }
@media (max-width: 767px) { blockquote, .quote { font-size: 25px; } }

/* ── Stats — numbers as proof ─────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--line-light); }
.stat { padding: 24px 20px 4px 0; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line-light); }
.stat__num { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.stat__label { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-500); }
.cover .stats, .section--dark .stats, .section--forest .stats,
.cover .stat + .stat, .section--dark .stat + .stat, .section--forest .stat + .stat { border-color: var(--line-dark-soft); }
.cover .stat__num .unit, .section--dark .stat__num .unit, .section--forest .stat__num .unit { color: var(--level-yellow); }
.cover .stat__label, .section--dark .stat__label, .section--forest .stat__label { color: var(--on-dark-muted); }
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat + .stat { padding: 16px 12px 4px 0; border-left: 0; }
}

/* ── Cards — hairline border, 8px radius, no shadow at rest ── */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line-card); border-radius: var(--r-md); padding: 24px; overflow: hidden; }
.card__img { margin: -24px -24px 20px; aspect-ratio: 4 / 3; object-fit: cover; width: calc(100% + 48px); max-width: none; }
.card h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.card p { color: var(--ink-700); }
.card__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 10px; }
.section--dark .card, .section--forest .card { background: var(--forest-green); border-color: var(--line-dark-soft); }
.section--forest .card { background: var(--dark-green); }
.section--dark .card p, .section--forest .card p { color: var(--on-dark-soft); }
.section--dark .card__label, .section--forest .card__label { color: var(--level-yellow); }

/* ── Callout — one key point or recommendation ────────── */
.callout { background: var(--off-white); border: 1px solid var(--line-card); border-radius: var(--r-md); padding: 20px 24px; }
.callout__title { font-weight: 700; margin-bottom: 6px; }
.callout__title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--level-yellow); vertical-align: 1px; }
.section--light .callout { background: var(--white); }
.section--dark .callout, .section--forest .callout { background: var(--forest-green); border-color: var(--line-dark-soft); }
.section--forest .callout { background: var(--dark-green); }

/* ── Lists ────────────────────────────────────────────── */
ul.squares { list-style: none; padding: 0; }
ul.squares li { position: relative; padding-left: 22px; }
ul.squares li + li { margin-top: 10px; }
ul.squares li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--level-yellow); }

/* ── Tables ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.table th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--dark-green); }
.table td.num, .table th.num { text-align: right; }
.table tr.total td { font-weight: 700; border-top: 1px solid var(--dark-green); border-bottom: 0; }
.table .best { background: var(--level-yellow-muted); }

/* ── Buttons — pill, Inter 600 14.4/21.6, 32px sides ──── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15.2px 32px; border: 0; border-radius: var(--r-pill); background: var(--level-yellow); color: var(--dark-green); font: 600 14.4px/21.6px var(--font); text-decoration: none; cursor: pointer; transition: background 200ms var(--ease-out), transform 200ms var(--ease-out); }
.btn:hover { background: var(--level-yellow-hover); border-bottom: 0; }
.btn:active { transform: scale(0.97); }
.btn--inverse { background: var(--dark-green); color: var(--white); }
.btn--inverse:hover { background: var(--forest-green); }
.btn--light { background: var(--white); color: var(--dark-green); }
.btn--light:hover { background: var(--off-white); }
.btn--sm { padding: 9px 22px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); background: var(--level-yellow-muted); color: var(--dark-green); font-size: var(--fs-xs); font-weight: 600; }
.cover .tag, .section--dark .tag, .section--forest .tag { background: var(--level-yellow); }

/* ── CTA band — yellow, text left, dark pill button right (one per document) ── */
.cta-band { background: var(--level-yellow); color: var(--dark-green); padding: 40px 0; }
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cta-band h2 { font-size: 32px; line-height: 38.4px; margin-bottom: 8px; }
.cta-band p { max-width: 480px; }
.cta-band .btn { flex: none; background: var(--dark-green); color: var(--white); }
.cta-band .btn:hover { background: var(--forest-green); }
@media (max-width: 640px) { .cta-band .wrap { flex-direction: column; align-items: flex-start; gap: 20px; } .cta-band h2 { font-size: 26px; line-height: 1.2; } }

/* ── Footer ───────────────────────────────────────────── */
.doc-footer { background: var(--dark-green); color: var(--on-dark-muted); font-size: var(--fs-sm); padding: 48px 0; }
.doc-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.doc-footer img { width: 92px; }
.doc-footer a { color: var(--on-dark); }

/* ── Print / Save as PDF ──────────────────────────────── */
@media print {
  @page { margin: 14mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; }
  .doc-header .btn, .no-print { display: none !important; }
  .section, .cover { padding: 28px 0; }
  .card, .callout, .stat, blockquote, tr, img { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}