@layer pages {
  @keyframes bp-fill { from { transform: scaleX(0); } }
  [data-page="blog-post"] {
    --bp-measure: 34.5em;
    --bp-shadow: var(--shadow-picture);
    --bp-frame: inset 0 0 0 1px var(--bb-line);
    --bp-flow: clamp(20px, 16px + .5vw, 24px);
    --bp-block: clamp(28px, 18px + 1.4vw, 40px);
    .bp-hero {
      padding: clamp(20px, 2px + 4vw, 56px) 0 clamp(32px, 8px + 3.4vw, 72px);
      background-image:
        radial-gradient(40% 70% at 82% 56%, color-mix(in srgb, var(--purple-100) 92%, transparent) 0%, transparent 76%),
        radial-gradient(32% 42% at 0% 0%, color-mix(in srgb, var(--purple-50) 90%, transparent) 0%, transparent 80%);
    }
    .wrap.bp-hero__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
    .bp-crumbs { grid-column: 1 / -1; margin-bottom: clamp(24px, 4px + 2.8vw, 48px); }
    .bp-hero__copy { grid-column: 1 / span 7; padding-right: clamp(0px, 2vw, 32px); }
    .bp-date { font-size: var(--fs-16); font-weight: var(--fw-strong); color: var(--text); }
    .bp-h1 {
      margin-top: var(--s4); max-width: 18em; font-size: clamp(32px, 20px + 2.3vw, 52px); line-height: 1.12;
      font-weight: var(--fw-poster); color: var(--ink); text-wrap: balance;
    }
    .bp-by { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s6); font-size: var(--fs-16); }
    .bp-by__pic { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
    .bp-by a { font-weight: var(--fw-strong); color: var(--ink); text-decoration: none; }
    .bp-by a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .bp-hero__fig { grid-column: 8 / span 5; overflow: hidden; border-radius: var(--radius-3); background: var(--purple-500); box-shadow: var(--bp-shadow); }
    .bp-hero__fig img { width: 100%; height: auto; }
    .bp-body { padding: clamp(24px, 8px + 2vw, 40px) 0 var(--section-pad); }
    .wrap.bp-body__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
    .bp-text { grid-column: 1 / span 8; grid-row: 1; min-width: 0; }
    .bp-side { grid-column: 10 / span 3; grid-row: 1; }
    .bp-toc { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain; }
    .bp-toc__sum {
      display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3);
      font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--ink); list-style: none; cursor: pointer;
    }
    .bp-toc__sum::-webkit-details-marker { display: none; }
    .bp-toc { display: block; }
    .bp-toc__chev { display: none; width: 18px; height: 18px; flex: none; rotate: 180deg; transition: rotate .2s; }
    .bp-toc__box[open] .bp-toc__chev, .bp-toc__box.is-open .bp-toc__chev { rotate: 0deg; }
    .bp-toc__list { border-left: 1px solid var(--line); }
    .bp-toc__list a {
      display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent;
      font-size: var(--fs-14); line-height: 1.4; color: var(--text); text-decoration: none;
    }
    .bp-toc__list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .bp-toc__list a.is-current { border-left-color: var(--bb-purple); color: var(--ink); font-weight: var(--fw-strong); }
    .bp-text { font-size: var(--fs-18); line-height: 1.7; color: var(--text); }
    .bp-text > :is(p, h3, ul, ol, .bp-note) { max-width: var(--bp-measure); }
    .bp-text > * + * { margin-top: var(--bp-flow); }
    .bp-text > :is(div, figure, dl, ol, ul) + *, .bp-text > * + :is(div, figure, dl, ol, ul) { margin-top: var(--bp-block); }
    .bp-text :is(b, strong) { font-weight: var(--fw-strong); color: var(--ink); }
    .bp-text a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    .bp-text a:not(.btn):hover { text-decoration-thickness: 2px; }
    .bp-text > h2 {
      margin-top: clamp(56px, 32px + 3vw, 96px); padding-top: clamp(20px, 12px + 1vw, 28px); border-top: 1px solid var(--line);
      font-size: var(--fs-32); line-height: 1.2; font-weight: var(--fw-display); color: var(--ink); text-wrap: balance;
      scroll-margin-top: calc(var(--header-h) + 24px);
    }
    .bp-text > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
    .bp-text > h2 + * { margin-top: var(--s5); }
    .bp-text > h3 { margin-top: var(--bp-block); font-size: var(--fs-24); line-height: 1.3; font-weight: var(--fw-display); color: var(--ink); }
    .bp-kick { display: block; font-size: var(--fs-16); line-height: 1.35; font-weight: var(--fw-strong); color: var(--accent-text); }
    .bp-tag {
      display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-1); vertical-align: 2px;
      font-size: var(--fs-12); line-height: 1.5; font-weight: var(--fw-strong); background: var(--bb-purple-hover); color: var(--bb-white);
    }
    .bp-tag--warn { background: var(--bb-warning-bg); color: var(--bb-warning-text); }
    .bp-facts { padding: clamp(24px, 8px + 2.4vw, 44px); border-radius: var(--radius-3); background: var(--bb-white) var(--fill-tint); box-shadow: var(--bp-frame); }
    .bp-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) clamp(24px, 3vw, 44px); margin-top: var(--s5); }
    .bp-facts__grid > div { padding-top: var(--s4); border-top: 1px solid var(--neutral-300); }
    .bp-facts dt { font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--ink); }
    .bp-facts dd { margin-top: 6px; font-size: var(--fs-16); line-height: 1.6; }
    .bp-adunit { display: grid; justify-items: center; gap: var(--s5); padding: clamp(20px, 8px + 2.4vw, 40px); border-radius: var(--radius-3); background: var(--bb-lavender); }
    .bp-adunit figcaption { justify-self: stretch; font-size: var(--fs-16); line-height: 1.6; }
    .bp-adunit .bp-kick { margin-bottom: 4px; }
    .bp-adunit img { width: min(100%, 574px); height: auto; }
    .bp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
    .bp-tiles > div { padding-top: var(--s4); border-top: 1px solid var(--ink); }
    .bp-tiles dt { font-size: var(--fs-16); font-weight: var(--fw-strong); color: var(--ink); }
    .bp-tiles dd { margin-top: 6px; font-size: var(--fs-16); line-height: 1.55; }
    .bp-tiles--est > div { position: relative; overflow: hidden; padding: var(--s5); border-top: 0; border-radius: var(--radius-3); box-shadow: var(--bp-frame); }
    .bp-tiles--est > div::before {
      content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
      background: linear-gradient(90deg, var(--green-400) 0 8px, transparent 8px 14px) 0 0 / 14px 3px repeat-x;
    }
    .bp-tiles--est dt { font-size: var(--fs-14); color: var(--bb-green-text); }
    .bp-tl { max-width: var(--bp-measure); }
    .bp-tl > li { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; padding: 0 0 var(--s5) 36px; }
    .bp-tl > li::before {
      content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%;
      background: var(--bb-white); box-shadow: inset 0 0 0 2px var(--neutral-400);
    }
    .bp-tl > li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: calc(.3em + 20px); bottom: 2px; width: 2px; background: var(--neutral-200); }
    .bp-tl > li.is-now::before { background: var(--bb-purple); box-shadow: 0 0 0 5px var(--purple-200); }
    .bp-tl > li:last-child { padding-bottom: 0; }
    .bp-tl__d { font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
    .bp-tl > li.is-now .bp-tl__d { color: var(--accent-text); }
    .bp-tl__t { font-size: var(--fs-18); line-height: 1.55; }
    .bp-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-3); box-shadow: 0 0 0 1px var(--bb-line); background: var(--purple-50); }
    .bp-embed figcaption { margin-top: var(--s3); font-size: var(--fs-14); line-height: 1.5; color: var(--text); }
    .bp-fig img { width: 100%; height: auto; border-radius: var(--radius-3); box-shadow: 0 0 0 1px var(--bb-line); }
    .bp-dl { max-width: 760px; border-bottom: 1px solid var(--line); }
    .bp-dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--s5); padding-block: var(--s4); border-top: 1px solid var(--line); }
    .bp-dl dt { font-size: var(--fs-16); line-height: 1.55; font-weight: var(--fw-strong); color: var(--ink); }
    .bp-dl dd { font-size: var(--fs-16); line-height: 1.6; }
    .bp-note { padding: var(--s5) clamp(20px, 2vw, 28px); border-radius: var(--radius-3); background: var(--bb-lavender); box-shadow: inset 3px 0 0 var(--bb-purple); }
    .bp-note__k { font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--accent-text); }
    .bp-note p + p { margin-top: 6px; font-size: var(--fs-16); line-height: 1.65; }
    .bp-note--good { background: var(--bb-green-bg); box-shadow: inset 3px 0 0 var(--bb-green-text); }
    .bp-note--good .bp-note__k { color: var(--bb-green-text); }
    .bp-note--warn { background: var(--bb-warning-bg); box-shadow: inset 3px 0 0 var(--bb-warning-text); }
    .bp-note--warn .bp-note__k { color: var(--bb-warning-text); }
    .bp-cta {
      position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s6);
      padding: clamp(24px, 8px + 2.4vw, 40px); border-radius: var(--radius-3); color: var(--text);
    }
    .bp-cta__k { font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--bb-green); }
    .bp-cta__h { margin-top: 6px; max-width: 22ch; font-size: var(--fs-24); line-height: 1.25; font-weight: var(--fw-display); color: var(--ink); text-wrap: balance; }
    .bp-cta__go { flex: none; }
    .bp-cta--end { padding-bottom: calc(clamp(24px, 8px + 2.4vw, 40px) + 48px); }
    .bp-cta--end .bp-cta__h { font-size: var(--fs-32); }
    .bp-cta__road { position: absolute; left: clamp(24px, 8px + 2.4vw, 40px); bottom: clamp(18px, 2vw, 26px); width: min(440px, calc(100% - 48px)); height: auto; overflow: visible; }
    .bp-road__done { stroke: var(--bb-white); stroke-width: 2; stroke-opacity: .5; }
    .bp-road__next { stroke: var(--bb-green); stroke-width: 2; stroke-dasharray: 6 6; }
    .bp-road__dot { fill: var(--bb-white); fill-opacity: .7; }
    .bp-road__now { fill: var(--bb-white); }
    .bp-road__end { fill: var(--bb-green); }
    .bp-stats .bp-kick { font-size: var(--fs-18); }
    .bp-stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); margin-top: var(--s4); }
    .bp-stat { display: grid; align-content: start; gap: var(--s3); padding-block: var(--s5); border-top: 1px solid var(--line); }
    .bp-stat__n {
      font-size: clamp(32px, 24px + 1.2vw, 44px); line-height: 1; font-weight: var(--fw-medium); letter-spacing: -.01em;
      color: var(--accent); font-variant-numeric: lining-nums; white-space: nowrap;
    }
    .bp-stat__t { font-size: var(--fs-16); line-height: 1.55; }
    .bp-stat__s { margin-top: var(--s2); font-size: var(--fs-14); line-height: 1.4; color: var(--muted); }
    .bp-stat--lead { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3vw, 44px); }
    .bp-stat--lead .bp-stat__n { font-size: clamp(56px, 32px + 3.6vw, 88px); }
    .bp-stat--lead .bp-stat__t { font-size: var(--fs-18); }
    .bp-meters { margin-top: var(--s4); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-3); box-shadow: var(--bp-frame); }
    .bp-meters__h { display: block; font-size: var(--fs-16); font-weight: var(--fw-strong); color: var(--ink); }
    .bp-meters__sub { display: block; margin-top: 4px; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
    .bp-meters__list { display: grid; gap: var(--s3); margin-top: var(--s5); }
    .bp-meters__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; align-items: center; column-gap: var(--s4); font-size: var(--fs-14); }
    .bp-meter__l { color: var(--text); font-variant-numeric: tabular-nums; }
    .bp-meter__track { display: block; width: 100%; height: 10px; border-radius: var(--radius-1); background: var(--purple-100); box-shadow: inset 0 0 0 1px var(--purple-200); overflow: hidden; }
    .bp-meter__fill { fill: var(--bb-purple); transform-box: fill-box; transform-origin: left center; }
    .bp-meter__v { text-align: right; font-weight: var(--fw-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        .bp-meter__fill { animation: bp-fill linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
        .bp-meters__list li:nth-child(2) .bp-meter__fill { animation-range: entry 15% entry 75%; }
        .bp-meters__list li:nth-child(3) .bp-meter__fill { animation-range: entry 20% entry 80%; }
        .bp-meters__list li:nth-child(4) .bp-meter__fill { animation-range: entry 25% entry 85%; }
      }
    }
    .bp-prices { padding: clamp(20px, 8px + 2.4vw, 36px); border-radius: var(--radius-3); background: var(--bb-white) var(--fill-tint); box-shadow: var(--bp-frame); }
    .bp-prices__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s5); margin-top: var(--s5); }
    .bp-prices__list li { padding-top: var(--s4); border-top: 1px solid var(--neutral-300); }
    .bp-prices__k { font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--ink); }
    .bp-prices__v { margin-top: var(--s2); font-size: clamp(24px, 20px + .5vw, 28px); line-height: 1.15; font-weight: var(--fw-medium); color: var(--ink); }
    .bp-prices__t { margin-top: var(--s2); font-size: var(--fs-14); line-height: 1.55; }
    .bp-text > ul:not([class]) > li { position: relative; padding-left: 24px; }
    .bp-text > ul:not([class]) > li + li { margin-top: var(--s3); }
    .bp-text > ul:not([class]) > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-purple); }
    .bp-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
    .bp-need { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-3); box-shadow: var(--bp-frame); }
    .bp-need h3 { font-size: var(--fs-18); line-height: 1.35; font-weight: var(--fw-display); color: var(--ink); }
    .bp-ticks { margin-top: var(--s4); }
    .bp-ticks li { position: relative; padding-left: 28px; font-size: var(--fs-16); line-height: 1.55; }
    .bp-ticks li + li { margin-top: var(--s3); }
    .bp-ticks li::before {
      content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px;
      border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); rotate: -45deg;
    }
    .bp-table { overflow-x: auto; border-radius: var(--radius-3); box-shadow: var(--bp-frame); }
    .bp-table:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    .bp-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); line-height: 1.5; }
    .bp-table :is(th, td) { padding: 14px clamp(14px, 1.6vw, 20px); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
    .bp-table tbody tr:last-child > * { border-bottom: 0; }
    .bp-table thead th { font-size: var(--fs-14); font-weight: var(--fw-strong); color: var(--ink); background: var(--purple-100); }
    .bp-table tbody th { width: 42%; font-weight: var(--fw-strong); color: var(--ink); background: var(--purple-50); }
    .bp-plays { border-bottom: 1px solid var(--line); }
    .bp-plays li { padding-block: var(--s4); border-top: 1px solid var(--line); }
    .bp-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
    .bp-verdict { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-3); }
    .bp-verdict--go { --bp-v: var(--bb-green-text); background: var(--bb-green-bg); box-shadow: inset 0 0 0 1px var(--green-200); }
    .bp-verdict--wait { --bp-v: var(--bb-warning-text); background: var(--bb-warning-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-warning) 40%, transparent); }
    .bp-verdict__h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-18); line-height: 1.3; font-weight: var(--fw-display); color: var(--bp-v); }
    .bp-verdict__h svg { width: 22px; height: 22px; flex: none; }
    .bp-verdict ul { margin-top: var(--s4); }
    .bp-verdict li { position: relative; padding-left: 20px; font-size: var(--fs-16); line-height: 1.55; }
    .bp-verdict li + li { margin-top: var(--s3); }
    .bp-verdict li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bp-v); }
    .bp-risks { overflow: hidden; border-radius: var(--radius-3); box-shadow: var(--bp-frame); }
    .bp-risks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s4); padding: var(--s4) clamp(16px, 2vw, 24px); font-size: var(--fs-16); line-height: 1.6; }
    .bp-risks li + li { border-top: 1px solid var(--line); }
    .bp-risks li:nth-child(odd) { background: var(--neutral-50); }
    .bp-risks__i {
      display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
      background: var(--bb-warning-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-warning) 50%, transparent);
      font-size: var(--fs-14); font-weight: var(--fw-display); line-height: 1; color: var(--bb-warning-text);
    }
    .bp-steps { counter-reset: bp-step; border-bottom: 1px solid var(--line); }
    .bp-steps > li {
      counter-increment: bp-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s4);
      padding-block: var(--s5); border-top: 1px solid var(--line);
    }
    .bp-steps > li::before {
      content: counter(bp-step); grid-row: 1 / span 2; font-size: var(--fs-24); line-height: 1.2; font-weight: var(--fw-medium);
      color: var(--accent); font-variant-numeric: lining-nums;
    }
    .bp-steps > li > p { grid-column: 2; font-size: var(--fs-16); line-height: 1.6; }
    .bp-steps__h { font-size: var(--fs-18); font-weight: var(--fw-strong); color: var(--ink); }
    .bp-steps__h + p { margin-top: 4px; }
    .bp-faq { border-bottom: 1px solid var(--line); }
    .bp-qa { border-top: 1px solid var(--line); }
    .bp-qa summary {
      --c: var(--accent-text);
      display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
      min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none;
    }
    .bp-qa summary::-webkit-details-marker { display: none; }
    .bp-qa summary::after {
      content: ""; flex: none; width: 18px; height: 18px;
      background:
        linear-gradient(var(--c), var(--c)) 50% 50% / 100% 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 50% 50% / 2px 100% no-repeat;
    }
    .bp-qa[open] summary::after { background-size: 100% 2px, 2px 0; }
    .bp-qa__q { font-size: var(--fs-18); line-height: 1.4; font-weight: var(--fw-strong); color: var(--ink); }
    .bp-qa summary:hover .bp-qa__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
    .bp-qa__a { max-width: 64ch; padding: 0 44px var(--s5) 0; font-size: var(--fs-16); line-height: 1.65; }
    .bp-qa__a + .bp-qa__a, .bp-qa__a + .bp-qa__list { margin-top: calc(var(--s3) * -1); }
    .bp-qa__list { max-width: 64ch; padding: 0 44px var(--s5) 1.2em; list-style: disc; font-size: var(--fs-16); line-height: 1.65; }
    ol.bp-qa__list { list-style: decimal; }
    .bp-qa__list li + li { margin-top: var(--s2); }
    .bp-sources { padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-14); line-height: 1.6; color: var(--muted); }
    .bp-text > .bp-cta + .bp-sources { margin-top: var(--s5); }
    .bp-related { background: var(--neutral-100); }
    .bp-related h2 { margin-bottom: clamp(20px, 8px + 1.6vw, 36px); }
    .site-slide.bp-rel { position: relative; display: flex; flex-direction: column; width: min(368px, 82vw); }
    .bp-rel__pic { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
    .bp-rel__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(20px, 2vw, 24px); }
    .bp-rel__by { font-size: var(--fs-14); color: var(--muted); }
    .bp-rel__t { margin-top: var(--s2); font-size: var(--fs-18); line-height: 1.35; font-weight: var(--fw-display); color: var(--ink); text-wrap: balance; }
    .bp-rel__x { margin-top: var(--s2); font-size: var(--fs-14); line-height: 1.55; color: var(--text); }
    .bp-rel__go {
      display: inline-flex; align-items: center; min-height: 24px; margin-top: auto; padding-top: var(--s4);
      font-size: var(--fs-16); font-weight: var(--fw-strong); color: var(--accent-text);
      text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
    }
    .bp-rel__go::after { content: ""; position: absolute; inset: 0; z-index: 2; }
    .bp-rel__go:focus-visible { outline: none; }
    .bp-rel:has(.bp-rel__go:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
    .bp-rel:hover .bp-rel__go { text-decoration-thickness: 2px; }
    @media (width < 1120px) {
      .wrap.bp-body__in { grid-template-columns: minmax(0, 1fr); }
      .bp-side, .bp-text { grid-column: 1; grid-row: auto; }
      .bp-side { margin-bottom: clamp(32px, 4vw, 48px); }
      .bp-toc { position: static; max-height: none; overflow: visible; max-width: 760px; border-radius: var(--radius-3); background: var(--bb-white) var(--fill-tint); box-shadow: var(--bp-frame); }
      .bp-toc__sum { min-height: 56px; margin: 0; padding: 0 20px; font-size: var(--fs-16); }
      .bp-toc__chev { display: block; }
      &.js .bp-toc__box:not(.is-open) .bp-toc__list { display: none; }
      &.js .bp-toc__box:not(.is-open) .bp-toc__chev { rotate: 180deg; }
      &.js .bp-toc__box:not(.is-open) .bp-toc__sum { margin-bottom: 0; }
      .bp-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); margin: 0; padding: 4px 20px 16px; border: 0; }
      .bp-toc__list a { margin: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--line); }
      .bp-text { max-width: 800px; }
    }
    @media (width < 900px) {
      .bp-hero__copy, .bp-hero__fig { grid-column: 1 / -1; padding-right: 0; }
      .bp-hero__fig { margin-top: var(--s6); max-width: 560px; }
    }
    @media (width < 640px) {
      .bp-tiles, .bp-prices__list { grid-template-columns: minmax(0, 1fr); }
      .bp-tiles--est { gap: var(--s4); }
      .bp-needs, .bp-verdicts { grid-template-columns: minmax(0, 1fr); }
    }
    @media (width < 640px) {
      .bp-crumbs { margin-bottom: var(--s5); }
      .bp-by { margin-top: var(--s5); }
      .bp-by a { position: relative; }
      .bp-by a::after { content: ""; position: absolute; inset: -11px -6px; }
      .bp-toc__list { grid-template-columns: minmax(0, 1fr); }
      .bp-text { font-size: 17px; line-height: 1.65; }
      .bp-facts__grid, .bp-stats__list { grid-template-columns: minmax(0, 1fr); }
      .bp-stat--lead { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
      .bp-tl > li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding-left: 30px; }
      .bp-tl > li::before { width: 14px; height: 14px; top: .2em; }
      .bp-tl > li:not(:last-child)::after { left: 6px; top: calc(.2em + 18px); }
      .bp-dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
      .bp-meters__list li { grid-template-columns: 48px minmax(0, 1fr) 44px; column-gap: var(--s3); }
      .bp-cta { flex-direction: column; align-items: stretch; }
      .bp-cta__go { width: 100%; }
      .bp-cta__h, .bp-cta--end .bp-cta__h { max-width: none; font-size: var(--fs-24); }
      .bp-qa__q { font-size: var(--fs-16); }
      .bp-qa__a { padding-right: 0; }
      .bp-table table { font-size: var(--fs-14); }
    }
    @media (prefers-reduced-motion: reduce) { .bp-toc__chev { transition: none; } }
  }
}
@layer sections {
  bb-case-slider { display: block; }
  .site-slides {
    --site-edge: max(var(--gutter), (100% - var(--wrap-width)) / 2);
    display: flex; gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--site-edge); padding: 8px var(--site-edge) 28px;
    scrollbar-width: none; contain: paint;
  }
  .site-slides::-webkit-scrollbar { display: none; }
  .site-slides:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
  .site-slide {
    flex: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: min(760px, 78vw);
    overflow: hidden; scroll-snap-align: start; border-radius: var(--radius-3); background: var(--bb-white);
    box-shadow: inset 0 0 0 1px var(--bb-line), var(--shadow-picture);
  }
  .site-slide__media { position: relative; min-height: 280px; }
  .site-slide__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .site-slide__media .site-logo { position: absolute; left: var(--s4); bottom: var(--s4); box-shadow: var(--shadow-tile); }
  .site-slide__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .site-slide__media--fill .site-slide__photo {
    inset: 50% 0 auto; height: auto; translate: 0 -50%; aspect-ratio: 640 / 422;
    -webkit-mask-image: linear-gradient(180deg, transparent, var(--opaque) 18%, var(--opaque) 82%, transparent);
            mask-image: linear-gradient(180deg, transparent, var(--opaque) 18%, var(--opaque) 82%, transparent);
  }
  .site-slide__media .site-logo--wide { width: 156px; }
  .site-slide__body { display: grid; align-content: start; justify-items: start; padding: var(--card-pad); }
  .site-slide__who { font-size: var(--fs-24); line-height: 1.25; font-weight: var(--fw-strong); color: var(--ink); }
  .site-slide__nums {
    display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--s5) clamp(24px, 3vw, 40px);
    margin-top: var(--s4);
  }
  .site-slide__line { margin-top: var(--s5); max-width: 40ch; font-size: var(--fs-14); line-height: 1.5; color: var(--text); text-wrap: pretty; }
  .site-slider__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .site-slider__more { grid-column: 1; justify-self: start; }
  .site-slider__btn[data-step="-1"] { grid-column: 2; }
  .site-slider__btn[data-step="1"] { grid-column: 3; }
  .site-slider__btn[data-step="1"] svg { scale: -1 1; }
  .site-slider__btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--bb-line);
    border-radius: 50%; background: var(--bb-white); color: var(--ink); cursor: pointer; transition: border-color .2s;
  }
  .site-slider__btn:hover:not(:disabled) { border-color: var(--ink); }
  .site-slider__btn:disabled { opacity: .35; cursor: default; }
  .site-slider__btn svg { width: 20px; height: 20px; }
  @media (width < 640px) {
    .site-slider__nav:has(.site-slider__more) { grid-template-columns: minmax(0, 1fr) auto auto; }
    .site-slide { grid-template-columns: minmax(0, 1fr); width: 86vw; }
    .site-slide__media { min-height: 0; aspect-ratio: 16 / 9; }
    .site-slide__who { font-size: var(--fs-20); }
    .site-slide__fill { display: none; }
    .site-slide__media--fill .site-slide__photo { inset: 0; height: 100%; aspect-ratio: auto; translate: none; -webkit-mask-image: none; mask-image: none; }
  }
}