/* Public resources (/blog, /cases/sereda, /research/*, /blog/{slug}) and the public scan waiting + report pages.
   Ported from the prototype screens site-resources (.rs-*), site-report (.rep-*) and the status card of site-scan (.scn-*).
   Prototype-only switchers (.rs-proto, .rep-proto) and design notes are not ported. */

/* section primitives of the prototype shell, scoped to these pages (not in the shared site.css yet) */
.pfr .sec { border-bottom: 1px solid var(--hair); padding: 72px 20px; position: relative; }
.pfr .sec-head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: 40px; }
.pfr .sec-head.left { justify-items: start; text-align: left; }
.pfr .h-hero { font: 400 clamp(36px, 6vw, 60px)/1.02 var(--f-display); letter-spacing: -0.04em; text-wrap: balance; }
.pfr .h-sec { font: 400 clamp(28px, 4vw, 38px)/1.1 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.pfr .h-hero .dim, .pfr .h-sec .dim { color: var(--ink-4); }
.pfr .cta-dark .h-sec .dim { color: #8a8a8a; }
.pfr .lead { font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; }
.pfr .row-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.pfr a:focus-visible, .pfr button:focus-visible, .pfr summary:focus-visible { outline: 2px solid var(--focus, var(--s1)); outline-offset: 3px; }

/* reading progress (articles) */
.rs-progress { position: fixed; top: 0; left: 0; z-index: 40; height: 2px; width: 0; background: var(--ink); pointer-events: none; }

  #rs-top, #rs-case, #rs-article, #rs-en, #rs-apply, #rs-list { scroll-margin-top: 124px; }

  /* ---------- head ---------- */
  .sec.rs-head { padding: 64px 20px 40px; }
  .rs-head .sec-head { margin-bottom: 0; gap: 14px; }
  .rs-head .lead { max-width: 60ch; text-wrap: balance; }

  /* ---------- shared bits ---------- */
  .rs-lang { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
  .rs-lang svg.lucide { color: var(--ink-4); }
  .rs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--ink-3); }
  .rs-meta .sep { color: var(--ink-4); }
  .rs-caveat { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
  .rs-caveat svg.lucide { margin-top: 2px; flex: none; color: var(--ink-4); }
  .rs-star { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); flex: none; }
  .rs-star svg { width: 14px; height: 14px; }

  /* result rows: case card and article share them */
  .rs-res-row { background: var(--panel); box-shadow: 0 0 0 1px var(--ring); border-radius: var(--r-md); padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
  .rs-res-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
  .rs-res-name { font-size: 13.5px; font-weight: 500; white-space: normal; }
  .rs-res-name small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
  .rs-res-n { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font: 500 28px/1 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
  .rs-res-n .muted { color: var(--ink-3); }
  .rs-res-n svg.lucide { width: 14px; height: 14px; color: var(--ink-4); align-self: center; }
  .rs-res-n small { font: 400 13px/1 var(--f-ui); letter-spacing: 0; color: var(--ink-3); }
  .rs-bars { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 0; align-items: center; font-size: 11.5px; color: var(--ink-3); }
  .rs-bars .track { height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; }
  .rs-bars .fill { display: block; height: 100%; border-radius: 3px; }

  /* ---------- case card (hub) ---------- */
  .sec.rs-casesec { padding: 40px 20px 64px; }
  .rs-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "copy res" "act res"; background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; }
  .rs-case-copy { grid-area: copy; padding: 32px 32px 12px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .rs-case-act { grid-area: act; padding: 0 32px 32px; }
  .rs-h2 { font: 400 clamp(26px, 2.6vw, 32px)/1.12 var(--f-display); letter-spacing: -0.03em; }
  .rs-case-lead { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
  .rs-case-res { grid-area: res; background: var(--panel-2); border-left: 1px solid var(--hair); padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; }
  .rs-res-h b, .rs-results-h b { display: block; font-size: 13.5px; font-weight: 500; }
  .rs-res-h small, .rs-results-h small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .rs-res-foot { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); border-top: 1px solid var(--hair); padding-top: 12px; }

  /* ---------- article states ---------- */
  .sec.rs-artsec { padding: 40px 20px 64px; }
  .rs-art { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
  .rs-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); justify-self: start; }
  .rs-back:hover { color: var(--ink); }
  .rs-art-h1 { font: 400 clamp(30px, 4.2vw, 44px)/1.06 var(--f-display); letter-spacing: -0.035em; }
  .rs-art-sub { font-size: 17px; line-height: 1.55; color: var(--ink-3); }
  .rs-byline { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 13px; font-weight: 500; min-width: 0; }
  .rs-byline small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); line-height: 1.45; }
  .rs-en-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .rs-results { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
  .rs-results-h { padding: 18px 20px 6px; }
  .rs-results .rs-res-row { background: transparent; box-shadow: none; border-radius: 0; padding: 14px 20px; }
  .rs-results .rs-res-row + .rs-res-row { border-top: 1px solid var(--hair); }
  .rs-facts { margin: 0; padding: 16px 20px; background: var(--panel-2); border-top: 1px solid var(--hair); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; line-height: 1.5; }
  .rs-facts dt { color: var(--ink-3); }
  .rs-facts dd { margin: 0; color: var(--ink); }

  .rs-prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
  .rs-prose > p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
  .rs-art-h2 { font: 500 22px/1.3 var(--f-display); letter-spacing: -0.02em; }
  .rs-prose > .rs-art-h2 { margin-top: 14px; }
  .rs-prose ol, .rs-prose ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
  .rs-prose ul { gap: 8px; }
  .rs-prose li::marker { color: var(--ink-4); }
  .rs-tbl { background: var(--panel); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--ring); overflow: hidden; }
  .rs-tbl .tbl th { background: var(--panel-2); }
  .rs-tbl .tbl td { font-size: 13.5px; color: var(--ink-2); }
  .rs-tbl .tbl th.r, .rs-tbl .tbl td.r { white-space: nowrap; min-width: 92px; }
  .rs-tbl .tbl th .cell-brand { justify-content: flex-end; gap: 6px; font-weight: 500; }
  .rs-tbl .tbl th .mono-av { width: 14px; height: 14px; border-radius: 4px; font-size: 8.5px; }
  .rs-tbl .tbl td.r b { font-weight: 500; color: var(--ink); }
  .rs-tbl .tbl td.r .muted { color: var(--ink-3); }
  .rs-tbl .tbl td.r svg.lucide { width: 12px; height: 12px; color: var(--ink-4); margin: 0 4px; vertical-align: -1px; }
  .rs-prose > .rs-tcap { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin-top: -4px; }
  .rs-prose > .rs-caveat { margin-top: 4px; }

  .rs-orig { background: var(--panel-2); box-shadow: 0 0 0 1px var(--ring); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 8px; }
  .rs-orig > small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
  .rs-orig b { display: block; font: 500 20px/1.3 var(--f-display); letter-spacing: -0.02em; color: var(--ink); }
  .rs-orig p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-top: 6px; }
  .rs-en-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
  .rs-en-body > p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
  .rs-en-body sup { font-size: 10px; line-height: 0; color: var(--ink-3); }

  /* ---------- «Що з цього взяти для свого сайту» ---------- */
  .rs-apply .sec-head { margin-bottom: 28px; }
  .rs-apply-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; }
  .rs-ap { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .rs-ap + .rs-ap { border-left: 1px solid var(--hair); }
  .rs-ap-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--wash); color: var(--ink); display: grid; place-items: center; margin-bottom: 4px; }
  .rs-ap-ico svg.lucide { width: 16px; height: 16px; }
  .rs-ap > b { font: 500 16px/1.3 var(--f-display); letter-spacing: -0.015em; color: var(--ink); }
  .rs-ap > p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
  .rs-ap-plan { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
  .rs-ap-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--axis); transition: text-decoration-color .15s; }
  .rs-ap-link:hover { text-decoration-color: var(--ink); }
  .rs-ap-link svg.lucide { width: 14px; height: 14px; transition: transform .2s var(--ease); }
  .rs-ap-link:hover svg.lucide { transform: translateX(2px); }
  /* inside the case article the bridge keeps the 720 reading column (no 720 → 1160 → 720 jump) */
  .rs-root[data-vstate="sereda"] .rs-apply > * { max-width: 720px; margin-inline: auto; }
  .rs-root[data-vstate="sereda"] .rs-apply-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-root[data-vstate="sereda"] .rs-ap + .rs-ap { border-left: 0; border-top: 1px solid var(--hair); }
  /* one column of three (case article, and every state ≤900): icon beside the text, plan line and link on one hairline row,
     so each item is a short row, not a 230 px tower */
  .rs-root[data-vstate="sereda"] .rs-ap { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 0; row-gap: 8px; align-content: start; }
  .rs-root[data-vstate="sereda"] .rs-ap > b, .rs-root[data-vstate="sereda"] .rs-ap > p { grid-column: 2 / -1; }
  .rs-root[data-vstate="sereda"] .rs-ap-ico { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .rs-root[data-vstate="sereda"] .rs-ap-plan { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .rs-root[data-vstate="sereda"] .rs-ap-link { grid-column: 3; grid-row: 3; margin-top: 4px; padding: 12px 0 0 16px; border-top: 1px solid var(--hair); align-self: stretch; align-items: flex-start; }

  /* ---------- lists (materials + «Читайте також») ---------- */
  .rs-listsec .sec-head { margin-bottom: 24px; }
  .rs-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--hair); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; }
  .rs-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 212px 14px; grid-template-areas: "tag main meta go"; column-gap: 20px; align-items: center; width: 100%; padding: 20px 24px; background: var(--panel); text-align: left; transition: background-color .2s var(--ease); }
  .rs-row:hover { background: var(--panel-2); }
  .rs-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
  .rs-row-top { display: contents; }
  .rs-row-top .tag { grid-area: tag; justify-self: start; }
  .rs-row-m { grid-area: meta; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
  .rs-row-main { grid-area: main; min-width: 0; }
  .rs-row-t { display: block; font: 500 17px/1.3 var(--f-display); letter-spacing: -0.015em; color: var(--ink); }
  .rs-row-d { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
  .rs-row svg.rs-row-go { grid-area: go; width: 14px; height: 14px; color: var(--ink-3); transition: transform .2s var(--ease); }
  .rs-row:hover svg.rs-row-go { transform: translateX(3px); color: var(--ink); }

  .sec.rs-alsosec { padding: 48px 20px; }
  .rs-also-in { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-also .rs-row { grid-template-columns: 120px minmax(0, 1fr) 124px 14px; padding: 16px 20px; }
  .rs-also .rs-row-t { font-size: 15.5px; }

  /* ---------- CTA ---------- */
  .rs-cta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: end; }
  .rs-cta p { font-size: 15px; line-height: 1.6; max-width: 52ch; margin-top: 12px; }
  .rs-cta .row-wrap { justify-content: flex-end; }

  @media (max-width: 900px) {
    .rs-case { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "copy" "res" "act"; }
    .rs-case-copy { padding-bottom: 32px; }
    .rs-case-res { border-left: 0; border-top: 1px solid var(--hair); }
    .rs-case-act { padding: 20px 32px 28px; }
    .rs-apply-grid { grid-template-columns: minmax(0, 1fr); }
    .rs-ap + .rs-ap { border-left: 0; border-top: 1px solid var(--hair); }
    .rs-root[data-vstate] .rs-ap { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 0; row-gap: 8px; align-content: start; }
    .rs-root[data-vstate] .rs-ap > b, .rs-root[data-vstate] .rs-ap > p { grid-column: 2 / -1; }
    .rs-root[data-vstate] .rs-ap-ico { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .rs-root[data-vstate] .rs-ap-plan { grid-column: 2; grid-row: 3; margin-top: 4px; }
    .rs-root[data-vstate] .rs-ap-link { grid-column: 3; grid-row: 3; margin-top: 4px; padding: 12px 0 0 16px; border-top: 1px solid var(--hair); align-self: stretch; align-items: flex-start; }
    .rs-row, .rs-also .rs-row { grid-template-columns: minmax(0, 1fr) 14px; grid-template-areas: "top go" "main go"; row-gap: 8px; }
    .rs-row-top { grid-area: top; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
    .rs-row-top .tag, .rs-row-m { grid-area: auto; }
    .rs-cta { grid-template-columns: minmax(0, 1fr); }
    .rs-cta .row-wrap { justify-content: flex-start; }
  }
  @media (max-width: 720px) {
    .rs-back { padding: 8px 0; margin: -8px 0; }
  }
  @media (max-width: 640px) {
    .rs-root > .sec { padding: 48px 16px; }
    .sec.rs-head { padding-top: 32px; padding-bottom: 32px; }
    .sec.rs-casesec { padding-top: 24px; padding-bottom: 48px; }
    .sec.rs-artsec { padding-top: 24px; padding-bottom: 48px; }
    .rs-case-copy, .rs-case-res, .rs-case-act { padding: 20px; }
    .rs-h2 { font-size: 24px; }
    .rs-res-n { font-size: 24px; }
    .rs-res-name small { display: block; margin: 2px 0 0; }
    .rs-res-row { padding: 12px 14px; }
    .rs-results .rs-res-row { padding: 14px 16px; }
    .rs-case-act .btn { width: 100%; height: 40px; }
    .rs-art-sub { font-size: 16px; }
    .rs-prose > p, .rs-prose ol, .rs-prose ul, .rs-en-body > p { font-size: 15.5px; }
    .rs-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 16px; }
    .rs-facts dd { margin-bottom: 10px; }
    .rs-facts dd:last-child { margin-bottom: 0; }
    .rs-results-h { padding: 16px 16px 4px; }
    .rs-tbl .tbl th, .rs-tbl .tbl td { padding-left: 10px; padding-right: 10px; }
    .rs-tbl .tbl td { font-size: 13px; }
    .rs-ap { padding: 20px; }
    /* phones: back to icon on top, plan line, then the link (no room for the link beside the plan line) */
    .rs-root[data-vstate] .rs-ap { display: flex; flex-direction: column; gap: 10px; }
    .rs-root[data-vstate] .rs-ap-ico { margin: 0 0 4px; }
    .rs-root[data-vstate] .rs-ap-plan { margin-top: auto; }
    .rs-root[data-vstate] .rs-ap-link { padding: 10px 0; margin: -10px 0; border-top: 0; align-self: flex-start; align-items: center; }
    .rs-row, .rs-also .rs-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; padding: 18px 20px; }
    .rs-also .rs-row { padding: 14px 16px; }
    .rs-row-top { display: grid; justify-items: start; gap: 6px; }
    .rs-row svg.rs-row-go { display: none; }
    .rs-row-m { white-space: normal; }
    .cta-dark.rs-cta-box { padding: 32px 22px; }
    .rs-cta .row-wrap .btn { width: 100%; }
  }

/* ---------- original English body (articles 1–5 and admin posts) ---------- */
.rs-en-body { font-size: 16px; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.rs-en-body > div, .rs-en-body .bp-article__container, .rs-en-body .bp-article__content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.rs-en-body p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.rs-en-body h2 { font: 500 22px/1.3 var(--f-display); letter-spacing: -0.02em; color: var(--ink); margin: 18px 0 0; }
.rs-en-body h3 { font: 500 18px/1.35 var(--f-display); letter-spacing: -0.015em; color: var(--ink); margin: 10px 0 0; }
.rs-en-body h4, .rs-en-body h5 { font: 500 16px/1.4 var(--f-ui); color: var(--ink); margin: 6px 0 0; }
.rs-en-body ul, .rs-en-body ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.rs-en-body li { line-height: 1.6; }
.rs-en-body li::marker { color: var(--ink-4); }
.rs-en-body strong, .rs-en-body b { font-weight: 600; color: var(--ink); }
.rs-en-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--axis, var(--ink-4)); }
.rs-en-body a:hover { text-decoration-color: var(--ink); }
.rs-en-body sup { font-size: 10px; line-height: 0; color: var(--ink-3); }
.rs-en-body sup a { text-decoration: none; color: var(--ink-3); padding: 0 1px; }
.rs-en-body code { font: 400 0.88em/1.5 var(--f-mono); background: var(--wash); border-radius: 4px; padding: 1px 4px; color: var(--ink); }
.rs-en-body pre { margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--panel-2); box-shadow: 0 0 0 1px var(--ring); overflow-x: auto; font: 400 12.5px/1.6 var(--f-mono); color: var(--ink); white-space: pre; }
.rs-en-body pre code { background: none; padding: 0; font-size: inherit; }
.rs-en-body img { max-width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--ring); }
.rs-en-body blockquote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--ink-4); background: var(--panel-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.rs-en-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; background: var(--panel); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--ring); overflow: hidden; }
.rs-en-body th { text-align: left; font-weight: 500; color: var(--ink-3); background: var(--panel-2); padding: 9px 12px; border-bottom: 1px solid var(--hair); }
.rs-en-body td { padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.rs-en-body tr:last-child td { border-bottom: 0; }
.rs-en-body .rs-tscroll, .rs-en-body .bp-table-wrap, .rs-en-body .code-scroll { overflow-x: auto; max-width: 100%; }
.rs-en-body ol.list-decimal { font-size: 13px; line-height: 1.5; color: var(--ink-3); gap: 4px; }
.rs-en-body ol.list-decimal a { color: var(--ink-3); }
.rs-en-body .mt-40 { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 14.5px; }
.rs-en-body > * + * { margin-top: 0; }
.rs-full-h { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--hair); }
.rs-post-draft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .rs-en-body, .rs-en-body p { font-size: 15.5px; }
  .rs-en-body table { display: block; overflow-x: auto; }
  .rs-en-body th, .rs-en-body td { min-width: 140px; overflow-wrap: normal; word-break: normal; }
  .rs-en-body td code { white-space: nowrap; }
}

/* =================== report (site-report) =================== */
  .rep [hidden] { display: none !important; }
  .rep-wrap { max-width: 1000px; margin: 0 auto; display: grid; gap: 24px; min-width: 0; }
  /* 3.1–3.2 head */
  .rep-s1 { padding: 48px 20px 56px; }
  .rep-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; }
  .rep-top-l { display: grid; gap: 12px; justify-items: start; min-width: 0; }
  .rep-ey { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .rep-domain { overflow-wrap: anywhere; }
  .rep-meta { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
  .rep-meta svg.lucide { margin-top: 2px; }
  .rep-top-r { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 2px; }
  .rep-top-r .btn { background: color-mix(in srgb, var(--panel) 70%, transparent); }
  .rep-top-r .btn:hover { background: var(--wash); }
  .rep-old { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
  .rep-old > svg.lucide { align-self: start; margin-top: 2px; }
  .rep-old p { min-width: 0; line-height: 1.45; }
  @media (max-width: 760px) {
    .rep-top { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .rep-top-r { justify-content: flex-start; padding-bottom: 0; }
  }
  @media (max-width: 560px) {
    .rep-top-r { gap: 4px; flex-wrap: nowrap; }
    .rep-top-r .btn { padding: 0 10px; min-width: 0; }
    .rep-old { grid-template-columns: 14px minmax(0, 1fr); }
    .rep-old .btn { grid-column: 2; justify-self: start; }
  }

  /* answer card — WP19a: copy of Improve's hero (.im-cardh, .im-num, .im-ans) and items (details.im-it) */
  .rep-ac { overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--s1) 4%, var(--panel)) 0%, var(--panel) 220px); }
  .rep-ac-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
  .rep-ac-h h2, .rep-ac-h b { font: 500 15px/20px var(--f-display); letter-spacing: -0.012em; color: var(--ink); }
  .rep-ans { display: grid; grid-template-columns: minmax(200px, .36fr) minmax(0, 1fr); gap: 12px 24px; padding: 14px 20px 18px; align-items: start; }
  .rep-ans-l { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
  .rep-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .rep-num { font: 500 64px/0.95 var(--f-display); letter-spacing: -0.05em; color: var(--ink); margin-left: -3px; font-variant-numeric: tabular-nums; }
  .rep-num-l { font: 400 18px/1.2 var(--f-display); letter-spacing: -0.015em; color: var(--ink-3); }
  .rep-okchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--wash); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
  .rep-okchip svg.lucide { color: var(--good-ink); }
  button.rep-okchip:hover { background: var(--wash-2); color: var(--ink); }
  .rep-sent { font: 500 15.5px/1.45 var(--f-ui); letter-spacing: -0.012em; color: var(--ink); max-width: 60ch; text-wrap: pretty; padding-top: 6px; }
  .rep-items { border-top: 1px solid var(--hair); }
  .rep-it + .rep-it { border-top: 1px solid var(--hair); }
  .rep-it > summary, .rep-row { list-style: none; display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; gap: 12px; align-items: start; padding: 14px 20px; min-height: 56px; }
  .rep-it > summary { cursor: pointer; transition: background-color .12s ease; }
  .rep-it > summary::-webkit-details-marker { display: none; }
  .rep-it > summary:hover { background: var(--panel-2); }
  .rep-mk { width: 20px; height: 20px; display: grid; place-items: center; }
  .rep-mk i { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--warn); }
  .rep-tt { display: grid; gap: 3px; min-width: 0; }
  .rep-tt > b { font: 500 14px/20px var(--f-ui); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
  .rep-tt > .mono { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; }
  .rep-chev { color: var(--ink-4); margin-top: 3px; transition: transform .15s ease; }
  .rep-it[open] > summary .rep-chev { transform: rotate(180deg); }
  .rep-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--hair); background: var(--panel-2); font-size: 13.5px; color: var(--ink-2); margin-top: auto; }
  .rep-band p { min-width: 0; flex: 1 1 320px; text-wrap: pretty; }
  .rep-band .btn { height: 36px; flex: none; }
  @media (max-width: 760px) {
    .rep-ans { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rep-num { font-size: 48px; }
    .rep-sent { padding-top: 0; }
  }
  @media (max-width: 720px) {
    .rep-it > summary, .rep-row { grid-template-columns: 14px minmax(0, 1fr) 16px; padding: 14px 16px; }
    .rep-mk { width: 14px; }
    .rep-ac-h, .rep-ans { padding-left: 16px; padding-right: 16px; }
    .rep-band { flex-direction: column; align-items: stretch; padding: 14px 16px; }
    .rep-band p { flex: none; }
    .rep-band .btn { width: 100%; height: 40px; }
  }

  #rep-answer, .rep-it, .rep-ok li, #rep-ok { scroll-margin-top: 124px; }
  .rep-b { padding: 0 20px 18px 52px; display: grid; gap: 12px; justify-items: start; }
  .rep-how p, .rep-how li { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 76ch; text-wrap: pretty; }
  .rep-lab { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
  .rep-how { display: grid; gap: 6px; }
  .rep-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: reph; }
  .rep-how li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; counter-increment: reph; }
  .rep-how li::before { content: counter(reph); width: 20px; height: 20px; border-radius: 6px; background: var(--wash); color: var(--ink-3); font: 500 11.5px/20px var(--f-ui); text-align: center; margin-top: 1px; }
  .rep-found { display: grid; gap: 4px; width: 100%; max-width: 76ch; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--ring); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
  .rep-found p { overflow-wrap: anywhere; text-wrap: pretty; }
  .rep-found code, .rep-src .mono { font: 400 12px/1.5 var(--f-mono); }
  .rep-found code { color: var(--ink); }
  .rep-src { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
  @media (max-width: 720px) {
    .rep-b { padding: 0 16px 18px; }
    .rep-b > .btn { height: 36px; }
  }

  /* 3.4 «Що вже на місці» */
  .rep-ok-sec { padding: 40px 20px; }
  .rep-ok { overflow: hidden; }
  .rep-ok-h { display: grid; gap: 4px; padding: 16px 20px 12px; }
  .rep-ok-h h2 { display: flex; align-items: center; gap: 8px; font: 500 15px/20px var(--f-display); letter-spacing: -0.012em; }
  .rep-ok-h p { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
  .rep-ok ul { list-style: none; margin: 0; padding: 0; }
  .rep-ok li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 12px 20px; border-top: 1px solid var(--hair); }
  .rep-ok-n { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); min-width: 0; }
  .rep-ok-n svg.lucide { color: var(--good-ink); flex: none; transform: translateY(2px); }
  .rep-ok-v { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; min-width: 0; text-wrap: pretty; }
  .rep-ok-v .mono { font-size: 12px; color: var(--ink-3); }
  .rep-ok-f { padding: 12px 20px; border-top: 1px solid var(--hair); background: var(--panel-2); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
  .rep-ok-f .mono { font-size: 12px; }
  @media (max-width: 720px) {
    .rep-ok li { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
    .rep-ok-v { padding-left: 22px; }
    .rep-ok-h, .rep-ok-f { padding-left: 16px; padding-right: 16px; }
  }

  /* 3.5 «Що далі» — a sibling after .rep (see the markup comment), so legacy hides it here */
  .rep[data-vstate="legacy"] ~ #rep-next { display: none; }
  .rep-next .sec-head { margin: 0; }

  /* limits: one list on both pages (site-scan #scn-limits, site-report #rep-next) */
  .rep-lim { overflow: hidden; }
  .rep-lim ul { list-style: none; margin: 0; padding: 0; }
  .rep-lim li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 20px; }
  .rep-lim li + li { border-top: 1px solid var(--hair); }
  .rep-lim-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--wash); color: var(--ink-2); display: grid; place-items: center; }
  .rep-lim-t { display: grid; gap: 3px; min-width: 0; }
  .rep-lim-t b { font: 500 14.5px/1.35 var(--f-ui); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
  .rep-lim-t p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
  .rep-lim li > .tag { margin-top: 2px; }
  @media (max-width: 720px) {
    .rep-lim li { grid-template-columns: 36px minmax(0, 1fr); padding: 16px; }
    .rep-lim li > .tag { grid-column: 2; justify-self: start; margin-top: -6px; }
  }

  .rep-shot { margin: 8px 0 0; display: grid; gap: 10px; }
  .rep-shot .embed-shot { border-radius: 14px; }
  .rep-shot figcaption { text-align: center; font-size: 12.5px; color: var(--ink-3); }
  /* the clone is laid out at 1000 px and scaled to the column: at ≤760 px that is < 0.72 (cabinet text ≈ 9 px) — hide it,
     like on phones (hide-sm); 761–1000 px keeps ≥ 0.72, the spec's own ≈ 0.76 target */
  @media (max-width: 760px) { .rep-shot { display: none; } }
  .rep-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .rep-fine { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: -12px; text-wrap: balance; }
  .rep-nw { white-space: nowrap; }
  @media (max-width: 560px) {
    .rep-cta { flex-direction: column; }
    .rep-cta .btn { width: 100%; }
  }

  /* 3.6 legacy */
  .rep-legacy { max-width: 640px; padding: 24px; display: grid; gap: 12px; justify-items: start; }
  .rep-legacy-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--wash); color: var(--ink-2); display: grid; place-items: center; }
  .rep-legacy h2 { font: 500 19px/1.3 var(--f-display); letter-spacing: -0.015em; }
  .rep-legacy p { font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

  /* entrance (ds.css only animates .site-inner > .sec:first-child) */
  @media (prefers-reduced-motion: no-preference) {
    .rep-s1 .rep-wrap > * { animation: rise .55s var(--ease) backwards; }
    .rep-s1 .rep-wrap > :nth-child(2) { animation-delay: .06s; }
    .rep-s1 .rep-wrap > :nth-child(n+3) { animation-delay: .12s; }
  }

  /* phone */
  @media (max-width: 720px) {
    .rep > .sec, .site-inner > .rep-next { padding-left: 16px; padding-right: 16px; }
    .rep-s1 { padding-top: 32px; padding-bottom: 40px; }
    .rep-ok-sec { padding-top: 32px; padding-bottom: 32px; }
  }

/* =================== waiting page (site-scan status card) =================== */
  /* 2.7 status (= the /analyzing/{uuid} page) */
  .scn-status { padding: 64px 20px 96px; min-height: 620px; }
  .scn-card { max-width: 560px; margin: 0 auto; padding: 28px; border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow-pop); display: grid; gap: 16px; min-width: 0; }
  .scn-card > * { min-width: 0; }
  .scn-live { justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--info-wash); color: var(--info-ink); font-size: 12.5px; font-weight: 500; }
  .scn-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--s1); animation: scn-pulse 1.4s ease-in-out infinite; }
  .scn-live.calm { background: var(--wash); color: var(--ink-2); }
  .scn-live.calm::before { background: var(--ink-4); animation: none; }
  @keyframes scn-pulse { 50% { opacity: .3; } }
  .scn-dom { display: flex; align-items: center; gap: 10px; font: 500 22px/1.2 var(--f-display); letter-spacing: -0.02em; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
  .scn-fav { width: 30px; height: 30px; border-radius: 8px; background: var(--wash); display: grid; place-items: center; color: var(--ink-3); flex: none; }
  .scn-read { display: grid; gap: 8px; }
  .scn-lab { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
  .scn-read ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .scn-read li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
  .scn-read li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); transform: translateY(-1px); }
  .scn-ind { position: relative; height: 4px; border-radius: 2px; background: var(--wash-2); overflow: hidden; }
  .scn-ind::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 2px; background: var(--ink); animation: scn-slide 1.6s var(--ease) infinite; }
  @keyframes scn-slide { from { transform: translateX(-100%); } to { transform: translateX(334%); } }
  .scn-st { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
  .scn-card > .btn-sm { justify-self: start; }
  .scn-done-h { font: 400 30px/1.15 var(--f-display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
  .scn-nw { white-space: nowrap; }
  .scn-card > .tag { justify-self: start; height: 24px; padding: 0 9px; font-size: 12.5px; }
  .scn-card .btn-block { height: 48px; }
  /* email: field → what we send → the opt-in → the button (the opt-in is read before the send) */
  .scn-mail { display: grid; gap: 8px; justify-items: stretch; }
  .scn-mail .label .muted { font-weight: 400; }
  .scn-mail > .input { height: 40px; }
  .scn-mail > .btn { height: 38px; justify-self: start; margin-top: 4px; }
  .scn-mail-help { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }
  /* a real checkbox (site-08-login .lg-check pattern; not ds .check, whose shell toggle would double-fire on a label) */
  .scn-consent { display: inline-flex; align-items: flex-start; gap: 8px; justify-self: start; font-size: 13px; line-height: 1.4; color: var(--ink-2); cursor: pointer; padding: 6px 0; }
  .scn-consent i.box { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; background: var(--panel); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 38%, transparent); display: inline-grid; place-items: center; }
  .scn-consent i.box svg.lucide { width: 12px; height: 12px; stroke-width: 3; opacity: 0; }
  .scn-consent input:checked + i.box { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }
  .scn-consent input:checked + i.box svg.lucide { opacity: 1; }
  .scn-consent input:focus-visible + i.box { outline: 2px solid var(--focus); outline-offset: 2px; }
  .scn-fail-h { display: flex; align-items: center; gap: 12px; }
  .scn-fail-ic { align-self: flex-start; margin-top: 1px; width: 34px; height: 34px; border-radius: 9px; background: var(--bad-wash); color: var(--bad-ink); display: grid; place-items: center; flex: none; }
  .scn-fail-h h1 { font: 400 26px/1.2 var(--f-display); letter-spacing: -0.025em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
  .scn-fail-p { font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
  .scn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (prefers-reduced-motion: reduce) {
    .scn-live::before { animation: none; }
    .scn-ind::before { animation: none; transform: none; }
  }
  @media (max-width: 720px) { .scn-status { padding: 40px 16px 64px; min-height: 420px; } }
  @media (max-width: 560px) {
    .scn-card { padding: 20px; }
    .scn-done-h, .scn-fail-h h1 { font-size: 24px; }
    .scn-mail > .btn { justify-self: stretch; height: 40px; }
  .scn-card > form { display: contents; }
  .scn-mail .scn-ok { font-size: 13px; color: var(--good-ink); }
  .scn-mail .scn-err-t { font-size: 13px; color: var(--bad-ink); }
  .scn-recap { font-size: 11.5px; color: var(--ink-4); }
  .scn-recap a { text-decoration: underline; }
  @media (prefers-reduced-motion: no-preference) { .scn-card { animation: rise .55s var(--ease) backwards; } }
.rs-byline .rs-copy { margin-left: auto; flex: none; }
@media (max-width: 640px) { .rs-byline { display: grid; grid-template-columns: 28px minmax(0, 1fr); } .rs-byline .rs-copy { grid-column: 2; justify-self: start; margin-left: -10px; } }
.rs-tbl .tbl tbody th { background: transparent; text-align: left; font-weight: 400; font-size: 13.5px; color: var(--ink-2); text-transform: none; letter-spacing: 0; padding: 9px 12px; border-bottom: 1px solid var(--hair); height: auto; white-space: normal; }
.rep-ok-v .rep-ok-step { font-size: 12.5px; color: var(--ink-3); }
.rep-src a.mono { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.rep-retry { display: grid; gap: 6px; justify-items: start; }
.rep-old .rep-retry { justify-items: end; }
@media (max-width: 560px) { .rep-old .rep-retry { grid-column: 2; justify-items: start; } }
.rep-top + .notice.warn { margin-top: -8px; }
.pfr .recaptcha-note { font-size: 11.5px; color: var(--ink-4); }
.rep-shot .im { display: grid; gap: 16px; padding: 20px; }
.rep-shot .im-pop-i { color: var(--ink-4); display: inline-grid; place-items: center; width: 22px; height: 20px; }
.rep-shot .shot-cap { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }