/* GENERATED by site-src/build_catalyse_polls_wine.py: do not edit. The wine poll pages (20 Oct 2026). */
/* ===== 1. tokens, base, S01 bar, pill header and mega menus: copied from catalyse-home-wine.html ===== */
:root {
  --ink: #1e0a1a; --body: #261c23; --grey60: #6e6269; --grey70: #554a51; --menu-grey: #776b72; --line: #e8dfe3;
  --divider: #ddd3d7; --stat-rule: #a1959b; --page: #f7f2f4; --white: #fff;
  --blue: #b4235a; --blue70: #8e1a47; --blue80: #5e0f2e; --blue20: #f6c9d6; --blue10: #fbf0f3;
  --purple: #d6335e; --purple-hdr: #d6335e; --purple70: #b4235a;
  --cyan: #e8466f; --cyan20: #fdf1f4; --mint: #ffb3c7; --orchid: #f4a6bf; --focus: #ff5c8a;
  --navy: #33102c; --inset: #1e0a1a;
  --ph: #dccfd5; --ph-dark: rgba(255, 255, 255, .42);
  --display: 'Sora', 'Helvetica Neue', helvetica, arial, sans-serif;
  --text: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif;
  --ease-btn: cubic-bezier(.4, 0, 1, 1); --ease-nav: cubic-bezier(.28, .11, .32, 1); --ease-link: cubic-bezier(0, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* reserve the scrollbar gutter like the reference page (layout width 1425 in a 1440 window) */
html { scrollbar-gutter: stable; background: var(--page); }
body { margin: 0; background: var(--page); color: var(--body); font: 400 16px/1.4 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* container: 7% side padding at >=1200 (x 100..1326 at a 1425 layout width) */
.wrap { width: 100%; max-width: 1980px; margin: 0 auto; padding: 0 7%; }
.sec { position: relative; }

/* section tags (hidden unless ?tags=1) */
.tag { position: absolute; top: 8px; left: 8px; z-index: 60; pointer-events: none; font: 700 11px/1 var(--text);
  letter-spacing: .04em; color: #111; background: #ffd400; padding: 4px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.tag--nav { top: 34px; left: 2px; }
html.clean .tag { display: none; }

/* type */
.h1 { font: 500 72px/72px var(--display); }
.h2 { font: 500 60px/60px var(--display); }
.h2f { font: 500 48px/60px var(--display); letter-spacing: -.96px; color: var(--blue); }
.h4d { font: 500 36px/39.96px var(--display); }
.lead { font: 400 18px/27px var(--text); }
.eyebrow { font: 600 16px/20.64px var(--text); text-transform: uppercase; }
.center { text-align: center; }
/* one line of a headline (the hero h1 in the markup; the other headlines are split by the motion script): a block, so
   the lines break where they did, and the scroll motion layer can raise them one by one */
.m-ln { display: block; }

/* buttons */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 24px; border-radius: 9999px; border: 1px solid transparent; font: 600 18px/18px var(--text);
  white-space: nowrap; cursor: pointer; transition: color .2s var(--ease-btn), background-color .2s var(--ease-btn), border-color .2s var(--ease-btn); }
.btn:focus-visible { border-color: #fff; outline: 2px solid var(--focus); outline-offset: 2px; }
/* white text (4.67:1 on #d6335e; the skeleton's #fbf0f3 gave 4.20:1) */
.btn-purple { color: #fff; border-color: #fff; }
.btn-purple::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--purple);
  transition: background-color .2s var(--ease-btn); }
.btn-purple:hover::before { background: var(--purple70); }
.btn-light { background: var(--cyan20); border-color: var(--cyan20); color: var(--blue); }
.btn-light:hover { color: var(--blue70); background: var(--blue10); }
.btn-ghost-dark { color: #f7f2f4; border-color: #f7f2f4; }
.btn-ghost-dark:hover { color: var(--blue20); border-color: var(--blue20); }
.btn-ghost-blue { color: var(--blue); border-color: var(--blue); }
.btn-ghost-blue:hover { color: var(--blue70); border-color: var(--blue70); }

/* text link with arrow */
.tlink { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-top: 4px; font: 600 16px/22.4px var(--text);
  color: var(--blue); transition: color .3s var(--ease-link), transform .3s var(--ease-link); }
.tlink::after { content: ""; position: absolute; left: 0; right: 24px; bottom: -4px; height: 2px; background: currentColor; opacity: 0;
  transition: opacity .3s var(--ease-link); }
.tlink:hover { color: var(--blue70); transform: translateY(-4px); }
.tlink:hover::after { opacity: 1; }
.tlink svg { width: 16px; height: 16px; flex: none; }

/* neutral image slot (kept from the skeleton; no longer used on this content page) */
.slot { --sb: rgba(255, 255, 255, .06); --sl: rgba(255, 255, 255, .26); --lbg: rgba(30,10,26,.62); --lc: rgba(255, 255, 255, .92);
  position: relative; overflow: hidden; display: grid; place-items: center; border: 1px dashed var(--sl);
  background:
    linear-gradient(to top right, transparent calc(50% - .75px), var(--sl) calc(50% - .75px), var(--sl) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to bottom right, transparent calc(50% - .75px), var(--sl) calc(50% - .75px), var(--sl) calc(50% + .75px), transparent calc(50% + .75px)),
    var(--sb); }
.slot__lbl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 80%; padding: 10px 16px;
  border-radius: 12px; background: var(--lbg); color: var(--lc); text-align: center; font: 600 12px/16px var(--text); letter-spacing: .06em;
  text-transform: uppercase; }
.slot__lbl small { font: 400 13px/18px var(--text); letter-spacing: 0; text-transform: none; opacity: .88; }

/* ---------------- S01 + S02 header ---------------- */
.hdr { position: sticky; top: 0; z-index: 51; height: 60px; transition: height .28s cubic-bezier(.33,1,.68,1); }
.hdr.ann-closed { height: 0; }
.ann { position: relative; z-index: 0; height: 60px; background: var(--ink); color: #fff; display: flex; align-items: center;
  justify-content: center; padding: 0 72px; overflow: hidden;
  transition: height .28s cubic-bezier(.33,1,.68,1), padding .28s cubic-bezier(.33,1,.68,1), opacity .16s linear; }
.hdr.ann-closed .ann { height: 0; opacity: 0; }
.ann__in { display: flex; align-items: center; justify-content: center; gap: 96px; width: 100%; }
.ann__msg { font: 400 18px/27px var(--text); text-align: center; }
.ann__cta { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 600 16px/16px var(--text); white-space: nowrap; }
.ann__cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #fff; opacity: 0; transition: opacity .2s ease; }
.ann__cta:hover::after { opacity: 1; }
.ann__arrow { width: 20px; height: 10px; }
.ann__x { position: absolute; right: 32px; top: 22px; width: 16px; height: 16px; color: #fff; transition: opacity .3s ease, transform .3s ease; }
.ann__x:hover { opacity: .75; }

.ovl { position: fixed; inset: 0; z-index: 1; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
  transition: opacity .36s var(--ease-nav), visibility 0s linear .36s; }
.ovl.on { opacity: 1; visibility: visible; transition: opacity .36s var(--ease-nav), visibility 0s; }
.navwrap { position: absolute; z-index: 2; left: 0; right: 0; top: 100%; padding: 16px 24px; pointer-events: none; }
.pill { pointer-events: auto; max-width: 1360px; height: 58px; margin: 0 auto; background: #fff; border-radius: 999px;
  box-shadow: 0 5px 25px rgba(0,0,0,.1); padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; }
.pill__l, .pill__r { display: flex; align-items: center; }
.pill__logo { width: 116px; height: 36px; display: flex; align-items: center; }
.pill__logo img { height: 36px; width: auto; display: block; }
.mnav { display: flex; gap: 2px; margin-left: 16px; }
.mnav__a { display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 10px; border-radius: 999px; font: 600 16px/18px var(--text);
  color: var(--ink); white-space: nowrap; transition: background-color .2s var(--ease-nav), box-shadow .2s var(--ease-nav); }
.mnav__a:hover { background: var(--page); }
.mnav__a.open { background: var(--blue20); }
.chev { width: 18px; height: 18px; flex: none; }
.pill__r { gap: 6px; }
.lang { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 8px; border-radius: 24px; font: 600 16px/20px var(--text);
  color: var(--ink); transition: background-color .2s var(--ease-nav); }
.lang:hover { background: var(--page); }
.lang.open { background: var(--blue20); }
.lang svg { width: 18px; height: 18px; }
.login { display: inline-flex; align-items: center; height: 40px; padding: 9px 12px; border-radius: 24px; font: 600 16px/20px var(--text);
  letter-spacing: -.18px; color: var(--ink); transition: background-color .2s var(--ease-nav); }
.login:hover { background: var(--blue20); }
.hcta { display: inline-flex; align-items: center; justify-content: center; min-width: 154px; height: 40px; padding: 9px 18px;
  border-radius: 999px; background: var(--purple-hdr); color: #fff; font: 600 16px/16px var(--text); white-space: nowrap; }

/* mega menus */
.mm { pointer-events: auto; position: absolute; top: 86px; left: 50%; width: calc(100% - 48px); max-width: 1360px; background: #fff;
  border-radius: 40px; padding: 40px; box-shadow: 0 5px 25px rgba(0,0,0,.1); opacity: 0; visibility: hidden;
  transform: translate(-50%, -10px); overflow: hidden;
  transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s linear .36s; }
.mm.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s; }
.mm--tabs { display: flex; }
.mm__side { width: 275px; flex: none; display: flex; flex-direction: column; gap: 8px; }
/* min-height (was height) so a two-line real tab name grows the tab instead of overflowing it */
.mm__tab { display: flex; align-items: center; gap: 12px; width: 275px; min-height: 55px; padding: 8px 16px 8px 8px; border-radius: 16px;
  font: 600 18px/23px var(--text); color: var(--blue70); text-align: left; transition: background-color .36s var(--ease-nav), color .36s var(--ease-nav); }
.mm__tab.on { background: var(--blue20); color: var(--ink); }
.mm__tab--link { color: var(--blue); }
.mm__ico { width: 39px; height: 39px; flex: none; border-radius: 8px; background: var(--page); display: grid; place-items: center; color: var(--blue); }
/* our own 18px line glyph per tab (in place of the skeleton's outlined square) */
.mm__ico svg { width: 18px; height: 18px; display: block; }
.mm__tab.on .mm__ico { background: var(--blue); color: #fff; }
/* the panes share one grid cell, so a menu keeps the height of its tallest pane while you hover the tabs; the promo
   sits at the bottom of every pane, so it does not move either */
.mm__main { flex: 1; min-width: 0; margin-left: 40px; padding-left: 40px; border-left: 1px solid var(--divider); display: grid; }
.mm__pane { grid-area: 1 / 1; display: flex; flex-direction: column; visibility: hidden; }
.mm__pane.on { visibility: inherit; }
.mm__pane > .mm__promo { margin-top: auto; }
.mm__pane > .mm__cols { margin-bottom: 25px; }
.mm__pane > .mm__title { align-self: flex-start; }
.mm__title { display: inline-flex; align-items: center; gap: 12px; height: 55px; font: 600 30px/34px var(--text); color: var(--ink); }
.mm__title--link { color: var(--blue); padding: 0 12px; margin-left: -12px; border-radius: 16px; transition: background-color .2s var(--ease-nav); }
.mm__title--link:hover { background: var(--page); }
.mm__title svg { width: 24px; height: 24px; }
.mm__cols { display: grid; grid-template-columns: 442px 442px; column-gap: 40px; margin-top: 40px; }
/* a pane with three link columns (the Solutions menu's Sectors tab, 21 Oct 2026) */
.mm__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.mm__h { font: 600 16px/21px var(--text); color: var(--menu-grey); margin-bottom: 24px; }
.mm__links { display: flex; flex-direction: column; gap: 12px; }
.mm__links li { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
.mm__links a { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/22.4px var(--text); color: var(--blue); }
.mm__links a:hover { color: var(--blue70); text-decoration: underline; text-underline-offset: 4px; }
.mm__links svg { width: 16px; height: 16px; }
.mm__sub { font: 400 14px/18px var(--text); color: var(--menu-grey); }
.mm__promo { position: relative; display: flex; gap: 32px; margin-top: 25px; padding: 32px; border-radius: 16px; background: var(--purple); color: #fff; }
.mm__ptext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm__ptitle { font: 600 30px/36px var(--text); }
.mm__pdesc { font: 400 16px/24px var(--text); margin-top: 8px; }
.mm__plink { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 16px/20px var(--text); }
.mm__pmedia { width: 445px; height: 284px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,179,199,0) 0 26px, rgba(255,179,199,.50) 26px 28px, rgba(255,179,199,0) 28px 46px),
              linear-gradient(135deg, #e8466f 0%, #f0759a 45%, #b4235a 100%); }
.mm__promo--icon { padding: 32px 208px 32px 32px; }
.mm__promo--icon .mm__ptext { max-width: 400px; }
.mm__burst { position: absolute; right: 34px; top: 50%; width: 140px; height: 140px; margin-top: -70px; }
/* drawn mini cards inside the promo media (our own drawings, ILLUSTRATIVE) */
.mini { width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 14px; background: #fff; color: var(--body);
  box-shadow: 0 12px 30px rgba(94,15,46,.28); }
.mini__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.mini i { display: block; height: 12px; border-radius: 6px; background: var(--blue20); }
.mini i:first-of-type { background: var(--blue); }
.mini__q { font: 500 17px/23px var(--display); color: var(--ink); }
.mini__a { font: 400 14px/20px var(--text); }
.mini__a b { font-weight: 600; color: var(--blue70); }
.mini__s { font: 400 13px/18px var(--text); color: var(--grey60); }
/* the Polls promo: a ballot with the real question and its answer labels, no numbers */
.mini__opts { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.mini__opts li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  font: 400 14px/18px var(--text); color: var(--body); }
.mini__opts li::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid var(--blue); }
.langdd { pointer-events: auto; position: absolute; top: 77px; width: 304px; background: #fff; border-radius: 24px; padding: 16px;
  box-shadow: 0 5px 25px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-10px); transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s linear .36s; }
.langdd.on { opacity: 1; visibility: visible; transform: none; transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s; }
.langdd a { position: relative; display: block; height: 35.6px; padding: 8px 8px 8px 31px; border-radius: 8px; font: 400 14px/19.6px var(--text); color: var(--ink); }
.langdd a:hover { background: var(--page); }
.langdd a.cur::before { content: ""; position: absolute; left: 16px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
/* scroll progress (owner, 20 Oct 2026, scroll motion layer): a thin rose bar along the bottom edge of the S01 bar (the top
   of the window once the bar is closed) that fills as the page scrolls. CSS scroll-driven where the browser has it, so it
   also works on the pages that copy this header (no script needed there); elsewhere it stays hidden unless the motion
   script drives it (html.sp-js sets --sp). Hidden with reduced motion and with ?motion=off (html.nomo). */
.sprog { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; height: 3px; pointer-events: none; display: none;
  transform-origin: 0 50%; scale: 0 1; background: linear-gradient(90deg, #b4235a 0%, #e8466f 55%, #ffb3c7 100%);
  box-shadow: 0 0 12px rgba(232,70,111,.7), 0 0 2px rgba(255,179,199,.9); }
@keyframes sprog { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.nomo):not(.sm-js) .sprog { display: block; animation: sprog linear both; animation-timeline: scroll(root block); }
  }
  html.sp-js .sprog { display: block; scale: var(--sp, 0) 1; }
}

/* ---------------- S01 + S02 on smaller screens (responsive, 21 Oct 2026; owner: "make it phone friendly") ----------------
   RESPONSIVE breakpoints, the same on every wine page (wine-base.css RESPONSIVE note): max-width 1199.98px small laptop,
   1023.98px tablet landscape, 767.98px tablet portrait, 479.98px phone; each covers the screens narrower than 1200 /
   1024 / 768 / 480, so a 1024 tablet in landscape keeps the desktop header. Desktop (1200px and up) does not change:
   every rule below is inside one of these queries, and the menu button (.mbtn) and the menu panel (.mpanel) are
   display: none at 1024px and up.
   Below 1024px:
     - S01 bar 56px high, the poll line in two lines at most (then an ellipsis), the link and a 44px close button; it scrolls
       away with the page (the header sticks at top: -56px, so only the pill stays in view);
     - the pill (56px; 52px below 480px) holds the logo, Talk to sales and the 44px menu button; the mega menus, the
       market switch and Log in move into the menu panel;
     - #mpanel (built by the menu script from the same menus): full height, the top-level items as accordions, "Our panel"
       as a link, the market switch, then Log in and Talk to sales; Esc or the close button closes it, Tab stays inside it,
       the page under it does not scroll (html.mp-open). From 640px it is a 480px drawer on the right over a dimmed page
       (a tap on the dimmed part closes it).
   Below 480px the S01 bar is 72px high: the poll line in up to three lines and the link as a 44px arrow (its words stay
   for screen readers), so the whole finding shows.
   A page under this header clears the pill with: S01 bar 56 + 10 + pill 56 = 122px (below 480px: 72 + 8 + 52 = 132px);
   with the S01 bar closed, 66px (60px). The header is in the page flow (sticky), so a hero right under it only needs
   the part under the bar: 66px (60px) plus its own gap. */
.mbtn, .mpanel { display: none; }
@media (max-width: 1199.98px) {
  .ann { padding: 0 64px; }
  .ann__in { gap: 32px; }
  /* the pill keeps every item on one line down to 1024px (Log in wrapped at 1024) */
  .mnav { margin-left: 8px; }
  .mnav__a { padding-left: 8px; padding-right: 8px; }
  .login { white-space: nowrap; }
  .hcta { min-width: 0; }
  /* the mega menus keep their look; their columns and promo share the narrower width */
  .mm__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm__pmedia { width: 46%; min-width: 0; }
  .mm__promo--icon { padding-right: 32px; }
  .mm__burst { display: none; }
}
@media (max-width: 1023.98px) {
  .hdr { height: 56px; top: -56px; }
  .hdr.ann-closed { top: 0; }
  .ann { height: 56px; padding: 0 52px 0 20px; }
  .ann__in { gap: 16px; justify-content: space-between; }
  .ann__msg { flex: 1; min-width: 0; font: 400 15px/20px var(--text); text-align: left; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ann__cta { flex: none; min-height: 44px; font-size: 15px; }
  .ann__cta::after { bottom: 10px; }
  .ann__x { right: 4px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; }
  .ann__x svg { width: 16px; height: 16px; display: block; }
  .navwrap { padding: 10px 16px; }
  .pill { height: 56px; padding: 6px 6px 6px 18px; }
  .pill__logo { width: auto; height: 44px; }
  .mnav, .lang, .login, .mm, .langdd, .ovl { display: none; }
  .pill__r { gap: 8px; }
  .hcta { min-width: 0; height: 44px; padding: 0 18px; }
  .mbtn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; color: var(--ink);
    background: var(--page); transition: background-color .2s var(--ease-nav); }
  .mbtn:hover, .mbtn[aria-expanded="true"] { background: var(--blue20); }
  .mbtn svg { width: 22px; height: 22px; display: block; }

  /* the menu panel */
  .mpanel { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #fff; color: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .3s var(--ease-nav), visibility 0s linear .3s; }
  .mpanel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s var(--ease-nav), visibility 0s; }
  html.mp-open, html.mp-open body { overflow: hidden; }
  .mp__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 76px;
    padding: 0 22px 0 34px; border-bottom: 1px solid var(--line); }
  .mp__x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--page); color: var(--ink); }
  .mp__x:hover { background: var(--blue20); }
  .mp__x svg { width: 16px; height: 16px; display: block; }
  .mp__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 34px 24px; }
  .mp__item { border-bottom: 1px solid var(--line); }
  .mp__hd { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; text-align: left;
    font: 600 20px/26px var(--text); color: var(--ink); }
  .mp__hd > span { flex: 1; min-width: 0; }
  .mp__hd > svg { width: 22px; height: 22px; flex: none; transition: transform .25s var(--ease-nav); }
  .mp__hd[aria-expanded="true"] { color: var(--blue); }
  .mp__hd[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
  .mp__hd--a { justify-content: space-between; }
  .mp__hd--a > svg { width: 18px; height: 18px; color: var(--blue); }
  .mp__mk > svg:first-child { width: 22px; height: 22px; color: var(--ink); }
  .mp__bd { padding: 0 0 20px; }
  .mp__bd[hidden] { display: none; }
  .mp__grp + .mp__grp { margin-top: 12px; }
  .mp__h { display: flex; align-items: center; gap: 6px; min-height: 40px; font: 600 13px/16px var(--text); letter-spacing: .06em;
    text-transform: uppercase; color: var(--menu-grey); }
  a.mp__h { min-height: 44px; color: var(--blue70); }
  .mp__h svg { width: 14px; height: 14px; flex: none; }
  .mp__links li { display: flex; flex-direction: column; }
  .mp__links a, .mp__all { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; font: 600 17px/22px var(--text); color: var(--blue); }
  .mp__links a.cur { color: var(--ink); }
  .mp__links a.cur::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
  .mp__sub { margin: -8px 0 6px; font: 400 14px/18px var(--text); color: var(--menu-grey); }
  .mp__all { margin-top: 8px; }
  .mp__all svg { width: 16px; height: 16px; flex: none; }
  .mp__foot { flex: none; display: flex; gap: 12px; padding: 16px 34px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .mp__foot a { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px;
    border-radius: 999px; font: 600 17px/20px var(--text); white-space: nowrap; }
  .mp__login { color: var(--ink); border: 1px solid var(--divider); }
  .mp__cta { background: var(--purple-hdr); color: #fff; }
}
/* touch screens of 1024px and up (tablets in landscape keep the desktop header): the S01 link, the close button and the
   pill's items get a 44px hit area (an invisible extension) without moving anything */
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  .ann__cta::before { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }
  .ann__x::before { content: ""; position: absolute; inset: -14px; }
  .pill__logo, .mnav__a, .lang, .login, .hcta { position: relative; }
  .pill__logo::before, .mnav__a::before, .lang::before, .login::before, .hcta::before { content: ""; position: absolute; left: 0; right: 0;
    top: calc(50% - 22px); bottom: calc(50% - 22px); }
}
/* tablets: the menu panel is a drawer on the right (480px) over the dimmed page; the dimmed part is the panel's own
   background, so a tap there closes it (the menu script) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .mpanel { align-items: flex-end; background: rgba(30,10,26,.45); }
  .mp__top, .mp__body, .mp__foot { width: min(480px, 100%); background: #fff; }
}
@media (max-width: 479.98px) {
  /* the S01 bar: the poll line in up to three lines over the full width; the whole bar is the link (its words stay for
     screen readers, its arrow sits in the bottom right corner under the close button) */
  .hdr { height: 72px; top: -72px; }
  .ann { height: 72px; padding: 0 48px 0 16px; }
  .ann__in { gap: 0; }
  .ann__msg { font-size: 15px; line-height: 19px; -webkit-line-clamp: 3; }
  .ann__cta { position: static; flex: none; width: 0; min-height: 0; overflow: visible; font-size: 0; line-height: 0; gap: 0; }
  .ann__cta::before { content: ""; position: absolute; inset: 0; z-index: 0; }
  .ann__cta:focus-visible { outline: none; }
  .ann__cta:focus-visible::before { outline: 2px solid #fff; outline-offset: -4px; }
  .ann__cta::after { content: none; }
  .ann__arrow { position: absolute; right: 17px; bottom: 11px; width: 18px; height: 10px; }
  .ann__x { top: 4px; z-index: 1; }
  .navwrap { padding: 8px 12px; }
  .pill { height: 52px; padding: 4px 4px 4px 14px; }
  .pill__logo img { height: 32px; }
  .hcta { padding: 0 15px; font-size: 15px; }
  .mp__top { height: 68px; padding: 0 16px 0 26px; }
  .mp__body { padding: 4px 24px 24px; }
  .mp__foot { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .mpanel, .mpanel.on, .mp__hd > svg { transition: none; }
}

/* ===== 2. footer: copied from catalyse-home-wine.html ===== */
/* ---------------- S16 footer ---------------- */
.ftr { background: var(--ink); color: var(--blue10); }
.ftr__main { padding: 80px 40px 40px; }
.ftr__in { max-width: 1360px; margin: 0 auto; }
.ftr__logo { display: flex; width: max-content; height: 58px; }
.ftr__logo img { height: 58px; width: auto; display: block; filter: brightness(0) invert(1); }
/* groups share grid rows, so second-row headings line up across columns (36px below the tallest first-row group);
   a column with a single group spans both rows */
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; grid-auto-flow: column;
  column-gap: 32px; row-gap: 36px; margin-top: 39px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
.ftr__col { display: contents; }
.ftr__col > .ftr__grp:only-child { grid-row: span 2; }
.ftr__grp { display: flex; flex-direction: column; gap: 12px; }
.ftr__grp h3 { padding-bottom: 0; font: 600 12px/14.4px var(--text); text-transform: uppercase; color: var(--orchid); }
/* links start 35px below the heading top, on a 32px pitch */
.ftr__grp ul { display: flex; flex-direction: column; gap: 11px; margin-top: 6.6px; }
.ftr__grp li { font-size: 14px; line-height: 21px; }
.ftr__grp a { font: 400 14px/21px var(--text); color: var(--blue10); transition: color .2s ease; }
.ftr__grp a:hover { color: rgba(255,255,255,.85); }
.ftr__min { padding: 0 40px 40px; }
.ftr__row { display: flex; justify-content: space-between; align-items: center; height: 20px; }
.social { display: flex; gap: 23px; }
.social a { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; transition: opacity .2s ease; }
.social a:hover { opacity: .75; }
.social svg { width: 20px; height: 20px; display: block; }
.copy { font: 400 14px/18px var(--text); }
.ftr__hr { height: 1px; border: 0; margin: 27px 0 0; background: rgba(255,255,255,.12); }
.legal { display: flex; align-items: center; gap: 18px; height: 24px; margin-top: 27px; }
.legal a, .legal button { font: 400 14px/18px var(--text); color: var(--blue20); }
.legal a:hover, .legal button:hover { text-decoration: underline; }
/* smaller screens (responsive, 21 Oct 2026; breakpoints in the header CSS above): below 1024px the four link columns
   become two, links are 16px in 44px rows, the social row and the legal row wrap; below 480px each group is an
   accordion (the footer script turns its heading into a button there and back from 480px up) */
@media (max-width: 1023.98px) {
  .ftr__main { padding: 56px 7% 32px; }
  .ftr__min { padding: 0 7% 32px; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; row-gap: 40px; margin-top: 32px; }
  .ftr__col { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
  .ftr__col > .ftr__grp:only-child { grid-row: auto; }
  .ftr__grp { gap: 4px; }
  .ftr__grp h3 { font-size: 13px; line-height: 16px; }
  .ftr__grp ul { gap: 0; margin-top: 4px; }
  .ftr__grp li { font-size: 16px; line-height: 22px; }
  .ftr__grp a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 22px; }
  .ftr__row { flex-wrap: wrap; gap: 8px 24px; height: auto; }
  .social { gap: 4px; margin-left: -12px; }
  .social a { width: 44px; height: 44px; }
  .copy { font-size: 15px; line-height: 20px; }
  .ftr__hr { margin-top: 16px; }
  .legal { flex-wrap: wrap; gap: 0 24px; height: auto; margin-top: 12px; }
  .legal a, .legal button { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 20px; }
}
@media (max-width: 479.98px) {
  .ftr__main { padding-top: 48px; padding-bottom: 24px; }
  .ftr__cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 28px; padding-top: 0; }
  .ftr__col { gap: 0; }
  .ftr__grp { gap: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .ftr__hb { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; text-align: left;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
  .ftr__hb svg { width: 18px; height: 18px; flex: none; transition: transform .25s ease; }
  .ftr__hb[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ftr__grp ul { margin: 0 0 12px; }
  .ftr__grp ul[hidden] { display: none; }
  .legal { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ===== 3. the poll components as approved on 19 Oct 2026: polls.CSS, unchanged ===== */
/* GENERATED by site-src/build.py from site-src/polls.py: do not edit.
   POLL PAGES (19 Oct 2026, owner: "https://mobbin.com/ please build a clean build like this"): white, generous space, a
   centred tight headline, grey supporting text, black + grey pill buttons, soft grey rounded frames holding white
   cards, underline tabs, monochrome bars. No blue text. The site header switches to a white variant (sh--light). */
.sk .mb, .sk .lp-hero, .sk .lp-topics, .sk .yg, .sk .yg-sim { --mb-ink: #111111; --mb-grey: #6E6E73; --mb-soft: #F4F4F4; --mb-line: #ECECEC; --mb-track: #EFEFEF; }
.sk .mb { background: #FFFFFF; color: var(--mb-ink); padding: 0 0 64px; }
.sk .mb-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--sk-gutter); box-sizing: content-box; }
.sk .mb-top { padding-top: calc(var(--sk-bar-h) + 40px); text-align: center; }
.sk .mb .crumb { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; font-size: 12.5px; color: var(--mb-grey); }
.sk .mb .crumb a { color: var(--mb-grey); }
.sk .mb .crumb a:hover, .sk .mb .crumb [aria-current] { color: var(--mb-ink); }
.sk .mb-title { max-width: 760px; margin: 0 auto; font: 600 40px/1.1 var(--sk-font); letter-spacing: -.04em; color: var(--mb-ink); text-wrap: balance; }
.sk .mb-meta { margin-top: 12px; font-size: 13px; color: var(--mb-grey); }
.sk .mb-meta span { margin: 0 6px; }
.sk .mb-sum { max-width: 600px; margin: 10px auto 0; font-size: 16px; line-height: 1.45; letter-spacing: -.01em; color: var(--mb-grey); text-wrap: pretty; }
.sk .mb-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sk .mb-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: #EFEFEF;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--mb-ink); transition: background .2s var(--sk-e); }
.sk .mb-btn:hover { background: #E6E6E6; }
.sk .mb-btn--dark { background: var(--mb-ink); color: #FFFFFF; }
.sk .mb-btn--dark:hover { background: #2A2A2A; }

/* the frame: a soft grey rounded panel holding a white sheet */
.sk .mb-frame { margin-top: 28px; padding: 14px; border-radius: 26px; background: var(--mb-soft); text-align: left; }
.sk .mb-sheet { padding: 16px 24px 22px; border-radius: 18px; background: #FFFFFF; }
.sk .mb-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--mb-line); }
.sk .mb-tabs button { position: relative; padding: 2px 0 10px; border: 0; background: none; font: 500 13.5px/1.2 var(--sk-font);
  color: #8E8E93; cursor: pointer; transition: color .15s var(--sk-e); }
.sk .mb-tabs button:hover { color: var(--mb-ink); }
.sk .mb-tabs button[aria-selected="true"] { color: var(--mb-ink); }
.sk .mb-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mb-ink); }
.sk .mb-panel { padding-top: 16px; }

/* bars */
.sk .mb-bars { display: grid; gap: 9px; list-style: none; }
.sk .mb-bars li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 44px; gap: 14px; align-items: center; }
.sk .mb-bars .l { font-size: 14px; line-height: 1.3; color: var(--mb-ink); }
.sk .mb-bars .t { height: 8px; border-radius: 999px; background: var(--mb-track); overflow: hidden; }
.sk .mb-bars .t i { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--mb-ink); }
.sk .mb-bars .v { text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sk .mb-bars li.tail .l, .sk .mb-bars li.tail .v { color: var(--mb-grey); }
.sk .mb-bars li.tail .t i { background: #C7C7CC; }

/* breakdown grid */
.sk .mb-scroll { margin: -6px; overflow-x: auto; overflow-y: hidden; }
.sk .mb-x { width: 100%; border-collapse: separate; border-spacing: 6px; font-variant-numeric: tabular-nums; }
.sk .mb-x caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sk .mb-x thead th { padding: 0 10px 6px; text-align: center; vertical-align: bottom; font-size: 12.5px; font-weight: 600; color: var(--mb-ink); }
.sk .mb-x thead th span { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--mb-grey); }
.sk .mb-x tbody th { width: 28%; padding-right: 8px; text-align: left; font-size: 13.5px; font-weight: 400; line-height: 1.3; color: var(--mb-ink); }
.sk .mb-x td { height: 34px; text-align: center; font-size: 13.5px; border-radius: 9px; background: #F6F6F6; }
.sk .mb-x td.all { font-weight: 700; background: #EDEDED; }
.sk .mb-x td.lo { color: var(--mb-grey); }
.sk .mb-x td.na { color: #C7C7CC; background: #FAFAFA; }
.sk .mb-x tr.tail th, .sk .mb-x tr.tail td { color: var(--mb-grey); }

/* method */
.sk .mb-method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; margin: 22px auto 0; text-align: left; }
.sk .mb-method dt { font-size: 11.5px; color: var(--mb-grey); }
.sk .mb-method dd { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--mb-ink); }

/* rails of cards */
.sk .mb-grey { padding-top: 56px; background: var(--mb-soft); }
.sk .mb-rail { padding-top: 56px; }
.sk .mb-grey .mb-rail { padding-top: 0; }
.sk .mb-hrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.sk .mb-h2 { font: 600 28px/1.15 var(--sk-font); letter-spacing: -.035em; color: var(--mb-ink); }
.sk .mb-h2sub { margin-top: 6px; font-size: 14.5px; color: var(--mb-grey); }
.sk .mb-arrows { display: flex; gap: 8px; }
.sk .mb-arrows[hidden] { display: none; }
.sk .mb-arrows button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #EAEAEA; font-size: 17px; line-height: 1;
  color: var(--mb-ink); cursor: pointer; transition: background .2s var(--sk-e), opacity .2s var(--sk-e); }
.sk .mb-grey .mb-arrows button { background: #FFFFFF; }
.sk .mb-arrows button:hover:not(:disabled) { background: #DEDEDE; }
.sk .mb-grey .mb-arrows button:hover:not(:disabled) { background: #F0F0F0; }
.sk .mb-arrows button:disabled { opacity: .4; cursor: default; }
.sk .mb-cards { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; list-style: none; scrollbar-width: thin; text-align: left; }
.sk .mb-cards > li { min-width: 0; scroll-snap-align: start; }
.sk .mb-card { display: flex; flex-direction: column; height: 100%; padding: 16px 16px 18px; border-radius: 20px; background: var(--mb-soft);
  color: var(--mb-ink); transition: background .2s var(--sk-e); }
.sk .mb-card:hover { background: #EDEDED; }
.sk .mb-grey .mb-card { background: #FFFFFF; }
.sk .mb-grey .mb-card:hover { background: #FAFAFA; }
.sk .mb-card .k { font-size: 13px; color: var(--mb-grey); }
.sk .mb-card .q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 4.05em;
  margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.sk .mb-card .mini { display: grid; gap: 8px; margin-top: auto; padding: 12px; border-radius: 14px; background: #FFFFFF; }
.sk .mb-grey .mb-card .mini { background: var(--mb-soft); }
.sk .mb-card .q + .mini { margin-top: 14px; }
.sk .mb-card .mr { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--mb-grey); }
.sk .mb-card .ml { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sk .mb-card .mr b { font-size: 13.5px; font-weight: 600; color: var(--mb-ink); }
.sk .mb-card .mt { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--mb-track); overflow: hidden; }
.sk .mb-grey .mb-card .mt { background: #E4E4E4; }
.sk .mb-card .mt i { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--mb-ink); }

/* topics */
.sk .mb-browse { padding-top: 96px; text-align: center; }
.sk .mb-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 18px; }
.sk .mb-pills a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 999px; background: var(--mb-soft);
  font-size: 14px; font-weight: 500; color: var(--mb-ink); transition: background .2s var(--sk-e); }
.sk .mb-pills a:hover { background: #EAEAEA; }
.sk .mb-pills a[aria-current] { background: var(--mb-ink); color: #FFFFFF; }
.sk .mb-pills a span { font-size: 13px; color: var(--mb-grey); }
.sk .mb-pills a[aria-current] span { color: #B5B5BA; }
.sk .mb-hub .mb-pills { margin-top: 22px; }
.sk .mb-hub .mb-rail { padding-top: 40px; text-align: left; }

/* ===== the question page as a landing page (owner, 19 Oct 2026: mobbin's floating colour tiles, two-tone headings,
   rotating survey-screen cards) ===== */
.sk .lp-hero { position: relative; overflow: hidden; padding: calc(var(--sk-bar-h) + 40px) 0 60px; background: #F4F4F4; text-align: center; color: #111111; }
.sk .lp-in { position: relative; z-index: 1; }
.sk .lp-hero .crumb { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; font-size: 12.5px; color: #6E6E73; }
.sk .lp-hero .crumb a { color: #6E6E73; }
.sk .lp-hero .crumb a:hover, .sk .lp-hero .crumb [aria-current] { color: #111111; }
.sk .lp-h1 { max-width: 720px; margin: 0 auto; font: 600 40px/1.1 var(--sk-font); letter-spacing: -.045em; text-wrap: balance; }
.sk .lp-h2 { font: 600 30px/1.15 var(--sk-font); letter-spacing: -.04em; text-wrap: balance; }
.sk .lp-h1 span, .sk .lp-h2 span { display: block; }
.sk .lp-h1 .g, .sk .lp-h2 .g { color: #8E8E93; }
.sk .lp-h1 .b, .sk .lp-h2 .b { color: #111111; }
.sk .lp-q { max-width: 600px; margin: 16px auto 0; font-size: 15.5px; line-height: 1.5; color: #6E6E73; text-wrap: pretty; }
.sk .lp-q q { color: #111111; }
.sk .lp-meta { margin-top: 8px; font-size: 12.5px; color: #8E8E93; }
.sk .lp-meta span { margin: 0 6px; }
.sk .mb-btn--white { background: #FFFFFF; }
.sk .mb-btn--white:hover { background: #FAFAFA; }

/* floating app-icon tiles */
.sk .lp-tiles { position: absolute; inset: 0; pointer-events: none; }
.sk .lp-tile { position: absolute; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 26%; color: #FFFFFF;
  box-shadow: 0 24px 46px -14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35); animation: lp-float 8s ease-in-out infinite; }
.sk .lp-tile svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk .lp-tile.is-blur { filter: blur(3px); opacity: .92; }
@keyframes lp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* sections */
.sk .lp-sec { padding-top: 60px; text-align: center; }
.sk .lp-lede { max-width: 560px; margin: 8px auto 0; font-size: 15px; line-height: 1.5; color: #6E6E73; text-wrap: pretty; }
.sk .lp-sec .mb-frame { margin-top: 24px; }

/* rotating similar-question cards */
.sk .lp-sim { padding-bottom: 60px; overflow: hidden; }
.sk .lp-mq { margin-top: 26px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.sk .lp-mq-track { display: flex; width: max-content; animation: lp-mq var(--dur, 70s) linear infinite; }
.sk .lp-mq:hover .lp-mq-track, .sk .lp-mq:focus-within .lp-mq-track { animation-play-state: paused; }
.sk .lp-mq-set { display: flex; gap: 16px; padding-right: 16px; }
@keyframes lp-mq { to { transform: translateX(-50%); } }
.sk .sc { position: relative; flex: none; display: block; width: 290px; height: 300px; padding: 38px 24px 0; border-radius: 28px; background: #F4F4F4;
  overflow: hidden; color: #111111; text-align: left; transition: background .25s var(--sk-e); }
.sk .sc:hover { background: #ECECEC; }
.sk .sc-icon { position: absolute; top: 12px; left: 12px; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  color: #FFFFFF; box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sk .sc-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk .sc-screen { display: flex; flex-direction: column; height: 100%; padding: 12px 14px 0; border-radius: 18px 18px 0 0; background: #FFFFFF; }
.sk .sc-bar { display: flex; justify-content: space-between; align-items: baseline; padding-left: 38px; font-size: 11.5px; color: #111111; }
.sk .sc-bar span:nth-child(2) { font-size: 10.5px; color: #8E8E93; }
.sk .sc-prog { height: 2px; margin: 10px -14px 0; background: #EFEFEF; }
.sk .sc-prog i { display: block; width: 42%; height: 100%; background: #111111; }
.sk .sc-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 12px;
  font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.sk .sc-opts { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
.sk .sc-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 30px; padding: 0 10px;
  border: 1px solid #E3E3E3; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.sk .sc-opt span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sk .sc-opt b { flex: none; font-weight: 700; }
.sk .sc-opt.is-top { border: 1.5px solid var(--acc); background: var(--acc-soft); }
.sk .sc-n { margin-top: auto; padding: 10px 0 14px; font-size: 11.5px; color: #8E8E93; }

/* topics, on grey with tiles */
.sk .lp-topics { position: relative; overflow: hidden; padding: 56px 0 64px; background: #F4F4F4; text-align: center; color: #111111; }
.sk .lp-topics .mb-pills { margin: 18px 0 16px; }
.sk .lp-topics .mb-pills a { background: #FFFFFF; }
.sk .lp-topics .mb-pills a:hover { background: #FAFAFA; }
.sk .lp-topics .mb-pills a[aria-current] { background: #111111; }

@media (prefers-reduced-motion: reduce) {
  .sk .lp-tile, .sk .lp-mq-track { animation: none; }
  .sk .lp-mq { overflow-x: auto; }
}
.shot .sk .lp-tile, .shot .sk .lp-mq-track { animation: none !important; }

/* ===== the question page in YouGov's single-poll layout (owner, 19 Oct 2026: "just like yougov"): question top
   left, published / fielded line, left the tabs + chart + download, right a coloured result card + Related topics,
   then the rotating similar-question cards. Compact sizes. ===== */
.sk .yg { background: #FFFFFF; color: #111111; padding: calc(var(--sk-bar-h) + 36px) 0 48px; }
.sk .yg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--sk-gutter); box-sizing: content-box; }
.sk .yg-kick { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6E6E73; }
.sk .yg-kick a { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 4px; border-radius: 999px;
  background: #F4F4F4; font-weight: 500; color: #111111; transition: background .2s var(--sk-e); }
.sk .yg-kick a:hover { background: #ECECEC; }
.sk .yg-kick i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #FFFFFF; }
.sk .yg-kick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk .yg-title { max-width: 860px; margin-top: 14px; font: 700 34px/1.15 var(--sk-font); letter-spacing: -.03em; color: #111111; text-wrap: balance; }
.sk .yg-meta { margin-top: 10px; font-size: 14.5px; color: #6E6E73; }
.sk .yg-meta span { margin: 0 3px; }
.sk .yg-cols { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 340px); justify-content: space-between; gap: 48px;
  margin-top: 26px; align-items: start; }
/* tabs: YouGov's outlined buttons, the chosen one with a dark 2px edge */
.sk .yg .mb-tabs { gap: 6px; padding-bottom: 14px; }
.sk .yg .mb-tabs button { padding: 6px 10px; border: 1px solid #D6D6DE; border-radius: 6px; font: 400 13px/1.2 var(--sk-font); color: #111111; }
.sk .yg .mb-tabs button:hover { border-color: #8E8E93; }
.sk .yg .mb-tabs button[aria-selected="true"] { padding: 5px 9px; border: 2px solid #111111; font-weight: 700; }
.sk .yg .mb-tabs button[aria-selected="true"]::after { display: none; }
.sk .yg .mb-panel { padding-top: 14px; }
/* bars in the topic colour (YouGov uses one colour for every bar) */
.sk .yg .mb-bars { gap: 4px; }
.sk .yg .mb-bars li { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 42px; gap: 12px; min-height: 30px; }
.sk .yg .mb-bars .l { font-size: 13.5px; }
.sk .yg .mb-bars .t { height: 14px; border-radius: 3px; background: #F0F0F3; }
.sk .yg .mb-bars .t i { border-radius: 3px; background: var(--acc); }
.sk .yg .mb-bars li.tail .t i { background: #C7C7CC; }
.sk .yg .mb-bars .v { font-size: 14px; font-weight: 700; }
.sk .yg-dl { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 18px; border: 1px solid #111111;
  border-radius: 999px; font-size: 14.5px; font-weight: 600; color: #111111; transition: background .2s var(--sk-e); }
.sk .yg-dl:hover { background: #F6F6F6; }
.sk .yg .mb-method { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; margin: 18px 0 0; }
/* right column */
.sk .yg-side { display: grid; gap: 14px; }
/* the headline card: colour, the question's icon and two blobs, under a frosted-glass panel that carries dark text */
.sk .yg-stat { position: relative; overflow: hidden; padding: 14px; border-radius: 22px; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .5); }
.sk .yg-stat .ico { position: absolute; right: -6px; top: -10px; width: 132px; height: 132px; fill: none; stroke: rgba(255, 255, 255, .7);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sk .yg-stat .blob { position: absolute; border-radius: 50%; }
.sk .yg-stat .b1 { left: -30px; bottom: -40px; width: 150px; height: 150px; background: rgba(255, 255, 255, .45); }
.sk .yg-stat .b2 { right: 40px; bottom: -24px; width: 90px; height: 90px; background: rgba(0, 0, 0, .14); }
.sk .yg-stat .glass { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px -14px rgba(0, 0, 0, .35); color: #111111; }
.sk .yg-stat .k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #3A3A3C; }
.sk .yg-stat .k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.sk .yg-stat .big { margin-top: 6px; font: 700 50px/1 var(--sk-font); letter-spacing: -.04em; color: #111111; }
.sk .yg-stat .lab { margin-top: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #111111; }
.sk .yg-stat .sum { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #3A3A3C; }
.sk .yg-h2 { font: 700 20px/1.2 var(--sk-font); letter-spacing: -.02em; color: #111111; }
.sk .yg-side .yg-h2 { margin-top: 10px; }
.sk .yg-side .mb-pills { justify-content: flex-start; gap: 6px; margin: 2px 0 0; }
.sk .yg-side .mb-pills a { height: 34px; padding: 0 13px; font-size: 13.5px; }
/* list pages: the same top, then grids of the colourful survey-screen cards */
.sk .yg-list { padding-bottom: 64px; }
.sk .yg-list .yg-kick span { font-weight: 500; }
.sk .yg-list .mb-pills { justify-content: flex-start; gap: 6px; margin: 20px 0 4px; }
.sk .yg-list .mb-pills a { height: 34px; padding: 0 13px; font-size: 13.5px; }
.sk .yg-gh { display: flex; align-items: baseline; gap: 12px; margin: 36px 0 0; }
.sk .yg-gh span { font-size: 13.5px; color: #6E6E73; }
.sk .yg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.sk .yg-grid .sc { width: auto; }
.sk .yg-ctas { display: flex; gap: 8px; margin-top: 22px; }

/* the rest of the Polls menu: icon tiles, empty states, rankings, trackers, daily question, text pages, newsletter */
.sk .yg-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #FFFFFF;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sk .yg-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk .yg-ic--lg { width: 64px; height: 64px; border-radius: 18px; }
.sk .yg-ic--lg svg { width: 30px; height: 30px; }
.sk .yg-empty { display: flex; gap: 22px; align-items: flex-start; margin-top: 28px; padding: 28px 30px; border-radius: 22px; background: #F6F6F8; max-width: 760px; }
.sk .yg-empty p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: #6E6E73; }
.sk .yg-empty .yg-ctas { margin-top: 16px; }
.sk .yg-empty + .mb-pills { margin-top: 18px; }
.sk .yg-rks, .sk .yg-tks { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 26px; }
.sk .yg-rk, .sk .yg-tk { display: flex; flex-direction: column; padding: 20px 22px 18px; border: 1px solid #ECECEC; border-radius: 20px;
  background: #FFFFFF; color: #111111; transition: border-color .2s var(--sk-e), box-shadow .2s var(--sk-e); }
.sk .yg-rk:hover, .sk .yg-tk:hover { border-color: #D6D6DE; box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .35); }
.sk .yg-rk .hd, .sk .yg-tk .hd { display: flex; gap: 12px; align-items: center; }
.sk .yg-rk .hd b, .sk .yg-tk .hd b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.sk .yg-rk .hd small, .sk .yg-tk .hd small { display: block; margin-top: 2px; font-size: 12.5px; color: #8E8E93; }
.sk .yg-rk ol { display: grid; gap: 8px; margin: 16px 0 0; list-style: none; }
.sk .yg-rk li { display: grid; grid-template-columns: 18px minmax(0, 150px) minmax(0, 1fr) 38px; gap: 10px; align-items: center; font-size: 13.5px; }
.sk .yg-rk .n { font-weight: 700; color: #8E8E93; }
.sk .yg-rk .l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sk .yg-rk .t { height: 8px; border-radius: 999px; background: #F0F0F3; overflow: hidden; }
.sk .yg-rk .t i { display: block; height: 100%; border-radius: 999px; }
.sk .yg-rk li b { text-align: right; font-weight: 700; }
.sk .yg-rk .go, .sk .yg-tk .k { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.sk .yg-tk .big { margin-top: 14px; font: 700 40px/1 var(--sk-font); letter-spacing: -.035em; }
.sk .yg-tk .lab { margin-top: 4px; font-size: 14.5px; color: #3A3A3C; }
.sk .yg-tk .spark { width: 100%; height: 40px; margin-top: 12px; }
.sk .yg-tk .spark line { stroke: #ECECEC; stroke-width: 1.5; }
.sk .yg-tk .spark line.dash { stroke: #C7C7CC; stroke-dasharray: 3 5; }
.sk .yg-tk .k { font-weight: 500; color: #8E8E93; }
.sk .yg-dailies { display: grid; gap: 16px; margin-top: 26px; max-width: 760px; }
.sk .yg-dailies.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.sk .yg-daily { padding: 24px 26px 22px; border: 1px solid #ECECEC; border-radius: 22px; background: #FFFFFF; }
.sk .yg-daily .hd { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #6E6E73; }
.sk .yg-daily h2 { margin-top: 14px; font: 700 24px/1.2 var(--sk-font); letter-spacing: -.02em; }
.sk .yg-daily .sum { margin: 8px 0 16px; font-size: 14.5px; line-height: 1.5; color: #6E6E73; }
.sk .yg-daily .yg-ctas { margin-top: 18px; }
.sk .yg-doc { display: grid; margin-top: 28px; max-width: 960px; border-top: 1px solid #ECECEC; }
.sk .yg-doc section { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; padding: 22px 0; border-bottom: 1px solid #ECECEC; }
.sk .yg-doc h2 { font: 700 17px/1.3 var(--sk-font); letter-spacing: -.01em; }
.sk .yg-doc p { font-size: 15px; line-height: 1.6; color: #3A3A3C; }
.sk .yg-doc p + p { margin-top: 10px; }
.sk .yg-doc a { color: #111111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sk .yg-nl { display: grid; gap: 8px; }
.sk .yg-form { display: grid; gap: 16px; max-width: 520px; margin-top: 26px; padding: 24px 26px; border-radius: 22px; background: #F6F6F8; }
.sk .yg-form label > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.sk .yg-form input[type="email"] { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #D6D6DE; border-radius: 12px; background: #FFFFFF; font: 400 15px var(--sk-font); color: #111111; }
.sk .yg-form fieldset { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; padding: 0; margin: 0; }
.sk .yg-form legend { width: 100%; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.sk .yg-form .ck { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; }
.sk .yg-form button { justify-self: start; border: 0; cursor: pointer; }
.sk .yg-form .note { font-size: 14px; color: #3A3A3C; }

/* similar questions */
.sk .yg-sim { padding: 34px 0 52px; background: #FAFAFA; border-top: 1px solid #F0F0F0; overflow: hidden; }
.sk .yg-simhead { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.sk .yg-simhead a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #111111; }
.sk .yg-sim .lp-mq { margin-top: 18px; }
.sk .yg-sim .sc { background: #EFEFEF; }
.sk .yg-sim .sc:hover { background: #E8E8E8; }

/* the white header on poll pages (overrides the dark bar from partials/header.html) */
#site-header.sh--light { color: #111111; }
#site-header.sh--light.sh--solid .sh-bar, #site-header.sh--light.is-solid .sh-bar {
  background: rgba(255, 255, 255, .94); border-bottom-color: #EFEFEF; -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
#site-header.sh--light .sh-logo, #site-header.sh--light .sh-trigger { color: #111111; }
#site-header.sh--light .sh-trigger:hover { background: rgba(0, 0, 0, .05); }
#site-header.sh--light .sh-item.is-open > .sh-trigger { background: rgba(0, 0, 0, .07); }
#site-header.sh--light .sh-markets { border-color: #E2E2E2; }
#site-header.sh--light .sh-markets a { color: #6E6E73; }
#site-header.sh--light .sh-markets a:hover { color: #111111; background: rgba(0, 0, 0, .05); }
#site-header.sh--light .sh-markets a[aria-current] { background: #111111; color: #FFFFFF; }
#site-header.sh--light .sh-btn--line { border-color: #DADADA; color: #111111; }
#site-header.sh--light .sh-btn--line:hover { border-color: #111111; background: transparent; }
#site-header.sh--light .sh-btn--fill { background: #111111; color: #FFFFFF; }
#site-header.sh--light .sh-btn--fill:hover { background: #2A2A2A; }
#site-header.sh--light :focus-visible { outline-color: #111111; }

/* ===== 4. the poll page in the homepage's wine and rose (owner, 20 Oct 2026: "keeping our existing UI"). The layout
   and the components are polls.py's (19 Oct); this part changes colour, type and spacing only. The top section takes
   the homepage hero's wine gradient and holds the results in a white card (like the hero poll card); the similar
   questions sit on the page rose, the footer is the homepage's. Per-question colour stays on the similar-question
   tiles only; tabs, bars, buttons, links and the headline card are wine / rose. ===== */
main.sk { display: block; --sk-bar-h: 0px; --sk-gutter: 7%; --sk-font: var(--text); --sk-e: cubic-bezier(0, 0, .2, 1); }
.sk ol, .sk dl, .sk dd { margin: 0; padding: 0; }
.sk ol { list-style: none; }
.sk .yg-wrap { max-width: 1980px; padding: 0 7%; box-sizing: border-box; }

/* top: the homepage hero's wine (the S01 bar above it is the same ink, so the two run together) */
.sk .yg { position: relative; padding: 124px 0 96px; color: #fff; overflow: hidden;
  background:
    radial-gradient(36% 42% at 48% 0%, #14040f 0%, rgba(20,4,15,0) 85%),
    radial-gradient(28% 34% at 100% 0%, rgba(176,32,92,.80) 0%, rgba(176,32,92,0) 80%),
    radial-gradient(42% 64% at 100% 40%, rgba(176,32,92,1) 0%, rgba(150,28,82,.8) 40%, rgba(110,20,70,0) 82%),
    radial-gradient(26% 36% at 76% 50%, rgba(128,30,78,.6) 0%, rgba(128,30,78,0) 80%),
    radial-gradient(40% 46% at 0% 30%, rgba(70,12,50,1) 0%, rgba(70,12,50,.9) 45%, rgba(70,12,50,0) 85%),
    radial-gradient(26% 32% at 100% 96%, rgba(232,70,111,.40) 0%, rgba(232,70,111,0) 80%),
    linear-gradient(116deg, rgba(0,0,0,0) 20%, rgba(230,120,160,.16) 26%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 44%, rgba(235,130,170,.12) 50%, rgba(0,0,0,0) 56%),
    linear-gradient(64deg, rgba(0,0,0,0) 55%, rgba(220,110,150,.09) 60%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg, #1a0616 0%, #24091f 30%, #1e0719 52%, #3a0f2c 78%, #4a1238 100%); }

/* topic badge + "US poll" (the hero's light rose label) */
.sk .yg-kick { gap: 14px; font: 600 14px/18px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.sk .yg-kick a { gap: 8px; height: 34px; padding: 0 15px 0 5px; border: 1px solid rgba(255, 179, 199, .34); background: rgba(255, 255, 255, .08);
  font: 600 14px/1 var(--text); letter-spacing: 0; text-transform: none; color: #fff; transition: background-color .2s var(--ease-nav), border-color .2s var(--ease-nav); }
.sk .yg-kick a:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 179, 199, .6); }
.sk .yg-kick i { width: 24px; height: 24px; border-radius: 8px; background: var(--mint) !important; color: var(--ink); }
.sk .yg-kick svg { width: 13px; height: 13px; }

/* the question as the title, and the published / fielded line */
.sk .yg-title { max-width: 940px; margin-top: 22px; font: 500 48px/56px var(--display); letter-spacing: -.8px; color: #fff; }
.sk .yg-meta { margin-top: 16px; font: 400 18px/27px var(--text); color: rgba(255, 255, 255, .8); }
.sk .yg-meta span { margin: 0 6px; color: var(--mint); }

.sk .yg-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); justify-content: stretch; gap: 56px; margin-top: 44px; }

/* the results card: white on the wine, as the homepage hero's poll card */
.sk .yg-main { padding: 28px 32px 30px; border-radius: 24px; background: #fff; color: var(--body); box-shadow: 0 24px 60px rgba(20, 4, 15, .38); }

/* tabs: pills; the chosen one is the homepage's rose button */
.sk .yg .mb-tabs { gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sk .yg .mb-tabs button { height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: 600 13.5px/1 var(--text); color: var(--grey70); transition: color .2s var(--ease-btn), background-color .2s var(--ease-btn), border-color .2s var(--ease-btn); }
.sk .yg .mb-tabs button:hover { border-color: var(--blue); color: var(--blue); }
.sk .yg .mb-tabs button[aria-selected="true"] { padding: 0 12px; border: 1px solid var(--purple); background: var(--purple); font-weight: 600; color: #fff; }
.sk .yg .mb-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* focus on the white card and the page rose: the homepage's --focus (#ff5c8a) is under 3:1 on white, so the rings
   here use the link rose (#b4235a, 6.3:1 on white) */
.sk .yg-main :focus-visible { outline-color: var(--blue); }
.sk .yg .mb-panel { padding-top: 20px; }

/* bars: one rose for every answer (YouGov's one-colour bars), the not-a-choice answers in grey */
.sk .yg .mb-bars { gap: 6px; }
.sk .yg .mb-bars li { grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 48px; gap: 16px; min-height: 34px; }
.sk .yg .mb-bars .l { font: 400 15px/20px var(--text); color: var(--ink); }
.sk .yg .mb-bars .t { height: 12px; border-radius: 999px; background: var(--page); }
.sk .yg .mb-bars .t i { border-radius: 999px; background: var(--purple); }
.sk .yg .mb-bars .v { font: 600 15px/20px var(--text); color: var(--ink); }
.sk .yg .mb-bars li.tail .l, .sk .yg .mb-bars li.tail .v { color: var(--grey60); }
.sk .yg .mb-bars li.tail .t i { background: var(--ph); }

/* breakdown grid */
.sk .yg .mb-x thead th { padding: 0 8px 8px; font: 600 13px/1.25 var(--text); color: var(--ink); }
.sk .yg .mb-x thead th.all { color: var(--blue); }
.sk .yg .mb-x thead th sup { color: var(--blue); }
.sk .yg .mb-x tbody th { font: 400 14px/1.3 var(--text); color: var(--ink); }
.sk .yg .mb-x td { height: 36px; border-radius: 10px; background: var(--page); font: 400 14px/1 var(--text); color: var(--ink); }
.sk .yg .mb-x td.all { background: #f9dde6; font-weight: 700; color: var(--ink); }
.sk .yg .mb-x td.lo { color: var(--grey60); }
.sk .yg .mb-x td.na { background: #fbf8f9; color: var(--grey60); }   /* the "-" of a hidden group: 5.5:1, as the tail rows */
.sk .yg .mb-x tr.tail th, .sk .yg .mb-x tr.tail td { color: var(--grey60); }

/* Download the data: the homepage's outlined rose button, with a download glyph */
.sk .yg-dl { gap: 10px; height: 48px; margin-top: 24px; border: 1px solid var(--blue); border-radius: 999px; font: 600 16px/1 var(--text); color: var(--blue);
  transition: color .2s var(--ease-btn), background-color .2s var(--ease-btn), border-color .2s var(--ease-btn); }
.sk .yg-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; }
.sk .yg-dl:hover { border-color: var(--blue70); background: var(--blue10); color: var(--blue70); }

/* method: Who we asked / Fieldwork / Weighting / Small groups */
.sk .yg .mb-method { gap: 18px 28px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.sk .yg .mb-method dt { font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.sk .yg .mb-method dd { margin-top: 6px; font: 400 14px/20px var(--text); color: var(--body); }

/* right column: the headline card on a rose base (the question's own icon stays, drawn in white) */
.sk .yg-side { gap: 18px; }
.sk .yg-stat { padding: 16px; border-radius: 24px; --acc: var(--purple) !important; box-shadow: 0 24px 60px rgba(20, 4, 15, .45);
  background: radial-gradient(70% 60% at 90% 0%, rgba(255, 179, 199, .55) 0%, rgba(255, 179, 199, 0) 70%),
              linear-gradient(150deg, #e8466f 0%, #b4235a 58%, #8e1a47 100%) !important; }
/* the question's own icon, small and rose in the glass corner (at full size it sat almost hidden behind the glass) */
.sk .yg-stat .ico { z-index: 2; top: 34px; right: 36px; width: 34px; height: 34px; stroke: var(--purple); stroke-width: 1.7; }
.sk .yg-stat .b1 { background: rgba(255, 179, 199, .5); }
.sk .yg-stat .b2 { background: rgba(30, 10, 26, .24); }
.sk .yg-stat .glass { padding: 20px 22px 22px; border-radius: 18px; background: rgba(255, 255, 255, .84); color: var(--ink); }
.sk .yg-stat .k { font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.sk .yg-stat .k::before { background: var(--purple); }
.sk .yg-stat .big { margin-top: 10px; font: 600 64px/1 var(--display); letter-spacing: -1.6px; color: var(--ink); }
.sk .yg-stat .lab { margin-top: 8px; font: 500 20px/26px var(--display); letter-spacing: -.2px; color: var(--ink); }
.sk .yg-stat .sum { margin-top: 12px; font: 400 14px/21px var(--text); color: var(--grey70); }

/* Related topics on the wine */
.sk .yg-side .yg-h2 { margin-top: 10px; font: 500 22px/28px var(--display); letter-spacing: -.2px; color: #fff; }
.sk .yg-side .mb-pills { gap: 8px; margin: 0; }
.sk .yg-side .mb-pills a { gap: 8px; height: 38px; padding: 0 15px; border: 1px solid rgba(255, 179, 199, .3); background: rgba(255, 255, 255, .07);
  font: 600 14px/1 var(--text); color: #fff; transition: background-color .2s var(--ease-nav), border-color .2s var(--ease-nav); }
.sk .yg-side .mb-pills a:hover { border-color: rgba(255, 179, 199, .62); background: rgba(255, 255, 255, .14); }
.sk .yg-side .mb-pills a svg { color: var(--mint) !important; }
.sk .yg-side .mb-pills a span { font-weight: 400; color: rgba(255, 255, 255, .64); }
.sk .yg-side .mb-pills a[aria-current] { border-color: #fff; background: #fff; color: var(--ink); }
.sk .yg-side .mb-pills a[aria-current] svg { color: var(--purple) !important; }
.sk .yg-side .mb-pills a[aria-current] span { color: var(--grey60); }

/* Similar questions on the page rose: the homepage's 48px rose heading and arrow link */
.sk .yg-sim { padding: 72px 0 88px; border-top: 0; background: var(--page); }
.sk .yg-simhead { align-items: flex-end; }
.sk .yg-sim .yg-h2 { font: 500 48px/60px var(--display); letter-spacing: -.96px; color: var(--blue); }
.sk .yg-simhead a { gap: 8px; padding-bottom: 8px; font: 600 16px/22.4px var(--text); color: var(--blue); transition: color .3s var(--ease-link), transform .3s var(--ease-link); }
.sk .yg-simhead a:hover { color: var(--blue70); transform: translateY(-3px); }
.sk .yg-sim .lp-mq { margin-top: 32px; }
.sk .yg-sim .sc { background: #efe2e8; }
.sk .yg-sim .sc:hover { background: #e9d5de; }
.sk .yg-sim .sc:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sk .yg-sim .sc-opt.is-top { border-color: var(--purple); background: var(--cyan20); }   /* the top answer in rose, not the question colour */
.sk .sc-bar { font: 400 11.5px/1.3 var(--text); color: var(--ink); }
.sk .sc-bar span:nth-child(2) { color: var(--grey60); }
.sk .sc-prog { background: var(--page); }
.sk .sc-prog i { background: var(--purple); }
.sk .sc-q { font: 600 14.5px/1.3 var(--text); letter-spacing: -.02em; color: var(--ink); }   /* Inter at the approved size: Sora clipped most questions */
.sk .sc-opt { border-color: var(--line); font-family: var(--text); color: var(--body); }
.sk .sc-n { font-weight: 600; color: var(--blue); }

/* ===== 5. phone and tablet: the poll question page (21 Oct 2026, owner: "make it phone friendly and add responsiveness").
   SOURCE FILE: site-src/wine_templates/wine-polls-phone.css; build_catalyse_polls_wine.py (phone_css) appends it
   after WINE_CSS on every run (edit this file, not wine/assets/wine-polls.css). Breakpoints as the RESPONSIVE note in section 1 and wine-base.css (max-width 1199.98 / 1023.98 / 767.98 /
   479.98px: below 1200 small laptop, below 1024 tablet, below 768 tablet portrait, below 480 phone). From 1200 up nothing
   changes: every rule below sits in a max-width query (@property, @keyframes and @font-face only define). Header and footer are
   sections 1-2 (the homepage's phone header and footer); the header is sticky and in the page flow, so the padding at
   the top of .yg clears the rest of the pill under the S01 bar (10 + 56 = 66px; 8 + 52 = 60px below 480px). ===== */

/* breakdown tables on phones: a soft fade on the right edge while there is more to swipe to (browsers with
   scroll-driven animations; the fade lifts at the end, and never shows on a table that fits) */
@property --mb-fade { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes mb-fade { 0%, 90% { --mb-fade: 36px; } 100% { --mb-fade: 0px; } }
/* the question title until Sora arrives: the phone's own Arial (or Roboto on Android, the same widths) scaled to Sora's
   width (Sora 500 sets about 14% wider), so the title mostly wraps the same way before and after the web font and the
   cards under it do not jump (layout shift). Where none of these fonts is installed the face is skipped and the stack
   goes on as before. */
@font-face { font-family: 'Sora Fallback'; size-adjust: 114%;
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'), local('Roboto'), local('Roboto Regular'), local('Roboto-Regular'); }

/* tablet landscape and down: one column (results card, then the headline card beside Related topics); touch-size
   controls; the similar questions become a row you swipe (no marquee: a moving card is hard to tap) */
@media (max-width: 1023.98px) {
  .sk .yg { padding: 112px 0 80px; }
  .sk .yg-title { font-size: clamp(28px, 4.2vw + 12px, 48px); line-height: 1.17; letter-spacing: -.0167em;
    font-family: 'Sora', 'Sora Fallback', 'Helvetica Neue', helvetica, arial, sans-serif; }
  .sk .yg-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px; }
  .sk .yg-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 14px; align-items: start; }
  .sk .yg-side .yg-stat { grid-row: 1 / 3; }
  .sk .yg-side .yg-h2 { margin-top: 0; }
  /* 44px tap targets: tabs, topic pills, the "See all" link; the topic badge keeps its look with a taller hit area */
  .sk .yg .mb-tabs button, .sk .yg .mb-tabs button[aria-selected="true"] { height: 44px; padding: 0 14px; font-size: 14px; }
  .sk .yg-side .mb-pills a { height: 44px; }
  .sk .yg-kick a { position: relative; }
  .sk .yg-kick a::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .sk .yg-simhead a { min-height: 44px; padding-bottom: 0; }
  /* no text under 12px */
  .sk .yg .mb-x sup, .sk .mb-x thead th span { font-size: 12px; }
  .sk .sc-bar, .sk .sc-bar span:nth-child(2), .sk .sc-opt, .sk .sc-n { font-size: 12px; }
  /* reading text at 16px: the similar-question cards, the headline card's summary and the method notes */
  .sk .sc-q { font-size: 16px; }
  .sk .yg-stat .sum { font-size: 16px; line-height: 24px; }
  .sk .yg .mb-method dd { font-size: 16px; line-height: 24px; }
  /* similar questions */
  .sk .yg-sim { padding: 56px 0 64px; }
  .sk .yg-sim .yg-h2 { font-size: clamp(30px, 3.4vw + 17px, 48px); line-height: 1.25; letter-spacing: -.02em; }
  .sk .yg-sim .lp-mq { margin-top: 24px; padding: 4px 0 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: 7vw; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
  .sk .lp-mq-track { animation: none; }
  .sk .lp-mq-set[aria-hidden="true"] { display: none; }
  .sk .lp-mq-set { padding: 0 7vw; }
  .sk .sc { scroll-snap-align: start; }
}

/* touch screens of 1024px and up (tablets in landscape keep the desktop layout): no text under 12px there either */
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  .sk .yg .mb-x sup, .sk .mb-x thead th span { font-size: 12px; }
  .sk .sc-bar, .sk .sc-bar span:nth-child(2), .sk .sc-opt, .sk .sc-n { font-size: 12px; }
}

/* tablet portrait and down */
@media (max-width: 767.98px) {
  .sk .yg-wrap { padding: 0 24px; }
  .sk .yg { padding: 104px 0 64px; }
  .sk .yg-kick { gap: 12px; }
  .sk .yg-meta { font-size: 16px; line-height: 24px; }
  .sk .yg-main { padding: 24px 24px 26px; }
  .sk .yg .mb-method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  /* breakdown tables: the answer column stays put while the groups scroll under it (the white shadows cover the 6px
     cell spacing on both sides of it) */
  .sk .yg .mb-scroll { overscroll-behavior-x: contain; }
  .sk .yg .mb-x tbody th, .sk .yg .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; }
  .sk .yg-sim .lp-mq { scroll-padding-inline: 24px; }
  .sk .lp-mq-set { padding: 0 24px; }
}

/* phone */
@media (max-width: 479.98px) {
  .sk .yg-wrap { padding: 0 20px; }
  .sk .yg { padding: 96px 0 48px; }
  .sk .yg-kick { gap: 10px; flex-wrap: wrap; }
  .sk .yg-title { margin-top: 18px; }
  .sk .yg-meta { margin-top: 12px; }
  .sk .yg-cols { gap: 28px; margin-top: 28px; }
  .sk .yg-main { padding: 18px 16px 20px; border-radius: 20px; }
  /* tabs: one row you swipe, edge to edge of the card */
  .sk .yg .mb-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: -4px -16px 0; padding: 4px 16px 14px; scroll-padding-inline: 16px; }
  .sk .yg .mb-tabs::-webkit-scrollbar { display: none; }
  .sk .yg .mb-tabs button { flex: none; }
  .sk .yg .mb-panel { padding-top: 16px; }
  /* bars: the answer on its own line, the bar and the number under it */
  .sk .yg .mb-bars { gap: 12px; }
  .sk .yg .mb-bars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l l" "t v"; gap: 4px 12px; min-height: 0; }
  .sk .yg .mb-bars .l { grid-area: l; font-size: 16px; line-height: 22px; }
  .sk .yg .mb-bars .t { grid-area: t; }
  .sk .yg .mb-bars .v { grid-area: v; min-width: 40px; font-size: 16px; line-height: 22px; }
  /* breakdown tables: fixed column widths (answers wrap in 128px, groups in 68px), swiped sideways inside the card */
  .sk .yg .mb-x { width: max-content; min-width: 100%; }
  .sk .yg .mb-x tbody th { width: 128px; min-width: 128px; max-width: 128px; padding-right: 6px; }
  .sk .yg .mb-x thead th { width: 68px; min-width: 68px; padding: 0 4px 8px; }
  .sk .yg .mb-x thead th:first-child { width: 128px; min-width: 128px; }
  .sk .yg-dl { margin-top: 20px; }
  .sk .yg .mb-method { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; padding-top: 18px; }
  .sk .yg .mb-method dd { font-size: 16px; line-height: 24px; }
  /* the headline card, then Related topics */
  .sk .yg-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; }
  .sk .yg-side .yg-stat { grid-row: auto; }
  .sk .yg-side .yg-h2 { margin-top: 10px; }
  .sk .yg-stat .glass { padding: 18px 18px 20px; }
  .sk .yg-stat .ico { top: 32px; right: 32px; }
  .sk .yg-stat .big { font-size: 56px; letter-spacing: -1.4px; }
  .sk .yg-stat .sum { font-size: 16px; line-height: 24px; }
  /* similar questions */
  .sk .yg-sim { padding: 44px 0 52px; }
  .sk .yg-simhead { flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
  .sk .yg-sim .lp-mq { margin-top: 16px; scroll-padding-inline: 20px; }
  .sk .lp-mq-set { padding: 0 20px; gap: 12px; }
  .sk .sc { width: min(290px, 78vw); }
}
@media (max-width: 767.98px) {
  @supports (animation-timeline: scroll()) {
    .sk .yg .mb-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--mb-fade)), transparent);
      mask-image: linear-gradient(90deg, #000 calc(100% - var(--mb-fade)), transparent);
      animation: mb-fade linear both; animation-timeline: scroll(self inline); }
  }
}