/* Data pages, second pass (2026-11-11, Bryce: "keep it simple stupid", which also reads as premium).
   /sales-tech-stack-cost/, /fractional-revops-cost/, /ai-search-recommendations/, /call-scoring-rubric/.
   One idea per screen: the answer, then one number on a colour band, then one simple chart whose
   title is its point, then the tool, then the folded data. Colour does one job: maple carries the
   finding, purple marks Outblox's own number, everything else is grey. No motion. */
:root {
  --maple: #cfa774;
  --maple-ink: #18120a;
  --dim: rgba(240, 237, 244, .14);
}

/* The answer, text only */
.dhero .lede { margin-top: 24px; max-width: 52ch; font-size: 1.15rem; line-height: 1.55; color: var(--text-primary); opacity: .92; }
.dhero .updated { display: block; margin-top: 18px; }

/* The finding: one number on a full-width maple band */
.band { margin-top: clamp(56px, 9vh, 96px); width: 100vw; margin-left: calc(50% - 50vw); background: var(--maple); color: var(--maple-ink); }
.band-in { max-width: var(--frame); margin: 0 auto; padding: clamp(44px, 7vw, 96px) var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.band .num { margin: 0; font: 900 clamp(4.6rem, 12vw, 10rem)/.82 "Big Shoulders", sans-serif; font-variation-settings: "opsz" 72; letter-spacing: -.01em; white-space: nowrap; }
.band .say { margin: 0; max-width: 38ch; font: 500 clamp(1.15rem, 1.7vw, 1.45rem)/1.4 "Instrument Sans", sans-serif; }
.band .src { display: block; margin-top: 14px; font: 500 .82rem/1.4 "JetBrains Mono", monospace; opacity: .7; }

/* Sections: a heading that states the point, then the evidence */
.step { margin-top: clamp(80px, 12vh, 128px); }
.step > .point { margin: 0 0 8px; max-width: 32ch; font: 700 clamp(1.45rem, 2.3vw, 2rem)/1.2 "Bricolage Grotesque", sans-serif; color: var(--text-primary); letter-spacing: -.01em; }
.step > .sub { margin: 0 0 32px; max-width: 60ch; color: var(--text-secondary); line-height: 1.55; }

/* Charts: few marks, labels on the marks, nothing else */
.viz { margin: 0; max-width: 820px; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz text { font-family: "Instrument Sans", sans-serif; font-size: 14px; fill: var(--text-secondary); }
.viz .lab { fill: var(--text-primary); font-weight: 600; }
.viz .val { font-family: "Big Shoulders", sans-serif; font-weight: 800; font-variation-settings: "opsz" 72; fill: var(--text-primary); }
.viz .soft { fill: var(--text-muted); font-size: 13px; }
.viz .mine { fill: var(--purple-bright); }

/* The full data, folded */
details.all { margin-top: clamp(72px, 11vh, 112px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.all + details.all { margin-top: 0; border-top: 0; }
details.all > summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; gap: 16px; align-items: baseline; font: 700 1.05rem/1.3 "Bricolage Grotesque", sans-serif; color: var(--text-primary); }
details.all > summary::-webkit-details-marker { display: none; }
details.all > summary span { margin-left: auto; font: 500 .8rem/1.4 "JetBrains Mono", monospace; color: var(--text-muted); white-space: nowrap; }
details.all > summary::after { content: "+"; margin-left: 18px; font: 400 1.4rem/1 "Instrument Sans", sans-serif; color: var(--text-muted); }
details.all[open] > summary::after { content: "\2212"; }
details.all > summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }
details.all .facts-wrap { margin-bottom: 18px; }
details.all .notes { margin-bottom: 22px; }

/* Rubric: the scorer */
.scorer { border-top: 1px solid var(--line); }
.ritem { margin: 0; padding: 24px 0; border: 0; border-bottom: 1px solid var(--line-dim); display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 8px 32px; }
.ritem legend { float: left; width: 100%; padding: 0; font: 700 1.02rem/1.35 "Bricolage Grotesque", sans-serif; color: var(--text-primary); }
.ritem legend .n { display: inline-block; width: 1.8rem; color: var(--text-muted); font: 500 .85rem/1 "JetBrains Mono", monospace; }
.ritem .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .7fr); gap: 8px; }
.ritem .ev { grid-column: 2; margin: 6px 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); max-width: 72ch; }
.ritem .ev a { color: var(--text-secondary); }
.opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: border-color var(--t-snap), background var(--t-snap); }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt .pt { font: 800 1.4rem/1 "Big Shoulders", sans-serif; font-variation-settings: "opsz" 72; color: var(--text-muted); }
.opt .txt { font-size: .84rem; line-height: 1.4; color: var(--text-secondary); }
.opt:hover { border-color: var(--text-muted); }
.opt:has(input:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.opt:has(input:checked) { border-color: var(--maple); background: rgba(207, 167, 116, .1); }
.opt:has(input:checked) .pt { color: var(--maple); }
.opt:has(input:checked) .txt { color: var(--text-primary); }
.opt.na .pt { font-size: 1rem; padding-top: 4px; }
.total { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; background: var(--bg); border-top: 1px solid var(--line); color: var(--text-secondary); }
.total b { font: 800 1.6rem/1 "Big Shoulders", sans-serif; font-variation-settings: "opsz" 72; color: var(--text-primary); margin-right: 8px; }
.total .copy { font: 600 .9rem/1 "Instrument Sans", sans-serif; color: var(--text-primary); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; cursor: pointer; }
.myths { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.myths li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line-dim); align-items: baseline; }
.myths s { font: 700 1.02rem/1.35 "Bricolage Grotesque", sans-serif; color: var(--text-muted); text-decoration-thickness: 2px; text-decoration-color: rgba(207, 167, 116, .8); }
.myths p { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: .95rem; }

@media (max-width: 860px) {
  .band-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ritem { grid-template-columns: minmax(0, 1fr); }
  .ritem .ev { grid-column: 1; }
  .ritem .opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .myths li { grid-template-columns: minmax(0, 1fr); }
}

/* AI study: one real question and the search it became */
.ex { max-width: 760px; border-left: 3px solid var(--maple); padding: 4px 0 4px 24px; }
.ex .exq { margin: 0; font: 500 clamp(1.15rem, 1.8vw, 1.45rem)/1.4 "Instrument Sans", sans-serif; color: var(--text-muted); }
.ex .exs { margin: 14px 0 0; font: 600 clamp(1.15rem, 1.8vw, 1.45rem)/1.4 "Instrument Sans", sans-serif; color: var(--text-primary); }
.ex .exs span { color: var(--maple); }