/* Readership report page.
   The sample report reads top to bottom as one argument:
   how many read it, who they were in three facts, then the names.
   Everything secondary sits behind one "detail" toggle. */

.brand-site.readership-page .page-hero{padding:40px 0 12px}
.readership-page .page-hero .brand-eyebrow{margin-bottom:12px}
.readership-page .page-hero .sub{margin-top:12px;font-size:16px;line-height:1.45;max-width:700px}
.rr-delivery{margin-top:10px;color:var(--ink-3);font-size:14px;line-height:1.5}

/* ── The sample report ────────────────────────────────────────────────── */
.rx-section{padding-block:16px 0}
.rx-wide{width:calc(100% - 40px);max-width:780px;margin-inline:auto}
.rx{
  --rx-line:rgba(255,255,255,.10);
  --rx-soft:rgba(255,255,255,.045);
  --rx-blue:var(--brand-blue,#4A6CF7);
  --rx-blue-text:var(--accent-text,#7C95FF);
  --rx-bg:#0A0B0E;--rx-ink:var(--rx-ink);--rx-ink-2:var(--rx-ink-2);--rx-ink-3:var(--rx-ink-3);--rx-muted:var(--rx-muted);--rx-faint:var(--rx-faint);
  padding:clamp(20px,3vw,40px);
  border:1px solid var(--rx-line);border-radius:28px;
  background:var(--rx-bg);color:var(--rx-ink);
  font-size:16px;line-height:1.5;
}
.rx *{min-width:0}
.rx h2,.rx h3{margin:0;font-family:var(--display);letter-spacing:-.02em;text-wrap:balance}
.rx h3{font-size:clamp(22px,1.9vw,24px);font-weight:600;line-height:1.15}
.rx ol,.rx ul{list-style:none;margin:0;padding:0}
.rx p{margin:0}

.rx-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:clamp(18px,2.4vw,28px)}
.rx-brand{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--rx-ink-3)}
.rx-brand img{width:20px;height:20px;object-fit:contain;filter:invert(1)}
.rx-tag{padding:4px 11px;border-radius:999px;background:rgba(124,149,255,.16);color:var(--rx-blue-text);font-size:12.5px;font-weight:600;white-space:nowrap}

/* 1. How many */
.rx-hero{display:grid;gap:clamp(20px,2.6vw,32px);align-items:end}
@media(min-width:820px){.rx-hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.rx-eyebrow{font-size:14px;color:var(--rx-muted)}
.rx-read{display:none;color:var(--rx-blue-text);text-decoration:none;white-space:nowrap}
.rx-read:hover{text-decoration:underline;text-underline-offset:3px}
.rx h2{margin-top:10px;font-size:clamp(22px,2vw,25px);font-weight:500;line-height:1.2;color:var(--rx-ink-2);max-width:26ch}
.rx-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:clamp(18px,2vw,22px)}
.rx-total b{font-family:var(--display);font-size:clamp(68px,8vw,88px);font-weight:700;line-height:.92;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--rx-ink)}
.rx-total span{font-size:clamp(20px,1.8vw,22px);font-weight:500;color:var(--rx-ink-3)}
.rx-article{display:block;border-radius:18px;overflow:hidden;background:var(--rx-soft);text-decoration:none;color:inherit;transition:transform .2s ease}
.rx-article:hover{transform:translateY(-2px)}
.rx-article img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 28%}
.rx-article>span{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14.5px;font-weight:500;color:var(--rx-blue-text)}
.rx-read-title{display:none}

/* 2. Who, in three facts */
.rx .rx-facts{display:grid;gap:12px;margin-top:clamp(24px,2.8vw,32px)}
@media(min-width:620px){.rx .rx-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rx-facts li{padding:clamp(18px,1.8vw,22px);border-radius:20px;background:var(--rx-soft)}
.rx-facts b{display:block;font-family:var(--display);font-size:clamp(38px,3.6vw,42px);font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--rx-blue-text)}
.rx-facts span{display:block;margin-top:10px;font-size:16px;line-height:1.3;color:var(--rx-ink-2)}

/* 3. The names */
.rx-names,.rx-pair,.rx-where{margin-top:clamp(36px,4vw,48px)}
.rx-head p{margin-top:8px;font-size:15px;color:var(--rx-muted)}
.rx-star{color:var(--rx-blue-text)}
.rx .rx-rows{display:grid;gap:6px;margin-top:18px}
.rx-rows li{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 16px;border-radius:12px;overflow:hidden;isolation:isolate;
  font-size:16px;font-weight:500;color:var(--rx-ink-2);
}
.rx-rows li::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--bar,0%);z-index:-1;border-radius:12px;background:rgba(74,108,247,.24)}
html[dir="rtl"] .rx-rows li::before{inset:0 0 0 auto}
.rx-rows li::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:12px;background:var(--rx-soft)}
.rx-rows b{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;color:var(--rx-ink)}
.rx-rows .is-target{color:var(--rx-ink)}
.rx-all{margin-top:6px}
.rx .rx-all .rx-rows{margin-top:0}
.rx-all summary,.rx-more summary{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 16px;border-radius:999px;
  background:var(--rx-soft);color:var(--rx-blue-text);font-size:14.5px;font-weight:500;cursor:pointer;list-style:none;
}
.rx-all summary::-webkit-details-marker,.rx-more summary::-webkit-details-marker{display:none}
.rx-all summary::after,.rx-more summary::after{content:"+";font-size:18px;line-height:1;font-weight:400}
.rx-all[open] summary::after,.rx-more[open] summary::after{content:"–"}
.rx-all[open] summary{margin-bottom:6px}
.rx-all summary:hover,.rx-more summary:hover{background:rgba(255,255,255,.08)}

/* 4. Roles and industries */
.rx-pair{display:grid;gap:clamp(28px,3vw,36px)}
@media(min-width:760px){.rx-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rx-pair .rx-rows li{padding-block:11px;font-size:16px}

/* 5. Where */
.rx .rx-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rx-chips li{padding:10px 16px;border-radius:999px;background:var(--rx-soft);font-size:15.5px;color:var(--rx-ink-3)}
.rx-chips b{font-weight:600;color:var(--rx-ink);margin-inline-end:6px}

/* 6. The finding */
.rx-finding{margin:clamp(36px,4vw,48px) 0 0;padding:4px 0 4px clamp(18px,2vw,26px);border-inline-start:3px solid var(--rx-blue)}
.rx-finding p{font-family:var(--display);font-size:clamp(20px,1.8vw,23px);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--rx-ink);max-width:34ch}

/* 7. Detail, collapsed */
.rx-more{margin-top:clamp(28px,4vw,44px);padding-top:clamp(20px,3vw,28px);border-top:1px solid var(--rx-line)}
.rx-more summary{margin-top:0}
.rx-more-body{display:grid;gap:clamp(20px,3vw,40px);margin-top:20px}
@media(min-width:760px){.rx-more-body{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.rx-more h4{margin:0 0 6px;font-family:var(--display);font-size:17px;font-weight:600}
.rx-more .rx-note{font-size:14px;line-height:1.5;color:var(--rx-muted)}
.rx-more .rx-note+.rx-note{margin-top:10px}
.rx-table{width:100%;margin-top:12px;border-collapse:collapse;font-size:15px}
.rx-table th,.rx-table td{padding:10px 0;border-bottom:1px solid var(--rx-line);text-align:start;font-weight:400;color:var(--rx-ink-2)}
.rx-table thead th{font-size:13px;color:var(--rx-muted)}
.rx-table td{text-align:end;font-variant-numeric:tabular-nums}
.rx-table th[scope="col"]:not(:first-child){text-align:end}
.rx-table td:last-child{font-weight:600;color:var(--rx-ink)}

.rx-foot{margin-top:clamp(24px,3vw,36px);font-size:13.5px;color:var(--rx-faint)}

/* Desktop: two panels. The headline number and three facts sit on the left,
   the people behind the number on the right. Below 1000px the panels are
   plain blocks, so the phone layout is untouched. */
@media(min-width:1000px){
  .rx-wide{max-width:1120px}
  .rx-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(36px,4.4vw,64px);align-items:start}
  .rx-side{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column}
  .rx-side .rx-hero,.rx-side .rx-hero>div{display:contents}
  .rx-side .rx-eyebrow{order:1}
  /* The headline is the link: thumbnail beside the title in blue. */
  .rx .rx-side h2{display:none}
  .rx-side .rx-read-label{display:none}
  .rx-side .rx-read-title{display:inline;font-weight:600;line-height:1.35}
  .rx-side .rx-total{order:4;margin-top:18px}
  .rx .rx-side .rx-facts{order:5;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:22px}
  .rx-side .rx-facts li{display:flex;align-items:baseline;gap:16px;padding:14px 18px;border-radius:14px}
  .rx-side .rx-facts b{flex:none;min-width:3.2em;font-size:30px}
  .rx-side .rx-facts span{margin-top:0}
  .rx-side .rx-article{order:3;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;margin-top:12px;border-radius:12px}
  .rx-side .rx-article img{aspect-ratio:1.6/1;height:100%}
  .rx-side .rx-article:hover{transform:none}
  /* Right panel: who read it, then where. Roles and industries run full width below. */
  .rx-main{display:contents}
  .rx-main .rx-names{grid-column:2;grid-row:1;margin-top:0}
  .rx-main .rx-where{grid-column:2;grid-row:2;margin-top:36px}
  .rx-main .rx-pair{grid-column:1 / -1;grid-row:3}
  .rx-finding p{max-width:48ch}
}

/* Desktop: the whole sample fits one screen at a calm size. Number, facts and
   the clickable article photo on the left; the names and places on the right.
   Roles, industries, the finding and the method detail stay on phones only. */
@media(min-width:1000px){
  .rx-wide{max-width:1180px}
  .brand-site.readership-page .page-hero{padding:24px 0 6px}
  .readership-page .page-hero .brand-eyebrow{margin-bottom:8px}
  .readership-page .page-hero .sub{display:none}
  .rx-section{padding-block:10px 0}
  .rx{padding:24px 30px 20px;font-size:15px}
  .rx-top{padding-bottom:16px}
  .rx-brand{font-size:13px}
  .rx-tag{font-size:12px}
  .rx-body{column-gap:44px;grid-template-rows:auto 1fr}
  .rx-main .rx-where{align-self:start}
  .rx-eyebrow{font-size:13px}
  .rx h2{margin-top:6px;font-size:20px;line-height:1.25}
  .rx h3{font-size:20px}
  .rx-total{margin-top:12px;gap:4px 12px}
  .rx-total b{font-size:64px}
  .rx-total span{font-size:18px}
  .rx .rx-side .rx-facts{margin-top:16px;gap:6px}
  .rx-side .rx-facts li{padding:10px 14px;border-radius:12px}
  .rx-side .rx-facts b{font-size:24px;min-width:3.4em}
  .rx-side .rx-facts span{font-size:15px}
  .rx-article>span{padding:10px 14px;font-size:13.5px}
  .rx-all,.rx-main .rx-pair,.rx-finding,.rx-more{display:none}
  .rx-head p{margin-top:5px;font-size:13.5px}
  .rx .rx-rows{margin-top:12px;gap:4px}
  .rx-rows li{padding:9px 14px;border-radius:10px;font-size:14.5px}
  .rx-rows li::before,.rx-rows li::after{border-radius:10px}
  .rx-main .rx-where{margin-top:22px}
  .rx .rx-chips{margin-top:10px;gap:8px}
  .rx-chips li{padding:7px 12px;font-size:13.5px}
  .rx-foot{margin-top:16px;font-size:12.5px}
}
/* Shorter laptop screens: tighter still, the photo becomes a small thumbnail row. */
@media(min-width:1000px) and (max-height:860px){
  .brand-site.readership-page .page-hero{padding:16px 0 4px}
  .rx{padding:18px 26px 14px}
  .rx-top{padding-bottom:10px}
  .rx-total{margin-top:8px}
  .rx-total b{font-size:54px}
  .rx-total span{font-size:17px}
  .rx .rx-side .rx-facts{margin-top:12px;gap:5px}
  .rx-side .rx-facts li{padding:8px 12px}
  .rx-side .rx-facts b{font-size:22px}
  .rx-side .rx-facts span{font-size:14px}
  .rx-side .rx-article{grid-template-columns:96px minmax(0,1fr)}
  .rx-article>span{padding:8px 12px;font-size:13px}
  .rx h3{font-size:18px}
  .rx .rx-rows{margin-top:8px;gap:3px}
  .rx-rows li{padding:7px 12px;font-size:13.5px}
  .rx-main .rx-where{margin-top:14px}
  .rx .rx-chips{margin-top:8px}
  .rx-chips li{padding:6px 11px;font-size:13px}
  .rx-foot{margin-top:10px;font-size:12px}
}

/* ── Below the report ─────────────────────────────────────────────────── */
.rr-contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin:0}
.rr-contents>div{padding-block:20px;border-top:1px solid var(--line)}
.rr-contents dt{font-family:var(--display);font-size:20px;font-weight:500;line-height:1.35}
.rr-contents dd{margin:8px 0 0;color:var(--ink-2);font-size:16px;line-height:1.6}
.rr-contents a,.rr-research-note a{color:var(--accent-text);text-underline-offset:3px}
.rr-research-note{margin-top:28px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.rr-campaign-fit h2{max-width:22ch}
.rr-campaign-fit .body{margin-top:18px}
.rr-sequence{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:20px;list-style:none;padding:24px 0 0;margin:28px 0 0;border-top:1px solid var(--line)}
.rr-sequence li{display:flex;justify-content:space-between;gap:16px;font-family:var(--display);font-size:20px;font-weight:500;line-height:1.5}
.rr-sequence span{color:var(--brand-blue)}

@media(max-width:768px){
  .readership-page .page-hero{padding-bottom:20px}
  .rx-wide{width:calc(100% - 24px)}
  .rx{border-radius:22px}
  .rr-contents{grid-template-columns:minmax(0,1fr)}
  .rr-sequence{grid-template-columns:minmax(0,1fr);gap:16px}
  .rr-sequence li{justify-content:flex-start}
  .rr-sequence span{transform:rotate(90deg)}
}
@media(prefers-reduced-motion:reduce){.rx-article{transition:none}}

/* Bar labels: one size, one weight, white, in both languages. */
.rx-rows li{color:var(--rx-ink);font-weight:600}
.rx-rows li>span,.rx-rows li bdi,.rx-rows b{font-size:inherit;font-weight:600;font-family:inherit;color:var(--rx-ink)}
.rx-rows li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-rows li,.rx-pair .rx-rows li{font-size:15px}
@media(min-width:1000px) and (max-height:860px){.rx-rows li,.rx-pair .rx-rows li{font-size:13.5px}}

/* Desktop "See more": the one-screen sheet opens up to the full report. */
.rx-expand{display:none}
@media(min-width:1000px){
  .rx-expand{display:inline-flex;align-items:center;gap:10px;grid-column:1 / -1;justify-self:start;margin-top:20px;padding:8px 16px 8px 8px;border:1px solid var(--rx-line);border-radius:999px;background:var(--rx-soft);color:var(--rx-ink);font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;transition:background-color .2s ease}
  .rx-expand:hover{background:rgba(74,108,247,.28)}
  .rx-expand:focus-visible{outline:2px solid var(--rx-blue);outline-offset:3px}
  .rx-expand-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rx-blue);color:#fff;font-size:17px;line-height:1}
  .rx-expand-ic::before{content:"+"}
  .rx.is-open .rx-expand-ic::before{content:"\2212"}
  .rx-expand [data-less]{display:none}
  .rx.is-open .rx-expand [data-more]{display:none}
  .rx.is-open .rx-expand [data-less]{display:inline}
  .rx.is-open .rx-all{display:block}
  .rx.is-open .rx-main .rx-pair{display:grid;grid-column:1 / -1;grid-row:auto;margin-top:28px}
  .rx.is-open .rx-finding{display:block;grid-column:1 / -1}
  .rx.is-open .rx-more{display:block;grid-column:1 / -1}
}

/* Phones: the three fact tiles go; the big number carries the point. */
@media(max-width:999px){.rx .rx-facts{display:none}}
/* Opened report: rows 7-12 flush under the first six, toggle stays put, "See less" at the end. */
.rx-expand-end{display:none}
@media(min-width:1000px){
  .rx.is-open .rx-all{margin-top:4px}
  .rx.is-open .rx-all>summary{display:none}
  .rx.is-open .rx-expand-end{display:inline-flex;margin-top:28px}
}
@media(min-width:1000px){.rx-side .rx-expand{order:6;align-self:flex-start;margin-top:24px}}
/* Icons stand in for "people read it" and "Where they were"; the words stay for screen readers. */
.rx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rx-ic{display:block;flex:none}
.rx-total span{display:inline-flex;align-items:center;align-self:center;color:var(--rx-ink-3)}
.rx-total .rx-ic-eye{width:34px;height:34px}
.rx-where h3{display:flex;align-items:center;gap:8px;min-height:24px}
.rx-where .rx-ic-pin{width:24px;height:24px;color:var(--rx-blue-text)}
@media(min-width:1000px){.rx-total .rx-ic-eye{width:30px;height:30px}}
/* The pin sits on the same line as the cities. */
.rx-where{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 12px}
.rx-where h3{margin:9px 0 0;min-height:0}
@media(min-width:1000px){.rx-where h3{margin-top:4px}}
.rx-where .rx-chips{margin-top:0;flex:1 1 0;min-width:0}

/* ── Toggle styling shared by desktop and phones ───────────────────── */
.rx-expand{align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid var(--rx-line);border-radius:999px;background:var(--rx-soft);color:var(--rx-ink);font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;transition:background-color .2s ease}
.rx-expand:hover{background:rgba(74,108,247,.28)}
.rx-expand:focus-visible{outline:2px solid var(--rx-blue);outline-offset:3px}
.rx-expand-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rx-blue);color:#fff;font-size:17px;line-height:1}
.rx-expand-ic::before{content:"+"}
.rx.is-open .rx-expand-ic::before{content:"\2212"}
.rx-expand [data-less]{display:none}
.rx.is-open .rx-expand [data-more]{display:none}
.rx.is-open .rx-expand [data-less]{display:inline}

/* ── Phones: compact card first, full report on tap ─────────────────── */
@media(max-width:999px){
  .rx-side{display:flex;flex-direction:column}
  .rx-side .rx-hero,.rx-side .rx-hero>div{display:contents}
  .rx .rx-side h2{display:none}
  .rx-side .rx-article{order:1;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;margin-top:0;border-radius:12px}
  .rx-side .rx-article img{aspect-ratio:1.5/1;height:100%}
  .rx-side .rx-article>span{padding:10px 14px;font-size:14px}
  .rx-side .rx-read-label{display:none}
  .rx-side .rx-read-title{display:inline;font-weight:600;line-height:1.35}
  .rx-side .rx-total{order:2;margin-top:16px}
  .rx-total b{font-size:46px}
  .rx-total .rx-ic-eye{width:28px;height:28px}
  .rx-side .rx-expand{display:inline-flex;order:3;align-self:flex-start;margin-top:16px}
  .rx:not(.is-open) .rx-main,.rx:not(.is-open) .rx-finding,.rx:not(.is-open) .rx-more,.rx:not(.is-open) .rx-foot{display:none}
  .rx.is-open .rx-main{margin-top:8px}
  .rx.is-open .rx-expand-end{display:inline-flex;margin-top:24px}
  .rx.is-open .rx-all{margin-top:4px}
  .rx.is-open .rx-all>summary{display:none}
  .readership-page .page-hero .sub{max-width:34ch}
}

/* Light mode: a white sheet with dark type. */
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) .rx{--rx-line:rgba(0,0,0,.1);--rx-soft:rgba(0,0,0,.045);--rx-bg:#FFFFFF;--rx-ink:#0B0C10;--rx-ink-2:#2A2D35;--rx-ink-3:#4B4F5A;--rx-muted:#6F7380;--rx-faint:#8A8E99;--rx-blue-text:#3556E6;box-shadow:0 12px 40px rgba(0,0,0,.06)}
  html:not([data-theme="dark"]) .rx-rows li::before{background:rgba(74,108,247,.2)}
}
/* chosen from the header switch */
html[data-theme="light"] .rx{--rx-line:rgba(0,0,0,.1);--rx-soft:rgba(0,0,0,.045);--rx-bg:#FFFFFF;--rx-ink:#0B0C10;--rx-ink-2:#2A2D35;--rx-ink-3:#4B4F5A;--rx-muted:#6F7380;--rx-faint:#8A8E99;--rx-blue-text:#3556E6;box-shadow:0 12px 40px rgba(0,0,0,.06)}
html[data-theme="light"] .rx-rows li::before{background:rgba(74,108,247,.2)}