/* Stanify · Unilever case study, v3
   Between v1 (pinned scroll chapters) and v2 (plain article): the doc's text in its order, set as an editorial page.
   Halo hero, a big at-a-glance band, the challenge points beside small UI snippets, five pillar cards, one dark band for the
   turning point (the page's data moment), a results bento with pull figures, insight cards, the halo story, the site's close.
   Overline tokens; chips, faces, halo and close from the light Conversation Intelligence site. Single light theme by design. */
:root {
  color-scheme: light;
  --bg: var(--surface-default);
  --fg: var(--text-primary);
  --muted: rgba(18, 33, 49, .68);
  --faint: rgba(18, 33, 49, .45);
  --line: rgba(18, 33, 49, .1);
  --line-2: rgba(18, 33, 49, .16);
  --panel: #F5F9FB;
  --soft: #F3F8FA;
  --dark: var(--surface-inverse);
  --on-dark: var(--text-inverse);
  --on-dark-2: rgba(235, 254, 255, .66);
  --hi: var(--surface-accent);
  --hi-t: var(--color-green-800);
  --hi-big: var(--color-green-700);
  --shadow: 0 1px 2px rgba(18, 33, 49, .05), 0 24px 60px -32px rgba(18, 33, 49, .28);
  --f-display: "GT Ultra Median", "Albert Sans", Georgia, serif;
  --f-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 76rem;
  --gut: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --pop: cubic-bezier(.3, 1.6, .5, 1);
}

html { background: var(--bg); scroll-padding-top: 80px; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
strong { font-weight: 650; color: var(--fg); }
::selection { background: var(--hi); color: var(--fg); }
:focus-visible { outline: 3px solid var(--color-indigo-500); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
@media (max-width: 600px) { .dbr { display: none; } }

.gridlines { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); box-sizing: border-box; }
.gridlines i { width: 1px; background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent); opacity: .5; }
main, .foot, .nav { position: relative; z-index: 1; }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-green-600); box-shadow: 0 0 0 4px rgba(79, 207, 6, .14); }
.dot--red { background: var(--color-red-500); box-shadow: 0 0 0 4px rgba(224, 104, 95, .16); }
.h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.fine { font-size: .8rem; color: var(--faint); }

/* Buttons, email row, chips (the CI site's) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 1.3rem; border: 0; border-radius: var(--radius-pill); background: var(--action-primary); color: var(--action-primary-text); font: 600 .95rem/1 var(--f-body); cursor: pointer; white-space: nowrap; transition: background-color .25s, transform .25s var(--ease); }
.btn:hover { background: var(--action-primary-hover); transform: translateY(-1px); }
.btn--sm { min-height: 2.4rem; padding: 0 1rem; font-size: .85rem; }
.emailrow { display: flex; gap: .4rem; width: 100%; max-width: 32rem; padding: .4rem; box-sizing: border-box; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.emailrow input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: 400 1.05rem var(--f-body); padding: 0 .9rem; outline: none; }
.emailrow input::placeholder { color: var(--faint); }
.emailrow:focus-within { border-color: var(--color-green-600); box-shadow: 0 0 0 3px rgba(79, 207, 6, .16); }
.emailrow.is-bad { border-color: var(--color-red-400); }
.emailrow .btn { min-height: 3.1rem; }
.chip { display: inline-flex; align-items: center; font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .32rem .6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.chip--hide { background: var(--color-red-500); color: #fff; }
.chip--ask { background: var(--dark); color: var(--color-phosphorus); }
.chip--route { background: var(--color-indigo-50); color: var(--color-indigo-800); }
.chip--insight { background: var(--dark); color: var(--color-phosphorus); }
.tag { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .28rem .55rem; border-radius: var(--radius-pill); white-space: nowrap; }
.tag--wait { background: rgba(18, 33, 49, .07); color: rgba(18, 33, 49, .6); }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 2rem; padding: calc(env(safe-area-inset-top, 0px) + .9rem) var(--gut) .9rem; transition: background-color .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.is-solid { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
.nav__logo img { display: block; height: 1.55rem; width: auto; }
.nav nav { margin-inline: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; font-size: .9rem; color: var(--muted); }
.nav__links a:hover, .nav__signin:hover { color: var(--fg); }
.nav__signin { font-size: .9rem; color: var(--muted); text-decoration: none; }
.nav__price { position: relative; }
.nav__tip { position: absolute; top: calc(100% + .8rem); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; padding: .6rem .9rem; border-radius: .7rem; background: var(--color-graphite); color: var(--color-white); font-size: .82rem; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); box-shadow: var(--shadow); }
.nav__tip::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.nav__price:hover .nav__tip, .nav__price:focus-within .nav__tip { opacity: 1; transform: translate(-50%, 0); }
.nav__video { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.nav__video:hover { color: var(--fg); }
.nav__video svg { width: .8rem; height: .8rem; fill: currentColor; }
.btn--hi { background: var(--color-graphite); color: var(--color-white); }
.btn--hi:hover { background: var(--color-blue-800); box-shadow: 0 10px 28px -12px rgba(18, 33, 49, .5); }
.vmodal { padding: 0; border: 0; background: transparent; width: min(92vw, 1100px); max-width: none; max-height: none; overflow: visible; }
.vmodal::backdrop { background: rgba(18, 33, 49, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vmodal video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; background: var(--color-graphite); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .6); }
.vmodal__x { position: absolute; right: 0; top: -3rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--color-white); color: var(--color-graphite); font: 400 1.5rem/1 var(--f-body); cursor: pointer; }
@media (max-width: 900px) { .nav nav, .nav__signin { display: none; } .nav { justify-content: space-between; } }
@media (max-width: 560px) {
  .nav { gap: 1rem; }
  .nav .btn--sm { font-size: .78rem; padding: 0 .85rem; min-height: 2.2rem; }
}

/* ============ HERO: copy left, products on the remix right ============ */
.hero { position: relative; overflow: clip; padding-block: clamp(7.5rem, 15vh, 9.5rem) clamp(3.5rem, 6vw, 5rem); background: radial-gradient(55% 45% at 80% 10%, rgba(44, 155, 206, .14), transparent 70%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.3rem; container-type: inline-size; min-width: 0; }
.lockup { display: flex; align-items: center; gap: 1.1rem; margin-bottom: .6rem; }
.lockup img { display: block; height: 1.5rem; width: auto; }
.lockup i { width: 1px; height: 1.6rem; background: var(--line-2); }
.title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 10.5cqi, 4.2rem); line-height: .92; letter-spacing: -.035em; max-width: 100%; }
.title__line { display: block; white-space: nowrap; }
.title em { font-style: normal; color: var(--hi-big); }
.hero__intro { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; max-width: 34rem; }
.hero__lead { font-family: var(--f-display); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
.hero__scope { color: var(--muted); }
.hero__art { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; }
.hero__halo { position: absolute; left: 50%; top: 46%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%); mask: radial-gradient(closest-side, #000 62%, transparent 100%); }
.hero__halo img { width: 100%; height: 100%; display: block; animation: spin 80s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__products { position: relative; width: 100%; height: auto; }

/* ============ AT A GLANCE ============ */
.glance { position: relative; padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--dark); color: var(--on-dark); }
.glance .eyebrow { color: var(--on-dark-2); }
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.8rem; }
.stats > div { display: flex; flex-direction: column; gap: .55rem; padding-top: 1rem; border-top: 1px solid rgba(235, 254, 255, .18); }
.stats dt { font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats > div:first-child dt, .stats .is-word dt { color: var(--color-phosphorus); }
.stats .is-word dt { font-size: clamp(1.45rem, 2.2vw, 2.05rem); line-height: 1.12; white-space: normal; }
.stats dd { font-size: .9rem; line-height: 1.35; color: var(--on-dark-2); }

/* ============ Sections ============ */
.sec { position: relative; padding-block: clamp(5rem, 9vw, 7.5rem); }
.sec--soft { background: linear-gradient(180deg, transparent, var(--soft) 12%, var(--soft) 88%, transparent); }
.sec__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec__note { margin-top: 1.2rem; }

/* The challenge */
.chal { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.chal__row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem 4rem; align-items: center; padding-block: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line-2); }
.chal__t { font-family: var(--f-display); font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.18; letter-spacing: -.01em; color: var(--fg); text-wrap: pretty; }
.snip { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: .9rem; border-radius: 1.2rem; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: .86rem; overflow: hidden; }
.snip img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; flex: none; }
.snip__bg { display: flex; flex-direction: column; gap: .4rem; filter: blur(2.5px); opacity: .5; }
.snip__bg span { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: .7rem; background: var(--color-red-50); box-shadow: inset 3px 0 0 var(--color-red-400); }
.snip__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; padding: 0 2rem; }
.snip__lock svg { width: 2.4rem; height: 2.4rem; padding: .62rem; box-sizing: border-box; border-radius: 50%; background: #fff; box-shadow: var(--shadow); fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; }
.snip__c { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem .7rem; border-radius: .7rem; background: var(--panel); }
.snip--lang { gap: .7rem; }
.lang__k { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.lang { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.lang span { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .7rem .7rem .7rem .2rem; background: var(--panel); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang span[dir="rtl"] { border-radius: .7rem .7rem .2rem .7rem; }
.lang em { flex: none; font-style: normal; font-size: .58rem; font-weight: 700; padding: .14rem .32rem; border-radius: .3rem; background: var(--dark); color: var(--on-dark); }
.lang__voices { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .55rem; border-top: 1px dashed var(--line-2); }
.v, .v__more { font-size: .7rem; font-weight: 600; padding: .28rem .6rem; border-radius: var(--radius-pill); }
.v--1 { background: #FCE7FA; color: #8A2A84; } .v--2 { background: var(--color-blue-100); color: var(--color-blue-800); } .v--3 { background: var(--color-green-100); color: var(--color-green-900); }
.v__more { color: var(--faint); border: 1px dashed var(--line-2); }

/* What Stanify did */
.pillars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.pc { display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem 1rem 1.3rem; border-radius: 1.3rem; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.pc p { font-size: .98rem; color: var(--muted); }
.pc__vis { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .55rem; min-height: 7.4rem; padding: .8rem; border-radius: .9rem; background: var(--panel); font-size: .8rem; line-height: 1.3; }
.mini { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .6rem; background: #fff; }
.mini img { width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; filter: grayscale(1) opacity(.5); }
.mini--hidden span { filter: blur(3px); opacity: .55; }
.bub { padding: .5rem .7rem; border-radius: .8rem .8rem .25rem .8rem; background: var(--hi); }
.bub u { text-decoration-color: var(--color-green-700); text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 600; }
.prod { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem .4rem .4rem; border-radius: .7rem; background: #fff; }
.prod img { width: 2.4rem; height: 2.4rem; object-fit: contain; flex: none; }
.prod span { display: flex; flex-direction: column; color: var(--color-blue-700); }
.prod b { color: var(--fg); font-weight: 600; }
.pc__vis--sort { flex-direction: row; flex-wrap: wrap; align-content: center; }
.k { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .28rem .5rem; border-radius: var(--radius-pill); }
.k--q { background: var(--color-blue-100); color: var(--color-blue-800); }
.k--p { background: #FCE7FA; color: #8A2A84; }
.k--i { background: var(--color-green-100); color: var(--color-green-900); }
.kpi__k { font-weight: 650; }
.months { display: grid; grid-template-columns: repeat(8, 1fr); gap: .25rem; width: 100%; }
.months i { height: .9rem; border-radius: .25rem; background: var(--color-green-500); }
.kpi__m { font-size: .72rem; color: var(--faint); }

/* ============ THE TURNING POINT (dark band) ============ */
.turn { position: relative; overflow: clip; padding-block: clamp(5rem, 10vw, 8rem); background: var(--dark); color: var(--on-dark); }
.turn__halo { position: absolute; right: -18%; top: 50%; width: min(1000px, 110vw); max-width: none; transform: translateY(-50%); opacity: .32; mix-blend-mode: screen; pointer-events: none; }
.turn__grid { position: relative; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 3rem clamp(2rem, 4vw, 4rem); align-items: center; }
.turn__copy { display: flex; flex-direction: column; gap: 1.3rem; }
.eyebrow--dark { color: var(--on-dark-2); }
.turn__p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--on-dark-2); max-width: 32rem; }
.turn__p strong { color: var(--on-dark); }
.turn__data { display: flex; flex-direction: column; gap: 1.7rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 1.6rem; background: rgba(235, 254, 255, .05); border: 1px solid rgba(235, 254, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mode { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; color: var(--on-dark-2); }
.mode span { padding: .4rem .85rem; border-radius: var(--radius-pill); border: 1px solid rgba(235, 254, 255, .2); transition: background-color .5s, color .5s, border-color .5s; }
.mode .mode__auto { background: var(--color-phosphorus); color: var(--dark); border-color: var(--color-phosphorus); }
.big__k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.big__row { display: flex; align-items: baseline; gap: 1rem; margin-block: .4rem .9rem; font-family: var(--f-display); }
.big__from { font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--on-dark-2); }
.big__arrow { font-size: 2rem; color: var(--on-dark-2); }
.big__to { font-weight: 400; font-size: clamp(4.2rem, 8vw, 7rem); line-height: .85; letter-spacing: -.04em; color: var(--color-phosphorus); font-variant-numeric: tabular-nums; }
.track { position: relative; height: .9rem; border-radius: var(--radius-pill); background: rgba(235, 254, 255, .1); overflow: hidden; }
.track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.track__now { width: 62%; background: linear-gradient(90deg, var(--color-green-500), var(--color-phosphorus)); }
.track__was { width: 9%; background: rgba(235, 254, 255, .55); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(235, 254, 255, .14); }
.cell { display: flex; flex-direction: column; gap: .7rem; margin: 0; min-width: 0; }
.cell__top { display: flex; flex-direction: column; gap: .3rem; }
.cell__fig { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1; letter-spacing: -.02em; color: var(--on-dark); }
.cell__fig small { font-family: var(--f-body); font-size: .85rem; letter-spacing: 0; color: var(--on-dark-2); }
/* line chart */
.line { width: 100%; height: auto; overflow: visible; padding-left: 1.4rem; box-sizing: border-box; }
.line__grid line { stroke: rgba(235, 254, 255, .1); stroke-width: 1; }
.line__y text { fill: var(--on-dark-2); font: 600 10px var(--f-body); text-anchor: end; }
.line__area { fill: rgba(147, 210, 235, .14); }
.line__path { fill: none; stroke: var(--color-blue-200); stroke-width: 3; stroke-linecap: round; }
.line__end { fill: var(--color-phosphorus); stroke: var(--dark); stroke-width: 2; }
.line__x { display: flex; justify-content: space-between; padding-left: 1.4rem; font-size: .7rem; color: var(--on-dark-2); }
/* reviewed drafts */
.drafts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.dr { display: flex; flex-direction: column; gap: .25rem; padding: .45rem .5rem; border-radius: .55rem .55rem .55rem .15rem; background: rgba(235, 254, 255, .07); border: 1px solid rgba(235, 254, 255, .1); }
.dr > i { height: .28rem; border-radius: 1px; background: rgba(235, 254, 255, .28); }
.dr > i + i { width: 62%; }
.dr b { margin-top: .1rem; font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-phosphorus); }
.dr b::before { content: "✓ "; }
.dr--ed { grid-column: 1 / -1; background: rgba(246, 195, 68, .1); border-color: rgba(246, 195, 68, .45); }
.dr__t { font-size: .8rem; line-height: 1.3; color: var(--on-dark); }
.dr__t del { color: var(--color-red-300, #F2A7A1); text-decoration-thickness: 2px; }
.dr__t ins { text-decoration: none; padding: 0 .2rem; border-radius: .2rem; background: rgba(246, 195, 68, .3); color: #FFE6A6; }
.dr--ed b { color: #F6C344; }
.dr--ed b::before { content: "✎ "; }
.turn__note { font-size: .7rem; color: var(--on-dark-2); opacity: .7; }

/* Build-in for the band */
html.js .turn__data .track__now { transition: width 1.6s var(--ease) .5s; }
html.js .turn__data.is-pre .track__now { width: 9%; }
html.js .turn__data.is-pre .mode__auto { background: transparent; color: var(--on-dark-2); border-color: rgba(235, 254, 255, .2); }
html.js .turn__data .line__path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) 1.2s; }
html.js .turn__data.is-pre .line__path { stroke-dashoffset: 1; }
html.js .turn__data .line__area, html.js .turn__data .line__end { transition: opacity .6s 2.6s; }
html.js .turn__data.is-pre .line__area, html.js .turn__data.is-pre .line__end { opacity: 0; }
html.js .turn__data .dr { transition: opacity .35s, transform .45s var(--pop); }
html.js .turn__data.is-pre .dr { opacity: 0; transform: translateY(6px) scale(.94); }

/* ============ RESULTS (bento) ============ */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.rc { grid-column: span 3; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.3rem, 2.2vw, 1.8rem); border-radius: 1.4rem; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); min-width: 0; }
.rc--protect { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.6rem; align-items: center; }
.rc--sent { grid-column: span 2; }
.rc--perf { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; }
.rc__main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rc__k { display: inline-flex; align-items: center; gap: .55rem; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rc__k::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-green-600); }
.rc__fig { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: .92; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rc__fig small { font-family: var(--f-body); font-size: 1rem; letter-spacing: 0; color: var(--muted); }
.rc__fig--sm { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
.rc__fig--word { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.rc__arrow { color: var(--hi-big); }
.rc--protect .rc__fig { color: var(--hi-big); }
.rc__t { color: var(--muted); max-width: 36rem; }
/* protect: a live comment section with the abuse hidden */
.feedx { padding: .9rem; border-radius: 1.1rem; background: var(--panel); border: 1px solid var(--line); }
.feedx__head { display: flex; align-items: center; gap: .6rem; padding: 0 .2rem .7rem; font-size: .84rem; }
.feedx__on { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hi-t); }
.feedx__on i { width: 1.7rem; height: 1rem; border-radius: var(--radius-pill); background: var(--color-green-600); position: relative; }
.feedx__on i::after { content: ""; position: absolute; right: .14rem; top: .14rem; width: .72rem; height: .72rem; border-radius: 50%; background: #fff; }
.feedx__n { margin-left: auto; font-size: .74rem; color: var(--muted); }
.feedx__n b { color: var(--color-red-600); font-variant-numeric: tabular-nums; }
.feedx ul { display: flex; flex-direction: column; gap: .35rem; }
.feedx li { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .45rem .6rem; border-radius: .7rem; background: #fff; font-size: .82rem; line-height: 1.3; transition: background-color .5s, box-shadow .5s; }
.feedx li img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; transition: filter .5s; }
.feedx li > span { min-width: 0; transition: filter .5s, opacity .5s; }
.feedx li b { display: block; font-size: .64rem; font-weight: 600; color: var(--faint); }
.feedx li em { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .22rem .45rem; border-radius: var(--radius-pill); background: var(--color-red-500); color: #fff; transition: opacity .3s, transform .4s var(--pop); }
.feedx li.bad { background: var(--color-gray-50, #F4F6F8); box-shadow: inset 3px 0 0 var(--color-red-500); }
.feedx li.bad > span { filter: blur(3.5px); opacity: .55; }
.feedx li.bad img { filter: grayscale(1) opacity(.5); }
.feedx li.bad b { text-decoration: line-through; }
.feedx__foot { padding: .6rem .2rem 0; font-size: .66rem; color: var(--faint); }
html.js .rc.is-pre .feedx li.bad { background: var(--color-red-50); box-shadow: inset 3px 0 0 var(--color-red-400); }
html.js .rc.is-pre .feedx li.bad > span { filter: none; opacity: 1; }
html.js .rc.is-pre .feedx li.bad img { filter: none; }
html.js .rc.is-pre .feedx li.bad b { text-decoration: none; }
html.js .rc.is-pre .feedx li.bad em { opacity: 0; transform: scale(.6); }
/* sentiment: before and after rows */
.ratio { display: flex; flex-direction: column; gap: .6rem; margin-top: auto; }
.ratio__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.ratio__row span { font-size: .78rem; font-weight: 600; color: var(--faint); }
.ratio__row p { display: flex; gap: .3rem; }
.ratio i { width: 1.7rem; height: 1.35rem; border-radius: .5rem .5rem .5rem .14rem; background: var(--color-green-500); transition: transform .45s var(--pop), opacity .3s; }
.ratio i.neg { background: var(--color-red-400); }
.ratio__row:first-child i:not(.neg) { background: var(--color-green-200); }
html.js .rc.is-pre .ratio__row:last-child i { transform: scale(.3); opacity: 0; }
/* bar charts */
.bars { margin: auto 0 0; display: flex; flex-direction: column; gap: .5rem; }
.bars figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.bars__plot { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; height: 11rem; padding-inline: .8rem; border-bottom: 1px solid var(--line-2); }
.bars__grid { position: absolute; inset: 0 0 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.bars__grid i { height: 1px; background: var(--line); }
.bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .35rem; }
.bar > i { width: 100%; max-width: 6.5rem; height: calc(var(--h) * 8.4rem); border-radius: .6rem .6rem 0 0; background: var(--color-blue-150, #BCE7F6); transform-origin: bottom; transition: transform 1.1s var(--ease); }
.bar--hi > i { background: linear-gradient(180deg, var(--color-phosphorus), var(--color-green-500)); transition-delay: .25s; }
.bar b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; color: var(--muted); white-space: nowrap; }
.bar--hi b { color: var(--hi-big); font-size: 1.4rem; }
.bar span { position: absolute; top: calc(100% + .5rem); font-size: .74rem; font-weight: 600; color: var(--faint); text-align: center; line-height: 1.25; }
.bars { padding-bottom: 2.4rem; }
html.js .rc.is-pre .bar > i { transform: scaleY(0); }
/* performance slope chart */
.perf__figs { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; }
.perf__figs div { display: flex; flex-direction: column; gap: .35rem; }
.perf__figs span { font-size: .9rem; color: var(--muted); }
.slope { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.slope svg { width: 100%; height: auto; overflow: visible; }
.slope__grid line { stroke: var(--line); }
.slope__y text { fill: var(--faint); font: 600 11px var(--f-body); text-anchor: end; }
.slope__l { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.slope__l--a { stroke: var(--color-green-500); }
.slope__l--b { stroke: var(--color-blue-500); transition-delay: .3s; }
.slope__d { fill: var(--fg); }
.slope__d--a { fill: var(--color-green-600); stroke: #fff; stroke-width: 3; }
.slope__d--b { fill: var(--color-blue-500); stroke: #fff; stroke-width: 3; }
.slope__t { font: 700 12.5px var(--f-body); }
.slope__t--a { fill: var(--hi-t); }
.slope__t--b { fill: var(--color-blue-700); }
.slope__x { fill: var(--faint); font: 600 12px var(--f-body); }
.slope__key { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .84rem; font-weight: 600; }
.slope__key span { display: inline-flex; align-items: center; gap: .45rem; }
.slope__key i { width: .9rem; height: .25rem; border-radius: 2px; }
.slope__key .ka { background: var(--color-green-500); } .slope__key .kb { background: var(--color-blue-500); }
.slope__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: var(--radius-pill); background: var(--color-green-100); color: var(--color-green-900); font-size: .8rem; font-weight: 600; }
.slope__tag i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-green-600); }
html.js .rc.is-pre .slope__l { stroke-dashoffset: 1; }
html.js .slope__d--a, html.js .slope__d--b, html.js .slope__t { transition: opacity .5s 1.3s; }
html.js .rc.is-pre .slope__d--a, html.js .rc.is-pre .slope__d--b, html.js .rc.is-pre .slope__t { opacity: 0; }

/* ============ INSIGHTS ============ */
.ins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ic { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(1.3rem, 2.2vw, 1.8rem); border-radius: 1.4rem; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); min-width: 0; }
.ic__vis { position: relative; width: 100%; height: 9.5rem; border-radius: 1rem; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: .9rem 1rem; box-sizing: border-box; }
.ic__fig { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 4.2vw, 3.8rem); line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ic__arrow { color: var(--hi-big); }
.ic p { color: var(--muted); max-width: 32rem; }
/* towns map */
.map { background-color: var(--panel); background-image: radial-gradient(rgba(18, 33, 49, .14) 1.2px, transparent 1.4px); background-size: 14px 14px; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 1.15rem; height: 1.15rem; margin: -1.15rem 0 0 -.575rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--color-red-500); box-shadow: 0 4px 10px -4px rgba(224, 104, 95, .8); transition: transform .5s var(--pop), opacity .3s; }
.pin::after { content: ""; position: absolute; inset: .33rem; border-radius: 50%; background: #fff; }
.map__tip { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -3.3rem); white-space: nowrap; padding: .3rem .55rem; border-radius: .6rem .6rem .6rem .15rem; background: #fff; box-shadow: var(--shadow); font-size: .72rem; transition: opacity .4s 1s; }
html.js .ic.is-pre .pin { transform: rotate(-45deg) scale(0); opacity: 0; }
html.js .ic.is-pre .map__tip { opacity: 0; }
/* waffles */
.waffle { display: grid; gap: 3px; }
.waffle--people { grid-template-columns: repeat(28, 1fr); }
.waffle--noise { grid-template-columns: repeat(25, 1fr); }
.waffle i { aspect-ratio: 1; border-radius: 50%; background: var(--color-blue-200); transition: background-color .3s, transform .4s var(--pop); }
.waffle--noise i { border-radius: 2px; background: #C9D2D8; }
.waffle i.hi { background: var(--color-green-500); }
html.js .ic.is-pre .waffle i { transform: scale(0); }
.waffle__key { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .7rem; color: var(--muted); }
.waffle__key i { width: .55rem; height: .55rem; border-radius: 50%; margin-left: .3rem; }
.waffle__key i:first-child { margin-left: 0; }
.k1 { background: var(--color-blue-200); } .k2 { background: var(--color-green-500); } .k3 { background: #C9D2D8; border-radius: 2px !important; }
/* ranking */
.rank svg { width: 100%; height: 100%; }
.rank__h { fill: var(--faint); font: 700 9.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.rank__l { fill: none; stroke: rgba(18, 33, 49, .14); stroke-width: 3; }
.rank__l--hi { stroke: var(--color-red-500); stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) .3s; }
html.js .ic.is-pre .rank__l--hi { stroke-dashoffset: 1; }
.rank__n text { fill: var(--muted); font: 700 11px var(--f-body); }
.rank__d { fill: #C9D2D8; }
.rank__d--hi { fill: var(--color-red-500); }
.rank__last { fill: var(--color-red-600); font: 700 11px var(--f-body); }

/* ============ WHAT HAPPENED NEXT: two points ============ */
.next2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nc { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.3rem, 2.2vw, 1.8rem); border-radius: 1.4rem; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.nc__vis { position: relative; height: 13rem; border-radius: 1rem; overflow: hidden; background: var(--panel); }
.nc__fig { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.03em; }
.nc p { font-size: 1.1rem; color: var(--muted); max-width: 30rem; }
.markets { display: grid; place-items: center; }
.markets__halo { position: absolute; left: 50%; top: 50%; width: 15rem; transform: translate(-50%, -50%); opacity: .9; }
.mk { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; background: #fff; border: 2px solid var(--color-green-500); box-shadow: var(--shadow); font-family: var(--f-display); font-size: 1.3rem; transition: transform .55s var(--pop), opacity .35s; }
.mk--1 { --x: 50%; --y: 50%; width: 3.8rem; height: 3.8rem; margin: -1.9rem 0 0 -1.9rem; background: var(--color-phosphorus); }
.mk--2 { --x: 22%; --y: 30%; } .mk--3 { --x: 78%; --y: 32%; } .mk--4 { --x: 70%; --y: 78%; }
html.js .markets.is-pre .mk:not(.mk--1) { transform: scale(0); opacity: 0; }
.train { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.slide { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem 1.6rem; border-radius: .9rem; background: #fff; box-shadow: var(--shadow); border-top: 4px solid var(--color-green-500); }
.slide img { height: 1rem; width: auto; }
.slide b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; }
.slide span { font-size: .72rem; color: var(--faint); }
.seats { display: flex; }
.seats img { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--panel); transition: transform .45s var(--pop), opacity .3s; }
.seats img + img { margin-left: -.45rem; }
html.js .nc.is-pre .seats img { transform: translateY(10px); opacity: 0; }

/* ============ CLOSE + FOOTER ============ */
.close { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; max-width: 100%; padding-block: 2rem; overflow: clip; text-align: center; box-sizing: border-box; }
.close__fx { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1020px, 118vw); max-width: none; aspect-ratio: 1000 / 720; object-fit: cover; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
.close__inner { position: relative; z-index: 1; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.close__h { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: .98; letter-spacing: -.03em; text-wrap: balance; max-width: 100%; }
.close__lead { max-width: min(32rem, 100%); font-size: 1.12rem; color: var(--muted); }
.close .emailrow { width: 100%; max-width: min(30rem, 100%); box-sizing: border-box; }
.foot { padding-block: 3.5rem 2.5rem; border-top: 1px solid var(--line); background: var(--soft); }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.foot__sign { font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.03em; }
.foot__trust { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9rem; color: var(--muted); }
.foot__trust li { display: flex; align-items: center; gap: .5rem; }
.foot__trust li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-green-600); }
.foot__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; padding-block: 2.5rem; font-size: .9rem; color: var(--muted); align-items: start; }
.foot__brand-block { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.foot__brand { display: inline-block; width: fit-content; }
.foot__brand img { display: block; }
.foot__social { display: flex; align-items: center; gap: 1rem; }
.foot__social a { display: inline-flex; opacity: .55; transition: opacity .25s var(--ease); }
.foot__social a:hover { opacity: 1; }
.foot__social img { display: block; }
.foot__group { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.foot__group ul { display: flex; flex-direction: column; gap: .5rem; }
.foot__h { margin: 0 0 .3rem; font-family: var(--f-body); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.foot__cols a { color: inherit; text-decoration: none; }
.foot__cols a:hover { color: var(--fg); }
.foot__cols a:focus-visible { outline: 2px solid var(--color-green-600); outline-offset: 3px; border-radius: 2px; }
.foot__c { padding-top: 0; font-size: .7rem; color: var(--faint); }
@media (max-width: 900px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__brand-block { grid-column: 1 / -1; }
  .close { padding-block: 3.2rem 2.8rem; isolation: isolate; }
  .close__inner { gap: 1rem; }
  .close__h { font-size: clamp(2rem, 8.2vw, 2.85rem); line-height: 1.05; }
  .close__lead { font-size: 1rem; }
  .close .emailrow input { flex: 1 1 auto; min-width: 0; }
  .close .emailrow .btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
}
@media (max-width: 560px) {
  .close { padding-block: 2.6rem 2.2rem; }
  .close__h { font-size: clamp(1.85rem, 8.8vw, 2.35rem); }
  .close__fx { width: min(1020px, 135vw); }
  .close .emailrow { flex-direction: column; }
  .close .emailrow .btn { width: 100%; justify-content: center; }
}



/* ============ ROUND 3 ============ */
/* Protect: no pull figure; "half" set large inside the sentence */
.rc__t--lead { font-size: 1.1rem; line-height: 1.6; }
.half { display: inline-block; font-family: var(--f-display); font-weight: 400; font-size: 2.6em; line-height: .8; letter-spacing: -.03em; color: var(--hi-big); vertical-align: -.12em; margin-right: .05em; }

/* Engage + Convert: one bar per month */
.mbars { margin: auto 0 0; display: flex; flex-direction: column; gap: .6rem; }
.mbars figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.mbars__plot { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) 1.4rem repeat(2, minmax(0, 1fr)); gap: .45rem; align-items: end; height: 10rem; padding-bottom: .1rem; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(to top, transparent 0, transparent calc(2.5rem - 1px), var(--line) calc(2.5rem - 1px), var(--line) 2.5rem); }
.mb { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.mb > i { display: block; height: calc(var(--v) / var(--max) * 100%); border-radius: .4rem .4rem 0 0; background: var(--color-blue-150, #BCE7F6); transform-origin: bottom; transition: transform .9s var(--ease); }
.mb--hi > i { background: linear-gradient(180deg, var(--color-phosphorus), var(--color-green-500)); }
.mb span { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; text-align: center; font-size: .66rem; font-weight: 600; color: var(--faint); }
.mbars__key { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; font-size: .76rem; font-weight: 600; color: var(--faint); }
.mbars__key .hi { color: var(--hi-t); }
html.js .rc.is-pre .mb > i { transform: scaleY(0); }

/* Performance: two matching stats, then the paragraph; Jan–Aug chart on the right */
.pstats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ps { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--panel); border: 1px solid var(--line); }
.ps__k { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.ps__k i { width: .9rem; height: .25rem; border-radius: 2px; }
.ps--a .ps__k i { background: var(--color-green-500); } .ps--b .ps__k i { background: var(--color-blue-500); }
.ps__fig { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; }
.ps--a .ps__fig { color: var(--hi-big); }
.slope__target { stroke: var(--color-green-700); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .55; }
.slope__tt { fill: var(--hi-t); font: 700 10.5px var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.slope__d { stroke: #fff; stroke-width: 2; }
.slope__note { font-size: .72rem; color: var(--faint); }
.slope__x { font-size: 11px; }

/* Today: markets fan out from the first one */
.markets { display: block; }
.mk__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk__l { fill: none; stroke: var(--color-green-500); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease); }
.mk { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: #fff; border: 2px solid var(--color-green-500); box-shadow: var(--shadow); font-family: var(--f-display); font-size: 1.25rem; transition: transform .55s var(--pop), opacity .3s; }
.mk b { font-weight: 400; position: relative; z-index: 1; }
.mk--1 { --x: 50%; --y: 52%; width: 3.8rem; height: 3.8rem; margin: -1.9rem 0 0 -1.9rem; background: var(--color-phosphorus); }
.mk--1 em { position: absolute; top: calc(100% + .35rem); white-space: nowrap; font: normal 600 .66rem var(--f-body); color: var(--muted); }
.mk--2 { --x: 13%; --y: 26%; } .mk--3 { --x: 87%; --y: 24%; } .mk--4 { --x: 80%; --y: 78%; }
.markets { background-color: var(--panel); background-image: radial-gradient(rgba(18, 33, 49, .13) 1.2px, transparent 1.4px); background-size: 14px 14px; }
.mk__ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--color-green-500); opacity: 0; }
.mk__count { position: absolute; left: 1rem; bottom: .8rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.mk__count b { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--hi-big); margin-left: .25rem; }
html.js .markets.is-pre .mk__l { stroke-dashoffset: 1; }
html.js .markets.is-pre .mk:not(.mk--1) { transform: scale(0); opacity: 0; }
html.js .markets.is-go .mk__ring { animation: ring 1.1s var(--ease) both; animation-delay: inherit; }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }

/* Training: each person has completed it */
.seat { position: relative; display: block; }
.seat + .seat { margin-left: -.45rem; }
.seats img + img { margin-left: 0; }
.seat img { display: block; }
.seat i { position: absolute; right: -.15rem; bottom: -.15rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--color-blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 0 2px #fff; transition: transform .4s var(--pop); }
html.js .nc.is-pre .seat i { transform: scale(0); }
@media (max-width: 560px) { .pstats { grid-template-columns: minmax(0, 1fr); } .mbars__plot { gap: .3rem; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars .pc:last-child { grid-column: 1 / -1; }
  .turn__grid { grid-template-columns: minmax(0, 1fr); }
  .rc--protect, .rc--perf { grid-column: 1 / -1; }
  .rc--sent { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 34rem; width: 100%; justify-self: center; }
  .chal__row { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .rc { grid-column: 1 / -1; }
  .rc--protect, .rc--perf { grid-template-columns: minmax(0, 1fr); }
  .ins, .next2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .lang { grid-template-columns: minmax(0, 1fr); }
  .waffle--people { grid-template-columns: repeat(22, 1fr); }
  .ic__vis { height: 10.5rem; }
  .emailrow { flex-direction: column; border-radius: 1.3rem; }
  .emailrow input { min-height: 2.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Engage + Convert: Stanify's first two months are a new count, not months 7 and 8 */
.mbars__start { position: relative; align-self: stretch; z-index: 1; }
.mbars__start::before { content: ""; position: absolute; left: 50%; top: -.4rem; bottom: -1.9rem; border-left: 1.5px dashed var(--color-green-600); }
.mbars__start em { position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); white-space: nowrap; font: normal 700 .6rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--hi-t); background: #fff; padding: 0 .3rem; }
.mb span { white-space: nowrap; font-size: .6rem; }
.mbars__plot { margin-top: 1.4rem; }
@media (max-width: 560px) { .mb span { font-size: .52rem; letter-spacing: -.01em; } .mbars__plot { grid-template-columns: repeat(6, minmax(0, 1fr)) 1rem repeat(2, minmax(0, 1fr)); } }