/* /breakdowns/dr-squatch: hero timeline, diagram pair, phone timeline zones (2026-11-10) */
.sq-path { margin: 0; padding: 28px; border: 1px solid var(--border-light); border-radius: var(--radius--small); }
.sq-path figcaption { margin-bottom: 20px; opacity: .7; }
.sq-path ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sq-path li { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 0 0 20px 20px; border-left: 1px solid var(--border-light); }
.sq-path li:last-child { padding-bottom: 0; }
.sq-path li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background-color: currentColor; }
.sq-path span { font-family: var(--font--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; padding-top: 2px; }
.sq-path b { font-weight: 400; line-height: 1.4; }
@media (max-width: 479px) { .sq-path { padding: 20px; } .sq-path li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Two diagrams side by side on desktop; bigger SVG text so it stays readable at 375px */
.sq-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.sq-figs .bd-figure + .bd-figure { margin-top: 0; }
.sq-figs .bd-figure svg { max-height: 460px; }
.sq-figs svg .t { font-size: 16px; }
.sq-figs svg .t-s { font-size: 15px; }
.sq-figs svg .t-l { font-size: 30px; }
.sq-figs svg .node { fill: var(--light); stroke: var(--dark); stroke-width: 1.5; }
@media (max-width: 479px) { .sq-figs .bd-figure { padding: 18px; } }

/* Ad anatomy: six beats of a 3:10 ad stacked down the phone */
.sq-phone .zone { height: 12%; }
.bd-plays { grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); }
.sq-quotes { display: grid; gap: 24px; margin-top: 40px; }
.sq-metrics.bd-metrics, .sq-checklist.bd-checklist { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
@media (min-width: 992px) { .bd-plays > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* v4 screenshots: ad tabs (image + text), narrow phone buy box, gallery spacing */
.sq-adtab { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
.sq-adtext { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.sq-adtext h3 { margin: 0; font-family: var(--font--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.sq-adtext p { margin: 0; line-height: 1.55; }
@media (min-width: 768px) { .sq-hot.bd-hot-wrap { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
.sq-hot .bd-hot { max-width: 360px; }
.sq-shots { margin-top: 56px; }
@media (max-width: 767px) { .sq-adtab { grid-template-columns: minmax(0, 1fr); gap: 20px; } .sq-adtab .bd-shot { max-width: 360px; } .sq-hot .bd-hot { margin: 0 auto; } }