/* Industry pages. 1 = Mason partner deck CSS, verbatim (growth/partners/deck/deck.css, daylight image path filled in).
   2 = case-study hero rules, verbatim (case-studies/*/case-layout.css). 3 = page glue. Fonts: the site's own /assets files. */
@font-face{font-family:MasonEditorial;src:url('/assets/octolane-editorial.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:MasonMarist;src:url('/assets/lassie-marist.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:MasonDM;src:url('/assets/lassie-sans.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ===== 1. deck.css (verbatim) ===== */
/* Mason partner deck. Tokens, type roles and materials from github.com/saras-cell/mason-brand v1.2 (tokens/tokens.css,
   styles/brand.css, BRAND.md). On screen: a responsive page, one section per slide, no JavaScript. In print: fixed
   1600 x 900 pages. Static by design: no animation, transition or shadow (Preview draws flattened shadows as grey slabs,
   so the brand's soft panel shadow is replaced by its 1px quiet border alone). */
:root {
  --mason-paper: #f9f8f5; --mason-white: #fffdf7; --mason-ink: #292d29; --mason-heading: #28241d; --mason-body: #70685c;
  --mason-muted: #827a6d; --mason-line: #ddd9cb; --mason-sky: #c4e0f5; --mason-skyDeep: #63b0eb; --mason-pearl: #f6faf9;
  --mason-gold: #ffdf8f; --mason-sunlight: #fffbe6;
  --tint: #e3edf3; --blue-gray: #b4c7d3; --evidence-line: #d9e3e8;   /* the approved methodology's evidence highlights */
  --editorial: MasonEditorial, Georgia, serif; --marist: MasonMarist, Georgia, serif; --dm: MasonDM, Arial, sans-serif;
  --cw: min(1240px, calc(100% - 96px));
  --fs-h1: clamp(46px, 5.5vw, 76px); --fs-h2: clamp(36px, 4vw, 60px); --fs-h3: 26px; --fs-lead: 19px; --fs-body: 17px;
  --pad-top: 64px; --pad-bottom: 80px; --gap: 48px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mason-paper); color: var(--mason-ink); font: 400 18px/1.6 var(--dm); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--mason-ink); outline-offset: 5px; }
.num { font-variant-numeric: tabular-nums; }

/* ── a slide is a section ── */
.slide { position: relative; min-height: 100svh; display: flex; flex-direction: column; border-top: 1px solid var(--mason-line); background: var(--mason-paper); }
.slide:first-child { border-top: 0; }
.chrome { width: var(--cw); margin: 0 auto; padding-top: 32px; display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--mason-muted); }
.chrome .wm { display: block; width: 100px; line-height: 0; }
.wm-svg { width: 100%; height: auto; display: block; }
.chrome .ctx { margin-left: auto; }
.chrome .pg { display: flex; gap: 4px; }
.frame { flex: 1; width: var(--cw); margin: 0 auto; padding: var(--pad-top) 0 var(--pad-bottom); display: flex; flex-direction: column; justify-content: center; gap: var(--gap); }

/* ── type: three jobs (BRAND.md §3) ── */
h1 { font: 400 var(--fs-h1)/1.06 var(--editorial); letter-spacing: -.018em; color: var(--mason-heading); max-width: 13em; text-wrap: balance; }
h2 { font: 400 var(--fs-h2)/1.08 var(--marist); letter-spacing: -.03em; color: var(--mason-heading); max-width: 18em; text-wrap: balance; }
h3 { font: 400 var(--fs-h3)/1.2 var(--marist); letter-spacing: -.02em; color: var(--mason-heading); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--mason-body); max-width: 38em; margin-top: 20px; text-wrap: pretty; }
.lead + .lead { margin-top: 16px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 400 11px/1.5 var(--dm); letter-spacing: .1em; text-transform: uppercase; color: var(--mason-muted); margin-bottom: 20px; }
.label { font: 400 11px/1.4 var(--dm); letter-spacing: .1em; text-transform: uppercase; color: var(--mason-body); }
.small { font-size: 14px; line-height: 1.55; color: var(--mason-muted); }
.foot { margin-top: -16px; }   /* sits under its content, so the slide's block stays centred */

/* ── materials (BRAND.md §4) ── */
.daylight { background: var(--mason-pearl) url("/assets/case-cover-folds.png") center / cover no-repeat; }
.thesis { background: radial-gradient(ellipse at 6% 0%, #c2dce677, transparent 55%), radial-gradient(ellipse at 100% 95%, #e9c5a577, transparent 55%),
  linear-gradient(135deg, #fffdf7, #f6faf9 62%, #f8eddf); }
.panel { background: var(--mason-white); border: 1px solid var(--mason-line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.panel p { font-size: var(--fs-body); line-height: 1.6; color: var(--mason-body); }
.panel.evidence { background: linear-gradient(135deg, #fffdf7, #f6faf9); border-color: var(--evidence-line); }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--tint); color: var(--mason-ink);
  font: 400 11px/1 var(--dm); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.todo { display: inline-flex; align-items: center; align-self: flex-start; height: 24px; padding: 0 10px; border-radius: 6px; font: 600 10.5px/1 var(--dm);
  letter-spacing: .1em; text-transform: uppercase; color: #8a4b00; background: #fff1cc; border: 1px dashed #c98a1d; vertical-align: middle; }
.stat { font: 400 60px/1 var(--marist); letter-spacing: -.03em; color: var(--mason-heading); }
.stat.ghost { color: var(--mason-line); }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 22px; border-radius: 14px; background: #29251f; color: #fffdf7; text-decoration: none; font-size: 15px; }
.plain { font-size: 15px; color: var(--mason-body); }

/* ── hero (cover, close) ── */
.hero-copy { max-width: 900px; }
.hero-copy .lead { max-width: 32em; margin-top: 28px; color: var(--mason-ink); }
.cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 36px; }

/* ── layouts ── */
.g2, .g3, .g4 { display: grid; gap: 24px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3.tall .panel { min-height: 380px; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 24px; }

/* numbered rows on fine rules */
.rows { display: grid; gap: 40px; }
.rows.c3 { grid-template-columns: repeat(3, 1fr); }
.rows.c4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.row { border-top: 1px solid var(--mason-line); padding-top: 24px; }
.rn { font-size: 13px; color: var(--mason-muted); margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.row h3 { margin-bottom: 12px; }
.row p { font-size: var(--fs-body); line-height: 1.6; color: var(--mason-body); }
.rows.c4 h3 { font-size: 23px; }

/* one-column numbered list, used beside a figure */
.rows.c1 { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
.rows.c1 .row { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px 0 20px; }
.rows.c1 .rn { grid-row: 1 / 3; margin: 6px 0 0; }
.rows.c1 h3 { font-size: 22px; margin-bottom: 6px; }
.rows.c1 p { font-size: calc(var(--fs-body) - 1px); }

/* before / after */
.ba { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.ba-col { display: flex; flex-direction: column; gap: 14px; }
.ba-col .label { margin-bottom: 4px; }
.ba-col p { font-size: var(--fs-body); line-height: 1.6; color: var(--mason-body); }
.ba-col.before { padding-top: 33px; }
.ba-col.after p { color: var(--mason-ink); }
/* After Mason reads as the good outcome: the brand's own daylight (soft gold light, pale blue), never green */
.ba-col.after { background: radial-gradient(ellipse at 100% 0%, #ffdf8f45, transparent 55%), radial-gradient(ellipse at 0% 100%, #c4e0f599, transparent 60%),
  linear-gradient(135deg, #fffdf7, #f6faf9); border-color: var(--mason-sky); }
.ba-col.after .label { color: var(--mason-ink); }
p.ok { position: relative; padding-left: 32px; }
p.ok::before { content: ""; position: absolute; left: 0; top: calc(.8em - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--mason-sky); }
p.ok::after { content: ""; position: absolute; left: 7.5px; top: calc(.8em - 6px); width: 4.5px; height: 9px; border: solid var(--mason-ink);
  border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.g2.people { max-width: 880px; }

/* thesis split: your firm | Mason */
.duo { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 56px; }
.duo-rule { background: var(--mason-line); }
.duo-col { display: flex; flex-direction: column; gap: 16px; }
.duo-col h3 { font-size: 30px; }

.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 20px; font-size: var(--fs-body); line-height: 1.5; color: var(--mason-ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mason-muted); }
.ticks.lg { margin: 28px 0 20px; gap: 14px; }
.ticks.lg li { font-size: 18px; }

/* people */
.person .mono { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 400 15px var(--dm); letter-spacing: .04em;
  color: var(--mason-ink); background: var(--tint); margin-bottom: 6px; }
.person .face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mason-line); margin-bottom: 8px; display: block; }
.person .label { margin-top: -6px; }

/* small graphics inside the three parts: sky is data, ink is the one that matters */
.panel .mini { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.mb { height: 8px; border-radius: 99px; background: #eeebe2; overflow: hidden; }
.mb span { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 99px; background: var(--mason-sky); }
.mb.hot span { background: var(--mason-ink); }
.mr { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--mason-pearl); border: 1px solid var(--evidence-line); }
.mr i, .frow i { width: 6px; height: 6px; border-radius: 50%; background: var(--mason-ink); flex: none; }
.mr span { flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--mason-sky) calc(var(--w) * 100%), transparent 0); }
.mr em { font: 400 10px/1 var(--dm); letter-spacing: .08em; text-transform: uppercase; color: var(--mason-body); }
.mm { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; color: var(--mason-ink);
  background: var(--mason-white); border: 1px solid var(--evidence-line); }
.mm i { width: 7px; height: 7px; border-radius: 50%; background: var(--mason-ink); }
.mm.dim { color: var(--mason-muted); }
.mm.dim i { background: var(--blue-gray); }

/* timeline */
.tl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--mason-line); }
.tl-step i { position: relative; display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--mason-paper); border: 1px solid var(--blue-gray); margin-bottom: 26px; }
.tl-step.on i { background: var(--mason-ink); border-color: var(--mason-ink); }
.tl-step .label { margin-bottom: 12px; }
.tl-step p { font: 400 24px/1.3 var(--marist); letter-spacing: -.015em; color: var(--mason-heading); max-width: 13em; }

/* deals */
.keep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.keep .label { margin-right: 8px; }

/* year-before matrix */
.figure { padding: 32px 32px 20px; }
.matrix { width: 100%; height: auto; display: block; font-family: var(--dm); }
.mx-band { fill: var(--tint); }
.mx-row { font-size: 14px; fill: var(--mason-body); }
.mx-row.hot { fill: var(--mason-ink); font-weight: 500; }
.mx-col { font-size: 11px; fill: var(--mason-muted); text-anchor: middle; }
.mx-rule { stroke: #e6e2d6; }
.mx-dot { fill: #e2ddd0; }
.mx-dot.on { fill: var(--blue-gray); }
.mx-dot.hot { fill: var(--mason-ink); }
.cap { font: 400 11px/1.4 var(--dm); letter-spacing: .1em; text-transform: uppercase; color: var(--mason-muted); margin-top: 8px; }

/* buyers */
.quote .big { font: 400 28px/1.3 var(--marist); letter-spacing: -.02em; color: var(--mason-heading); }

/* case */
.case { display: grid; grid-template-columns: 430px 1fr; gap: 48px; align-items: stretch; }
.comp { justify-content: center; gap: 20px; }
.cloud { width: 210px; height: 210px; align-self: center; margin: 4px 0; }
.cd { fill: var(--mason-sky); }
.cd.hot { fill: var(--mason-ink); }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; }
.pair p { font-size: 15px; margin-top: 10px; }
.pair .stat { font-size: 52px; }
.arrow { font-size: 24px; color: var(--mason-muted); padding-top: 14px; }
.funnel { display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.fb { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; }
.fb .n { font: 400 38px/1 var(--marist); letter-spacing: -.025em; text-align: right; color: var(--mason-muted); }
.fb.last .n { color: var(--mason-heading); }
.fl { font-size: 15.5px; color: var(--mason-body); }
.track { height: 8px; border-radius: 99px; background: #eeebe2; margin-top: 10px; overflow: hidden; }
.fill { height: 100%; width: calc(var(--w) * 100%); border-radius: 99px; background: var(--mason-sky); }
.fb.last .fill { background: var(--mason-ink); }

/* daily search mock */
.mock { gap: 12px; }
.frow { display: flex; align-items: center; gap: 16px; height: 54px; padding: 0 16px; border-radius: 14px; background: var(--mason-white); border: 1px solid var(--evidence-line); }
.frow .bar { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--mason-sky) calc(var(--w) * 100%), transparent 0); }

/* compare */
.tablecard { padding: 8px 32px; }
table { width: 100%; border-collapse: collapse; font-size: 18px; }
th { text-align: left; font: 400 11px/1.4 var(--dm); letter-spacing: .1em; text-transform: uppercase; color: var(--mason-body); padding: 22px 12px 18px 0; }
th:nth-child(n+2), td:nth-child(n+2) { width: 240px; }
td { padding: 20px 12px 20px 0; border-top: 1px solid var(--mason-line); color: var(--mason-ink); }
.yes, .no { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.yes { color: var(--mason-ink); }
.yes::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mason-ink); }
.no { color: var(--mason-muted); }
.no::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--mason-muted); }


/* ── responsive (screen only, so print keeps its 16:9 layout) ── */
@media screen and (min-width: 1100px) and (max-height: 950px) {
  :root { --fs-h2: clamp(38px, 3.55vw, 54px); --pad-top: 40px; --pad-bottom: 56px; --gap: 36px; }
  .g3.tall .panel { min-height: 330px; }
}
@media screen and (max-width: 1099px) {
  :root { --cw: calc(100% - 64px); }
  .split, .ba, .case { grid-template-columns: 1fr; gap: 40px; }
  .g3, .rows.c3 { grid-template-columns: 1fr; }
  .g4, .rows.c4, .tl { grid-template-columns: repeat(2, 1fr); }
  .tl::before { display: none; }
  .g3.tall .panel { min-height: 0; }
  .ba-col.before { padding-top: 0; }
  .rn { margin-bottom: 16px; }
}
@media screen and (max-width: 760px) {
  :root { --cw: calc(100% - 40px); --fs-h1: clamp(40px, 10.5vw, 58px); --fs-h2: clamp(34px, 9.5vw, 46px); --fs-h3: 24px;
    --fs-lead: 17px; --fs-body: 17px; --pad-top: 40px; --pad-bottom: 56px; --gap: 32px; }
  body { font-size: 17px; }
  .slide { min-height: auto; }
  .daylight { min-height: 100svh; }
  .chrome .ctx { display: none; }
  .chrome .pg { margin-left: auto; }
  .chrome .wm { width: 92px; }
  .br { display: none; }
  .g2, .g4, .rows.c4, .tl, .duo { grid-template-columns: 1fr; }
  .duo-rule { height: 1px; }
  .panel { padding: 24px; border-radius: 20px; }
  .stat { font-size: 48px; }
  .pair .stat { font-size: 44px; }
  .fb { grid-template-columns: 76px 1fr; gap: 16px; }
  .fb .n { font-size: 30px; }
  .tablecard { padding: 4px 18px; }
  table { font-size: 15px; }
  th:nth-child(n+2), td:nth-child(n+2) { width: 64px; }
  th { font-size: 10px; letter-spacing: .06em; }
  .yes, .no { font-size: 14px; gap: 6px; }
  .quote .big { font-size: 24px; }
  .tl-step p { font-size: 21px; }
  .tl { gap: 0; }
  .tl-step { border-left: 1px solid var(--mason-line); padding: 0 0 28px 22px; }
  .tl-step.on { border-left-color: var(--mason-ink); }
  .tl-step i { display: none; }
}
@media screen and (max-height: 560px) and (orientation: landscape) {
  .slide { min-height: auto; }
}

/* ── print: every slide one 16:9 page ── */
@page { size: 1600px 900px; margin: 0; }
@media print {
  :root { --cw: auto; --fs-h1: 80px; --fs-h2: 58px; --fs-h3: 28px; --fs-lead: 22px; --fs-body: 19px; --gap: 44px; }
  .label, .eyebrow, .chip, .cap { font-size: 12.5px; }
  .chrome { font-size: 14px; }
  .chrome .wm { width: 112px; }
  html, body { background: none; }
  .slide { width: 1600px; height: 900px; min-height: 0; overflow: hidden; border: 0; break-after: page; page-break-after: always; }
  .chrome { width: auto; margin: 0; padding: 44px 88px 0; }
  .frame { width: auto; margin: 0; padding: 36px 88px 64px; }
}

/* ===== 2. case-study hero (verbatim) ===== */
.case-cover{position:relative;isolation:isolate;overflow:hidden;margin:16px 16px 0;border-radius:24px;min-height:640px;display:flex;flex-direction:column;background:#e6eff4 url('/assets/case-cover-folds.png') center/cover}
.case-cover-light{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.case-cover-copy{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;justify-content:center;padding:130px 30px 74px}
.case-cover-copy>.eyebrow{font-size:10px;color:#606968;letter-spacing:.12em}
.case-cover h1{font:400 clamp(52px,5.3vw,76px)/1.065 MasonEditorial,Arial,sans-serif;letter-spacing:-.025em;max-width:22ch;color:#292d29;margin:25px 0 0;text-wrap:balance}
.cover-link{display:inline-flex;gap:30px;align-items:center;text-decoration:none;font:400 13px/1.5 MasonDM;margin-top:32px;padding:11px 19px;color:#fffdf7;background:var(--heading);border-radius:999px}
.cover-link:hover{background:#45423b}
.case-cover-foot{display:flex;justify-content:space-between;align-items:baseline;gap:22px;padding:0 34px 26px;color:#65716f;font:400 9px/1.5 MasonDM;letter-spacing:.09em;text-transform:uppercase}
@media(min-width:1101px) and (max-height:800px){.case-cover{min-height:540px}.case-cover-copy{padding-top:111px;padding-bottom:48px}.case-cover h1{font-size:62px;margin-top:20px}.cover-link{margin-top:26px}}
@media(max-width:1100px){.case-cover{min-height:610px}.case-cover h1{font-size:64px}}
@media(max-width:760px){.case-cover{margin:10px 10px 0;border-radius:18px;min-height:570px}.case-cover-copy{padding:125px 21px 75px}.case-cover h1{font-size:50px}.case-cover-foot{padding:0 22px 22px}.case-cover-foot>span:last-child{display:none}}
@media(max-width:480px){.case-cover{min-height:525px}.case-cover-copy{padding:112px 18px 57px}.case-cover-copy>.eyebrow{font-size:8px}.case-cover h1{font-size:43px;line-height:1.08;letter-spacing:-.03em;max-width:16ch;margin-top:23px}.cover-link{font-size:12px;margin-top:29px;padding:11px 17px;gap:27px}.case-cover-foot{font-size:8px;padding-inline:20px}}
@media(max-height:500px) and (min-width:601px){.case-cover{min-height:460px}.case-cover-copy{padding-top:105px;padding-bottom:39px}.case-cover h1{font-size:49px}.case-cover-foot{padding-bottom:19px}.cover-link{margin-top:23px}}
.case-cover h1{max-width:22ch}

/* ===== 3. Page glue (industry pages only). Deck sections become web sections: no slide chrome, no full-height slides. ===== */
:root{--paper:#f9f8f5;--white:#fffdf7;--ink:#292d29;--heading:#28241d;--body:#70685c;--line:#ddd9cb;--pearl:#f6faf9;--blue:#e6eff4;--gold:#ffdf8f}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:200;background:var(--mason-white);padding:8px 12px;border-radius:8px}
.slide{min-height:auto}
main>section{scroll-margin-top:96px}
.frame{justify-content:flex-start}
.page-meta{width:var(--cw);margin:0 auto;padding:28px 0 24px;display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;font-size:13px;line-height:1.5;color:var(--mason-muted)}
.page-meta p{margin:0}
.page-meta a{color:var(--mason-body)}
.answer{font:400 clamp(26px,2.6vw,34px)/1.3 var(--marist);letter-spacing:-.02em;color:var(--mason-heading);max-width:28em;text-wrap:pretty}
.row .stat{margin-bottom:18px}
.after-note{max-width:44em}
.mx-count{font-size:13px;fill:var(--mason-body);text-anchor:end}
.mx-count.hot{fill:var(--mason-ink);font-weight:500}
.mx-key{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px}
.mx-key span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mason-body)}
.mx-key i{width:10px;height:10px;border-radius:50%;background:var(--mason-ink);display:inline-block}
.mx-key i.dim{background:#e2ddd0}
.ba-col h3{margin-top:6px}
.duo-col .funnel{margin:8px 0 4px}
details.data{margin-top:4px}
details.data summary{cursor:pointer;font-size:14px;color:var(--mason-body)}
details.data table{margin-top:8px}
.close-h{font:400 var(--fs-h1)/1.06 var(--editorial);letter-spacing:-.018em;color:var(--mason-heading);max-width:13em;text-wrap:balance}
.rows.c1.steps .row{grid-template-columns:44px 1fr}
.rows.c1.steps p{color:var(--mason-ink)}
@media screen and (max-width:760px){.page-meta{padding-top:20px}.answer{font-size:24px}.matrix-wrap{display:none}.mx-list{display:grid}.panel-top{flex-wrap:wrap}}

.mx-list{display:none;gap:4px;margin-top:4px}
.mx-item{padding:12px 10px;border-radius:10px}
.mx-item.hot{background:var(--tint)}
.mx-head{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.35;color:var(--mason-body)}
.mx-item.hot .mx-head{color:var(--mason-ink);font-weight:500}
.mx-head b{font-weight:500;white-space:nowrap}
.mx-strip{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:10px;max-width:300px}
.mx-strip i{aspect-ratio:1;border-radius:50%;background:#e2ddd0;transform:scale(.5)}
.mx-strip i.on{background:var(--blue-gray);transform:none}
.mx-item.hot .mx-strip i.on{background:var(--mason-ink)}
@media screen and (max-width:760px){.mx-list{display:grid}}
@media screen and (max-width:420px){.case-cover h1{font-size:40px;max-width:none;letter-spacing:-.02em}}

.pb-list{display:grid}
.pb-row{display:grid;grid-template-columns:minmax(0,1.25fr) 2fr auto;gap:18px;align-items:center;padding:11px 12px;border-top:1px solid var(--mason-line)}
.pb-row:first-child{border-top:0}
.pb-row.hot{background:var(--tint);border-color:transparent;border-radius:10px}
.pb-row.hot+.pb-row.hot{margin-top:4px}
.pb-label{font-size:15px;line-height:1.35;color:var(--mason-body)}
.pb-row.hot .pb-label{color:var(--mason-ink);font-weight:500}
.pb-bars{display:grid;gap:5px}
.mb.prior span{background:#e2ddd0}
.pb-n{font-weight:500;font-size:14px;text-align:right;color:var(--mason-body);white-space:nowrap}
.pb-row.hot .pb-n{color:var(--mason-ink)}
.pb .mx-key i{background:var(--mason-ink)}
@media screen and (max-width:760px){.pb-row{grid-template-columns:1fr auto;gap:8px 12px;padding:12px 10px}.pb-bars{grid-column:1/-1;grid-row:2}}
/* hub: the market cards */
.hub-rows .row-sub{font-size:15px;color:var(--mason-muted);margin:-10px 0 14px}
.hub-rows .go{margin-top:auto;padding-top:8px;font-size:15px}
.hub-rows .go a{text-decoration:underline;text-underline-offset:3px}
.hub-rows .row{display:flex;flex-direction:column}

/* Hero foot labels share the page column's left and right edges (2026-11-09, Shreyan: no misalignment).
   Padding % is of the cover's width; the cover is inset 16px (10px on phones) from the page. */
.case-cover-foot{padding-left:calc((100% - min(1240px, calc(100% - 64px)))/2);padding-right:calc((100% - min(1240px, calc(100% - 64px)))/2)}
@media screen and (max-width:1099px){.case-cover-foot{padding-left:16px;padding-right:16px}}
@media screen and (max-width:760px){.case-cover-foot{padding-left:10px;padding-right:10px}}
/* paired labels share one type style (main chat rule 2026-11-09): the chip beside a panel label takes the label's tracking */
.panel-top .chip{letter-spacing:.1em}
/* paired bars: the header, key and caption share the rows' inner edges (rows are padded for the shaded rows) */
.pb>.panel-top,.pb>.mx-key,.pb>p.small{padding-inline:12px}
@media screen and (max-width:760px){.pb>.panel-top,.pb>.mx-key,.pb>p.small{padding-inline:10px}}
@media screen and (max-width:760px){.panel-top .chip{max-width:100%;height:auto;min-height:24px;white-space:normal;padding:4px 10px;line-height:1.3}}
/* questions people ask: a stack of question headings, each answered directly beneath */
.qa{display:grid;gap:28px}
.qa-item{border-top:1px solid var(--mason-line);padding-top:20px}
.qa-item:first-child{border-top:0;padding-top:0}
.qa-item h3{margin-bottom:10px}
/* two-column sections top-align: the first paragraph in a column starts on the eyebrow's line (main chat 2026-11-09) */
.split>*>.lead:first-child{margin-top:0}
.k-compare .unproven{margin-top:44px}