@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-condensed-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --red: #c8102e;
  --amber: #b86e00;
  --ink: #161616;
  --text: #2c2c2c;
  --muted: #5e5e5e;
  --paper: #f6f3ee;
  --line: #e4dfd6;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font: 400 17px/1.6 var(--body); -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--red); }
h1, h2, h3 { font-family: var(--head); color: var(--ink); line-height: 1.05; margin: 0; }
h2 { font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
h3 { font-size: 1.5rem; font-weight: 700; }
code { font-size: .88em; background: var(--paper); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; word-break: break-word; }
.page { max-width: 900px; margin: 0 auto; padding: 0 20px; }
main > section { padding: 44px 0; border-top: 1px solid var(--line); }
main > section:first-child { border-top: 0; }
.section-lede { color: var(--muted); margin: 0 0 22px; }

.cover { background: var(--ink); color: #eceae6; padding: 56px 0 50px; border-bottom: 6px solid var(--red); }
.kicker { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: #ffb000; margin: 0 0 10px; }
.cover h1 { color: #fff; font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 800; text-transform: uppercase; }
.meta { color: #b9b5ae; margin: 8px 0 26px; }
.intro { font-size: 1.2rem; max-width: 40em; margin: 0 0 28px; }
.intro strong { color: #fff; }
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; font: 800 1.2rem/1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.btn:hover { background: #9e0c24; }

.bottom-line p { font-size: 1.15rem; max-width: 42em; }
.numbers { display: grid; gap: 12px; margin-top: 26px; }
.numbers div { background: var(--paper); border-radius: 14px; padding: 18px 20px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.numbers b { display: block; font: 800 2.4rem/1 var(--head); color: var(--red); margin-bottom: 6px; }
.numbers b span { color: var(--muted); font-weight: 700; }
.numbers small { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: 4px; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #1f9d55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; }
.checks strong { color: var(--ink); }

.finding { border: 1px solid var(--line); border-left: 6px solid var(--muted); border-radius: 0 14px 14px 0; padding: 22px 22px 24px; margin-bottom: 18px; break-inside: avoid; }
.finding.high { border-left-color: var(--red); }
.finding.medium { border-left-color: #e0a100; }
.tag { display: inline-block; font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); }
.high .tag { background: #fbe3e7; color: var(--red); }
.medium .tag { background: #fff2cc; color: #7a5200; }
.finding h3 { margin-bottom: 14px; }
.finding-body { display: grid; gap: 20px; }
dl { margin: 0; }
dt { font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
dt:first-child { margin-top: 0; }
dd { margin: 2px 0 0; }
.plain { margin: 0; padding-left: 20px; display: grid; gap: 10px; }

.phones { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: start; }
.phones.single { grid-template-columns: minmax(0, 220px); }
.phone img { border: 6px solid #222; border-radius: 24px; box-shadow: 0 8px 22px rgba(0,0,0,.15); }
.phone figcaption { text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: 8px; }

.meta a { color: #fff; }
.host-card { border: 1px solid var(--line); border-radius: 14px; padding: 22px; break-inside: avoid; }
.host-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 24px; margin-bottom: 18px; }
.host-head h3 { font-size: 1.8rem; text-transform: uppercase; margin-bottom: 4px; }
.host-head p { margin: 0; color: var(--muted); }
.host-price { font: 800 2.6rem/1 var(--head); color: var(--red) !important; white-space: nowrap; }
.host-price small { display: block; font: 700 .75rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.host-price span { font-size: 1.1rem; color: var(--muted); }
.host-note { margin: 18px 0 0; color: var(--muted); font-size: .95rem; }
.about-me p { max-width: 42em; margin: 0 0 12px; }
.about-me a { font-weight: 700; }
.quick-wins ol, .next ol { margin: 0; padding-left: 24px; display: grid; gap: 10px; }
.quick-wins li::marker, .next li::marker { font-weight: 800; color: var(--red); }
.next .options { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.next .options li { background: var(--paper); border-radius: 10px; padding: 12px 14px; }

.feature-grid { display: grid; gap: 14px; margin: 8px 0 34px; }
.feature-grid div { background: var(--paper); border-radius: 14px; padding: 18px 20px; break-inside: avoid; }
.feature-grid h3 { font-size: 1.3rem; margin-bottom: 6px; text-transform: uppercase; }
.feature-grid p { margin: 0; }

.scores-note { font-weight: 700; color: var(--muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.scores-grid { display: grid; gap: 30px; }
.scores { width: 100%; border-collapse: collapse; font-size: 1rem; break-inside: avoid; }
.scores caption { text-align: left; font: 800 1.4rem/1 var(--head); color: var(--ink); text-transform: uppercase; padding-bottom: 8px; }
.scores th, .scores td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.scores thead th { font: 800 1.1rem/1 var(--head); text-transform: uppercase; color: var(--muted); }
.scores tbody th { font-weight: 600; color: var(--ink); }
.scores td { white-space: nowrap; }
.scores td:last-child { font-weight: 700; color: #1a7f45; }
.footnote { font-size: .88rem; color: var(--muted); margin-top: 12px; }

.foot { background: var(--paper); color: var(--muted); font-size: .88rem; padding: 26px 0 34px; }
.foot p { margin: 0; }

@media (min-width: 720px) {
  .numbers { grid-template-columns: repeat(3, 1fr); }
  .finding-body:has(.phones) { grid-template-columns: 1fr 300px; }
  .finding-body:has(.phones.single) { grid-template-columns: 1fr 180px; }
  .phones.single { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .scores-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media print {
  @page { margin: 14mm; }
  body { font-size: 11.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page { max-width: none; padding: 0; }
  .cover { padding: 28px 24px; }
  .btn { display: none; }
  main > section { padding: 22px 0; }
  .numbers { grid-template-columns: repeat(3, 1fr); }
  .finding-body:has(.phones) { grid-template-columns: 1fr 230px; }
  .finding-body:has(.phones.single) { grid-template-columns: 1fr 130px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .scores-grid { grid-template-columns: 1fr 1fr; }
  .phone img { box-shadow: none; border-width: 4px; border-radius: 16px; }
  h2 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- case study ---------- */
.cs .cover h1 { margin-bottom: 4px; }
.cs-sub { font: 700 clamp(1.4rem, 5vw, 2rem)/1.1 var(--head); color: #ffb000; text-transform: uppercase; margin: 0 0 18px; }
.cs-meta { display: grid; gap: 12px; margin: 0 0 28px; max-width: 46em; }
.cs-meta dt { color: #b9b5ae; margin: 0; }
.cs-meta dd { margin: 2px 0 0; color: #fff; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn-ghost { background: transparent; border: 2px solid #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.cs-wide { margin: 34px 0 0; }
.cs-wide img { width: 100%; border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.cs main > section p { max-width: 42em; margin: 0 0 14px; }
.cs-list { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; max-width: 42em; }
.cs-list li::marker { color: var(--red); }
.cs-block { display: grid; gap: 18px; padding: 22px 0; border-top: 1px dashed var(--line); }
.cs-block:first-of-type { border-top: 0; }
.cs-block h3 { margin-bottom: 10px; font-size: 1.6rem; text-transform: uppercase; }
.cs-block .phones { max-width: 420px; }
.cs-block .phones.single { grid-template-columns: minmax(0, 220px); }
.cs-video { margin: 0; justify-self: center; text-align: center; }
.cs-video video { width: 260px; max-width: 100%; height: auto; border: 6px solid #222; border-radius: 28px; background: #111; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.cs-video figcaption { font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: 8px; }
.cs-rig { margin: 10px auto 0; max-width: 560px; }
.cs-rig svg { width: 100%; height: auto; display: block; }
.cs-rig .steam circle { fill: #fff; opacity: 0; }
.cs-rig .beacon { animation: cs-beacon 1s steps(1) infinite; }
.cs-rig .beacon-b { animation-delay: -.5s; }
@keyframes cs-beacon { 0% { fill: #ffae00; } 50% { fill: #7a5200; } }
@media (prefers-reduced-motion: reduce) { .cs-rig .beacon { animation: none; } }
.foot a { color: inherit; }
.foot p + p { margin-top: 6px; }

@media (min-width: 720px) {
  .cs-meta { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
  .cs-block { grid-template-columns: 1fr 340px; align-items: start; gap: 32px; }
  .cs-block .phones.single { grid-template-columns: 200px; justify-content: center; }
  .cs-block.cs-text-only { grid-template-columns: 1fr; }
  .cs-truck .cs-block { grid-template-columns: 1fr 280px; }
}
@media print {
  .cs-actions, .cs-video { display: none; }
}