/* =====================================================================================================
   t-polls-hubs.css (hand-written, 20 Oct 2026): the Catalyse Pulse section pages - polls hub, topic pages and the
   Polls menu pages - in the wine-and-rose look. Loads after wine-polls.css (the homepage chrome + the approved poll
   components) and wine-base.css (shared wn- components and motion). Built by site-src/build_catalyse_polls_wine.py
   with site-src/wine_templates/polls-hubs.py.

   Prefix: ph- for this template. polls.py's own components (yg-, mb-, sc-) are re-dressed here under
   body.t-polls-hubs. Desktop 1440 only.
   ===================================================================================================== */

body.t-polls-hubs main.sk { --mb-ink: var(--ink); --mb-grey: var(--grey70); --mb-soft: var(--wn-rose-10); --mb-line: var(--line);
  --mb-track: var(--page); font-family: var(--text); }
:where(body.t-polls-hubs .sk) :where(ol, ul) { list-style: none; margin: 0; padding: 0; }
body.t-polls-hubs .sk :focus-visible { outline-color: var(--blue); }
body.t-polls-hubs .wn-hero :focus-visible, body.t-polls-hubs .ph-ticker :focus-visible, body.t-polls-hubs .ph-ask :focus-visible,
body.t-polls-hubs .ph-timeline :focus-visible { outline-color: var(--mint); }
body.t-polls-hubs [id^="ch-"] { scroll-margin-top: 160px; }

/* ---------- sections ---------- */
.ph-sec { position: relative; padding: 112px 0; }
.ph-sec--white { background: #fff; }
.ph-sec--page { background: var(--page); }
.ph-sec--rose { background: var(--wn-rose-10); }
.ph-sec--ink { background: var(--ink); overflow: hidden; }
.ph-sec .wn-head { margin-bottom: 48px; }
.ph-glow { position: absolute; z-index: 0; right: -10%; top: -20%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.38), rgba(232,70,111,.1) 55%, rgba(232,70,111,0)); }
.ph-sec > .wrap { position: relative; z-index: 1; }
.ph-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--wn-rose-10); color: var(--blue); }

/* ---------- hero (wn-hero: the homepage's wine) ---------- */
.ph-hero { padding: 168px 0 112px; }
.ph-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.ph-hero__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.ph-hero__vis { position: relative; min-width: 0; }
.ph-hero__solo { max-width: 920px; }
.ph-hero .wn-lead { max-width: 640px; }
.ph-mast { margin-top: 4px; max-width: 760px; }
.ph-h1 { max-width: 760px; }
.ph-kick { display: inline-flex; align-items: center; gap: 12px; min-height: 34px; font: 600 14px/18px var(--text); letter-spacing: .08em;
  text-transform: uppercase; color: var(--wn-k, var(--blue)); }
.ph-kick__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,179,199,.14); color: var(--mint); }
.wn-hero--rose .ph-kick__ic { background: #fff; color: var(--blue); box-shadow: 0 6px 18px rgba(142,26,71,.12); }
.ph-live { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ff5c8a; }
.ph-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff5c8a; opacity: 0; }
html.wm-on .ph-live::after { animation: ph-pulse 2.2s cubic-bezier(.16,1,.3,1) 0s 6; }
@keyframes ph-pulse { from { transform: scale(1); opacity: .75; } to { transform: scale(3.4); opacity: 0; } }
.ph-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ph-chapters { font: 600 15px/20px var(--text); color: var(--blue); }

/* topic icon tiles (the approved per-topic colours stay on the small app-icon tiles only) */
.ph-ti { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(10,2,8,.18); }
.ph-ti svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-ti--kick { width: 34px; height: 34px; border-radius: 11px; }
.ph-ti--kick svg { width: 18px; height: 18px; }

/* hero stats (wb.stat_row, dark): smaller in the hero */
.ph-facts { width: 100%; max-width: 640px; margin-top: 18px; }
.ph-facts .wn-stat { min-width: 0; padding: 22px 22px 0 0; gap: 6px; }
.ph-facts .wn-stat + .wn-stat { padding-left: 22px; }
.ph-facts .wn-stat b { font-size: 44px; letter-spacing: -1px; }
.ph-facts .wn-stat span { font-size: 14px; line-height: 20px; }

/* ---------- featured poll (hub) ---------- */
.ph-feat__card { position: relative; padding: 30px 32px 26px; border-radius: 28px; background: #fff; color: var(--body);
  box-shadow: 0 0 0 1px rgba(255,179,199,.25), 0 34px 90px rgba(10,2,8,.55);
  --wn-h: var(--ink); --wn-tx: var(--body); --wn-mut: var(--grey70); }
.ph-feat__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ph-badge { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 5px; border-radius: 999px; background: var(--wn-rose-10);
  font: 600 14px/1 var(--text); color: var(--blue70); transition: background-color .2s ease; }
.ph-badge:hover { background: var(--blue20); }
.ph-badge .ph-ti { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.ph-badge .ph-ti svg { width: 14px; height: 14px; }
.ph-feat__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.ph-feat__q { margin-top: 18px; font: 500 23px/30px var(--display); letter-spacing: -.3px; color: var(--ink); }
.ph-feat__q a { transition: color .2s ease; }
.ph-feat__q a:hover { color: var(--blue); }
.ph-feat__big { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
.ph-feat__big b { font: 500 68px/1 var(--display); letter-spacing: -2px; color: var(--purple); font-variant-numeric: tabular-nums; }
.ph-feat__big span { font: 500 21px/27px var(--display); letter-spacing: -.2px; color: var(--ink); }
.ph-bars { margin-top: 20px; gap: 11px; }
.ph-bars li { grid-template-columns: minmax(0, 176px) minmax(0, 1fr) 44px; gap: 14px; }
.ph-bars .wn-bars__l { font-size: 14.5px; }
.ph-bars .wn-bars__t { height: 10px; }
.ph-feat__sum { margin-top: 18px; font: 400 14.5px/22px var(--text); color: var(--grey70); }
.ph-feat__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 20px; }
.ph-feat__meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 13px/18px var(--text); color: var(--grey60); }
.ph-dl { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--text); color: var(--blue); transition: color .2s ease; }
.ph-dl::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8.5M4.5 7 8 10.5 11.5 7M2.5 13.5h11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v8.5M4.5 7 8 10.5 11.5 7M2.5 13.5h11'/%3E%3C/svg%3E") center / contain no-repeat; }
.ph-dl:hover { color: var(--blue70); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- headline ticker ---------- */
.ph-ticker { position: relative; z-index: 2; background: var(--ink); color: #fff; border-top: 1px solid rgba(255,179,199,.16);
  border-bottom: 1px solid rgba(255,179,199,.16); }
.ph-ticker__in { display: flex; align-items: center; gap: 24px; height: 80px; padding: 0 7%; max-width: 1980px; margin: 0 auto; }
.ph-ticker__lab { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 32px; padding-right: 24px; border-right: 1px solid rgba(255,179,199,.24);
  font: 600 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.ph-ticker__mq { flex: 1; min-width: 0; }
.ph-ticker__mq .wn-marquee__track { gap: 0; align-items: center; }
.ph-tick { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 36px 8px 0; white-space: nowrap; font: 400 16px/22px var(--text);
  color: rgba(255,255,255,.86); transition: color .2s ease; }
.ph-tick + .ph-tick, .ph-tick:first-child { position: relative; }
.ph-tick::after { content: ""; width: 5px; height: 5px; margin-left: 26px; align-self: center; border-radius: 50%; background: rgba(255,179,199,.5); }
.ph-tick b { font: 600 19px/22px var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.ph-tick em { font: 600 12px/16px var(--text); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.ph-tick:hover span { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
html:not(.wm-on) .ph-ticker__mq { overflow-x: auto; }
.ph-ticker__btn { display: none; flex: none; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,179,199,.36); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
html.wm-on .ph-ticker__btn { display: grid; }
.ph-ticker__btn:hover { background: rgba(255,255,255,.08); border-color: var(--mint); }
.ph-pause { position: relative; width: 12px; height: 12px; }
.ph-pause::before, .ph-pause::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 1px; background: currentColor; }
.ph-pause::before { left: 1px; } .ph-pause::after { right: 1px; }
.ph-ticker__btn[aria-pressed="true"] .ph-pause::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.ph-ticker__btn[aria-pressed="true"] .ph-pause::after { display: none; }
html.wm-on .wn-marquee.is-looping.is-paused .wn-marquee__track { animation-play-state: paused; }

/* ---------- topic tiles ---------- */
.ph-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; }
.ph-tile-li.is-wide { grid-column: span 2; }
.ph-tile { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 316px; padding: 28px 28px 30px;
  border-radius: 28px; background: #fff; border: 1px solid var(--line); color: var(--body); overflow: hidden;
  transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
.ph-tile:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.ph-tile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ph-tile__n { font: 600 13px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.ph-tile__t { font: 500 32px/38px var(--display); letter-spacing: -.6px; color: var(--ink); }
.ph-tile__d { font: 400 15px/22px var(--text); color: var(--grey70); }
.ph-tile__hl { display: block; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font: 500 17px/23px var(--display); color: var(--ink); }
.ph-tile__hl + .ph-tile__hl { margin-top: 12px; }
.ph-tile__hl strong { font-weight: 600; color: var(--purple); }
.ph-tile__hl small { display: block; margin-top: 4px; font: 400 13.5px/19px var(--text); color: var(--grey60); }
.ph-tile__go { position: absolute; right: 26px; top: 30px; color: var(--blue); opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s var(--wn-ease-out); }
.ph-tile:hover .ph-tile__go { opacity: 1; transform: none; }
.ph-tile:hover .ph-tile__n { opacity: 0; transition: opacity .2s ease; }
/* the two biggest topics: the homepage's glass card */
.ph-tile--wide { background: var(--wn-glass-bg); border-color: rgba(255,179,199,.28); color: #fff;
  box-shadow: 0 0 0 1px rgba(232,70,111,.12), 0 0 38px rgba(232,70,111,.16), inset 0 0 46px rgba(232,70,111,.10); }
.ph-tile--wide .ph-tile__t { font-size: 40px; line-height: 46px; color: #fff; }
.ph-tile--wide .ph-tile__d { color: rgba(255,255,255,.78); }
.ph-tile--wide .ph-tile__n, .ph-tile--wide .ph-tile__go { color: var(--mint); }
.ph-tile--wide .ph-tile__hl { border-top-color: rgba(255,179,199,.22); color: #fff; }
.ph-tile--wide .ph-tile__hl strong { color: var(--mint); }
.ph-tile--wide .ph-tile__hl small { color: rgba(255,255,255,.7); }
.ph-tile--wide:hover { border-color: rgba(255,179,199,.5); }
.ph-tile--wide .ph-tile__hl { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.ph-tile--wide .ph-tile__hl small { grid-column: 1 / -1; }
/* compact tiles (topic pages: more topics) */
.ph-tiles--compact { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.ph-tile--compact { min-height: 240px; padding: 24px 22px 24px; }
.ph-tile--compact .ph-tile__t { font-size: 26px; line-height: 32px; }
.ph-tile--compact .ph-tile__hl { font-size: 15.5px; line-height: 21px; }
.ph-tile--compact .ph-tile__go { right: 20px; top: 26px; }

/* ---------- polls.py's lists on the page rose ---------- */
.ph-body .wn-head { margin-bottom: 28px; }
.ph-pills { margin-bottom: 8px; }
body.t-polls-hubs .sk .mb-pills { justify-content: flex-start; gap: 8px; margin: 0; }
body.t-polls-hubs .sk .mb-pills a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: 600 15px/1 var(--text); color: var(--ink); transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
body.t-polls-hubs .sk .mb-pills a:hover { border-color: var(--blue); color: var(--blue); }
body.t-polls-hubs .sk .mb-pills a span { font-weight: 400; color: var(--grey60); }
body.t-polls-hubs .sk .mb-pills a[aria-current] { border-color: var(--ink); background: var(--ink); color: #fff; }
body.t-polls-hubs .sk .mb-pills a[aria-current] span { color: rgba(255,255,255,.7); }
/* on the wine (topic heroes) */
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a { border-color: rgba(255,179,199,.3); background: rgba(255,255,255,.07); color: #fff; }
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a:hover { border-color: rgba(255,179,199,.62); background: rgba(255,255,255,.14); }
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a svg { color: var(--mint) !important; }
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a span { color: rgba(255,255,255,.66); }
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a[aria-current] { border-color: #fff; background: #fff; color: var(--ink); }
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a[aria-current] svg { color: var(--purple) !important; }
body.t-polls-hubs .sk .ph-pills--dark .mb-pills a[aria-current] span { color: var(--grey60); }

body.t-polls-hubs .sk .yg-gh { display: flex; align-items: baseline; gap: 16px; margin: 64px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
body.t-polls-hubs .sk .yg-gh .yg-h2 { font: 500 32px/40px var(--display); letter-spacing: -.6px; color: var(--ink); }
body.t-polls-hubs .sk .yg-gh span { font: 400 16px/22px var(--text); color: var(--grey70); }
body.t-polls-hubs .sk .yg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
body.t-polls-hubs .sk .ph-body > .wrap > .yg-grid:first-child, body.t-polls-hubs .sk .ph-body .wn-head + .yg-grid { margin-top: 0; }
body.t-polls-hubs .sk .ph-body > .wrap > .yg-gh:first-child, body.t-polls-hubs .sk .ph-readnow > .yg-gh:first-child { margin-top: 0; }
.ph-empty .ph-pills { margin-top: 22px; }
body.t-polls-hubs .sk .sc { background: #efe2e8; }
body.t-polls-hubs .sk .sc:hover { background: #e7d3dc; }
body.t-polls-hubs .sk .sc:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
body.t-polls-hubs .sk .sc-opt.is-top { border-color: var(--purple); background: var(--cyan20); }
/* This week: numbered topic headings */
.ph-body--numbered { counter-reset: phg; }
body.t-polls-hubs .sk .ph-body--numbered .yg-gh::before { counter-increment: phg; content: counter(phg, decimal-leading-zero);
  align-self: center; margin-right: 4px; font: 500 20px/1 var(--display); color: var(--purple); }

/* ---------- method strip (hub) ---------- */
.ph-hows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ph-how { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 30px 28px 72px; border-radius: 24px;
  background: var(--page); color: var(--body); transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out), background-color .3s ease; }
.ph-how:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); background: #fff; }
.ph-how .ph-ico { background: #fff; margin-bottom: 8px; }
.ph-how b { font: 600 20px/26px var(--text); letter-spacing: -.2px; color: var(--ink); }
.ph-how > span:not(.ph-ico):not(.ph-how__go) { font: 400 16px/25px var(--text); color: var(--grey70); }
.ph-how__go { position: absolute; left: 28px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--text); color: var(--blue); }
.ph-how__go svg { transition: transform .35s var(--wn-ease-out); }
.ph-how:hover .ph-how__go svg { transform: translateX(5px); }

/* ---------- ask your own question (wine band) ---------- */
.ph-ask { background: var(--wn-hero-bg); color: #fff; overflow: hidden; }
.ph-ask__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.ph-ask__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ph-ask__txt .wn-h2 { max-width: 720px; }
.ph-ask__more { max-width: 620px; }
.ph-ask__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 0; }
.ph-ask__stats .wn-stat, .ph-ask__stats .wn-stat + .wn-stat { min-width: 0; padding: 28px 28px 26px; border: 1px solid rgba(255,179,199,.24); border-radius: 22px;
  background: rgba(255,255,255,.05); }
.ph-ask__stats .wn-stat b { font-size: 56px; letter-spacing: -1.4px; }
.ph-ask__stats .wn-stat span { font-size: 15px; line-height: 22px; }

/* ---------- more from our polls ---------- */
.ph-mcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ph-mcard { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 184px; padding: 24px 24px 60px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line); color: var(--body);
  transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
.ph-mcard:hover { transform: translateY(-5px); box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.ph-mcard .ph-ico { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 6px; }
.ph-mcard b { font: 500 21px/27px var(--display); letter-spacing: -.2px; color: var(--ink); }
.ph-mcard > span:not(.ph-ico):not(.ph-mcard__go) { font: 400 15px/22px var(--text); color: var(--grey70); }
.ph-mcard__go { position: absolute; left: 24px; bottom: 22px; color: var(--blue); transition: transform .35s var(--wn-ease-out); }
.ph-mcard:hover .ph-mcard__go { transform: translateX(6px); }

/* ---------- topic hero: the fan of headlines ---------- */
.ph-fan { display: flex; flex-direction: column; gap: 18px; }
.ph-fan li:nth-child(2) { margin-left: 56px; }
.ph-fan li:nth-child(3) { margin-left: 112px; }
.ph-hl { position: relative; display: grid; grid-template-columns: 40px auto minmax(0, 1fr); grid-template-areas: "ic q q" "big big lab" "go go go";
  column-gap: 14px; row-gap: 8px; align-items: center; padding: 22px 26px 20px; border-radius: 24px; background: #fff; color: var(--body);
  box-shadow: 0 0 0 1px rgba(255,179,199,.22), 0 26px 60px rgba(10,2,8,.45); transition: transform .45s var(--wn-ease-out); }
.ph-fan li:nth-child(1) .ph-hl { transform: rotate(-1.2deg); }
.ph-fan li:nth-child(3) .ph-hl { transform: rotate(1deg); }
.ph-hl:hover, .ph-fan li .ph-hl:hover { transform: translateY(-4px) rotate(0deg); }
.ph-hl .yg-ic { grid-area: ic; width: 40px; height: 40px; }
.ph-hl__q { grid-area: q; font: 600 15.5px/21px var(--text); color: var(--ink); }
.ph-hl b { grid-area: big; display: inline-block; font: 500 52px/1 var(--display); letter-spacing: -1.4px; color: var(--purple); font-variant-numeric: tabular-nums; }
.ph-hl__lab { grid-area: lab; justify-self: start; max-width: 230px; font: 500 17px/22px var(--display); color: var(--ink); }
.ph-hl__go { grid-area: go; display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line);
  font: 600 14px/18px var(--text); color: var(--blue); }
.ph-hl__go svg { width: 16px; height: 16px; }

/* short topics (one or two questions): the cards and, next to them, how the groups answered the lead question */
.ph-duo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: start; }
body.t-polls-hubs .sk .ph-duo .yg-grid { grid-template-columns: repeat(var(--n, 1), 290px); margin-top: 0; }
.ph-duo .ph-xcard { max-width: 640px; }
.ph-duo .ph-xcard .mb-scroll { overflow-x: auto; }
body.t-polls-hubs .sk .ph-duo .mb-x { width: 100%; table-layout: fixed; }
body.t-polls-hubs .sk .ph-duo .mb-x thead th:first-child { width: 38%; }

/* empty topics: the icon with rings, the honest empty block */
.ph-orb { position: relative; width: 420px; height: 420px; margin-left: auto; display: grid; place-items: center; }
.ph-orb__r { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,179,199,.28); }
.ph-orb__r.r2 { inset: 60px; border-color: rgba(255,179,199,.38); background: radial-gradient(closest-side, rgba(232,70,111,.18), rgba(232,70,111,0)); }
.ph-orb__r.r3 { inset: 120px; border-color: rgba(255,179,199,.5); }
html.wm-on .ph-orb__r.r1 { animation: ph-ring 5s ease-in-out 0s 3 alternate; }
@keyframes ph-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.06); opacity: .6; } }
.ph-orb__ic { width: 128px; height: 128px; border-radius: 36px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 30px 70px rgba(10,2,8,.55); }
.ph-orb__ic svg { width: 60px; height: 60px; stroke-width: 1.5; }
.ph-empty { margin-bottom: 8px; }
body.t-polls-hubs .sk .yg-empty { max-width: 860px; margin: 0; gap: 26px; padding: 36px 40px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
body.t-polls-hubs .sk .yg-empty .yg-h2 { font: 500 32px/40px var(--display); letter-spacing: -.6px; color: var(--ink); }
body.t-polls-hubs .sk .yg-empty p { margin-top: 10px; font: 400 17px/27px var(--text); color: var(--grey70); }
body.t-polls-hubs .sk .yg-empty + .mb-pills { margin-top: 22px; }
.ph-readnow { margin-top: 24px; }

/* polls.py buttons in wine / rose */
body.t-polls-hubs .sk .mb-btn { height: 44px; padding: 0 20px; border-radius: 999px; background: var(--wn-rose-10); font: 600 15px/1 var(--text); color: var(--blue70);
  transition: background-color .2s ease, color .2s ease; }
body.t-polls-hubs .sk .mb-btn:hover { background: var(--blue20); }
body.t-polls-hubs .sk .mb-btn--dark { background: var(--purple); color: #fff; }
body.t-polls-hubs .sk .mb-btn--dark:hover { background: var(--purple70, #b02a4e); }
body.t-polls-hubs .sk .yg-ic { width: 40px; height: 40px; border-radius: 12px; }

/* ---------- This week: the issue cover ---------- */
.ph-cover__in { padding: 32px 34px 28px; border-radius: 28px; background: #fff; color: var(--body);
  box-shadow: 0 0 0 1px rgba(255,179,199,.25), 0 34px 90px rgba(10,2,8,.55); }
.ph-cover__k { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid var(--ink);
  font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.ph-cover__date { margin-top: 18px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); }
.ph-cover__big { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; }
.ph-cover__big b { font: 500 120px/1 var(--display); letter-spacing: -4px; color: var(--purple); font-variant-numeric: tabular-nums; }
.ph-cover__big span { max-width: 190px; font: 500 18px/24px var(--display); color: var(--ink); }
.ph-cover__bars { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ph-cover__bars li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 24px; gap: 14px; align-items: center; font: 400 14.5px/20px var(--text); color: var(--ink); }
.ph-cover__bars .t { height: 10px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.ph-cover__bars .t i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan));
  transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
.ph-cover__bars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-cover__foot { margin-top: 16px; font: 400 13px/18px var(--text); color: var(--grey60); }

/* ---------- Trackers: first-readings board + the timeline ---------- */
.ph-board { padding: 28px 30px 18px; border-radius: 28px; background: var(--wn-glass-bg); border: 1px solid rgba(255,179,199,.28);
  box-shadow: 0 0 0 1px rgba(232,70,111,.12), 0 0 38px rgba(232,70,111,.18), 0 30px 80px rgba(10,2,8,.5); }
.ph-board__k, .ph-pod__k { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,179,199,.22);
  font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.ph-board li a, .ph-pod li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px 0;
  border-bottom: 1px solid rgba(255,179,199,.14); color: #fff; transition: background-color .2s ease; }
.ph-board li:last-child a, .ph-pod li:last-child a { border-bottom: 0; }
.ph-board__t b, .ph-pod__t b { display: block; font: 600 15.5px/21px var(--text); color: #fff; }
.ph-board__t small, .ph-pod__t small { display: block; margin-top: 2px; font: 400 13.5px/19px var(--text); color: rgba(255,255,255,.72); }
.ph-board strong, .ph-pod strong { font: 500 36px/1 var(--display); letter-spacing: -.8px; color: var(--mint); font-variant-numeric: tabular-nums; }
.ph-board li a:hover .ph-board__t b, .ph-pod li a:hover .ph-pod__t b { text-decoration: underline; text-underline-offset: 4px; }
.ph-timeline { padding: 104px 0 112px; }
.ph-timeline .wn-head { margin-bottom: 40px; }
.ph-wave { display: block; width: 100%; height: 120px; overflow: visible; }
.ph-wave__axis { stroke: rgba(255,179,199,.35); stroke-width: 2; }
.ph-wave__ring { fill: none; stroke: rgba(255,179,199,.3); stroke-width: 1.5; }
.ph-wave__next { stroke: var(--mint); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
.ph-wave__now { fill: #ff5c8a; stroke: #ffb3c7; stroke-width: 4; }
.ph-wave__then { fill: var(--ink); stroke: var(--mint); stroke-width: 3; }
.ph-tl__labels { display: flex; justify-content: space-between; margin-top: 18px; }
.ph-tl__labels p { display: flex; flex-direction: column; gap: 4px; }
.ph-tl__labels p + p { text-align: right; }
.ph-tl__labels b { font: 500 24px/30px var(--display); color: #fff; }
.ph-tl__labels span { font: 400 16px/22px var(--text); color: rgba(255,255,255,.75); }

/* polls.py tracker + ranking cards on the page rose */
body.t-polls-hubs .sk .yg-rks, body.t-polls-hubs .sk .yg-tks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 0; }
body.t-polls-hubs .sk .yg-rk, body.t-polls-hubs .sk .yg-tk { padding: 26px 28px 24px; border-radius: 24px; border: 1px solid var(--line); background: #fff;
  color: var(--body); transition: box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
body.t-polls-hubs .sk .yg-rk:hover, body.t-polls-hubs .sk .yg-tk:hover { border-color: var(--wn-rose-20); box-shadow: var(--wn-shadow); }
body.t-polls-hubs .sk .yg-rk .hd b, body.t-polls-hubs .sk .yg-tk .hd b { font: 600 17px/23px var(--text); color: var(--ink); }
body.t-polls-hubs .sk .yg-rk .hd small, body.t-polls-hubs .sk .yg-tk .hd small { font-size: 13px; color: var(--grey60); }
body.t-polls-hubs .sk .yg-rk ol { gap: 10px; margin-top: 20px; }
body.t-polls-hubs .sk .yg-rk li { grid-template-columns: 20px minmax(0, 140px) minmax(0, 1fr) 40px; font: 400 14.5px/20px var(--text); color: var(--ink); }
body.t-polls-hubs .sk .yg-rk .n { font-weight: 600; color: var(--blue); }
body.t-polls-hubs .sk .yg-rk .t { height: 10px; background: var(--wn-rose-10); }
body.t-polls-hubs .sk .yg-rk .t i { background: var(--wn-rose-20) !important; transform-origin: 0 50%; }
body.t-polls-hubs .sk .yg-rk li:first-child .t i { background: linear-gradient(90deg, var(--purple), var(--cyan)) !important; }
body.t-polls-hubs .sk .yg-rk li b { font-weight: 600; }
body.t-polls-hubs .sk .yg-rk .go { padding-top: 18px; font-size: 14.5px; color: var(--blue); }
body.t-polls-hubs .sk .yg-tk .big { margin-top: 18px; font: 500 60px/1 var(--display); letter-spacing: -1.6px; color: var(--purple); font-variant-numeric: tabular-nums; }
body.t-polls-hubs .sk .yg-tk .lab { margin-top: 6px; font: 500 18px/24px var(--display); color: var(--ink); }
body.t-polls-hubs .sk .yg-tk .spark { height: 44px; margin-top: 16px; }
body.t-polls-hubs .sk .yg-tk .spark line { stroke: var(--line); stroke-width: 2; }
body.t-polls-hubs .sk .yg-tk .spark line.dash { stroke: var(--wn-rose-20); stroke-width: 2; }
body.t-polls-hubs .sk .yg-tk .spark circle { fill: var(--purple) !important; }
body.t-polls-hubs .sk .yg-tk .k { padding-top: 16px; font: 400 13.5px/19px var(--text); color: var(--grey60); }

/* ---------- Rankings: the top picks ---------- */
.ph-pod { padding: 28px 30px 16px; border-radius: 28px; background: var(--wn-glass-bg); border: 1px solid rgba(255,179,199,.28);
  box-shadow: 0 0 0 1px rgba(232,70,111,.12), 0 0 38px rgba(232,70,111,.18), 0 30px 80px rgba(10,2,8,.5); }
.ph-pod li a { grid-template-columns: 54px 40px minmax(0, 1fr) auto; padding: 13px 0; }
.ph-pod__no { justify-self: start; padding: 4px 8px; border-radius: 999px; background: rgba(255,179,199,.16); font: 600 11.5px/14px var(--text);
  letter-spacing: .04em; color: var(--mint); white-space: nowrap; }
.ph-pod strong { font-size: 30px; }

/* ---------- Daily question: polls.py's daily block as the hero card ---------- */
body.t-polls-hubs .sk .ph-daily .yg-dailies { margin: 0; max-width: none; }
body.t-polls-hubs .sk .ph-daily .yg-dailies.two { grid-template-columns: 1fr; }
body.t-polls-hubs .sk .ph-daily .yg-daily { padding: 30px 32px 28px; border: 0; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255,179,199,.25), 0 34px 90px rgba(10,2,8,.55); }
body.t-polls-hubs .sk .yg-daily .hd { font: 400 13.5px/18px var(--text); color: var(--grey70); }
body.t-polls-hubs .sk .yg-daily h2 { margin-top: 16px; font: 500 25px/32px var(--display); letter-spacing: -.4px; color: var(--ink); }
body.t-polls-hubs .sk .yg-daily .sum { margin: 10px 0 18px; font: 400 15px/23px var(--text); color: var(--grey70); }
body.t-polls-hubs .sk .mb-bars { gap: 9px; }
body.t-polls-hubs .sk .mb-bars li { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 44px; gap: 14px; min-height: 26px; }
body.t-polls-hubs .sk .mb-bars .l { font: 400 14.5px/20px var(--text); color: var(--ink); }
body.t-polls-hubs .sk .mb-bars .t { height: 10px; background: var(--page); }
body.t-polls-hubs .sk .mb-bars .t i { background: var(--purple); transform-origin: 0 50%; }
body.t-polls-hubs .sk .mb-bars li.tail .l, body.t-polls-hubs .sk .mb-bars li.tail .v { color: var(--grey60); }
body.t-polls-hubs .sk .mb-bars li.tail .t i { background: var(--ph); }
body.t-polls-hubs .sk .mb-bars .v { font: 600 14.5px/20px var(--text); color: var(--ink); }
body.t-polls-hubs .sk .yg-daily .yg-ctas { flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- handbook pages (How we run polls, Sample sizes & weighting, Use our data) ---------- */
.ph-hero--doc { padding-bottom: 104px; }
.ph-card__k { font: 600 12.5px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.ph-rules, .ph-xcard, .ph-csv, .ph-formcard { padding: 30px 32px 28px; border-radius: 28px; background: #fff; color: var(--body);
  box-shadow: 0 30px 70px rgba(142,26,71,.16), 0 0 0 1px var(--line); --wn-h: var(--ink); }
.ph-rules ul { display: grid; gap: 4px; margin-top: 16px; }
.ph-rules li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line);
  font: 400 17px/25px var(--text); color: var(--ink); }
.ph-rules__n { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--wn-rose-10);
  font: 500 24px/1 var(--display); color: var(--purple); }
.ph-xcard__q { margin: 12px 0 14px; font: 500 20px/27px var(--display); color: var(--ink); }
.ph-xcard__q a:hover { color: var(--blue); }
.ph-xcard__q span { font: 400 15px/22px var(--text); color: var(--grey70); }
body.t-polls-hubs .sk .ph-xcard .mb-x thead th { padding: 0 6px 8px; font: 600 13px/1.25 var(--text); color: var(--ink); }
body.t-polls-hubs .sk .ph-xcard .mb-x thead th.all, body.t-polls-hubs .sk .ph-xcard .mb-x thead th sup { color: var(--blue); }
body.t-polls-hubs .sk .ph-xcard .mb-x tbody th { font: 400 14px/1.3 var(--text); color: var(--ink); }
body.t-polls-hubs .sk .ph-xcard .mb-x td { height: 36px; border-radius: 10px; background: var(--page); font: 400 14px/1 var(--text); color: var(--ink); }
body.t-polls-hubs .sk .ph-xcard .mb-x td.all { background: #f9dde6; font-weight: 700; }
body.t-polls-hubs .sk .ph-xcard .mb-x td.lo { color: var(--grey60); }
body.t-polls-hubs .sk .ph-xcard .mb-x td.na { background: #fbf8f9; color: var(--grey60); }
.ph-xcard__key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 400 13.5px/19px var(--text); color: var(--grey70); }
.ph-xcard__key b { color: var(--blue); }
.ph-csv { padding: 0 0 24px; overflow: hidden; }
.ph-csv__bar { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--wn-rose-10);
  font: 600 14px/18px var(--text); color: var(--ink); }
.ph-csv__ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #fff; color: var(--blue); }
.ph-csv table { width: calc(100% - 48px); margin: 14px 24px 0; border-collapse: collapse; font: 400 14px/19px var(--text); color: var(--ink); }
.ph-csv th { padding: 8px 10px; border-bottom: 2px solid var(--ink); text-align: left; font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; }
.ph-csv td { padding: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ph-csv td:last-child, .ph-csv th:last-child { text-align: right; }
.ph-csv tbody tr:nth-child(odd) td { background: #fcf8fa; }
.ph-csv__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 24px 0;
  font: 400 13.5px/19px var(--text); color: var(--grey70); }
/* the chapters */
.ph-docsec { padding-top: 96px; }
.ph-doc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 96px; align-items: start; }
.ph-toc { position: sticky; top: 156px; }
.ph-toc__k { margin-bottom: 14px; font: 600 12.5px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.ph-toc ol { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.ph-toc a { position: relative; display: flex; gap: 12px; padding: 9px 0 9px 18px; font: 500 15px/21px var(--text); color: var(--grey70); transition: color .2s ease; }
.ph-toc a span { font-variant-numeric: tabular-nums; color: var(--grey60); }
.ph-toc a::before { content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px; width: 2px; background: var(--purple); transform: scaleY(0);
  transition: transform .3s var(--wn-ease-out); }
.ph-toc a:hover, .ph-toc a.is-current { color: var(--ink); }
.ph-toc a.is-current span { color: var(--purple); }
.ph-toc a.is-current::before { transform: scaleY(1); }
.ph-ch { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 40px 0 44px; border-top: 1px solid var(--line); }
.ph-ch:first-child { padding-top: 0; border-top: 0; }
.ph-ch__n { font: 500 56px/1 var(--display); letter-spacing: -1.6px; color: var(--wn-rose-20); font-variant-numeric: tabular-nums; }
.ph-ch h2 { font: 500 32px/40px var(--display); letter-spacing: -.6px; color: var(--ink); }
.ph-ch__b { margin-top: 14px; max-width: 760px; }
.ph-ch__b p { font: 400 19px/31px var(--text); color: var(--body); }
.ph-ch__b p + p { margin-top: 14px; }
.ph-ch__b a { font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.ph-ch__b a:hover { color: var(--blue70); }

/* ---------- Get polls by email ---------- */
.ph-formcard .ph-card__k { margin-bottom: 4px; }
body.t-polls-hubs .sk .ph-formcard .yg-form { max-width: none; margin: 14px 0 0; padding: 0; border-radius: 0; background: transparent; gap: 18px; }
body.t-polls-hubs .sk .yg-form label > span, body.t-polls-hubs .sk .yg-form legend { font: 600 14px/18px var(--text); color: var(--ink); }
body.t-polls-hubs .sk .yg-form input[type="email"] { height: 54px; padding: 0 18px; border: 1px solid var(--divider); border-radius: 14px; font: 400 16px var(--text);
  color: var(--ink); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
body.t-polls-hubs .sk .yg-form input[type="email"]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(180,35,90,.14); outline: none; }
body.t-polls-hubs .sk .yg-form input[type="email"]::placeholder { color: var(--grey60); }
body.t-polls-hubs .sk .yg-form .ck { font: 400 15.5px/22px var(--text); color: var(--ink); }
body.t-polls-hubs .sk .yg-form .ck input { width: 18px; height: 18px; accent-color: var(--purple); }
body.t-polls-hubs .sk .yg-form button { height: 54px; padding: 0 28px; font: 600 17px/1 var(--text); }
body.t-polls-hubs .sk .yg-form .note { padding: 12px 14px; border-radius: 12px; background: var(--wn-rose-10); font: 400 14.5px/21px var(--text); color: var(--blue70); }
/* the sign-up card (signup_card): 21 Oct 2026 a request to our team through /talk-to-sales/; 22 Oct 2026 a real form
   again (.ph-signup__form, the .yg-form rules above): wine-forms.js posts it to /forms/send.php, which emails info@ */
.ph-signup__t { margin-top: 14px; font: 400 18px/28px var(--text); color: var(--ink); }
/* the countries as a plain list, not boxes (they are not choices on this page) */
.ph-signup__mk { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ph-signup__mk li { display: flex; align-items: center; font: 500 16px/22px var(--text); color: var(--ink); }
.ph-signup__go { margin-top: 24px; }
body.t-polls-hubs .sk .ph-signup .ph-signup__form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
body.t-polls-hubs .sk .ph-signup__form label > span { margin-bottom: 8px; }
body.t-polls-hubs .sk .ph-signup__form input[type="email"] { width: 100%; }
body.t-polls-hubs .sk .ph-signup__form fieldset { gap: 10px 26px; }
body.t-polls-hubs .sk .ph-signup__form legend { margin-bottom: 8px; }
body.t-polls-hubs .sk .ph-signup__form .ck { gap: 10px; font: 500 16px/22px var(--text); cursor: pointer; }
body.t-polls-hubs .sk .ph-signup__form .ck .ph-mk { margin-right: 0; }
body.t-polls-hubs .sk .ph-signup__form button { justify-self: start; }
body.t-polls-hubs .sk .ph-signup__form .wf-status, body.t-polls-hubs .sk .ph-signup__form .wf-sent:target,
body.t-polls-hubs .sk .ph-signup__form .wf-privacy { margin-top: 0; }
.ph-nl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; align-items: center; }
.ph-nl__txt .wn-head { margin-bottom: 32px; }
.ph-nlcards { display: grid; gap: 16px; }
.ph-nlcard { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding: 24px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.ph-nlcard .ph-ico { grid-row: span 2; }
.ph-nlcard h2 { font: 600 19px/25px var(--text); color: var(--ink); }
.ph-nlcard p { margin-top: 6px; font: 400 16px/25px var(--text); color: var(--grey70); }
.ph-mailfig { margin: 0; }
.ph-mail { border-radius: 24px; background: #fff; box-shadow: 0 40px 90px rgba(142,26,71,.22), 0 0 0 1px var(--line); overflow: hidden; }
.ph-mail__bar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--ink); font: 600 13px/16px var(--text); color: rgba(255,255,255,.86); }
.ph-mail__bar .dots { display: inline-flex; gap: 6px; }
.ph-mail__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,179,199,.45); }
.ph-mail__body { padding: 30px 32px 32px; }
.ph-mail__k { font: 600 12.5px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.ph-mail__big { margin-top: 10px; font: 500 28px/35px var(--display); letter-spacing: -.5px; color: var(--ink); }
.ph-mail__big b { font-weight: 600; color: var(--purple); }
.ph-mail__sum { margin-top: 10px; font: 400 15.5px/24px var(--text); color: var(--grey70); }
.ph-mail__list { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.ph-mail__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ph-mail__list b { grid-row: span 2; font: 500 26px/1.1 var(--display); color: var(--purple); }
.ph-mail__list span { font: 500 16px/22px var(--display); color: var(--ink); }
.ph-mail__list small { font: 400 13.5px/19px var(--text); color: var(--grey60); }
.ph-mail__btn { display: inline-flex; align-items: center; height: 44px; margin-top: 22px; padding: 0 22px; border-radius: 999px; background: var(--purple);
  font: 600 15px/1 var(--text); color: #fff; }
.ph-mailfig figcaption { margin-top: 16px; font: 400 14px/20px var(--text); color: var(--grey70); }

/* ---------- full answer labels (review, 21 Oct 2026: cards and rankings cut answers and questions off with "...",
   e.g. "I have never taken one, but...", "Amazon Prime Vid...", "Meta AI (in Whats..."). On these pages a card grows
   with its text (the cards in a row keep one height), an answer may take two lines, a question five; the ranking
   label column is wider and may take two lines. polls.CSS (the poll pages) is unchanged. ---------- */
body.t-polls-hubs .sk .yg-grid .sc { height: auto; min-height: 300px; }
body.t-polls-hubs .sk .yg-grid .sc-screen { height: 100%; min-height: 262px; }
body.t-polls-hubs .sk .sc-q { -webkit-line-clamp: 5; }
body.t-polls-hubs .sk .sc-opt { height: auto; min-height: 30px; padding: 6px 12px; border-radius: 15px; line-height: 1.3; }
body.t-polls-hubs .sk .sc-opt span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
body.t-polls-hubs .sk .yg-rk li { grid-template-columns: 20px minmax(0, 176px) minmax(0, 1fr) 40px; }
body.t-polls-hubs .sk .yg-rk .l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 19px; }
/* topics without questions of their own show every other topic: six compact tiles go in two rows of three */
.ph-tiles--compact.ph-tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ... and next to one or two related polls, the answers of the first one (answers about the topic in bold) */
.ph-acard .ph-bars { margin-top: 6px; }
.ph-acard .ph-bars li { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 44px; }
.ph-acard .ph-bars li.is-match .wn-bars__l { font-weight: 700; color: var(--blue); }
.ph-acard .ph-bars li.tail .wn-bars__l, .ph-acard .ph-bars li.tail .wn-bars__v { color: var(--grey60); }

/* =====================================================================================================
   ALL COUNTRIES (/polls/..., 21 Oct 2026): the US and the UK side by side. Every rule below uses class names that only
   the All-countries pages carry (ph-mk, ph-mkb, ph-duel, ph-door, ph-bf, ph-pr, ph-sbs, ph-cover2, ph-pod2,
   ph-board--all, ph-tile--all, ph-dailies2, ph-duorow) or body.m-all, so the US and UK pages do not change.
   ===================================================================================================== */

/* ---------- the country chips: "US" rose, "UK" plum with a rose edge (both read on white and on the wine) ---------- */
.ph-mk { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 22px; min-width: 30px; margin-right: 10px;
  padding: 0 8px; border-radius: 999px; font: 700 11.5px/1 var(--text); letter-spacing: .06em; font-style: normal; text-transform: uppercase;
  vertical-align: 2px; }
.ph-mk--us { background: #b4235a; color: #fff; }
.ph-mk--gb { background: #33102c; color: #ffb3c7; box-shadow: inset 0 0 0 1px rgba(255,179,199,.5); }
.ph-mk--sm { height: 18px; min-width: 24px; margin-right: 7px; padding: 0 6px; font-size: 10px; }
/* polls.py's cards: the market in their top bar ("US · Money" -> [US] Money) */
.ph-mkb { display: inline-block; margin-right: 3px; padding: 0 5px; border-radius: 6px; font: 700 10px/15px var(--text); font-style: normal;
  letter-spacing: .04em; vertical-align: 1px; }
.ph-mkb--us { background: #b4235a; color: #fff; }
.ph-mkb--gb { background: #33102c; color: #ffb3c7; }
body.m-all .sk .sc-bar span:nth-child(2) { color: var(--ink); }
body.m-all .sk .yg-rk .hd small, body.m-all .sk .yg-tk .hd small { color: var(--grey70); }

/* ---------- hero: one subject, the two countries one above the other ---------- */
.ph-duel__card { position: relative; padding: 26px 30px 22px; border-radius: 28px; background: #fff; color: var(--body);
  box-shadow: 0 0 0 1px rgba(255,179,199,.25), 0 34px 90px rgba(10,2,8,.55);
  --wn-h: var(--ink); --wn-tx: var(--body); --wn-mut: var(--grey70); }
.ph-duel__half { padding: 18px 0 16px; }
.ph-duel__q { display: flex; align-items: flex-start; font: 500 17.5px/24px var(--display); letter-spacing: -.2px; color: var(--ink); }
.ph-duel__q .ph-mk { margin-top: 1px; }
.ph-duel__q a { transition: color .2s ease; }
.ph-duel__q a:hover { color: var(--blue); }
.ph-duel__big { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.ph-duel__big b { font: 500 52px/1 var(--display); letter-spacing: -1.6px; color: var(--purple); font-variant-numeric: tabular-nums; }
.ph-duel__half--gb .ph-duel__big b { color: var(--wn-deep); }
.ph-duel__big span { font: 500 18px/24px var(--display); letter-spacing: -.2px; color: var(--ink); }
.ph-duel__bars { margin-top: 14px; gap: 9px; }
.ph-duel__half--gb .wn-bars li.is-hi .wn-bars__t i { background: linear-gradient(90deg, #8e1a47, #b4235a); }
.ph-duel__sep { position: relative; height: 1px; margin: 2px 0; background: var(--line); }
.ph-duel__sep span { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; display: grid; place-items: center; margin: -18px 0 0 -18px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--blue); }
.ph-duel .ph-feat__meta { margin-top: 6px; }

/* ---------- One country at a time: a door per country ---------- */
.ph-doorsec .wn-head { margin-bottom: 44px; }
.ph-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ph-door { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 560px; padding: 40px 44px 36px;
  border-radius: 32px; background: var(--wn-hero-bg); color: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(232,70,111,.14), 0 30px 70px rgba(30,10,26,.22);
  transition: transform .5s var(--wn-ease-out), box-shadow .5s var(--wn-ease-out); }
.ph-door--gb { background: radial-gradient(60% 55% at 100% 0%, rgba(232,70,111,.42), rgba(232,70,111,0) 70%),
  radial-gradient(50% 60% at 0% 100%, rgba(180,35,90,.35), rgba(180,35,90,0) 75%), linear-gradient(160deg, #33102c 0%, #1e0a1a 55%, #2a0b22 100%); }
.ph-door:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(255,179,199,.3), 0 40px 90px rgba(30,10,26,.32); }
.ph-door:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.ph-door__mono { position: absolute; z-index: -1; right: -18px; bottom: -70px; font: 600 300px/1 var(--display); letter-spacing: -14px;
  color: rgba(255,179,199,.07); pointer-events: none; }
.ph-door__top { display: flex; align-items: center; gap: 4px; font: 600 13px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.ph-door__t { font: 500 44px/50px var(--display); letter-spacing: -1px; color: #fff; }
.ph-door__d { max-width: 500px; font: 400 17px/26px var(--text); color: rgba(255,255,255,.8); }
.ph-door__facts { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 4px 0 6px; }
.ph-door__facts span { font: 400 15px/20px var(--text); color: rgba(255,255,255,.78); }
.ph-door__facts b { margin-right: 4px; font: 500 28px/1 var(--display); color: var(--mint); font-variant-numeric: tabular-nums; }
.ph-door__hl { margin-top: auto; border-top: 1px solid rgba(255,179,199,.2); }
.ph-door__hl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255,179,199,.14); }
.ph-door__hl b { font: 500 36px/1 var(--display); letter-spacing: -1px; color: var(--mint); font-variant-numeric: tabular-nums; }
.ph-door__hl span { font: 500 18px/24px var(--display); color: #fff; }
.ph-door__hl small { display: block; margin-top: 4px; font: 400 13.5px/19px var(--text); color: rgba(255,255,255,.72); }
.ph-door__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 16px/22px var(--text); color: var(--mint); }
.ph-door__go svg { transition: transform .35s var(--wn-ease-out); }
.ph-door:hover .ph-door__go svg { transform: translateX(6px); }

/* ---------- Two countries (ink): mirrored bars, then one row per subject ---------- */
.ph-both .wn-head { margin-bottom: 44px; }
.ph-bfs { display: grid; gap: 28px; }
.ph-bf { padding: 36px 40px 30px; border-radius: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,179,199,.2); }
.ph-bf__hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,179,199,.18); }
.ph-badge--dark { background: rgba(255,255,255,.08); color: #fff; }
.ph-bf__q { margin-top: 16px; max-width: 680px; font: 500 28px/36px var(--display); letter-spacing: -.4px; color: #fff; }
.ph-bf__q2 { display: flex; align-items: flex-start; max-width: 700px; margin-top: 10px; font: 400 15px/22px var(--text); color: rgba(255,255,255,.78); }
.ph-bf__q2 .ph-mk { margin-top: 2px; }
.ph-bf__heads { display: flex; gap: 14px; }
.ph-bf__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 236px; padding: 18px 20px 16px; border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.22); color: #fff; transition: background-color .25s ease, border-color .25s ease; }
.ph-bf__head:hover { background: rgba(255,255,255,.11); border-color: rgba(255,179,199,.5); }
.ph-bf__hn b { display: block; font: 500 46px/1 var(--display); letter-spacing: -1.4px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ph-bf__head--gb .ph-bf__hn b { color: var(--mint); }
.ph-bf__hn span { display: block; margin-top: 6px; font: 500 15px/20px var(--display); color: rgba(255,255,255,.9); }
.ph-bf__go { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/18px var(--text); color: var(--mint); }
.ph-bf__go svg { width: 14px; height: 14px; transition: transform .3s var(--wn-ease-out); }
.ph-bf__head:hover .ph-bf__go svg { transform: translateX(4px); }
.ph-bf__axis, .ph-bf__rows li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 300px minmax(0, 1fr) 52px; column-gap: 16px; align-items: center; }
.ph-bf__axis { margin-top: 22px; }
.ph-bf__axis span:first-child { grid-column: 2; justify-self: end; }
.ph-bf__axis span:last-child { grid-column: 4; justify-self: start; }
.ph-bf__axis .ph-mk { margin: 0; }
.ph-bf__rows { display: grid; gap: 8px; margin-top: 10px; }
.ph-bf__rows li { min-height: 42px; }
.ph-bf__v { font: 600 17px/1 var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.ph-bf__rows li > .ph-bf__v:first-child { text-align: right; }
.ph-bf__t { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.ph-bf__t i { position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--v, .5)); }
.ph-bf__t--us i { transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(232,70,111,.7), rgba(214,51,94,.35)); }
.ph-bf__t--gb i { transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,179,199,.62), rgba(255,179,199,.28)); }
.ph-bf__t--us.is-hi i { background: linear-gradient(270deg, #ff5c8a, #d6335e); }
.ph-bf__t--gb.is-hi i { background: linear-gradient(90deg, #ffd3df, #ffb3c7); }
.ph-bf__l { text-align: center; font: 500 15.5px/21px var(--text); color: #fff; }
.ph-bf__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,179,199,.14); font: 400 14px/20px var(--text); color: rgba(255,255,255,.72); }
.ph-prs__h { margin: 64px 0 20px; font: 500 26px/32px var(--display); letter-spacing: -.3px; color: #fff; }
.ph-prs { display: grid; gap: 12px; }
.ph-pr { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); align-items: stretch; }
.ph-pr__side { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 26px; border-radius: 22px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,179,199,.18); color: #fff;
  transition: background-color .25s ease, border-color .25s ease, transform .8s var(--wn-ease-out), opacity .8s var(--wn-ease-out); }
.ph-pr__side:hover { background: rgba(255,255,255,.1); border-color: rgba(255,179,199,.48); }
.ph-pr__side--us { align-items: flex-end; text-align: right; }
.ph-pr__k { display: flex; align-items: center; font: 400 14px/19px var(--text); color: rgba(255,255,255,.78); }
.ph-pr__side--us .ph-pr__k { flex-direction: row-reverse; }
.ph-pr__side--us .ph-pr__k .ph-mk { margin: 0 0 0 7px; }
.ph-pr__n { display: flex; align-items: baseline; gap: 12px; }
.ph-pr__n b { font: 500 40px/1 var(--display); letter-spacing: -1px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ph-pr__side--gb .ph-pr__n b { color: var(--mint); }
.ph-pr__n span { font: 500 17px/23px var(--display); color: #fff; }
.ph-pr__mid { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint);
  transition: transform .8s var(--wn-ease-out), opacity .8s var(--wn-ease-out); }
.ph-pr__mid::before { content: ""; position: absolute; z-index: -1; left: 12px; right: 12px; top: 50%; height: 1px; background: rgba(255,179,199,.24); }
.ph-pr__mid .ph-ti { width: 40px; height: 40px; border-radius: 12px; }
.ph-pr__mid .ph-ti svg { width: 20px; height: 20px; }
.ph-pr__mid > span { padding: 0 6px; background: var(--ink); }
/* the two sides come in from their own edge when the list scrolls in */
html.wm-on .ph-prs:not(.is-in) .ph-pr__side--us { opacity: 0; transform: translate3d(-56px, 0, 0); }
html.wm-on .ph-prs:not(.is-in) .ph-pr__side--gb { opacity: 0; transform: translate3d(56px, 0, 0); }
html.wm-on .ph-prs:not(.is-in) .ph-pr__mid { opacity: 0; transform: scale(.6); }
.ph-pr:nth-child(2) > * { transition-delay: .08s; } .ph-pr:nth-child(3) > * { transition-delay: .16s; } .ph-pr:nth-child(4) > * { transition-delay: .24s; }
.ph-pr:nth-child(5) > * { transition-delay: .32s; } .ph-pr:nth-child(6) > * { transition-delay: .4s; } .ph-pr:nth-child(n+7) > * { transition-delay: .48s; }
.ph-pr__side:hover { transition-delay: 0s; }

/* ---------- side by side: the US cards and the UK cards in two columns ---------- */
.ph-sbs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 26px; }
.ph-sbs::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
/* the lede above the lists (polls-hubs.py lr_head, phone QA 22 Oct 2026): "on the left / on the right" while the lists
   sit side by side, "first, then" once they stack (under 768px, the .ph-sbs rule in RESPONSIVE) */
.ph-lr--stack { display: none; }
@media (max-width: 767.98px) { .ph-lr--wide { display: none; } .ph-lr--stack { display: inline; } }
.ph-sbsec .wn-head + .ph-sbs,.ph-sbsec .wn-head + .ph-sbs__topic .ph-sbs { margin-top: 0; }
.ph-sbs__h { display: flex; align-items: center; gap: 2px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--ink);
  font: 500 20px/26px var(--display); letter-spacing: -.2px; color: var(--ink); }
.ph-sbs__h em { margin-left: auto; font: 600 12.5px/16px var(--text); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
body.t-polls-hubs .sk .ph-sbs .yg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.ph-sbs__none { padding: 26px 28px; border-radius: 22px; border: 1px dashed var(--divider, #d9cbd2); font: 400 16px/24px var(--text); color: var(--grey70); }
.ph-duorow + .ph-duorow { margin-top: 56px; }
.ph-duorow .ph-sbs__h { max-width: 980px; }
.ph-sbs__col .yg-grid + .ph-xcard { margin-top: 22px; }
.ph-sbs__col .ph-acard .ph-bars li { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 44px; }

/* ---------- topic tiles with both countries ---------- */
.ph-tile--all .ph-tile__split { font: 600 13px/18px var(--text); letter-spacing: .04em; color: var(--blue); }
.ph-tile--all.ph-tile--wide .ph-tile__split { color: var(--mint); }
.ph-tile--all .ph-tile__hl, .ph-tile--all.ph-tile--wide .ph-tile__hl { display: block; }
.ph-tile--all .ph-tile__hl .ph-mk { vertical-align: 3px; }
.ph-tile--all .ph-tile__hl + .ph-tile__hl { margin-top: 14px; }
.ph-tile--all.ph-tile--compact .ph-tile__split { margin-top: -4px; }

/* ---------- This week: one issue cover per country ---------- */
.ph-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ph-cover2--us { transform: rotate(-1.4deg); }
.ph-cover2--gb { transform: rotate(1.4deg); margin-top: 44px; }
.ph-covers .ph-cover__in { padding: 24px 22px 20px; }
.ph-covers .ph-cover__k { align-items: center; padding-bottom: 12px; font-size: 11.5px; }
.ph-covers .ph-cover__k .ph-mk { margin: 0; }
.ph-covers .ph-cover__date { margin-top: 14px; font-size: 21px; line-height: 27px; }
.ph-covers .ph-cover__big { gap: 10px; margin-top: 6px; }
.ph-covers .ph-cover__big b { font-size: 78px; letter-spacing: -2.6px; }
.ph-cover2--gb .ph-cover__big b { color: var(--wn-deep); }
.ph-covers .ph-cover__big span { max-width: 120px; font-size: 14px; line-height: 19px; }
.ph-covers .ph-cover__bars { gap: 8px; margin-top: 16px; padding-top: 14px; }
.ph-covers .ph-cover__bars li { grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 8px; font-size: 13px; line-height: 18px; }
.ph-covers .ph-cover__bars .t { height: 8px; }
.ph-covers .ph-cover__foot { margin-top: 12px; font-size: 12.5px; }

/* ---------- Trackers + Rankings: the hero boards, country by country ---------- */
.ph-board__grp { display: flex; align-items: center; gap: 2px; margin-top: 18px; padding-bottom: 2px; font: 500 17px/22px var(--display); color: #fff; }
.ph-board--all { padding-bottom: 12px; }
.ph-board--all li a { padding: 10px 0; }
.ph-board--all .yg-ic { width: 36px; height: 36px; }
.ph-board--all strong { font-size: 30px; }
/* the two-country boards are tall: the hero text sits at their top, not halfway down */
.ph-hero--all.ph-hero--trackers .ph-hero__grid, .ph-hero--all.ph-hero--rank .ph-hero__grid { align-items: start; }
.ph-hero--all.ph-hero--trackers .ph-hero__txt, .ph-hero--all.ph-hero--rank .ph-hero__txt { padding-top: 88px; }
.ph-pod2__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.ph-pod2 .ph-board__grp { font-size: 15px; line-height: 20px; white-space: nowrap; }
.ph-pod2 li a { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; }
body.t-polls-hubs .sk .ph-pod2 .yg-ic { width: 30px; height: 30px; border-radius: 9px; }
.ph-pod2 .ph-pod__t b { font-size: 14.5px; line-height: 19px; }
.ph-pod2 .ph-pod__t small { font-size: 12.5px; line-height: 17px; }
.ph-pod2 strong { font-size: 24px; letter-spacing: -.5px; }
body.t-polls-hubs .sk .ph-mkgh { align-items: center; gap: 4px; }
body.t-polls-hubs .sk .ph-mkgh .yg-h2 { margin-right: 12px; }
body.t-polls-hubs .sk .ph-cards .ph-mkgh + .yg-tks, body.t-polls-hubs .sk .ph-cards .ph-mkgh + .yg-rks { margin-top: 24px; }
body.t-polls-hubs .sk .ph-cards .wn-head + .ph-mkgh { margin-top: 0; }

/* ---------- Daily question: the two countries' questions lifted into the hero ---------- */
.ph-hero--lift { padding-bottom: 236px; }
.ph-dsec { padding-top: 0; }
.ph-dailies2 { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: -168px; }
body.t-polls-hubs .sk .ph-dailies2 .yg-daily { margin: 0; padding: 30px 32px 28px; border: 0; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 34px 80px rgba(30,10,26,.22); }

/* ---------- small parts ---------- */
body.m-all .ph-tick em { display: inline-flex; align-items: center; }
.ph-xcard__q .ph-mk, .ph-csv__bar .ph-mk { margin-right: 4px; }
body.m-all .ph-mail__k { display: flex; align-items: center; }
.ph-sbsec .wn-head + .ph-duorow { margin-top: 40px; }
.ph-mail__list small .ph-mk { vertical-align: 1px; }

@media (prefers-reduced-motion: reduce) {
  .ph-pr__side, .ph-pr__mid { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ph-door { transition: none !important; }
}

/* ---------- motion extras (armed with wine-motion's html.wm-on) ---------- */
html.wm-on .ph-feat__card, html.wm-on .ph-cover__in { transition: transform .5s var(--wm-ease); }
@media (prefers-reduced-motion: reduce) {
  .ph-live::after, .ph-orb__r { animation: none !important; }
  .ph-tile, .ph-how, .ph-mcard, .ph-hl { transition: none !important; }
}

/* =====================================================================================================
   INDIA (/en-in/polls/..., 21 Oct 2026 review fix): no India polls exist, so the India pages use the All-countries
   blocks (US and UK side by side, country chips). Rules here use body.m-in or ph-inall, which only India pages carry.
   ===================================================================================================== */
body.m-in .sk .sc-bar span:nth-child(2) { color: var(--ink); }
body.m-in .sk .yg-rk .hd small, body.m-in .sk .yg-tk .hd small { color: var(--grey70); }
body.m-in .ph-tick em { display: inline-flex; align-items: center; }
body.m-in .ph-mail__k { display: flex; align-items: center; }
/* the header's "Poll topics" link (/en-in/polls/#topics) lands below the floating pill header */
body.m-in #topics { scroll-margin-top: 150px; }
/* the hub's third way in, under the two country doors: the All-countries page */
.ph-inall { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 36px; margin-top: 24px;
  padding: 28px 40px; border-radius: 28px; background: linear-gradient(100deg, var(--wn-rose-10), #fff 62%);
  box-shadow: 0 0 0 1px var(--wn-line); color: var(--ink); text-decoration: none;
  transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out); }
.ph-inall:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(180,35,90,.35), 0 26px 60px rgba(30,10,26,.14); }
.ph-inall:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.ph-inall__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff;
  background: linear-gradient(150deg, #e8466f, #4a1238); box-shadow: 0 14px 30px rgba(74,18,56,.28); }
.ph-inall__k { display: flex; align-items: center; margin-bottom: 8px; font: 600 12px/16px var(--text); letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); }
.ph-inall__k .ph-mk { margin-right: 6px; }
.ph-inall__txt b { display: block; font: 500 28px/34px var(--display); letter-spacing: -.5px; color: var(--ink); }
.ph-inall__txt > span:last-child { display: block; max-width: 520px; margin-top: 6px; font: 400 16px/24px var(--text); color: var(--grey70); }
.ph-inall__facts { display: flex; gap: 30px; }
.ph-inall__facts span { display: flex; flex-direction: column; max-width: 140px; font: 400 13.5px/18px var(--text); color: var(--grey70); }
.ph-inall__facts b { margin-bottom: 6px; font: 500 38px/1 var(--display); letter-spacing: -1px; color: var(--blue); font-variant-numeric: tabular-nums; }
.ph-inall__go { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/22px var(--text); color: var(--blue); white-space: nowrap; }
.ph-inall__go svg { transition: transform .35s var(--wn-ease-out); }
.ph-inall:hover .ph-inall__go svg { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .ph-inall, .ph-inall__go svg { transition: none !important; }
}

/* =====================================================================================================
   REVIEW FIXES (All-countries polls review, 21 Oct 2026 evening). Rules for every market are marked so; the rest use
   class names only the new markup carries (ph-reltopics, ph-prdiff, ph-ticker__all) or body.m-all.
   ===================================================================================================== */
/* every market: the headline ticker standing still (reduced motion, ?static=1 / ?shot=1: html.wm-static from the <head>
   snippet). No fade mask over the first headline; the row wraps and shows its first 8 headlines (TICK_STATIC in
   polls-hubs.py), then "See all N questions" (ticker_more). Before: 3 of 29 headlines in view, the other 26 focusable
   links clipped outside the strip, the first "63%" washed out by the mask */
.ph-ticker__all { display: none; }
html.wm-static .ph-ticker__in { height: auto; min-height: 80px; padding-top: 16px; padding-bottom: 16px; align-items: flex-start; }
html.wm-static .ph-ticker__lab { margin-top: 3px; }
html.wm-static .ph-ticker__mq { overflow: visible; -webkit-mask-image: none; mask-image: none; }
html.wm-static .ph-ticker .wn-marquee__track { flex-wrap: wrap; width: auto; }
html.wm-static .ph-ticker .ph-tick:nth-child(n+9) { display: none; }
html.wm-static .ph-ticker__all { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font: 600 15px/22px var(--text);
  color: var(--mint); white-space: nowrap; }
html.wm-static .ph-ticker__all:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ph-ticker__all svg { width: 16px; height: 16px; flex: none; }

/* every market: the "Run your own poll" band's stat captions over the crimson glow measured 4.49:1 at worst (.78
   white); .86 white clears 4.5:1 */
.ph-ask__stats .wn-stat span { color: rgba(255,255,255,.86); }

/* every market: ranking places with ties ("=4", polls-hubs.py rank_card) stay on one line */
body.t-polls-hubs .sk .yg-rk .n { white-space: nowrap; }

/* All countries + India: a one-country row (Work: one US poll; the short topics' US and UK rows) has its heading
   rule across the whole width, as the two-column lists (it stopped at 980px and looked unfinished) */
.ph-duorow .ph-sbs__h { max-width: none; }

/* All countries + India: under the topic tiles, the topics without questions of their own (Work, Sport, Travel) as
   buttons to their "polls that touch on" pages (no page of the section linked them) */
.ph-reltopics { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 30px; }
.ph-reltopics__k { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
body.t-polls-hubs .sk .ph-reltopics .mb-pills { margin: 0; }

/* All countries: Rankings, "No. 1 in each country" - the rankings asked as different questions, listed under the pairs */
.ph-prdiff__s { max-width: 760px; margin: -8px 0 18px; font: 400 16px/24px var(--text); color: rgba(255,255,255,.78); }
.ph-prdiff ul { display: grid; gap: 10px; }
.ph-prdiff li { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 12px; }
.ph-prdiff__t { display: flex; align-items: center; gap: 10px; font: 600 12px/16px var(--text); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mint); }
.ph-prdiff__t .ph-ti { width: 32px; height: 32px; border-radius: 10px; }
.ph-prdiff__t .ph-ti svg { width: 16px; height: 16px; }
.ph-prdiff a { display: flex; align-items: center; padding: 14px 20px; border-radius: 16px; border: 1px solid rgba(255,179,199,.18);
  background: rgba(255,255,255,.04); font: 400 15px/21px var(--text); color: #fff; transition: background-color .25s ease, border-color .25s ease; }
.ph-prdiff a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,179,199,.48); }

/* in-page anchors land below the floating pill header (the header's "Poll topics" link, the still ticker's link) */
body.m-all #topics, #questions { scroll-margin-top: 150px; }
@media (prefers-reduced-motion: reduce) {
  .ph-prdiff a { transition: none !important; }
}

/* =====================================================================================================
   RESPONSIVE (21 Oct 2026): small laptops, tablets and phones, every market (US, UK, India, All countries). Breakpoints,
   header clearance and motion: the RESPONSIVE block at the top of wine-base.css (max-width 1199.98 / 1023.98 / 767.98 /
   479.98px; touch = (hover: none) and (pointer: coarse)); nothing here applies from 1200px up. The poll components of
   polls.py on the question pages are in wine-polls.css section 5; the rules here dress them on the section pages.
   Below 1024px and on touch screens wine-motion.js runs html.wm-lite: reveals only, the ticker still loops (with its
   pause button), the side-by-side pairs do not slide in.
   ===================================================================================================== */

/* ---------- 1200: small laptop ---------- */
@media (max-width: 1199.98px) {
  .ph-hero__grid { gap: 48px; }
  .ph-ask__grid { gap: 56px; }
  .ph-nl { gap: 56px; }
  .ph-doc { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 56px; }
  .ph-feat__big b { font-size: 60px; }
  .ph-cover__big b { font-size: 104px; }
  .ph-door { padding: 36px 36px 32px; }
  .ph-door__t { font-size: 38px; line-height: 44px; }
  .ph-bf { padding: 32px 32px 28px; }
  .ph-bf__axis, .ph-bf__rows li { grid-template-columns: 48px minmax(0, 1fr) 240px minmax(0, 1fr) 48px; }
  .ph-pr { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
  .ph-inall { gap: 28px; padding: 26px 32px; }
  /* topic tiles: two columns (the two big topics take a full row), the compact ones three */
  .ph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-tiles--compact, .ph-tiles--compact.ph-tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-tile--compact .ph-tile__t { font-size: 24px; line-height: 30px; }
  /* Rankings (All countries): the hero board lists the two countries one under the other */
  .ph-pod2__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 1024: tablet landscape and below ---------- */
@media (max-width: 1023.98px) {
  .ph-sec { padding: var(--wn-sec-y) 0; }
  .ph-sec .wn-head { margin-bottom: 40px; }
  /* hero: one column, the card or drawing under the text */
  .ph-hero { padding: var(--wn-hdr-clear, 96px) 0 80px; }
  .ph-hero--doc { padding-bottom: 80px; }
  .ph-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ph-hero__vis { width: 100%; max-width: 640px; }
  .ph-hero--all.ph-hero--trackers .ph-hero__txt, .ph-hero--all.ph-hero--rank .ph-hero__txt { padding-top: 0; }
  .ph-glow { width: 640px; height: 640px; }
  /* Daily question (All countries): the two cards sit under the hero instead of lifted into it */
  .ph-hero--lift { padding-bottom: 80px; }
  .ph-dsec { padding-top: 56px; }
  .ph-dailies2 { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; }
  /* grids: two columns */
  .ph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ph-tiles--compact, .ph-tiles--compact.ph-tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-tile { min-height: 280px; padding: 26px 24px 26px; }
  .ph-tile--wide .ph-tile__t { font-size: 34px; line-height: 40px; }
  .ph-tile--compact { padding: 22px 18px 22px; }
  .ph-tile--compact .ph-tile__t { font-size: 22px; line-height: 28px; }
  .ph-hows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ph-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-polls-hubs .sk .yg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body.t-polls-hubs .sk .yg-rks, body.t-polls-hubs .sk .yg-tks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body.t-polls-hubs .sk .yg-gh { flex-wrap: wrap; row-gap: 4px; margin-top: 48px; }
  /* ask your own question */
  .ph-ask__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* topic hero: the fan of headlines, less staggered */
  .ph-fan li:nth-child(2) { margin-left: 32px; }
  .ph-fan li:nth-child(3) { margin-left: 64px; }
  /* short topics: the cards, then how the groups answered */
  .ph-duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  body.t-polls-hubs .sk .ph-duo .yg-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ph-duo .ph-xcard { max-width: none; }
  /* empty topics */
  .ph-orb { width: 300px; height: 300px; margin: 0 auto; }
  .ph-orb__r.r2 { inset: 44px; }
  .ph-orb__r.r3 { inset: 88px; }
  .ph-orb__ic { width: 104px; height: 104px; border-radius: 30px; }
  /* trackers, rankings */
  .ph-timeline { padding: 88px 0 96px; }
  .ph-board__t b, .ph-pod__t b { font-size: 15.5px; }
  /* handbook pages: the chapter list above the chapters */
  .ph-docsec { padding-top: 72px; }
  .ph-doc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ph-toc { position: static; }
  .ph-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-left: 0; }
  .ph-toc li { border-left: 2px solid var(--line); }
  .ph-toc a { min-height: 44px; align-items: center; }
  .ph-ch { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; }
  .ph-ch__n { font-size: 46px; }
  /* newsletter */
  .ph-nl { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ph-mailfig { max-width: 640px; }
  /* All countries: doors, mirrored bars, pairs, side by side */
  .ph-door { min-height: 0; }
  .ph-door__mono { font-size: 220px; bottom: -50px; }
  .ph-bf__hd { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ph-bf__heads { flex-wrap: wrap; }
  .ph-bf__head { flex: 1 1 220px; width: auto; }
  .ph-bf__axis, .ph-bf__rows li { grid-template-columns: 44px minmax(0, 1fr) 200px minmax(0, 1fr) 44px; column-gap: 12px; }
  .ph-pr { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
  .ph-pr__side { padding: 18px 20px; }
  .ph-pr__n b { font-size: 34px; }
  .ph-prs__h { margin-top: 48px; }
  .ph-prdiff li { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); }
  .ph-sbs { gap: 0 32px; }
  body.t-polls-hubs .sk .ph-sbs .yg-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-covers { gap: 16px; }
  /* India hub: the All-countries link card in two rows */
  .ph-inall { grid-template-columns: 64px minmax(0, 1fr); row-gap: 20px; }
  .ph-inall__facts { grid-column: 2; }
  .ph-inall__go { grid-column: 2; }
}

/* ---------- 768: tablet portrait, phones in landscape ---------- */
@media (max-width: 767.98px) {
  .ph-hero { padding: var(--wn-hdr-clear-m, 88px) 0 64px; }
  .ph-hero--doc, .ph-hero--lift { padding-bottom: 64px; }
  .ph-hero__txt { gap: 18px; }
  .ph-hero__vis { max-width: none; }
  .ph-kick { font-size: 13px; letter-spacing: .07em; }
  .ph-ctas { width: 100%; }
  .ph-facts { margin-top: 8px; }
  .ph-facts .wn-stat b { font-size: 38px; }
  .ph-facts .wn-stat span { font-size: 15px; }
  /* cards in the hero */
  .ph-feat__card, .ph-duel__card, .ph-cover__in, .ph-board, .ph-pod { padding-left: 20px; padding-right: 20px; border-radius: 24px; }
  .ph-feat__card { padding-top: 24px; padding-bottom: 22px; }
  .ph-feat__top { flex-wrap: wrap; row-gap: 10px; }
  .ph-feat__q { font-size: 21px; line-height: 28px; }
  .ph-feat__big { flex-wrap: wrap; row-gap: 4px; }
  .ph-feat__big b { font-size: 54px; }
  .ph-feat__big span { font-size: 19px; line-height: 25px; }
  .ph-bars li, .ph-acard .ph-bars li, .ph-sbs__col .ph-acard .ph-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .ph-bars .wn-bars__l { font-size: 15px; }
  .ph-feat__sum { font-size: 16px; line-height: 24px; }
  .ph-feat__meta { font-size: 14px; line-height: 20px; }
  .ph-duel__half { padding: 16px 0 14px; }
  .ph-duel__q { font-size: 17px; }
  .ph-duel__big { flex-wrap: wrap; row-gap: 4px; }
  .ph-duel__big b { font-size: 44px; }
  /* ticker */
  .ph-ticker__in { gap: 14px; height: 72px; padding: 0 0 0 20px; }
  .ph-ticker__lab { gap: 8px; padding-right: 14px; font-size: 12px; }
  .ph-ticker__btn { margin-right: 14px; }
  .ph-tick { padding: 11px 28px 11px 0; font-size: 16px; }
  .ph-tick::after { margin-left: 20px; }
  html.wm-static .ph-ticker__in { padding-right: 20px; }
  /* tiles: one column; the compact topic tiles two */
  .ph-tiles { grid-template-columns: minmax(0, 1fr); }
  .ph-tile-li.is-wide { grid-column: auto; }
  .ph-tiles--compact, .ph-tiles--compact.ph-tiles--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-tile { min-height: 0; padding: 24px 22px 24px; border-radius: 24px; }
  .ph-tile__top { margin-bottom: 8px; }
  .ph-tile__t, .ph-tile--wide .ph-tile__t { font-size: 28px; line-height: 34px; }
  .ph-tile--compact .ph-tile__t { font-size: 22px; line-height: 28px; }
  .ph-tile__d { font-size: 16px; line-height: 24px; }
  .ph-tile__hl small { font-size: 15px; line-height: 21px; }
  .ph-tile__go { opacity: 1; transform: none; }
  .ph-tile__n { padding-right: 30px; }
  .ph-tile:hover .ph-tile__n { opacity: 1; }
  /* method strip, more cards */
  .ph-hows, .ph-mcards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ph-how { padding: 26px 24px 68px; }
  .ph-how__go { left: 24px; bottom: 24px; }
  .ph-mcard { min-height: 0; padding: 22px 22px 58px; }
  .ph-mcard > span:not(.ph-ico):not(.ph-mcard__go) { font-size: 16px; line-height: 24px; }
  .ph-mcard__go { left: 22px; }
  /* polls.py's lists */
  body.t-polls-hubs .sk .yg-grid, body.t-polls-hubs .sk .ph-duo .yg-grid { grid-template-columns: minmax(0, 1fr); }
  body.t-polls-hubs .sk .yg-rks, body.t-polls-hubs .sk .yg-tks { grid-template-columns: minmax(0, 1fr); }
  body.t-polls-hubs .sk .yg-gh { margin-top: 40px; }
  body.t-polls-hubs .sk .yg-gh .yg-h2 { font-size: 26px; line-height: 32px; }
  body.t-polls-hubs .sk .yg-rk, body.t-polls-hubs .sk .yg-tk { padding: 22px 20px 20px; }
  body.t-polls-hubs .sk .yg-rk li { grid-template-columns: 22px minmax(0, 1fr) 64px 40px; }
  body.t-polls-hubs .sk .yg-rk .hd, body.t-polls-hubs .sk .yg-tk .hd { align-items: flex-start; }
  body.t-polls-hubs .sk .yg-tk .big { font-size: 52px; }
  body.t-polls-hubs .sk .yg-daily .sum { font-size: 16px; line-height: 24px; }
  body.t-polls-hubs .sk .ph-daily .yg-daily, body.t-polls-hubs .sk .ph-dailies2 .yg-daily { padding: 24px 20px 22px; border-radius: 24px; }
  body.t-polls-hubs .sk .yg-daily h2 { font-size: 22px; line-height: 29px; }
  body.t-polls-hubs .sk .mb-bars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 6px 12px; }
  body.t-polls-hubs .sk .mb-bars .l { grid-area: l; font-size: 15px; }
  body.t-polls-hubs .sk .mb-bars .t { grid-area: t; }
  body.t-polls-hubs .sk .mb-bars .v { grid-area: v; }
  body.t-polls-hubs .sk .yg-empty { flex-direction: column; gap: 18px; padding: 26px 22px; }
  body.t-polls-hubs .sk .yg-empty .yg-h2 { font-size: 26px; line-height: 32px; }
  /* ask your own question */
  .ph-ask__stats .wn-stat, .ph-ask__stats .wn-stat + .wn-stat { padding: 22px 18px 20px; }
  .ph-ask__stats .wn-stat b { font-size: 42px; }
  /* topic hero: the headline cards one under another, no tilt */
  .ph-fan { gap: 14px; }
  .ph-fan li:nth-child(2), .ph-fan li:nth-child(3) { margin-left: 0; }
  .ph-fan li .ph-hl { transform: none; }
  .ph-hl { grid-template-columns: 40px auto minmax(0, 1fr); column-gap: 12px; padding: 18px 18px 16px; border-radius: 20px; }
  .ph-hl__q { font-size: 16px; line-height: 22px; }
  .ph-hl b { font-size: 44px; }
  .ph-hl__lab { max-width: none; font-size: 16px; line-height: 21px; }
  /* cross-tab card and the CSV sample */
  .ph-rules, .ph-xcard, .ph-csv, .ph-formcard { border-radius: 22px; }
  .ph-rules, .ph-xcard, .ph-formcard { padding: 24px 20px 22px; }
  .ph-rules li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; font-size: 17px; }
  .ph-rules__n { width: 40px; height: 40px; font-size: 20px; }
  .ph-xcard__q { font-size: 19px; line-height: 26px; }
  .ph-xcard__q span { font-size: 15px; }
  body.t-polls-hubs .sk .ph-xcard .mb-scroll { overscroll-behavior-x: contain; }
  body.t-polls-hubs .sk .ph-xcard .mb-x, body.t-polls-hubs .sk .ph-duo .mb-x { width: max-content; min-width: 100%; table-layout: auto; }
  body.t-polls-hubs .sk .ph-xcard .mb-x tbody th, body.t-polls-hubs .sk .ph-xcard .mb-x thead th:first-child { width: 120px; min-width: 120px; max-width: 120px; }
  body.t-polls-hubs .sk .ph-xcard .mb-x thead th { min-width: 64px; }
  body.t-polls-hubs .sk .ph-xcard .mb-x tbody th, body.t-polls-hubs .sk .ph-xcard .mb-x thead th:first-child { position: sticky; left: 6px; z-index: 1; background: #fff;
    box-shadow: -6px 0 0 #fff, 6px 0 0 #fff; }
  .ph-xcard__key { font-size: 14px; }
  .ph-csv { overflow: visible; }
  .ph-csv__bar { padding: 14px 18px; border-radius: 22px 22px 0 0; }
  .ph-csv__bar b { min-width: 0; overflow-wrap: anywhere; }
  .ph-csv table { display: block; width: auto; margin: 12px 18px 0; overflow-x: auto; overscroll-behavior-x: contain; }
  .ph-csv td, .ph-csv th { white-space: nowrap; }
  .ph-csv__foot { margin: 14px 18px 0; font-size: 14.5px; line-height: 21px; }
  /* This week cover */
  .ph-cover__in { padding-top: 26px; padding-bottom: 22px; }
  .ph-cover__date { font-size: 24px; line-height: 30px; }
  .ph-cover__big { flex-wrap: wrap; }
  .ph-cover__big b { font-size: 84px; letter-spacing: -2.6px; }
  .ph-cover__bars li { grid-template-columns: 118px minmax(0, 1fr) 24px; gap: 10px; font-size: 15px; }
  .ph-covers { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ph-cover2--us, .ph-cover2--gb { transform: none; margin-top: 0; }
  .ph-covers .ph-cover__k { font-size: 12px; }
  .ph-covers .ph-cover__big b { font-size: 64px; }
  .ph-covers .ph-cover__big span { max-width: 200px; font-size: 15px; line-height: 20px; }
  .ph-covers .ph-cover__bars li { grid-template-columns: 118px minmax(0, 1fr) 24px; font-size: 14px; line-height: 19px; }
  .ph-covers .ph-cover__foot { font-size: 13px; }
  /* trackers and rankings boards */
  .ph-board { padding-top: 22px; padding-bottom: 12px; }
  .ph-board__k, .ph-pod__k { flex-wrap: wrap; row-gap: 4px; }
  .ph-board li a, .ph-pod li a { gap: 12px; }
  .ph-board strong, .ph-pod strong { font-size: 30px; }
  .ph-pod { padding-top: 22px; padding-bottom: 10px; }
  .ph-pod li a { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .ph-pod:not(.ph-pod2) li a > .yg-ic { display: none; }
  .ph-pod2__cols { grid-template-columns: minmax(0, 1fr); }
  .ph-pod2 .ph-board__grp { white-space: normal; }
  .ph-pod2 li a { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ph-pod2 .ph-pod__t b { font-size: 15px; line-height: 20px; }
  .ph-pod2 .ph-pod__t small { font-size: 13px; line-height: 18px; }
  .ph-tl__labels b { font-size: 20px; line-height: 26px; }
  .ph-tl__labels span { font-size: 15px; line-height: 20px; }
  /* handbook pages */
  .ph-toc ol { grid-template-columns: minmax(0, 1fr); }
  .ph-ch { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 0 34px; }
  .ph-ch__n { font-size: 40px; }
  .ph-ch h2 { font-size: 26px; line-height: 32px; }
  .ph-ch__b p { font-size: 17px; line-height: 28px; }
  .ph-ch__b a { overflow-wrap: anywhere; }
  /* newsletter */
  .ph-nlcard { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px; }
  .ph-nlcard .ph-ico { width: 44px; height: 44px; }
  .ph-mail__body { padding: 24px 20px 26px; }
  .ph-mail__big { font-size: 23px; line-height: 30px; }
  .ph-mail__sum { font-size: 16px; }
  .ph-mail__list li { grid-template-columns: 56px minmax(0, 1fr); }
  .ph-mail__list b { font-size: 22px; }
  body.t-polls-hubs .sk .ph-formcard .yg-form button { width: 100%; }
  /* All countries: doors */
  .ph-doors { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ph-door { gap: 14px; padding: 30px 24px 28px; border-radius: 26px; }
  .ph-door__t { font-size: 32px; line-height: 38px; }
  .ph-door__d { font-size: 16px; line-height: 25px; }
  .ph-door__mono { font-size: 180px; letter-spacing: -8px; right: -10px; bottom: -40px; }
  .ph-door__hl li { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .ph-door__hl b { font-size: 30px; }
  .ph-door__hl span { font-size: 17px; line-height: 23px; }
  .ph-door__hl small { font-size: 14px; }
  /* All countries: mirrored bars (the answer on its own line, the US bar to the left of the middle, the UK bar to the right) */
  .ph-bf { padding: 24px 18px 22px; border-radius: 24px; }
  .ph-bf__q { font-size: 22px; line-height: 29px; }
  .ph-bf__q2 { font-size: 16px; line-height: 23px; }
  .ph-bf__heads { gap: 10px; }
  .ph-bf__head { flex: 1 1 140px; padding: 16px 16px 14px; border-radius: 18px; }
  .ph-bf__hn b { font-size: 38px; }
  .ph-bf__axis, .ph-bf__rows li { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px; column-gap: 10px; }
  .ph-bf__axis span:first-child { grid-column: 2; }
  .ph-bf__axis span:last-child { grid-column: 3; }
  .ph-bf__rows { gap: 12px; }
  .ph-bf__rows li { row-gap: 6px; min-height: 0; }
  .ph-bf__rows li > .ph-bf__l { grid-column: 1 / -1; grid-row: 1; font-size: 16px; line-height: 22px; }
  .ph-bf__rows li > :nth-child(1) { grid-column: 1; grid-row: 2; }
  .ph-bf__rows li > :nth-child(2) { grid-column: 2; grid-row: 2; }
  .ph-bf__rows li > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .ph-bf__rows li > :nth-child(5) { grid-column: 4; grid-row: 2; }
  .ph-bf__v { font-size: 16px; }
  .ph-bf__go { font-size: 14px; }
  .ph-bf__foot { font-size: 15px; line-height: 21px; }
  /* All countries: pairs (the subject above, the US and UK answers side by side under it) */
  .ph-prs__h { font-size: 22px; line-height: 28px; }
  .ph-pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mid mid" "us gb"; gap: 10px; }
  .ph-pr__mid { grid-area: mid; flex-direction: row; justify-content: flex-start; gap: 10px; }
  .ph-pr__mid::before { display: none; }
  .ph-pr__mid > span { padding: 0; background: none; }
  .ph-pr__mid .ph-ti { width: 32px; height: 32px; border-radius: 10px; }
  .ph-pr__side--us { grid-area: us; align-items: flex-start; text-align: left; }
  .ph-pr__side--gb { grid-area: gb; }
  .ph-pr__side--us .ph-pr__k { flex-direction: row; }
  .ph-pr__side--us .ph-pr__k .ph-mk { margin: 0 7px 0 0; }
  .ph-pr__side { padding: 16px 16px; border-radius: 18px; }
  .ph-pr__k { align-items: flex-start; font-size: 15px; line-height: 20px; }
  .ph-pr__n { flex-wrap: wrap; row-gap: 2px; }
  .ph-pr__n b { font-size: 32px; }
  .ph-pr__n span { font-size: 16px; line-height: 21px; }
  .ph-pr + .ph-pr { margin-top: 10px; }
  .ph-prdiff li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ph-prdiff a { min-height: 48px; }
  /* side by side: the US list, then the UK list */
  .ph-sbs { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .ph-sbs::before { display: none; }
  .ph-sbs__h { flex-wrap: wrap; row-gap: 4px; }
  .ph-duorow + .ph-duorow { margin-top: 44px; }
  /* India hub link card */
  .ph-inall { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 22px; }
  .ph-inall__facts, .ph-inall__go { grid-column: auto; }
  .ph-inall__txt b { font-size: 24px; line-height: 30px; }
  .ph-inall__facts { gap: 24px; }
  .ph-inall__facts span { font-size: 14.5px; line-height: 20px; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  .ph-ctas { flex-direction: column; align-items: stretch; }
  .ph-ctas > .btn { width: 100%; }
  .ph-tiles--compact, .ph-tiles--compact.ph-tiles--six { grid-template-columns: minmax(0, 1fr); }
  .ph-ticker__lab { font-size: 0; gap: 0; padding-right: 12px; }   /* the live dot stays; the section is labelled for screen readers */
  .ph-ticker__in { padding-left: 16px; }
  .ph-feat__card, .ph-duel__card, .ph-cover__in, .ph-board, .ph-pod { padding-left: 18px; padding-right: 18px; }
  body.t-polls-hubs .sk .yg-rk li { grid-template-columns: 22px minmax(0, 1fr) 48px 38px; gap: 8px; }
  .ph-pr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mid" "us" "gb"; gap: 8px; }
  .ph-bf__axis, .ph-bf__rows li { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) 36px; column-gap: 8px; }
  .ph-bf__v { font-size: 15px; }
  .ph-inall__facts { flex-wrap: wrap; }
}

/* ---------- small screens and touch screens: no text under 12px, 44px tap targets ---------- */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .ph-mk { height: 22px; font-size: 12px; }
  .ph-mk--sm { height: 20px; min-width: 28px; font-size: 12px; }
  .ph-mkb { font-size: 12px; line-height: 16px; }
  .ph-pod__no { font-size: 12px; }
  .ph-covers .ph-cover__k { font-size: 12px; }
  body.t-polls-hubs .sk .ph-xcard .mb-x thead th sup, body.t-polls-hubs .sk .mb-x thead th span { font-size: 12px; }
  body.t-polls-hubs .sk .mb-pills a { height: 44px; }
  .ph-ticker__btn { width: 44px; height: 44px; }
  .ph-tick { padding-top: 11px; padding-bottom: 11px; }
  .ph-dl { min-height: 44px; }
  .ph-badge { position: relative; }
  .ph-badge::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  .ph-toc a { min-height: 44px; align-items: center; }
}
/* the ticker on small and touch screens (html.wm-lite): it loops there too, so the pause button shows and works */
html.wm-lite .ph-ticker__btn { display: grid; }
html.wm-lite .wn-marquee.is-looping.is-paused .wn-marquee__track { animation-play-state: paused; }
html.wm-lite .ph-ticker__mq.is-looping { overflow-x: hidden; }
@media (hover: none) and (pointer: coarse) {
  .ph-tile:hover, .ph-how:hover, .ph-mcard:hover, .ph-door:hover, .ph-inall:hover { transform: none; }
  .ph-tile:hover .ph-tile__n { opacity: 1; }
}
/* ---------- end RESPONSIVE ---------- */