/* =========================================================
   B2B — Admin Dashboard Design System (shared)
   ---------------------------------------------------------
   Sources of truth (in priority order):
     1. ~/Development/admin/src/styles/token.css          (tokens)
     2. ~/Development/admin/src/shared/ui/*               (components)
     3. Figma B2B files (lszh26..., Fsyoo97...) variables (verification)
     4. ~/Development/admin/assets/resources/web/styles/less/*

   Kept deliberately simple. No decorative pseudo-elements on body or
   wrapper, no mask-composite tricks, no filter+transform combinations
   on large fixed elements — those produce browser-specific rendering
   artifacts (the "giant ellipse on scroll" issue) that aren't worth
   the visual marginal gain. The admin design system itself doesn't
   use those tricks.
========================================================= */

:root {
    /* ---------- Primitives (admin token.css §1) ---------- */
    --color-white: rgba(235, 235, 238, 1);                  /* #ebebee */
    --color-white-05: rgba(235, 235, 238, 0.05);
    --color-white-15: rgba(235, 235, 238, 0.15);
    --color-white-40: rgba(235, 235, 238, 0.4);
    --color-black: rgba(11, 10, 21, 1);                     /* #0b0a15 */
    --color-black-30: rgba(11, 10, 21, 0.3);

    --color-neutral-300: rgba(212, 212, 222, 1);            /* #d4d4de */
    --color-neutral-500: rgba(159, 156, 176, 1);            /* #9f9cb0 */
    --color-neutral-800: rgba(102, 98, 117, 1);

    --color-violet-300: rgba(187, 191, 244, 1);             /* #bbbff4 */
    --color-violet-300-12: rgba(187, 191, 244, 0.12);       /* card border */
    --color-violet-300-20: rgba(187, 191, 244, 0.20);
    --color-violet-900: rgba(65, 55, 120, 1);

    --color-peach-300: rgba(251, 163, 149, 1);              /* #fba395 */
    --color-peach-300-60: rgba(251, 163, 149, 0.6);
    --color-peach-300-80: rgba(251, 163, 149, 0.8);

    /* Chart palette (admin token.css §2) — gradient endpoint pairs. */
    --color-chart-salmon-start: #FBA395; --color-chart-salmon-end: #3F2C29;
    --color-chart-violet-start: #BBBFF4; --color-chart-violet-end: #33354B;
    --color-chart-yellow-start: #FCD2A8; --color-chart-yellow-end: #4C3D2D;
    --color-chart-red-start:    #E67387; --color-chart-red-end:    #552A31;
    --color-chart-green-start:  #A8F3B6; --color-chart-green-end:  #3B5740;
    --color-chart-purple-start: #CD91FB; --color-chart-purple-end: #372446;
    --color-chart-pink-start:   #FB97BB; --color-chart-pink-end:   #593441;
    --color-chart-brown-start:  #C6926C; --color-chart-brown-end:  #32251B;

    --gradient-chart-salmon: linear-gradient(180deg, var(--color-chart-salmon-start), var(--color-chart-salmon-end));
    --gradient-chart-violet: linear-gradient(180deg, var(--color-chart-violet-start), var(--color-chart-violet-end));
    --gradient-chart-yellow: linear-gradient(180deg, var(--color-chart-yellow-start), var(--color-chart-yellow-end));
    --gradient-chart-red:    linear-gradient(180deg, var(--color-chart-red-start),    var(--color-chart-red-end));
    --gradient-chart-green:  linear-gradient(180deg, var(--color-chart-green-start),  var(--color-chart-green-end));
    --gradient-chart-purple: linear-gradient(180deg, var(--color-chart-purple-start), var(--color-chart-purple-end));
    --gradient-chart-pink:   linear-gradient(180deg, var(--color-chart-pink-start),   var(--color-chart-pink-end));
    --gradient-chart-brown:  linear-gradient(180deg, var(--color-chart-brown-start),  var(--color-chart-brown-end));

    /* ---------- Semantic tokens (admin token.css @theme aliases) ---------- */
    --color-fg-primary-rest: var(--color-neutral-300);
    --color-fg-primary-active: var(--color-white);
    --color-fg-primary-deactivated: var(--color-white-40);

    --color-fg-tertiary-rest: var(--color-neutral-500);
    --color-fg-tertiary-active: var(--color-white);

    --color-stroke-tertiary-rest: var(--color-violet-300-12);
    --color-stroke-tertiary-active: var(--color-neutral-300);

    /* ---------- Surfaces ----------
       Page surface gradient is the exact value from the Figma B2B file
       (linear-gradient(122.85deg, #32353E 46.08%, #0F1219 66.09%)).
       Solid Card surface is from card.module.css.
       Translucent StatCard surface is from stat-card/index.tsx. */
    --bg-surface-page: linear-gradient(122.85deg, #32353E 46.08%, #0F1219 66.09%);
    --bg-card-solid: #191828;                               /* admin Card */
    --bg-card-translucent: linear-gradient(117deg, rgba(50, 53, 62, 0.40) -4.34%, rgba(15, 18, 25, 0.40) 98.78%);

    /* ---------- Buttons (admin button/index.tsx) ---------- */
    --gradient-button-primary:
        radial-gradient(54.09% 195.21% at 92.23% -4.17%, rgba(187, 191, 244, 0.20) 0%, rgba(107, 95, 231, 0.60) 100%),
        radial-gradient(57.49% 47.97% at 0% 50%, #BBBFF4 0%, #413778 100%);
    --gradient-button-primary-hover:
        linear-gradient(0deg, rgba(3, 1, 14, 0.20) 0%, rgba(3, 1, 14, 0.20) 100%),
        radial-gradient(54.09% 195.21% at 92.23% -4.17%, rgba(187, 191, 244, 0.20) 0%, rgba(107, 95, 231, 0.60) 100%),
        radial-gradient(57.49% 47.97% at 0% 50%, #BBBFF4 0%, #413778 100%);
    --shadow-button-primary-inset: inset 0 16px 4.5px -14px var(--color-violet-300);
    --shadow-button-secondary-inset: inset 0 16px 4.5px -14px var(--color-white-15);

    /* ---------- Type ----------
       Inter Tight is admin's primary font (_theme/main.less). Loaded by
       the layout's existing <link rel="stylesheet" href="rsms.me/inter">
       and Google Fonts. */
    --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---------- Layout rhythm ---------- */
    --space-section: 64px;
    --inner-max: 1240px;
    --radius-sm: 8px;          /* admin Card / Button */
    --radius-md: 12px;         /* StatCard, modal */
    --radius-lg: 24px;         /* admin section-wrapper rounded-3xl — large outer panels */
    --radius-pill: 999px;      /* badges, sticky CTA bar */

    /* Peach top-stripe — appears on highlighted panels in the admin
       Figma file (e.g. "Add artists" panel header in B2B Artist
       Management node 360:45213). 4px gradient bar that bleeds the
       peach brand color into the panel surface. */
    --gradient-peach-stripe:
        linear-gradient(90deg, rgba(251, 163, 149, 0.0) 0%,
                                rgba(251, 163, 149, 0.45) 30%,
                                rgba(251, 163, 149, 0.65) 50%,
                                rgba(251, 163, 149, 0.45) 70%,
                                rgba(251, 163, 149, 0.0) 100%);
}

/* =========================================================
   1. BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* Polish: any centered text gets balanced wrapping so 2-3 line
   headings/copy don't end with a single-word last line. */
.centered,
[style*="text-align: center"],
[style*="text-align:center"],
.title-top h1,
.title-top h2,
.title-top h3,
.title-top p {
    text-wrap: balance;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-black);
    color: var(--color-fg-primary-active);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0.2px;
    font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    /* Welcome-flow ambient lighting — actual PNG images extracted from
       the Figma B2B file (lszh26.../node 360:45213, the Artists empty
       state's bg group). aurora-top sits at the upper-right corner with
       a soft purple streak + sparkle particles; aurora-bottom adds a
       subtle warm glow at the bottom-right. These are the same images
       used on the actual /welcome and /registration pages.

       Layered on top of the page surface gradient. background-attachment:
       fixed keeps them anchored to the viewport (so the streaks stay in
       the upper-right as the user scrolls), without any transform or
       filter that could interact unpredictably across browsers. */
    background:
        url('/resources/images/b2b-admin-bg/aurora-top.png') top right / 56vw auto no-repeat fixed,
        url('/resources/images/b2b-admin-bg/aurora-bottom.png') bottom right / 70vw auto no-repeat fixed,
        var(--bg-surface-page);
    background-attachment: fixed, fixed, fixed;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-violet-300); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--color-fg-primary-active); }

p { margin: 0 0 1em; }

/* Admin typography utilities (token.css @utility text-*).
   Sizes come from Figma Font/Size/* variables. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    color: var(--color-fg-primary-active);
    line-height: 1.2;
    font-weight: 500;
}
h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
/* Section H2 — marketing-scale (admin H2 is 24/28/0.6 for in-app
   panel headers; on a marketing page sections deserve more
   presence so the reader gets a clear hierarchy as they scroll). */
h2 {
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.005em; font-weight: 500; }
h4 { font-size: 17px; line-height: 22px; letter-spacing: 0.7px; }

.h3 { font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: 1px; }
.h4 { font-size: 17px; font-weight: 500; line-height: 22px; letter-spacing: 0.7px; }
.text-md, p.small { font-size: 15px; line-height: 21px; letter-spacing: 0.6px; }
.text-s { font-size: 13px; line-height: 19px; letter-spacing: 0.5px; }

ul, ol { padding-left: 1.25rem; margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

.seo-title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================
   2. LAYOUT WRAPPERS
========================================================= */
.wrapper { width: 100%; }
.symbols-bg-wrapper { position: relative; }
.symbols-bg, .top-left-image { display: none; }

.inner-wrapper {
    width: 100%;
    max-width: var(--inner-max);
    padding: 0 24px;
    margin: 0 auto;
}

.flex { display: flex; gap: 24px; }
.flex.col2 > * { flex: 1 1 0; min-width: 0; }

.section-margin-bottom { margin-bottom: var(--space-section); }
/* Section title block uses a SMALLER bottom margin than between
   sections themselves — keeps the heading + intro copy visually
   coupled to the section content. */
.title-top.section-margin-bottom { margin-bottom: 40px; }
.content-margin-top { margin-top: 32px; }
.text-center { text-align: center; }

.title-top {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}
/* Tight rhythm INSIDE the title block:
     eyebrow → 16px → h2 → 16px → subtitle
   The block as a whole sits 56px above its section content. */
.title-top > .audience-eyebrow {
    margin-bottom: 16px;
}
.title-top h2 {
    margin: 0 0 16px;
    color: var(--color-fg-primary-active);
    text-wrap: balance;
}
.title-top > .section-subtitle {
    margin-top: 0;
}

.section-subtitle {
    color: var(--color-fg-primary-rest);
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.4px;
    max-width: 720px;
    margin: 0 auto;
    text-wrap: pretty;
}
.section-subtitle.centered {
    text-align: center;
    text-wrap: balance;
}
.section-subtitle strong {
    color: var(--color-fg-primary-active);
    font-weight: 500;
}

/* Apply text-wrap: balance globally to centered headings and
   paragraphs so multi-line marketing copy breaks evenly across
   lines instead of leaving short orphan lines. text-wrap: pretty
   is used on body paragraphs to avoid orphans without forcing
   a balanced visual. */
.text-center,
.text-center h2,
.text-center h3,
.text-center p,
.title-top h1,
.title-top h2,
.title-top h3,
.title-top p,
.title-top .audience-eyebrow,
.cta-section .title-top h2,
.problems-closing,
.referral-feature-subhead,
.pricing-highlight-heading,
.pricing-highlight-desc,
.pricing-included-title,
.pricing-included-subtitle,
.referral-feature-header h3,
.guarantee-title,
.guarantee-desc,
.mid-cta-text,
.data-ownership-title,
.data-ownership-desc,
.data-ownership-caption,
.further-reading-title,
.faq-panel-title,
.referral-funding-q,
.referral-funding-source,
.referral-funding-note,
.three-pillars-card-title,
.three-pillars-card-desc {
    text-wrap: balance;
}
/* For any centered paragraph wrapping more than ~3 lines, pretty
   gives a better orphan/widow result than balance. */
.section-subtitle,
.problems-closing,
.referral-feature-subhead,
.pricing-highlight-desc,
.guarantee-desc,
.data-ownership-desc {
    text-wrap: pretty;
}

/* SectionBadge — exact spec from admin/src/shared/ui/section-badge:
   28px pill, #292C34 fill, 15px medium 0.6px tracking. */
.audience-eyebrow,
.hero-audience-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 16px;
    background: #292C34;
    color: var(--color-fg-primary-rest);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.6px;
    border-radius: var(--radius-pill);
    margin: 0 0 24px;
    text-transform: none;
}

/* Photo strip — full-bleed event photo with rounded corners (so
   the photo reads as a self-contained moment, not a cropped band).
   Top + bottom gradient fades stitch the photo into the surface. */
.section-photo-strip {
    position: relative;
    margin: 40px auto;
    width: 100%;
    max-width: var(--inner-max);
    padding: 0 24px;
    overflow: visible;
    height: 320px;
}
.section-photo-strip::before,
.section-photo-strip::after {
    content: '';
    position: absolute;
    left: 24px; right: 24px;
    height: 56px;
    pointer-events: none;
    z-index: 1;
    border-radius: var(--radius-lg);
}
.section-photo-strip::before {
    top: 0;
    background: linear-gradient(180deg, rgba(11, 10, 21, 0.4) 0%, transparent 100%);
}
.section-photo-strip::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(11, 10, 21, 0.4) 0%, transparent 100%);
}
.section-photo-strip > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-stroke-tertiary-rest);
}
.section-photo-strip--tall { height: 440px; }

/* Captioned variant (Majahuitas client showcase): the image keeps the strip
   height while the figure grows to seat a logo + caption beneath it. Drop the
   edge-gradient overlays since there's no longer text over the photo. */
/* `figure.` (0,1,1) outranks b2b/responsive.css's `.section-photo-strip
   { height: … }` (0,1,0), which loads later and would otherwise re-fix the
   height at the 1024/768 breakpoints and clip the caption. */
figure.section-photo-strip--captioned { height: auto; }
.section-photo-strip--captioned > img { height: 320px; }
.section-photo-strip--captioned::before,
.section-photo-strip--captioned::after { display: none; }
.section-photo-caption {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.section-photo-caption-logo { height: 28px; width: auto; opacity: 0.9; }
.section-photo-caption-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-fg-tertiary-rest);
    font-family: var(--font-sans);
}
@media (max-width: 768px) {
    .section-photo-strip--captioned > img { height: 240px; }
}
@media (max-width: 480px) {
    .section-photo-strip--captioned > img { height: 180px; }
    .section-photo-caption-logo { height: 24px; }
    .section-photo-caption-text { font-size: 13px; }
}

.gradient-orange-text {
    background: linear-gradient(90deg, var(--color-peach-300) 0%, #FFCFC4 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* =========================================================
   3. HEADER + NAV
   ---------------------------------------------------------
   Admin app-shell pattern (Figma B2B node 360:45213): logo at far
   left, nav items pinned right. The translucent surface uses the
   same blur intensity as the admin top-bar but is heavier when
   scrolled. The .scrolled class is JS-toggled.
========================================================= */
header[role="banner"] {
    position: sticky; top: 0; z-index: 100;
    padding: 14px 0;
    background: rgba(11, 10, 21, 0.6);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: background 200ms ease, border-color 200ms ease, padding 200ms ease;
}
header[role="banner"].scrolled {
    padding: 10px 0;
    background: rgba(11, 10, 21, 0.85);
    border-bottom-color: var(--color-stroke-tertiary-rest);
}
header .inner-wrapper.flex { align-items: center; justify-content: space-between; }
.navbar-brand img { height: 28px; width: auto; transition: opacity 120ms ease; }
.navbar-brand:hover img { opacity: 0.85; }

header nav { margin-left: auto; }
header nav ul {
    display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 0; list-style: none;
}
/* Match the sticky-CTA nav-link treatment: plain text on a
   transparent surface, hover lights up with a white-5 wash on
   a soft-radius rounded background. Brighter base color than
   before so items read as nav-equivalent to the sticky bar. */
header nav a {
    position: relative;
    color: var(--color-fg-primary-rest);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: color 120ms ease, background 120ms ease;
    white-space: nowrap;
}
header nav a:hover,
header nav a:focus-visible {
    color: var(--color-fg-primary-active);
    background: var(--color-white-05);
    outline: none;
}
header nav a[aria-current="page"]::after,
header nav .nav-active a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 4px;
    background: var(--color-peach-300);
    box-shadow:
        0 4px 12px rgba(251, 163, 149, 0.6),
        0 2px 6px rgba(251, 163, 149, 0.6);
}

/* Utility nav links (Existing Client?, Find Events) — share the
   same hover wash and padded rhythm as the primary nav items so
   the whole header reads as one consistent nav row. Color stays
   distinct: tertiary for secondary, peach for the outbound primary. */
.nav-cta-secondary a,
.nav-cta-primary a {
    color: var(--color-fg-tertiary-rest);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: color 120ms ease, background 120ms ease;
}
.nav-cta-secondary { margin-left: 12px; }
.nav-cta-secondary a:hover,
.nav-cta-primary a:hover {
    color: var(--color-fg-primary-active);
    background: var(--color-white-05);
}
.nav-cta-primary a {
    /* Subtle peach tint on the "Find Events" outbound — signals it
       leaves to the consumer site, matching admin's outbound-link
       treatment without making it a heavy pill. */
    color: var(--color-peach-300);
}
.nav-cta-primary a:hover {
    color: #FFCFC4;
}

/* TF3 banner — admin announcement pill. Plain. */
.tf3-banner {
    margin: 16px auto 0;
    padding: 0 24px;
    max-width: var(--inner-max);
    text-align: center;
}
.tf3-banner-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    color: var(--color-fg-primary-rest);
    transition: border-color 200ms ease, color 200ms ease;
}
.tf3-banner-link:hover {
    border-color: var(--color-violet-300-20);
    color: var(--color-fg-primary-active);
}
.tf3-banner-tag {
    display: inline-flex;
    align-items: center;
    background: var(--color-violet-300);
    color: #1C1933;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}
.tf3-banner-arrow {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
}

/* Mobile menu icon (shown <= 768) */
.mobile-menu-icon {
    display: none;
    background: transparent;
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: 6px;
    width: 36px; height: 36px; padding: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
}
.mobile-menu-icon span { width: 16px; height: 1.5px; background: var(--color-fg-primary-active); border-radius: 1px; }
.mobile-menu-icon span:last-child { display: none; }

/* Mobile bottom nav */
.mobile-bottom-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: rgba(11, 10, 21, 0.92);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--color-stroke-tertiary-rest);
    transition: transform 240ms ease;
}
.mobile-bottom-nav--offscreen { transform: translateY(100%); }
.mobile-bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px;
    color: var(--color-fg-tertiary-rest);
    font-size: 11px; font-weight: 500;
}
.mobile-bottom-nav-item i { font-size: 16px; }
.mobile-bottom-nav-item.active { color: var(--color-violet-300); }

/* =========================================================
   4. BUTTONS — admin button/index.tsx
========================================================= */
/* Default = Primary (violet radial gradient). Bumped from 44px
   to 48px on the page-level CTAs so the primary button reads as
   a substantial conversion target. Sticky-bar buttons override
   back to 36px. */
.button {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    min-height: 48px;
    min-width: 4.5rem;
    padding: 0 24px;
    border-radius: var(--radius-sm);
    border: 1.3px solid rgba(235, 235, 238, 0.5);
    background: var(--gradient-button-primary);
    box-shadow: var(--shadow-button-primary-inset);
    color: var(--color-fg-primary-active) !important;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, transform 100ms ease;
    cursor: pointer;
    white-space: nowrap;
    appearance: none; -webkit-appearance: none;
}
.button:hover {
    background: var(--gradient-button-primary-hover);
    color: var(--color-fg-primary-active) !important;
    border-color: rgba(235, 235, 238, 0.5);
}
.button:focus-visible {
    outline: 2px solid var(--color-fg-primary-active);
    outline-offset: 2px;
    border-color: var(--color-neutral-300);
}
.button:active { opacity: 0.85; }

/* Aliases — the layout's gradient-* class is just a label for the
   primary CTAs that funnel into /welcome. Keeps the existing markup
   working without changes. */
.button.gradient-purple { /* base */ }

/* Secondary peach — admin Button variant=secondary.
   1.3px peach-80 border, peach-10 fill, white-15 inset highlight, blur-20. */
.button.gradient-orange,
.button.button-outline.open-modal {
    border: 1.3px solid var(--color-peach-300-80);
    background: rgba(251, 163, 149, 0.10);
    box-shadow: var(--shadow-button-secondary-inset);
    color: var(--color-fg-primary-rest) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.button.gradient-orange:hover,
.button.button-outline.open-modal:hover {
    background: radial-gradient(41.17% 100% at 50% 100%, rgba(251, 163, 149, 0.10) 0%, rgba(251, 163, 149, 0.05) 100%);
    border-color: var(--color-peach-300-80);
    box-shadow: var(--shadow-button-secondary-inset);
}

/* Tertiary outline — admin Button variant=tertiary.
   white-5 fill, violet-12 border, blur-20, hover inset violet glow. */
.button.button-outline {
    border: 1.3px solid var(--color-stroke-tertiary-rest);
    background: var(--color-white-05);
    box-shadow: none;
    color: var(--color-fg-primary-active) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.button.button-outline:hover {
    border-color: var(--color-violet-300-20);
    background: var(--color-white-05);
    box-shadow: inset 4px 4px 20px 0 var(--color-violet-300-12);
}

.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* =========================================================
   5. HERO
   ---------------------------------------------------------
   2-column above-the-fold layout: headline + CTAs + TC quote
   on the LEFT, dashboard preview on the RIGHT (so the product
   is visible without scrolling). Benefits row spans full width
   below. .hero-grid uses display: contents so its children
   (.hero-content, .hero-platform) become direct grid items of
   .inner-wrapper without requiring a template change.
========================================================= */
#hero {
    padding: 64px 0 48px;
}
#hero .inner-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    /* Hero restructure: headings (.hero-content) sit next to the
       photo (.hero-platform) on the top row; the TC quote + the
       4-up benefits row are full-width below. */
    grid-template-areas:
        "content  photo"
        "quote    quote"
        "benefits benefits";
    gap: 56px 56px;
    align-items: center;
}
#hero .hero-grid { display: contents; }
.hero-content { grid-area: content; }
.hero-platform { grid-area: photo; }
#hero > .inner-wrapper > .hero-quote,
#hero > .inner-wrapper > .hero-quote-v6 { grid-area: quote; }
#hero > .inner-wrapper > ul.hero-benefits { grid-area: benefits; }

.hero-content {
    max-width: 600px;
    margin: 0;
    text-align: left;
}
.hero-content h2 {
    /* Smaller max (was 3.25rem) so the hero stays above the fold
       after the extra breathing space on margin + line-height. */
    font-size: clamp(1.875rem, 3.2vw, 2.875rem);
    line-height: 1.15;
    margin: 20px 0 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--color-fg-primary-active);
}
.hero-platform-desc {
    color: var(--color-fg-primary-rest);
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.2px;
    margin: 0 0 36px;
    max-width: 560px;
}

#main-ctas-container { margin-bottom: 24px; }
#main-ctas {
    justify-content: flex-start;
    gap: 14px;
}
.no-setup-fees {
    margin-top: 14px;
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    letter-spacing: 0.2px;
    line-height: 19px;
}

/* Hero "watch how it works" text link — low-friction alternative to the
   Book Demo Call button; opens the overview-video modal (.js-watch-video). */
.hero-video-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-peach-300);
}
.hero-video-link:hover { text-decoration: underline; }
.hero-video-link i { font-size: 18px; }

/* Row holding the hero's low-friction tertiary CTAs (video + live demo). */
.hero-tertiary-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 28px;
}

/* Hero quote — admin StatCard surface, simple. Compact in the
   left column of the new 2-col hero so it doesn't push the rest
   of the hero below the fold. */
.hero-quote, .hero-quote-v6 {
    margin: 28px 0 0;
    max-width: 560px;
    padding: 18px 20px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    text-align: left;
}
.hero-quote-text {
    font-size: 17px;
    color: var(--color-fg-primary-active);
    margin: 0 0 14px;
    font-weight: 400;
    line-height: 26px;
    font-style: italic;
    letter-spacing: 0.2px;
}
.hero-quote-attribution {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--color-stroke-tertiary-rest);
}
.hero-quote-attribution-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-fg-secondary-rest);
    font-weight: 600;
}
.hero-quote-attribution img {
    height: 24px;
    width: auto;
    opacity: 1;
    filter: grayscale(0);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: start;
}

/* Hero benefits — 6 cards laid out as a clean 3×2 grid on
   desktop. Auto-fit was creating a 4+2 awkward row. Mobile
   breakpoint collapses to 1 column.

   Selector specificity note: the markup is
     <ul class="hero-benefits feature-list no-bullet">
   The page's generic `.feature-list.no-bullet li { padding-left: 0 }`
   rule has specificity 0,2,1 — higher than `ul.hero-benefits li`
   at 0,1,2 — and was wiping our left padding. Adding the
   .feature-list and .no-bullet classes to our selector raises
   specificity to 0,3,2 so OUR padding wins. */
ul.hero-benefits {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    /* Benefits now sit full-width below the photo+headings grid,
       so go 4-col instead of the prior 2x2 (which fit in a half-
       width column). */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
ul.hero-benefits.feature-list.no-bullet li,
ul.hero-benefits li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 24px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    transition: border-color 200ms ease;
}
ul.hero-benefits.feature-list.no-bullet li:hover,
ul.hero-benefits li:hover {
    border-color: var(--color-violet-300-20);
}
ul.hero-benefits li i {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-fg-primary-active);
    font-size: 16px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
}
ul.hero-benefits li strong {
    color: var(--color-fg-primary-active);
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.7px;
}
ul.hero-benefits li span {
    color: var(--color-fg-primary-rest);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.5px;
}
ul.hero-benefits li > span { display: block; }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list.no-bullet li { padding-left: 0; }
.feature-list li {
    padding: 8px 0;
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.6px;
    display: flex; gap: 10px; align-items: baseline;
}
.feature-list li i {
    color: var(--color-violet-300);
    font-size: 13px;
    flex: 0 0 auto;
}
.icon-spin-hover { transition: transform 240ms ease; }
.feature-list li:hover .icon-spin-hover { transform: rotate(8deg) scale(1.05); }

.hero-platform { width: 100%; }
.platform-preview {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-stroke-tertiary-rest);
    background: var(--bg-card-solid);
}

/* Watch-platform section — two distinct CTAs:
   (1) "Learn more about Ticket Fairy" video card — Vimeo modal.
   (2) Dashboard screenshot — click-to-open interactive demo modal
       (lazy-loads embed.js from demo.ticketfairy.com). */
.watch-platform-section .watch-platform-title {
    text-align: center;
    margin-bottom: 24px;
}
.watch-platform-video-cta {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.watch-video-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px 14px 18px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    color: var(--color-fg-primary-active);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.watch-video-card:hover,
.watch-video-card:focus-visible {
    border-color: var(--color-peach-300);
    transform: translateY(-1px);
    outline: none;
}
.watch-video-card-play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-peach-300);
    color: var(--color-fg-on-accent, #0b0a15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.watch-video-card-play i { font-size: 14px; margin-left: 2px; }
.watch-video-card-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}
.watch-video-card-label { font-size: 16px; font-weight: 600; }
.watch-video-card-duration {
    font-size: 13px;
    color: var(--color-fg-secondary-rest);
    margin-top: 2px;
}
.watch-platform-wrapper {
    /* Capped at 700px so the lower-res rotating screenshots aren't upscaled. */
    max-width: 700px;
    margin: 0 auto;
}
.dashboard-demo-trigger {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 1px solid var(--color-stroke-tertiary-rest);
    background: var(--bg-card-solid);
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.dashboard-demo-trigger:hover,
.dashboard-demo-trigger:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-violet-300);
    outline: none;
}
.dashboard-demo-trigger .main-preview { display: block; width: 100%; height: auto; }
.dashboard-demo-cta-overlay {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(11, 10, 21, 0.78);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    z-index: 2;
}

/* Interactive dashboard preview — 3-screenshot crossfade. First image
   stays in flow (sets frame height from its 1400x996 aspect); the other
   two stack absolutely and crossfade with object-fit: cover. */
.dashboard-preview-rotator {
    position: relative;
    display: block;
    width: 100%;
}
.dashboard-preview-rotator .dashboard-preview-img {
    width: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    animation: dashboard-rotator-fade 12s ease-in-out infinite;
}
.dashboard-preview-rotator .dashboard-preview-img:first-child {
    position: relative;
    height: auto;
}
.dashboard-preview-rotator .dashboard-preview-img:not(:first-child) {
    position: absolute;
    inset: 0;
    height: 100%;
}
.dashboard-preview-rotator .dashboard-preview-img:nth-child(1) { animation-delay: -1s; }
.dashboard-preview-rotator .dashboard-preview-img:nth-child(2) { animation-delay: 3s; }
.dashboard-preview-rotator .dashboard-preview-img:nth-child(3) { animation-delay: 7s; }
@keyframes dashboard-rotator-fade {
    0%   { opacity: 0; }
    7%   { opacity: 1; }
    33%  { opacity: 1; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-preview-rotator .dashboard-preview-img { animation: none; opacity: 0; }
    .dashboard-preview-rotator .dashboard-preview-img:first-child { opacity: 1; }
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.dashboard-demo-modal .modal-content,
.overview-video-modal .modal-content {
    max-width: 1400px;
    width: min(95vw, 1400px);
    padding: 24px;
}
.dashboard-demo-modal .modal-content .close,
.overview-video-modal .modal-content .close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    padding: 10px 16px 10px 14px;
    top: 16px;
    right: 16px;
    border-radius: var(--radius-pill);
    background: rgba(11, 10, 21, 0.85);
    border: 1px solid var(--color-stroke-tertiary-rest);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    z-index: 5;
}
.dashboard-demo-modal .modal-content .close:hover,
.dashboard-demo-modal .modal-content .close:focus-visible,
.overview-video-modal .modal-content .close:hover,
.overview-video-modal .modal-content .close:focus-visible {
    background: rgba(11, 10, 21, 0.98);
    border-color: var(--color-peach-300);
    outline: none;
}
.dashboard-demo-modal .modal-content .close .close-label,
.overview-video-modal .modal-content .close .close-label {
    font-size: 14px;
}
.dashboard-demo-host {
    min-height: 720px;
    margin-top: 8px;
}
.overview-video-iframe-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 8px;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.overview-video-iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hero photo — a humanity-first design element. b2b spec: same
   admin-card framing as .platform-preview but distinct so the
   photo doesn't get the click-to-play cursor or dashboard aspect-
   ratio crop. */
/* Stretch the photo column to match the content column's height. */
.hero-grid:has(.hero-photo) {
    align-items: stretch;
}
.hero-grid:has(.hero-photo) .hero-platform {
    align-self: stretch;
    align-items: stretch;
    /* See contact-us-v6/main.css for rationale: without these the
       img's intrinsic height blows up the grid row via min-content
       sizing. */
    min-height: 0;
    min-width: 0;
}
.hero-photo {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-stroke-tertiary-rest);
    background: var(--bg-card-solid);
}
/* Tablet + mobile: grid collapses to single column at 1024px so
   .hero-photo no longer has a parent-defined height. Fall back to
   aspect ratio. */
@media (max-width: 1024px) {
    .hero-photo {
        height: auto;
        aspect-ratio: 16 / 10;
    }
}
.hero-photo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
}
.video-thumbnail {
    position: relative;
    aspect-ratio: 1400 / 996;
    overflow: hidden;
    cursor: pointer;
}
.video-thumbnail .main-preview { width: 100%; height: 100%; object-fit: cover; }
.video-play-btn {
    position: absolute;
    bottom: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 8px;
    background: rgba(11, 10, 21, 0.7);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    color: var(--color-fg-primary-active);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.video-play-btn:hover {
    background: rgba(11, 10, 21, 0.85);
    border-color: var(--color-violet-300-20);
}
.video-play-btn-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-violet-300);
    color: #1C1933;
    display: inline-flex; align-items: center; justify-content: center;
}
.video-play-btn-duration {
    color: var(--color-fg-tertiary-rest);
    font-size: 12px;
    letter-spacing: 0.5px;
}

.video-embed { position: relative; aspect-ratio: 16/9; width: 100%; }
.video-embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: var(--radius-md);
}

/* =========================================================
   6. LOGOS / STATS BAR
========================================================= */
#logos { padding: 48px 0; }
.stats-bar-tagline {
    text-align: center;
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 32px;
    font-weight: 500;
}

/* Logos rail — flex-wrap with even spacing so we don't end up with
   awkward "5 logos top row, 4 logos bottom row" splits. Each logo
   gets a generous min-width and they wrap together as a band. */
.grid-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 48px;
    margin: 0 auto 48px;
    padding: 0 8px;
}
.grid-logos img {
    flex: 0 0 auto;
    /* The template injects inline `style="width:Xpx; height:auto"` +
       `width="X" height="40"` HTML attrs on each logo. With my CSS
       max-height: 32px, those would force the image to 120px×32px
       (stretched, breaks aspect ratio). Force width:auto + height:auto
       with !important so the only constraint is max-height, which
       preserves aspect ratio. */
    width: auto !important;
    height: auto !important;
    max-height: 32px;
    max-width: 160px;
    opacity: 0.55;
    filter: grayscale(1) brightness(1.6);
    transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;
    margin: 0;
}
.grid-logos img:hover {
    opacity: 0.95;
    filter: grayscale(0) brightness(1);
    transform: scale(1.05);
}

/* Stats bar — admin StatCard rail. 4 metrics with hairline
   dividers between, no per-cell card chrome. */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 28px 24px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
}
.stats-bar-item {
    position: relative;
    text-align: center;
    padding: 8px 24px;
}
/* Vertical hairline divider between stat items, matching admin's
   inline metric-strip (no per-cell card chrome — just a divider). */
.stats-bar-item + .stats-bar-item::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 1px;
    background: var(--color-stroke-tertiary-rest);
    pointer-events: none;
}
.stats-bar-value {
    font-size: clamp(1.875rem, 2.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-fg-primary-active);
    font-family: var(--font-sans);
}
.stats-bar-label {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-fg-tertiary-rest);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 8px;
    font-weight: 500;
}

/* =========================================================
   7. PROBLEMS GRID + FEATURE CARDS
   All feature-containers use the admin StatCard pattern.
========================================================= */
.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.problems-grid > .feature-container {
    /* Flex column so .problems-card-solution can margin-top: auto
       and align flush at the bottom across all 3 cards. */
    display: flex;
    flex-direction: column;
}
.feature-container {
    padding: 28px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    transition: border-color 200ms ease;
}
.feature-container:hover {
    border-color: var(--color-violet-300-20);
}
.feature-container.feature-container--compact { padding: 28px; }
/* Inline SVG charts inside the 2-col feature grid (Cashflow,
   Revenue Optimisation, Data Ownership) — soft inner panel so
   the SVG reads as a "data card" rather than a floating
   illustration. */
.feature-container.feature-container--compact > svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 24px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    padding: 12px;
}
.feature-container.feature-container--compact h3 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.005em;
    margin: 0 0 16px;
    font-weight: 600;
    color: var(--color-fg-primary-active);
}
/* List items inside compact feature cards.
   Translation strings embed inline HTML — <strong>, <a> — directly
   inside each <li>. With display:flex on the <li>, every child
   (icon, strong, text node, link) becomes a separate flex item,
   producing the 3-column tabular look the user flagged. Fix: use
   block display on the <li> with the icon absolute-positioned in
   a left rail, so the rest of the content (label + body + link)
   flows as natural inline text. */
.feature-container.feature-container--compact .feature-list { margin: 0; }
.feature-container.feature-container--compact .feature-list li {
    display: block;
    position: relative;
    padding: 8px 0 8px 30px;
    color: var(--color-fg-primary-rest);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.4px;
}
.feature-container.feature-container--compact .feature-list li > i:first-child {
    position: absolute;
    left: 0;
    top: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 1;
    color: var(--color-fg-tertiary-rest);
    font-size: 11px;
}
.feature-container.feature-container--compact .feature-list li > i:first-child::before {
    vertical-align: 0;
}
.feature-container.feature-container--compact .feature-list li strong {
    color: var(--color-fg-primary-active);
    font-weight: 500;
}
.feature-container.feature-container--compact .feature-list li a {
    color: var(--color-fg-primary-active);
    border-bottom: 1px dotted var(--color-violet-300-20);
    transition: color 120ms ease, border-color 120ms ease;
}
.feature-container.feature-container--compact .feature-list li a:hover {
    color: var(--color-peach-300);
    border-bottom-color: var(--color-peach-300);
}
.feature-container h3 {
    color: var(--color-fg-primary-active);
    font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.6px;
    margin: 0 0 12px;
}

/* Card lead row: icon chip + number chip, side-by-side.
   Icon sits first as the topic indicator (matches admin's
   section-icon-title pattern); number is the secondary
   sequence chrome on the right. Both align by their
   vertical center; 12px horizontal gap between them. */
.problems-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 12px 16px 0;
    vertical-align: middle;
}
.problems-card-icon-i {
    color: var(--color-fg-primary-active);
    font-size: 16px;
}
.problems-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-fg-tertiary-rest);
    background: transparent;
    border: 1px solid var(--color-violet-300-12);
    border-radius: var(--radius-pill);
    letter-spacing: 0.6px;
    margin: 0 0 16px 0;
    vertical-align: middle;
}
/* Per-card palette accent — JUST on the icon chip's border + glyph
   colour. The card surface, number badge, title, and body all stay
   neutral, so the section gets visual differentiation between the
   3 challenges without any single card feeling overdesigned. Pattern
   used by Stripe's problem-statement cards: subtle palette accent
   on one element, not the whole card. */
.problems-grid > .feature-container:nth-child(1) .problems-card-icon {
    background: rgba(187, 191, 244, 0.10);
    border-color: rgba(187, 191, 244, 0.32);
}
.problems-grid > .feature-container:nth-child(1) .problems-card-icon-i {
    color: var(--color-violet-300);
}
.problems-grid > .feature-container:nth-child(2) .problems-card-icon {
    background: rgba(251, 163, 149, 0.10);
    border-color: rgba(251, 163, 149, 0.32);
}
.problems-grid > .feature-container:nth-child(2) .problems-card-icon-i {
    color: var(--color-peach-300);
}
.problems-grid > .feature-container:nth-child(3) .problems-card-icon {
    background: rgba(205, 145, 251, 0.10);
    border-color: rgba(205, 145, 251, 0.32);
}
.problems-grid > .feature-container:nth-child(3) .problems-card-icon-i {
    color: var(--color-chart-purple-start);
}
.problems-card-title {
    font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.6px;
    margin: 0 0 12px;
    color: var(--color-fg-primary-active);
}
.problems-card-desc {
    color: var(--color-fg-primary-rest);
    font-size: 16px; line-height: 24px; letter-spacing: 0.6px;
    margin: 0;
}
.tilt-shine { display: none; }

.problems-closing-wrap { text-align: center; margin-top: 32px; }
.problems-closing {
    color: var(--color-fg-primary-rest);
    font-size: 17px;
    line-height: 24px;
    max-width: 720px;
    margin: 0 auto;
}

/* =========================================================
   8. REFERRAL FEATURE
========================================================= */
.referral-feature {
    margin-bottom: 48px;
    padding: 32px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
}
.referral-feature-header { text-align: center; margin-bottom: 32px; }
.referral-feature-header h3 {
    font-size: 24px;
    line-height: 28px;
    color: var(--color-fg-primary-active);
    margin: 8px 0 12px;
    letter-spacing: 0.6px;
}
.referral-feature-subhead {
    color: var(--color-fg-primary-rest);
    font-size: 15px; line-height: 21px; letter-spacing: 0.6px;
    max-width: 680px;
    margin: 0 auto;
}

.referral-flow {
    list-style: none; padding: 0;
    margin: 0 0 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 16px;
}
.referral-flow-step {
    padding: 24px 20px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color 200ms ease;
    height: 100%;
}
.referral-flow-step:hover { border-color: var(--color-violet-300-20); }
.referral-flow-step strong {
    display: block;
    color: var(--color-fg-primary-active);
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.6px;
}
.referral-flow-step span {
    color: var(--color-fg-primary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
}
.referral-flow-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-violet-300-12);
    color: var(--color-violet-300);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    font-size: 14px;
    border: 1px solid var(--color-violet-300-12);
}
.referral-flow-step--cashback {
    background: rgba(251, 163, 149, 0.06);
    border-color: rgba(251, 163, 149, 0.24);
}
.referral-flow-step--cashback .referral-flow-icon {
    background: rgba(251, 163, 149, 0.12);
    border-color: rgba(251, 163, 149, 0.30);
    color: var(--color-peach-300);
}

.referral-loop-figure { margin: 0 0 24px; padding: 0; text-align: center; }
.referral-loop-figure svg { width: 100%; max-width: 480px; height: auto; }
.referral-loop-caption { color: var(--color-fg-primary-rest); font-size: 15px; margin-top: 12px; font-weight: 500; text-wrap: balance; }

.referral-bonus {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    color: var(--color-fg-primary-rest);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 0 0 24px;
}
.referral-bonus i {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--color-fg-tertiary-rest);
}

.referral-result-box {
    padding: 28px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
}
.referral-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.referral-result-stat { text-align: center; }
.referral-result-stat-num {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 32px;
    color: var(--color-fg-primary-active);
}
.referral-result-stat-label {
    font-size: 13px; color: var(--color-fg-tertiary-rest);
    letter-spacing: 0.5px; margin-top: 4px;
}
.referral-result-text { color: var(--color-fg-primary-rest); font-size: 15px; line-height: 21px; margin: 0; text-align: center; }
.referral-result-text strong { color: var(--color-peach-300); }

/* =========================================================
   9. REVIEWS / TESTIMONIAL
   ---------------------------------------------------------
   Two-column layout. The schema.org <div itemprop="itemReviewed">
   wrapper is invisible structured-data only — hide it from
   layout so it doesn't claim a grid column.
========================================================= */
#reviews {
    margin: 64px 0;
    padding: 48px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
}
.review-box.flex > [itemprop="itemReviewed"] {
    display: none;
}
.review-box.flex {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 48px;
    align-items: start;
}
.review-box.flex > * { flex: initial; }
.testimonial-author {
    display: flex; flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.testimonial-author-photo {
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-stroke-tertiary-rest);
    flex: 0 0 auto;
}
.testimonial-author-photo img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-author-meta strong {
    color: var(--color-fg-primary-active);
    display: block;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.6px;
}
.testimonial-author-role {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 4px;
}
.testimonial-author-verify { display: inline-flex; gap: 8px; margin-top: 4px; }
.testimonial-author-verify-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    color: var(--color-fg-primary-rest);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.5px;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.testimonial-author-verify-link:hover {
    border-color: var(--color-violet-300-20);
    color: var(--color-fg-primary-active);
    background: rgba(235, 235, 238, 0.08);
}

.testimonial-event-photo {
    margin: 0;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-stroke-tertiary-rest);
    aspect-ratio: 16 / 10;
}
.testimonial-event-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Whole body is Jorge's words. Big opening quote mark sits on
   the pull-quote at the top; matching closing mark sits at the
   end so the reader knows where the quote ends. Without the
   closing mark, the supporting paragraphs read as if they could
   be platform editorial commentary. */
.testimonial-body {
    position: relative;
    padding-top: 4px;
    padding-bottom: 56px;
}
.testimonial-body::after {
    content: '\201D';                   /* right double quotation mark */
    position: absolute;
    bottom: -16px;
    right: 0;
    font-family: 'Inter Tight', Georgia, serif;
    font-size: 96px;
    line-height: 1;
    font-weight: 700;
    color: var(--color-violet-300);
    opacity: 0.55;
    pointer-events: none;
}
/* Pull-quote — actual quotation. Large decorative left curly
   quote mark in the top-left corner (Apple / Stripe testimonial
   pattern), then the quote body sits indented. The hairline
   left-border is gone since the quote mark establishes the
   "this is a blockquote" semantic visually. */
.testimonial-pull-quote {
    position: relative;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    line-height: 1.45;
    color: var(--color-fg-primary-active);
    margin: 24px 0 24px;
    padding: 0 0 0 60px;
    border: 0;
    font-weight: 500;
    letter-spacing: -0.005em;
    font-style: normal;
}
.testimonial-pull-quote::before {
    content: '\201C';                   /* left double quotation mark */
    position: absolute;
    top: -32px;
    left: -4px;
    font-family: 'Inter Tight', Georgia, serif;
    font-size: 96px;
    line-height: 1;
    font-weight: 700;
    color: var(--color-violet-300);
    opacity: 0.55;
    pointer-events: none;
}
.testimonial-body p {
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 26px;
    letter-spacing: 0.4px;
    margin-bottom: 14px;
}
.testimonial-body p strong {
    color: var(--color-fg-primary-active);
    font-weight: 500;
}
.testimonial-body p { color: var(--color-fg-primary-rest); font-size: 15px; line-height: 21px; }

/* =========================================================
   10. CAPITAL SECTION
========================================================= */
#capital { margin: 48px 0; }
.capital-container {
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
    padding: 40px;
}
.capital-body {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}
.capital-body-content { position: relative; z-index: 1; }
/* Capital title is the section's actual H3 — promoted from a
   small eyebrow pill ("Ticket Fairy Capital" is the brand name
   of the funding offer, not just a label) to a real heading
   that establishes what the section is about. */
.capital-title {
    display: block;
    color: var(--color-fg-primary-active);
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    height: auto;
}
.capital-body-content > h2,
.capital-body-content > p:first-of-type {
    margin-top: 0;
}
.capital-desc {
    color: var(--color-fg-primary-rest);
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.4px;
    margin: 0 0 28px;
}
.capital-list { margin: 0 0 28px; }
.capital-list-item {
    display: flex; gap: 12px; align-items: center;
    padding: 8px 0;
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.6px;
}
.capital-list-item i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--color-fg-tertiary-rest);
    font-size: 11px;
}
.capital-photo {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-stroke-tertiary-rest);
    aspect-ratio: 4 / 5;
    max-height: 540px;
}
.capital-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =========================================================
   11. DATA OWNERSHIP
========================================================= */
.data-ownership-card {
    padding: 40px;
    text-align: center;
}
.data-ownership-card > svg {
    max-width: 480px;
    margin: 0 auto 24px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    padding: 12px;
    display: block;
    width: 100%;
    height: auto;
}
.data-ownership-caption {
    display: inline-block;
    color: var(--color-fg-tertiary-rest);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
    font-weight: 500;
}
.data-ownership-title {
    color: var(--color-fg-primary-active);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.005em;
    margin: 0 0 12px;
}
.data-ownership-desc {
    color: var(--color-fg-primary-rest);
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 0.6px;
    margin: 0 auto 24px;
    max-width: 600px;
}
.data-ownership-card .feature-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    text-align: left;
    margin: 0 auto;
    max-width: 720px;
}
.data-ownership-card .feature-list li {
    padding: 8px 14px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
}
.data-ownership-card .feature-list li i {
    color: var(--color-violet-300);
    margin-right: 4px;
}

/* Spacing above the "Explore All Platform Features" CTA — sits
   beneath the data-ownership card, needs to breathe so it reads
   as a separate next-step rather than glued to the card edge. */
.explore-features-cta {
    margin-top: 32px;
}

/* =========================================================
   INLINE DEMO BOOKING FORM — admin spec overrides
   ---------------------------------------------------------
   The demo_booking_form partial renders the inline form for the
   "Book a demo call" column on the final CTA section. It's
   styled by contact-us-v6/demo-booking.css (loaded via the
   landing_page;demo_booking_styles partial), which uses its own
   token system and renders a different visual vocabulary than
   the rest of this page. Override here to bring the form into
   the admin design system: same surface as our panels, admin
   Input spec on fields, admin Radiobutton spec on radio groups,
   admin Button primary on the submit.
========================================================= */
#demo-booking-form {
    background: var(--bg-card-translucent) !important;
    border: 1px solid var(--color-stroke-tertiary-rest) !important;
    border-radius: var(--radius-lg) !important;
    padding: 40px !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: none !important;
}
#demo-booking-form h2 {
    color: var(--color-fg-primary-active) !important;
    font-family: var(--font-sans) !important;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    font-weight: 600 !important;
    margin: 0 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
#demo-booking-form h2 i {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    background: var(--color-white-05) !important;
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-primary-active) !important;
    font-size: 16px !important;
    margin: 0 !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--color-fg-primary-active) !important;
}
#demo-booking-form > p {
    color: var(--color-fg-primary-rest) !important;
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    line-height: 26px !important;
    letter-spacing: 0.4px !important;
    margin: 0 0 24px !important;
}
/* Inputs — admin Input spec, 44px height, 8px radius, white-5 fill,
   violet-12 border. Focus: neutral-300 border + soft inset glow. */
#demo-booking-form .form-field-container input[type="text"],
#demo-booking-form .form-field-container input[type="email"],
#demo-booking-form .form-field-container input[type="tel"] {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    background: var(--color-white-05) !important;
    border: 1px solid var(--color-stroke-tertiary-rest) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-fg-primary-active) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    line-height: 21px !important;
    letter-spacing: 0.2px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
#demo-booking-form .form-field-container input::placeholder {
    color: var(--color-fg-primary-deactivated) !important;
    opacity: 1 !important;
}
#demo-booking-form .form-field-container input:hover {
    box-shadow: inset 4px 4px 20px 0 var(--color-violet-300-12) !important;
}
#demo-booking-form .form-field-container input:focus {
    border-color: var(--color-neutral-300) !important;
    background: var(--color-white-05) !important;
    box-shadow: inset 4px 4px 20px 0 var(--color-violet-300-12) !important;
    outline: none !important;
}
#demo-booking-form .form-field-container input.error {
    border-color: rgba(247, 86, 94, 1) !important;
    color: rgba(247, 86, 94, 1) !important;
    box-shadow: none !important;
}
#demo-booking-form .form-field-container label.error {
    color: rgba(247, 86, 94, 1) !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    font-family: var(--font-sans) !important;
}
/* Radio group — admin spec: no contained panel, individual
   options as their own selectable rows with subtle borders. */
#demo-booking-form .radio-group {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
#demo-booking-form .radio-group:focus-within {
    box-shadow: none !important;
    border: 0 !important;
}
#demo-booking-form .radio-label {
    color: var(--color-fg-primary-rest) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}
#demo-booking-form .radio-options {
    gap: 6px !important;
}
#demo-booking-form .radio-option {
    padding: 12px 14px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-white-05) !important;
    border: 1px solid var(--color-stroke-tertiary-rest) !important;
    transition: border-color 120ms ease, background 120ms ease !important;
}
#demo-booking-form .radio-option:hover {
    border-color: var(--color-violet-300-20) !important;
    background: rgba(235, 235, 238, 0.08) !important;
}
#demo-booking-form .radio-option input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--color-fg-tertiary-rest) !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
#demo-booking-form .radio-option input[type="radio"]:checked {
    border-color: var(--color-violet-300) !important;
    background: transparent !important;
}
#demo-booking-form .radio-option input[type="radio"]:checked::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--color-violet-300) !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
#demo-booking-form .radio-option input[type="radio"]:focus {
    box-shadow: none !important;
    outline: 2px solid var(--color-fg-primary-active) !important;
    outline-offset: 2px !important;
}
#demo-booking-form .radio-option span {
    color: var(--color-fg-primary-rest) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    letter-spacing: 0.4px !important;
    transition: color 120ms ease !important;
}
#demo-booking-form .radio-option input[type="radio"]:checked + span {
    color: var(--color-fg-primary-active) !important;
    font-weight: 500 !important;
}
/* Submit button — admin Button primary spec, full-width inside
   the form. */
#demo-booking-form #book-now-form-submit-btn,
#demo-booking-form .button.gradient-purple {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    background: var(--gradient-button-primary) !important;
    border: 1.3px solid rgba(235, 235, 238, 0.5) !important;
    box-shadow: var(--shadow-button-primary-inset) !important;
    color: var(--color-fg-primary-active) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    border-radius: var(--radius-sm) !important;
    margin-top: 24px !important;
    text-align: center !important;
    transition: background 200ms ease, border-color 200ms ease !important;
}
#demo-booking-form #book-now-form-submit-btn:hover,
#demo-booking-form .button.gradient-purple:hover {
    background: var(--gradient-button-primary-hover) !important;
}
#demo-booking-form #book-now-form-submit-btn:disabled,
#demo-booking-form .button.gradient-purple:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}
/* Trust indicators — admin Text-S spec, neutral colour, no
   gradient text-clip on the icons. */
#demo-booking-form .trust-indicators {
    margin-top: 20px !important;
}
#demo-booking-form .trust-indicators .flex {
    gap: 16px !important;
}
#demo-booking-form .trust-badge {
    color: var(--color-fg-tertiary-rest) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    line-height: 19px !important;
    letter-spacing: 0.4px !important;
}
#demo-booking-form .trust-badge i {
    background: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--color-fg-tertiary-rest) !important;
    color: var(--color-fg-tertiary-rest) !important;
    font-size: 14px !important;
}
/* Form message (no events alert) — admin alert spec with peach
   accent matching our other peach-tinted moments. */
#demo-booking-form .form-message {
    background: rgba(251, 163, 149, 0.08) !important;
    border: 1px solid rgba(251, 163, 149, 0.32) !important;
    color: var(--color-fg-primary-rest) !important;
    border-radius: var(--radius-sm) !important;
}
#demo-booking-form .form-message::before {
    color: var(--color-peach-300) !important;
}
#demo-booking-form .form-message p {
    color: var(--color-fg-primary-rest) !important;
}

/* =========================================================
   12. MID CTA — punchy mid-page conversion moment with double-
   sided radial glow + peach top stripe.
========================================================= */
.mid-cta-card {
    text-align: center;
    padding: 56px 32px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
}
.mid-cta-text {
    color: var(--color-fg-primary-active);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0 auto 28px;
    font-weight: 500;
    max-width: 720px;
}
.mid-cta-card .button-row { justify-content: center; }

/* =========================================================
   13. COMPARISON TABLE
========================================================= */
.comparison-table-wrap {
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.comparison-table-v7 { width: 100%; border-collapse: collapse; }
.comparison-th {
    text-align: left;
    padding: 18px 24px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-fg-tertiary-rest);
    background: var(--color-white-05);
    border-bottom: 1px solid var(--color-stroke-tertiary-rest);
}
.comparison-th--ttf {
    color: var(--color-peach-300);
    position: relative;
    /* Highlight the TTF column with a subtle peach accent stripe
       at its left edge — visually telegraphs "this is our column". */
    box-shadow: inset 1px 0 0 rgba(251, 163, 149, 0.18);
}
.comparison-td {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(235, 235, 238, 0.06);
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.6px;
    color: var(--color-fg-primary-rest);
    vertical-align: middle;
}
.comparison-td--feature {
    color: var(--color-fg-primary-active);
    font-weight: 500;
    display: flex; align-items: center; gap: 12px;
    letter-spacing: 0.6px;
}
.comparison-td--feature i {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    color: var(--color-fg-tertiary-rest);
    font-size: 14px;
}
.comparison-td--ttf {
    color: var(--color-fg-primary-active);
    font-weight: 500;
    background: rgba(251, 163, 149, 0.04);
    letter-spacing: 0.6px;
    box-shadow: inset 1px 0 0 rgba(251, 163, 149, 0.16);
}
.comparison-tick { color: var(--color-chart-green-start); margin-right: 8px; }
.comparison-x { color: #BF3D3D; margin-right: 8px; }
.comparison-dash { color: var(--color-fg-tertiary-rest); margin-right: 8px; font-weight: 700; }
/* Subtle row hover so the comparison doesn't feel static. */
.comparison-row-main { cursor: pointer; transition: background 200ms ease; }
.comparison-row-main:hover { background: rgba(235, 235, 238, 0.04); }
/* Comparison row toggle — admin foldable-card pattern
   (admin/src/shared/ui/foldable-card/index.tsx). Transparent button,
   16px caret-down icon, no surrounding border. Caret rotates 180°
   when the row is expanded. */
.comparison-row-toggle {
    margin-left: auto;
    background: var(--color-white-05);
    border: 0;
    color: var(--color-fg-tertiary-rest);
    border-radius: 999px; padding: 5px 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
    transition: color 150ms ease, background 150ms ease;
}
.comparison-row-toggle i { transition: transform 200ms ease; }
.comparison-row-toggle:hover {
    color: var(--color-fg-primary-active);
    background: var(--color-white-05);
}
.comparison-row-toggle:focus-visible {
    outline: none;
    color: var(--color-fg-primary-active);
    box-shadow: 0 0 0 1px var(--color-neutral-300);
}
.comparison-row-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
/* Expanded detail row — admin foldable-card body pattern: faint
   white-5 fill, vertical hairline indent, slightly reduced padding. */
.comparison-row-detail { background: var(--color-white-05); }
.comparison-td-detail {
    padding: 14px 20px 16px 32px !important;
    font-size: 13px;
    color: var(--color-fg-primary-rest);
    line-height: 19px;
    letter-spacing: 0.5px;
    border-left: 1px solid var(--color-violet-300-12);
    margin-left: 16px;
}

/* =========================================================
   14. HOW IT WORKS
   ---------------------------------------------------------
   Three-step onboarding cards using the same lockup as the
   Problem Agitation grid: icon chip + numbered pill + title +
   desc on a feature-container surface. Each step gets a palette
   accent on the icon chip only (violet / peach / chart-purple)
   so the cards differentiate without overdesigning.
========================================================= */
.how-it-works-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
/* Step cards mirror the problem-agitation card lockup:
   icon chip + numbered pill on the lead row, then title + desc.
   Surface, border, and hover come from .feature-container. */
.how-it-works-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 12px 16px 0;
    vertical-align: middle;
}
.how-it-works-card-icon-i {
    color: var(--color-fg-primary-active);
    font-size: 16px;
}
.how-it-works-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-fg-tertiary-rest);
    background: transparent;
    border: 1px solid var(--color-violet-300-12);
    border-radius: var(--radius-pill);
    letter-spacing: 0.6px;
    margin: 0 0 16px 0;
    vertical-align: middle;
}
/* Per-card palette accent on the icon chip only — same approach as
   .problems-grid. Step 1 (revenue) = violet, step 2 (referral) = peach,
   step 3 (consolidation) = chart-purple. */
.how-it-works-steps > .feature-container:nth-child(1) .how-it-works-card-icon {
    background: rgba(187, 191, 244, 0.10);
    border-color: rgba(187, 191, 244, 0.32);
}
.how-it-works-steps > .feature-container:nth-child(1) .how-it-works-card-icon-i {
    color: var(--color-violet-300);
}
.how-it-works-steps > .feature-container:nth-child(2) .how-it-works-card-icon {
    background: rgba(251, 163, 149, 0.10);
    border-color: rgba(251, 163, 149, 0.32);
}
.how-it-works-steps > .feature-container:nth-child(2) .how-it-works-card-icon-i {
    color: var(--color-peach-300);
}
.how-it-works-steps > .feature-container:nth-child(3) .how-it-works-card-icon {
    background: rgba(205, 145, 251, 0.10);
    border-color: rgba(205, 145, 251, 0.32);
}
.how-it-works-steps > .feature-container:nth-child(3) .how-it-works-card-icon-i {
    color: var(--color-chart-purple-start);
}
.how-it-works-card-title {
    font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.6px;
    margin: 0 0 12px;
    color: var(--color-fg-primary-active);
}
/* Card body decomposed into intro / bullets / closing for scannability.
   Same body color + 16/24/0.6 rhythm as the old single card-desc
   paragraphs; bullets carry a subtle left-rail violet marker so the
   list reads as structured without competing with the icon chip +
   numbered pill above. Shared between the Problem Agitation and How
   It Works sections so both cards use the same vocabulary. */
.how-it-works-card-intro,
.problems-card-intro {
    color: var(--color-fg-primary-rest);
    font-size: 16px; line-height: 24px; letter-spacing: 0.6px;
    margin: 0 0 12px;
}
.how-it-works-card-bullets {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.how-it-works-card-bullets > li {
    position: relative;
    padding-left: 18px;
    color: var(--color-fg-primary-rest);
    font-size: 15px; line-height: 22px; letter-spacing: 0.4px;
}
.how-it-works-card-bullets > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-violet-300);
    opacity: 0.7;
}
.how-it-works-card-closing,
.problems-card-closing {
    color: var(--color-fg-primary-active);
    font-size: 15px; line-height: 22px; letter-spacing: 0.4px;
    margin: 0 0 20px;
    font-weight: 500;
}
/* The third problems card (with 5 bullets) fills its column
   tightly enough that .problems-card-solution's `margin-top: auto`
   resolves to nearly zero — the solution panel ends up flush
   against the closing line with no breathing room. The 20px
   margin-bottom above is the minimum guaranteed gap; cards with
   shorter content keep the auto-margin pushing the solution to
   the card's bottom edge. */

/* =========================================================
   15. PRICING HIGHLIGHT
========================================================= */
.pricing-highlight-card {
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
    padding: 56px 48px;
    text-align: center;
}
.pricing-highlight-card > * { position: relative; z-index: 1; }
.pricing-highlight-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(168, 243, 182, 0.10);
    border: 1px solid rgba(168, 243, 182, 0.32);
    border-radius: var(--radius-pill);
    color: var(--color-chart-green-start);
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.6px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(168, 243, 182, 0.12);
}
.pricing-highlight-badge i {
    font-size: 11px;
    color: var(--color-chart-green-start);
}
.pricing-highlight-heading {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    color: var(--color-fg-primary-active);
    margin: 0 0 16px;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}
.pricing-highlight-desc {
    color: var(--color-fg-primary-rest);
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.2px;
    max-width: 680px;
    margin: 0 auto 36px;
    text-align: center;
    text-wrap: balance;
}

.pricing-highlight-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 0 32px;
    padding: 16px;
    background: rgba(11, 10, 21, 0.3);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
}
.pricing-stat {
    padding: 20px 16px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color 200ms ease;
}
.pricing-stat:hover { border-color: var(--color-violet-300-20); }
.pricing-stat-value {
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.03em;
    color: var(--color-fg-primary-active);
}
.pricing-stat-accent {
    color: var(--color-peach-300) !important;
}
.pricing-stat-label {
    font-size: 13px;
    color: var(--color-fg-tertiary-rest);
    letter-spacing: 0.5px;
    margin-top: 6px;
}

.pricing-included {
    text-align: left;
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(235, 235, 238, 0.06);
}
.pricing-included-title {
    color: var(--color-fg-primary-active);
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.005em;
    margin: 0 0 8px;
    font-weight: 600;
}
.pricing-included-subtitle {
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.2px;
    margin: 0 0 20px;
}
.pricing-included-list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}
.pricing-included-list li {
    display: flex; gap: 10px; align-items: center;
    padding: 6px 0;
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.6px;
}
.pricing-included-list li i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--color-fg-tertiary-rest);
    font-size: 11px;
}

.pricing-highlight-link { margin-top: 24px; }
.pricing-highlight-link a {
    color: var(--color-violet-300);
    font-size: 15px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    letter-spacing: 0.6px;
}
.pricing-highlight-link a:hover { color: var(--color-fg-primary-active); }

/* =========================================================
   16. FEATURED IN / PRESS
   ---------------------------------------------------------
   Press feature cards. Publisher logo above each card sits dimmed
   like a section-eyebrow; on card hover the logo brightens to
   signal the card is interactive. Card itself uses the admin
   StatCard hover spec (scale + violet inset glow).
========================================================= */
#featured-in .h4 {
    color: var(--color-fg-tertiary-rest);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}
#featured-in > .inner-wrapper > .flex > div > img {
    /* Publisher logo (TechCrunch / Forbes) — dim by default, brighten
       on the sibling card's hover. Mirrors admin's "press logo strip"
       reading order: logo sets the publisher, card delivers the body. */
    opacity: 0.55;
    filter: grayscale(1) brightness(1.6);
    transition: opacity 200ms ease, filter 200ms ease;
}
#featured-in > .inner-wrapper > .flex > div:hover > img {
    opacity: 0.95;
    filter: grayscale(0) brightness(1);
}
.blog-feature-block {
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 16px;
    transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.blog-feature-block:hover {
    transform: scale(1.02);
    border-color: var(--color-violet-300-20);
    box-shadow: inset 4px 4px 20px 0 var(--color-violet-300-12);
}
.blog-feature-block a { display: block; color: inherit; text-decoration: none; }
.blog-feature-block .top { padding: 24px; }
.blog-feature-block .top .h3 {
    color: var(--color-fg-primary-active);
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.7px;
    margin: 0 0 8px;
}
.blog-feature-block .top .small {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    color: var(--color-fg-tertiary-rest);
    margin: 0 0 14px;
}
.blog-feature-block .top .small strong { color: var(--color-fg-primary-rest); font-weight: 500; }
.blog-feature-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-peach-300);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: gap 200ms ease;
}
.blog-feature-block:hover .blog-feature-cta { gap: 10px; }
.blog-feature-block img { width: 100%; height: auto; display: block; }

.press-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.press-modal[hidden] { display: none; }
.press-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 10, 21, 0.85);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Bounded height so the modal doesn't dominate the viewport. The
   inner content scrolls; the close button sticks via the
   wrapper structure below so it stays visible during scroll. */
.press-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: min(720px, calc(100vh - 48px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-card-translucent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: 24px 32px 32px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
/* Close button — STICKY so it stays at the top of the visible
   modal area as the user scrolls through the article body.
   Without this, scrolling the modal pushed the close button
   off-screen and there was no way to dismiss the modal on
   mobile (where Esc isn't an option). */
.press-modal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    margin-right: -8px;
    margin-bottom: -32px;
    z-index: 2;
    background: rgba(11, 10, 21, 0.85);
    border: 1px solid var(--color-stroke-tertiary-rest);
    color: var(--color-fg-primary-rest);
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex: 0 0 auto;
}
.press-modal-close:hover {
    border-color: var(--color-neutral-300);
    color: var(--color-fg-primary-active);
    background: rgba(11, 10, 21, 0.95);
}
.press-modal-publisher-logo {
    max-height: 28px;
    margin-bottom: 20px;
    opacity: 0.85;
    filter: grayscale(0.2);
}
.press-modal-headline {
    color: var(--color-fg-primary-active);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.005em;
    font-weight: 500;
    margin: 0 0 8px;
}
.press-modal-byline {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
}
.press-modal-photo-wrap {
    margin: 0 0 20px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-stroke-tertiary-rest);
}
.press-modal-pullquote {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--color-white-05);
    border-left: 2px solid var(--color-peach-300);
    box-shadow: -1px 0 6px rgba(251, 163, 149, 0.4);
    border-radius: 4px;
    font-size: 17px;
    line-height: 26px;
    color: var(--color-fg-primary-active);
    font-style: italic;
    letter-spacing: 0.6px;
}
.press-modal-pullquote-attribution {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-fg-tertiary-rest);
    font-style: normal;
    letter-spacing: 0.5px;
}
.press-modal-summary {
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.6px;
}
.press-modal-takeaways {
    padding-left: 20px;
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.6px;
}
.press-modal-takeaways li { margin-bottom: 6px; }
.press-modal-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 24px;
    padding: 10px 16px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    color: var(--color-peach-300);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.6px;
    transition: border-color 200ms ease, gap 200ms ease, background 200ms ease;
}
.press-modal-cta:hover {
    border-color: var(--color-violet-300-20);
    background: rgba(235, 235, 238, 0.08);
    gap: 12px;
    color: #FFCFC4;
}

/* =========================================================
   17. EVENT TYPES
========================================================= */
.event-types-wrap { margin-top: 32px; }
.event-types-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.event-type-card {
    padding: 24px 16px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: border-color 200ms ease;
}
.event-type-card:hover { border-color: var(--color-violet-300-20); }
.event-type-card i {
    display: inline-block;
    color: var(--color-fg-primary-rest);
    font-size: 20px;
    margin-bottom: 10px;
}
.event-type-card-label {
    color: var(--color-fg-primary-rest);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* =========================================================
   18. INTEGRATIONS
========================================================= */
.integrations-group { margin-bottom: 40px; }
.integrations-group-title {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 500;
    margin: 0 0 16px;
    text-align: center;
}
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.integration-card {
    padding: 16px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    transition: border-color 200ms ease;
}
.integration-card:hover { border-color: var(--color-violet-300-20); }
.integration-card-centered { text-align: center; }
.integration-card-row { display: flex; gap: 12px; align-items: center; }
.integration-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    font-size: 18px;
}
.integration-card-row .integration-icon { margin: 0; }
.integration-name { display: block; color: var(--color-fg-primary-active); font-size: 15px; font-weight: 500; margin: 0 0 2px; letter-spacing: 0.6px; }
.integration-desc { display: block; color: var(--color-fg-tertiary-rest); font-size: 13px; line-height: 19px; }
.integration-logo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
/* FA brand icons (.fab) sit inside a 40px square chip. The
   line-height = container-height technique forces the glyph
   to render exactly centered in the box (text baseline aligns
   to the line-height midpoint). text-align: center handles
   horizontal. Combined with overflow: hidden so any glyph
   metric overshoot is clipped to the box. */
.integration-fa-icon {
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    border-radius: var(--radius-sm);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    font-size: 18px;
    flex: 0 0 40px;
    vertical-align: middle;
}
.integration-fa-icon::before {
    display: inline-block;
    line-height: 40px !important;
    vertical-align: middle !important;
}
.testimonial-author-verify-link > i.fab,
.testimonial-author-verify-link > i.fas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.testimonial-author-verify-link > i.fab::before,
.testimonial-author-verify-link > i.fas::before { vertical-align: 0; }

/* FAQ wrapper — adds bottom breathing room so the section
   doesn't sit flush against the next "Our Promise to You"
   guarantee card. */
#faq, #faqs { margin-bottom: var(--space-section); }

/* =========================================================
   19. FAQ partial
   ---------------------------------------------------------
   Admin tabsGroup pattern (admin/src/shared/ui/tabsGroup/tab.tsx):
   plain text labels, transparent background, peach #FBA395 underline
   appearing on the active tab, with a soft drop shadow.

   Triple-confirmed by Figma: top-page tabs in B2B Artist Management
   (Dashboard / Artists / Stages) and Add Artist sub-tabs (Technical /
   Hospitality / Catering) all use the same underline-only style.
   No pill, no count badge, no border — just text + active underline.
========================================================= */
.faq-tabs-container { margin-top: 24px; }
.faq-tabs {
    display: flex; flex-wrap: wrap; gap: 20px;
    justify-content: center;
    margin-bottom: 32px;
    padding: 4px 2px;
}
.faq-tab {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-fg-tertiary-rest);
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 150ms ease;
}
.faq-tab:hover {
    color: var(--color-fg-primary-active);
}
.faq-tab:focus-visible {
    outline: none;
    border-color: var(--color-neutral-300);
    color: var(--color-fg-primary-active);
}
.faq-tab[aria-selected="true"],
.faq-tab[aria-checked="true"] {
    color: var(--color-fg-primary-active);
}
/* Peach underline + glow on active tab — admin tabsGroup
   bg-[#FBA395] with drop shadow rgba(251,163,149,0.60) */
.faq-tab[aria-selected="true"]::after,
.faq-tab[aria-checked="true"]::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 4px;
    background: var(--color-peach-300);
    box-shadow:
        0 4px 12px rgba(251, 163, 149, 0.60),
        0 2px 6px rgba(251, 163, 149, 0.60);
    pointer-events: none;
}
.faq-tab-count {
    /* Inline count keeps spec-aligned typography — drop the pill
       background, just dim the number per admin convention. */
    margin-left: 4px;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    color: var(--color-fg-tertiary-rest);
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.faq-tab[aria-selected="true"] .faq-tab-count,
.faq-tab[aria-checked="true"] .faq-tab-count {
    color: var(--color-fg-primary-rest);
}
.faq-mobile-select-container { display: none; margin-bottom: 16px; }
.faq-mobile-label { display: block; color: var(--color-fg-tertiary-rest); font-size: 13px; margin-bottom: 6px; }
.faq-mobile-select {
    width: 100%;
    background: var(--bg-card-solid);
    color: var(--color-fg-primary-active);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 15px;
}
.faq-tab-panels {
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
    padding: 24px;
}
/* Tab panels — hidden until their tab is selected. JS toggles the
   .active class on .faq-tab-panel based on which tab(s) the user
   activates. Also pairs with .faq-empty-state for the "select a
   topic" placeholder state. */
.faq-tab-panel { display: none; }
.faq-tab-panel.active { display: block; }
.faq-tab-panel + .faq-tab-panel.active { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-stroke-tertiary-rest); }
.faq-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    color: var(--color-fg-tertiary-rest);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px;
    text-align: center;
}
.faq-empty-state i {
    color: var(--color-violet-300);
    font-size: 16px;
    margin-right: 6px;
}
.faq-panel-title {
    color: var(--color-fg-primary-active);
    font-size: 17px; line-height: 22px; letter-spacing: 0.7px;
    margin: 0 0 16px;
}
.faq-group { margin-bottom: 12px; }
.faq-entity {
    padding: 16px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.faq-question {
    position: relative;
    color: var(--color-fg-primary-active);
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    padding: 0 32px 0 0;
    line-height: 22px;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: color 120ms ease;
}
.faq-question::after {
    /* Caret indicator that flips when expanded — admin foldable-card
       caret-down rotation. */
    content: '';
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%) rotate(0deg);
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask-image: url('/resources/svg/admin-icons/chevron-down.svg');
            mask-image: url('/resources/svg/admin-icons/chevron-down.svg');
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    color: var(--color-fg-tertiary-rest);
    transition: transform 200ms ease, color 200ms ease;
}
.faq-entity.active .faq-question::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--color-fg-primary-active);
}
.faq-question:hover { color: var(--color-fg-primary-active); }
/* Answer body — collapsed by default; reveals when the parent
   .faq-entity gets the .active class via the FAQ accordion JS. */
.faq-entity > [itemprop="acceptedAnswer"],
.faq-entity > div:not(.faq-question):not(.faq-group) {
    display: none;
}
.faq-entity.active > [itemprop="acceptedAnswer"],
.faq-entity.active > div:not(.faq-question):not(.faq-group) {
    display: block;
    margin-top: 12px;
}
.faq-answer {
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.2px;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 8px 0; padding-left: 20px; }
.faq-answer li { margin-bottom: 6px; }
.faq-answer a {
    color: var(--color-violet-300);
    transition: color 120ms ease;
}
.faq-answer a:hover { color: var(--color-peach-300); }

/* =========================================================
   20. GUARANTEE
========================================================= */
.guarantee-card {
    text-align: center;
    padding: 32px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
    max-width: 720px;
    margin: 0 auto;
}
.guarantee-icon { color: var(--color-violet-300); font-size: 32px; margin-bottom: 16px; display: block; }
.guarantee-title { color: var(--color-fg-primary-active); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: 0.6px; margin: 0 0 8px; }
.guarantee-desc { color: var(--color-fg-primary-rest); font-size: 15px; line-height: 21px; margin: 0; }

/* =========================================================
   21. FINAL CTA
   ---------------------------------------------------------
   The demo_booking_section_template partial wraps its 2-column
   layout in <section.ctas-section.section-padding> > .container >
   .ctas-wrapper. Used to be styled by contact-us-v6/landing-page-
   components.css; restated here because that stylesheet is no
   longer loaded for this page.
========================================================= */
.cta-section .title-top h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }

.ctas-section { padding: 48px 0 0; }
.ctas-section .container {
    width: 100%;
    max-width: var(--inner-max);
    padding: 0 24px;
    margin: 0 auto;
}
.ctas-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}
#get-started-cta {
    padding: 40px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-lg);
}
.cta-content h2,
.cta-content .h2 {
    color: var(--color-fg-primary-active);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 600;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cta-content h2 i,
.cta-content .h2 i {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    color: var(--color-fg-primary-active);
    font-size: 16px;
    margin: 0;
}
.cta-content p {
    color: var(--color-fg-primary-rest);
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.4px;
    margin: 0 0 28px;
}
.cta-content .button {
    margin-top: 8px;
    margin-bottom: 14px;
}
.benefits-list {
    display: flex; flex-direction: column;
    gap: 10px;
    margin: 0 0 24px;
}
.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-fg-primary-rest);
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.6px;
}
.benefit-item i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--color-fg-tertiary-rest);
    font-size: 11px;
}
.no-credit-card {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    font-style: italic;
    margin: 0;
}
.risk-reversal {
    margin-top: 24px;
    padding: 14px 20px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    color: var(--color-fg-primary-rest);
    text-align: center;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
}
.risk-reversal p {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 8px 16px;
    margin: 0;
}
.risk-reversal i {
    color: var(--color-fg-tertiary-rest);
    margin-right: 4px;
    font-size: 12px;
}
.risk-reversal-sep { color: var(--color-neutral-800); user-select: none; }

/* =========================================================
   22. PLATFORM SOLUTIONS
========================================================= */
.platform-solutions-wrap { margin-top: 32px; }
.platform-solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.platform-solution-link {
    display: block;
    padding: 20px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    color: inherit;
    transition: border-color 200ms ease;
}
.platform-solution-link:hover { border-color: var(--color-violet-300-20); }
.platform-solution-link strong {
    display: block;
    color: var(--color-fg-primary-active);
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.6px;
}
.platform-solution-link span {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
}

/* =========================================================
   23. EXPLORE MORE / SITEMAP
========================================================= */
.seo-explore-more {
    margin-top: 48px;
    padding: 24px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
}
.seo-explore-more summary {
    cursor: pointer;
    color: var(--color-fg-primary-active);
    font-weight: 500;
    list-style: none;
    padding: 4px 0;
}
.seo-explore-more summary::after {
    content: "↓";
    margin-left: 8px;
    color: var(--color-fg-tertiary-rest);
    transition: transform 200ms ease;
    display: inline-block;
}
.seo-explore-more[open] summary::after { transform: rotate(180deg); }
.sitemap-category { break-inside: avoid; margin-bottom: 24px; }
.sitemap-category-title {
    color: var(--color-violet-300);
    font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 0 12px;
}
.sitemap-link {
    display: block;
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    padding: 4px 0;
    transition: color 120ms ease;
}
.sitemap-link:hover { color: var(--color-fg-primary-active); }

.further-reading-section { padding: 40px 0; }
.further-reading-title {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin: 0 0 16px;
    text-align: center;
}
.further-reading-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.further-reading-card {
    display: block;
    padding: 20px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    color: inherit;
    transition: border-color 200ms ease;
}
.further-reading-card:hover { border-color: var(--color-violet-300-20); }
.further-reading-card strong {
    display: block;
    color: var(--color-fg-primary-active);
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.6px;
}
.further-reading-card span {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
}

/* =========================================================
   24. FOOTER
========================================================= */
footer[role="contentinfo"] {
    border-top: 1px solid var(--color-stroke-tertiary-rest);
    padding: 32px 0;
    margin-top: 48px;
}
footer .inner-wrapper { padding-top: 8px; padding-bottom: 8px; }
footer .flex {
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
footer p {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    margin: 0;
}
footer a { color: var(--color-fg-tertiary-rest); transition: color 120ms ease; }
footer a:hover { color: var(--color-fg-primary-active); }

/* =========================================================
   25. STICKY CTAS / SOCIAL PROOF
   ---------------------------------------------------------
   Top-anchored sticky nav bar. demo-booking.js toggles either
   `.show` or `.visible` to reveal the bar — we honor both so
   the fix doesn't depend on which JS edit is shipping.

   Note: sales-chat-widget.js may inject `style.right = '<n>px'`
   and `style.width = 'auto'` to make room for its sidebar. The
   top bar handles that gracefully (full-bleed shrinks from the
   right), so no defensive overrides needed like the bottom pill
   required.
========================================================= */
/* When the sticky CTA bar is showing, slide the page header up
   out of view so they don't double-stack. Mirrors contact-us-v6's
   :has() rule — uses CSS only, no JS coordination required. */
body:has(.sticky-ctas.show) header[role="banner"],
body:has(.sticky-ctas.visible) header[role="banner"] {
    transform: translateY(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-ctas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: rgba(11, 10, 21, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--color-stroke-tertiary-rest);
    padding: 10px 0;
    transform: translateY(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-ctas.show,
.sticky-ctas.visible {
    transform: translateY(0);
}
.sticky-ctas .inner-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.sticky-buttons { display: flex; gap: 8px; align-items: center; }
.sticky-logo {
    display: inline-flex;
    align-items: center;
}
.sticky-logo img { height: 22px; width: auto; }
/* Sticky-bar buttons read slightly smaller than page-level CTAs
   to fit the top-bar chrome — 36px tall with tighter padding. */
.sticky-ctas .button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.sticky-pricing-btn { padding: 0 12px; min-height: 36px; }

/* Sticky-bar button overrides — the partial markup is shared
   across many pages, so we re-skin in-bar only:
   - Features + Pricing (.button-outline, no .open-modal): plain
     nav links — no fill, no border, just text with hover
     brightening, matching a header nav-item feel.
   - Get Started (.gradient-orange in the partial): primary CTA
     so it's distinct from Book Demo, the peach secondary.
   - Book Demo (.button-outline.open-modal): inherits the global
     peach-secondary rule — no override needed. */
.sticky-ctas .button.button-outline:not(.open-modal) {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-fg-primary-rest);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sticky-ctas .button.button-outline:not(.open-modal):hover {
    color: var(--color-fg-primary-active);
    background: var(--color-white-05);
    border-color: transparent;
    box-shadow: none;
}
.sticky-ctas .button.gradient-orange,
.sticky-ctas .button.gradient-purple {
    background: var(--gradient-button-primary);
    border: 1.3px solid rgba(235, 235, 238, 0.5);
    box-shadow: var(--shadow-button-primary-inset);
    color: var(--color-fg-primary-active) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sticky-ctas .button.gradient-orange:hover,
.sticky-ctas .button.gradient-purple:hover {
    background: var(--gradient-button-primary-hover);
    border-color: rgba(235, 235, 238, 0.5);
    box-shadow: var(--shadow-button-primary-inset);
}

.social-proof-popup {
    position: fixed;
    left: 24px; bottom: 24px;
    z-index: 70;
    background: rgba(11, 10, 21, 0.95);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    transform: translateY(120%);
    transition: transform 240ms ease;
    max-width: 320px;
}
.social-proof-popup.show { transform: translateY(0); }
.popup-content { display: flex; gap: 10px; align-items: flex-start; }
.popup-icon { color: var(--color-peach-300); font-size: 14px; padding-top: 2px; }
.popup-text strong { display: block; color: var(--color-fg-primary-active); font-size: 13px; margin-bottom: 2px; }
.popup-text span { color: var(--color-fg-tertiary-rest); font-size: 13px; }
.popup-close {
    position: absolute; top: 6px; right: 8px;
    background: transparent; border: 0;
    color: var(--color-fg-tertiary-rest);
    font-size: 18px; line-height: 1;
    padding: 2px 6px;
}

/* =========================================================
   26. ANIMATIONS / REVEAL
========================================================= */
.stagger-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 480ms ease, transform 480ms ease;
}
.stagger-reveal.revealed { opacity: 1; transform: translateY(0); }
.fade-scale-in {
    opacity: 0; transform: scale(0.97);
    transition: opacity 480ms ease, transform 480ms ease;
}
.fade-scale-in.revealed { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .stagger-reveal, .fade-scale-in { opacity: 1; transform: none; transition: none; }
    .feature-container, .hero-benefits li, .integration-card, .platform-solution-link,
    .further-reading-card, .blog-feature-block, .event-type-card { transition: none; }
    .feature-container:hover, .hero-benefits li:hover, .integration-card:hover,
    .platform-solution-link:hover, .further-reading-card:hover,
    .blog-feature-block:hover, .event-type-card:hover { transform: none; }
}

#scrollProgress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-violet-300), var(--color-peach-300));
    z-index: 200;
    width: 0;
}

body.showMobileMenu header nav {
    display: block;
    position: fixed;
    inset: 64px 0 0 0;
    background: rgba(11, 10, 21, 0.95);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    padding: 24px;
    z-index: 90;
}
body.showMobileMenu header nav ul { flex-direction: column; align-items: stretch; gap: 4px; }
body.showMobileMenu header nav a { display: block; padding: 12px 16px; font-size: 16px; }

/* =========================================================
   27. DEMO MODAL — admin Modal spec (admin/src/shared/ui/modal/index.tsx)
   ---------------------------------------------------------
   Self-contained modal styling — page does NOT load
   contact-us-v6/landing-page-components.css. Positioning, overlay,
   slideIn animation, and close-button styling all live here.
========================================================= */
/* Outer overlay — full-viewport fixed, hidden by default. */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: auto;
    opacity: 0;
    background-color: rgba(11, 10, 21, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity 200ms ease;
}
.modal.show {
    display: block;
    opacity: 1;
}
.modal-content {
    position: relative;
    background: linear-gradient(115deg, #32353e -46.08%, #0f1219 66.09%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
    color: var(--color-fg-primary-rest);
    width: calc(100% - 32px);
    max-width: 600px;
    margin: 4vh auto;
    padding: 0;
    overflow: hidden;
    max-height: 92vh;
    overflow-y: auto;
    animation: modalSlideIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalSlideIn {
    from { transform: translateY(16px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}
/* Close button — admin "small action chip" pattern: 36px square,
   white-5 fill, violet-12 border, hover lifts to neutral-300 border. */
.modal-content > .close,
.modal-content .close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    color: var(--color-fg-primary-rest);
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.modal-content .close:hover,
.modal-content .close:focus-visible {
    border-color: var(--color-neutral-300);
    color: var(--color-fg-primary-active);
    background: rgba(235, 235, 238, 0.08);
    outline: none;
}
.modal .modal-content h2,
.modal .modal-content #demo-booking-form h2 {
    color: var(--color-fg-primary-active) !important;
    font-family: var(--font-sans) !important;
    font-size: 22px !important;
    line-height: 30px !important;
    letter-spacing: -0.005em !important;
    font-weight: 600 !important;
    margin: 0 0 12px !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid var(--color-stroke-tertiary-rest) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.modal .modal-content h2 i,
.modal .modal-content #demo-booking-form h2 i {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: var(--color-white-05) !important;
    border: 1px solid var(--color-stroke-tertiary-rest) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-fg-primary-active) !important;
    font-size: 16px !important;
    margin: 0 !important;
    -webkit-text-fill-color: var(--color-fg-primary-active) !important;
    background-clip: border-box !important;
}
.modal .modal-content h2 i::before,
.modal .modal-content #demo-booking-form h2 i::before {
    vertical-align: 0 !important;
}
/* Horizontal padding on form-container; .close stays at its absolute
   16px offset and is excluded so its 32px box isn't deformed. */
.modal .modal-content > *:not(.close) { padding-left: 28px; padding-right: 28px; }
/* Vertical breathing room — applied to #modal-form-container, the
   actual wrapper in the rendered DOM. demo-booking.js clones only
   the *inner HTML* of #demo-booking-form, so any rule that scopes
   to that ID inside the modal is dead. */
.modal #modal-form-container {
    padding-top: 32px;
    padding-bottom: 32px;
}
.modal-content #modal-form-container > p,
.modal-content #modal-form-container > h2 + p {
    color: var(--color-fg-primary-rest) !important;
    font-size: 15px !important;
    line-height: 24px !important;
    letter-spacing: 0.4px !important;
    margin: 0 0 20px !important;
    font-family: var(--font-sans) !important;
}
.modal-content .book_now_form { width: 100%; }
.modal-content .book_now_form .form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
}
.modal-content .name-fields {
    display: flex !important;
    gap: 12px !important;
}
.modal-content .name-fields > .form-field-container {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}
.modal-content .form-field-container { margin: 0 !important; padding: 0 !important; }
/* Radio group — match the inline form's vocabulary: transparent
   group container with each option rendered as its own selectable
   card (white-5 fill + stroke-tertiary border). */
.modal-content .radio-group {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.modal-content .radio-group:focus-within {
    border: 0 !important;
    box-shadow: none !important;
}
.modal-content .radio-label {
    display: block !important;
    color: var(--color-fg-primary-rest) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 19px !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px !important;
}
.modal-content .radio-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
}
.modal-content .radio-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-white-05) !important;
    border: 1px solid var(--color-stroke-tertiary-rest) !important;
    cursor: pointer !important;
    color: var(--color-fg-primary-rest) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    transition: background 120ms ease, border-color 120ms ease !important;
}
.modal-content .radio-option:hover {
    background: rgba(235, 235, 238, 0.08) !important;
    border-color: var(--color-violet-300-20) !important;
}
.modal-content .radio-option > span {
    color: var(--color-fg-primary-rest);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px;
}
.modal-content .radio-option > input[type="radio"]:checked + span {
    color: var(--color-fg-primary-active);
    font-weight: 500;
}
.modal-content .form-message {
    margin: 12px 0 0 !important;
    padding: 12px 14px !important;
    background: rgba(187, 191, 244, 0.08) !important;
    border: 1px solid var(--color-violet-300-20) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-fg-primary-rest) !important;
    font-size: 13px !important;
}
.modal-content .form-message p { margin: 0 !important; font-size: 13px !important; line-height: 19px !important; }
.modal-content .trust-indicators {
    margin: 20px 0 0 !important;
    text-align: center !important;
}
.modal-content .trust-indicators .flex {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 0 !important;
}
.modal-content .trust-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--color-fg-tertiary-rest) !important;
    font-size: 13px !important;
    line-height: 19px !important;
    letter-spacing: 0.4px !important;
}
.modal-content .trust-badge i {
    color: var(--color-fg-tertiary-rest) !important;
    -webkit-text-fill-color: var(--color-fg-tertiary-rest) !important;
    background: none !important;
    font-size: 14px !important;
}
/* Field-level inline error messages that the validator injects
   (label.error appended after the input) — render as a small line
   under the field, not as a floating chip beside it. */
.modal-content .form-field-container { position: relative !important; }
.modal-content .form-field-container > label.error,
.modal-content .radio-group > label.error {
    position: static !important;
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(247, 86, 94, 1) !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.2px !important;
    font-weight: 400 !important;
}

/* Form inputs — match the inline form's admin Input spec: 44px
   height, 0 14px padding, 0.2px tracking, neutral focus border. */
.modal-content .form-field-container input[type="text"],
.modal-content .form-field-container input[type="email"],
.modal-content .form-field-container input[type="tel"],
.modal-content .form-field-container input[type="url"],
.modal-content .form-field-container select,
.modal-content .form-field-container textarea {
    width: 100% !important;
    min-height: 44px;
    padding: 0 14px;
    background: var(--color-white-05) !important;
    border: 1px solid var(--color-stroke-tertiary-rest) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-fg-primary-active) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.2px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    box-sizing: border-box;
}
.modal-content .form-field-container textarea { padding: 12px 14px; min-height: 96px; }
.modal-content .form-field-container input::placeholder,
.modal-content .form-field-container textarea::placeholder {
    color: var(--color-fg-primary-deactivated);
    letter-spacing: 0.2px;
}
.modal-content .form-field-container input:hover,
.modal-content .form-field-container select:hover,
.modal-content .form-field-container textarea:hover {
    box-shadow: inset 4px 4px 20px 0 rgba(196, 181, 255, 0.12);
}
.modal-content .form-field-container input:focus,
.modal-content .form-field-container select:focus,
.modal-content .form-field-container textarea:focus {
    border-color: var(--color-neutral-300) !important;
    outline: none;
    box-shadow: inset 4px 4px 20px 0 rgba(196, 181, 255, 0.12);
}
.modal-content .form-field-container input.error {
    border-color: rgba(247, 86, 94, 1) !important;
    color: rgba(247, 86, 94, 1) !important;
}
.modal-content .field-label,
.modal-content label {
    color: var(--color-fg-primary-rest);
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 500;
}
/* Radio buttons inside the modal — match admin Radiobutton spec
   (28px circle border, 10px violet dot when checked). */
.modal-content .radio-option input[type="radio"] {
    width: 20px; height: 20px;
    border: 2px solid var(--color-fg-tertiary-rest);
    background: transparent;
}
.modal-content .radio-option input[type="radio"]:checked {
    border-color: var(--color-violet-300);
}
.modal-content .radio-option input[type="radio"]:checked::after {
    background: var(--color-violet-300) !important;
}
/* Submit button inside the modal — admin Button primary. */
.modal-content #book-now-form-submit-btn,
.modal-content #book-now-form-submit-btn-modal,
.modal-content button[type="submit"] {
    width: 100% !important;
    margin: 24px 0 0 !important;
    background: var(--gradient-button-primary) !important;
    border: 1.3px solid rgba(235, 235, 238, 0.5) !important;
    box-shadow: var(--shadow-button-primary-inset) !important;
    color: var(--color-fg-primary-active) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 48px;
    padding: 0 24px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;
}
.modal-content #book-now-form-submit-btn:hover,
.modal-content #book-now-form-submit-btn-modal:hover {
    background: var(--gradient-button-primary-hover) !important;
}

/* =========================================================
   28a. SECTION ICON TITLE — admin Figma B2B node 360:45213
   ---------------------------------------------------------
   Pattern: small icon chip + title text, used as the panel
   header on Add Artists / Performance Details / Social Media
   panels. Icon sits in a 28px white-5 chip with the same
   rounded-sm radius as buttons; title is H4 (17/22/0.7).
========================================================= */
.section-icon-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-fg-primary-active);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.7px;
    margin: 0 0 16px;
}
.section-icon-title__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-sm);
    color: var(--color-fg-primary-rest);
    font-size: 13px;
}

/* =========================================================
   28b. TOGGLE / SWITCH — admin spec, peach-orange when on
   ---------------------------------------------------------
   Source: admin Figma B2B nodes 15685:60864 ("Hide Breakdown by
   Date") and 15760:61366 ("Public" toggle on Add Section modal).
   44x24 pill, peach Colors/Peach/300 (#fba395) when on, white-5
   track when off, white circle thumb. Used as a checkbox
   replacement so the markup stays a plain <input type="checkbox">
   for accessibility.
========================================================= */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px; height: 24px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.toggle input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.toggle__track {
    position: absolute;
    inset: 0;
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-pill);
    transition: background 200ms ease, border-color 200ms ease;
    pointer-events: none;
}
.toggle__thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: var(--color-fg-primary-rest);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: left 200ms ease, background 200ms ease;
    pointer-events: none;
}
.toggle input[type="checkbox"]:checked ~ .toggle__track {
    background: var(--color-peach-300);
    border-color: var(--color-peach-300);
}
.toggle input[type="checkbox"]:checked ~ .toggle__thumb {
    left: calc(100% - 19px);
    background: #fff;
}
.toggle input[type="checkbox"]:focus-visible ~ .toggle__track {
    outline: 2px solid var(--color-fg-primary-active);
    outline-offset: 2px;
}

/* Chart palette utility classes — for any element that wants a
   chart-color gradient as background. */
.chart-fill-salmon { background: var(--gradient-chart-salmon); }
.chart-fill-violet { background: var(--gradient-chart-violet); }
.chart-fill-yellow { background: var(--gradient-chart-yellow); }
.chart-fill-red    { background: var(--gradient-chart-red); }
.chart-fill-green  { background: var(--gradient-chart-green); }
.chart-fill-purple { background: var(--gradient-chart-purple); }
.chart-fill-pink   { background: var(--gradient-chart-pink); }
.chart-fill-brown  { background: var(--gradient-chart-brown); }

/* =========================================================
   28. ICONS — admin SVG set, mask-image overrides on FA classes.
   ---------------------------------------------------------
   Layout markup keeps using <i class="fas fa-music"> etc. so
   the partials and existing JS aren't touched. We override each
   glyph by:
     1. Resetting the FA ::before content to '' (kills the FA glyph)
     2. Rendering the admin SVG via -webkit-mask-image / mask-image
     3. Painting it with currentColor so the parent's color: rule
        inherits naturally
   This recolors the glyph through the existing color rules without
   needing to touch any markup, partials, or layout logic.

   Brand icons (fab fa-stripe, fa-facebook, etc.) keep their FA
   default since admin's icon set doesn't include brand marks —
   FA brand icons are the industry standard for marketing pages.
========================================================= */

/* Generic FA solid icons mapped to admin SVG equivalents. */
.fas.fa-arrow-right::before,
.fas.fa-bolt::before,
.fas.fa-building::before,
.fas.fa-chart-bar::before,
.fas.fa-chart-line::before,
.fas.fa-check::before,
.fas.fa-check-circle::before,
.fas.fa-chevron-down::before,
.fas.fa-coins::before,
.fas.fa-credit-card::before,
.fas.fa-database::before,
.fas.fa-door-open::before,
.fas.fa-external-link-alt::before,
.fas.fa-file-contract::before,
.fas.fa-gamepad::before,
.fas.fa-gem::before,
.fas.fa-hand-holding-usd::before,
.fas.fa-headset::before,
.fas.fa-layer-group::before,
.fas.fa-microphone-alt::before,
.fas.fa-money-bill-wave::before,
.fas.fa-music::before,
.fas.fa-palette::before,
.fas.fa-plug::before,
.fas.fa-redo::before,
.fas.fa-share-alt::before,
.fas.fa-shield-alt::before,
.fas.fa-store::before,
.fas.fa-sun::before,
.fas.fa-tag::before,
.fas.fa-tags::before,
.fas.fa-theater-masks::before,
.fas.fa-ticket-alt::before,
.fas.fa-times::before,
.fas.fa-trophy::before,
.fas.fa-users::before,
.fas.fa-utensils::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* =========================================================
   ICON-IN-CHIP CENTERING
   ---------------------------------------------------------
   When <i class="fas fa-X"> sits inside a flex/grid chip with
   align-items: center, the FA mask-image override above adds
   vertical-align: -0.125em to the ::before (text-baseline
   compensation for inline icons in body text). Inside dedicated
   icon chips this baseline shift fights the flex centering and
   the icon paints visibly low. Plus the <i>'s default line-height
   adds phantom baseline padding above/below the 1em mask, making
   the chip taller than the icon expects.

   Fix: when the <i> is the SOLE child of a known chip frame,
   collapse line-height + reset vertical-align so the mask centers
   cleanly inside the chip. Targets all our chip-frame classes
   plus the generic [class*="-icon"] pattern (covers
   problems-card-icon, integration-icon, referral-flow-icon,
   section-icon-title__icon, video-play-btn-icon, etc.).
========================================================= */
[class*="-icon"] > i.fas,
.problems-card-icon-i,
.event-type-card > i.fas,
ul.hero-benefits > li > i.fas,
.benefit-item > i.fas,
.capital-list-item > i.fas,
.pricing-included-list > li > i.fas,
.risk-reversal > p > i.fas,
.cta-content h2 > i.fas,
.cta-content .h2 > i.fas,
.testimonial-author-verify-link > i.fas,
.testimonial-author-verify-link > i.fab,
.feature-list > li > i.fas,
.tf3-banner-link > i.fas,
.button > i.fas,
.guarantee-icon.fas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
[class*="-icon"] > i.fas::before,
.problems-card-icon-i.fas::before,
.event-type-card > i.fas::before,
ul.hero-benefits > li > i.fas::before,
.benefit-item > i.fas::before,
.capital-list-item > i.fas::before,
.pricing-included-list > li > i.fas::before,
.risk-reversal > p > i.fas::before,
.cta-content h2 > i.fas::before,
.cta-content .h2 > i.fas::before,
.feature-list > li > i.fas::before,
.tf3-banner-link > i.fas::before,
.button > i.fas::before,
.guarantee-icon.fas::before,
.comparison-td--feature > i.fas::before {
    vertical-align: 0;
}

.fas.fa-arrow-right::before          { -webkit-mask-image: url('/resources/svg/admin-icons/arrow-right.svg'); mask-image: url('/resources/svg/admin-icons/arrow-right.svg'); }
.fas.fa-bolt::before                 { -webkit-mask-image: url('/resources/svg/admin-icons/bolt.svg'); mask-image: url('/resources/svg/admin-icons/bolt.svg'); }
.fas.fa-building::before             { -webkit-mask-image: url('/resources/svg/admin-icons/building.svg'); mask-image: url('/resources/svg/admin-icons/building.svg'); }
.fas.fa-chart-bar::before            { -webkit-mask-image: url('/resources/svg/admin-icons/chart-bar.svg'); mask-image: url('/resources/svg/admin-icons/chart-bar.svg'); }
.fas.fa-chart-line::before           { -webkit-mask-image: url('/resources/svg/admin-icons/chart-line.svg'); mask-image: url('/resources/svg/admin-icons/chart-line.svg'); }
.fas.fa-check::before                { -webkit-mask-image: url('/resources/svg/admin-icons/check.svg'); mask-image: url('/resources/svg/admin-icons/check.svg'); }
.fas.fa-check-circle::before         { -webkit-mask-image: url('/resources/svg/admin-icons/check-circle.svg'); mask-image: url('/resources/svg/admin-icons/check-circle.svg'); }
.fas.fa-chevron-down::before         { -webkit-mask-image: url('/resources/svg/admin-icons/chevron-down.svg'); mask-image: url('/resources/svg/admin-icons/chevron-down.svg'); }
.fas.fa-coins::before                { -webkit-mask-image: url('/resources/svg/admin-icons/coins.svg'); mask-image: url('/resources/svg/admin-icons/coins.svg'); }
.fas.fa-credit-card::before          { -webkit-mask-image: url('/resources/svg/admin-icons/credit-card.svg'); mask-image: url('/resources/svg/admin-icons/credit-card.svg'); }
.fas.fa-database::before             { -webkit-mask-image: url('/resources/svg/admin-icons/database.svg'); mask-image: url('/resources/svg/admin-icons/database.svg'); }
.fas.fa-door-open::before            { -webkit-mask-image: url('/resources/svg/admin-icons/door-open.svg'); mask-image: url('/resources/svg/admin-icons/door-open.svg'); }
.fas.fa-external-link-alt::before    { -webkit-mask-image: url('/resources/svg/admin-icons/external-link-alt.svg'); mask-image: url('/resources/svg/admin-icons/external-link-alt.svg'); }
.fas.fa-file-contract::before        { -webkit-mask-image: url('/resources/svg/admin-icons/file-contract.svg'); mask-image: url('/resources/svg/admin-icons/file-contract.svg'); }
.fas.fa-gamepad::before              { -webkit-mask-image: url('/resources/svg/admin-icons/gamepad.svg'); mask-image: url('/resources/svg/admin-icons/gamepad.svg'); }
.fas.fa-gem::before                  { -webkit-mask-image: url('/resources/svg/admin-icons/gem.svg'); mask-image: url('/resources/svg/admin-icons/gem.svg'); }
.fas.fa-hand-holding-usd::before     { -webkit-mask-image: url('/resources/svg/admin-icons/hand-holding-usd.svg'); mask-image: url('/resources/svg/admin-icons/hand-holding-usd.svg'); }
.fas.fa-headset::before              { -webkit-mask-image: url('/resources/svg/admin-icons/headset.svg'); mask-image: url('/resources/svg/admin-icons/headset.svg'); }
.fas.fa-layer-group::before          { -webkit-mask-image: url('/resources/svg/admin-icons/layer-group.svg'); mask-image: url('/resources/svg/admin-icons/layer-group.svg'); }
.fas.fa-microphone-alt::before       { -webkit-mask-image: url('/resources/svg/admin-icons/microphone-alt.svg'); mask-image: url('/resources/svg/admin-icons/microphone-alt.svg'); }
.fas.fa-money-bill-wave::before      { -webkit-mask-image: url('/resources/svg/admin-icons/money-bill-wave.svg'); mask-image: url('/resources/svg/admin-icons/money-bill-wave.svg'); }
.fas.fa-music::before                { -webkit-mask-image: url('/resources/svg/admin-icons/music.svg'); mask-image: url('/resources/svg/admin-icons/music.svg'); }
.fas.fa-palette::before              { -webkit-mask-image: url('/resources/svg/admin-icons/palette.svg'); mask-image: url('/resources/svg/admin-icons/palette.svg'); }
.fas.fa-plug::before                 { -webkit-mask-image: url('/resources/svg/admin-icons/plug.svg'); mask-image: url('/resources/svg/admin-icons/plug.svg'); }
.fas.fa-redo::before                 { -webkit-mask-image: url('/resources/svg/admin-icons/redo.svg'); mask-image: url('/resources/svg/admin-icons/redo.svg'); }
.fas.fa-share-alt::before            { -webkit-mask-image: url('/resources/svg/admin-icons/share-alt.svg'); mask-image: url('/resources/svg/admin-icons/share-alt.svg'); }
.fas.fa-shield-alt::before           { -webkit-mask-image: url('/resources/svg/admin-icons/shield-alt.svg'); mask-image: url('/resources/svg/admin-icons/shield-alt.svg'); }
.fas.fa-store::before                { -webkit-mask-image: url('/resources/svg/admin-icons/store.svg'); mask-image: url('/resources/svg/admin-icons/store.svg'); }
.fas.fa-sun::before                  { -webkit-mask-image: url('/resources/svg/admin-icons/sun.svg'); mask-image: url('/resources/svg/admin-icons/sun.svg'); }
.fas.fa-tag::before                  { -webkit-mask-image: url('/resources/svg/admin-icons/tag.svg'); mask-image: url('/resources/svg/admin-icons/tag.svg'); }
.fas.fa-tags::before                 { -webkit-mask-image: url('/resources/svg/admin-icons/tags.svg'); mask-image: url('/resources/svg/admin-icons/tags.svg'); }
.fas.fa-theater-masks::before        { -webkit-mask-image: url('/resources/svg/admin-icons/theater-masks.svg'); mask-image: url('/resources/svg/admin-icons/theater-masks.svg'); }
.fas.fa-ticket-alt::before           { -webkit-mask-image: url('/resources/svg/admin-icons/ticket-alt.svg'); mask-image: url('/resources/svg/admin-icons/ticket-alt.svg'); }
.fas.fa-times::before                { -webkit-mask-image: url('/resources/svg/admin-icons/times.svg'); mask-image: url('/resources/svg/admin-icons/times.svg'); }
.fas.fa-trophy::before               { -webkit-mask-image: url('/resources/svg/admin-icons/trophy.svg'); mask-image: url('/resources/svg/admin-icons/trophy.svg'); }
.fas.fa-users::before                { -webkit-mask-image: url('/resources/svg/admin-icons/users.svg'); mask-image: url('/resources/svg/admin-icons/users.svg'); }
.fas.fa-utensils::before             { -webkit-mask-image: url('/resources/svg/admin-icons/utensils.svg'); mask-image: url('/resources/svg/admin-icons/utensils.svg'); }


/* ================================================================
 * Components added by the landing-page refactor (PR #8071).
 * Restyled for the b2b/admin design system: violet-300-12 strokes,
 * bg-card-translucent surfaces, peach-300 accent, 12px radii.
 * Mirrors the contact-us-v6 visual treatment from main.css, but
 * using b2b tokens instead of contact-us-v6 tokens.
 * ================================================================ */

/* ---------- Problems-card solution callout ---------- */
.problems-card-solution {
    /* Push to bottom of the flex-column card so the solution
       block aligns across all 3 cards. */
    margin-top: auto;
    /* Peach-tinted panel — promotes the solution from footnote
       to focal point of the card. */
    background: rgba(251, 163, 149, 0.06);
    border: 1px solid rgba(251, 163, 149, 0.22);
    border-left: 3px solid var(--color-peach-300);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.problems-card-solution-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.1px;
    color: var(--color-peach-300);
}
.problems-card-solution-eyebrow i {
    color: var(--color-peach-300);
    font-size: 13px;
}
.problems-card-solution-text {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: var(--color-fg-primary-active);
}
.problems-card-solution-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-peach-300);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-violet-300-20);
    align-self: flex-start;
    padding-bottom: 2px;
    margin-top: 4px;
    transition: color 120ms ease, border-color 120ms ease, gap 160ms ease;
}
.problems-card-solution-link i {
    font-size: 11px;
    transition: transform 160ms ease;
}
.problems-card-solution-link:hover {
    color: var(--color-violet-300);
    border-bottom-color: var(--color-violet-300);
    gap: 10px;
}
.problems-card-solution-link:hover i { transform: translateX(2px); }

/* ---------- Testimonial author company descriptor ---------- */
.testimonial-author-company {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-fg-tertiary-rest);
}
.testimonial-author-company i {
    color: var(--color-peach-300);
    font-size: 13px;
}

/* ---------- Three Pillars row (Cashflow / Capital / Revenue) ---------- */
.three-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.three-pillars-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    transition: border-color 200ms ease;
}
.three-pillars-card:hover {
    border-color: var(--color-violet-300-20);
}
.three-pillars-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    color: var(--color-peach-300);
    font-size: 20px;
}
.three-pillars-card-title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.6px;
    color: var(--color-fg-primary-active);
}
.three-pillars-card-desc {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--color-fg-primary-rest);
    flex-grow: 1;
}
.three-pillars-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-peach-300);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-violet-300-20);
    padding-bottom: 2px;
    transition: color 120ms ease, border-color 120ms ease, gap 160ms ease;
}
.three-pillars-card-link i {
    font-size: 11px;
    transition: transform 160ms ease;
}
.three-pillars-card-link:hover {
    color: var(--color-violet-300);
    border-bottom-color: var(--color-violet-300);
    gap: 10px;
}
.three-pillars-card-link:hover i { transform: translateX(2px); }

/* ---------- Ticket Fairy Capital — compact panel (replaces the Three
   Pillars financial section; positions Capital as the pre-sale complement
   to daily payouts) ---------- */
.capital-compact {
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-card-translucent);
    border: 1px solid var(--color-stroke-tertiary-rest);
    border-radius: var(--radius-md);
    padding: 36px 40px;
    text-align: center;
}
.capital-compact-logo {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.4px;
    background: linear-gradient(120deg, var(--color-peach-300), var(--color-violet-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
}
.capital-compact-points {
    list-style: none;
    padding: 0;
    margin: 0 auto 28px;
    max-width: 560px;
    text-align: left;
    display: inline-block;
}
.capital-compact-points li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.capital-compact-points li:last-child { margin-bottom: 0; }
.capital-compact-points li i {
    color: var(--color-violet-300);
    margin-top: 3px;
    flex-shrink: 0;
}
.capital-compact-points li span {
    color: var(--color-fg-primary-rest);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 21px;
}
.capital-compact-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    background: linear-gradient(120deg, var(--color-peach-300), var(--color-violet-300));
    color: #0B0A15;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.capital-compact-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--color-violet-300-20);
}
.capital-compact-cta i { font-size: 12px; }

/* ---------- Event types pill row (under stats) ---------- */
.event-types-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 24px;
    /* Cap width so the 9 pills wrap into roughly even rows (~5+4)
       rather than 6+1 / 7+2. Stats-bar above already has its own
       border-bottom, so no top border needed here. */
    max-width: 1080px;
    margin: 28px auto 0;
    padding-top: 20px;
}
.event-types-pill-row-label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-fg-tertiary-rest);
    margin-right: 4px;
}
.event-types-pill-row-subtitle {
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-fg-primary-active);
    max-width: 560px;
    margin: 28px auto 0;
    padding: 0;
}
.event-types-pill-row-subtitle + .event-types-pill-row {
    margin-top: 8px;
    padding-top: 12px;
}
.event-types-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-fg-primary-active);
    /* Plain icon + label, not a chip/button: no fill, border or pill
       shape so the row reads as a "Built for…" capability list rather
       than a row of tappable buttons. */
    cursor: default;
}
.event-types-pill i {
    color: var(--color-peach-300);
    font-size: 12px;
}

/* ---------- Compact integrations strip ---------- */
.integrations-compact-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.integrations-compact-row li { list-style: none; margin: 0; }
.integrations-compact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-fg-primary-active);
}
.integrations-compact-pill img { width: 20px; height: 20px; object-fit: contain; }
.integrations-compact-pill i { font-size: 16px; }
.integrations-compact-link-wrap { text-align: center; margin-top: 24px; }
.integrations-compact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-peach-300);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-violet-300-20);
    padding-bottom: 2px;
    transition: color 120ms ease, border-color 120ms ease, gap 160ms ease;
}
.integrations-compact-link i {
    font-size: 11px;
    transition: transform 160ms ease;
}
.integrations-compact-link:hover {
    color: var(--color-violet-300);
    border-bottom-color: var(--color-violet-300);
    gap: 12px;
}
.integrations-compact-link:hover i { transform: translateX(2px); }

/* ---------- Landing-page footer (4-col nav + legal + social) ---------- */
.landing-page-footer {
    border-top: 1px solid var(--color-stroke-tertiary-rest);
    padding: 48px 0 32px;
    margin-top: 60px;
    font-family: var(--font-sans);
    color: var(--color-fg-tertiary-rest);
}
.landing-page-footer-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.landing-page-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}
.landing-page-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.landing-page-footer-heading {
    margin: 0 0 4px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-fg-primary-active);
    letter-spacing: 0.4px;
}
.landing-page-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.landing-page-footer-links li { list-style: none; margin: 0; }
.landing-page-footer-links a {
    color: var(--color-fg-tertiary-rest);
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: color 160ms ease;
}
.landing-page-footer-links a:hover { color: var(--color-fg-primary-active); }
.landing-page-footer-legal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-stroke-tertiary-rest);
}
.landing-page-footer-legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.landing-page-footer-legal-links li { list-style: none; margin: 0; }
.landing-page-footer-legal-links a {
    color: var(--color-fg-tertiary-rest);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    transition: color 160ms ease;
}
.landing-page-footer-legal-links a:hover { color: var(--color-fg-primary-active); }
.landing-page-footer-social { display: flex; align-items: center; gap: 16px; }
.landing-page-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    color: var(--color-fg-tertiary-rest);
    background: var(--color-white-05);
    border: 1px solid var(--color-stroke-tertiary-rest);
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.landing-page-footer-social a:hover {
    color: var(--color-fg-primary-active);
    border-color: var(--color-violet-300-20);
}
.landing-page-footer-social svg { width: 14px; height: 14px; }
.landing-page-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.landing-page-footer-logo { display: inline-flex; align-items: center; }
.landing-page-footer-logo img { height: 28px; width: auto; opacity: 0.95; }
.landing-page-footer-copyright {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-fg-tertiary-rest);
}

/* ==========================================
   MEET THE TEAM (mirror of contact-us-v6/main.css)
   Desktop: equal-height 3-up strip with a caption scrim. Mobile rules
   (the crossfading rotator) live in b2b/responsive.css.
   ========================================== */
.meet-the-team .team-photo-strip {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-top: 8px;
}
.meet-the-team .team-photo {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
}
.meet-the-team .team-photo--group {
    flex: 1.6 1 0;
}
.meet-the-team .team-photo img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
}
.meet-the-team .team-photo figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 18px 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
    text-align: left;
}
.meet-the-team .team-photo-name {
    display: block;
    line-height: 1.25;
}
.meet-the-team .team-photo-role {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.82;
}

/* ==========================================
   REFERRAL FUNDING — "where does the cashback come from?"
   Answers the top referral trust question: two sources (the new sales
   the link drives + a matching refund of TF's own fee) flow into the
   buyer's cashback. Mirrors the referral-flow visual language.
   ========================================== */
.referral-funding {
    margin: 20px 0 0;
    padding: 16px 18px;
    border-radius: var(--roundings-l, 16px);
    background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
    border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
}
.referral-funding-q {
    margin: 0 0 12px;
    text-align: center;
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg-primary-rest, #ebebee);
}
.referral-funding-split {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.referral-funding-source {
    flex: 1 1 0;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
    border-radius: var(--roundings-12, 12px);
    background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
    border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: var(--fg-primary-rest, #ebebee);
}
.referral-funding-source--result {
    background: linear-gradient(135deg, rgba(255, 191, 181, 0.18) 0%, rgba(196, 181, 255, 0.12) 100%);
    border-color: rgba(255, 191, 181, 0.35);
    font-weight: 600;
}
.referral-funding-op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--fg-tertiary-rest, #9f9cb0);
    flex: 0 0 auto;
}
.referral-funding-note {
    margin: 12px 0 0;
    text-align: center;
    text-wrap: balance;
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--fg-primary-rest, #ebebee);
}
@media (max-width: 720px) {
    .referral-funding-split { flex-direction: column; }
    .referral-funding-op--eq { transform: rotate(90deg); }
}


/* =========================================================
   PRICING CALCULATOR — ported from contact-us-v6/main.css so the
   merged calculator renders styled here too (was previously
   unstyled on this page). Tokens use the same var(--x, fallback)
   form; undefined vars resolve to the dark-theme fallbacks.
   ========================================================= */
.pricing-calculator-section {
    margin-top: 64px;
}

/* Calculator rendered INSIDE the pricing card (.pricing-highlight-inner):
   strip the partial's own section spacing, inner-wrapper padding and panel
   chrome so the violet card is the single container — no box-in-box, no
   double padding. A hairline divider separates it from the stats above.
   Standalone /pricing is untouched (no #pricing-highlight ancestor). */
#pricing-highlight .pricing-highlight-inner .pricing-calculator-section {
    margin: 0;
}
#pricing-highlight .pricing-highlight-inner .pricing-calculator-section .inner-wrapper {
    padding: 0;
    max-width: none;
}
#pricing-highlight .pricing-highlight-inner .title-top {
    margin: 32px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
}
#pricing-highlight .pricing-highlight-inner .title-top h2 {
    font-size: 1.5rem;
}
#pricing-highlight .pricing-highlight-inner .pricing-calculator {
    margin: 22px auto 0;
    max-width: none;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}
#pricing-highlight .pricing-highlight-inner .pricing-deep-dive-cta {
    margin: 0;
}
#pricing-highlight .pricing-highlight-inner .pricing-deep-dive-cta .inner-wrapper {
    padding: 0;
    max-width: none;
}

.pricing-calculator {
    max-width: 820px;
    margin: 32px auto 0;
    padding: 32px;
    border-radius: var(--roundings-l, 16px);
    background: linear-gradient(135deg, rgba(255, 191, 181, 0.08) 0%, rgba(196, 181, 255, 0.05) 100%);
    border: 1px solid rgba(255, 191, 181, 0.15);
    box-shadow: 0 0 60px rgba(255, 191, 181, 0.04);
}

.pc-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.pc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-field-label {
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-tertiary-rest, #9f9cb0);
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.pc-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(10, 10, 20, 0.45);
    border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
    border-radius: var(--roundings-12, 12px);
    color: var(--fg-primary-rest, #ebebee);
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.pc-input:focus {
    outline: none;
    border-color: var(--peach-300, #ffbfb5);
    background: rgba(10, 10, 20, 0.6);
}

select.pc-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239f9cb0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

.pc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pc-currency {
    position: absolute;
    left: 16px;
    pointer-events: none;
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--fg-tertiary-rest, #9f9cb0);
}

.pc-input-price {
    padding-left: 44px;
    font-variant-numeric: tabular-nums;
}

/* Hide native number-input spinners — the visual is cleaner without */
.pc-input-price::-webkit-outer-spin-button,
.pc-input-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pc-input-price[type=number] {
    -moz-appearance: textfield;
}

.pc-results {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.pc-result-card {
    padding: 20px 18px;
    border-radius: var(--roundings-12, 12px);
    background: var(--colors-base-white-05, rgba(235, 235, 238, 0.05));
    border: 1px solid var(--colors-base-white-10, rgba(235, 235, 238, 0.1));
    text-align: center;
}

.pc-result-card--primary {
    background: linear-gradient(135deg, rgba(255, 191, 181, 0.18) 0%, rgba(196, 181, 255, 0.12) 100%);
    border-color: rgba(255, 191, 181, 0.35);
    box-shadow: 0 0 30px rgba(255, 191, 181, 0.08);
}

.pc-result-card--muted {
    opacity: 0.85;
}

.pc-result-label {
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-tertiary-rest, #9f9cb0);
    letter-spacing: 0.2px;
    margin-bottom: 8px;
}

.pc-result-card--primary .pc-result-label {
    color: var(--fg-primary-rest, #ebebee);
    opacity: 0.85;
}

.pc-result-value {
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg-primary-rest, #ebebee);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.pc-result-card--primary .pc-result-value {
    font-size: 1.75rem;
}

.pc-footnote {
    margin-top: 20px;
    text-align: center;
    font-family: var(--font-family-inter-tight, "Inter Tight"), sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fg-tertiary-rest, #9f9cb0);
}

@media (max-width: 720px) {
    .pricing-calculator { padding: 24px 20px; }
    .pc-controls { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
    .pc-results { grid-template-columns: 1fr; gap: 12px; }
    .pc-result-value { font-size: 1.4rem; }
    .pc-result-card--primary .pc-result-value { font-size: 1.55rem; }
}

/* Essentials grid — quick "we cover the basics" row of icon+label items
   above the comparison table. Minimal styling so it reads as table-stakes,
   not a headline feature. */
.essentials-grid {
    /* Wide enough to seat all 7 essentials pills in a single row at desktop
       (the parent `.inner-wrapper` is capped at --inner-max = 1240). */
    margin: 0 auto 32px;
    max-width: 1240px;
    text-align: center;
    padding: 0;
}
.essentials-eyebrow {
    /* Matches the home-page audience-eyebrow treatment — gradient-clipped
       peach→violet→blue text, sentence case, 16px / 500. */
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
    text-transform: none;
    background: var(--gradient-button-outline, linear-gradient(138.91deg, #ffbfb5 22%, #c4b5ff 56%, #b5bfff 85%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.essentials-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 18px column-gap shaves the cumulative pill-row width so all 7 fit
       in a single row at desktop. */
    gap: 10px 18px;
}
.essentials-items li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-fg-primary-rest);
}
.essentials-items li i {
    color: var(--color-peach-300);
    font-size: 13px;
    width: 16px;
    text-align: center;
}