/* ==========================================================================
   FanCart Design System: home page test
   Loaded by index.html only, after site.css, so the newsroom, articles, privacy
   and 404 pages are untouched. To back the test out, remove the <link>.

   Source: Figma "FanCart Design System" (file dnpO95PHaCTAFyc6I03NzT). Values are
   the file's variables, text styles and component specs; the Figma name is in the
   comment beside each token.

   Scope rules for this file:
   - Colour, type, radius, shadow, stroke and component sizes only.
   - No grid, flex direction, order or section changes. Never set `display` on an
     element site.css shows or hides responsively: this file loads later, so an
     unconditional rule would beat site.css's media queries.
   - Display sizes stay on the site's own fluid scale, because the Figma ramp is
     drawn for a 390pt phone. Compact capitals set about as wide as Urbanist did,
     so the headlines keep their line breaks.

   Type: PP Right Grotesk, as the design system targets. It is read from the fonts
   installed on this machine (local()), because the web font is not licensed or in
   this repo. Anyone without it installed sees Sofia Sans, the same stand-in the
   Figma text styles use.
   ========================================================================== */

/* PP Right Grotesk faces kept for a quick switch back: put "FC Display" / "FC Heading" / "FC Text" / "FC Label" at the front of the role variables below */
@font-face { font-family: "FC Display"; src: local("PP Right Grotesk Compact Dark"), local("PPRightGrotesk-CompactDark"); font-weight: 1 1000; font-display: swap; }
@font-face { font-family: "FC Heading"; src: local("PP Right Grotesk Medium"), local("PPRightGrotesk-Medium"); font-weight: 1 1000; font-display: swap; }
@font-face { font-family: "FC Text"; src: local("PP Right Grotesk Text Regular"), local("PPRightGroteskText-Regular"); font-weight: 1 449; font-display: swap; }
@font-face { font-family: "FC Text"; src: local("PP Right Grotesk Medium"), local("PPRightGrotesk-Medium"); font-weight: 450 1000; font-display: swap; }
@font-face { font-family: "FC Label"; src: local("PP Right Grotesk Text Compact Medium"), local("PPRightGroteskText-CompactMedium"); font-weight: 1 1000; font-display: swap; }

:root {
  /* Colour */
  --red: #F94539;                               /* accent/default · red/500 */
  --red-on-dark: #FB6B61;                       /* accent/on-dark · red/400 */
  --red-600: #D62D22;                           /* action/default · red/600 */
  --red-700: #C8261B;                           /* action/pressed · red/700 */
  --red-800: #A61D15;                           /* red/800 */
  --red-tint: #FEECEA;                          /* red/50 */
  --tint: rgba(249, 69, 57, .08);               /* action/tint */
  --tint-strong: rgba(249, 69, 57, .15);        /* action/tint-strong */
  --ink: #1A1A1A;                               /* surface/inverse · text/default · ink/900 */
  --ink-2: #2A2928;                             /* surface/inverse-2 · ink/800 */
  --ink-3: #2A2928;                             /* surface/inverse-2 */
  --ink-4: #44403C;                             /* ink/700 */
  --near-black: #1A1A1A;                        /* text/default */
  --charcoal: #2A2928;                          /* text/body */
  --muted: #6B6865;                             /* text/muted */
  --soft: #8A8681;                              /* text/soft */
  --muted-on-dark: rgba(255, 255, 255, .72);    /* text/inverse-muted */
  --border: #E7E5E2;                            /* border/default */
  --border-strong: #D6D3CF;                     /* border/strong */
  --line-dark: rgba(255, 255, 255, .18);        /* border/glass-dark */
  --glass-dark: rgba(20, 20, 20, .64);          /* overlay/glass-dark */
  --off-white: #FAF9F7;                         /* surface/alt · ink/50 */
  --sand: #F2F0ED;                              /* ink/100 */
  --white: #FFFFFF;                             /* surface/default */
  --pass: #16A34A;                              /* status/success-fill */
  --error: #B91C1C;                             /* status/error */
  --gold: #E0B94A;                              /* tier/gold */

  /* Type: target face first, Figma stand-in second */
  --font-display: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;  /* anything site.css left on the old display face */
  --font-body: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;        /* Body/* */
  --fc-display: "Sofia Sans", ui-sans-serif, system-ui, sans-serif; /* Display/XL, L, M */
  --fc-display-s: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;     /* Display/S, Price/L */
  --fc-heading: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;     /* Heading/*, UI/* */
  --fc-label: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;           /* Label, Button/* */

  /* Shape */
  --radius-sm: 8px;                             /* radius/md */
  --radius: 12px;                               /* radius/lg */
  --radius-lg: 16px;                            /* radius/xl */
  --radius-xl: 24px;                            /* radius/2xl */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .04);  /* Shadow/sm */
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, .08); /* Shadow/md */
}

/* ---------- Base ---------- */
body { line-height: 1.5; font-synthesis: none; }
h1, h2, h3, h4 { font-family: var(--fc-heading); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
p { margin-bottom: 1em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hero :focus-visible, .site-header :focus-visible, .mobile-menu :focus-visible, .section--dark :focus-visible, .site-footer :focus-visible, .agency :focus-visible, .value-card :focus-visible, .announce :focus-visible { outline-color: #fff; }
.section--dark .form-card :focus-visible { outline-color: var(--ink); }
::selection { background: var(--red-600); }
.section--sand { background: var(--off-white); }

/* Flat surfaces: the system has no grain, rings or glows */
.section--grain::after, .hero__bg::after, .cta-band::before, .aud-card::before { display: none; }
.hero__bg { background: radial-gradient(52% 58% at 76% 50%, rgba(249, 69, 57, .22), transparent 72%); }
.tagged__art::before { background: radial-gradient(50% 50% at 50% 55%, rgba(249, 69, 57, .3), transparent 70%); }

/* ---------- Type roles ---------- */
/* Display/XL, L, M: compact, mixed case (experiment: the system's capitals are set aside, so the line-height opens a touch for ascenders and descenders) */
.h-display, .h1, .h2, .ways__head .h2, .aud-card h3, .shopby h4, .mobile-menu__links a {
  font-family: var(--fc-display); font-weight: 800; letter-spacing: -.02em; text-transform: none; text-wrap: balance;
}
.h-display { line-height: 1; }
.h2 { line-height: 1.02; }
.ways__head .h2 { line-height: 1.02; }
.aud-card h3 { line-height: 1.02; }
.shopby h4 { line-height: 1.02; }
.mobile-menu__links a { line-height: 1.05; }
.h3, .feature h3, .era h3, .value-card h4, .agency h3, .form-card h3, .news-card__title, .moneyflow h4, .step-line h4 { text-wrap: balance; }
.member h3 { text-wrap: pretty; } /* names: keep the nickname together rather than even the lines */
p, li, figcaption, .lead { text-wrap: pretty; } /* body: no single-word last lines; the box never changes, only where the breaks fall */

/* Display/S: card titles that need weight */
.h3, .feature h3, .era h3, .value-card h4, .agency h3, .form-card h3, .section--dark .form-card h3, .form-success h3 {
  font-family: var(--fc-display-s); font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
}
.h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.feature h3, .era h3 { font-size: 1.5rem; }
.value-card h4 { font-size: clamp(1.625rem, 2.5vw, 2.125rem); }
.agency h3 { font-size: clamp(2rem, 3.4vw, 2.875rem); }
.form-card h3, .section--dark .form-card h3, .form-success h3 { font-size: 1.75rem; }

/* Heading/L, Heading/M: names, list titles */
.member h3, .news-card__title { font-family: var(--fc-heading); font-weight: 500; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.member h3 { font-size: 1.25rem; } /* one step down so the longest name holds one line at full desktop width */
.moneyflow h4, .step-line h4, .faq summary { font-family: var(--fc-heading); font-weight: 500; font-size: 1.125rem; line-height: 1.25; letter-spacing: 0; }
.hero__question { font-family: var(--fc-heading); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--red-on-dark); }
.ways__sub { font-family: var(--fc-heading); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.quote p { font-family: var(--fc-heading); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }

/* Body */
.lead { line-height: 1.5; }
.hero__lead { line-height: 1.5; color: var(--muted-on-dark); }
.feature p, .era p, .aud-card p, .shopby p, .step-line p, .moneyflow p, .member p, .faq details p, .form-card__intro > p, .value-card > p, .agency__copy p, .agency__list li, .pipeline__note, .valuegap__note { font-size: .9375rem; line-height: 1.5; }
.tagged figcaption, .legends__photo figcaption, .capture__note, .news-card__meta, .quote footer, .valuegap small, .vchart__legend { font-size: .8125rem; line-height: 1.4; }
.form__legal, .footer__bottom { font-size: .75rem; line-height: 1.35; }

/* Label: eyebrows, overlines, kickers. 12, tracked, capitals */
.eyebrow, .pill, .announce__tag, .tag small, .shopby__kicker, .valuegap__label, .vchart__tag, .vchart__label, .vchart__legend em, .pipeline__col h4, .tagtypes small, .member__role, .footer__col h2, .field label, .press-card small, .vchart__metrics li, .cta-band__perks li, .tag__chips i {
  font-family: var(--fc-label); font-weight: 600; font-size: .75rem; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow { color: var(--red-600); }
.eyebrow::before { display: none; }
.section--dark .eyebrow, .hero .eyebrow, .value-card .eyebrow, .ways__slide .agency .eyebrow { color: var(--red-on-dark); }
.tagcloud small { font-family: var(--fc-label); font-weight: 600; letter-spacing: .06em; color: var(--red-600); }

/* Button/L label on text links, so links and buttons read as one family */
.link-arrow, .hero__alt a, .member a, .ways__tab-foot {
  font-family: var(--fc-label); font-weight: 600; font-size: .875rem; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
}
.hero__alt a .i-arrow, .member a .i-arrow { color: var(--red-on-dark); }

/* ---------- Button: Direction C (05 Components · Button) ---------- */
.btn { --h: 52px; padding: 0 32px; font-family: var(--fc-label); font-weight: 600; font-size: .875rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.btn--sm { --h: 36px; padding: 0 16px; font-size: .75rem; }
.btn--lg { --h: 52px; padding: 0 32px; font-size: .875rem; }
.btn .i-arrow { display: none; } /* primary and navigation CTAs are text only in the system */
.btn:active { transform: none; }
.btn--primary { background: var(--red-600); box-shadow: none; }
.btn--primary:hover { background: var(--red-700); transform: none; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--sand); }
.btn--outline { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--off-white); border-color: var(--ink); }
.btn--outline-light { border-color: #fff; color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Status Pill and chips ---------- */
.pill { height: 24px; padding: 0 8px; gap: 4px; background: var(--tint); color: var(--red-600); }
.chip { background: #fff; border: 1px solid var(--border); font-family: var(--fc-heading); font-weight: 500; font-size: .8125rem; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.chip:hover { border-color: var(--border-strong); background: var(--off-white); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--tint); border-color: var(--red); color: var(--red-600); }
.chip--dark { background: var(--glass-dark); border-color: var(--line-dark); color: #fff; }
.chip--dark:hover { border-color: #fff; background: var(--glass-dark); }
.chip--dark.is-active, .chip--dark[aria-pressed="true"] { background: var(--tint-strong); border-color: var(--red-on-dark); color: var(--red-on-dark); }
.capture-done .chip { height: 32px; padding: 0 12px; font-size: .8125rem; }

/* ---------- Announcement bar ---------- */
.announce { background: var(--red-600); font-size: .8125rem; line-height: 1.3; }
.announce__tag { padding: 5px 8px; background: var(--glass-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
.announce__close:hover { background: var(--tint-strong); }

/* ---------- Header ---------- */
.site-header { background: var(--ink); }
.site-header.is-scrolled { background: rgba(26, 26, 26, .92); }
.nav a, .nav-quiet { font-family: var(--fc-heading); font-weight: 500; font-size: .9375rem; line-height: 1.3; color: var(--muted-on-dark); }
.nav a:hover { background: rgba(255, 255, 255, .08); }
/* Underline Tabs' active mark in place of the dot: the red dot means "in the picture" in the system */
.nav a[aria-current="page"]::after, .nav a.is-active::after { left: 12px; bottom: 3px; width: calc(100% - 24px); height: 2px; border-radius: 0; translate: 0 0; }
.menu-toggle { background: rgba(255, 255, 255, .08); }
.mobile-menu { background: var(--ink); }
.mobile-menu__links a .i-arrow { color: var(--red-on-dark); }

/* ---------- Hero ---------- */
.proof-chip { background: var(--glass-dark); border-color: var(--line-dark); font-size: .8125rem; line-height: 1.3; color: #fff; }
.proof-chip:hover { background: var(--glass-dark); border-color: rgba(255, 255, 255, .4); }
.avatars img { width: 32px; height: 32px; border-color: var(--ink); filter: none; }
.avatars img + img { margin-left: -8px; } /* space/overlap-s */

/* Hotspot: white dot, red centre, soft ring (20pt dot) */
.hotspot { width: 20px; height: 20px; background: radial-gradient(circle at center, var(--red) 0 4px, #fff 4.5px); box-shadow: 0 0 0 6px rgba(255, 255, 255, .28), var(--shadow-lift); }
.hotspot::after { inset: -6px; border: 1.5px solid rgba(255, 255, 255, .7); }

/* Hotspot Callout, dark glass: ink at 72% with blur (as the site had it), on the system's tokens — ink/900 base, line-dark stroke, radius 12, Label in red-on-dark, Heading/M name, Shadow/md */
.tag { background: rgba(26, 26, 26, .72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--line-dark); color: #fff; font-family: var(--fc-heading); font-weight: 500; box-shadow: var(--shadow-lift); }
.tag small { color: var(--red-on-dark); }
.tag b { font-weight: 500; }
.tag em { color: var(--muted-on-dark); font-family: var(--font-body); font-size: .75rem; }
.tag--left::after, .tag--right::after { background: rgba(255, 255, 255, .6); }
.tag__chips i { padding: 4px 8px; border-radius: var(--pill); background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark); color: #fff; text-transform: none; letter-spacing: 0; font-family: var(--fc-heading); font-weight: 500; font-size: .8125rem; }
@media (min-width: 641px) {
  .tag { padding: 12px; border-radius: var(--radius); font-size: .8125rem; line-height: 1.3; }
}
@media (max-width: 640px) {
  .tag small { font-size: .56rem; }
}

/* Email capture: Search Field shape, Text Field focus (white on dark, never red) */
.capture { background: rgba(255, 255, 255, .08); border-color: var(--line-dark); }
.capture:focus-within { border-color: #fff; box-shadow: 0 0 0 .5px #fff; }
.capture input::placeholder { color: var(--muted-on-dark); }
.capture__note { color: var(--muted-on-dark); }
.capture__error { color: var(--red-on-dark); }
.capture-done { background: var(--ink-2); border-color: var(--line-dark); border-radius: var(--radius-lg); }
.capture-done p { font-family: var(--fc-display-s); font-weight: 700; font-size: 1.5rem; line-height: 1.05; }
.capture-done p span { color: var(--muted-on-dark); line-height: 1.4; }

/* ---------- Audience cards (tablet and phone): Feature Card ---------- */
.aud-card { border-radius: var(--radius-lg); }
.aud-card--fans { background: linear-gradient(180deg, var(--red-600) 45%, var(--red-800)); }
.aud-card--brands { background: var(--ink); }
.aud-card--talent { border-color: var(--border); box-shadow: var(--shadow-card); }
.aud-card__icon { width: 72px; height: 72px; border-radius: 50%; }
.aud-card--fans .aud-card__icon { background: rgba(255, 255, 255, .16); }
.aud-card--brands .aud-card__icon { background: var(--tint-strong); color: var(--red-on-dark); }
.aud-card--talent .aud-card__icon { background: var(--tint); color: var(--red-600); }
.aud-card--fans p { color: rgba(255, 255, 255, .92); }

/* ---------- Audience carousel (desktop): Underline Tabs, Segmented Control ---------- */
.ways { --ways-bg: var(--off-white); }
.ways[data-on="brands"] { --ways-bg: var(--white); }
.ways[data-on="talent"] { --ways-bg: var(--white); }
.ways__head em { color: var(--red); }
.ways__tabs::before { background: var(--border-strong); }
.ways__tabs::after { border-radius: 0; background: var(--red); box-shadow: none; }
.ways__tab:focus-visible { outline: 2px solid var(--ink); }
.ways__tab .aud-card__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--sand); }
.ways__tab-title { font-family: var(--fc-display); font-weight: 700; font-size: clamp(1.625rem, 2.3vw, 2rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; text-transform: none; text-wrap: balance; }
.ways__tab-text { font-size: .9375rem; line-height: 1.5; }
.ways__tab[aria-selected="true"] .aud-card__icon { background: var(--tint-strong); color: var(--red-600); }
.ways__tab[aria-selected="true"] .ways__tab-foot { color: var(--red-600); }
.ways__mini-inner { padding: 4px; background: var(--off-white); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-lift); }
.ways__mini button { padding: 8px 16px; font-family: var(--fc-heading); font-weight: 500; font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.ways__mini button:hover { color: var(--ink); }
.ways__mini button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-card); }

/* ---------- Cards ---------- */
.feature, .era { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-card); }
.section--dark .feature { background: var(--ink-2); border-color: var(--line-dark); }
.feature__icon, .era__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--tint); color: var(--red-600); }
.section--dark .feature__icon { background: var(--tint-strong); color: var(--red-on-dark); }
.era__icon { background: var(--ink); color: #fff; }

/* ---------- For Fans: Precision Tag ---------- */
.tagcloud li { border: 1px solid var(--border); background: #fff; font-family: var(--fc-heading); font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.tagcloud li.on { border-color: var(--red); background: var(--tint); color: var(--red-600); box-shadow: none; }
.tagcloud li.on::before { background: var(--red); box-shadow: none; }
/* Two rows at every width: pills that would wrap to a third row are clipped whole */
.tagcloud { --pill-h: 34px; --pill-gap: 6px; max-height: calc(2 * var(--pill-h) + var(--pill-gap)); overflow: hidden; }
@media (min-width: 641px) { /* phones keep site.css's 34px pills */
  .tagcloud { --pill-h: clamp(36px, 3vw, 42px); --pill-gap: 8px; gap: var(--pill-gap); }
  .tagcloud li { height: var(--pill-h); padding: 0 clamp(13px, 1.2vw, 16px); gap: 7px; font-size: clamp(.9375rem, 1.2vw, 1.0625rem); }
  .tagcloud li.on { padding-left: clamp(11px, 1vw, 13px); }
  .tagcloud li.on::before { width: 7px; height: 7px; }
  .tagcloud small { font-size: 10px; }
}
.shopby { border-radius: var(--radius-lg); }
.shopby::before { display: none; }
.shopby__kicker { opacity: 1; }
.shopby--team { background: linear-gradient(180deg, var(--red-600) 45%, var(--red-800)); }
.shopby--brand { background: var(--ink); }
.shopby--brand p { color: var(--muted-on-dark); }
.shopby--talent { border-color: var(--border); box-shadow: var(--shadow-card); }

/* ---------- For Brands ---------- */
.valuegap__row { background: var(--off-white); border-color: var(--border); }
.valuegap__row--after { background: var(--ink); border-color: var(--ink); }
.valuegap__row--after .valuegap__label { color: var(--red-on-dark); }
.valuegap li { border-color: var(--border); }
.valuegap li:not(:last-child)::after { background: var(--border-strong); }
.valuegap__row--after li { background: var(--ink-2); border-color: var(--line-dark); }
.valuegap__row--after li:not(:last-child)::after { background: var(--red); }
.valuegap b { font-family: var(--fc-heading); font-weight: 500; font-size: 1rem; line-height: 1.25; }
.valuegap li.is-lost { border-color: var(--red-600); }
.valuegap li.is-lost b { color: var(--red-600); }
.valuegap li.is-won { background: var(--red-600); border-color: var(--red-600); box-shadow: none; }
.step-line { border-color: var(--border); }
.step-line:last-child { border-color: var(--border); }
.step-line > span { font-family: var(--fc-display-s); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: 0; color: var(--red-600); } /* Price/L */
.value-card { background: var(--ink); box-shadow: var(--shadow-lift); }
.value-card > p { color: var(--muted-on-dark); }
.vchart__who b { font-family: var(--fc-heading); font-weight: 500; font-size: .9375rem; }
.vchart__tag { color: var(--muted-on-dark); }
.vchart__bar { background: rgba(255, 255, 255, .2); }
.vchart__bar--sales { background: var(--red); box-shadow: none; }
.vchart__legend em { color: var(--muted-on-dark); }
.vchart__label { color: var(--red-on-dark); }
.vchart__metrics li { background: var(--glass-dark); border-color: var(--line-dark); }

/* ---------- For Talent ---------- */
.moneyflow li { border-radius: var(--radius-lg); background: var(--ink-2); border-color: var(--line-dark); }
.moneyflow__n { width: 40px; height: 40px; background: var(--red-600); font-family: var(--fc-label); font-weight: 700; font-size: 1rem; }
.moneyflow li:last-child { background: var(--tint-strong); border-color: var(--red-on-dark); }
.moneyflow p { color: var(--muted-on-dark); }
.agency { border-radius: var(--radius-xl); background: var(--ink-2); border-color: var(--line-dark); }
.agency__copy p { color: var(--muted-on-dark); }
.agency__list li { border-radius: var(--radius); background: rgba(255, 255, 255, .04); border-color: var(--line-dark); color: var(--muted-on-dark); }
.agency__list strong { font-family: var(--fc-heading); font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.ways__slide .moneyflow li { border-color: var(--border); box-shadow: var(--shadow-card); }
.ways__slide .moneyflow li:last-child { background: var(--tint); border-color: var(--red); }
.ways__slide .moneyflow li:last-child .moneyflow__n { background: var(--red-600); }
.ways__slide .moneyflow p { color: var(--muted); }

/* ---------- Technology ---------- */
.pipeline__col { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-card); }
.pipeline__col:not(:last-child)::after { border-color: var(--red); }
.pipeline__col li { font-family: var(--fc-heading); font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.pipeline__col--tags { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-lift); }
.pipeline__col--tags h4 { color: var(--muted-on-dark); }
.tagtypes li { border-radius: var(--radius); background: var(--ink-2); border-color: var(--line-dark); }
.tagtypes small { color: var(--red-on-dark); }
.caps li { height: 40px; padding: 0 16px; border-color: var(--border); font-family: var(--fc-heading); font-weight: 500; font-size: .8125rem; line-height: 1.3; }
.caps svg { color: var(--red-600); }

/* ---------- Legends Circle: gold is the system's Legends mark (Feature Card, Status Pill) ---------- */
.legends .eyebrow, .member__role { color: var(--gold); }
.legends__photo img { border-radius: var(--radius-lg); box-shadow: none; }
.legends__photo figcaption { color: var(--muted-on-dark); }
.quote { border-left: 2px solid var(--gold); }
.quote footer { color: var(--muted-on-dark); }
.quote footer b { font-weight: 500; }
.member { border-radius: var(--radius-lg); background: var(--ink-2); border-color: var(--line-dark); }
.member:hover { background: var(--ink-4); border-color: var(--line-dark); }
.member img { filter: none; }
.member p { color: var(--muted-on-dark); }

/* ---------- News cards ---------- */
.news-card__media { border-radius: var(--radius-lg); background: var(--sand); }
.news-card__meta { color: var(--muted); }

/* ---------- FAQ ---------- */
.faq__list { border-color: var(--border); }
.faq details { border-color: var(--border); }
.faq summary::after { width: 32px; height: 32px; background-color: var(--sand); }
.faq details[open] summary::after { background-color: var(--tint-strong); }
.faq summary:hover { color: var(--red-600); }

/* ---------- Waitlist: Text Field ---------- */
.cta-band__perks li { padding: 6px 12px; background: var(--glass-dark); border-color: var(--line-dark); }
.press-card { border-radius: var(--radius-lg); background: var(--ink-2); border-color: var(--line-dark); }
.press-card small { color: var(--muted-on-dark); }
.press-card strong { font-family: var(--fc-heading); font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.press-card span { color: var(--muted-on-dark); }
.press-card a.mail { font-weight: 500; }
.press-card a.mail:hover { border-color: var(--red-on-dark); }
.form-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); color: var(--charcoal); }
.field label { color: var(--ink); }
.field label .opt { font-weight: 600; color: var(--muted); }
.input { height: 52px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--ink); }
textarea.input { height: auto; }
select.input:invalid { color: var(--soft); }
.input::placeholder { color: var(--soft); }
.input:hover { border-color: var(--border-strong); }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 .5px var(--ink); } /* ink, not red: red is reserved for action and error */
.field.is-invalid .input { border-color: var(--error); box-shadow: 0 0 0 .5px var(--error); }
.field__error, .form__error { color: var(--error); }
.form-success__icon { width: 72px; height: 72px; background: var(--tint); color: var(--red-600); }
.form-card .link-arrow, .section--dark .form-card .link-arrow { color: var(--red-600); }

/* ---------- Toast ---------- */
.toast { background: var(--ink); font-weight: 500; box-shadow: var(--shadow-lift); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); }
.footer__col h2 { color: var(--muted-on-dark); }
.footer__col a { font-family: var(--fc-heading); font-weight: 500; font-size: .9375rem; line-height: 1.3; color: var(--muted-on-dark); }
.footer__col a:hover { color: #fff; }
.footer__brand p { font-size: .9375rem; line-height: 1.5; color: var(--muted-on-dark); }
.footer__social a { width: 40px; height: 40px; }
.footer__bottom { color: var(--muted-on-dark); }