/* ==========================================================================
   FanCart — site styles
   One stylesheet, no build step. Sections follow the order of the pages:
   tokens, base, layout, controls, header, hero, one-page sections, newsroom, footer.
   ========================================================================== */

:root {
  /* Brand */
  --red: #F94539;          /* FanCart red: accents, large type, graphics */
  --red-600: #DE3428;      /* button fill: white label passes WCAG AA */
  --red-700: #C42A1F;      /* hover, small red text on light backgrounds */
  --red-tint: #FFF0EE;
  --ink: #0E0E10;
  --ink-2: #151518;
  --ink-3: #1D1D21;
  --ink-4: #2A2A30;
  --near-black: #1A1A1A;
  --charcoal: #2A2A2A;
  --muted: #6B6B6B;
  --muted-on-dark: #A1A1AA;
  --border: #E5E7EB;
  --line-dark: rgba(255, 255, 255, .1);
  --off-white: #FAFAFA;
  --sand: #F4F3F1;
  --white: #FFFFFF;
  --pass: #16A34A;

  /* Type */
  --font-display: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --pill: 999px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-lift: 0 30px 60px -30px rgba(14, 14, 16, .28), 0 12px 24px -12px rgba(14, 14, 16, .12);

  /* Rhythm */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 8vw, 112px);   /* every section's top and bottom padding */
  --head-gap: clamp(32px, 4vw, 48px);     /* section heading to its content */
  --card-gap: clamp(16px, 1.8vw, 24px);   /* between cards in a row */
  --card-pad: clamp(22px, 2.2vw, 28px);   /* inside an info card */
  --news-overlap: clamp(168px, 14vw, 190px); /* how far the news cards hang over the hero's bottom edge: about half a card */
  --news-gap: clamp(40px, 4vw, 64px);        /* hero content to the news cards */
  --header-h: 72px;
  --ease: cubic-bezier(.2, .75, .2, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--near-black); margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--red); color: #fff; }
.page { overflow-x: clip; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 12px 18px; border-radius: var(--pill); background: #fff; color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(880px + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }
.section--sand { background: var(--sand); }
.section--off { background: var(--off-white); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead { color: var(--muted-on-dark); }
.section--grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; pointer-events: none; mix-blend-mode: overlay; }

.section-head { max-width: 760px; margin-bottom: var(--head-gap); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head .h2 { margin: 16px 0 16px; }
.section-head .lead { margin: 0; }

/* Section opener: heading on the left, lead on the right */
.intro-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.intro-split .h2 { margin-top: 18px; }
.intro-split .lead { margin: 0; }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .65em; font-family: var(--font-display); font-weight: 700; font-size: .78rem; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--red-700); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(249, 69, 57, .18); }
.section--dark .eyebrow, .hero .eyebrow { color: var(--red); }
/* Type scale (desktop max): display 72 · h1 64 · h2 48 · h3 28 · lead 20 · body 16 · eyebrow 12 */
.h-display { font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.02em; font-weight: 800; }
.h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
.h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; font-weight: 800; }
.lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: var(--muted); }
.text-red { color: var(--red); }

/* ---------- Icons ---------- */
.i-arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
/* The icon image is set inline (mask-image) so its URL resolves against the page */
.mask-icon { display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---------- Buttons ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: var(--h); padding: 0 1.55rem; border-radius: var(--pill);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; line-height: 1;
  white-space: nowrap; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:hover .i-arrow, .link-arrow:hover .i-arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--sm { --h: 42px; padding: 0 1.15rem; font-size: .94rem; }
.btn--lg { --h: 60px; padding: 0 2rem; font-size: 1.06rem; }
.btn--primary { background: var(--red-600); color: #fff; box-shadow: 0 14px 30px -14px rgba(249, 69, 57, .85); }
.btn--primary:hover { background: var(--red-700); transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sand); }
.btn--outline { border-color: rgba(14, 14, 16, .18); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink); }
.btn--outline-light { border-color: rgba(255, 255, 255, .28); color: #fff; background: transparent; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn.is-loading { opacity: .7; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 700; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease); padding-bottom: 2px; }
.link-arrow:hover { background-size: 100% 1.5px; }
.section--dark .link-arrow { color: #fff; }
.link-arrow--red { color: var(--red-700); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Pills and chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--pill); font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .02em; background: var(--red-tint); color: var(--red-700); white-space: nowrap; }
.pill--dark { background: rgba(255, 255, 255, .1); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--pill); border: 1.5px solid var(--border); background: #fff; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink); transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__count { font-size: .76rem; opacity: .6; }
.chip--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.chip--dark:hover { border-color: #fff; }
.chip--dark.is-active, .chip--dark[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- Announcement bar ---------- */
.announce { position: relative; z-index: 60; background: var(--red-600); color: #fff; font-size: .88rem; }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding-right: 48px; position: relative; }
.announce__tag { flex: none; font-family: var(--font-display); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--pill); background: rgba(14, 14, 16, .22); }
.announce__link { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.announce__close { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: .85; }
.announce__close:hover { background: rgba(14, 14, 16, .2); opacity: 1; }
.announce[hidden] { display: none; }

/* ---------- Header ---------- */
/* Solid black at the top of the page; once scrolled it turns to frosted glass with a hairline */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--ink); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); color: #fff; border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line-dark); background: rgba(14, 14, 16, .9); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.nav a { position: relative; padding: 10px 12px; border-radius: var(--pill); font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: rgba(255, 255, 255, .78); white-space: nowrap; transition: color .2s, background-color .2s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav a[aria-current="page"], .nav a.is-active { color: #fff; }
.nav a[aria-current="page"]::after, .nav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); translate: -50% 0; }
.site-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-quiet { font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: rgba(255, 255, 255, .78); padding: 10px 12px; border-radius: var(--pill); white-space: nowrap; }
.nav-quiet:hover { color: #fff; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); position: relative; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle span:nth-child(1) { top: 17px; }
.menu-toggle span:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--ink); color: #fff; padding: 28px var(--gutter) 40px; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu__links { display: flex; flex-direction: column; }
.mobile-menu__links a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line-dark); font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -.01em; }
.mobile-menu__links a .i-arrow { width: 22px; height: 22px; color: var(--red); }
.mobile-menu__cta { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.mobile-menu__cta .btn { width: 100%; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: clip; isolation: isolate; }
.hero--home .hero__grid { padding-top: clamp(56px, 7vw, 96px); padding-bottom: calc(var(--news-gap) + var(--news-overlap)); } /* content height plus room for the news cards that hang off the bottom: no fixed viewport floor */
.hero h1 { color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 60% at 76% 46%, rgba(249, 69, 57, .42), transparent 70%),
    radial-gradient(35% 45% at 4% 105%, rgba(249, 69, 57, .16), transparent 70%),
    repeating-radial-gradient(circle at 76% 118%, transparent 0 52px, rgba(255, 255, 255, .05) 52px 53.5px);
}
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(24px, 3vw, 44px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero__copy { position: relative; z-index: 2; }
.hero--home .hero__copy { align-self: start; } /* the copy leads from the top of the row; the photo beside it stays centred */
@media (min-width: 981px) { .hero--home .hero__copy { margin-top: -40px; } } /* two columns: the copy starts above the photo, 56px under the header */
.hero__copy .h-display { margin: 24px 0 24px; }
.hero__lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 34em; margin-bottom: 12px; }
.hero__question { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1.5vw, 1.375rem); color: var(--red); margin-bottom: 0; letter-spacing: -.01em; }
.hero__alt { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .95rem; }
.hero__alt a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--font-display); font-weight: 700; }
.hero__alt a .i-arrow { color: var(--red); }
.hero--page .hero__grid { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero--page .h1 { margin: 22px 0 22px; }
.hero--center .hero__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero--center .hero__lead { margin-inline: auto; }

.proof-chip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: var(--pill); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; line-height: 1.35; color: rgba(255, 255, 255, .86); transition: background-color .2s, border-color .2s; }
.proof-chip:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24); }
.avatars { display: flex; flex: none; }
.avatars img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); filter: grayscale(1); }
.avatars img + img { margin-left: -9px; }

/* Hero art: owned press photography with AI Precision Tags on the products */
.tagged { margin: 0; }
.tagged__art { position: relative; isolation: isolate; width: 116%; margin-left: -2%; }
.tagged__art::before { content: ""; position: absolute; inset: 6% 4% -2%; z-index: -1; border-radius: 50%; background: radial-gradient(50% 50% at 50% 55%, rgba(249, 69, 57, .55), transparent 70%); filter: blur(12px); }
.tagged__photo { position: relative; }
.tagged__photo > img { width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.tagged figcaption { margin-top: 14px; text-align: center; font-size: .86rem; color: var(--muted-on-dark); }
.hotspot { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, .45); }
.hotspot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #fff; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
.tag { position: absolute; z-index: 4; left: var(--x); top: var(--y); display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(20, 20, 24, .72); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: .84rem; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7); }
.tag small { font-family: var(--font-display); font-weight: 800; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.tag--left { translate: calc(-100% - 26px) -50%; }
.tag--right { translate: 26px -50%; }
.tag--left::after, .tag--right::after { content: ""; position: absolute; top: 50%; width: 18px; height: 1.5px; background: rgba(255, 255, 255, .75); }
.tag--left::after { right: -20px; }
.tag--right::after { left: -20px; }
.tag b { font-weight: 600; }
/* Right-hand labels sit near the screen edge on laptops: let the product name wrap */
.tag--right b { white-space: normal; max-width: 7.5em; }
.tag em { font-style: normal; font-size: .76rem; color: var(--muted-on-dark); }
.tag--note { left: -10%; top: -8px; }
.tag__chips { display: flex; gap: 6px; margin-top: 6px; }
.tag__chips i { padding: 3px 10px; border-radius: var(--pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-style: normal; font-weight: 600; font-size: .76rem; }

/* ---------- Email capture ---------- */
.capture { display: flex; align-items: center; gap: 6px; max-width: 520px; padding: 6px; border-radius: var(--pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .2s, box-shadow .2s; }
.capture:focus-within { border-color: rgba(249, 69, 57, .9); box-shadow: 0 0 0 4px rgba(249, 69, 57, .2); }
.capture input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; background: transparent; color: #fff; font-size: 1rem; outline: none; }
.capture input::placeholder { color: rgba(255, 255, 255, .55); }
.capture .btn { flex: none; }
.capture__note { margin: 12px 0 0 18px; font-size: .84rem; color: var(--muted-on-dark); }
.capture__error { margin: 10px 0 0 18px; font-size: .84rem; color: #FF9A90; }
.capture__error:empty { display: none; }
.capture-done { display: none; max-width: 540px; padding: 20px 22px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.capture-done p { margin: 0 0 14px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.capture-done p span { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--muted-on-dark); }
.capture-done .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.capture-done .chip { height: 36px; font-size: .86rem; }
.capture-wrap.is-done .capture, .capture-wrap.is-done .capture__note, .capture-wrap.is-done .capture__error { display: none; }
.capture-wrap.is-done .capture-done { display: block; animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Statement (words light up as it scrolls through) ---------- */
.statement { padding-block: clamp(96px, 12vw, 176px); }
.statement__text { margin-top: 26px; font-size: clamp(2.3rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); max-width: 14.5em; }
.js .statement__text .w { color: #D9D6D1; transition: color .35s var(--ease); }
.js .statement__text .w.is-lit { color: var(--ink); }
.js .statement__text .w.is-lit.is-key { color: var(--red); }

/* ---------- Audience cards ---------- */
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aud-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 460px; padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.aud-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.aud-card::before { content: ""; position: absolute; z-index: -1; right: -32%; top: -32%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 22px, var(--ring, rgba(255, 255, 255, .09)) 22px 23.5px); }
.aud-card--fans { background: var(--red-600); color: #fff; }
.aud-card--brands { background: var(--ink); color: #fff; }
.aud-card--talent { background: #fff; color: var(--charcoal); border: 1px solid var(--border); --ring: rgba(14, 14, 16, .06); }
.aud-card__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; }
.aud-card__icon .mask-icon { width: 36px; height: 36px; }
.aud-card--fans .aud-card__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.aud-card--brands .aud-card__icon { background: rgba(249, 69, 57, .16); color: var(--red); }
.aud-card--talent .aud-card__icon { background: var(--red-tint); color: var(--red-700); }
.aud-card h3 { margin-top: clamp(40px, 6vw, 96px); font-size: clamp(2rem, 3vw, 2.6rem); letter-spacing: -.02em; color: inherit; }
.aud-card--talent h3 { color: var(--ink); }
.aud-card p { margin: 0 0 6px; font-size: .97rem; }
.aud-card--fans p { color: rgba(255, 255, 255, .9); }
.aud-card--brands p { color: var(--muted-on-dark); }
.aud-card--talent p { color: var(--muted); }
.aud-card .link-arrow { margin-top: auto; color: inherit; align-self: flex-start; }
.aud-card--talent .link-arrow { color: var(--ink); }
.aud-card .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Audiences: one surface, three tabs and a sliding carousel (desktop) ---------- */
/* The headline, tabs and slides share one background. site.js sets data-on, and the background fades to the
   tone of the slide showing. All three tones are light: the hero above and Legends below are dark. */
.ways {
  --ways-bg: var(--sand);
  --ways-gap: clamp(24px, 3.4vw, 48px);
  --ways-fade: .6s var(--ease);
  position: relative;
  background: var(--ways-bg);
  transition: background-color var(--ways-fade);
}
.ways[data-on="brands"] { --ways-bg: var(--white); }
.ways[data-on="talent"] { --ways-bg: #FFF7F5; }
.ways__intro { padding-top: clamp(64px, 7vw, 104px); }
.ways__head { max-width: 760px; }
.ways__head .h2 { margin-top: 16px; color: var(--ink); }
.ways__head em { font-style: normal; color: var(--red); }
.ways__sub { margin: 16px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.ways__sub span { color: var(--muted); }
.ways__tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ways-gap); margin-top: clamp(32px, 3.6vw, 52px); }
.ways__tabs::before { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgba(14, 14, 16, .12); }
/* One red line on the rule under the tabs glides to the tab showing; site.js sets --ways-i */
.ways__tabs::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc((100% - 2 * var(--ways-gap)) / 3); height: 2px; border-radius: 2px; background: var(--red); box-shadow: 0 0 14px rgba(249, 69, 57, .45); translate: calc(var(--ways-i, 0) * (100% + var(--ways-gap))) 0; transition: translate var(--ways-fade); }
.ways__tab { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0 0 clamp(20px, 2vw, 28px); border: 0; background: none; text-align: left; cursor: pointer; }
.ways__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--radius-sm); }
.ways__tab-head { display: flex; align-items: center; gap: 12px; }
.ways__tab .aud-card__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(14, 14, 16, .06); color: var(--muted); transition: background-color var(--ways-fade), color var(--ways-fade); }
.ways__tab .aud-card__icon .mask-icon { width: 24px; height: 24px; }
.ways__tab-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); transition: color var(--ways-fade); }
.ways__tab-text { flex: 1; font-size: .92rem; line-height: 1.55; color: var(--muted); transition: color var(--ways-fade); }
.ways__tab-foot { font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--ink); transition: color var(--ways-fade); }
.ways__more, .ways__now { display: inline-flex; align-items: center; gap: .5em; }
.ways__more .i-arrow, .ways__now .i-arrow { width: 16px; height: 16px; }
.ways__more .i-arrow { transition: translate .3s var(--ease); }
.ways__now { display: none; }
.ways__now .i-arrow { rotate: 90deg; }
.ways__tab:hover .ways__tab-text { color: var(--charcoal); }
.ways__tab:hover .aud-card__icon { color: var(--ink); }
.ways__tab:hover .ways__more .i-arrow { translate: 4px 0; }
.ways__tab[aria-selected="true"] .aud-card__icon { background: rgba(249, 69, 57, .14); color: var(--red-700); }
.ways__tab[aria-selected="true"] .ways__tab-text { color: var(--charcoal); }
.ways__tab[aria-selected="true"] .ways__tab-foot { color: var(--red-700); }
.ways__tab[aria-selected="true"] .ways__more { display: none; }
.ways__tab[aria-selected="true"] .ways__now { display: inline-flex; }
.ways__stage { position: relative; }
.ways__mini { position: sticky; top: calc(var(--header-h) + 12px); z-index: 20; display: flex; justify-content: center; height: 0; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.ways__mini.is-on { opacity: 1; visibility: visible; }
.ways__mini-inner { display: inline-flex; gap: 4px; height: max-content; padding: 5px; border-radius: var(--pill); background: rgba(20, 20, 24, .86); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--line-dark), var(--shadow-lift); }
.ways__mini button { padding: 8px 18px; border: 0; border-radius: var(--pill); background: transparent; font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.2; color: rgba(255, 255, 255, .78); transition: background-color .25s var(--ease), color .25s var(--ease); }
.ways__mini button:hover { color: #fff; }
.ways__mini button[aria-pressed="true"] { background: var(--red-600); color: #fff; }
.ways__viewport { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; transition: height .55s var(--ease); }
.ways__viewport::-webkit-scrollbar { display: none; }
.ways__slide { flex: 0 0 100%; min-width: 0; align-self: flex-start; scroll-snap-align: start; scroll-snap-stop: always; transition: opacity .5s var(--ease); }
.ways__slide[inert] { opacity: 0; } /* slides crossfade as they move, so no hard edge passes across the page */
.ways__slide > .section { padding-block: clamp(48px, 5vw, 72px) clamp(72px, 8vw, 112px); min-height: calc(100svh - var(--header-h)); background: none; } /* each slide sits on the section's own background */
/* The Talent copy stays dark in the stacked section on tablets and phones. In the carousel it is light: site.js
   removes its dark classes, and these restyle what was drawn for a dark background. The agency panel keeps its own. */
.ways__slide .moneyflow li { background: #fff; border-color: var(--border); box-shadow: var(--shadow-card); }
.ways__slide .moneyflow li:last-child { background: var(--red-tint); border-color: rgba(249, 69, 57, .4); }
.ways__slide .moneyflow li:last-child .moneyflow__n { background: var(--red-600); color: #fff; }
.ways__slide .moneyflow p { color: var(--muted); }
.ways__slide .agency h3 { color: #fff; }
.ways__slide .agency .eyebrow { color: var(--red); }
/* Desktop gets the carousel in place of the audience cards and the stacked sections. Tablets, phones and
   desktop without JavaScript (the slides are copied by site.js) keep the stacked page. */
.ways { display: none; }
@media (min-width: 981px) {
  .js .ways { display: block; }
}

/* ---------- A new era of e-commerce ----------
   Abstract visuals only: the site describes the product without showing it. The bars are illustrative, with no figures. */
.newera { padding-block: var(--section-y); }
.newera .section-head { margin-bottom: var(--head-gap); }
/* Three equal media-top cards (the same anatomy as the newsroom cards): a 16:9 dark art strip, then title and copy. */
.newera__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.newera__panel { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.newera__art { flex: none; display: grid; place-items: center; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(70% 90% at 50% 110%, rgba(249, 69, 57, .32), transparent 70%),
    var(--ink); }
.newera__copy { padding: var(--card-pad); }
.newera__copy h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.newera__copy p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }

.newera__art { container-type: size; } /* so the kit can take its height from the strip */
.newera__kit { position: relative; height: 150px; aspect-ratio: 320 / 300; }
@supports (height: 1cqh) { .newera__kit { height: 70cqh; } }
.newera__kit svg { display: block; width: 100%; height: 100%; }
.newera__dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, var(--red) 3.5px); box-shadow: 0 0 0 6px rgba(249, 69, 57, .26); }
.newera__tag { position: absolute; display: block; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(26, 26, 26, .78); white-space: nowrap; transform: translateY(-50%); }
.newera__tag small { display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 700; font-size: .625rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: #FB6B61; }
.newera__tag b { display: block; font-weight: 500; font-size: .8125rem; line-height: 1.2; color: #fff; }
.newera__tag--a { right: calc(87.8% + 18px); top: 45.7%; }
.newera__tag--b { left: calc(87.8% + 18px); top: 45.7%; }
.newera__tag--c { left: calc(71.9% + 18px); top: 88.5%; }

/* The streams diagram (Brands and Talent into a hub, out to New revenue): card 2 until 10 Nov 2026, when the jigsaw (.newera__puzzle)
   replaced it. Not on a page; kept for a quick return. */
.newera__flow { display: grid; grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto; align-items: center; width: 100%; padding-inline: clamp(20px, 2.4vw, 32px); }
.newera__flow svg { display: block; width: 100%; height: 96px; }
.newera__flow svg:nth-of-type(2) { height: 2px; overflow: visible; }
.newera__nodes { display: grid; gap: 22px; }
.newera__nodes span, .newera__out { display: block; padding: 8px 14px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1.2; color: #fff; text-align: center; white-space: nowrap; }
.newera__out { border-color: var(--red-600); background: var(--red-600); color: #fff; }
.newera__hub { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #fff 0 7px, var(--red) 8px); box-shadow: 0 0 0 9px rgba(249, 69, 57, .22); }

.newera__chart { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; width: 100%; padding-inline: clamp(20px, 2.4vw, 32px); } /* stretch: the strip's place-items would otherwise shrink the bars to nothing */
.newera__legend { display: flex; justify-content: flex-end; gap: 16px; font-size: .8125rem; line-height: 1.2; color: var(--muted-on-dark); }
.newera__legend span { display: inline-flex; align-items: center; gap: 6px; }
.newera__legend i { width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.newera__legend span + span i { background: var(--red); }
.newera__bars { display: flex; align-items: flex-end; gap: clamp(6px, .9vw, 12px); height: 112px; }
.newera__bar { flex: 1; display: flex; flex-direction: column; gap: 3px; transform-origin: 50% 100%; }
.newera__bar i { display: block; min-height: 0; border-radius: 5px; background: rgba(255, 255, 255, .2); }
.newera__bar i:first-child { background: var(--red); }
.js .newera__bar { transform: scaleY(0); transition: transform .9s var(--ease) var(--d, 0ms); }
.js .is-in .newera__bar { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .newera__bar { transform: none; }
}
/* Tablets: one column, the strip on the left and the copy beside it (the Discovery and newsroom cards do the same). Phones stack again. */
@media (max-width: 980px) {
  .newera__grid { grid-template-columns: 1fr; }
  .newera__panel { flex-direction: row; }
  .newera__art { flex: 0 0 42%; aspect-ratio: 4 / 3; } /* at least 4:3; it stretches when the copy beside it is taller */
  .newera__copy { align-self: center; }
}
/* Tablets: the strip beside the copy is 250–380px wide, so each drawing is scaled down to sit inside it with room around it */
@media (min-width: 641px) and (max-width: 980px) {
  .newera__kit { height: min(52cqh, 42cqw); } /* the width bound keeps the labels off the strip's edges at 641px */
  .newera__tag { padding: 5px 8px; border-radius: 8px; }
  .newera__tag small { font-size: .5625rem; }
  .newera__tag b { font-size: .75rem; }
  .newera__tag--a { right: calc(87.8% + 12px); }
  .newera__tag--b { left: calc(87.8% + 12px); }
  .newera__tag--c { left: calc(71.9% + 12px); }
  .newera__flow { padding-inline: 16px; }
  .newera__flow svg { height: 64px; }
  .newera__nodes { gap: 12px; }
  .newera__nodes span, .newera__out { padding: 5px 9px; font-size: .75rem; }
  .newera__hub { width: 28px; height: 28px; box-shadow: 0 0 0 6px rgba(249, 69, 57, .22); }
  .newera__chart { gap: 10px; padding-inline: 28px; }
  .newera__legend { font-size: .75rem; }
  .newera__bars { height: 84px; gap: 6px; }
}
@media (max-width: 640px) {
  .newera__panel { flex-direction: column; }
  .newera__art { flex: none; aspect-ratio: 16 / 9; }
  .newera__nodes span, .newera__out { padding: 7px 11px; font-size: .875rem; }
  .newera__hub { width: 32px; height: 32px; box-shadow: 0 0 0 6px rgba(249, 69, 57, .22); }
}
@media (max-width: 359px) {
  .newera__tag--a { display: none; }
}
/* One sales total, then the same total broken down: what a brand usually sees on top, what FanCart adds beneath it. No figures:
   the segments are illustrative. Not on a page since 10 Nov 2026 (it was tried as card 3 of this section, under the heading
   "Performance you can see"); the rules are kept so it can come back. Markup, inside .newera__art.newera__insight:
   .newera__total > span "Sales" + i, then .newera__rows > div (span "Talent" | "Product" | "Moment" + b holding 3 or 4 i with inline flex values). */
.newera__insight { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 14px; width: 100%; padding-inline: clamp(24px, 2.8vw, 36px); }
.newera__total, .newera__rows > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 12px; }
.newera__total span, .newera__rows span { font-family: var(--font-display); font-size: .8125rem; line-height: 1.2; }
.newera__total span { font-weight: 600; color: #fff; }
.newera__rows span { color: var(--muted-on-dark); }
.newera__total i { display: block; height: 14px; border-radius: 5px; background: rgba(255, 255, 255, .24); }
.newera__rows { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .2); }
.newera__rows b { display: flex; gap: 3px; height: 10px; }
.newera__rows b i { display: block; border-radius: 3px; background: var(--red); }
.newera__rows b i:nth-child(2) { opacity: .7; }
.newera__rows b i:nth-child(3) { opacity: .45; }
.newera__rows b i:nth-child(4) { opacity: .28; }
@media (min-width: 641px) and (max-width: 980px) {
  .newera__insight { gap: 12px; padding-inline: 22px; }
  .newera__total, .newera__rows > div { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
  .newera__total span, .newera__rows span { font-size: .75rem; }
  .newera__rows { padding-top: 12px; }
}

/* The pieces (card 2 of #new-era): Fans, Brands and Talent as three jigsaw pieces of one circle around the FanCart
   mark, the talent piece in red. Neighbouring pieces share the same cut, so they meet exactly; each outline is an opaque colour so
   two outlines lying on one cut read as a single line. The pieces start apart and close up when the card scrolls in. */
.newera__puzzle svg { display: block; width: auto; height: 170px; aspect-ratio: 1; overflow: visible; }
@supports (height: 1cqh) { .newera__puzzle svg { height: 80cqh; } }
.newera__puzzle .pc path { fill: rgba(255, 255, 255, .08); stroke: #7A7A7A; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.newera__puzzle .pc--paid path { fill: #D62D22; stroke: #FB6B61; filter: drop-shadow(0 0 10px rgba(249, 69, 57, .55)); }
.newera__puzzle text { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: #fff; text-anchor: middle; }
.js .newera__puzzle .pc { transform: translate(var(--dx), var(--dy)); transition: transform 1.2s var(--ease) .15s; }
.js .is-in .newera__puzzle .pc { transform: none; }

/* ---------- The opportunity and contact form (#opportunity) ---------- */
#waitlist { scroll-margin-top: calc((var(--header-h) + 20px) * -1); } /* cancels the page scroll padding so the section lands flush with the top of the window */
.opp { padding-block: var(--section-y); background: radial-gradient(55% 60% at 88% 0%, rgba(249, 69, 57, .2), transparent 70%), var(--near-black); }
.opp__head .h2 { margin: 16px 0 0; color: #fff; }
.opp__head .lead { margin: 14px 0 0; color: var(--muted-on-dark); }
.opp__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--head-gap); }
.opp__card { padding: clamp(24px, 2.8vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .06); }
.opp__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: .8125rem; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--red-on-dark, #FB6B61); }
.opp__card h3 { margin: 12px 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.opp__card p { margin: 0; color: var(--muted-on-dark); font-size: 1rem; line-height: 1.6; }
.opp__card p + p { margin-top: 10px; }

.opp__contact { display: grid; grid-template-columns: auto minmax(0, 620px); justify-content: space-between; align-items: center; gap: 20px 48px; margin-top: 16px; padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.8vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line-dark); }
.opp__who p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; color: #fff; }
.opp__who p span { margin-left: 8px; font-weight: 400; font-size: .75em; color: var(--muted-on-dark); }
.opp__who a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-display); font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.opp__who a:hover { border-color: var(--red); }
.opp__who a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.opp__stay .form { gap: 8px; }
.opp__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 10px; align-items: start; }
.opp__stay .field { min-width: 0; gap: 4px; }
.opp__stay .input { height: 46px; background: rgba(255, 255, 255, .08); border-color: var(--line-dark); color: #fff; }
.opp__stay .input::placeholder { color: var(--muted-on-dark); }
.opp__stay .input:focus { border-color: #fff; box-shadow: 0 0 0 .5px #fff; }
.opp__stay .field__error { color: #FF9A90; }
.opp__stay .form .btn { height: 46px; min-height: 0; margin: 0; padding-block: 0; white-space: nowrap; }
.opp__stay .form__error { margin: 0; color: #FF9A90; }
.opp__stay .form__error:empty { display: none; }
.opp__stay .form__legal { margin: 0; text-align: left; color: var(--muted-on-dark); }
.opp__stay .form__legal a { color: #fff; }
.opp__stay .form-success { padding: 0; text-align: left; }
.opp__stay .form-success h3 { margin: 0 0 4px; color: #fff; }
.opp__stay .form-success p { margin: 0; color: var(--muted-on-dark); }
@media (max-width: 980px) {
  .opp__contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .opp__cards { grid-template-columns: 1fr; }
  .opp__who p span { display: block; margin: 4px 0 0; }
  .opp__fields { grid-template-columns: 1fr; }
  .opp__stay .btn { width: 100%; }
}

/* ---------- Five products ---------- */
.products { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.product { display: flex; flex-direction: column; min-height: 310px; padding: 26px 22px; border-radius: var(--radius-lg); background: var(--off-white); border: 1px solid var(--border); transition: background-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.product:hover { background: #fff; transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.product__num { font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .14em; color: var(--muted); }
.product__icon { width: 46px; height: 46px; margin: 18px 0 22px; border-radius: 13px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.product:nth-child(2) .product__icon { background: var(--red-600); }
.product__icon svg { width: 22px; height: 22px; }
.product h3 { font-size: 1.24rem; letter-spacing: -.01em; margin-bottom: 10px; }
.product p { flex: 1; margin: 0 0 18px; font-size: .92rem; color: var(--muted); }
.product__for { font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--red-700); }

/* ---------- Feature cards ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature, .era { padding: 30px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.section--dark .feature { background: var(--ink-2); border-color: var(--line-dark); box-shadow: none; }
.feature__icon, .era__icon { width: 46px; height: 46px; margin-bottom: 20px; border-radius: 14px; display: grid; place-items: center; background: var(--red-tint); color: var(--red-700); }
.section--dark .feature__icon { background: rgba(249, 69, 57, .14); color: var(--red); }
.era__icon { background: var(--ink); color: #fff; }
.feature__icon svg, .era__icon svg { width: 22px; height: 22px; }
.feature h3, .era h3 { font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: 10px; }
.era h3 { font-size: 1.5rem; }
.feature p, .era p { margin: 0; color: var(--muted); font-size: .97rem; }
.section--dark .feature p { color: var(--muted-on-dark); }

/* ---------- For Fans ---------- */
/* Interests as Precision Tag pills: followed ones are dark, with a red dot and their tag type */
.tagcloud { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 12px); margin: 0 0 clamp(40px, 5vw, 64px); }
.tagcloud li { display: inline-flex; align-items: center; gap: 10px; height: clamp(46px, 4.6vw, 64px); padding: 0 clamp(18px, 2vw, 28px); border-radius: var(--pill); border: 1.5px solid rgba(14, 14, 16, .12); background: rgba(255, 255, 255, .55); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 1.9vw, 1.6rem); letter-spacing: -.01em; color: rgba(14, 14, 16, .34); white-space: nowrap; }
.tagcloud li.on { padding-left: clamp(14px, 1.6vw, 22px); border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 16px 32px -18px rgba(14, 14, 16, .7); }
.tagcloud li.on::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(249, 69, 57, .28); }
.tagcloud small { font-weight: 800; font-size: max(.48em, 10px); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.shopby-head { margin: clamp(56px, 6vw, 88px) 0 22px; }
.shopby-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shopby { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 28px; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; }
.shopby::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; }
.shopby__kicker { font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .14em; opacity: .75; }
.shopby h4 { margin: auto 0 14px; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.02; letter-spacing: -.02em; color: inherit; }
.shopby p { margin: 0; font-size: .95rem; }
.shopby--team { background: linear-gradient(160deg, var(--red), var(--red-700)); color: #fff; }
.shopby--team::before { background: repeating-radial-gradient(circle at 100% 0, transparent 0 26px, rgba(255, 255, 255, .14) 26px 27.5px); }
.shopby--brand { background: var(--ink); color: #fff; }
.shopby--brand p { color: var(--muted-on-dark); }
.shopby--brand::before { background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .05) 18px 19.5px); opacity: 1; }
.shopby--talent { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.shopby--talent p { color: var(--muted); }
.shopby--talent::before { background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(249, 69, 57, .12) 34px 36px); opacity: 1; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); }

/* ---------- For Brands ---------- */
/* Value gap: how ambassador value leaks today, and how FanCart captures it */
.valuegap { display: grid; gap: 14px; margin-bottom: clamp(48px, 6vw, 80px); }
.valuegap__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px; border-radius: var(--radius-xl); background: var(--off-white); border: 1px solid var(--border); }
.valuegap__row--after { background: var(--ink); border-color: var(--ink); }
.valuegap__label { padding-left: 8px; font-family: var(--font-display); font-weight: 800; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.valuegap__row--after .valuegap__label { color: var(--red); }
.valuegap ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.valuegap li { position: relative; padding: 16px 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); }
.valuegap li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -15px; top: 50%; width: 16px; height: 2px; background: #D4D1CC; }
.valuegap__row--after li { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); }
.valuegap__row--after li:not(:last-child)::after { background: var(--red); }
.valuegap b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.25; color: var(--ink); }
.valuegap small { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.valuegap__row--after b { color: #fff; }
.valuegap__row--after small { color: var(--muted-on-dark); }
.valuegap li.is-lost { background: transparent; border-style: dashed; border-color: rgba(196, 42, 31, .45); }
.valuegap li.is-lost b { color: var(--red-700); }
.valuegap li.is-won { background: var(--red-600); border-color: var(--red-600); box-shadow: 0 16px 32px -18px rgba(249, 69, 57, .9); }
.valuegap li.is-won small { color: #fff; }
.valuegap__note { margin: 8px 0 0; text-align: center; font-size: .95rem; color: var(--muted); }
.brand-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 6vw, 88px); }
.step-lines { list-style: none; margin-top: 22px; }
.step-line { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.step-line:last-child { border-bottom: 1px solid var(--border); }
.step-line > span { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; color: var(--red); }
.step-line h4 { margin: 0 0 4px; font-size: 1.15rem; color: var(--ink); }
.step-line p { margin: 0; color: var(--muted); font-size: .95rem; }
/* Enriched view of performance and value (illustrative, no figures) */
.value-card { padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-xl); background: var(--ink); color: #fff; box-shadow: 0 40px 80px -44px rgba(14, 14, 16, .7); }
.value-card h4 { margin: 14px 0 10px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -.01em; color: #fff; }
.value-card > p { margin: 0 0 26px; font-size: .97rem; color: var(--muted-on-dark); }
.vchart { display: grid; gap: 16px; }
.vchart__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; }
.vchart__who b { display: block; font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: #fff; }
.vchart__tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark); }
.vchart__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.vchart__bars { display: grid; gap: 6px; }
.vchart__bar { display: block; width: var(--w); height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .2); transform-origin: 0 50%; }
.vchart__bar--sales { height: 14px; background: linear-gradient(90deg, var(--red-600), var(--red)); box-shadow: 0 8px 18px -8px rgba(249, 69, 57, .8); }
.js .vchart__bar { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js .is-in .vchart__bar { transform: none; }
.js .is-in .vchart__row:nth-child(2) .vchart__bar { transition-delay: .1s; }
.js .is-in .vchart__row:nth-child(3) .vchart__bar { transition-delay: .2s; }
.js .is-in .vchart__row:nth-child(4) .vchart__bar { transition-delay: .3s; }
.vchart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; font-size: .8rem; color: var(--muted-on-dark); }
.vchart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.vchart__legend span::before { content: ""; width: 14px; height: 6px; border-radius: 6px; }
.vchart__legend .aud::before { background: rgba(255, 255, 255, .3); }
.vchart__legend .sales::before { background: var(--red); }
.vchart__legend em { margin-left: auto; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.vchart__label { display: block; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-family: var(--font-display); font-weight: 800; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.vchart__metrics { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vchart__metrics li { padding: 7px 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: #fff; }

/* ---------- For Personalities ---------- */
.moneyflow-wrap { margin-top: clamp(56px, 6vw, 88px); }
.moneyflow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.moneyflow li { position: relative; padding: 26px 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); }
.moneyflow__n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: var(--red-600); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .9rem; }
.moneyflow li:last-child { background: rgba(249, 69, 57, .12); border-color: rgba(249, 69, 57, .4); }
.moneyflow li:last-child .moneyflow__n { background: #fff; color: var(--ink); }
.moneyflow h4 { margin: 0 0 6px; font-size: 1.15rem; }
.moneyflow p { margin: 0; font-size: .92rem; color: var(--muted-on-dark); }
.agency { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 6vw, 88px); padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-xl); background: linear-gradient(135deg, #2C100D, var(--ink-3) 62%); border: 1px solid rgba(249, 69, 57, .25); }
.agency h3 { margin: 14px 0 12px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.agency__copy p { margin-bottom: 24px; color: var(--muted-on-dark); }
.agency__list { list-style: none; display: grid; gap: 12px; }
.agency__list li { padding: 18px 20px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); color: var(--muted-on-dark); font-size: .95rem; }
.agency__list strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff; }

/* ---------- Technology ---------- */
.pipeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: clamp(48px, 5vw, 72px); }
.pipeline__col { position: relative; padding: 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); }
.pipeline__col:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -16px; top: 50%; width: 10px; height: 10px; border-top: 2.5px solid var(--red); border-right: 2.5px solid var(--red); transform: translateY(-50%) rotate(45deg); }
.pipeline__col h4 { margin: 0 0 16px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pipeline__col ul { list-style: none; display: grid; gap: 10px; }
.pipeline__col li { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.pipeline__col li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.pipeline__col--tags { background: var(--ink); border-color: var(--ink); }
.pipeline__col--tags h4 { color: var(--muted-on-dark); }
.tagtypes li { justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); color: #fff; }
.tagtypes li::before { display: none; }
.tagtypes small { font-family: var(--font-display); font-weight: 800; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.pipeline__note { margin: 26px auto 0; text-align: center; color: var(--muted); font-size: .97rem; }
.caps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.caps li { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: var(--pill); background: #fff; border: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: .94rem; color: var(--ink); }
.caps svg { width: 18px; height: 18px; color: var(--red-700); }

/* ---------- Legends Circle ---------- */
.legends { overflow: clip; }
.legends__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.legends__copy .h2 { margin: 16px 0 16px; }
.legends__copy .lead { margin-bottom: 28px; }
.legends__photo { margin: 0; }
.legends__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius-xl); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.legends__photo figcaption { margin-top: 14px; font-size: .88rem; color: var(--muted-on-dark); }
.quote { position: relative; margin: 0; padding-left: 26px; border-left: 3px solid var(--red); }
.quote p { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; letter-spacing: -.015em; color: #fff; margin: 0 0 14px; }
.quote footer { font-size: .9rem; color: var(--muted-on-dark); }
.quote footer b { color: #fff; font-weight: 600; }
.members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.member { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; padding: 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-dark); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.member:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); transform: translateY(-4px); }
.member img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; filter: grayscale(1); transition: filter .4s; }
.member:hover img { filter: grayscale(0); }
.member__role { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.member h3 { font-size: 1.22rem; letter-spacing: -.01em; margin-bottom: 8px; }
.member p { margin: 0 0 12px; font-size: .9rem; line-height: 1.55; color: var(--muted-on-dark); }
.member a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #fff; }
.member a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.member a .i-arrow { color: var(--red); }

/* ---------- News cards ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.news-grid--2, .news-grid[data-news-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-grid[data-news-list] { row-gap: clamp(40px, 4vw, 56px); }
.news-card { position: relative; display: flex; flex-direction: column; }
.news-card[hidden] { display: none; }
.news-card__media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); isolation: isolate; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.045); }
.news-card__media--ink { background: radial-gradient(70% 70% at 50% 85%, rgba(249, 69, 57, .5), transparent 70%), var(--ink); }
.news-card__media--red { background: radial-gradient(70% 70% at 50% 15%, #FF7468, transparent 70%), linear-gradient(165deg, var(--red), var(--red-700)); }
.news-card__media--cutout img { object-fit: contain; object-position: 50% 100%; padding-top: 6%; }
.news-card__body { display: flex; flex-direction: column; flex: 1; }
.news-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 20px 0 10px; font-size: .84rem; color: var(--muted); }
.news-card__title { font-size: clamp(1.2rem, 1.6vw, 1.42rem); line-height: 1.2; letter-spacing: -.01em; font-weight: 800; margin-bottom: 14px; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.news-card__excerpt { display: none; color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin: 0 0 24px; }
.news-card .link-arrow { margin-top: auto; font-size: .95rem; align-self: flex-start; }
/* The newest visible story is shown large while the list is unfiltered */
.news-card.is-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; margin-bottom: clamp(12px, 2vw, 28px); }
.news-card.is-featured .news-card__media { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); }
.news-card.is-featured .news-card__media::after { content: "Latest"; position: absolute; z-index: 2; left: 18px; top: 18px; padding: 7px 12px; border-radius: var(--pill); background: var(--red-600); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .72rem; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.news-card.is-featured .news-card__title { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 18px; }
.news-card.is-featured .news-card__excerpt { display: block; }

/* Home page newsroom: three cards hung off the bottom of the hero. The block is pulled up over the hero by --news-overlap, which the
   hero's bottom padding leaves room for, so the cards sit half on the dark ground and half on the white below. Painted after the hero,
   so it covers the hero's edge; no background of its own, so the hero shows through around the cards. The /news/ page keeps the full cards. */
.hero-news { position: relative; z-index: 1; display: flow-root; margin-top: calc(-1 * var(--news-overlap)); } /* flow-root keeps the row's own margins (below) from collapsing into this one */
.hero-news__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.hero-news__item { display: grid; min-width: 0; } /* carries the entrance animation; the card inside is free to move on hover */
.hero-news .news-card { flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 28px 48px -24px rgba(0, 0, 0, .35); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.hero-news .news-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 36px 56px -24px rgba(0, 0, 0, .4); }
.hero-news .news-card__media { flex: none; aspect-ratio: 16 / 9; border-radius: 0; background: var(--sand); }
.hero-news .news-card__body { flex: 1; min-width: 0; padding: 20px var(--card-pad) var(--card-pad); }
.hero-news .news-card__meta { gap: 8px; margin: 0 0 10px; }
.hero-news .news-card__meta > span:not(.pill), .hero-news .news-card .link-arrow { display: none; }
.hero-news .news-card__title { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.25; font-weight: 600; margin: 0; }
/* Tablets and phones: one row that scrolls sideways, two cards across on tablets and one on phones, with 48px of the next card
   showing at the right edge so the row reads as scrollable. The row's own padding keeps the shadows and the hover lift inside
   the scroll box, and the negative margins give that space back to the page. */
@media (max-width: 980px) {
  .hero-news .container { padding-inline: 0; }
  .hero-news__row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; padding: 8px var(--gutter) 56px; margin: -8px 0 -56px; scrollbar-width: none; }
  .hero-news__row::-webkit-scrollbar { display: none; }
  .hero-news__item { flex: 0 0 calc((100% - 16px - 48px) / 2); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .hero-news__item { flex-basis: min(calc(100% - 48px), 420px); }
}

/* Home page audience section: the heading and three cards, the same copy at every width. The carousel styles stay for when the full sections return. */
.ways.ways--summary { display: block; --ways-bg: #fff; }
.ways--summary .ways__intro { padding-block: clamp(56px, 6vw, 88px) var(--section-y); } /* the news cards above already set the section apart, so a shorter top */
/* One card per audience: the same frame as the Why FanCart and newsroom cards, with an icon tile where those have media. */
.disc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin-top: var(--head-gap); }
.disc__col { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--off-white); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--header-h) + 24px); }
.disc__copy { padding: var(--card-pad); }
.disc__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: var(--radius); background: var(--red-tint); color: var(--red-600); }
.disc__icon .mask-icon { width: 26px; height: 26px; }
.disc__copy h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.disc__copy p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
@media (max-width: 980px) {
  .disc { grid-template-columns: 1fr; }
  .disc__copy { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; }
  .disc__icon { grid-row: 1 / 3; margin: 0; }
}
@media (max-width: 640px) {
  .disc__copy { display: block; }
  .disc__icon { margin-bottom: 22px; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__list { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.08rem, 1.5vw, 1.28rem); color: var(--ink); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%230E0E10' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease), background-color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--red-tint); }
.faq details p { margin: 0; padding: 0 56px 26px 0; color: var(--muted); }
.faq summary:hover { color: var(--red-700); }

/* ---------- Join the waitlist / contact ---------- */
.cta-band { overflow: clip; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 85% 50%, rgba(249, 69, 57, .45), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(249, 69, 57, .18), transparent 70%); }
.cta-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.cta-band .h2 { margin: 18px 0 18px; }
.cta-band__perks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cta-band__perks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #fff; }
.cta-band__perks li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.cta-band__press { margin-top: 32px; max-width: 420px; }

.form-card { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-xl); background: #fff; color: var(--charcoal); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); scroll-margin-top: calc(var(--header-h) + 24px); }
.form-card h3, .section--dark .form-card h3 { font-size: 1.5rem; margin-bottom: 6px; color: var(--ink); }
.form-card__intro > p { color: var(--muted); font-size: .95rem; margin-bottom: 22px; }
.form { display: grid; gap: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__more { display: grid; gap: 14px; }
.form__more[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: .86rem; color: var(--ink); }
.field label .opt { font-weight: 500; color: var(--muted); }
.input { width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
textarea.input { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
select.input { padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230E0E10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; cursor: pointer; }
select.input:invalid { color: #8A8A8F; }
.input:hover { border-color: #CFCFD4; }
.input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(249, 69, 57, .16); }
.field.is-invalid .input { border-color: #DC2626; }
.field__error { display: none; font-size: .8rem; color: #B91C1C; }
.field.is-invalid .field__error { display: block; }
.form .btn { width: 100%; margin-top: 6px; }
.form__legal { font-size: .78rem; color: var(--muted); margin: 4px 0 0; text-align: center; }
.form__legal a { text-decoration: underline; text-underline-offset: 2px; }
.form__error { margin: 0; font-size: .86rem; color: #B91C1C; text-align: center; }
.form__error:empty { display: none; }
.form-success { display: none; text-align: center; padding: 20px 0 8px; }
.form-success:focus { outline: none; }
.form-success__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--red-tint); color: var(--red-700); display: grid; place-items: center; }
.form-success__icon svg { width: 30px; height: 30px; }
.form-success h3 { font-size: 1.6rem; margin-bottom: 8px; }
.form-success p { color: var(--muted); margin: 0 auto 18px; max-width: 26em; }
.form-card .link-arrow, .section--dark .form-card .link-arrow { color: var(--red-700); }
.form-wrap.is-success .form, .form-wrap.is-success .form-card__intro { display: none; }
.form-wrap.is-success .form-success { display: block; animation: rise .5s var(--ease); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: .92rem; font-weight: 500; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.is-on { opacity: 1; transform: none; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pass); }

/* ---------- Newsroom ---------- */
.masthead { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(44px, 6vw, 84px); }
.masthead__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 72px); align-items: end; }
.masthead__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 13vw, 11.5rem); line-height: 1; letter-spacing: -.02em; color: #fff; margin: 22px 0 26px; }
.masthead__title span { color: var(--red); }
.signposts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.press-card { padding: 26px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); }
.press-card small { display: block; font-family: var(--font-display); font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 10px; }
.press-card strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; }
.press-card span { display: block; color: var(--muted-on-dark); font-size: .92rem; margin-bottom: 14px; }
.press-card a.mail { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; }
.press-card a.mail:hover { border-color: var(--red); }
.press-card .btn { margin-top: 18px; width: 100%; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--border); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.search { position: relative; width: min(320px, 100%); }
.search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: var(--pill); border: 1.5px solid var(--border); background: #fff; font-size: .95rem; }
.search input:focus { outline: none; border-color: var(--ink); }
.search svg { position: absolute; left: 15px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--muted); }
.empty { display: none; text-align: center; padding: 56px 20px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); }
.empty.is-on { display: block; }
.empty strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }

.resources { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.res { grid-column: span 4; padding: 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; }
.res--wide { grid-column: span 8; }
.res--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.res--dark h3 { color: #fff; }
.res h3 { font-size: 1.3rem; margin-bottom: 8px; }
.res > p { color: var(--muted); font-size: .95rem; }
.res--dark > p { color: var(--muted-on-dark); }
.res .btn { margin-top: auto; align-self: flex-start; }
.logo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 18px; }
.logo-tile { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.logo-tile__art { height: 120px; display: grid; place-items: center; padding: 20px; }
.logo-tile__art img { max-height: 46px; width: auto; }
.logo-tile__art--dark { background: var(--ink); }
.logo-tile__art--light { background: var(--off-white); }
.logo-tile a { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-family: var(--font-display); font-weight: 700; font-size: .86rem; border-top: 1px solid var(--border); }
.logo-tile a:hover { color: var(--red-700); }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 18px; }
.swatch { padding: 0; text-align: left; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.swatch i { display: block; height: 76px; background: var(--c); }
.swatch span { display: block; padding: 10px 12px; font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--ink); }
.swatch span small { display: block; font-weight: 600; color: var(--muted); font-size: .76rem; }
.swatch:hover span small { color: var(--red-700); }
.boiler { position: relative; padding: 18px 20px; border-radius: var(--radius); background: var(--off-white); border: 1px solid var(--border); font-size: .95rem; color: var(--charcoal); margin: 6px 0 18px; }
.facts { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 10px 18px; margin: 6px 0 18px; font-size: .93rem; }
.facts dt { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.facts dd { margin: 0; color: var(--muted); }
.res--dark .facts dt { color: #fff; }
.res--dark .facts dd { color: var(--muted-on-dark); }

/* ---------- Article ---------- */
.read-progress { position: fixed; left: 0; top: 0; z-index: 70; height: 3px; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
.article-hero { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 88px); }
/* Story header: headline on the left, the photo at about half width on the right */
.article-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted-on-dark); }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { opacity: .5; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 26px 0 22px; font-size: .9rem; color: var(--muted-on-dark); }
.article-title { font-size: clamp(2.1rem, 3.5vw, 3.3rem); line-height: 1.02; letter-spacing: -.02em; max-width: 18em; }
.article-standfirst { margin: 24px 0 0; max-width: 40em; font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.55; color: rgba(255, 255, 255, .78); }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: .92rem; color: var(--muted-on-dark); }
.byline__mark { width: 40px; height: 40px; border-radius: 50%; background: #fff url("../img/brand/mark.png") center / 58% no-repeat; flex: none; }
.byline b { color: #fff; font-weight: 600; display: block; }
.article-figure { margin: 0; position: relative; z-index: 2; }
.article-figure__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--ink-3); box-shadow: var(--shadow-lift); aspect-ratio: 4 / 3; isolation: isolate; }
.article-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.article-figure__frame--contain .article-figure__bg { position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(40px) saturate(1.2) brightness(.6); }
.article-figure__frame--contain img { object-fit: contain; }
.article-figure figcaption { margin-top: 14px; font-size: .88rem; color: var(--muted-on-dark); max-width: 52em; }
.article-figure figcaption a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.article-figure figcaption a:hover { text-decoration-color: currentColor; }
.article-layout { display: grid; grid-template-columns: 64px minmax(0, 720px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(48px, 6vw, 80px); }
.share { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.share__label { font-family: var(--font-display); font-weight: 800; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.share a, .share button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); background: #fff; color: var(--ink); transition: border-color .2s, background-color .2s, color .2s; }
.share a:hover, .share button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.share svg { width: 18px; height: 18px; }
.glance { padding: 26px 28px; border-radius: var(--radius-lg); background: var(--sand); margin-bottom: 40px; }
.glance h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-700); margin-bottom: 14px; font-weight: 800; }
.glance ul { list-style: none; display: grid; gap: 10px; }
.glance li { position: relative; padding-left: 22px; font-weight: 500; color: var(--ink); line-height: 1.55; }
.glance li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.prose { font-size: 1.1rem; line-height: 1.82; color: #2C2C30; }
.prose p { margin: 0 0 1.35em; }
.prose .lede { font-size: 1.24rem; line-height: 1.7; color: var(--ink); font-weight: 500; }
.prose .dateline { font-weight: 600; color: var(--ink); }
.pullquote { margin: 2em 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--red); }
.pullquote p { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
.pullquote cite { font-style: normal; font-size: .92rem; color: var(--muted); }
.pullquote cite b { color: var(--ink); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 2em 0; }
.stat { padding: 22px 20px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--red); margin-bottom: 10px; }
.stat span { display: block; font-size: .9rem; line-height: 1.45; color: var(--muted-on-dark); }
.boxes { display: grid; gap: 16px; margin-top: 44px; }
.box { padding: 24px 26px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.box h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-bottom: 10px; }
.box p { margin: 0; font-size: .98rem; color: var(--charcoal); }
.box--contact { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.box--contact strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.box--contact span { color: var(--muted); font-size: .92rem; }
.aside-card { position: sticky; top: calc(var(--header-h) + 32px); padding: 26px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; }
.aside-card h3 { color: #fff; font-size: 1.3rem; margin: 14px 0 8px; }
.aside-card p { color: var(--muted-on-dark); font-size: .92rem; }
.aside-card .btn { width: 100%; }

/* ---------- Legal and 404 ---------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.5rem; margin: 2.2em 0 .6em; }
.legal p, .legal li { color: #34343a; font-size: 1.02rem; }
.legal ul { padding-left: 1.2em; margin-bottom: 1em; }
.legal li { margin-bottom: .4em; }
.legal a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration: none; }
.callout { padding: 18px 20px; border-radius: var(--radius); background: var(--red-tint); color: var(--red-700); font-size: .95rem; margin-bottom: 2em; }
.offside { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; text-align: center; }
.offside__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(7rem, 26vw, 18rem); line-height: 1; letter-spacing: -.02em; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .15)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--ink); color: #fff; padding-top: clamp(40px, 5vw, 56px); overflow: clip; border-top: 1px solid var(--line-dark); }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 40px; } /* brand only since 9 Nov 2026: the Platform and Company columns (.footer__col) are out, their styles kept below */
.footer__brand img { height: 36px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: var(--muted-on-dark); font-size: .95rem; max-width: 30em; margin-bottom: 0; }
.footer__social { /* the LinkedIn button, back on 10 Nov 2026 at the right of the footer bottom bar */ display: flex; gap: 10px; margin-top: 18px; }
.footer__social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-dark); color: #fff; transition: background-color .2s, border-color .2s; }
.footer__social a:hover { background: #fff; color: var(--ink); border-color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.footer__col h2 { font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 18px; }
.footer__col ul { list-style: none; display: grid; gap: 10px; }
.footer__col a { color: rgba(255, 255, 255, .86); font-size: .97rem; transition: color .2s; }
.footer__col a:hover { color: var(--red); }
/* The logo's own wordmark (traced from the logo artwork), so letterforms and spacing match exactly */
.footer__mega { /* the big wordmark, taken out of every page on 9 Nov 2026; the rule stays for a quick return */ margin-top: clamp(48px, 6vw, 80px); width: 100%; aspect-ratio: 1198 / 247; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 85%); -webkit-mask: url("../img/brand/wordmark.svg") center bottom / 100% auto no-repeat; mask: url("../img/brand/wordmark.svg") center bottom / 100% auto no-repeat; user-select: none; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(28px, 3.5vw, 40px); padding: 20px 0 24px; border-top: 1px solid var(--line-dark); font-size: .86rem; color: var(--muted-on-dark); }
.footer__bottom nav { display: flex; gap: 20px; }
.footer__end { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.footer__bottom .footer__social { margin-top: 0; }
.footer__bottom .footer__social a { width: 36px; height: 36px; }
.footer__bottom .footer__social a:hover { color: var(--ink); }
.footer__bottom a:hover { color: #fff; }

/* ---------- Motion: hero entrance on load, everything else on scroll ---------- */
.js .intro { animation: intro 1s var(--ease) both; }
.js .intro--d1 { animation-delay: .08s; }
.js .intro--d2 { animation-delay: .16s; }
.js .intro--d3 { animation-delay: .26s; }
.js .intro--d4 { animation-delay: .36s; }
@keyframes intro { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--d1 { transition-delay: .08s; }
.js .reveal--d2 { transition-delay: .16s; }
.js .reveal--d3 { transition-delay: .24s; }
.js .reveal.is-instant { transition: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav { display: none; }
  .nav-quiet { display: none; }
  .menu-toggle { display: inline-block; }
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Between 981 and 1279px the photo shares the row with the copy, so labels beside the dots would run into it: list them under the photo; the dots stay on it */
@media (max-width: 1279px) {
  .tagged__photo { margin-bottom: 14px; }
  .tag--left, .tag--right { position: static; translate: none; display: inline-flex; margin: 0 6px 8px 0; }
  .tag--left::after, .tag--right::after { display: none; }
  .tag--note { left: 0; top: 0; }
}
/* Tablets: the photo has the row to itself (up to 640px wide), so the labels sit by their dots as on desktop, a touch smaller and
   closer so the sunglasses label stays on screen at 641px. Phones have their own compact labels below. */
@media (min-width: 641px) and (max-width: 980px) {
  .tagged__photo { margin-bottom: 0; }
  .tag--left, .tag--right { position: absolute; display: flex; margin: 0; }
  .tag--left { translate: calc(-100% - 22px) -50%; }
  .tag--right { translate: 22px -50%; }
  .tag--left::after, .tag--right::after { display: block; width: 14px; }
  .tag--left::after { right: -16px; }
  .tag--right::after { left: -16px; }
  .tagged__art .tag { padding: 10px 12px; font-size: .75rem; }
}
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: 56px minmax(0, 1fr); }
  .article-layout > aside { display: none; }
  .resources .res, .resources .res--wide { grid-column: span 6; }
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .article-hero__grid { grid-template-columns: 1fr; }
  .article-figure { max-width: 640px; }
  .hero__visual { max-width: 640px; width: 100%; margin-inline: auto; }
  .tagged__art { width: 100%; margin-left: 0; }
  .intro-split { grid-template-columns: 1fr; align-items: start; }
  .audience { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
  .aud-card { min-height: 0; }
  .aud-card h3 { margin-top: 18px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { min-height: 0; }
  .features { grid-template-columns: 1fr 1fr; }
  .shopby-grid { grid-template-columns: 1fr; }
  .shopby { min-height: 240px; }
  .brand-how { grid-template-columns: 1fr; }
  .valuegap__row { grid-template-columns: 1fr; gap: 12px; }
  .valuegap__label { padding-left: 4px; }
  .valuegap ol { grid-template-columns: 1fr 1fr; }
  .valuegap li::after { display: none; }
  .moneyflow { grid-template-columns: 1fr 1fr; }
  .agency { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .pipeline__col:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -17px; transform: translateX(-50%) rotate(135deg); }
  .legends__grid { grid-template-columns: 1fr; }
  .members { grid-template-columns: 1fr; max-width: 600px; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card.is-featured { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .cta-band__grid { grid-template-columns: 1fr; }
  .masthead__grid { grid-template-columns: 1fr; align-items: start; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand img { height: 30px; }
  .site-header__actions .btn { display: none; }
  .announce__inner { justify-content: flex-start; }
  .announce__tag { display: none; }
  .capture { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 8px; }
  .capture input { height: 50px; }
  .capture .btn { width: 100%; }
  .tag { padding: 8px 11px; font-size: .74rem; }
  .tag small { font-size: .56rem; }
  .tag--note { display: none; }
  /* Phones: each label shrinks to its product name and sits beside its dot; tag--up lifts it clear of a face */
  .tagged__photo { margin-bottom: 0; }
  .tag--left, .tag--right { position: absolute; display: block; width: max-content; margin: 0; padding: 6px 9px; border-radius: 10px; font-size: clamp(10px, 2.9vw, 11px); line-height: 1.25; }
  .tag--left small, .tag--right small, .tag--left em, .tag--right em { display: none; }
  .tag--left b, .tag--right b { display: block; max-width: none; white-space: nowrap; }
  .tag--left b span, .tag--right b span { display: block; }
  .tag--left { translate: calc(-100% - 15px) -50%; }
  .tag--right { translate: 15px -50%; }
  .tag--up { translate: calc(-100% + 4px) calc(-100% - 20px); }
  /* Phones: a shorter, smaller interest cloud */
  .tagcloud { gap: 6px; }
  .tagcloud li { height: 34px; padding: 0 13px; gap: 7px; font-size: .9rem; }
  .tagcloud li.on { padding-left: 11px; }
  .tagcloud li.on::before { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(249, 69, 57, .28); }
  .tagcloud small { font-size: 9px; }
  .tagcloud .extra { display: none; }
  .products { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .moneyflow { grid-template-columns: 1fr; }
  .valuegap ol { grid-template-columns: 1fr; }
  .news-grid, .news-grid--2, .news-grid[data-news-list] { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .members .member { grid-template-columns: 60px 1fr; }
  .member img { width: 60px; height: 60px; }
  .resources .res, .resources .res--wide { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
  .article-layout { grid-template-columns: 1fr; }
  .share { position: static; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; order: 2; }
  .share__label { margin: 0 6px 0 0; }
  .stats { grid-template-columns: 1fr; }
  .vchart__row { grid-template-columns: 1fr; gap: 8px; }
  .footer__top { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
}

/* The narrowest phones: the pass label flips to the left of its dot so it stays on screen */
@media (max-width: 359px) {
  .tag--right { translate: calc(-100% - 15px) -50%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}