/* =====================================================================================================
   t-company.css (hand-written, 20 Oct 2026): the "company" pages of the wine-and-rose concept site
   (site-src/wine_templates/company.py). Loads after wine-chrome.css, wine-kit.css (when a kit visual is used) and
   wine-base.css. Prefix: co-. Desktop 1440.

   Calm, editorial "corporate" pages, each laid out differently:
     accreditations  the register   (paper hero + badge wall, statement fill, ISO register, plum memberships,
                                     pinned questionnaire, steps on a growing line, CE vs ISO 27001)
     about           the masthead   (huge type on wine, four columns, chain rail, brands on a horizontal track)
     offices         the atlas      (full-bleed dotted map, local times, sticky office card stack)
     talk-to-sales   the desk       (sticky column + form with a topic chooser and :has() hints)
     contact         the switchboard(directory rows with filter chips)
     panel-book      the book       (3D cover that opens on scroll, contents with leaders, two-page spreads)
   21 Oct 2026 (sections 7-13 at the end of this file):
     company (hub)   the directory  (menu-column tiles, sticky index with scroll-spy, offices with local times)
     partnership     the network    (partner types drawn as a network, statement, tabs, steps on a rail)
     data-quality    the checkpoints(glowing validation summary, pinned five-checkpoint track, two layers, ISO 20252)
     methodology     the field guide(six-stage ring, sticky stage labels on a filling rule, method chooser, glossary)
     panel-quality   the journey    (orbit badge, pinned phone whose screen follows the story, rules, wallet history)
     technology-ai   the workbench  (typing Ask bar, platform numbers, pinned CatalyseAI window, recorded-answer flow)
     panelists       the help desk  (topic list, result cards, grouped FAQ with scroll-spy, get the app)
   Motion rules sit inside html.wm-on (wine-motion.js arms it); without it every element is visible and still.
   ===================================================================================================== */

/* ---------- shared ---------- */
body.t-company { --co-paper: #fffcfd; }
/* the homepage base resets ul but not ol: every list on these pages is a styled list */
body.t-company .wn-main ol { margin: 0; padding: 0; list-style: none; }
/* overflow: clip, not hidden: a hidden overflow makes a scroll container, and the CSS view() timelines of the
   data-scrub / data-parallax elements inside would then never move (wine-base.css uses hidden on .wn-sec--wine and
   .wn-cta__box; reported to the lead) */
body.t-company .wn-sec--wine, body.t-company .wn-cta__box { overflow: clip; }
.co-display { font: 500 96px/100px var(--display); letter-spacing: -2.8px; color: var(--wn-h, var(--ink)); }
.co-h1 { max-width: 760px; }
.co-hero { position: relative; isolation: isolate; overflow: clip; padding: 180px 0 112px; }
.co-hero__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.co-hero__txt { display: flex; flex-direction: column; gap: 22px; }
.co-hero__txt .wn-crumbs { margin-bottom: 6px; }
.co-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.co-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* quotes (about, talk to sales) */
.co-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.co-quote { display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 44px 44px 40px; border-radius: 28px; background: #fff;
  box-shadow: 0 24px 60px rgba(74, 18, 56, .10); border: 1px solid var(--wn-line); }
.co-quote__mark { color: var(--purple); }
.co-quote blockquote { margin: 0; font: 500 25px/36px var(--display); letter-spacing: -.3px; color: var(--ink); }
.co-quote figcaption { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--wn-line); }
.co-quote figcaption b { display: block; font: 600 17px/24px var(--text); color: var(--ink); }
.co-quote figcaption span { font: 400 15px/22px var(--text); color: var(--grey70); }
.co-quotes-sec--sm .co-quote blockquote { font-size: 22px; line-height: 32px; }
.co-quotes-sec--sm .co-quote { background: var(--wn-page); box-shadow: none; }

/* proof strip: the badge files in a marquee */
.co-proof { padding: 52px 0; background: #fff; border-top: 1px solid var(--wn-line); border-bottom: 1px solid var(--wn-line); }
.co-proof__in { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.co-proof__l { font: 600 14px/20px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.co-proof__mq .wn-marquee__track { gap: 16px; padding: 4px 0; }
.co-ptile { display: flex; align-items: center; gap: 14px; height: 84px; padding: 0 24px 0 18px; border-radius: 18px;
  border: 1px solid var(--wn-line); background: #fff; }
.co-ptile img { height: 46px; width: auto; flex: none; }
.co-ptile span { font: 400 13px/17px var(--text); color: var(--grey70); white-space: nowrap; }
.co-ptile span b { display: block; font-weight: 600; color: var(--ink); }
/* static (reduced motion, ?static=1, no JS or the 3 s fail-safe): wine-motion.js neither runs nor doubles the marquee,
   so the six badges wrap in rows across the full width instead of being cut off at the right edge (21 Oct 2026). The
   label and the accreditations link share the first row. html.wm-lite (small or touch screens) keeps the marquee. */
html:not(.wm-on):not(.wm-lite) .co-proof__in { grid-template-columns: minmax(0, 1fr) auto; row-gap: 24px; }
html:not(.wm-on):not(.wm-lite) .co-proof__mq { grid-column: 1 / -1; grid-row: 2; overflow: visible; -webkit-mask-image: none; mask-image: none; }
html:not(.wm-on):not(.wm-lite) .co-proof__mq .wn-marquee__track { flex-wrap: wrap; width: auto; }

/* link cards row */
.co-next-sec { background: var(--wn-page); }

/* ---------- maps (offices, about) ---------- */
.co-map { display: block; width: 100%; height: auto; overflow: visible; }
.co-map__land { fill: rgba(255, 179, 199, .24); }
.co-map__arc { fill: none; stroke: url(#co-arc-g); stroke-width: 1.8; stroke-linecap: round; opacity: .95; }
.co-map__trav { fill: #fff; }
.co-pin__dot { fill: var(--mint); stroke: #fff; stroke-width: 2.2; }
.co-pin__ping { fill: none; stroke: var(--mint); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.co-pin__city { font: 600 15px/1 var(--text); fill: #fff; }
.co-pin__role { font: 400 11px/1 var(--text); fill: rgba(255, 255, 255, .74); }
html.wm-on .co-map__arc { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: co-draw 2.2s var(--wn-ease-out) .5s forwards; }
html.wm-on .co-pin__ping { animation: co-ping 2.8s var(--wn-ease-out) infinite; }
html.wm-on .co-pin__ping--2 { animation-delay: 1.4s; }
html.wm-on .co-pin--orlando .co-pin__ping { animation-delay: .5s; }
html.wm-on .co-pin--orlando .co-pin__ping--2 { animation-delay: 1.9s; }
html.wm-on .co-pin--gurgaon .co-pin__ping { animation-delay: 1s; }
html.wm-on .co-pin--gurgaon .co-pin__ping--2 { animation-delay: 2.4s; }
html:not(.wm-on) .co-map__trav { display: none; }
@keyframes co-draw { to { stroke-dashoffset: 0; } }
@keyframes co-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }

/* =====================================================================================================
   1. ACCREDITATIONS: the register
   ===================================================================================================== */
.co-hero--paper { background:
    radial-gradient(46% 60% at 92% 18%, rgba(232, 70, 111, .14), rgba(232, 70, 111, 0) 70%),
    radial-gradient(40% 52% at 0% 100%, rgba(255, 179, 199, .34), rgba(255, 179, 199, 0) 70%), #fff;
  padding-bottom: 120px; }
.co-hero--paper::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(180, 35, 90, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 35, 90, .07) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 75% at 72% 45%, #000 20%, transparent 80%);
  mask-image: radial-gradient(60% 75% at 72% 45%, #000 20%, transparent 80%); }
.co-glow-paper { right: -8%; top: 10%; width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(232, 70, 111, .22), rgba(232, 70, 111, 0)); }
.co-hero--paper .wn-lead { max-width: 620px; }
.co-wall { perspective: 1800px; }
.co-wall__tilt { transform-style: preserve-3d; }
.co-wall__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; transform: rotateY(-12deg) rotateX(7deg) rotateZ(1deg);
  transform-style: preserve-3d; }
.co-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 178px; padding: 24px 14px 18px;
  border-radius: 22px; background: #fff; border: 1px solid var(--wn-line); box-shadow: 0 22px 46px rgba(74, 18, 56, .13); text-align: center; }
.co-tile img { max-height: 62px; width: auto; max-width: 100%; }
.co-tile span { font: 400 13px/17px var(--text); color: var(--grey70); }
.co-tile span b { display: block; font-weight: 600; color: var(--ink); }
.co-tile--1, .co-tile--5 { transform: translateZ(26px); }
.co-tile--3 { transform: translateZ(14px); }
.co-tile--1 { background: linear-gradient(160deg, #fff, var(--wn-rose-10)); }

.co-band { padding: 64px 0 76px; }
.co-band__glow { position: absolute; left: -10%; top: -60%; width: 900px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .35), rgba(232, 70, 111, 0)); }
.co-band .wn-stats { position: relative; }

.co-statement { padding: 150px 0 140px; text-align: center; background: var(--wn-page); }
.co-statement .wn-kicker { justify-content: center; }
.co-statement__h { max-width: 1100px; margin: 22px auto 34px; font: 500 76px/80px var(--display); letter-spacing: -2.2px; color: var(--ink); }
.co-statement__p { max-width: 1060px; margin: 0 auto; font: 500 34px/49px var(--display); letter-spacing: -.6px; color: var(--ink); }
html.wm-on .co-fill { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--ink) 0, var(--ink) calc(var(--wm-p) * 100%), rgba(30, 10, 26, .2) calc(var(--wm-p) * 100%), rgba(30, 10, 26, .2) 100%); }
html.wm-on.wm-sda .co-fill[data-scrub] { animation-range: entry 70% cover 62%; }

.co-reg__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; }
.co-reg__head .wn-head { margin-bottom: 0; }
.co-reg__iso { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 24px 30px 18px; border-radius: 22px;
  background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.co-reg__iso img { height: 75px; width: auto; }
.co-reg__iso figcaption { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.co-reg { border-top: 1px solid var(--wn-line); }
.co-reg__row { position: relative; display: grid; grid-template-columns: 380px minmax(0, 1fr) 250px; gap: 40px; align-items: center;
  padding: 42px 24px; border-bottom: 1px solid var(--wn-line); transition: background-color .35s ease; }
.co-reg__row:hover { background: var(--wn-rose-10); }
.co-reg__num { display: grid; grid-template-columns: auto auto; grid-template-areas: "k k" "n y"; justify-content: start; align-items: baseline;
  column-gap: 8px; row-gap: 4px; }
.co-reg__num span { grid-area: k; font: 600 15px/1 var(--text); letter-spacing: .14em; color: var(--blue); }
.co-reg__num > b:not(.co-reg__word) { grid-area: n; font: 500 92px/.92 var(--display); letter-spacing: -3.6px; color: var(--wn-deep);
  background: linear-gradient(120deg, #4a1238 10%, #b4235a 55%, #e8466f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.co-reg__num i { grid-area: y; font: 500 28px/1 var(--display); font-style: normal; color: var(--grey60); }
.co-reg__num--logo { display: flex; align-items: center; gap: 20px; }
.co-reg__num--logo img { height: 92px; width: auto; }
.co-reg__word { font: 500 34px/40px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-reg__std { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.co-reg__body h3 { font: 500 28px/34px var(--display); letter-spacing: -.4px; color: var(--ink); margin-bottom: 10px; }
.co-reg__body p:last-child { font: 400 17px/27px var(--text); color: var(--grey70); max-width: 640px; }
.co-reg__tag { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--wn-rose-10); color: var(--blue70); font: 600 14px/18px var(--text); white-space: nowrap; }

.co-mem { overflow: clip; }
.co-mem__glow { position: absolute; right: -12%; top: -14%; width: 980px; height: 980px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .30), rgba(232, 70, 111, 0)); }
.co-mem .wrap { position: relative; }
.co-mem__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.co-mem__card { display: flex; }
.co-mem__in { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 32px; border-radius: var(--wn-r);
  background: var(--wn-glass-bg); border: 1px solid rgba(255, 179, 199, .26);
  box-shadow: 0 0 0 1px rgba(232, 70, 111, .1), 0 0 38px rgba(232, 70, 111, .14); }
.co-mem__plate { display: flex; align-items: center; justify-content: center; height: 128px; border-radius: 16px; background: #fff; margin-bottom: 10px; }
.co-mem__plate img { max-height: 66px; width: auto; max-width: 80%; }
.co-mem__plate--sm { flex: none; width: 240px; height: 112px; margin: 0; }
.co-mem h3 { font: 500 24px/30px var(--display); letter-spacing: -.3px; color: #fff; }
.co-mem p { font: 400 16px/25px var(--text); color: rgba(255, 255, 255, .82); }
.co-mem__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.co-mem__wide { display: flex; gap: 26px; align-items: center; padding: 26px; border-radius: var(--wn-r); border: 1px solid rgba(255, 179, 199, .24);
  background: rgba(255, 255, 255, .04); }
.co-mem__wide > div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.co-mem__k { font: 600 13px/16px var(--text) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--mint) !important; }
.co-mem__ico { flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 179, 199, .14); color: var(--mint); }
.co-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(255, 179, 199, .2); }
.co-codes .wn-kicker { margin-right: 12px; }
.co-codes b { padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 179, 199, .38); font: 600 15px/1 var(--text); color: #fff; }

/* pinned questionnaire */
.co-q { position: relative; background: var(--wn-page); }
html:not(.wm-on) .co-q { padding: 112px 0; }
.co-q .wm-pin__sticky { display: flex; align-items: center; }
html.wm-on .co-q .wm-pin__sticky { padding: 120px 0 30px; }
.co-q__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; width: 100%; }
.co-q__txt { display: flex; flex-direction: column; gap: 22px; }
.co-q__layers p { font: 400 21px/32px var(--text); color: var(--body); max-width: 500px; }
.co-q__layers p b { color: var(--blue); font-weight: 600; }
html:not(.wm-on) .co-q__layers { display: flex; flex-direction: column; gap: 14px; }
.co-q__bar { width: 260px; margin-top: 6px; background: rgba(180, 35, 90, .14); }
.co-qcard { position: relative; overflow: hidden; padding: 40px 40px 34px; border-radius: 30px; background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.co-qcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, #4a1238, #d6335e 55%, #ffb3c7); }
.co-qcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--wn-rose-20); }
.co-qcard__top b { font: 500 26px/32px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-qcard__top span { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.co-qrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 38px; gap: 18px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--wn-line); }
.co-qrow__n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); font: 600 15px/1 var(--text); }
.co-qrow__q { font: 600 19px/27px var(--text); color: var(--ink); padding-top: 4px; }
.co-qrow__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.co-ans { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--wn-rose-10);
  border: 1px solid var(--wn-rose-20); font: 600 14px/1 var(--text); color: var(--blue70); }
.co-ans svg { color: var(--purple); }
.co-qrow__ok { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff;
  box-shadow: 0 8px 18px rgba(214, 51, 94, .32); }
.co-qcard__foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, #2c0a24, #4a1238); color: #fff; font: 500 16px/24px var(--text); }
.co-qcard__foot svg { flex: none; color: var(--mint); }
html.wm-on .co-q .co-qrow__ok[data-step] { transition: opacity .5s var(--wm-ease), transform .7s cubic-bezier(.34, 1.56, .64, 1); }
html.wm-on .co-q .co-qrow__ok[data-step]:not(.is-active):not(.is-past) { transform: scale(.2); }

/* how to check us */
.co-check__wrap { position: relative; }
.co-check__line { position: absolute; left: 34px; right: 16%; top: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--cyan) 60%, var(--mint)); transform-origin: 0 50%; }
html.wm-on .co-check__line[data-scrub] { transform: scaleX(var(--wm-p)); }
html.wm-on.wm-sda .co-check__line[data-scrub] { animation-range: entry 40% cover 60%; }
.co-check__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.co-check__steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.co-check__n { position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  border: 2px solid var(--purple); color: var(--blue); font: 500 24px/1 var(--display); box-shadow: 0 0 0 12px #fff; }
.co-check__ico { margin-top: 18px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); }
.co-check__steps h3 { font: 500 28px/34px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-check__steps p { font: 400 17px/27px var(--text); color: var(--grey70); max-width: 360px; }

/* Cyber Essentials vs ISO 27001 */
.co-vs { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); gap: 28px; align-items: stretch; }
.co-vs__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 44px; border-radius: 30px; background: #fff;
  border: 1px solid var(--wn-line); box-shadow: 0 18px 44px rgba(74, 18, 56, .08); }
.co-vs__card--dark { background: var(--wn-glass-bg); border-color: rgba(255, 179, 199, .26); color: #fff; }
.co-vs__logo { height: 76px; width: auto; align-self: flex-start; margin-bottom: 8px; }
.co-vs__iso { align-self: flex-start; height: 76px; display: grid; place-items: center; padding: 0 22px; margin-bottom: 8px; border-radius: 16px;
  border: 2px solid var(--mint); font: 600 34px/1 var(--display); letter-spacing: 1px; color: var(--mint); }
.co-vs__k { font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-vs__card--dark .co-vs__k { color: var(--mint); }
.co-vs__card h3 { font: 500 36px/42px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-vs__card--dark h3 { color: #fff; }
.co-vs__sub { font: 400 17px/27px var(--text); color: var(--grey70); }
.co-vs__card--dark .co-vs__sub { color: rgba(255, 255, 255, .8); }
.co-vs__list { display: grid; gap: 12px; margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--wn-line); }
.co-vs__card--dark .co-vs__list { border-top-color: rgba(255, 179, 199, .22); }
.co-vs__list li { display: flex; align-items: center; gap: 12px; font: 500 17px/24px var(--text); color: var(--ink); }
.co-vs__card--dark .co-vs__list li { color: #fff; }
.co-vs__list li > span { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; }
.co-vs__card--dark .co-vs__list li > span { background: var(--mint); color: var(--ink); }
.co-vs__mid { position: relative; z-index: 2; align-self: center; justify-self: center; width: 76px; height: 76px; margin-left: -38px; margin-right: -38px;
  border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 500 22px/1 var(--display);
  box-shadow: 0 0 0 10px var(--wn-page); }
.co-vs__both { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; font: 500 24px/30px var(--display); color: var(--ink); }
.co-vs__both svg { color: var(--purple); }

/* =====================================================================================================
   2. ABOUT: the masthead
   ===================================================================================================== */
.co-hero--about { background: var(--wn-hero-bg); padding: 190px 0 84px; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86);
  --wn-mut: rgba(255, 255, 255, .72); color: #fff; }
.co-hero--about .wn-crumbs { margin-bottom: 30px; }
.co-about__h1 { max-width: 1160px; margin: 22px 0 44px; font-size: 108px; line-height: 108px; letter-spacing: -3.4px; }
.co-about__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: end; margin-bottom: 96px; }
.co-about__intro .wn-lead { max-width: 760px; font-size: 21px; line-height: 33px; }
.co-about__intro .wn-hero__ctas { justify-content: flex-end; margin: 0; }
.co-glow-a { right: -16%; top: -12%; width: 1040px; height: 1040px; background: radial-gradient(closest-side, rgba(232, 70, 111, .38), rgba(232, 70, 111, 0)); }
.co-glow-b { left: -14%; bottom: -40%; width: 860px; height: 860px; background: radial-gradient(closest-side, rgba(180, 35, 90, .45), rgba(180, 35, 90, 0)); }

.co-do { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.co-do > li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 28px 8px 0; }
.co-do > li + li { padding-left: 28px; border-left: 1px solid var(--wn-line); }
.co-do__n { font: 600 15px/1 var(--text); letter-spacing: .1em; color: var(--blue); }
.co-do h3 { font: 500 28px/34px var(--display); letter-spacing: -.5px; color: var(--ink); }
.co-do p { font: 400 16px/25px var(--text); color: var(--grey70); }
.co-do .wn-chips { margin-top: 2px; }
.co-do .tlink { margin-top: auto; }

.co-chain-sec .wn-head { margin-bottom: 72px; }
.co-chain { position: relative; max-width: 1200px; margin: 0 auto; }
.co-chain__rail { position: absolute; left: 50%; top: 20px; bottom: 20px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--wn-line); }
.co-chain__rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--purple), var(--cyan) 55%, var(--mint)); transform-origin: 50% 0; }
html.wm-on .co-chain__rail i[data-scrub] { transform: scaleY(var(--wm-p)); }
html.wm-on.wm-sda .co-chain__rail i[data-scrub] { animation-range: entry 50% exit 50%; }
.co-chain__list { position: relative; display: flex; flex-direction: column; }
/* left and right cards interleave: each node starts before the previous one ends (the shortest card is ~300px) */
.co-node + .co-node { margin-top: -110px; }
.co-node { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; }
.co-node__card { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: 10px; padding: 30px 32px 32px; border-radius: 26px;
  background: var(--wn-page); border: 1px solid var(--wn-line); }
.co-node--r .co-node__card { grid-column: 3; }
.co-node__dot { grid-row: 1; grid-column: 2; justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--purple); color: var(--blue); box-shadow: 0 0 0 10px #fff, 0 10px 26px rgba(214, 51, 94, .2); }
.co-node__k { font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-node__card h3 { font: 500 28px/34px var(--display); letter-spacing: -.5px; color: var(--ink); }
.co-node__card > p:not(.co-node__k) { font: 400 16px/25px var(--text); color: var(--grey70); }
.co-node__chips { margin-top: 4px; }
/* small drawn outputs inside the nodes */
.co-mini { margin-top: 8px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--wn-line); }
.co-mini--q p { font: 600 15px/21px var(--text); color: var(--ink); }
.co-mini__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.co-mini__scale span { height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--wn-page); border: 1px solid var(--wn-line);
  font: 600 14px/1 var(--text); color: var(--grey70); }
.co-mini__scale span.is-on { background: var(--purple); border-color: var(--purple); color: #fff; }
.co-mini__ends { display: flex; justify-content: space-between; margin-top: 8px; font: 400 12px/16px var(--text); color: var(--grey70); }
.co-mini--quota { display: grid; gap: 10px; }
.co-mini--quota li { display: grid; grid-template-columns: 100px minmax(0, 1fr) 84px; gap: 12px; align-items: center; font: 400 13px/18px var(--text); color: var(--ink); }
.co-mini--quota b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--grey70); }
.co-mini__bar { position: relative; height: 10px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.co-mini__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
html.wm-on [data-reveal="bars"].is-in .co-mini__bar i { transform: scaleX(var(--v, .5)); }
.co-mini--pre { max-width: 360px; background: linear-gradient(160deg, #2c0a24, #4a1238); border: 0; color: #fff; }
.co-mini--pre .co-mini__k { font: 600 11px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin-bottom: 6px; }
.co-mini--pre p { font: 500 15px/21px var(--text); color: #fff; }
.co-mini__yn { display: flex; gap: 8px; margin-top: 12px; }
.co-mini__yn span { flex: 1; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(255, 179, 199, .35);
  font: 600 14px/1 var(--text); color: #fff; }
.co-mini__yn span.is-on { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.co-mini--outs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
.co-mini--outs li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--wn-line); font: 600 13px/1 var(--text); color: var(--ink); }
.co-mini--outs li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--purple)); }
.co-out0 { --c: #d6335e; } .co-out1 { --c: #f07b9a; } .co-out2 { --c: #f6c98e; } .co-out3 { --c: #8e1a47; } .co-out4 { --c: #a1959b; }
.co-mini--checks { display: grid; gap: 8px; }
.co-mini--checks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 14px/20px var(--text); color: var(--ink); }
.co-mini--checks b { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--wn-rose-10);
  font: 600 13px/16px var(--text); color: var(--blue70); font-variant-numeric: tabular-nums; }
.co-mini--ans { display: grid; gap: 10px; background: var(--wn-ink); border: 0; }
.co-mini__say { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/22px var(--text); color: #fff; }
.co-mini__say svg { flex: none; color: var(--mint); margin-top: 2px; }
.co-mini__ai { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255, 179, 199, .12);
  font: 500 14px/20px var(--text); color: var(--mint); }
.co-mini__ai svg { flex: none; margin-top: 2px; }
.co-mini--files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
.co-mini--files li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--wn-line); font: 600 13px/1 var(--text); color: var(--ink); }
.co-mini--files svg { color: var(--purple); }

/* brands on a horizontal track */
.co-brands { position: relative; background: var(--wn-hero-bg); color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86);
  --wn-mut: rgba(255, 255, 255, .72); overflow: clip; }
html:not(.wm-on) .co-brands { padding: 112px 0; }
html.wm-on .co-brands .wm-h__sticky { padding-top: 70px; }
.co-brands__glow { position: absolute; right: -10%; top: 10%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .35), rgba(232, 70, 111, 0)); }
.co-brands__head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 40px; }
.co-brands__sub { max-width: 420px; font: 400 18px/28px var(--text); color: rgba(255, 255, 255, .8); }
.co-brands__track { position: relative; padding: 0 7vw 10px; }
.co-brand { flex: none; width: 520px; min-height: 470px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 38px;
  border-radius: 30px; background: rgba(26, 6, 22, .58); border: 1px solid rgba(255, 179, 199, .22); box-shadow: 0 30px 60px rgba(10, 2, 8, .35); }
.co-brand--cai { background: linear-gradient(160deg, rgba(214, 51, 94, .42), rgba(26, 6, 22, .7) 60%); }
.co-brand__logo { height: 76px; display: flex; align-items: center; margin-bottom: 12px; }
.co-brand__logo img { max-height: 58px; width: auto; }
.co-brand--se .co-brand__logo img { max-height: 46px; }
.co-word { font: 600 46px/1 var(--display); letter-spacing: -1.4px; color: #fff; }
.co-word b { font-weight: 600; background: linear-gradient(90deg, #ffb3c7, #e8466f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--mint); }
.co-word--pulse { display: inline-flex; align-items: center; gap: 12px; font-size: 40px; }
.co-word__ico { color: var(--mint); }
.co-brand__k { font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.co-brand h3 { font: 500 30px/36px var(--display); letter-spacing: -.5px; color: #fff; }
.co-brand > p:not(.co-brand__k) { font: 400 17px/27px var(--text); color: rgba(255, 255, 255, .84); }
.co-brand__go { margin-top: auto; padding-top: 10px; }

/* values */
.co-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--wn-line); }
.co-values > li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 48px 48px 48px 0; border-bottom: 1px solid var(--wn-line); }
.co-values > li:nth-child(even) { padding-left: 48px; padding-right: 0; border-left: 1px solid var(--wn-line); }
.co-values__n { font: 500 92px/.9 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--purple); transition: color .4s ease; }
.co-values > li:hover .co-values__n { color: var(--wn-rose-20); }
.co-values h3 { font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); margin-bottom: 12px; }
.co-values p { font: 400 17px/27px var(--text); color: var(--grey70); }

/* offices strip */
.co-offlist { display: grid; gap: 0; margin: 4px 0 30px; border-top: 1px solid var(--wn-line); }
.co-offlist li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--wn-line); }
.co-offlist b { font: 500 28px/34px var(--display); letter-spacing: -.5px; color: var(--ink); }
.co-offlist span { font: 400 15px/22px var(--text); color: var(--grey70); }
.co-offstrip .wn-vis { border-radius: 28px; overflow: hidden; background: var(--wn-wine); }

/* =====================================================================================================
   3. OFFICES: the atlas
   ===================================================================================================== */
.co-hero--map { background: var(--wn-hero-bg); padding: 200px 0 72px; min-height: 900px; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86);
  --wn-mut: rgba(255, 255, 255, .72); color: #fff; }
.co-mapstage { position: absolute; z-index: -1; right: -6%; top: 110px; width: 74%; pointer-events: none;
  /* the fade keeps the dots off the headline; Orlando (about 24% across) must be fully opaque for label contrast */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 7%, #000 21%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 7%, #000 21%); }
.co-map--hero .co-map__land { fill: rgba(255, 179, 199, .22); }
.co-maphero__txt { position: relative; display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.co-maphero__txt .wn-crumbs { margin-bottom: 6px; }
.co-maphero .co-display { font-size: 100px; line-height: 102px; }
.co-clocks { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 120px; border-top: 1px solid rgba(255, 179, 199, .26); }
.co-clocks li { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 0 0; }
.co-clocks li + li { padding-left: 28px; border-left: 1px solid rgba(255, 179, 199, .26); }
.co-clocks__city { font: 500 32px/38px var(--display); letter-spacing: -.6px; color: #fff; }
.co-clocks__role { font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .74); }
.co-clocks__t { display: inline-flex; align-items: baseline; gap: 10px; font: 600 15px/22px var(--text); color: var(--mint); }
.co-tz { font: 500 30px/1 var(--display); letter-spacing: -.5px; color: #fff; font-variant-numeric: tabular-nums; }
.co-tz[hidden] { display: none; }

.co-stack-sec { padding-bottom: 140px; }
.co-stack { --wm-stack-top: 132px; gap: 56px; }
.co-office { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; min-height: 580px; padding: 56px 56px 56px 64px;
  border-radius: 38px; overflow: hidden; box-shadow: 0 30px 70px rgba(74, 18, 56, .18); }
.co-office--london { background: var(--wn-glass-bg); color: #fff; border: 1px solid rgba(255, 179, 199, .24); }
.co-office--orlando { background: #fff; color: var(--ink); border: 1px solid var(--wn-line); }
.co-office--gurgaon { background: radial-gradient(60% 80% at 90% 0%, rgba(255, 179, 199, .4), rgba(255, 179, 199, 0) 70%),
  linear-gradient(150deg, #c42a5c 0%, #b4235a 50%, #8e1a47 100%); color: #fff; }
.co-office__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.co-office__k { display: flex; align-items: center; gap: 14px; font: 600 14px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.co-office--orlando .co-office__k { color: var(--blue); }
/* rose on the crimson card measured 3.35:1: white text there (its number ring follows currentColor) */
.co-office--gurgaon .co-office__k, .co-office--gurgaon .co-office__addr svg { color: #fff; }
.co-office__k span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; letter-spacing: 0; }
.co-office__city { margin-top: 18px; font: 500 128px/1 var(--display); letter-spacing: -4.4px; color: inherit; }
.co-office__region { font: 400 20px/28px var(--text); opacity: .86; }
.co-office__addr { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font: 500 18px/27px var(--text); font-style: normal; }
.co-office__addr svg { flex: none; margin-top: 3px; color: var(--mint); }
.co-office__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22); }
.co-office--orlando .co-office__facts { border-top-color: var(--wn-line); }
.co-office__facts dt { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: 8px; }
.co-office--orlando .co-office__facts dt { color: var(--grey70); opacity: 1; }
.co-office__facts dd { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 500 16px/24px var(--text); }
.co-office--orlando .co-tz { color: var(--ink); }
.co-office__btn { margin-top: auto; padding-top: 26px; }
.co-office__map { position: relative; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(10, 2, 8, .28); }
.co-office--orlando .co-office__map { background: var(--wn-rose-10); }
.co-office--gurgaon .co-office__map { background: rgba(60, 8, 30, .28); }
.co-map--zoom { width: 100%; height: 100%; }
.co-map--zoom .co-map__land { fill: rgba(255, 179, 199, .34); }
.co-office--orlando .co-map--zoom .co-map__land { fill: rgba(180, 35, 90, .2); }
.co-office--orlando .co-pin__dot { fill: var(--purple); }
.co-office--orlando .co-pin__ping { stroke: var(--purple); }
.co-map--zoom .co-pin__dot { stroke-width: 1.4; }

.co-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.co-route { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 34px; border-radius: 26px; background: var(--wn-page);
  border: 1px solid var(--wn-line); transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out); }
.co-route:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); }
.co-route__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--purple); color: #fff; }
.co-route h3 { font: 500 26px/32px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-route p { font: 400 16px/25px var(--text); color: var(--grey70); }
.co-route .tlink { margin-top: auto; }
.co-reach__social { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--wn-line); }

/* social tiles (offices, contact) */
.co-social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.co-social a { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 52px 20px 20px; border-radius: 22px; background: var(--wn-glass-bg);
  border: 1px solid rgba(255, 179, 199, .24); color: #fff; transition: transform .4s var(--wn-ease-out), box-shadow .4s var(--wn-ease-out); }
.co-social a:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(74, 18, 56, .3); }
.co-social__ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 179, 199, .14); color: var(--mint); }
.co-social__ico svg { width: 24px; height: 24px; }
.co-social b { display: block; font: 600 17px/22px var(--text); color: #fff; }
.co-social small { font: 400 13px/18px var(--text); color: rgba(255, 255, 255, .74); }
.co-social__go { position: absolute; right: 18px; top: 50%; margin-top: -10px; color: var(--mint); transition: transform .35s var(--wn-ease-out); }
.co-social a:hover .co-social__go { transform: translate(3px, -3px); }

/* =====================================================================================================
   4. TALK TO SALES: the desk
   ===================================================================================================== */
.co-sales { position: relative; isolation: isolate; padding: 176px 0 120px;
  background: radial-gradient(56% 60% at 88% 6%, rgba(232, 70, 111, .16), rgba(232, 70, 111, 0) 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 179, 199, .48), rgba(255, 179, 199, 0) 70%), var(--wn-rose-10); }
.co-sales__glow { position: absolute; z-index: -1; left: 30%; top: 30%; width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 179, 199, .5), rgba(255, 179, 199, 0)); }
.co-sales__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.co-sales__side { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 22px; }
.co-sales__side .wn-h1 { font-size: 60px; line-height: 66px; }
.co-next { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid rgba(180, 35, 90, .2); counter-reset: con; }
.co-next li { counter-increment: con; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 20px 0;
  border-bottom: 1px solid rgba(180, 35, 90, .2); }
.co-next li::before { content: counter(con, decimal-leading-zero); grid-row: 1 / span 2; font: 500 28px/1 var(--display); color: var(--purple); }
.co-next b { font: 600 18px/26px var(--text); color: var(--ink); }
.co-next span { font: 400 16px/24px var(--text); color: var(--grey70); }
.co-sales__office { display: flex; align-items: center; gap: 8px; font: 500 15px/22px var(--text); color: var(--grey70); }
.co-sales__office svg { flex: none; color: var(--blue); }

.co-form { position: relative; padding: 44px 44px 40px; border-radius: 34px; background: #fff; border: 1px solid var(--wn-line);
  box-shadow: 0 34px 90px rgba(74, 18, 56, .16); }
.co-form::before { content: ""; position: absolute; left: 44px; right: 44px; top: 0; height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #4a1238, #d6335e 55%, #ffb3c7); }
.co-form__head h2 { font: 500 34px/40px var(--display); letter-spacing: -.6px; color: var(--ink); }
.co-form__head p { margin-top: 6px; font: 400 15px/22px var(--text); color: var(--grey70); }
.co-topics { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.co-topics legend, .co-field label { display: block; padding: 0; margin-bottom: 10px; font: 600 14px/20px var(--text); color: var(--ink); }
.co-topics legend em, .co-field label em { font-style: normal; color: var(--blue); }
.co-topics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.co-topic { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 46px 14px 14px;
  border-radius: 18px; border: 1.5px solid var(--wn-line); background: #fff; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease, transform .35s var(--wn-ease-out); }
.co-topic:hover { border-color: var(--wn-rose-20); transform: translateY(-2px); }
.co-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.co-topic__ico { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue);
  transition: background-color .2s ease, color .2s ease; }
.co-topic b { font: 600 15px/20px var(--text); color: var(--ink); }
.co-topic small { font: 400 13px/18px var(--text); color: var(--grey70); }
.co-topic__tick { position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--divider); color: transparent; transition: all .2s ease; }
.co-topic:has(input:checked) { border-color: var(--purple); background: var(--wn-rose-10); box-shadow: 0 0 0 3px rgba(214, 51, 94, .14); }
.co-topic:has(input:checked) .co-topic__ico { background: var(--purple); color: #fff; }
.co-topic:has(input:checked) .co-topic__tick { background: var(--purple); border-color: var(--purple); color: #fff; }
.co-topic:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-hints { margin-top: 14px; }
.co-hint { display: none; padding: 18px 22px 20px; border-radius: 18px; background: linear-gradient(135deg, #2c0a24, #4a1238); color: rgba(255, 255, 255, .88); }
.co-hint--none { display: flex; align-items: center; gap: 12px; background: var(--wn-page); color: var(--grey70); font: 400 15px/22px var(--text); }
.co-hint--none svg { flex: none; color: var(--blue); }
.co-form:has(input[name="topic"]:checked) .co-hint--none { display: none; }
.co-hint__t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.co-hint ul { display: grid; gap: 6px; }
.co-hint li { position: relative; padding-left: 18px; font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .9); }
.co-hint li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.co-form:has(input[value="study"]:checked) .co-hint[data-t="study"],
.co-form:has(input[value="platform"]:checked) .co-hint[data-t="platform"],
.co-form:has(input[value="panel"]:checked) .co-hint[data-t="panel"],
.co-form:has(input[value="video"]:checked) .co-hint[data-t="video"],
.co-form:has(input[value="standards"]:checked) .co-hint[data-t="standards"],
.co-form:has(input[value="other"]:checked) .co-hint[data-t="other"] { display: block; animation: wn-open .45s var(--wn-ease-out); }
.co-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 26px; }
.co-field { min-width: 0; }
.co-field--wide { grid-column: 1 / -1; }
.co-field input, .co-field select, .co-field textarea { display: block; width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--wn-line);
  background: var(--wn-page); font: 400 16px/1.3 var(--text); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.co-field textarea { height: 128px; padding: 14px 16px; line-height: 24px; resize: vertical; }
.co-field input::placeholder, .co-field textarea::placeholder { color: var(--grey60); opacity: 1; }
.co-field input:hover, .co-field select:hover, .co-field textarea:hover { border-color: var(--wn-rose-20); }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { outline: none; border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px rgba(214, 51, 94, .14); }
.co-select { position: relative; }
.co-select select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; }
.co-select__chev { position: absolute; right: 16px; top: 50%; margin-top: -9px; color: var(--blue); pointer-events: none; }
.co-form__legal { margin-top: 20px; font: 400 14px/21px var(--text); color: var(--grey70); }
.co-form__legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.co-form__send { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.co-form__req { font: 400 14px/20px var(--text); color: var(--grey70); }
.co-done { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin-top: 22px; padding: 22px 24px; border-radius: 20px;
  background: var(--wn-rose-10); border: 1px solid var(--wn-rose-20); animation: wn-open .5s var(--wn-ease-out); outline: none; }
.co-done[hidden] { display: none; }
.co-done__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; }
.co-done__t { font: 500 22px/28px var(--display); color: var(--ink); margin-bottom: 6px; }
.co-done p:not(.co-done__t) { font: 400 15px/23px var(--text); color: var(--body); }
.co-done p + p { margin-top: 6px; }
.co-done a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.co-form.is-done .co-send { opacity: .55; }

/* =====================================================================================================
   5. CONTACT: the switchboard
   ===================================================================================================== */
.co-hero--contact { padding: 184px 0 56px; background: radial-gradient(56% 70% at 92% 0%, rgba(232, 70, 111, .16), rgba(232, 70, 111, 0) 70%), var(--wn-page); }
.co-glow-contact { right: -6%; top: -20%; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(255, 179, 199, .55), rgba(255, 179, 199, 0)); }
.co-hero--contact .wn-crumbs { margin-bottom: 26px; }
.co-contact__h1 { max-width: 1100px; margin: 20px 0 36px; font-size: 104px; line-height: 106px; letter-spacing: -3.2px; }
.co-contact__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.co-contact__row .wn-lead { flex: 0 1 440px; max-width: 440px; }
.co-filter { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.co-filter[hidden] { display: none; }
.co-filter button { height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(180, 35, 90, .35); background: rgba(255, 255, 255, .7);
  font: 600 15px/1 var(--text); color: var(--blue70); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.co-filter button:hover { border-color: var(--blue); }
.co-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.co-filter button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-dir-sec { padding-top: 24px; }
.co-dir { border-top: 2px solid var(--ink); }
.co-dir__row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 5fr) 230px; gap: 32px; align-items: center;
  padding: 28px 20px; border-bottom: 1px solid var(--wn-line); transition: background-color .3s ease; }
.co-dir__row[hidden] { display: none; }
.co-dir__row:hover { background: #fff; }
.co-dir__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue);
  transition: background-color .3s ease, color .3s ease, transform .45s var(--wn-ease-out); }
.co-dir__row:hover .co-dir__ico { background: var(--purple); color: #fff; transform: rotate(-8deg) scale(1.06); }
.co-dir__who b { display: block; font: 500 25px/31px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-dir__who span { display: block; margin-top: 4px; font: 600 14px/20px var(--text); color: var(--blue); }
.co-dir__what { font: 400 16px/25px var(--text); color: var(--grey70); }
.co-dir__go { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--blue);
  color: var(--blue); font: 600 15px/1 var(--text); white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.co-dir__go::after { content: ""; position: absolute; inset: 0; }
.co-dir__row:hover .co-dir__go, .co-dir__go:focus-visible { background: var(--blue); color: #fff; }
.co-dir__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-dir__none { padding: 40px 0; font: 400 18px/28px var(--text); color: var(--grey70); }
.co-contact__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.co-contact__split .wn-head { margin-bottom: 32px; }
.co-contact__split .wn-h2 { font-size: 40px; line-height: 48px; }
.co-contact__split .co-social { grid-template-columns: 1fr; }
.co-offmini { display: grid; margin-bottom: 26px; border-top: 1px solid rgba(255, 179, 199, .22); }
.co-offmini li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 0; border-bottom: 1px solid rgba(255, 179, 199, .22); }
.co-offmini__dot { grid-row: 1 / span 3; width: 12px; height: 12px; margin-top: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(255, 179, 199, .18); }
.co-offmini b { font: 500 26px/32px var(--display); color: #fff; }
.co-offmini span { font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .78); }
.co-offmini small { font: 400 14px/20px var(--text); color: var(--mint); }

/* =====================================================================================================
   6. PANEL BOOK: the book
   ===================================================================================================== */
.co-hero--book { background: var(--wn-hero-bg); padding: 186px 0 130px; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86);
  --wn-mut: rgba(255, 255, 255, .72); color: #fff; }
.co-book__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.co-book__h1 { max-width: 640px; }
.co-bookwrap { position: relative; justify-self: center; }
.co-book { position: relative; width: 400px; height: 530px; perspective: 2200px; --co-o: 0; transform: rotateX(4deg) rotateY(-14deg); transform-style: preserve-3d; }
html.wm-on .co-book[data-scrub] { --co-o: var(--wm-p); }
html.wm-on.wm-sda .co-book[data-scrub] { animation-range: cover 48% cover 82%; }
.co-book__page { position: absolute; inset: 0; padding: 48px 40px; border-radius: 6px 18px 18px 6px; background: var(--co-paper); color: var(--ink);
  box-shadow: 6px 6px 0 -1px #f0e3e8, 12px 12px 0 -2px #e6d5dc, 30px 40px 70px rgba(10, 2, 8, .5); }
.co-book__run { font: 600 12px/16px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 26px; }
.co-book__page ol { display: grid; gap: 18px; }
.co-book__page li { display: grid; grid-template-columns: 30px auto minmax(20px, 1fr); gap: 12px; align-items: baseline; }
.co-book__page li span { font: 600 13px/1 var(--text); color: var(--blue); }
.co-book__page li b { font: 500 20px/26px var(--display); color: var(--ink); }
.co-book__page li i { border-bottom: 2px dotted var(--wn-rose-20); }
.co-book__cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(calc(var(--co-o) * -152deg)); }
.co-book__front, .co-book__back { position: absolute; inset: 0; border-radius: 6px 18px 18px 6px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.co-book__front { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 48px 44px 56px; overflow: hidden;
  background: radial-gradient(70% 60% at 85% 10%, rgba(255, 179, 199, .45), rgba(255, 179, 199, 0) 70%), linear-gradient(155deg, #b4235a 0%, #6e1a4c 45%, #2a0b22 100%);
  box-shadow: inset 8px 0 0 rgba(0, 0, 0, .18), inset 10px 0 18px rgba(0, 0, 0, .25); }
.co-book__front::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 179, 199, 0) 0 22px, rgba(255, 179, 199, .12) 22px 23px, rgba(255, 179, 199, 0) 23px 40px); }
.co-book__front img { position: absolute; left: 44px; top: 48px; height: 44px; width: auto; filter: brightness(0) invert(1); }
.co-book__title { position: relative; font: 500 64px/64px var(--display); letter-spacing: -2px; color: #fff; }
.co-book__sub { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid rgba(255, 179, 199, .6);
  font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.co-book__sub span { display: block; white-space: nowrap; }
.co-book__band { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(90deg, #ffb3c7, #e8466f); }
.co-book__back { transform: rotateY(180deg); background: linear-gradient(90deg, #f7eef2, #fffafb); box-shadow: inset -12px 0 24px rgba(74, 18, 56, .12); }
.co-book__shadow { position: absolute; left: 6%; right: -4%; bottom: -46px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 2, 8, .55), rgba(10, 2, 8, 0)); }

.co-toc__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.co-toc__grid .wn-head { position: sticky; top: 150px; margin-bottom: 0; }
.co-toc { border-top: 2px solid var(--ink); }
.co-toc a { display: grid; grid-template-columns: 70px auto minmax(40px, 1fr) auto; align-items: baseline; gap: 18px; padding: 28px 8px; border-bottom: 1px solid var(--wn-line);
  transition: background-color .3s ease, padding .4s var(--wn-ease-out); }
.co-toc a:hover { background: var(--wn-rose-10); padding-left: 20px; }
.co-toc__n { font: 500 20px/1 var(--display); color: var(--blue); }
.co-toc b { font: 500 38px/44px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-toc__dots { align-self: end; margin-bottom: 12px; border-bottom: 2px dotted var(--wn-rose-20); }
.co-toc__p { font: 400 17px/24px var(--text); color: var(--grey70); }

.co-ch { padding: 64px 0; background: var(--wn-page); scroll-margin-top: 90px; }
#ch-pocketsfull { padding-top: 120px; }
.co-spread { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 26px; background: var(--co-paper);
  box-shadow: 0 50px 100px rgba(74, 18, 56, .16), 0 3px 0 #efe3e8, 0 6px 0 #e7d7de; }
.co-spread::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 90px; margin-left: -45px; pointer-events: none;
  background: linear-gradient(90deg, rgba(74, 18, 56, 0), rgba(74, 18, 56, .06) 44%, rgba(74, 18, 56, .16) 50%, rgba(74, 18, 56, .06) 56%, rgba(74, 18, 56, 0)); }
.co-page { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 760px; padding: 64px 68px 88px; }
.co-page__run { font: 600 12px/16px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--grey70); }
.co-page__num { position: absolute; right: 60px; top: 36px; font: 500 150px/1 var(--display); letter-spacing: -6px; color: var(--wn-rose-10);
  -webkit-text-stroke: 1px var(--wn-rose-20); pointer-events: none; }
.co-page__logo { position: relative; display: inline-flex; align-items: center; height: 88px; padding: 0 24px; margin: 18px 0 10px; border-radius: 18px; background: var(--wn-ink); }
.co-page__logo img { height: 52px; width: auto; }
#ch-sampleeye .co-page__logo img { height: 40px; }
#ch-pocketsfull-ai .co-page__logo img { height: 44px; }
.co-page__h { font: 500 44px/50px var(--display); letter-spacing: -1.2px; color: var(--ink); }
.co-page__lede { font: 400 19px/30px var(--text); color: var(--body); }
.co-page__body { font: 400 16px/26px var(--text); color: var(--grey70); }
.co-page__k { margin-top: 8px; font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-page__sub { font: 500 24px/30px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-page__sub + * { margin-top: 2px; }
.co-page--r .co-page__sub:not(:first-child) { margin-top: 18px; }
.co-page__folio { position: absolute; bottom: 30px; font: 500 15px/1 var(--display); color: var(--grey60); }
.co-page--l .co-page__folio { left: 68px; }
.co-page--r .co-page__folio { right: 68px; }
.co-page--r .tlink { margin-top: auto; padding-top: 12px; }
.co-covers { display: flex; flex-wrap: wrap; gap: 8px; }
.co-covers li { padding: 8px 14px; border-radius: 999px; background: var(--wn-rose-10); font: 600 14px/18px var(--text); color: var(--blue70); }
.co-outtab { width: 100%; border-collapse: collapse; }
.co-outtab th, .co-outtab td { padding: 13px 10px 13px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--wn-line); }
.co-outtab thead th { padding-top: 0; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.co-outtab tbody th { width: 128px; font: 600 16px/22px var(--text); color: var(--ink); }
.co-outtab td { font: 400 15px/22px var(--text); color: var(--grey70); }
.co-outtab .co-out__pay { width: 150px; padding-right: 0; }
/* what each outcome pays, as words (no bars: the reward for trying has no fixed ratio to the survey reward) */
.co-paid { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 13px/18px var(--text); }
.co-paid::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.co-paid--full { background: var(--wn-btn); color: #fff; }
.co-paid--small { background: var(--wn-rose-10); color: var(--wn-link); box-shadow: inset 0 0 0 1px var(--wn-rose-20); }
.co-paid--none { padding-left: 0; color: var(--grey70); }
.co-paid--none::before { width: 10px; height: 2px; border-radius: 1px; }
.co-msteps { counter-reset: cms; display: grid; gap: 10px; width: 100%; }
.co-msteps li { counter-increment: cms; display: flex; align-items: center; gap: 14px; font: 500 16px/22px var(--text); color: var(--ink); }
.co-msteps li::before { content: counter(cms); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff;
  font: 600 13px/1 var(--text); }
.co-flow { position: relative; display: grid; gap: 14px; width: 100%; }
.co-flow::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--purple), var(--mint)); }
.co-flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; }
.co-flow__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--purple); color: var(--blue); font: 600 14px/1 var(--text); }
.co-flow b { display: block; font: 600 16px/22px var(--text); color: var(--ink); }
.co-flow p { font: 400 14px/21px var(--text); color: var(--grey70); }
.co-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.co-outs li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 30px; border-radius: 14px; background: var(--wn-page); position: relative; }
.co-outs li::before { content: ""; position: absolute; left: 13px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--purple)); }
.co-outs b { font: 600 14px/19px var(--text); color: var(--ink); }
.co-outs span { font: 400 13px/18px var(--text); color: var(--grey70); }
.co-gets { display: grid; gap: 14px; width: 100%; }
.co-gets li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; }
.co-tk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; margin-top: 1px; }
.co-gets b { display: block; font: 600 16px/23px var(--text); color: var(--ink); }
.co-gets p { font: 400 15px/23px var(--text); color: var(--grey70); }
.co-page__chips .wn-chip { background: var(--wn-rose-10); border-color: transparent; color: var(--blue70); }
.co-every { overflow: clip; }
.co-every__glow { position: absolute; left: -12%; top: -20%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .32), rgba(232, 70, 111, 0)); }
.co-every .wrap { position: relative; }

/* =====================================================================================================
   21 Oct 2026: seven more company pages (company.py sections 7-13). Shared bits first.
   ===================================================================================================== */
.co-tlist { display: grid; gap: 20px; }
.co-tlist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; row-gap: 26px; }
.co-tlist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; }
.co-tlist b { display: block; font: 600 18px/26px var(--text); color: var(--ink); }
.co-tlist p { margin-top: 4px; font: 400 16px/25px var(--text); color: var(--grey70); }
/* directory cards (hub) */
.co-lcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.co-lcard { display: flex; }
.co-lcard a { position: relative; flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-content: start;
  padding: 26px 60px 26px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--wn-line);
  transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out), border-color .3s ease; }
.co-lcard a:hover { transform: translateY(-4px); box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.co-lcard a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.co-lcard__ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue);
  transition: background-color .3s ease, color .3s ease; }
.co-lcard a:hover .co-lcard__ico { background: var(--purple); color: #fff; }
.co-lcard__t { font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ink); }
.co-lcard__d { font: 400 15px/23px var(--text); color: var(--grey70); }
.co-lcard__go { position: absolute; right: 22px; top: 28px; color: var(--blue); transition: transform .35s var(--wn-ease-out); }
.co-lcard a:hover .co-lcard__go { transform: translateX(4px); }
/* tab panels swap with a short rise (t-company.js adds .is-swap) */
.co-pt-panel.is-swap, .co-me-pan.is-swap { animation: co-swap .55s var(--wn-ease-out); }
@keyframes co-swap { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes co-spin { to { transform: rotate(360deg); } }
@keyframes co-blink { 50% { opacity: .2; } }
@keyframes co-rise { to { opacity: 1; transform: none; } }
@keyframes co-grow0 { from { transform: scaleX(0); } }
@keyframes co-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }

/* =====================================================================================================
   7. COMPANY HUB: the directory
   ===================================================================================================== */
.co-hero--hub { background: var(--wn-hero-bg); padding: 186px 0 120px; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86);
  --wn-mut: rgba(255, 255, 255, .72); color: #fff; }
.co-ix-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.co-ix__h1 { font-size: 82px; line-height: 86px; }
.co-hero--hub .wn-lead { max-width: 640px; font-size: 19px; line-height: 30px; }
.co-ix-tiles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.co-ix-tiles li { display: flex; }
.co-ix-tile { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 236px; padding: 26px 26px 24px; border-radius: 26px;
  background: rgba(26, 6, 22, .55); border: 1px solid rgba(255, 179, 199, .24); color: #fff; overflow: hidden; isolation: isolate;
  transition: transform .45s var(--wn-ease-out), border-color .3s ease, background-color .3s ease; }
.co-ix-tile::after { content: ""; position: absolute; z-index: -1; right: -50px; bottom: -50px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .35), rgba(232, 70, 111, 0)); transition: transform .6s var(--wn-ease-out); }
.co-ix-tile:hover { transform: translateY(-6px); border-color: rgba(255, 179, 199, .55); background-color: rgba(74, 18, 56, .6); }
.co-ix-tile:hover::after { transform: scale(1.5); }
.co-ix-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.co-ix-tile--0 { background: linear-gradient(160deg, rgba(214, 51, 94, .5), rgba(26, 6, 22, .6) 70%); }
.co-ix-tile__n { font: 600 13px/1 var(--text); letter-spacing: .12em; color: var(--mint); }
.co-ix-tile__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 179, 199, .14); color: var(--mint); margin-top: 6px; }
/* top-aligned (21 Oct 2026): the title sits a fixed gap under the icon in every tile, whatever the length of its line */
.co-ix-tile b { margin-top: 8px; font: 500 28px/34px var(--display); letter-spacing: -.5px; }
.co-ix-tile small { font: 400 14px/20px var(--text); color: rgba(255, 255, 255, .8); }

.co-ix { background: var(--wn-page); }
.co-ix__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 80px; align-items: start; }
.co-ix__nav { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 16px; }
.co-ix__h2 { font-size: 42px; line-height: 48px; }
.co-ix__navsub { font: 400 16px/25px var(--text); color: var(--grey70); }
.co-ix__nav ol { display: grid; margin-top: 14px; border-top: 1px solid var(--wn-line); }
.co-ix__nav a { position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--wn-line);
  color: var(--grey70); transition: color .25s ease, padding .35s var(--wn-ease-out); }
.co-ix__navn { font: 600 13px/1 var(--text); letter-spacing: .08em; color: var(--blue); }
.co-ix__navt { font: 500 21px/26px var(--display); letter-spacing: -.2px; }
.co-ix__nav a i { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--wn-ease-out); }
.co-ix__nav a:hover, .co-ix__nav a.is-on { color: var(--ink); padding-left: 8px; }
.co-ix__nav a.is-on i { transform: scaleX(1); }
.co-ix__nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-ix__blocks { display: flex; flex-direction: column; gap: 88px; }
.co-ix__block { scroll-margin-top: 140px; }
.co-ix__bh { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 30px; }
.co-ix__num { font: 500 92px/.9 var(--display); letter-spacing: -3px; color: transparent; -webkit-text-stroke: 1.5px var(--purple); }
.co-ix__bk { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.co-ix__bt { margin: 10px 0 8px; font: 500 40px/46px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-ix__bd { font: 400 18px/28px var(--text); color: var(--grey70); max-width: 640px; }

.co-ix-offs { overflow: clip; }
.co-ix-offs__glow { position: absolute; right: -10%; top: -30%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .32), rgba(232, 70, 111, 0)); }
.co-ix-offs .wrap { position: relative; }
.co-ix-offs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.co-ix-offs__head .wn-head { margin-bottom: 0; }
.co-ix-offs__head .tlink { white-space: nowrap; }
.co-ix-offs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.co-ix-off { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--wn-glass-bg); border: 1px solid rgba(255, 179, 199, .24); }
.co-ix-off__map { position: relative; overflow: hidden; height: 200px; display: flex; align-items: center; justify-content: center; background: rgba(10, 2, 8, .3); border-bottom: 1px solid rgba(255, 179, 199, .16); }
.co-ix-off__map .co-map { height: 100%; }
.co-ix-off__txt { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px 30px; }
.co-ix-off__k { font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.co-ix-off h3 { font: 500 44px/50px var(--display); letter-spacing: -1.2px; color: #fff; }
.co-ix-off__r { font: 400 16px/24px var(--text); color: rgba(255, 255, 255, .8); }
.co-ix-off__t { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 179, 199, .2);
  font: 600 14px/20px var(--text); color: var(--mint); }

/* =====================================================================================================
   8. PARTNERSHIP: the network
   ===================================================================================================== */
.co-hero--pt { padding: 176px 0 110px; color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .72);
  background: radial-gradient(48% 60% at 76% 46%, rgba(214, 51, 94, .42), rgba(214, 51, 94, 0) 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(142, 26, 71, .6), rgba(142, 26, 71, 0) 75%), linear-gradient(160deg, #2c0a24 0%, #33102c 45%, #1a0616 100%); }
.co-pt-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
.co-pt__h1 { font-size: 64px; line-height: 70px; }
.co-hero--pt .wn-lead { max-width: 540px; }
.co-pt-hero__vis { justify-self: end; width: 100%; max-width: 640px; }
.co-pt-net { position: relative; width: 100%; aspect-ratio: 560 / 520; }
.co-pt-net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.co-pt-net__ring { fill: none; stroke: rgba(255, 179, 199, .2); stroke-width: 1; stroke-dasharray: 3 6; }
.co-pt-net__line { fill: none; stroke: rgba(255, 179, 199, .6); stroke-width: 1.6; stroke-linecap: round; }
html.wm-on .co-pt-net__line { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: co-draw 1.4s var(--wn-ease-out) var(--d, 0ms) forwards; }
.co-pt-net__dot { fill: #fff; }
html:not(.wm-on) .co-pt-net__dot { display: none; }
.co-pt-net__core { position: absolute; left: 50%; top: 50%; width: 164px; height: 164px; margin: -82px 0 0 -82px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #d6335e, #8e1a47 60%, #4a1238); box-shadow: 0 0 0 10px rgba(214, 51, 94, .16), 0 0 70px rgba(232, 70, 111, .5); }
.co-pt-net__core img { position: relative; width: 108px; height: auto; filter: brightness(0) invert(1); }
.co-pt-net__pulse { position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 179, 199, .55); opacity: 0; }
html.wm-on .co-pt-net__pulse { animation: co-pulse 3s var(--wn-ease-out) 1.4s 3; }
.co-pt-node { position: absolute; left: var(--x); top: var(--y); width: 160px; margin: -38px 0 0 -80px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; color: #fff; }
.co-pt-node__disc { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #2c0a24; border: 1.5px solid rgba(255, 179, 199, .6);
  color: var(--mint); box-shadow: 0 10px 30px rgba(10, 2, 8, .5); transition: background-color .3s ease, color .3s ease, transform .4s var(--wn-ease-out); }
.co-pt-node b { font: 600 15px/20px var(--text); text-shadow: 0 2px 10px rgba(10, 2, 8, .6); }
.co-pt-node:hover .co-pt-node__disc, .co-pt-node:focus-visible .co-pt-node__disc { background: var(--purple); color: #fff; transform: scale(1.08); }
.co-pt-node:focus-visible { outline: none; }
.co-pt-node:focus-visible b { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
html.wm-on .co-pt-node { opacity: 0; animation: co-node-in .7s var(--wn-ease-out) var(--d, 0ms) forwards; }
@keyframes co-node-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.co-pt-state__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.co-pt-state__h { margin: 20px 0 22px; font: 500 66px/72px var(--display); letter-spacing: -2px; color: var(--ink); }
.co-pt-state__p { font: 400 20px/31px var(--text); color: var(--grey70); max-width: 560px; }
.co-pt-pillars { display: grid; gap: 14px; }
.co-pt-pillars li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 24px 26px; border-radius: 22px;
  background: var(--wn-page); border: 1px solid var(--wn-line); }
.co-pt-pillar__ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--purple); color: #fff; }
.co-pt-pillars b { font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ink); }
.co-pt-pillars p { font: 400 15px/23px var(--text); color: var(--grey70); }

.co-pt-types { background: var(--wn-page); scroll-margin-top: 70px; }
.co-pt-tabs__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.co-pt-tabs__list[hidden] { display: none; }
/* top-aligned (21 Oct 2026): align-content start keeps the number, icon and title at the same height in every tab, and
   the title keeps room for two lines ("Technology providers" wraps), so the sublines line up too */
.co-pt-tab { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n ico" "t t"; gap: 14px 10px; align-items: center; align-content: start; padding: 20px; text-align: left;
  border-radius: 20px; border: 1.5px solid var(--wn-line); background: #fff; cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, transform .4s var(--wn-ease-out), box-shadow .3s ease; }
.co-pt-tab__n { grid-area: n; font: 600 13px/1 var(--text); letter-spacing: .1em; color: var(--blue); }
.co-pt-tab__ico { grid-area: ico; justify-self: end; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); }
.co-pt-tab__t { grid-area: t; display: flex; flex-direction: column; gap: 3px; }
.co-pt-tab__t b { min-height: 52px; font: 500 20px/26px var(--display); color: var(--ink); }
.co-pt-tab__t small { font: 400 13px/18px var(--text); color: var(--grey70); }
.co-pt-tab:hover { border-color: var(--wn-rose-20); transform: translateY(-2px); }
.co-pt-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); box-shadow: 0 18px 40px rgba(30, 10, 26, .25); }
.co-pt-tab[aria-selected="true"] .co-pt-tab__t b { color: #fff; }
.co-pt-tab[aria-selected="true"] .co-pt-tab__t small { color: rgba(255, 255, 255, .78); }
.co-pt-tab[aria-selected="true"] .co-pt-tab__n { color: var(--mint); }
.co-pt-tab[aria-selected="true"] .co-pt-tab__ico { background: var(--purple); color: #fff; }
.co-pt-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.co-pt-panels { display: grid; gap: 24px; }
.co-pt-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: 32px; overflow: hidden; background: #fff; border: 1px solid var(--wn-line);
  box-shadow: 0 30px 70px rgba(74, 18, 56, .10); scroll-margin-top: 140px; }
.co-pt-panel[hidden] { display: none; }
.co-pt-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.co-pt-panel__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 52px 56px; }
.co-pt-panel__k { display: flex; align-items: center; gap: 12px; font: 600 14px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.co-pt-panel__k span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; letter-spacing: 0; }
.co-pt-panel h3 { font: 500 40px/46px var(--display); letter-spacing: -.9px; color: var(--ink); }
.co-pt-panel__p { font: 400 18px/29px var(--text); color: var(--body); max-width: 620px; }
.co-pt-panel__chips .wn-chip { background: var(--wn-rose-10); border-color: transparent; color: var(--blue70); font-weight: 600; }
.co-pt-panel__go { margin-top: 8px; }
.co-pt-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; min-height: 420px; padding: 40px;
  overflow: hidden; background: var(--wn-glass-bg); color: #fff; }
.co-pt-art__num { position: absolute; right: 26px; top: 6px; font: 500 180px/1 var(--display); letter-spacing: -6px; color: transparent; -webkit-text-stroke: 1px rgba(255, 179, 199, .35); }
.co-pt-art__link { position: relative; display: flex; align-items: center; }
.co-pt-art__a, .co-pt-art__b { width: 104px; height: 104px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.co-pt-art__a { background: rgba(255, 179, 199, .14); border: 1.5px solid rgba(255, 179, 199, .6); color: var(--mint); }
.co-pt-art__b { background: radial-gradient(circle at 30% 25%, #d6335e, #8e1a47 70%); box-shadow: 0 0 40px rgba(232, 70, 111, .5); }
.co-pt-art__b img { width: 72px; height: auto; filter: brightness(0) invert(1); }
.co-pt-art__line { position: relative; width: 110px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 179, 199, .7) 0 6px, transparent 6px 12px); }
.co-pt-art__line u { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #ffb3c7; }
html.wm-on .co-pt-art__line u { animation: co-shuttle 2.4s ease-in-out 4 alternate; }
@keyframes co-shuttle { from { transform: translateX(0); } to { transform: translateX(100px); } }
.co-pt-art__cap { position: relative; max-width: 300px; font: 600 14px/20px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); text-align: center; }

.co-pt-gets { overflow: clip; }
.co-pt-gets__glow { position: absolute; left: -12%; top: -20%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .32), rgba(232, 70, 111, 0)); }
.co-pt-gets .wrap { position: relative; }

.co-pt-start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.co-pt-start__side { position: sticky; top: 150px; }
.co-pt-start__side .wn-head { margin-bottom: 30px; }
.co-pt-steps { position: relative; }
.co-pt-steps__rail { position: absolute; left: 35px; top: 40px; bottom: 60px; width: 2px; background: var(--wn-line); }
.co-pt-steps__rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--purple), var(--mint)); transform-origin: 50% 0; }
html.wm-on .co-pt-steps__rail i[data-scrub] { transform: scaleY(var(--wm-p)); }
html.wm-on.wm-sda .co-pt-steps__rail i[data-scrub] { animation-range: entry 20% cover 60%; }
.co-pt-steps ol { position: relative; display: grid; gap: 18px; }
.co-pt-steps li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 26px; align-items: start; padding: 22px 0; }
.co-pt-step__n { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--purple); color: var(--blue);
  font: 500 24px/1 var(--display); box-shadow: 0 0 0 10px #fff; }
.co-pt-steps h3 { margin: 12px 0 8px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); }
.co-pt-steps p { font: 400 18px/28px var(--text); color: var(--grey70); }

/* =====================================================================================================
   9. DATA QUALITY: the checkpoints (the look of the September integrity-guard page: dark, glowing cards)
   ===================================================================================================== */
.co-hero--dq { padding: 176px 0 64px; color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .72);
  background: radial-gradient(40% 50% at 82% 30%, rgba(214, 51, 94, .30), rgba(214, 51, 94, 0) 70%), linear-gradient(180deg, #12030d 0%, #1e0a1a 60%, #2a0b22 100%); }
.co-hero--dq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 179, 199, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 179, 199, .06) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 80% at 70% 40%, #000 30%, transparent 85%); }
.co-glow-dq { right: 0; top: 8%; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(232, 70, 111, .26), rgba(232, 70, 111, 0)); }
.co-dq-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
.co-dq__h1 { font-size: 62px; line-height: 68px; }
.co-dq-card { position: relative; padding: 26px 28px 22px; border-radius: 28px; background: linear-gradient(180deg, rgba(44, 10, 36, .94), rgba(26, 6, 22, .96));
  border: 1px solid rgba(255, 179, 199, .32); box-shadow: 0 0 0 1px rgba(232, 70, 111, .18), 0 0 70px rgba(232, 70, 111, .32), 0 40px 80px rgba(0, 0, 0, .45); }
.co-dq-card__top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 179, 199, .18); }
.co-dq-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.co-dq-card__top b { font: 500 22px/28px var(--display); color: #fff; }
.co-dq-card__tag { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: rgba(255, 179, 199, .14); font: 600 12px/16px var(--text); color: var(--mint); }
.co-dq-card__head, .co-dq-r { display: grid; grid-template-columns: 86px repeat(4, minmax(0, 1fr)) 70px; align-items: center; column-gap: 6px; }
.co-dq-card__head { padding: 14px 10px 8px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.co-dq-card__head span:not(:first-child) { text-align: center; }
.co-dq-card__head span:last-child { text-align: right; }
.co-dq-card__rows { display: grid; gap: 6px; }
.co-dq-r { padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.co-dq-r b { font: 600 14px/18px var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.co-dq-c { justify-self: center; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.co-dq-c--ok { background: rgba(255, 179, 199, .16); color: var(--mint); }
.co-dq-c--bad { background: var(--purple); color: #fff; box-shadow: 0 0 14px rgba(214, 51, 94, .7); }
.co-dq-st { justify-self: end; font: 600 12px/16px var(--text); color: rgba(255, 255, 255, .78); }
.co-dq-r.is-flag { background: rgba(214, 51, 94, .16); box-shadow: inset 0 0 0 1px rgba(232, 70, 111, .45); }
.co-dq-r.is-flag .co-dq-st { color: var(--mint); }
.co-dq-why { grid-column: 2 / -1; margin-top: 6px; font: 500 13px/18px var(--text); color: var(--mint); }
html.wm-on .co-dq-r.is-flag { animation: co-flag 1s ease 1.4s both; }
@keyframes co-flag { from { background-color: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(232, 70, 111, 0); } }
.co-dq-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 179, 199, .18); font: 500 14px/20px var(--text); color: rgba(255, 255, 255, .84); }
.co-dq-card__btns { display: flex; gap: 8px; }
.co-dq-card__btns i { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 179, 199, .4); font: 600 13px/1 var(--text); font-style: normal; color: #fff; }
.co-dq-card__btns i.is-on { background: var(--purple); border-color: var(--purple); }
.co-dq-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 88px; border-top: 1px solid rgba(255, 179, 199, .22); }
.co-dq-strip li { display: flex; align-items: center; gap: 16px; padding: 26px 24px 0 0; }
.co-dq-strip li + li { padding-left: 28px; border-left: 1px solid rgba(255, 179, 199, .22); }
.co-dq-strip__ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 179, 199, .12); color: var(--mint); }
.co-dq-strip small { display: block; font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.co-dq-strip b { display: block; margin-top: 2px; font: 500 24px/30px var(--display); color: #fff; }

.co-dq-ver__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.co-dq-ver__go { margin-top: 30px; }
.co-dq-spec { position: relative; overflow: hidden; padding: 36px 34px 28px; border-radius: 28px; background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.co-dq-spec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #4a1238, #d6335e 55%, #ffb3c7); }
.co-dq-spec__k { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-dq-spec h3 { margin: 6px 0 18px; font: 500 28px/34px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-dq-spec ul { display: grid; border-top: 1px solid var(--wn-line); }
.co-dq-spec li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--wn-line); }
.co-dq-spec li span { font: 600 12px/20px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.co-dq-spec li b { font: 500 16px/22px var(--text); color: var(--ink); }
.co-dq-spec__ok { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--wn-rose-10);
  font: 600 15px/22px var(--text); color: var(--blue70); }
.co-dq-spec__ok svg { flex: none; color: var(--purple); }

.co-dq-path { position: relative; color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .72);
  background: radial-gradient(50% 60% at 50% 100%, rgba(142, 26, 71, .55), rgba(142, 26, 71, 0) 75%), linear-gradient(180deg, #1e0a1a 0%, #2c0a24 100%); }
html:not(.wm-on) .co-dq-path { padding: 112px 0; }
.co-dq-path .wm-pin__sticky { display: flex; align-items: center; }
html.wm-on .co-dq-path .wm-pin__sticky { padding: 156px 0 30px; }
.co-dq-path__in { width: 100%; }
.co-dq-path__head { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.co-dq-path__sub { font: 400 18px/28px var(--text); color: rgba(255, 255, 255, .8); }
.co-dq-track { position: relative; margin: 74px 0 34px; }
.co-dq-track ol { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.co-dq-node { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.co-dq-node__dot { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #2c0a24;
  border: 1.5px solid rgba(255, 179, 199, .35); color: rgba(255, 179, 199, .75);
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease, transform .5s var(--wn-ease-out); }
.co-dq-node b { font: 600 15px/20px var(--text); color: rgba(255, 255, 255, .74); transition: color .45s ease; }
.co-dq-track__lane { position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: rgba(255, 179, 199, .18); }
.co-dq-track__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--purple), var(--mint)); transform-origin: 0 50%; }
/* step k is active while --wm-pin runs from k/5 to (k+1)/5: the runner reaches node k half way through step k */
html.wm-on .co-dq-track__fill { transform: scaleX(clamp(0, calc(var(--wm-pin, 0) * 1.25 - .125), 1)); }
.co-dq-track__mover { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
html.wm-on .co-dq-track__mover { transform: translateX(calc(clamp(0, calc(var(--wm-pin, 0) * 1.25 - .125), 1) * 100%)); }
.co-dq-track__runner { position: absolute; left: -17px; top: -72px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  color: var(--purple); box-shadow: 0 0 0 6px rgba(255, 179, 199, .22), 0 10px 24px rgba(0, 0, 0, .4); }
.co-dq-track__runner::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
html:not(.wm-on) .co-dq-track__runner { display: none; }
html:not(.wm-on) .co-dq-node__dot,
.co-dq-path[data-active="0"] .co-dq-node:nth-child(-n+1) .co-dq-node__dot, .co-dq-path[data-active="1"] .co-dq-node:nth-child(-n+2) .co-dq-node__dot,
.co-dq-path[data-active="2"] .co-dq-node:nth-child(-n+3) .co-dq-node__dot, .co-dq-path[data-active="3"] .co-dq-node:nth-child(-n+4) .co-dq-node__dot,
.co-dq-path[data-active="4"] .co-dq-node .co-dq-node__dot { background: var(--purple); border-color: var(--purple); color: #fff; }
.co-dq-path[data-active="0"] .co-dq-node:nth-child(1) .co-dq-node__dot, .co-dq-path[data-active="1"] .co-dq-node:nth-child(2) .co-dq-node__dot,
.co-dq-path[data-active="2"] .co-dq-node:nth-child(3) .co-dq-node__dot, .co-dq-path[data-active="3"] .co-dq-node:nth-child(4) .co-dq-node__dot,
.co-dq-path[data-active="4"] .co-dq-node:nth-child(5) .co-dq-node__dot { box-shadow: 0 0 0 8px rgba(214, 51, 94, .22), 0 0 30px rgba(232, 70, 111, .7); transform: scale(1.1); }
html:not(.wm-on) .co-dq-node b, .co-dq-path[data-active="0"] .co-dq-node:nth-child(-n+1) b, .co-dq-path[data-active="1"] .co-dq-node:nth-child(-n+2) b,
.co-dq-path[data-active="2"] .co-dq-node:nth-child(-n+3) b, .co-dq-path[data-active="3"] .co-dq-node:nth-child(-n+4) b,
.co-dq-path[data-active="4"] .co-dq-node b { color: #fff; }
.co-dq-layers { max-width: 1040px; margin: 0 auto; }
html:not(.wm-on) .co-dq-layers { display: grid; gap: 18px; }
.co-dq-step { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 28px; align-items: start; padding: 32px 40px; border-radius: 28px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 179, 199, .24); }
.co-dq-step__n { font: 500 86px/.9 var(--display); letter-spacing: -3px; color: transparent; -webkit-text-stroke: 1.5px var(--mint); }
.co-dq-step__k { font: 600 13px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.co-dq-step h3 { margin: 8px 0 10px; font: 500 32px/38px var(--display); letter-spacing: -.6px; color: #fff; }
.co-dq-step__body > p:not(.co-dq-step__k) { max-width: 760px; font: 400 17px/27px var(--text); color: rgba(255, 255, 255, .86); }
.co-dq-step__chips { margin-top: 16px; }
.co-dq-step .wn-chip { background: rgba(255, 179, 199, .08); border-color: rgba(255, 179, 199, .32); color: #fff; }
.co-dq-step__go { margin-top: 16px; }
.co-dq-step__go .tlink { color: var(--mint); }
.co-dq-step__go .tlink:hover { color: #fff; }

.co-dq-layers-sec { background: var(--wn-page); }
.co-dq-two { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.co-dq-two > article { display: flex; }
.co-dq-two__then { align-self: center; justify-self: center; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.co-dq-layer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px; border-radius: 30px; background: #fff; border: 1px solid var(--wn-line);
  box-shadow: 0 18px 44px rgba(74, 18, 56, .08); }
.co-dq-layer--door { background: var(--wn-glass-bg); border-color: rgba(255, 179, 199, .26); color: #fff; }
.co-dq-layer__ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); }
.co-dq-layer--door .co-dq-layer__ico { background: rgba(255, 179, 199, .14); color: var(--mint); }
.co-dq-layer__k { font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-dq-layer--door .co-dq-layer__k { color: var(--mint); }
.co-dq-layer h3 { font: 500 36px/42px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-dq-layer--door h3 { color: #fff; }
.co-dq-layer__p { font: 400 17px/27px var(--text); color: var(--grey70); }
.co-dq-layer--door .co-dq-layer__p { color: rgba(255, 255, 255, .86); }
.co-dq-layer__chips { margin-top: 6px; }
.co-dq-layer--door .wn-chip { background: rgba(255, 179, 199, .08); border-color: rgba(255, 179, 199, .32); color: #fff; }
.co-dq-layer__go { margin-top: auto; padding-top: 12px; }
.co-dq-layer--door .tlink { color: var(--mint); }
.co-dq-layer--door .tlink:hover { color: #fff; }
.co-dq-two__note { margin-top: 36px; text-align: center; font: 500 22px/30px var(--display); color: var(--ink); }

.co-dq-iso__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.co-dq-iso__mark { display: grid; grid-template-columns: auto; grid-template-areas: "k" "n" "y" "img"; justify-content: start; align-items: baseline;
  column-gap: 10px; row-gap: 8px; padding: 52px 48px; border-radius: 32px; background: #fff; box-shadow: var(--wn-shadow); }
.co-dq-iso__k { grid-area: k; font: 600 16px/1 var(--text); letter-spacing: .16em; color: var(--blue); }
.co-dq-iso__mark b { grid-area: n; font: 500 128px/.9 var(--display); letter-spacing: -6px; color: var(--blue70);
  background: linear-gradient(120deg, #4a1238 10%, #b4235a 55%, #e8466f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.co-dq-iso__mark i { grid-area: y; justify-self: end; margin-top: -4px; font: 500 30px/1 var(--display); font-style: normal; color: var(--grey60); }
.co-dq-iso__img { grid-area: img; height: 64px; width: auto; margin-top: 24px; }
.co-dq-iso__p { max-width: 680px; font: 400 19px/30px var(--text); color: var(--body); }
.co-dq-iso__also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.co-dq-iso__also li { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .75); border: 1px solid var(--wn-rose-20); }
.co-dq-iso__also b { font: 600 16px/22px var(--text); color: var(--ink); }
.co-dq-iso__also span { font: 400 14px/20px var(--text); color: var(--grey70); }
.co-dq-iso__go { display: flex; gap: 28px; margin-top: 28px; }

.co-dq-rep__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.co-dq-doc { perspective: 1600px; }
.co-dq-doc__in { position: relative; padding: 34px 34px 30px; border-radius: 26px; background: #fffcfd; border: 1px solid var(--wn-line);
  box-shadow: 0 40px 80px rgba(74, 18, 56, .16), 0 3px 0 #efe3e8, 0 6px 0 #e7d7de; transform: rotate(1.2deg); }
.co-dq-doc__k { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-dq-doc h3 { margin: 6px 0 20px; font: 500 28px/34px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-dq-doc__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.co-dq-doc__kpis div { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; border-radius: 14px; background: var(--wn-rose-10); }
.co-dq-doc__kpis b { font: 500 28px/1 var(--display); color: var(--blue70); font-variant-numeric: tabular-nums; }
.co-dq-doc__kpis span { font: 400 12px/16px var(--text); color: var(--grey70); }
.co-dq-doc__s { margin: 22px 0 10px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.co-dq-doc__why { display: flex; flex-wrap: wrap; gap: 8px; }
.co-dq-doc__why span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--wn-line); font: 500 14px/18px var(--text); color: var(--ink); }
.co-dq-doc__why b { color: var(--blue); }
/* rows of the per-answer file (21 Oct 2026: replaces the study-wide "how every start ended" bars) */
.co-dq-doc__csv { border: 1px solid var(--wn-line); border-radius: 14px; overflow: hidden; background: #fff; }
.co-dq-doc__csvh, .co-dq-doc__csv li { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 10px 16px; }
.co-dq-doc__csvh { background: var(--wn-page); font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.co-dq-doc__csv li { border-top: 1px solid var(--wn-line); font: 400 14px/20px var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.co-dq-doc__csv li b { font-weight: 600; color: var(--blue70); }
.co-dq-faq { background: var(--wn-page); }

/* =====================================================================================================
   10. METHODOLOGY: the field guide
   ===================================================================================================== */
.co-hero--me { padding: 176px 0 104px; background: radial-gradient(46% 60% at 86% 30%, rgba(255, 179, 199, .38), rgba(255, 179, 199, 0) 70%), #fffcfd; }
.co-hero--me::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(180, 35, 90, .08) 35px 36px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.co-hero--me::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(7% - 30px); width: 2px; background: rgba(214, 51, 94, .24); }
.co-me-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; }
.co-me__h1 { max-width: 700px; font-size: 72px; line-height: 76px; }
.co-hero--me .btn-ghost-blue { color: var(--wn-deep); border-color: var(--wn-deep); }
.co-me-toc { margin-top: 18px; }
.co-me-toc p { margin-bottom: 12px; font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--grey70); }
.co-me-toc ol { display: flex; flex-wrap: wrap; gap: 8px; }
.co-me-toc a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 7px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-line);
  font: 600 14px/1 var(--text); color: var(--ink); transition: border-color .25s ease, color .25s ease, box-shadow .3s ease; }
.co-me-toc a span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); font-size: 12px; }
.co-me-toc a:hover { border-color: var(--purple); color: var(--blue70); box-shadow: 0 8px 20px rgba(214, 51, 94, .14); }
.co-me-toc a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-me-ring { justify-self: center; width: 100%; max-width: 560px; }
.co-me-ring__svg { display: block; width: 100%; height: auto; overflow: visible; }
.co-me-ring__track { fill: none; stroke: var(--wn-line); stroke-width: 22; }
.co-me-ring__dash { fill: none; stroke: rgba(180, 35, 90, .3); stroke-width: 1.2; stroke-dasharray: 2 7; transform-origin: 250px 250px; }
html.wm-on .co-me-ring__dash { animation: co-spin 60s linear infinite; }
.co-me-ring__arc { fill: none; stroke-width: 22; }
.co-me-ring__arc--0 { stroke: #4a1238; } .co-me-ring__arc--1 { stroke: #8e1a47; } .co-me-ring__arc--2 { stroke: #b4235a; }
.co-me-ring__arc--3 { stroke: #d6335e; } .co-me-ring__arc--4 { stroke: #e8466f; } .co-me-ring__arc--5 { stroke: #f07b9a; }
html.wm-on .co-me-ring__arc { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: co-draw 1s var(--wn-ease-out) var(--d, 0ms) forwards; }
.co-me-ring__node { fill: #fff; stroke: var(--purple); stroke-width: 1.5; }
.co-me-ring__n { font: 600 12px/1 var(--text); fill: var(--blue); }
.co-me-ring__l { font: 500 19px/1 var(--display); fill: var(--ink); }
.co-me-ring__big { font: 500 116px/1 var(--display); letter-spacing: -4px; fill: var(--ink); }
.co-me-ring__sm { font: 600 15px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; fill: var(--blue); }

.co-me-stages-sec .wn-head { margin-bottom: 40px; }
.co-me-stages { position: relative; padding-left: 64px; }
.co-me-rail { position: absolute; left: 0; top: 64px; bottom: 64px; width: 3px; border-radius: 3px; background: var(--wn-line); }
.co-me-rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--purple), var(--cyan) 55%, var(--mint)); transform-origin: 50% 0; }
html.wm-on .co-me-rail i[data-scrub] { transform: scaleY(var(--wm-p)); }
html.wm-on.wm-sda .co-me-rail i[data-scrub] { animation-range: entry 50% exit 50%; }
.co-me-stage { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; padding: 64px 0; border-top: 1px solid var(--wn-line); scroll-margin-top: 110px; }
.co-me-stage__label { position: sticky; top: 150px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.co-me-stage__n { font: 500 120px/.85 var(--display); letter-spacing: -5px; color: transparent; -webkit-text-stroke: 1.5px var(--purple); }
.co-me-stage__ico { position: absolute; left: -93px; top: 14px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  border: 2px solid var(--purple); color: var(--blue); box-shadow: 0 0 0 8px #fff; }
.co-me-stage__label h3 { font: 500 36px/42px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-me-stage__label p { max-width: 320px; font: 400 17px/26px var(--text); color: var(--grey70); }
.co-me-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.co-me-rule { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 26px 22px; border-radius: 22px; background: var(--wn-page);
  border: 1px solid var(--wn-line); transition: background-color .3s ease, box-shadow .4s ease, border-color .3s ease; }
.co-me-rule:hover { background: #fff; box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.co-me-rule h4 { font: 600 19px/26px var(--text); color: var(--ink); }
.co-me-rule p { font: 400 16px/25px var(--text); color: var(--grey70); }
.co-me-rule__src { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/18px var(--text); color: var(--grey70); }
.co-me-rule__src span { color: var(--blue); }
.co-me-rule__src svg { color: var(--blue); transition: transform .3s var(--wn-ease-out); }
.co-me-rule__src:hover span { text-decoration: underline; text-underline-offset: 3px; }
.co-me-rule__src:hover svg { transform: translateX(3px); }
.co-me-stage__go { margin-top: 24px; }

.co-me-choose { overflow: clip; scroll-margin-top: 40px; }
.co-me-choose__glow { position: absolute; right: -14%; top: -20%; width: 1000px; height: 1000px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .30), rgba(232, 70, 111, 0)); }
.co-me-choose .wrap { position: relative; }
.co-me-chooser.is-tabbed { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.co-me-chooser__qs[hidden] { display: none; }
.co-me-chooser__qs { display: grid; gap: 4px; }
.co-me-q { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; text-align: left;
  border: 1px solid transparent; background: transparent; font: 500 16px/22px var(--text); color: rgba(255, 255, 255, .86); cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.co-me-q span { font: 600 12px/1 var(--text); letter-spacing: .08em; color: var(--mint); }
.co-me-q:hover { background: rgba(255, 179, 199, .08); color: #fff; }
.co-me-q[aria-selected="true"] { background: rgba(255, 179, 199, .14); border-color: rgba(255, 179, 199, .45); color: #fff; }
.co-me-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-me-chooser__pans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.co-me-chooser.is-tabbed .co-me-chooser__pans { display: block; position: sticky; top: 140px; }
.co-me-pan { display: flex; flex-direction: column; gap: 12px; padding: 36px 38px; 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, .1), 0 0 48px rgba(232, 70, 111, .16); }
.co-me-pan[hidden] { display: none; }
.co-me-pan:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.co-me-pan__q { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 179, 199, .2); font: 500 20px/28px var(--display); color: rgba(255, 255, 255, .92); }
.co-me-pan__k { margin-top: 6px; font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.co-me-pan h3 { font: 500 44px/50px var(--display); letter-spacing: -1.2px; color: #fff; }
.co-me-pan__t { font: 400 19px/28px var(--text); color: rgba(255, 255, 255, .86); }
.co-me-pan__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 12px; }
.co-me-pan__s { margin-bottom: 12px; font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.co-me-pan__steps { display: grid; gap: 10px; counter-reset: cmp; }
.co-me-pan__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; counter-increment: cmp; font: 500 15px/22px var(--text); color: #fff; }
.co-me-pan__steps li::before { content: counter(cmp); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 179, 199, .16);
  color: var(--mint); font: 600 12px/1 var(--text); }
.co-me-pan__go { margin-top: 14px; }

.co-me-terms__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.co-me-terms__side { position: sticky; top: 150px; }
.co-me-terms__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; border-top: 2px solid var(--ink); }
.co-me-term { padding: 22px 0; border-bottom: 1px solid var(--wn-line); }
.co-me-term dt { margin-bottom: 6px; font: 500 22px/28px var(--display); color: var(--ink); }
.co-me-term dd { margin: 0; font: 400 16px/25px var(--text); color: var(--grey70); }
.co-me-polls { background: var(--wn-page); }
.co-me-polls__card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px 40px; border-radius: 28px; background: #fff;
  border: 1px solid var(--wn-line); }
.co-me-polls__ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); }
.co-me-polls__k { font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-me-polls h2 { margin: 4px 0 6px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); }
.co-me-polls__card p:not(.co-me-polls__k) { font: 400 17px/26px var(--text); color: var(--grey70); }

/* =====================================================================================================
   11. PANEL QUALITY: the member's journey
   ===================================================================================================== */
.co-hero--pq { padding: 176px 0 110px; background: radial-gradient(50% 60% at 85% 20%, rgba(232, 70, 111, .16), rgba(232, 70, 111, 0) 70%),
  radial-gradient(40% 60% at 0% 100%, rgba(255, 179, 199, .5), rgba(255, 179, 199, 0) 70%), var(--wn-rose-10); }
.co-glow-pq { right: 4%; top: 16%; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(255, 179, 199, .7), rgba(255, 179, 199, 0)); }
.co-pq-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
.co-pq__h1 { max-width: 680px; font-size: 64px; line-height: 70px; }
.co-hero--pq .btn-ghost-blue { color: var(--wn-deep); border-color: var(--wn-deep); }
.co-pq-badge { position: relative; justify-self: center; width: 460px; height: 460px; display: grid; place-items: center; }
.co-pq-badge__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(180, 35, 90, .32); }
.co-pq-badge__orbit::before { content: ""; position: absolute; inset: 64px; border-radius: 50%; border: 1px solid rgba(180, 35, 90, .16); }
.co-pq-badge__orbit i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85); transform: rotate(var(--a)) translateX(230px); }
.co-pq-badge__orbit i:nth-child(1) { --a: 10deg; --c: #d6335e; } .co-pq-badge__orbit i:nth-child(2) { --a: 70deg; --c: #f6c98e; }
.co-pq-badge__orbit i:nth-child(3) { --a: 130deg; --c: #8e1a47; } .co-pq-badge__orbit i:nth-child(4) { --a: 190deg; --c: #e8466f; }
.co-pq-badge__orbit i:nth-child(5) { --a: 250deg; --c: #4a1238; } .co-pq-badge__orbit i:nth-child(6) { --a: 310deg; --c: #f07b9a; }
html.wm-on .co-pq-badge__orbit { animation: co-spin 48s linear infinite; }
.co-pq-badge__card { position: relative; width: 300px; padding: 44px 34px 34px; border-radius: 32px; background: var(--wn-glass-bg); text-align: center;
  box-shadow: 0 40px 80px rgba(74, 18, 56, .35); }
.co-pq-badge__card img { width: 220px; height: auto; }
.co-pq-badge__card p { margin-top: 16px; font: 600 13px/16px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.co-pq-badge__chips { position: absolute; inset: 0; pointer-events: none; }
.co-pq-badge__chips li { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 14px 30px rgba(74, 18, 56, .16); font: 600 14px/18px var(--text); color: var(--ink); white-space: nowrap; }
.co-pq-badge__chips li svg { color: var(--purple); }
.co-pq-badge__chips li:nth-child(1) { left: -44px; top: 46px; }
.co-pq-badge__chips li:nth-child(2) { right: -72px; top: 334px; }
.co-pq-badge__chips li:nth-child(3) { left: -24px; bottom: 26px; }
html.wm-on .co-pq-badge__chips li { animation: co-bob 4s ease-in-out infinite alternate; }
html.wm-on .co-pq-badge__chips li:nth-child(2) { animation-delay: -1.3s; }
html.wm-on .co-pq-badge__chips li:nth-child(3) { animation-delay: -2.6s; }
@keyframes co-bob { to { transform: translate3d(0, -10px, 0); } }

.co-pq-story { position: relative; background: var(--wn-page); }
html:not(.wm-on) .co-pq-story { padding: 112px 0; }
.co-pq-story .wm-pin__sticky { display: flex; align-items: center; }
html.wm-on .co-pq-story .wm-pin__sticky { padding: 140px 0 20px; }
.co-pq-story__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; width: 100%; }
.co-pq-story__txt { display: flex; flex-direction: column; gap: 22px; }
.co-pq-layers { min-height: 250px; }
html:not(.wm-on) .co-pq-layers { display: grid; gap: 26px; }
.co-pq-step__k { display: flex; align-items: center; gap: 12px; font: 600 14px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-pq-step__k span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; letter-spacing: 0; }
.co-pq-step h3 { margin: 16px 0 12px; font: 500 40px/46px var(--display); letter-spacing: -.9px; color: var(--ink); }
.co-pq-step > p:not(.co-pq-step__k) { max-width: 560px; font: 400 19px/30px var(--text); color: var(--body); }
.co-pq-dots { display: flex; gap: 8px; margin-top: 6px; }
html:not(.wm-on) .co-pq-dots { display: none; }
.co-pq-dots li { flex: 1; padding-top: 12px; border-top: 3px solid var(--wn-line); font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey70); transition: border-color .4s ease, color .4s ease; }
.co-pq-story[data-active="0"] .co-pq-dots li:nth-child(-n+1), .co-pq-story[data-active="1"] .co-pq-dots li:nth-child(-n+2),
.co-pq-story[data-active="2"] .co-pq-dots li:nth-child(-n+3), .co-pq-story[data-active="3"] .co-pq-dots li:nth-child(-n+4),
.co-pq-story[data-active="4"] .co-pq-dots li { border-color: var(--purple); color: var(--ink); }
.co-pq-phone { justify-self: center; }
/* the phone frame (panel quality, panelist support) */
.co-ph { position: relative; width: 300px; height: 600px; padding: 14px; border-radius: 50px; background: #1e0a1a;
  box-shadow: 0 0 0 2px #3a1a33, 0 50px 90px rgba(74, 18, 56, .35), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.co-ph__notch { position: absolute; left: 50%; top: 24px; z-index: 3; width: 96px; height: 24px; margin-left: -48px; border-radius: 14px; background: #000; }
.co-ph__screens { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; }
.co-ph__scr { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 64px 22px 24px; background: #fff; }
.co-ph__wm { align-self: center; width: 156px; height: auto; margin: 26px 0 16px; }
.co-ph__h { font: 500 24px/30px var(--display); letter-spacing: -.3px; color: var(--ink); text-align: center; }
.co-ph__field { display: flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--wn-line); background: var(--wn-page);
  font: 400 14px/1 var(--text); color: var(--grey70); }
.co-ph__btn { display: grid; place-items: center; height: 50px; margin-top: auto; border-radius: 999px; background: var(--purple); font: 600 15px/1 var(--text); color: #fff; }
.co-ph__fine { font: 400 12px/16px var(--text); color: var(--grey70); text-align: center; }
.co-ph__k { font: 600 11px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-ph__prog { position: relative; height: 6px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.co-ph__prog i { position: absolute; inset: 0; border-radius: inherit; background: var(--purple); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.co-ph__q { font: 500 20px/27px var(--display); letter-spacing: -.2px; color: var(--ink); }
.co-ph__opts { display: grid; gap: 8px; }
.co-ph__opts span { display: flex; align-items: center; height: 46px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--wn-line); font: 600 15px/1 var(--text); color: var(--ink); }
.co-ph__opts span.is-on { border-color: var(--purple); background: var(--wn-rose-10); color: var(--blue70); }
.co-ph__scr--dark { background: linear-gradient(170deg, #2c0a24, #4a1238); }
.co-ph__scr--dark .co-ph__k { color: var(--mint); }
.co-ph__scr--dark .co-ph__q { margin-top: 30px; color: #fff; }
.co-ph__yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.co-ph__yn span { display: grid; place-items: center; height: 52px; border-radius: 14px; border: 1.5px solid rgba(255, 179, 199, .45); font: 600 16px/1 var(--text); color: #fff; }
.co-ph__yn span.is-on { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.co-ph__scr--dark .co-ph__fine { margin-top: auto; color: rgba(255, 255, 255, .8); }
.co-ph__cam { position: relative; flex: 1; min-height: 230px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(60% 50% at 50% 40%, #4a1238, #1a0616);
  color: rgba(255, 179, 199, .6); }
.co-ph__live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .5);
  font: 600 12px/1 var(--text); color: #fff; }
.co-ph__live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5c8a; }
html.wm-on .co-ph__live i { animation: co-blink 1.2s ease-in-out infinite; }
.co-ph__ai { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--wn-rose-10); font: 500 13px/19px var(--text); color: var(--blue70); }
.co-ph__ai svg { flex: none; margin-top: 2px; color: var(--purple); }
.co-ph__scr--done { align-items: center; justify-content: center; text-align: center; background: radial-gradient(70% 50% at 50% 32%, var(--wn-rose-10), #fff); }
.co-ph__badge { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; box-shadow: 0 0 0 12px rgba(214, 51, 94, .14); }
.co-ph__sub { font: 400 15px/22px var(--text); color: var(--grey70); }
/* an EARLIER balance entry under the result (21 Oct 2026): a small label on top, so it does not read as a second result */
.co-ph__toast { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; width: 100%; margin-top: 30px; padding: 12px 16px 14px; border-radius: 16px;
  background: var(--ink); font: 500 13px/18px var(--text); color: #fff; text-align: left; }
.co-ph__toast small { grid-column: 1 / -1; font: 600 10px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.co-ph__toast b { font-weight: 600; }
.co-ph__toast span { font-weight: 600; color: var(--mint); white-space: nowrap; }

.co-pq-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.co-pq-rule { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; border-radius: 26px; background: var(--wn-page);
  border: 1px solid var(--wn-line); }
.co-pq-rule::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #4a1238, #d6335e 55%, #ffb3c7);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--wn-ease-out); }
.co-pq-rule:hover::after { transform: scaleX(1); }
.co-pq-rule__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid var(--wn-line); color: var(--blue); }
.co-pq-rule h3 { font: 500 24px/30px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-pq-rule p { font: 400 16px/25px var(--text); color: var(--grey70); }

.co-pq-pay { background: var(--wn-page); }
.co-pq-pay__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.co-pq-led { perspective: 1400px; }
.co-pq-led__in { padding: 30px 30px 24px; border-radius: 28px; background: #fff; border: 1px solid var(--wn-line); box-shadow: 0 40px 80px rgba(74, 18, 56, .14); }
.co-pq-led__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px dashed var(--wn-rose-20); }
.co-pq-led__top b { font: 500 24px/30px var(--display); color: var(--ink); }
.co-pq-led__top span { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.co-pq-led ul { display: grid; }
.co-pq-led li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--wn-line); }
.co-pq-led li b { font: 600 16px/22px var(--text); color: var(--ink); }
.co-pq-led__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.co-pq-led__ico--full { background: var(--purple); color: #fff; }
.co-pq-led__ico--small { background: var(--wn-rose-10); color: var(--blue); }
.co-pq-led__ico--none { background: var(--wn-page); color: var(--grey70); }
.co-pq-led__foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 500 15px/22px var(--text); color: var(--grey70); }
.co-pq-led__foot svg { flex: none; color: var(--purple); }

.co-pq-care { overflow: clip; }
.co-pq-care__glow { position: absolute; right: -10%; top: -30%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .32), rgba(232, 70, 111, 0)); }
.co-pq-care__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.co-pq-care__grid .wn-head { margin-bottom: 30px; }
.co-pq-care__list { display: grid; gap: 12px; }
/* each row links its topic on /support/panelists/ (21 Oct 2026: they looked clickable and were plain list items) */
.co-pq-care__list li { display: flex; }
.co-pq-care__list a { flex: 1; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; background: rgba(26, 6, 22, .5); border: 1px solid rgba(255, 179, 199, .24);
  font: 500 18px/24px var(--text); color: #fff; transition: border-color .3s ease, background-color .3s ease, transform .4s var(--wn-ease-out); }
.co-pq-care__list a b { flex: 1; min-width: 0; font-weight: 500; }
.co-pq-care__list span { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 179, 199, .14); color: var(--mint); }
.co-pq-care__go { flex: none; color: var(--mint); transition: transform .35s var(--wn-ease-out); }
.co-pq-care__list a:hover { border-color: rgba(255, 179, 199, .55); background-color: rgba(74, 18, 56, .6); transform: translateX(4px); }
.co-pq-care__list a:hover .co-pq-care__go { transform: translateX(4px); }
.co-pq-care__list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* =====================================================================================================
   12. TECHNOLOGY & AI: the workbench
   ===================================================================================================== */
.co-hero--ta { padding: 176px 0 110px; color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .72);
  background: radial-gradient(45% 55% at 85% 35%, rgba(214, 51, 94, .35), rgba(214, 51, 94, 0) 70%), radial-gradient(35% 45% at 5% 95%, rgba(142, 26, 71, .55), rgba(142, 26, 71, 0) 75%),
    linear-gradient(165deg, #12030d 0%, #1e0a1a 50%, #2c0a24 100%); }
.co-ta-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 179, 199, .24) 1px, transparent 1.5px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 70% at 72% 45%, #000 20%, transparent 80%); mask-image: radial-gradient(60% 70% at 72% 45%, #000 20%, transparent 80%); }
.co-ta-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
.co-ta__h1 { font-size: 64px; line-height: 70px; }
.co-hero--ta .wn-lead { max-width: 620px; font-size: 19px; line-height: 30px; }
.co-ta-ask { display: flex; flex-direction: column; gap: 16px; }
.co-ta-ask__bar { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 10px 0 20px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 179, 199, .38); box-shadow: 0 0 40px rgba(232, 70, 111, .25); }
.co-ta-ask__ico { display: grid; color: var(--mint); }
.co-ta-ask__q { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 500 16px/22px var(--text); color: #fff; }
.co-ta-type { display: inline-block; max-width: 32em; overflow: hidden; vertical-align: bottom; white-space: nowrap; border-right: 2px solid transparent; }
/* 21 Oct 2026: faster (typing from 0.15 s, done by about 1.35 s; the answer card from 1.4 s, its bars from 1.8 s), so the
   hero is not half empty for the first 3 seconds */
html.wm-on .co-ta-type { max-width: 0; border-right-color: var(--mint); animation: co-typew 1.2s steps(48) .15s forwards, co-caret 1s step-end 5; }
@keyframes co-typew { to { max-width: 32em; } }
@keyframes co-caret { 50% { border-right-color: transparent; } }
.co-ta-ask__send { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; }
.co-ta-ans { padding: 26px 28px 24px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }
html.wm-on .co-ta-ans { opacity: 0; transform: translate3d(0, 16px, 0); animation: co-rise .7s var(--wn-ease-out) 1.4s forwards; }
.co-ta-ans__k { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-ta-ans__t { margin: 10px 0 16px; font: 500 20px/28px var(--display); letter-spacing: -.2px; color: var(--ink); }
.co-ta-ans__bars { display: grid; gap: 10px; }
.co-ta-ans__bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font: 500 14px/20px var(--text); color: var(--ink); }
.co-ta-ans__bars b { text-align: right; font-weight: 600; color: var(--grey70); font-variant-numeric: tabular-nums; }
.co-ta-ans__track { position: relative; height: 12px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.co-ta-ans__track i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--v)); }
html.wm-on .co-ta-ans__track i { animation: co-grow0 .9s var(--wn-ease-out) 1.8s both; }
.co-ta-ans blockquote { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--purple); border-radius: 0 12px 12px 0; background: var(--wn-page);
  font: 500 15px/22px var(--text); color: var(--body); }
.co-ta-ans__chk, .co-ta-aska__chk { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 13px/18px var(--text); color: var(--blue70); }
.co-ta-ans__chk span, .co-ta-aska__chk span { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; }

.co-ta-plat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.co-ta-plat__p { font: 400 19px/30px var(--text); color: var(--body); }
.co-ta-plat__go { margin-top: 24px; }
.co-ta-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.co-ta-num { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 164px; padding: 22px 20px; border-radius: 22px; background: var(--wn-page);
  border: 1px solid var(--wn-line); }
.co-ta-num:first-child { grid-column: span 2; background: var(--wn-glass-bg); border-color: transparent; }
.co-ta-num b { font: 500 56px/1 var(--display); letter-spacing: -1.6px; color: var(--blue); font-variant-numeric: tabular-nums; }
.co-ta-num:first-child b { font-size: 88px; color: #fff; }
.co-ta-num span { font: 400 15px/22px var(--text); color: var(--grey70); }
.co-ta-num:first-child span { font-size: 17px; color: rgba(255, 255, 255, .86); }

.co-ta-bench { position: relative; background: var(--wn-page); }
html:not(.wm-on) .co-ta-bench { padding: 112px 0; }
.co-ta-bench .wm-pin__sticky { display: flex; align-items: center; }
html.wm-on .co-ta-bench .wm-pin__sticky { padding: 112px 0 20px; }
.co-ta-bench__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; width: 100%; }
.co-ta-bench__txt { display: flex; flex-direction: column; gap: 22px; }
.co-ta-layers { min-height: 300px; }
html:not(.wm-on) .co-ta-layers { display: grid; gap: 28px; }
.co-ta-step__k { display: flex; align-items: center; gap: 12px; font: 600 14px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-ta-step__k span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--mint); letter-spacing: 0; }
.co-ta-step h3 { margin: 14px 0 12px; font: 500 38px/44px var(--display); letter-spacing: -.8px; color: var(--ink); }
.co-ta-step > p:not(.co-ta-step__k) { margin-bottom: 16px; font: 400 18px/29px var(--text); color: var(--body); }
.co-ta-bench__bar { width: 280px; background: rgba(180, 35, 90, .14); }
.co-ta-win { border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--wn-line); box-shadow: 0 50px 100px rgba(74, 18, 56, .18); }
.co-ta-win__bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; background: var(--ink); }
.co-ta-win__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 179, 199, .35); }
.co-ta-win__bar i:first-child { background: var(--purple); }
.co-ta-win__bar span { margin-left: 12px; font: 600 13px/1 var(--text); color: rgba(255, 255, 255, .86); }
.co-ta-win__body { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 480px; }
.co-ta-win__tabs { display: flex; flex-direction: column; gap: 6px; padding: 20px 14px; background: var(--wn-page); border-right: 1px solid var(--wn-line); }
.co-ta-win__tab { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; font: 600 14px/1 var(--text); color: var(--grey70);
  transition: background-color .35s ease, color .35s ease; }
html:not(.wm-on) .co-ta-win__tab--0, .co-ta-bench[data-active="0"] .co-ta-win__tab--0, .co-ta-bench[data-active="1"] .co-ta-win__tab--1,
.co-ta-bench[data-active="2"] .co-ta-win__tab--2, .co-ta-bench[data-active="3"] .co-ta-win__tab--3 { background: var(--ink); color: #fff; }
.co-ta-win__screens { position: relative; padding: 26px 28px; }
html:not(.wm-on) .co-ta-scr:not([data-step="0"]) { display: none; }
.co-ta-scr { display: flex; flex-direction: column; gap: 14px; }
.co-ta-scr__k { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.co-ta-scr__h { font: 500 22px/28px var(--display); color: var(--ink); }
.co-ta-scr__foot { font: 500 13px/18px var(--text); color: var(--grey70); }
.co-ta-brief { display: flex; flex-direction: column; gap: 6px; align-self: flex-end; max-width: 86%; padding: 14px 18px; border-radius: 18px 18px 4px 18px; background: var(--ink);
  font: 500 15px/22px var(--text); color: #fff; }
.co-ta-brief span { font: 600 11px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.co-ta-qs { display: grid; gap: 8px; }
.co-ta-qs li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--wn-line);
  background: var(--wn-page); font: 500 14px/20px var(--text); color: var(--ink); }
.co-ta-qs b { font: 600 13px/1 var(--text); color: var(--blue); }
.co-ta-qs i { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-line); font: 600 11px/14px var(--text); font-style: normal; color: var(--grey70); white-space: nowrap; }
html.wm-on .co-ta-scr.is-active .co-ta-qs li { animation: co-rise-in .5s var(--wn-ease-out) both; }
html.wm-on .co-ta-scr.is-active .co-ta-qs li:nth-child(2) { animation-delay: .12s; }
html.wm-on .co-ta-scr.is-active .co-ta-qs li:nth-child(3) { animation-delay: .24s; }
html.wm-on .co-ta-scr.is-active .co-ta-qs li:nth-child(4) { animation-delay: .36s; }
@keyframes co-rise-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.co-ta-vid { position: relative; height: 190px; overflow: hidden; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(60% 60% at 50% 40%, #4a1238, #1a0616);
  color: rgba(255, 179, 199, .55); }
.co-ta-vid__wave { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.co-ta-vid__wave i { width: 4px; height: calc(var(--h) * 1%); border-radius: 2px; background: var(--mint); transform-origin: 50% 100%; }
html.wm-on .co-ta-scr.is-active .co-ta-vid__wave i { animation: co-wave .9s ease-in-out infinite alternate; }
html.wm-on .co-ta-scr.is-active .co-ta-vid__wave i:nth-child(odd) { animation-delay: -.45s; }
html.wm-on .co-ta-scr.is-active .co-ta-vid__wave i:nth-child(3n) { animation-delay: -.2s; }
@keyframes co-wave { from { transform: scaleY(.35); } }
.co-ta-vid__t { position: absolute; right: 14px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .5); font: 600 12px/1 var(--text); color: #fff; }
.co-ta-say { padding: 12px 14px; border-radius: 14px; background: var(--wn-page); font: 500 15px/22px var(--text); color: var(--ink); }
.co-ta-fu { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--wn-rose-10); font: 500 14px/20px var(--text); color: var(--blue70); }
.co-ta-fu svg { flex: none; margin-top: 2px; color: var(--purple); }
.co-ta-fu b { display: block; margin-bottom: 2px; font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; }
.co-ta-chk { display: flex; flex-wrap: wrap; gap: 8px; }
.co-ta-chk li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); font: 600 12px/16px var(--text); color: #fff; }
.co-ta-chk svg { color: var(--mint); }
.co-ta-th { display: grid; gap: 16px; margin-top: 4px; }
.co-ta-th li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; grid-template-areas: "l bar v" ". sent ."; gap: 6px 12px; align-items: center; }
.co-ta-th__l { grid-area: l; font: 600 14px/20px var(--text); color: var(--ink); }
.co-ta-th__bar { grid-area: bar; position: relative; height: 14px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.co-ta-th__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--v)); }
html.wm-on .co-ta-scr.is-active .co-ta-th__bar i { animation: co-grow0 .9s var(--wn-ease-out) both; }
.co-ta-th li b { grid-area: v; text-align: right; font: 600 14px/1 var(--text); color: var(--grey70); }
.co-ta-th__sent { grid-area: sent; display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; }
.co-ta-th__sent .p, .co-ta-key .p { background: #d6335e; }
.co-ta-th__sent .n, .co-ta-key .n { background: #f6c9d6; }
.co-ta-th__sent .m, .co-ta-key .m { background: #4a1238; }
.co-ta-key { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 12px/16px var(--text); color: var(--grey70); }
.co-ta-key span { width: 10px; height: 10px; margin-left: 8px; border-radius: 3px; }
.co-ta-key span:first-child { margin-left: 0; }
.co-ta-askq { display: flex; gap: 8px; align-items: center; align-self: flex-end; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--ink);
  font: 500 15px/22px var(--text); color: #fff; }
.co-ta-askq svg { color: var(--mint); }
.co-ta-aska { padding: 16px 18px; border-radius: 18px; background: var(--wn-page); border: 1px solid var(--wn-line); }
.co-ta-aska > p:first-child { font: 500 15px/23px var(--text); color: var(--ink); }
.co-ta-aska__chk { margin-top: 10px; font-size: 12px; }
.co-ta-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.co-ta-files li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--wn-line); background: #fff;
  font: 600 13px/1 var(--text); color: var(--ink); }
.co-ta-files svg { color: var(--purple); }

.co-ta-charge-sec { background: var(--wn-page); }
.co-ta-charge__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.co-ta-charge__side { position: sticky; top: 150px; }
.co-ta-charge { display: grid; gap: 14px; }
.co-ta-charge li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 22px; align-items: start; padding: 28px 30px; border-radius: 24px; background: #fff;
  border: 1px solid var(--wn-line); transition: box-shadow .4s ease, border-color .3s ease; }
.co-ta-charge li:hover { box-shadow: var(--wn-shadow); border-color: var(--wn-rose-20); }
.co-ta-charge__ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--ink); color: var(--mint); }
.co-ta-charge h3 { margin-bottom: 8px; font: 500 26px/32px var(--display); letter-spacing: -.4px; color: var(--ink); }
.co-ta-charge p { font: 400 17px/27px var(--text); color: var(--grey70); }

.co-ta-media { overflow: clip; }
.co-ta-media__glow { position: absolute; left: -10%; bottom: -40%; width: 1000px; height: 1000px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .30), rgba(232, 70, 111, 0)); }
.co-ta-media .wrap { position: relative; }
.co-ta-flow { position: relative; }
.co-ta-flow__line { position: absolute; left: 32px; top: 22px; width: calc((100% - 96px) * .8 + 96px); height: 20px; overflow: visible; }
.co-ta-flow__line path { fill: none; stroke: var(--mint); stroke-width: 2; vector-effect: non-scaling-stroke; }
.co-ta-flow ol { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.co-ta-flow li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.co-ta-flow__dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #2c0a24; border: 2px solid var(--mint); color: var(--mint);
  box-shadow: 0 0 0 8px rgba(36, 9, 31, .95); }
.co-ta-flow__k { margin-top: 10px; font: 600 13px/16px var(--text); letter-spacing: .1em; color: var(--mint); }
.co-ta-flow h3 { font: 500 28px/34px var(--display); letter-spacing: -.4px; color: #fff; }
.co-ta-flow li > p:not(.co-ta-flow__k) { font: 400 16px/25px var(--text); color: rgba(255, 255, 255, .86); }

.co-ta-sec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.co-ta-sec__badges { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 60px 40px; border-radius: 32px; background: var(--wn-glass-bg); }
.co-ta-sec__lock { width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 179, 199, .14); color: var(--mint);
  box-shadow: 0 0 0 16px rgba(255, 179, 199, .06), 0 0 60px rgba(232, 70, 111, .45); }
.co-ta-sec__imgs { display: flex; gap: 16px; align-items: center; }
.co-ta-sec__imgs img { height: 60px; width: auto; padding: 14px 18px; box-sizing: content-box; border-radius: 16px; background: #fff; }
.co-ta-sec__go { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }

/* =====================================================================================================
   13. PANELIST SUPPORT: the help desk
   ===================================================================================================== */
.co-hero--sp { padding: 176px 0 100px; background: radial-gradient(56% 70% at 92% 0%, rgba(232, 70, 111, .16), rgba(232, 70, 111, 0) 70%),
  radial-gradient(50% 60% at 0% 100%, rgba(255, 179, 199, .45), rgba(255, 179, 199, 0) 70%), var(--wn-page); }
.co-glow-sp { right: -4%; top: -10%; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(255, 179, 199, .55), rgba(255, 179, 199, 0)); }
.co-sp-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
.co-sp__h1 { max-width: 720px; font-size: 86px; line-height: 90px; }
.co-hero--sp .btn-ghost-blue { color: var(--wn-deep); border-color: var(--wn-deep); }
.co-sp-tiles ul { display: grid; gap: 12px; }
.co-sp-tiles li { display: flex; }
.co-sp-tile { position: relative; flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding: 18px 56px 18px 18px;
  border-radius: 22px; background: #fff; border: 1px solid var(--wn-line); box-shadow: 0 14px 34px rgba(74, 18, 56, .08);
  transition: transform .4s var(--wn-ease-out), border-color .3s ease, box-shadow .4s ease; }
.co-sp-tile:hover { transform: translateY(-4px); border-color: var(--wn-rose-20); box-shadow: var(--wn-shadow); }
.co-sp-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.co-sp-tile__ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); }
.co-sp-tile b { font: 500 21px/26px var(--display); letter-spacing: -.2px; color: var(--ink); }
.co-sp-tile small { font: 400 14px/20px var(--text); color: var(--grey70); }
.co-sp-tile__go { position: absolute; right: 20px; top: 50%; margin-top: -8px; color: var(--blue); transition: transform .35s var(--wn-ease-out); }
.co-sp-tile:hover .co-sp-tile__go { transform: translateX(4px); }
.co-sp-tiles li:first-child .co-sp-tile { background: var(--ink); border-color: var(--ink); }
.co-sp-tiles li:first-child .co-sp-tile b { color: #fff; }
.co-sp-tiles li:first-child .co-sp-tile small { color: rgba(255, 255, 255, .8); }
.co-sp-tiles li:first-child .co-sp-tile__ico { background: var(--purple); color: #fff; }
.co-sp-tiles li:first-child .co-sp-tile__go { color: var(--mint); }

.co-sp-res__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.co-sp-res { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px 28px; border-radius: 26px; background: var(--wn-page); border: 1px solid var(--wn-line); }
.co-sp-res--full { background: var(--wn-rose-10); border-color: var(--wn-rose-20); }
.co-sp-res__ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.co-sp-res--full .co-sp-res__ico { background: var(--purple); color: #fff; box-shadow: 0 0 0 8px rgba(214, 51, 94, .12); }
.co-sp-res--small .co-sp-res__ico { background: var(--wn-rose-20); color: var(--blue70); }
.co-sp-res--none .co-sp-res__ico { background: #fff; border: 1px solid var(--wn-line); color: var(--grey70); }
.co-sp-res b { font: 500 24px/30px var(--display); letter-spacing: -.3px; color: var(--ink); }
.co-sp-res p { font: 400 16px/24px var(--text); color: var(--grey70); }

.co-sp-faq { background: var(--wn-page); }
.co-sp-faq__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 80px; align-items: start; }
.co-sp-faq__nav { position: sticky; top: 150px; }
.co-sp-faq__nav .wn-head { margin-bottom: 26px; }
.co-sp-faq__nav ol { display: grid; gap: 6px; }
.co-sp-faq__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font: 600 16px/22px var(--text); color: var(--grey70);
  transition: background-color .25s ease, color .25s ease; }
.co-sp-faq__nav a svg { flex: none; color: var(--blue); }
.co-sp-faq__nav a:hover { background: #fff; color: var(--ink); }
.co-sp-faq__nav a.is-on { background: var(--ink); color: #fff; }
.co-sp-faq__nav a.is-on svg { color: var(--mint); }
.co-sp-faq__nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-sp-faq__groups { display: flex; flex-direction: column; gap: 40px; }
.co-sp-group { padding: 34px 40px 14px; border-radius: 28px; background: #fff; border: 1px solid var(--wn-line); scroll-margin-top: 130px; }
.co-sp-group__h { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); }
.co-sp-group__h span { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--wn-rose-10); color: var(--blue); }
.co-sp-group .wn-faq__item:last-child { border-bottom: 0; }
.co-sp-group .wn-faq__item summary { font: 600 19px/27px var(--text); color: var(--ink); }
.co-sp-a__go { margin-top: 10px; }

.co-sp-app { overflow: clip; }
.co-sp-app__glow { position: absolute; right: -10%; top: -30%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .32), rgba(232, 70, 111, 0)); }
.co-sp-app__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.co-sp-app__wm { width: 240px; height: auto; margin-bottom: 30px; }
.co-sp-app__grid .wn-head { margin-bottom: 30px; }
.co-sp-app__vis { justify-self: center; }
.co-ph--mini { width: 290px; height: 480px; }
.co-ph--mini .co-ph__scr { height: 100%; border-radius: 38px; padding-top: 62px; }
.co-ph__scr--list ul { display: grid; gap: 10px; margin-top: 4px; }
.co-ph__scr--list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 14px; border-radius: 14px; background: var(--wn-page);
  border: 1px solid var(--wn-line); }
.co-ph__dot { grid-row: 1 / span 2; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--purple); }
.co-ph__scr--list b { font: 600 15px/20px var(--text); color: var(--ink); }
.co-ph__scr--list small { font: 400 13px/18px var(--text); color: var(--grey70); }

.co-sp-help { scroll-margin-top: 100px; }
.co-sp-help__card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 40px 44px; border-radius: 30px;
  background: var(--wn-rose-10); border: 1px solid var(--wn-rose-20); }
.co-sp-help__ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--purple); color: #fff; }
.co-sp-help h2 { margin-bottom: 6px; font: 500 36px/42px var(--display); letter-spacing: -.6px; color: var(--ink); }
.co-sp-help__card p { font: 400 17px/26px var(--text); color: var(--grey70); }
.co-sp-help__btns { display: flex; gap: 12px; }
.co-sp-help .btn-ghost-blue { color: var(--wn-deep); border-color: var(--wn-deep); }

/* @@ RESPONSIVE-HC BEGIN (phone and tablet pass, 21 Oct 2026; keep this block last in the file) @@ */
/* =====================================================================================================
   RESPONSIVE: the company pages on small laptops, tablets and phones. Every rule sits inside the wine-base.css
   breakpoints (1199.98 / 1023.98 / 767.98 / 479.98, plus the touch query), so desktop 1200+ is untouched.
   Below 1024 every two-column grid stacks (text first), sticky side columns turn static, hero top space comes
   from --wn-hdr-clear / --wn-hdr-clear-m, wide rows become stacked cards, horizontal tracks scroll inside
   themselves; below 768 reading text is >= 16px, labels >= 12px, taps >= 44px.
   ===================================================================================================== */

/* ---------- 1200: small laptop (and 1024 tablets in landscape) ---------- */
@media (max-width: 1199.98px) {
  /* display headings scale with the screen (desktop size at 1200, about 45-55% of it at 390) */
  .co-display { font-size: clamp(44px, 6.42vw + 19px, 96px); line-height: 1.04; letter-spacing: -.03em; }
  .co-about__h1 { font-size: clamp(46px, 7.65vw + 16.1px, 108px); line-height: 1.02; }
  .co-maphero .co-display { font-size: clamp(46px, 6.67vw + 20px, 100px); line-height: 1.02; }
  .co-contact__h1 { font-size: clamp(46px, 7.16vw + 18.1px, 104px); line-height: 1.02; }
  .co-ix__h1 { font-size: clamp(40px, 5.19vw + 19.8px, 82px); line-height: 1.06; }
  .co-sp__h1 { font-size: clamp(42px, 5.43vw + 20.8px, 86px); line-height: 1.05; }
  .co-me__h1 { font-size: clamp(36px, 4.44vw + 18.7px, 72px); line-height: 1.06; }
  .co-pt__h1, .co-pq__h1, .co-ta__h1 { font-size: clamp(34px, 3.7vw + 19.6px, 64px); line-height: 1.1; }
  .co-dq__h1 { font-size: clamp(34px, 3.46vw + 20.5px, 62px); line-height: 1.1; }
  .co-sales__side .wn-h1 { font-size: clamp(34px, 3.21vw + 21.5px, 60px); line-height: 1.1; }
  .co-statement__h { font-size: clamp(34px, 5.19vw + 13.8px, 76px); line-height: 1.06; letter-spacing: -.028em; }
  .co-pt-state__h { font-size: clamp(32px, 4.2vw + 15.6px, 66px); line-height: 1.1; letter-spacing: -.028em; }
  .co-office__city { font-size: clamp(56px, 8.89vw + 21.3px, 128px); letter-spacing: -.034em; }
  /* accreditations: the register row keeps number | text, the tag moves under the text */
  .co-reg__row { grid-template-columns: 280px minmax(0, 1fr); column-gap: 36px; row-gap: 14px; }
  .co-reg__tag { grid-column: 2; justify-self: start; }
  .co-reg__num > b:not(.co-reg__word) { font-size: 76px; letter-spacing: -3px; }
  .co-reg__num--logo img { height: 80px; }
  /* about: four columns become two */
  .co-do { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-do > li + li { padding-left: 0; border-left: 0; }
  .co-do > li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--wn-line); }
  .co-do > li:nth-child(n+3) { border-top: 1px solid var(--wn-line); padding-bottom: 28px; }
  .co-do > li:nth-child(-n+2) { padding-bottom: 32px; }
  /* side columns get narrower */
  .co-ix__grid, .co-sp-faq__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; }
  .co-dir__row { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 5fr) auto; gap: 24px; }
  .co-toc b { font-size: 32px; line-height: 38px; }
  .co-pq-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-pt-tabs__list { gap: 10px; }
  .co-pt-tab { padding: 18px 16px; }
  /* panel quality: the orbit badge fits its narrower column (its chips were cut at the right edge at 1024) */
  .co-pq-badge { width: 340px; height: 340px; }
  .co-pq-badge__orbit::before { inset: 48px; }
  .co-pq-badge__orbit i { transform: rotate(var(--a)) translateX(170px); }
  .co-pq-badge__card { width: 236px; padding: 32px 24px 26px; border-radius: 28px; }
  .co-pq-badge__card img { width: 172px; }
  .co-pq-badge__chips li { padding: 10px 14px; font-size: 13px; }
  .co-pq-badge__chips li:nth-child(1) { left: -10px; top: 18px; }
  .co-pq-badge__chips li:nth-child(2) { right: -10px; left: auto; top: 252px; }
  .co-pq-badge__chips li:nth-child(3) { left: 4px; bottom: -6px; }
  /* technology: without the typing effect (wine-motion lite, reduced motion) the asked question wraps instead of being cut */
  html:not(.wm-on) .co-ta-ask__bar { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; border-radius: 32px; }
  html:not(.wm-on) .co-ta-ask__q, html:not(.wm-on) .co-ta-type { white-space: normal; }
}

/* ---------- 1024: tablet landscape and below: one column ---------- */
@media (max-width: 1023.98px) {
  /* hero top space for the small header (wine-base.css), no fixed px */
  .co-hero, .co-hero--paper, .co-hero--about, .co-hero--map, .co-hero--contact, .co-hero--book, .co-hero--hub, .co-hero--pt,
  .co-hero--dq, .co-hero--me, .co-hero--pq, .co-hero--ta, .co-hero--sp, .co-sales { padding-top: var(--wn-hdr-clear, 96px); padding-bottom: 80px; }
  .co-hero--about { padding-bottom: 64px; }
  .co-hero--contact { padding-bottom: 40px; }
  .co-hero--dq { padding-bottom: 56px; }
  /* every two-column grid stacks, text first */
  .co-hero__grid, .co-ix-hero, .co-pt-hero, .co-dq-hero, .co-me-hero, .co-pq-hero, .co-ta-hero, .co-sp-hero, .co-book__grid,
  .co-sales__grid, .co-q__grid, .co-about__intro, .co-contact__split, .co-toc__grid, .co-ix__grid, .co-pt-state__grid,
  .co-pt-start__grid, .co-dq-ver__grid, .co-dq-iso__grid, .co-dq-rep__grid, .co-me-terms__grid, .co-pq-story__grid,
  .co-pq-pay__grid, .co-pq-care__grid, .co-ta-plat__grid, .co-ta-bench__grid, .co-ta-charge__grid, .co-ta-sec__grid,
  .co-sp-faq__grid, .co-sp-app__grid, .co-me-chooser.is-tabbed, .co-pt-panel, .co-office { grid-template-columns: minmax(0, 1fr); }
  .co-hero__grid, .co-ix-hero, .co-pt-hero, .co-dq-hero, .co-me-hero, .co-pq-hero, .co-ta-hero, .co-sp-hero, .co-book__grid { gap: 48px; }
  .co-sales__grid, .co-q__grid, .co-contact__split, .co-toc__grid, .co-ix__grid, .co-pt-state__grid, .co-pt-start__grid, .co-dq-ver__grid,
  .co-dq-iso__grid, .co-dq-rep__grid, .co-me-terms__grid, .co-pq-story__grid, .co-pq-pay__grid, .co-pq-care__grid, .co-ta-plat__grid,
  .co-ta-bench__grid, .co-ta-charge__grid, .co-ta-sec__grid, .co-sp-faq__grid, .co-sp-app__grid { gap: 44px; }
  /* sticky side columns sit above their content */
  .co-sales__side, .co-toc__grid .wn-head, .co-ix__nav, .co-pt-start__side, .co-me-stage__label, .co-me-chooser.is-tabbed .co-me-chooser__pans,
  .co-me-terms__side, .co-ta-charge__side, .co-sp-faq__nav { position: relative; top: auto; }
  /* labels at 12px and up on touch-size screens (desktop keeps its 10-11px micro labels) */
  .co-mini--pre .co-mini__k, .co-dq-card__head, .co-dq-doc__csvh, .co-ph__k, .co-ph__toast small, .co-ta-brief span, .co-ta-qs i,
  .co-ta-fu b, body.t-company .sk-map .lbl { font-size: 12px; }
  .co-map--hero .co-pin__role { font-size: 13px; }

  /* pinned stories run as plain sections here (wine-motion lite): normal section spacing */
  html:not(.wm-on) .co-q, html:not(.wm-on) .co-pq-story, html:not(.wm-on) .co-ta-bench, html:not(.wm-on) .co-dq-path,
  html:not(.wm-on) .co-brands { padding: 96px 0; }
  .co-hero__grid > :last-child, .co-ix-hero > :last-child { min-width: 0; }

  /* quotes: one per row (a long quote in a half-width column ran to 20 lines) */
  .co-quotes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .co-quote blockquote { font-size: 22px; line-height: 32px; }

  /* accreditations */
  .co-wall { max-width: 600px; }
  .co-band { padding: 56px 0 64px; }
  .co-statement { padding: 104px 0 96px; }
  .co-statement__p { font-size: 26px; line-height: 38px; }
  .co-mem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-mem__row { grid-template-columns: minmax(0, 1fr); }
  .co-check__steps { gap: 28px; }
  .co-check__steps h3 { font-size: 24px; line-height: 30px; }
  .co-vs { gap: 20px; }
  .co-vs__card { padding: 36px 32px; }

  /* about */
  .co-about__h1 { margin: 18px 0 32px; }
  .co-about__intro { gap: 28px; margin-bottom: 56px; }
  .co-about__intro .wn-hero__ctas { justify-content: flex-start; }
  /* the chain: rail on the left, every card to its right */
  .co-chain-sec .wn-head { margin-bottom: 48px; }
  .co-chain__rail { left: 32px; }
  .co-node { grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .co-node + .co-node { margin-top: 28px; }
  .co-node__card, .co-node--r .co-node__card { grid-column: 2; }
  .co-node__dot { grid-column: 1; justify-self: start; margin-top: 24px; }
  .co-brands__head { gap: 24px; }
  .co-values > li { padding: 40px 32px 40px 0; }
  .co-values > li:nth-child(even) { padding-left: 32px; }

  /* offices: the map moves under the headline and the clocks */
  .co-hero--map { min-height: 0; display: flex; flex-direction: column; padding-bottom: 48px; }
  .co-mapstage { position: relative; z-index: 0; order: 2; right: auto; top: auto; width: 100%; max-width: 760px; margin: 32px auto 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
  .co-clocks { margin-top: 64px; }
  .co-stack { gap: 32px; }
  .co-office { min-height: 0; gap: 32px; padding: 40px; }
  .co-office__map { min-height: 260px; }
  .co-routes { gap: 16px; }
  .co-route { padding: 28px 24px; }
  .co-social { grid-template-columns: minmax(0, 1fr); }
  .co-reach__social { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* talk to sales */
  .co-sales { padding-bottom: 96px; }

  /* contact */
  .co-hero--contact .wn-crumbs { margin-bottom: 18px; }
  .co-contact__h1 { margin: 16px 0 28px; }
  .co-contact__row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .co-contact__row .wn-lead { flex: none; }
  .co-filter { justify-content: flex-start; }
  .co-dir__row { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 20px; row-gap: 8px; padding: 24px 12px; }
  .co-dir__ico { grid-row: 1 / span 2; align-self: start; }
  .co-dir__who { grid-column: 2; grid-row: 1; }
  .co-dir__what { grid-column: 2 / -1; grid-row: 2; }
  .co-dir__go { grid-column: 3; grid-row: 1; }

  /* panel book */
  .co-toc a { grid-template-columns: 56px auto minmax(24px, 1fr) auto; gap: 14px; }
  .co-toc b { font-size: 30px; line-height: 36px; }
  .co-spread { grid-template-columns: minmax(0, 1fr); }
  .co-spread::after { display: none; }
  .co-page { min-height: 0; padding: 52px 44px 76px; }
  .co-page--r { border-top: 1px solid var(--wn-line); }
  .co-page__num { right: 40px; font-size: 120px; }

  /* company hub */
  .co-ix__nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .co-ix__blocks { gap: 64px; }
  .co-ix-off h3 { font-size: 34px; line-height: 40px; }
  .co-ix-off__txt { padding: 22px 22px 26px; }
  .co-ix-off__t { flex-wrap: wrap; }

  /* partnership */
  .co-pt-hero__vis { justify-self: center; max-width: 560px; }
  .co-pt-tabs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co-pt-panel__txt { padding: 40px; }
  .co-pt-art { min-height: 300px; }

  /* data quality */
  .co-dq-hero__vis { max-width: 640px; }
  .co-dq-strip { margin-top: 56px; }
  .co-dq-two { grid-template-columns: minmax(0, 1fr); }
  .co-dq-two__then svg { transform: rotate(90deg); }
  .co-dq-iso__mark { justify-self: start; }
  .co-dq-doc { max-width: 640px; }

  /* methodology */
  .co-me-ring { max-width: 440px; }
  .co-me-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 52px 0; }
  .co-me-stage__n { font-size: 88px; letter-spacing: -3.5px; }
  .co-me-chooser.is-tabbed { gap: 24px; }

  /* panel quality */
  .co-pq-phone { justify-self: center; }

  /* technology and AI */
  .co-ta-num b { font-size: 44px; }
  .co-ta-num:first-child b { font-size: 64px; }
  /* the recorded-answer flow: a vertical list, the line runs down through the dots */
  .co-ta-flow__line { display: none; }
  .co-ta-flow ol { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .co-ta-flow ol::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(180deg, var(--mint), rgba(255, 179, 199, .25)); }
  .co-ta-flow li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; row-gap: 6px; align-items: start; }
  .co-ta-flow li > * { grid-column: 2; }
  .co-ta-flow li > .co-ta-flow__dot { grid-column: 1; grid-row: 1 / span 4; }
  .co-ta-flow__k { margin-top: 0; }

  /* panelist support */
  .co-sp-res { padding: 26px 22px; }
  .co-sp-faq__nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-sp-help__card { grid-template-columns: 64px minmax(0, 1fr); padding: 36px; }
  .co-sp-help__ico { width: 64px; height: 64px; }
  .co-sp-help__btns { grid-column: 2; flex-wrap: wrap; }
}

/* ---------- 768: tablet portrait, phones ---------- */
@media (max-width: 767.98px) {
  .co-hero, .co-hero--paper, .co-hero--about, .co-hero--map, .co-hero--contact, .co-hero--book, .co-hero--hub, .co-hero--pt,
  .co-hero--dq, .co-hero--me, .co-hero--pq, .co-hero--ta, .co-hero--sp, .co-sales { padding-top: var(--wn-hdr-clear-m, 88px); padding-bottom: 64px; }
  .co-hero--about { padding-bottom: 56px; }
  .co-hero--contact { padding-bottom: 32px; }
  .co-hero--dq, .co-hero--map { padding-bottom: 48px; }
  html:not(.wm-on) .co-q, html:not(.wm-on) .co-pq-story, html:not(.wm-on) .co-ta-bench, html:not(.wm-on) .co-dq-path,
  html:not(.wm-on) .co-brands { padding: 72px 0; }
  .co-hero__txt { gap: 18px; }

  /* shared */
  .co-quotes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .co-quote { gap: 18px; padding: 28px 24px 26px; border-radius: 24px; }
  .co-quote blockquote, .co-quotes-sec--sm .co-quote blockquote { font-size: 20px; line-height: 30px; }
  .co-quote figcaption span { font-size: 16px; }
  .co-proof { padding: 40px 0; }
  .co-proof__in, html:not(.wm-on):not(.wm-lite) .co-proof__in { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .co-ptile { height: 72px; padding: 0 18px 0 14px; }
  .co-ptile img { height: 40px; }
  .co-lcards { grid-template-columns: minmax(0, 1fr); }
  .co-lcard a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 52px 22px 20px; }
  .co-lcard__ico { width: 44px; height: 44px; }
  .co-lcard__t { font-size: 20px; line-height: 26px; }
  .co-lcard__d { font-size: 16px; line-height: 24px; }
  .co-lcard__go { right: 18px; top: 24px; }
  .co-tlist--2 { grid-template-columns: minmax(0, 1fr); }
  .co-tlist p { font-size: 16px; }

  /* accreditations */
  .co-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; transform: none; }
  .co-tile--1, .co-tile--3, .co-tile--5 { transform: none; }
  .co-tile { height: 150px; gap: 12px; padding: 18px 10px 14px; border-radius: 18px; }
  .co-tile img { max-height: 52px; }
  .co-band { padding: 48px 0 56px; }
  .co-statement { padding: 80px 0 72px; }
  .co-statement__h { margin: 18px auto 24px; }
  .co-statement__p { font-size: 21px; line-height: 31px; letter-spacing: -.3px; }
  .co-reg__head { flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: 36px; }
  .co-reg__iso { padding: 18px 22px 14px; }
  .co-reg__iso img { height: 60px; }
  .co-reg__row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 32px 4px; }
  .co-reg__tag { grid-column: auto; white-space: normal; }
  .co-reg__num > b:not(.co-reg__word) { font-size: 64px; letter-spacing: -2.4px; }
  .co-reg__num i { font-size: 22px; }
  .co-reg__num--logo img { height: 64px; }
  .co-reg__word { font-size: 26px; line-height: 32px; }
  .co-reg__body h3 { font-size: 23px; line-height: 29px; }
  .co-mem__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .co-mem__in { padding: 24px 22px 26px; }
  .co-mem__plate { height: 112px; }
  .co-mem h3 { font-size: 22px; line-height: 28px; }
  .co-mem__wide { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .co-mem__plate--sm { width: 100%; height: 96px; }
  .co-mem__ico { width: 80px; height: 80px; }
  .co-codes { gap: 10px; margin-top: 36px; padding-top: 28px; }
  .co-codes b { padding: 11px 16px; }
  .co-q__layers p { font-size: 18px; line-height: 28px; }
  .co-qcard { padding: 28px 20px 22px; border-radius: 24px; }
  .co-qcard__top { flex-wrap: wrap; gap: 4px 12px; }
  .co-qcard__top b { font-size: 22px; line-height: 28px; }
  .co-qrow { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 12px; padding: 20px 0; }
  .co-qrow__n { width: 34px; height: 34px; }
  .co-qrow__ok { width: 30px; height: 30px; }
  .co-qrow__q { font-size: 17px; line-height: 25px; padding-top: 3px; }
  .co-qcard__foot { padding: 14px 16px; font-size: 16px; }
  .co-check__line { display: none; }
  .co-check__steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .co-check__n { width: 56px; height: 56px; font-size: 21px; box-shadow: none; }
  .co-check__ico { margin-top: 8px; }
  .co-vs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .co-vs__mid { width: 60px; height: 60px; margin: -18px auto; font-size: 19px; }
  .co-vs__card { padding: 30px 22px; border-radius: 24px; }
  .co-vs__card h3 { font-size: 28px; line-height: 34px; }
  .co-vs__logo, .co-vs__iso { height: 60px; }
  .co-vs__iso { font-size: 28px; }
  .co-vs__list li { font-size: 16px; }
  .co-vs__both { flex-wrap: wrap; margin-top: 32px; font-size: 19px; line-height: 26px; text-align: center; }

  /* about */
  .co-about__intro .wn-lead { font-size: 18px; line-height: 28px; }
  .co-do { grid-template-columns: minmax(0, 1fr); }
  .co-do > li, .co-do > li + li, .co-do > li:nth-child(even), .co-do > li:nth-child(-n+2), .co-do > li:nth-child(n+3) { padding: 26px 0 30px; border-left: 0; }
  .co-do > li + li { border-top: 1px solid var(--wn-line); }
  .co-do h3 { font-size: 24px; line-height: 30px; }
  .co-chain__rail { left: 24px; }
  .co-node { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .co-node + .co-node { margin-top: 20px; }
  .co-node__dot { width: 48px; height: 48px; margin-top: 20px; box-shadow: 0 0 0 8px #fff, 0 8px 20px rgba(214, 51, 94, .2); }
  .co-node__dot svg { width: 20px; height: 20px; }
  .co-node__card { padding: 22px 20px 24px; border-radius: 22px; }
  .co-node__card h3 { font-size: 22px; line-height: 28px; }
  .co-mini { padding: 14px; }
  .co-mini--q p, .co-mini--pre p, .co-mini__say { font-size: 16px; line-height: 23px; }
  .co-mini--pre { max-width: none; }
  .co-mini__ai { font-size: 15px; line-height: 21px; }
  .co-mini--quota li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; font-size: 14px; }
  .co-mini--quota .co-mini__bar { grid-column: 1 / -1; grid-row: 2; }
  .co-brands__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .co-brands__sub { font-size: 17px; line-height: 27px; }
  .co-brand { width: min(82vw, 400px); min-height: 0; padding: 28px 24px; border-radius: 24px; }
  .co-brand h3 { font-size: 24px; line-height: 30px; }
  .co-brand > p:not(.co-brand__k) { font-size: 16px; line-height: 25px; }
  .co-brand__logo { height: 60px; margin-bottom: 6px; }
  .co-word { font-size: 36px; }
  .co-word--pulse { font-size: 32px; }
  .co-values { grid-template-columns: minmax(0, 1fr); }
  .co-values > li, .co-values > li:nth-child(even) { grid-template-columns: 64px minmax(0, 1fr); padding: 30px 0; border-left: 0; }
  .co-values__n { font-size: 60px; }
  .co-values h3 { font-size: 24px; line-height: 30px; margin-bottom: 8px; }
  .co-values p { font-size: 16px; line-height: 25px; }
  .co-offlist li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 0; }
  .co-offlist b { font-size: 24px; line-height: 30px; }
  .co-offlist span { font-size: 16px; }

  /* offices */
  .co-mapstage { margin-top: 24px; }
  .co-map--hero .co-pin__city, .co-map--hero .co-pin__role { display: none; }   /* too small to read here; the clocks name each office */
  .co-clocks { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .co-clocks li, .co-clocks li + li { padding: 18px 0; border-left: 0; }
  .co-clocks li + li { border-top: 1px solid rgba(255, 179, 199, .26); }
  .co-clocks__city { font-size: 26px; line-height: 32px; }
  .co-clocks__role { font-size: 16px; }
  .co-office { gap: 26px; padding: 28px 22px; border-radius: 28px; }
  .co-office__city { margin-top: 10px; }
  .co-office__region { font-size: 18px; line-height: 26px; }
  .co-office__addr { font-size: 17px; line-height: 26px; }
  .co-office__map { min-height: 220px; border-radius: 22px; }
  .co-routes { grid-template-columns: minmax(0, 1fr); }
  .co-route h3 { font-size: 23px; line-height: 29px; }
  .co-social a { padding: 18px 48px 18px 18px; }
  .co-social small { font-size: 14px; }

  /* talk to sales */
  .co-sales__office { font-size: 16px; line-height: 24px; align-items: flex-start; }
  .co-sales__office svg { margin-top: 4px; }
  .co-next b { font-size: 17px; line-height: 25px; }
  .co-form { padding: 30px 20px 24px; border-radius: 26px; }
  .co-form::before { left: 20px; right: 20px; }
  .co-form__head h2 { font-size: 26px; line-height: 32px; }
  .co-form__head p, .co-hint--none, .co-hint li, .co-form__legal { font-size: 16px; line-height: 24px; }
  .co-topic small { font-size: 14px; }
  .co-done p:not(.co-done__t) { font-size: 16px; }

  /* contact */
  .co-dir__row { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 22px 4px; }
  .co-dir__ico { width: 48px; height: 48px; grid-row: 1 / span 3; }
  .co-dir__what { grid-column: 2; grid-row: 2; }
  .co-dir__go { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; }
  .co-dir__who b { font-size: 22px; line-height: 28px; }
  .co-dir__who span { font-size: 16px; line-height: 22px; }
  .co-contact__split .wn-h2 { font-size: 30px; line-height: 36px; }
  .co-offmini b { font-size: 23px; line-height: 29px; }
  .co-offmini span { font-size: 16px; }

  /* panel book */
  .co-bookwrap { zoom: .8; }
  .co-toc a { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 22px 4px; }
  .co-toc a:hover { padding-left: 4px; }
  .co-toc__dots { display: none; }
  .co-toc__p { grid-column: 2; }
  .co-toc__n { font-size: 18px; }
  .co-toc b { font-size: 25px; line-height: 31px; }
  .co-ch { padding: 40px 0; }
  #ch-pocketsfull { padding-top: 72px; }
  .co-spread { border-radius: 22px; }
  .co-page { padding: 36px 22px 64px; gap: 14px; }
  .co-page__num { right: 16px; top: 22px; font-size: 64px; letter-spacing: -3px; }
  .co-page__logo { height: 72px; padding: 0 18px; }
  .co-page__logo img { height: 42px; }
  #ch-sampleeye .co-page__logo img { height: 32px; }
  #ch-pocketsfull-ai .co-page__logo img { height: 36px; }
  .co-page__h { font-size: 28px; line-height: 34px; letter-spacing: -.6px; }
  .co-page__lede { font-size: 18px; line-height: 28px; }
  .co-page__sub { font-size: 21px; line-height: 27px; }
  .co-page--l .co-page__folio { left: 22px; }
  .co-page--r .co-page__folio { right: 22px; }
  .co-paid { white-space: normal; }
  /* the outcomes table: outcome | what happens, the payment under the text (header row kept for screen readers) */
  .co-outtab, .co-outtab tbody { display: block; }
  .co-outtab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .co-outtab tbody tr { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding: 14px 0;
    border-bottom: 1px solid var(--wn-line); }
  .co-outtab tbody tr:first-child { border-top: 1px solid var(--wn-line); }
  .co-outtab tbody th, .co-outtab td { width: auto; padding: 0; border-bottom: 0; }
  .co-outtab .co-out__pay { grid-column: 2; width: auto; }
  .co-outtab td { font-size: 16px; line-height: 24px; }
  .co-flow p, .co-outs span, .co-gets p { font-size: 16px; line-height: 24px; }

  /* company hub */
  .co-ix-tiles ul { gap: 12px; }
  .co-ix-tile { min-height: 0; padding: 22px 20px; border-radius: 22px; }
  .co-ix-tile b { font-size: 23px; line-height: 29px; }
  .co-ix-tile small { font-size: 16px; line-height: 23px; }
  .co-ix__bh { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .co-ix__num { font-size: 56px; letter-spacing: -2px; }
  .co-ix__bt { font-size: 28px; line-height: 34px; }
  .co-ix__bd { font-size: 17px; line-height: 27px; }
  .co-ix__h2 { font-size: 32px; line-height: 38px; }
  .co-ix-offs__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .co-ix-offs__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .co-ix-off h3 { font-size: 34px; line-height: 40px; }

  /* partnership */
  .co-pt-node { width: 104px; margin: -30px 0 0 -52px; gap: 8px; }
  .co-pt-node__disc { width: 56px; height: 56px; }
  .co-pt-node__disc svg { width: 22px; height: 22px; }
  .co-pt-node b { font-size: 13px; line-height: 17px; }
  .co-pt-net__core { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  .co-pt-net__core img { width: 76px; }
  .co-pt-state__p { font-size: 18px; line-height: 28px; }
  .co-pt-pillars li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .co-pt-pillar__ico { width: 44px; height: 44px; }
  .co-pt-pillars b { font-size: 20px; line-height: 26px; }
  .co-pt-pillars p { font-size: 16px; line-height: 24px; }
  .co-pt-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-pt-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .co-pt-tab { padding: 16px; gap: 12px 10px; }
  .co-pt-tab__t b { min-height: 0; font-size: 18px; line-height: 24px; }
  .co-pt-panel { border-radius: 26px; }
  .co-pt-panel__txt { padding: 30px 22px; gap: 14px; }
  .co-pt-panel h3 { font-size: 28px; line-height: 34px; }
  .co-pt-panel__p { font-size: 17px; line-height: 27px; }
  .co-pt-art { min-height: 240px; padding: 28px; }
  .co-pt-art__num { font-size: 120px; right: 18px; }
  .co-pt-art__a, .co-pt-art__b { width: 84px; height: 84px; }
  .co-pt-art__b img { width: 58px; }
  .co-pt-art__line { width: 70px; }
  .co-pt-steps__rail { left: 25px; }
  .co-pt-steps li { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 18px 0; }
  .co-pt-step__n { width: 52px; height: 52px; font-size: 20px; box-shadow: 0 0 0 8px #fff; }
  .co-pt-steps h3 { margin: 8px 0 6px; font-size: 23px; line-height: 29px; }
  .co-pt-steps p { font-size: 17px; line-height: 27px; }

  /* data quality: the validation card keeps ID | four checks, the status goes under the ID */
  .co-dq-card { padding: 20px 14px 16px; border-radius: 22px; }
  .co-dq-card__top { flex-wrap: wrap; gap: 8px 10px; }
  .co-dq-card__top b { font-size: 19px; line-height: 25px; }
  .co-dq-card__head, .co-dq-r { grid-template-columns: 72px repeat(4, minmax(0, 1fr)); column-gap: 4px; }
  .co-dq-card__head { padding: 12px 8px 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
  .co-dq-card__head span:last-child { display: none; }
  .co-dq-r { padding: 9px 8px; row-gap: 4px; }
  .co-dq-st { grid-column: 1; grid-row: 2; justify-self: start; }
  .co-dq-why { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }
  .co-dq-card__foot { flex-wrap: wrap; }
  .co-dq-strip { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .co-dq-strip li, .co-dq-strip li + li { padding: 20px 0 0; border-left: 0; }
  .co-dq-strip b { font-size: 21px; line-height: 27px; }
  .co-dq-spec { padding: 28px 20px 22px; }
  .co-dq-spec h3 { font-size: 23px; line-height: 29px; }
  .co-dq-spec__ok { font-size: 16px; }
  .co-dq-path__sub { font-size: 17px; line-height: 27px; }
  .co-dq-track { margin: 48px 0 28px; }
  .co-dq-node { gap: 10px; }
  .co-dq-node__dot { width: 44px; height: 44px; }
  .co-dq-node__dot svg { width: 20px; height: 20px; }
  .co-dq-node b { font-size: 13px; line-height: 17px; }
  .co-dq-track__lane { top: 21px; }
  .co-dq-step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 20px; border-radius: 22px; }
  .co-dq-step__n { font-size: 56px; letter-spacing: -2px; }
  .co-dq-step h3 { font-size: 24px; line-height: 30px; }
  .co-dq-step__body > p:not(.co-dq-step__k) { font-size: 16px; line-height: 26px; }
  .co-dq-layer { padding: 28px 22px; border-radius: 24px; }
  .co-dq-layer h3 { font-size: 28px; line-height: 34px; }
  .co-dq-layer__p { font-size: 16px; line-height: 26px; }
  .co-dq-two__note { font-size: 19px; line-height: 27px; }
  .co-dq-iso__mark { padding: 32px 28px; border-radius: 26px; }
  .co-dq-iso__mark b { font-size: 84px; letter-spacing: -3px; }
  .co-dq-iso__mark i { font-size: 22px; }
  .co-dq-iso__img { height: 52px; margin-top: 16px; }
  .co-dq-iso__p { font-size: 17px; line-height: 27px; }
  .co-dq-iso__go { flex-wrap: wrap; gap: 12px 28px; }
  .co-dq-doc__in { padding: 24px 18px 20px; transform: rotate(.6deg); }
  .co-dq-doc h3 { font-size: 23px; line-height: 29px; }
  .co-dq-doc__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-dq-doc__csvh, .co-dq-doc__csv li { gap: 6px; padding: 10px 12px; }
  .co-dq-doc__csvh { font-size: 12px; letter-spacing: .02em; }

  /* methodology */
  .co-hero--me::after { display: none; }
  .co-me-ring { max-width: 360px; }
  /* the ring's stage names drawn larger (the numbered dots stay plain: their numbers would be too small to read) */
  .co-me-ring__l { font-size: 26px; }
  .co-me-ring__sm { font-size: 25px; }
  .co-me-ring__n { display: none; }
  .co-me-stages { padding-left: 0; }
  .co-me-rail { display: none; }
  .co-me-stage { padding: 44px 0; gap: 24px; }
  .co-me-stage__label { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .co-me-stage__label h3, .co-me-stage__label p { flex-basis: 100%; }
  .co-me-stage__ico { position: static; width: 48px; height: 48px; box-shadow: none; }
  .co-me-stage__n { font-size: 64px; letter-spacing: -2.5px; }
  .co-me-stage__label h3 { font-size: 26px; line-height: 32px; }
  .co-me-rules { grid-template-columns: minmax(0, 1fr); }
  .co-me-rule { padding: 22px 20px 20px; }
  .co-me-rule h4 { font-size: 18px; line-height: 25px; }
  .co-me-q { padding: 12px 14px; min-height: 48px; }
  .co-me-pan { padding: 26px 22px; border-radius: 24px; }
  .co-me-pan__q { font-size: 18px; line-height: 26px; }
  .co-me-pan h3 { font-size: 30px; line-height: 36px; }
  .co-me-pan__t { font-size: 17px; line-height: 27px; }
  .co-me-pan__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .co-me-pan__steps li { font-size: 16px; line-height: 24px; }
  .co-me-terms__list { grid-template-columns: minmax(0, 1fr); }
  .co-me-term dt { font-size: 20px; line-height: 26px; }
  .co-me-polls__card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 22px; }
  .co-me-polls__ico { width: 60px; height: 60px; }
  .co-me-polls h2 { font-size: 24px; line-height: 30px; }

  /* panel quality: the orbit badge drawn smaller, its chips inside the screen */
  .co-pq-badge { width: 320px; height: 320px; }
  .co-pq-badge__orbit::before { inset: 44px; }
  .co-pq-badge__orbit i { transform: rotate(var(--a)) translateX(160px); }
  .co-pq-badge__card { width: 220px; padding: 30px 22px 24px; border-radius: 26px; }
  .co-pq-badge__card img { width: 160px; }
  .co-pq-badge__chips li { padding: 9px 13px; font-size: 13px; }
  .co-pq-badge__chips li:nth-child(1) { left: -8px; top: 14px; }
  .co-pq-badge__chips li:nth-child(2) { right: -8px; left: auto; top: 238px; }
  .co-pq-badge__chips li:nth-child(3) { left: 4px; bottom: -6px; }
  .co-pq-step h3 { font-size: 28px; line-height: 34px; }
  .co-pq-step > p:not(.co-pq-step__k) { font-size: 17px; line-height: 27px; }
  .co-pq-rules { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .co-pq-rule { padding: 26px 22px; }
  .co-pq-led__in { padding: 22px 18px 18px; }
  .co-pq-led__top { flex-wrap: wrap; gap: 4px 12px; }
  .co-pq-led li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
  .co-pq-led__ico { width: 30px; height: 30px; }
  .co-pq-led__foot { font-size: 16px; align-items: flex-start; }
  .co-pq-care__list a { padding: 16px; font-size: 17px; }

  /* technology and AI */
  .co-hero--ta .wn-lead { font-size: 18px; line-height: 28px; }
  html:not(.wm-on) .co-ta-ask__bar { min-height: 56px; padding: 8px 8px 8px 16px; border-radius: 28px; }
  .co-ta-ans { padding: 22px 18px 20px; }
  .co-ta-ans__bars li { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 10px; }
  .co-ta-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .co-ta-num { min-height: 0; padding: 20px 18px; }
  .co-ta-num b { font-size: 40px; }
  .co-ta-num:first-child b { font-size: 60px; }
  .co-ta-num span, .co-ta-num:first-child span { font-size: 16px; line-height: 23px; }
  .co-ta-step h3 { font-size: 28px; line-height: 34px; }
  .co-ta-step > p:not(.co-ta-step__k) { font-size: 17px; line-height: 27px; }
  .co-ta-win__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .co-ta-win__tabs { flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--wn-line); scrollbar-width: none; }
  .co-ta-win__tab { flex: none; white-space: nowrap; }
  .co-ta-win__screens { padding: 20px 16px; }
  .co-ta-brief { max-width: 100%; font-size: 16px; }
  .co-ta-qs li { font-size: 15px; }
  .co-ta-flow ol { gap: 28px; }
  .co-ta-flow ol::before { left: 25px; top: 26px; bottom: 26px; }
  .co-ta-flow li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .co-ta-flow__dot { width: 52px; height: 52px; }
  .co-ta-flow h3 { font-size: 23px; line-height: 29px; }
  .co-ta-sec__badges { padding: 44px 22px; gap: 24px; }
  .co-ta-sec__imgs { flex-wrap: wrap; justify-content: center; }
  .co-ta-sec__imgs img { height: 48px; padding: 12px 14px; }
  .co-ta-charge li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 22px 20px; }
  .co-ta-charge__ico { width: 48px; height: 48px; border-radius: 14px; }
  .co-ta-charge h3 { font-size: 22px; line-height: 28px; }
  .co-ta-charge p { font-size: 16px; line-height: 25px; }

  /* panelist support */
  .co-sp-tile { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px 46px 16px 16px; }
  .co-sp-tile__ico { width: 44px; height: 44px; }
  .co-sp-tile b { font-size: 19px; line-height: 24px; }
  .co-sp-tile__go { right: 16px; }
  .co-sp-res__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .co-sp-res b { font-size: 22px; line-height: 28px; }
  .co-sp-group { padding: 24px 18px 4px; border-radius: 22px; }
  .co-sp-group__h { font-size: 23px; line-height: 29px; }
  .co-sp-group__h span { width: 40px; height: 40px; }
  .co-sp-group .wn-faq__item summary { font-size: 17px; line-height: 25px; }
  .co-sp-help__card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 22px; }
  .co-sp-help__ico { width: 56px; height: 56px; }
  .co-sp-help h2 { font-size: 26px; line-height: 32px; }
  .co-sp-help__btns { grid-column: auto; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  .co-reg__row { padding: 28px 0; }
  .co-mem__plate--sm { height: 88px; }
  .co-qcard__top span { font-size: 12px; }
  .co-bookwrap { zoom: .72; }
  .co-topics__grid, .co-fields { grid-template-columns: minmax(0, 1fr); }
  .co-form__send { flex-direction: column; align-items: stretch; gap: 12px; }
  .co-form__send .btn { width: 100%; }
  .co-form__req { align-self: center; }
  .co-office__facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .co-ix-tiles ul { grid-template-columns: minmax(0, 1fr); }
  .co-ix__nav ol, .co-sp-faq__nav ol { grid-template-columns: minmax(0, 1fr); }
  .co-pt-tab__t small { font-size: 13px; }
  .co-outs, .co-dq-iso__also { grid-template-columns: minmax(0, 1fr); }
  .co-dq-spec li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .co-ta-qs li { grid-template-columns: 26px minmax(0, 1fr); }
  .co-ta-qs i { grid-column: 2; justify-self: start; }
  .co-ta-th li { grid-template-columns: 104px minmax(0, 1fr) 40px; }
  .co-ta-nums { gap: 10px; }
  .co-pq-badge { width: 296px; height: 296px; }
  .co-pq-badge__orbit i { transform: rotate(var(--a)) translateX(148px); }
  .co-pq-badge__card { width: 204px; }
  .co-pq-badge__chips li:nth-child(2) { top: 220px; }
  .co-sp-help__btns { flex-direction: column; align-items: stretch; }
  .co-sp-help__btns .btn { width: 100%; }
}

/* ---------- tablets and phones, and touch screens of any size: 44px tap areas ---------- */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .co-me-rule__src { padding-top: 16px; padding-bottom: 10px; margin-bottom: -10px; }   /* "From: ..." source links */
}

/* ---------- touch screens: 44px taps, no hover lifts that stick ---------- */
@media (hover: none) and (pointer: coarse) {
  .co-me-toc a { height: 44px; }
  .co-lcard a:hover, .co-ix-tile:hover, .co-sp-tile:hover, .co-route:hover, .co-social a:hover, .co-topic:hover, .co-pt-tab:hover,
  .co-pq-care__list a:hover { transform: none; }
}
/* @@ RESPONSIVE-HC END @@ */