/* ============================================================
   Report Details V2 - built from scratch (TEMPORARY page)
   Route: /reportsv2/<rep_url>

   Only the new page body belongs here. Header/footer chrome lives
   in rv2-header-footer.css. Styles are added block by block.
   ============================================================ */

/* anchor jumps from the section nav glide instead of snapping */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.rv2 {
    --rv2-navy: #06294d;
    --rv2-cyan: #abe2f9;
    --rv2-ink: #111;
    --rv2-muted: #3d7ba8;
    --rv2-line: #d3e8f7;
    --rv2-accent: #007db3;
    --rv2-buy: #f6a11f;

    /* accent palette - four shades of the brand blue, nothing else */
    --rv2-c1: #0d7fbc;  /* mid blue    */
    --rv2-c2: #009fc4;  /* cyan blue   */
    --rv2-c3: #2a5f96;  /* steel blue  */
    --rv2-c4: #06294d;  /* navy        */

    min-height: 40vh;
    color: var(--rv2-ink);
}

/* ============================================================
   BLOCK 2 : banner
   ============================================================ */

.rv2-banner {
    background: linear-gradient(120deg, #10589b 0%, #0a3e6e 70%);
    color: #fff;
    padding: 15px 0;
}

/* ---------- breadcrumb ---------- */
.rv2-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.rv2-breadcrumb li + li::before {
    content: "/";
    margin: 0 8px;
    color: rgba(255, 255, 255, .5);
}

.rv2-breadcrumb a {
    color: var(--rv2-cyan);
    text-decoration: none;
}

.rv2-breadcrumb a:hover {
    text-decoration: underline;
}

.rv2-breadcrumb [aria-current] {
    color: rgba(255, 255, 255, .8);
}

/* ---------- title + description ---------- */
.rv2-banner h1 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.25;
    margin: 4px 0 10px;
    color: #fff;
}

.rv2-banner-desc {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .92);
}


/* ---------- banner meta : plain text line under the description ----------
   Named apart from .rv2-byline, which is the author/editor card further down. */
.rv2-banner-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 18px;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #bcd6ee;
}

.rv2-banner-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rv2-banner-meta strong {
    font-weight: 600;
    color: #fff;
}

.rv2-banner-meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: .85;
}

/* ---------- chips : category, pages, tables, figures, cite ---------- */
.rv2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rv2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: #e3eff9;
    text-decoration: none;
    white-space: nowrap;
}

.rv2-chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    opacity: .85;
}

a.rv2-chip:hover,
button.rv2-chip:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    text-decoration: none;
}

button.rv2-chip {
    cursor: pointer;
}

/* ---------- cite this report ---------- */
.rv2-cite {
    position: relative;
}

.rv2-cite-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 340px;
    background: #eaf5fd;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .12);
    white-space: normal;
    text-align: left;
    z-index: 4;
}

.rv2-cite-tooltip::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top-color: #eaf5fd;
    border-bottom: 0;
}

.rv2-cite-tooltip strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #004392;
    margin-bottom: 4px;
}

.rv2-cite-tooltip a {
    font-size: 13px;
    color: #bc2f06;
    word-break: break-all;
    text-decoration: none;
}

.rv2-cite-tooltip a:hover {
    text-decoration: underline;
}

.rv2-cite:hover .rv2-cite-tooltip,
.rv2-cite:focus-within .rv2-cite-tooltip {
    display: block;
}

/* ---------- buy box ---------- */
.rv2-buy-box {
    text-align: center;
}

.rv2-price {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 10px;
    color: #fff;
}

.rv2-price strong {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.rv2-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 240px;
    max-width: 100%;
    background: var(--rv2-buy);
    border: 1px solid var(--rv2-buy);
    border-radius: 100px;
    padding: 12px 34px;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
}

.rv2-buy-btn svg {
    width: 18px;
    height: 18px;
}

.rv2-buy-btn:hover {
    background: #d98807;
    border-color: #d98807;
    color: #111;
    text-decoration: none;
}


/* ============================================================
   BLOCK 3 : main content
   ============================================================ */

.rv2-content {
    position: relative;
    background:
        radial-gradient(900px 420px at 8% 0, rgba(13, 127, 188, .14), transparent 60%),
        radial-gradient(760px 380px at 96% 12%, rgba(0, 159, 196, .12), transparent 60%),
        radial-gradient(700px 460px at 60% 100%, rgba(42, 95, 150, .10), transparent 62%),
        linear-gradient(180deg, #eaf2f9 0%, #f3f7fb 45%, #eef4fa 100%);
    padding: 34px 0 44px;
}

/* ---------- section nav : full-width sticky bar under the banner ---------- */
.rv2-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid #cfe6f7;
    box-shadow: 0 2px 10px rgba(6, 41, 77, .06);
}

.rv2-tabs > div {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.rv2-tabs > div::-webkit-scrollbar {
    display: none;
}

/* Anything that can be jumped to must clear the sticky bar. The tab script
   measures the bar and scrolls to an exact offset; this covers the browser's
   own anchor handling (deep links, no-JS) with the same gap. */
#rv2-summary,
#rv2-segmentation,
#rv2-faqs,
.rv2-block,
.rv2-block > h2,
.rv2-block > h3 {
    scroll-margin-top: 72px;
}

/* the sections take focus on tab click, but should not draw a focus ring */
#rv2-summary:focus,
#rv2-segmentation:focus,
#rv2-faqs:focus {
    outline: none;
}

.rv2-tabs .rv2-tab,
.rv2-tab-link {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 15px 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: #3d7ba8;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.rv2-tabs .rv2-tab:hover,
.rv2-tab-link:hover {
    background: #eaf5fd;
    color: #10589b;
    text-decoration: none;
}

.rv2-tabs .rv2-tab[aria-current="true"] {
    color: #10589b;
    border-bottom-color: #2ba7da;
}

/* ToC / Methodology leave the page - mark them with an arrow */
.rv2-tab-link::after {
    content: "\2197";
    margin-left: 6px;
    font-size: 13px;
    opacity: .6;
}

/* ---------- panels ---------- */
/* tables are wrapped server-side so a wide one scrolls on its own */
.rv2-table-scroll {
    overflow-x: auto;
    margin: 0 0 20px;
}

.rv2-table-scroll:focus {
    outline: none;
}

.rv2-block .rv2-table-scroll table {
    margin-bottom: 0;
}

.rv2-panel:focus {
    outline: none;
}

/* ---------- key stats (rep_card) : first thing in the summary tab ----------
   The stored markup is a plain <ul><li><strong>Label:</strong> Value</li>,

/* ---------- key stats (rep_card) : first thing in the summary tab ----------
   The stored markup is a plain <ul><li><strong>Label:</strong> Value</li>,
   so the label is styled off the <strong> and the value off the list item.
   Card tints follow the redesign reference. */
.rv2-key-stats ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.rv2-key-stats li {
    border: 1px solid;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    transition: box-shadow .25s ease, transform .25s ease;
}

.rv2-key-stats li::marker {
    content: none;
}

.rv2-key-stats li:hover {
    box-shadow: 0 6px 18px rgba(6, 41, 77, .12);
    transform: translateY(-2px);
}

/* label sits above the figure */
.rv2-key-stats li strong {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.rv2-key-stats li:nth-of-type(1) { background: #eaf4fc; border-color: #c9e1f4; color: #10589b; }
.rv2-key-stats li:nth-of-type(1) strong { color: #3f6e9c; }

.rv2-key-stats li:nth-of-type(2) { background: #e4f6fb; border-color: #bfe7f3; color: #0b7ca8; }
.rv2-key-stats li:nth-of-type(2) strong { color: #2c7d9c; }

.rv2-key-stats li:nth-of-type(3) { background: #e8edf9; border-color: #cbd6f0; color: #2b49a0; }
.rv2-key-stats li:nth-of-type(3) strong { color: #4c5fa5; }

.rv2-key-stats li:nth-of-type(4) { background: #fcf3e2; border-color: #f0dbb2; color: #a16a0f; }
.rv2-key-stats li:nth-of-type(4) strong { color: #9a7422; }

@media (max-width: 1199px) {
    .rv2-key-stats ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .rv2-key-stats ul { grid-template-columns: 1fr; gap: 12px; }
    .rv2-key-stats li { font-size: 19px; padding: 14px 16px; }
}

/* ---------- content blocks : each one is its own card ---------- */
.rv2-block {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(6, 41, 77, .04), 0 8px 24px rgba(6, 41, 77, .07);
    padding: 0 0 26px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow .25s ease;
}

.rv2-block:hover {
    box-shadow: 0 2px 4px rgba(6, 41, 77, .05), 0 14px 34px rgba(6, 41, 77, .11);
}

/* Every block keeps its gap. Trimming the last one used to be safe when all
   blocks sat in one panel, but each section now ends with a :last-child, which
   made Segmentation and FAQs butt straight up against the block above. */
.rv2-report > section:last-of-type .rv2-block:last-child {
    margin-bottom: 0;
}

/* card header - only the block's own heading, never an h2 inside the content */
.rv2-block > h2,
.rv2-block > h3 {
    position: relative;
    background: #0d7fbc;
    border-bottom: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: 20px 30px 20px 34px;
    color: #fff;
}

.rv2-block > h2::before,
.rv2-block > h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #8ed8f5;
}

.rv2-block-body {
    padding: 24px 30px 0;
}

.rv2-block-body > *:last-child {
    margin-bottom: 0;
}

/* ---- headings that come from the report content itself ----
   Each level gets its own marker, not just a smaller size, so the
   hierarchy stays readable: h2 = underline, h3 = accent bar, h4 = caps. */

.rv2-block-body h2 {
    position: relative;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45;
    margin: 32px 0 16px;
    padding: 0 0 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid #cfe6f7;
    color: #205481;
}

/* short coloured segment sitting on the underline */
.rv2-block-body h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #008ebd, #205481);
}

.rv2-block-body h3 {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 26px 0 10px;
    padding-left: 14px;
    color: #22638f;
}

.rv2-block-body h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 3px;
    background: #008ebd;
}

.rv2-block-body h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 22px 0 8px;
    color: #3d7ba8;
}

.rv2-block-body h2:first-child,
.rv2-block-body h3:first-child,
.rv2-block-body h4:first-child {
    margin-top: 0;
}

.rv2-block p {
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 15px;
    color: #173f5c;
}

.rv2-block ul,
.rv2-block ol {
    margin: 0 0 15px;
    padding-left: 20px;
}

.rv2-block li {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 8px;
    color: #173f5c;
}

.rv2-block ul {
    list-style: none;
    padding-left: 0;
}

.rv2-block ul li {
    position: relative;
    padding-left: 24px;
}

.rv2-block ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #008ebd;
}

.rv2-block a {
    color: #007db3;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 125, 179, .35);
}

.rv2-block a:hover {
    color: #205481;
    border-bottom-color: #205481;
}

.rv2-block img {
    max-width: 100%;
    height: auto;
}

/* ---------- figures ----------
   width 680 = 650px image + 14px padding each side + 1px border,
   so the image itself lands on 650px at desktop. */
.rv2-figure {
    box-sizing: border-box;
    width: 680px;
    max-width: 100%;
    margin: 30px auto 34px;
    padding: 14px;
    background: #fff;
    border: 1px solid #cfe6f7;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(6, 41, 77, .04), 0 10px 26px rgba(6, 41, 77, .08);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.rv2-figure:hover {
    border-color: #bcdcf1;
    box-shadow: 0 4px 8px rgba(6, 41, 77, .06), 0 18px 40px rgba(6, 41, 77, .13);
}

.rv2-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #eaf5fd;
}

.rv2-figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e3f0fa;
}

.rv2-figcaption p {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #3d7ba8;
}

.rv2-share-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf4fb;
    border: 1px solid #bcdcf1;
    border-radius: 6px;
    padding: 4px 15px;
    font: inherit;
    font-size: 14px;
    color: #205481;
    cursor: pointer;
}

.rv2-share-btn:hover {
    background: #e6f2fb;
    border-color: #8fc6e8;
    color: #205481;
}

/* ---------- share modal ---------- */
.rv2-share-hint {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
    color: #2f6f9e;
}

.rv2-share-code {
    background: #06294d;
    border: 1px solid #0d7fbc;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 16px;
    max-height: 220px;
    overflow: auto;
}

.rv2-share-code code {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #9fdcf7;
    white-space: pre-wrap;
    word-break: break-all;
}

.rv2-copy-embed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #0d7fbc, #009fc4);
    border: 0;
    border-radius: 100px;
    padding: 12px 28px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(13, 127, 188, .38);
    transition: box-shadow .2s ease, transform .2s ease;
}

.rv2-copy-embed:hover {
    box-shadow: 0 10px 22px rgba(13, 127, 188, .5);
    transform: translateY(-1px);
    color: #fff;
}

/* ---------- pull quotes ---------- */
/* The report HTML already ships the one-line answer as a <blockquote>.
   Label it "Quick Answer" from CSS so the stored markup stays untouched. */
.rv2-block blockquote {
    background: #eaf5fd;
    border: 1px solid #bcdcf1;
    border-left: 4px solid var(--rv2-c1);
    border-radius: 10px;
    padding: 14px 18px 16px;
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.7;
    color: #0f4a72;
}

.rv2-block blockquote::before {
    content: "Quick Answer";
    display: inline-block;
    background: var(--rv2-c1);
    border-radius: 4px;
    padding: 3px 9px;
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
}

.rv2-block blockquote p {
    margin: 0;
    color: inherit;
}

.rv2-block blockquote p + p {
    margin-top: 10px;
}

/* ---------- tables ---------- */
.rv2-block table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 20px;
    font-size: 15px;
    border: 1px solid #cfe6f7;
    border-radius: 10px;
    overflow: hidden;
}

.rv2-block th,
.rv2-block td {
    padding: 12px 14px;
    text-align: left;
    line-height: 1.6;
    border-bottom: 1px solid #cfe6f7;
}

/* Header = the table's first row, whether the source markup used th or td.
   The report HTML is inconsistent: some tables put <th> in the header row,
   others put <td> there and <th> on the first data row. Keying off position
   instead of the tag keeps every table looking the same. */
.rv2-block table > thead > tr > *,
.rv2-block table > tbody:first-child > tr:first-child > * {
    /* table headers stay blue everywhere, whatever tone the block carries */
    background: linear-gradient(90deg, var(--rv2-c1), #205481);
    color: #fff;
    font-weight: 600;
    border-bottom: 0;
}

/* a th anywhere else is just an emphasised cell, not a second header bar */
.rv2-block table > tbody:not(:first-child) th {
    background: none;
    color: inherit;
    font-weight: 600;
}

.rv2-block tbody tr:nth-child(even) > th,
.rv2-block tbody tr:nth-child(even) > td {
    background: #eff7fd;
}

.rv2-block tbody:last-child tr:last-child > * {
    border-bottom: 0;
}


/* ---------- FAQs ----------
/* ---------- FAQs ----------
   Row styling taken from the redesign reference: one bordered list with the
   questions split by hairlines and a +/- marker in amber. It sits inside the
   normal block card, like every other section on the page. */
.rv2-faq-list {
    border: 0;
    border-top: 1px solid #d5e3f0;
    border-bottom: 1px solid #d5e3f0;
    border-radius: 0;
}

.rv2-faq {
    background: none;
    border: 0;
    border-bottom: 1px solid #d5e3f0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.rv2-faq:last-child {
    border-bottom: 0;
}

.rv2-faq[open] {
    background: none;
    box-shadow: none;
}

.rv2-faq summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #10589b;
    cursor: pointer;
    list-style: none;
}

.rv2-faq summary::-webkit-details-marker {
    display: none;
}

/* a click leaves Chrome's focus ring boxed around the row - keep it only for
   keyboard users, and inset so it does not sit on top of the row divider */
.rv2-faq summary:focus {
    outline: none;
}

.rv2-faq summary:focus-visible {
    outline: 2px solid var(--rv2-c1);
    outline-offset: -2px;
}

.rv2-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 16px;
    color: #e8a23b;
}

.rv2-faq[open] summary::after {
    content: "\2013";
}

.rv2-faq-answer {
    padding: 0 18px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: #1a2733;
}

.rv2-faq-answer p {
    margin: 0 0 12px;
}

.rv2-faq-answer p:last-child {
    margin-bottom: 0;
}

/* ---------- Table of Content listing ----------
   The stored ToC is a long run of headings and nested lists, so it needs
   tighter rhythm than report prose or it runs to several screens of air. */
.rv2-toc-listing p,
.rv2-toc-listing li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.rv2-toc-listing ul,
.rv2-toc-listing ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

/* nested levels step in and lose the bullet, the way a contents page reads */
.rv2-toc-listing ul li::before {
    top: 9px;
    width: 5px;
    height: 5px;
}

.rv2-toc-listing ul ul {
    margin-top: 6px;
    padding-left: 18px;
}

.rv2-toc-listing ul ul li::before {
    background: #7db8e0;
}

.rv2-toc-listing strong,
.rv2-toc-listing b {
    display: inline-block;
    margin-top: 10px;
    color: #10589b;
}

/* ---------- author / editor bylines, closing the article ---------- */
.rv2-bylines {
    background: linear-gradient(135deg, #fff 0%, #f4f9fd 100%);
    border: 1px solid #c9e2f4;
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(6, 41, 77, .04), 0 8px 24px rgba(6, 41, 77, .07);
    padding: 24px 30px 26px;
    margin-top: 20px;
}

.rv2-bylines-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: #3d7ba8;
}

.rv2-byline-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.rv2-byline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #cfe6f7;
    border-top: 3px solid var(--rv2-c1);
    border-radius: 12px;
    padding: 16px;
}

.rv2-byline:nth-of-type(2) {
    border-top-color: var(--rv2-c3);
}

.rv2-byline:nth-of-type(2) .rv2-byline-role {
    color: var(--rv2-c3);
}

.rv2-byline img {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 14px;
    object-fit: cover;
    background: #cfe6f7;
}

.rv2-byline p {
    margin: 0;
}

.rv2-byline-role {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #008ebd;
    margin-bottom: 3px !important;
}

.rv2-byline-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #205481;
}

.rv2-byline-job {
    font-size: 13px;
    line-height: 1.5;
    color: #3d7ba8;
    margin-top: 2px !important;
}

.rv2-byline a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #007db3;
    text-decoration: none;
}

.rv2-byline a svg {
    width: 15px;
    height: 15px;
}

.rv2-byline a:hover {
    color: #205481;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .rv2-byline-list { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .rv2-bylines { padding: 20px 18px; }
}

/* ---------- related reports, closing the page under the bylines ---------- */
.rv2-related-block {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfe6f7;
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(6, 41, 77, .04), 0 8px 24px rgba(6, 41, 77, .07);
    padding: 24px 30px 26px;
    margin-top: 20px;
}

.rv2-related-block::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: var(--rv2-c3);
}

.rv2-related-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #3d7ba8;
}

/* wider than the sidebar was, so the links sit two across */
.rv2-related-block ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rv2-related-block li {
    border-top: 1px solid #e3f0fa;
}

.rv2-related-block li:first-child,
.rv2-related-block li:nth-child(2) {
    border-top: 0;
}

.rv2-related-block a {
    display: block;
    padding: 11px 0;
    font-size: 15px;
    line-height: 1.5;
    color: #2f6f9e;
    text-decoration: none;
}

.rv2-related-block a:hover {
    color: #007db3;
}

@media (max-width: 767px) {
    .rv2-related-block ul { grid-template-columns: 1fr; }
    .rv2-related-block li:nth-child(2) { border-top: 1px solid #e3f0fa; }
    .rv2-related-block { padding: 20px 18px; }
}

/* ============================================================
   BLOCK 4 : sidebar
   ============================================================ */

/* The sidebar scrolls with the page - nothing in it is pinned except the
   sample form, which is fixed by script once Quick Contact scrolls away. */

/* ---------- shared button shape ---------- */
.rv2-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    /* transparent by default so bordered and border-less variants
       still come out exactly the same height */
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
}

.rv2-btn:hover {
    text-decoration: none;
}

.rv2-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.rv2-side-cta {
    display: grid;
    gap: 12px;
    background: #fff;
    border: 1px solid #cfe6f7;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(6, 41, 77, .04), 0 8px 22px rgba(6, 41, 77, .06);
}

.rv2-btn-sample {
    background: #ff9a4d;
    color: #111;
}

.rv2-btn-sample:hover {
    background: #ff8a2e;
    color: #111;
    box-shadow: 0 8px 20px rgba(255, 138, 46, .35);
}

.rv2-btn-pdf {
    background: #e2eefa;
    border: 1px solid #bcdcf1;
    color: #205481;
}

.rv2-btn-pdf:hover {
    background: #d2e6f7;
    color: #124367;
}

/* ---------- sidebar cards ---------- */
.rv2-side-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfe6f7;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(6, 41, 77, .04), 0 8px 22px rgba(6, 41, 77, .06);
}

/* coloured strip across the top of each sidebar card */
.rv2-side-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: var(--tone, var(--rv2-c1));
}

/* --tone-soft is that tone at 45% over white, worked out ahead of time so
   the rules do not need color-mix(), which older browsers ignore */
.rv2-toc           { --tone: var(--rv2-c1); --tone-soft: #92c5e1; }
.rv2-editorial     { --tone: var(--rv2-c2); --tone-soft: #8cd4e4; }
.rv2-related       { --tone: var(--rv2-c3); --tone-soft: #9fb7d0; }
.rv2-quick-contact { --tone: var(--rv2-c4); --tone-soft: #8f9faf; }
.rv2-sample-form   { --tone: var(--rv2-c1); --tone-soft: #92c5e1; }

.rv2-side-card:last-child {
    margin-bottom: 0;
}

.rv2-side-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    margin: 4px 0 14px;
    color: var(--tone, var(--rv2-c1));
    text-align: center;
    justify-content: center;
}

/* the two short rules that flank the heading */
.rv2-side-title::before,
.rv2-side-title::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--tone-soft, #92c5e1);
}

/* ---------- table of contents ---------- */
.rv2-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rv2-toc li + li {
    border-top: 1px solid #e3f0fa;
}

.rv2-toc a {
    display: block;
    position: relative;
    padding: 10px 8px 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #173f5c;
    text-decoration: none;
}

.rv2-toc a:hover {
    background: #eaf5fd;
    color: #205481;
}

.rv2-toc a.is-active {
    background: #e6f2fb;
    color: #205481;
}

.rv2-toc a.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: #008ebd;
}

/* ---------- request forms (sidebar + popup) ---------- */
.rv2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rv2-field {
    margin: 0 0 14px;
}

.rv2-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #173f5c;
}

.rv2-field abbr {
    color: #d64545;
    text-decoration: none;
}

.rv2-field input,
.rv2-field textarea {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #c2e0f5;
    border-radius: 8px;
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--rv2-ink);
}

.rv2-field textarea {
    resize: vertical;
}

.rv2-field input::placeholder,
.rv2-field textarea::placeholder {
    color: #7db8e0;
}

.rv2-field input:focus,
.rv2-field textarea:focus {
    outline: none;
    border-color: #008ebd;
    box-shadow: 0 0 0 3px rgba(0, 142, 189, .16);
}

.rv2-field input.is-invalid {
    border-color: #d64545;
}

.rv2-field input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .16);
}

.rv2-field-error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
    color: #d64545;
}

.rv2-btn-submit {
    background: linear-gradient(120deg, #0d7fbc, #009fc4);
    border: 0;
    border-radius: 100px;
    color: #fff;
    margin-top: 4px;
    box-shadow: 0 6px 16px rgba(13, 127, 188, .35);
    transition: box-shadow .2s ease, transform .2s ease;
}

.rv2-btn-submit:hover {
    color: #fff;
    box-shadow: 0 10px 22px rgba(13, 127, 188, .48);
    transform: translateY(-1px);
}

/* fields inside the popup sit on white, so give them a touch more presence */
.rv2-form-modal .rv2-field label {
    color: #0f4a72;
}

.rv2-form-modal .rv2-field input,
.rv2-form-modal .rv2-field textarea {
    border-width: 2px;
    border-color: #cfe6f7;
}

.rv2-form-modal .rv2-field input:focus,
.rv2-form-modal .rv2-field textarea:focus {
    border-color: var(--rv2-c1);
}

.rv2-form-note {
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    margin: 10px 0 0;
    color: #3d7ba8;
}

.rv2-form-note a {
    color: #007db3;
}

/* Hidden on load - it takes up no space in the sidebar at all. It only
   appears, pinned, once Quick Contact has scrolled past the top. */
/* left/top/width are set by script so the form lines up with the sidebar
   column and clears the sticky section bar */
/* Sticky sample form. Borrowed from the live card, which stands out because
   of two things: a thick cyan outline that lifts it off the page, and an
   orange CTA that is the only warm colour in a blue column. The gradient
   head is dropped - it pulled weight to the title instead of the button.
   left/top/width are set by script to match the sidebar column. */
.rv2-sample-form {
    display: none;
    position: fixed;
    top: 68px;
    z-index: 15;
    background: #f6f8ff;
    border: 5px solid #3ab0da;
    border-radius: 20px;
    padding: 18px 16px 16px;
    box-shadow: 0 6px 14px rgba(6, 41, 77, .10), 0 20px 48px rgba(6, 41, 77, .18);
}

.rv2-sample-form.is-pinned {
    display: block;
}

/* the thin top strip belongs to the plain sidebar cards */
.rv2-sample-form::before {
    content: none;
}

.rv2-sample-form .rv2-side-title {
    display: block;
    background: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #003367;
}

.rv2-sample-form .rv2-side-title::before,
.rv2-sample-form .rv2-side-title::after {
    content: none;
}

.rv2-sample-form form {
    padding: 0;
}

.rv2-sample-form .rv2-field {
    margin-bottom: 18px;
}

/* underline fields, so nothing competes with the button for attention */
.rv2-sample-form .rv2-field input {
    background: none;
    border: 0;
    border-bottom: 1px solid #7fb6dd;
    border-radius: 0;
    padding: 8px 2px;
    font-size: 15px;
}

.rv2-sample-form .rv2-field input::placeholder {
    font-size: 14px;
    color: #45607a;
}

.rv2-sample-form .rv2-field input:hover {
    border-bottom-color: #2f8fc4;
}

.rv2-sample-form .rv2-field input:focus {
    border-bottom-color: var(--rv2-c1);
    border-bottom-width: 2px;
    box-shadow: none;
}

.rv2-sample-form .rv2-field input.is-invalid {
    border-bottom-color: #d64545;
}

/* the one warm element on the page - this is what the eye should land on */
.rv2-sample-form .rv2-btn-submit {
    background: #ff9a4d;
    border: 1px solid #ff7818;
    border-radius: 100px;
    padding: 14px 20px;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #0f1111;
    box-shadow: 0 6px 16px rgba(255, 122, 24, .34);
}

.rv2-sample-form .rv2-btn-submit:hover {
    background: #ff7818;
    color: #0f1111;
    transform: translateY(-1px);
}

.rv2-sample-form .rv2-form-note {
    margin-top: 12px;
}

/* ---------- popups : request form + image share ---------- */
.rv2-form-modal,
.rv2-share-modal {
    /* the global "* { margin: 0 }" reset kills the UA's margin:auto,
       which is what centres a modal <dialog> - put it back */
    margin: auto;
    max-width: calc(100vw - 32px);
    border: 0;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(6, 41, 77, .38);
    color: var(--rv2-ink);
}

.rv2-form-modal { width: 470px; }
.rv2-share-modal { width: 660px; }

.rv2-form-modal::backdrop,
.rv2-share-modal::backdrop {
    background: rgba(6, 41, 77, .58);
    backdrop-filter: blur(3px);
}

/* coloured header band */
.rv2-modal-head,
.rv2-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(120deg, #05426b 0%, #0d7fbc 55%, #009fc4 100%);
    padding: 20px 24px;
}

.rv2-modal-head .rv2-modal-heading,
.rv2-share-head .rv2-modal-heading {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: #fff;
}

.rv2-modal-close,
.rv2-share-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, .18);
    border: 0;
    border-radius: 50%;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.rv2-modal-close:hover,
.rv2-share-close:hover {
    background: rgba(255, 255, 255, .34);
    color: #fff;
}

.rv2-modal-body {
    background: linear-gradient(180deg, #eaf5fd 0%, #fff 220px);
    padding: 20px 24px 24px;
}

/* the report this request is about */
.rv2-form-report {
    position: relative;
    background: #fff;
    border: 1px solid #bcdcf1;
    border-left: 4px solid var(--rv2-c1);
    border-radius: 8px;
    padding: 11px 14px;
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #0f4a72;
}

/* ---------- editorial note ---------- */
.rv2-editorial {
    background: #eaf5fd;
    text-align: center;
}

.rv2-editorial p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
    color: #3d7ba8;
}

.rv2-btn-editorial {
    background: #007db3;
    border-radius: 100px;
    font-weight: 500;
    color: #fff;
}

.rv2-btn-editorial:hover {
    background: #205481;
    color: #fff;
}

/* ---------- quick contact ---------- */
.rv2-quick-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rv2-quick-contact li + li {
    border-top: 1px solid #e3f0fa;
}

.rv2-quick-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    font-size: 14px;
    line-height: 1.4;
    color: #2f6f9e;
    text-decoration: none;
    word-break: break-word;
}

.rv2-quick-contact svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #7db8e0;
}

.rv2-quick-contact a:hover {
    color: #007db3;
}

.rv2-quick-contact a:hover svg {
    color: #007db3;
}

.rv2-contact-whatsapp a:hover,
.rv2-contact-whatsapp a:hover svg {
    color: #25d366;
}

/* ---------- related reports ---------- */
.rv2-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rv2-related li + li {
    border-top: 1px solid #e3f0fa;
}

.rv2-related a {
    display: block;
    padding: 11px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #2f6f9e;
    text-decoration: none;
}

.rv2-related a:hover {
    color: #007db3;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .rv2-banner h1 { font-size: 24px; }
    .rv2-banner-desc { font-size: 15px; }
    .rv2-buy-box { margin-top: 22px; }
    .rv2-sidebar { position: static; margin-top: 24px; }
}

@media (max-width: 767px) {
    /* tab strip scrolls sideways instead of wrapping */
    .rv2-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rv2-tabs::-webkit-scrollbar { display: none; }
    .rv2-tabs [role="tab"],
    .rv2-tab-link { flex: 0 0 auto; }
}

@media (max-width: 575px) {
    .rv2-banner h1 { font-size: 20px; }
    .rv2-banner-desc { font-size: 14px; }
    .rv2-chip { font-size: 11px; padding: 4px 10px; }
    .rv2-banner-meta { font-size: 12px; gap: 4px 14px; }
    .rv2-cite-btn { font-size: 12px; padding: 5px 12px; }
    .rv2-cite-tooltip { max-width: 260px; }
    .rv2-content { padding: 24px 0 32px; }
    .rv2-tabs [role="tab"],
    .rv2-tab-link { padding: 12px 16px; font-size: 15px; }
    .rv2-block h2 { font-size: 19px; padding: 16px 18px 16px 22px; }
    .rv2-block-body { padding: 18px 18px 0; }
    .rv2-block { padding-bottom: 18px; }
    .rv2-faq summary { font-size: 14px; padding: 13px 15px; }
    .rv2-faq-answer { padding: 0 15px 15px; }
    .rv2-figcaption { flex-direction: column; align-items: stretch; }
    .rv2-share-btn { align-self: flex-start; }
}