/* =============================================================
   1PD Ops Summit — London / UK Edition (edition5)
   Dark theme · teal/emerald + orange · Outfit
   Design tokens sourced from Figma (file 8CN0RiOMpAs1Eea07ocGNs,
   desktop 1-1336 · mobile 94-2137).
   BEM class naming. Sections appended below under their banners.
   ============================================================= */

:root {
    /* Backgrounds */
    --bg-base: #0a0a0a;          /* page + most sections (Figma 15:1126) */
    --bg-nav: #0c0e14;           /* nav bar (Figma 2:6760) */
    --bg-section-a: #0c0e14;   /* content CTA band (Figma 177:2509) */
    --bg-section-b: #0d1016;   /* KPIs section (Figma 19:2285) */
    --bg-section-c: #10131b;   /* partner card (Figma 186:7133) */
    --surface-card: #212427;     /* pricing panels, seat buttons */

    /* Accents */
    --teal-accent: #a8fff6;      /* "London Edition", benefits heading */
    --green: #34d399;            /* kickers, Live badge */
    --green-soft: #6ee7b7;       /* brand-cloud metric values */
    --red: #ef4444;              /* quiz "wrong" state */
    --orange: #ff722b;           /* nav + hero CTA (Figma 2:6766) */
    --orange-deep: #f25022;      /* pricing CTA + tier accents */
    --orange-alt: #ea580c;       /* agenda kickers, speaker pills */

    /* Neutrals / text */
    --white: #fafafa;            /* color/grey/98 */
    --text-body: #d8dfe8;        /* color/azure/88 */
    --text-time: #d1d5db;        /* color/neutral/300 — agenda times */
    --text-muted: #aaaaaa;       /* on-dark secondary */
    --text-muted-light: #6a6a6a; /* on-light secondary */
    --text-on-light: #0a0a0a;
    --text-name: #212427;
    --text-strip: #5a3020;       /* scroll strip + speaker company */
    --warm-dim: rgba(211, 204, 193, 0.9);
    --text-supporting: #c3ccd8;  /* color/dark/supporting — award pills */
    --text-muted-cool: #aeb8c6;  /* color/dark/muted */
    --text-tertiary: #8e9bab;    /* color/dark/tertiary — KPI kickers, roles */

    /* Surfaces */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.07);
    --card-light: #f9f9f8;       /* speaker card */
    --strip-bg: #fafafa;
    --divider: #232326;
    --divider-soft: rgba(35, 35, 38, 0.3);
    --hairline: rgba(250, 250, 250, 0.13);   /* agenda row rules */
    --nav-border: rgba(119, 119, 119, 0.24);

    /* Typography */
    --font: 'Outfit', Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing scale */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Layout — Figma content insets: 219px (1290 wide) and 144px (1440 wide) */
    --container-max: 1290px;
    --container-wide: 1440px;
    --container-pad: 24px;
    --section-py: 48px;
    --header-h: 96px;            /* 64 nav + 32 strip */

    /* Motion */
    --transition-base: 0.25s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-body);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Layout utilities ---------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    /* max-width includes the gutters so the CONTENT box is the Figma width */
    max-width: calc(var(--container-max) + 2 * var(--container-pad));
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--container-pad)); }

.section { padding-block: var(--section-py); }

/* Shared section header: kicker · H2 · subhead (Figma 15:1133) */
.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}
.kicker {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 17px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--green);
}
.kicker--orange { color: var(--orange-alt); }

.section-title {
    max-width: 640px;
    font-size: 46px;
    font-weight: var(--fw-semibold);
    line-height: 50px;
    letter-spacing: -0.64px;
    color: var(--white);
    text-wrap: balance;
}
.section-title em { font-style: normal; color: var(--green); }
.section-title em.is-orange { color: var(--orange-deep); }
.section-title em.is-teal {
    color: var(--teal-accent);
    text-shadow: 0 0 34px rgba(168, 255, 246, 0.26);
}

.section-subhead {
    max-width: 720px;
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 26px;
    color: var(--text-body);
}
.section-subhead strong { font-weight: var(--fw-semibold); color: var(--white); }

/* Pill row used under several section heads (Figma 40:2135, 53:2762) */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.pill {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-body);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: 6px 24px;
    font-size: 14px;
    font-weight: var(--fw-medium);
    line-height: 20px;
    color: var(--white);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-base), filter var(--transition-base);
}
.btn--orange {
    background: var(--orange);
    box-shadow: 0 12px 24px -16px rgba(255, 114, 43, 0.4);
}
.btn--orange:hover { filter: brightness(1.06); transform: translateY(-1px); }

.btn--teal {
    background: var(--teal-accent);
    color: var(--text-on-light);
    font-weight: var(--fw-semibold);
}
.btn--teal:hover { filter: brightness(1.04); transform: translateY(-1px); }

.btn--lg {
    min-height: 52px;
    padding: 11px 24px;
    font-size: 18px;
    line-height: 30px;
    font-weight: var(--fw-semibold);
}

/* =============================================================
   01 SCROLL STRIP  (Figma 2:7433 · mobile 94:2683)
   Light strip of event facts; marquee because the Figma content
   row (1728px) overflows the mobile frame (375px).
   ============================================================= */
.strip {
    height: 32px;
    background: var(--strip-bg);
    overflow: hidden;
}
.strip__viewport {
    display: flex;
    width: 100%;
    height: 100%;
}
.strip__track {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 0 0 auto;
    padding-inline: 40px;
    animation: strip-scroll 40s linear infinite;
}
.strip__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 0 auto;
}
/* 20px icon box; the Figma SVGs sit at their exact insets (some are 2 layers) */
.strip__icon {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
.strip__icon img { position: absolute; width: auto; height: auto; }
.strip__label {
    font-size: 10px;
    font-weight: var(--fw-regular);
    line-height: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-strip);
    white-space: nowrap;
}
@keyframes strip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.strip--static .strip__track { animation: none; }
.strip--static .strip__viewport { overflow-x: auto; }
.strip:hover .strip__track { animation-play-state: paused; }

/* =============================================================
   02 SITE HEADER  (Figma 2:6760)
   ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
}
.site-header__bar {
    height: 64px;
    background: var(--bg-nav);
    border-bottom: 0.5px solid var(--nav-border);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}
.site-header--scrolled .site-header__bar {
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
.site-header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: 171px; height: 40px; }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 40px;
}
.site-header__links {
    display: flex;
    align-items: center;
    gap: 40px;
}
.site-header__link {
    font-size: 16px;
    font-weight: var(--fw-medium);
    color: var(--white);
    transition: color var(--transition-base);
}
.site-header__link:hover { color: var(--green); }
.site-header__cta { width: 136px; }

/* Hamburger — mobile only */
.site-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
}
.site-header__burger-bar {
    display: block;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
}

/* Mobile slide-down panel.
   Two guards matter here. The [hidden] attribute that scripts.js toggles is
   UA-level `display: none`, so the author-level `display: flex` below would
   override it and leave an invisible position:fixed overlay across the whole
   viewport, swallowing every click on the page. And the panel must not exist
   at all above 767px, where the hamburger that opens it is display:none.
   (edition4 does the same via a base `display: none`.) */
.mobile-nav[hidden] { display: none; }

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--container-pad) var(--space-2xl);
    background: var(--bg-nav);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.mobile-nav.is-open { opacity: 1; transform: none; }
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.mobile-nav__close { width: 40px; height: 40px; font-size: 28px; line-height: 1; color: var(--white); }
.mobile-nav__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.mobile-nav__links { display: flex; flex-direction: column; gap: var(--space-lg); }
.mobile-nav__link { font-size: 22px; font-weight: var(--fw-semibold); color: var(--white); }
.mobile-nav__cta { width: 100%; min-height: 48px; }

/* =============================================================
   03 HERO  (Figma 89:4594)
   ============================================================= */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 624px;               /* 720 frame − 96 header */
    padding-block: var(--space-3xl);
    overflow: hidden;
    background: var(--bg-base);
}
/* Concentric arcs behind the wordmark (Figma 89:4756 — five rings) */
.hero__rings {
    position: absolute;
    top: 320px;
    left: 50%;
    width: 1440px;
    height: 1440px;
    transform: translateX(-50%);
    pointer-events: none;
}
/* Figma 89:4757 is one SVG of five concentric circles, all stroked in
   teal #a8fff6 with a faint teal fill. Stroke opacity steps 0.04 -> 0.08
   outer to inner, and the whole group sits at 0.8, so the effective
   values below are 0.8 x the source. */
.hero__ring {
    position: absolute;
    border: 1px solid rgba(168, 255, 246, 0.032);
    border-radius: 50%;
    background: rgba(168, 255, 246, 0.008);
}
.hero__ring:nth-child(1) { inset: 0;     border-color: rgba(168, 255, 246, 0.032); }
.hero__ring:nth-child(2) { inset: 120px; border-color: rgba(168, 255, 246, 0.040); }
.hero__ring:nth-child(3) { inset: 240px; border-color: rgba(168, 255, 246, 0.048); }
.hero__ring:nth-child(4) { inset: 360px; border-color: rgba(168, 255, 246, 0.056); }
.hero__ring:nth-child(5) { inset: 480px; border-color: rgba(168, 255, 246, 0.064); }

.hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
}

/* Eyebrow: four dots + line (Figma 89:4632) */
.hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21px;                       /* dots block → text, per Figma left offsets */
    font-size: 40px;
    font-weight: var(--fw-semibold);
    line-height: 43px;
    letter-spacing: -0.64px;
    color: #f3f4f6;
    text-wrap: balance;
}
/* Sweeping highlight across the eyebrow line. Falls back to a flat
   white fill where background-clip:text is unsupported or motion is reduced. */
.hero__shine { color: #f3f4f6; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__shine {
        /* Stops supplied by the client. Symmetric, and the 0%/100% ends
           match, so the repeat tiles seamlessly as it sweeps. */
        background-image: linear-gradient(100deg,
            var(--text-muted-cool) 0%,
            var(--teal-accent)     13%,
            #f3f4f6                25%,
            var(--green)           50%,
            #f3f4f6                75%,
            var(--teal-accent)     88%,
            var(--text-muted-cool) 100%);
        background-size: 210% 100%;
        background-repeat: repeat;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: hero-shine 8s linear infinite;
    }
}
@keyframes hero-shine {
    from { background-position: 210% 0; }
    to   { background-position: -210% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__shine {
        animation: none;
        background: none;
        -webkit-text-fill-color: #f3f4f6;
        color: #f3f4f6;
    }
}

.hero__dots { display: flex; gap: 3px; flex: 0 0 auto; }
.hero__dot { width: 6px; height: 6px; border-radius: 50%; }
.hero__dot:nth-child(1) { background: #f97316; }
.hero__dot:nth-child(2) { background: var(--green); }
.hero__dot:nth-child(3) { background: var(--orange-alt); }
.hero__dot:nth-child(4) { background: var(--teal-accent); }

/* Wordmark (Figma 89:4710) — 62/67, tracking −2.1 */
.hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 62px;
    font-weight: var(--fw-bold);
    line-height: 67px;
    letter-spacing: -2.1px;
    color: var(--white);
}
/* Normal inline flow, not flex: as a flex row the wordmark and the rest of
   the line were separate items, so a narrow screen always broke between
   them ("1PD Ops" / "Performance Marketing Summit"). Flowing inline lets it
   wrap mid-phrase the way the mobile Figma does — "1PD Ops Performance" /
   "Marketing Summit". The word space comes from the markup. */
.hero__title-row {
    display: block;
    text-align: center;
}
/* A natural word space after "ps" measures ~16px at 62px; Figma leaves 19px,
   so top it up here rather than with word-spacing (which would also widen
   the gaps inside "Performance Marketing Summit"). */
.hero__wordmark {
    display: inline-flex;
    align-items: baseline;
    margin-right: 0.097em;
}
/* The gear replaces the "O" of "Ops" — 61.209 x 64 at 62px type.
   Figma (89:4710) leaves a 14px optical gap before the gear and 4px after
   it; in em so the spacing holds at every title size. */
.hero__gear {
    width: 61.209px;
    height: 64px;
    margin-left: 0.226em;
    margin-right: 0.016em;
    transform: translateY(6px);
}

/* ---------- Logo rotation (shared: edition5 + edition6) ----------
   The settings ring turns; the profile mark inside it does not. The mark is
   masked out of the ring rather than painted over it, so it stays a real hole
   and the component drops onto any background. The ring sweeps a radius of 32
   about its own centre, ~1.4px wider than the artwork box, so the svg is
   allowed to overflow — clipping it would flatten the teeth at 3 and 9
   o'clock as they pass. */
.hero__gear { overflow: visible; }
.hero__gear-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-gear-spin 14s linear infinite;
}
@keyframes hero-gear-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hero__gear-ring { animation: none; }
}
.hero__title-city { color: var(--teal-accent); }

.hero__subhead {
    max-width: 520px;
    font-size: 16px;
    line-height: 26px;
    color: var(--text-body);
}
.hero__subhead strong { font-weight: var(--fw-semibold); color: var(--white); }

.hero__cta { margin-top: var(--space-xs); }

/* =============================================================
   04 INFO — date / time / venue  (Figma 2:5977)
   ============================================================= */
.info {
    background: var(--bg-base);
    padding-block: var(--space-lg);
}
.info__grid {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
    border-top: 1px solid var(--divider-soft);
    border-bottom: 1px solid var(--divider-soft);
}
.info__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 280px;
    padding: var(--space-lg);
    border-right: 1px solid var(--divider);
}
.info__cell:last-child { border-right: 0; }
.info__label {
    font-size: 14px;
    font-weight: var(--fw-regular);
    line-height: 21px;
    letter-spacing: 1.2937px;
    text-transform: uppercase;
    color: var(--text-body);
}
.info__value {
    font-size: 27px;
    font-weight: var(--fw-semibold);
    line-height: 35px;
    color: var(--white);
}
.info__suffix {
    font-size: 14px;
    font-weight: var(--fw-medium);
    line-height: 22.75px;
    color: var(--warm-dim);
}
/* "8 Fenchurch Place" alone measures ~220px of the cell's 232px, so an
   inline "· London" wraps and strands the separator at the end of line 1.
   Drop it to its own line instead of shrinking the value. */
.info__suffix--block { display: block; }

/* =============================================================
   05 ELIGIBILITY — tie-breaker quiz  (Figma 15:1126)
   ============================================================= */
.eligibility { background: var(--bg-base); padding-block: var(--space-2xl); }
.eligibility__body {
    display: grid;
    grid-template-columns: 400px 520px;
    justify-content: center;
    gap: var(--space-3xl);
    align-items: center;
    margin-top: 72px;
}
.eligibility__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.eligibility__option {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    width: 100%;
    height: 64px;
    padding-inline: 23.2px;
    text-align: left;
    background: var(--glass-bg);
    border: 0.8px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), background var(--transition-base);
}
.eligibility__option:hover { border-color: rgba(52, 211, 153, 0.4); }
.eligibility__option[aria-pressed="true"] {
    border-color: var(--green);
    background: rgba(52, 211, 153, 0.08);
}
/* Once any option is picked, every option reveals whether the algorithm
   actually learns there — green for the two that do, red for the pixel. */
.eligibility__state {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.eligibility__option[data-state] .eligibility__state { opacity: 0.85; transform: none; }
.eligibility__option[data-state="ok"] {
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.09);
}
.eligibility__option[data-state="ok"] .eligibility__key,
.eligibility__option[data-state="ok"] .eligibility__state { color: var(--green); }
.eligibility__option[data-state="no"] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.09);
}
.eligibility__option[data-state="no"] .eligibility__key,
.eligibility__option[data-state="no"] .eligibility__state { color: var(--red); }
.eligibility__option[aria-pressed="true"][data-state] {
    box-shadow: 0 0 0 1px currentColor inset;
}
.eligibility__key {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 17px;
    letter-spacing: 1.2937px;
    text-transform: uppercase;
    color: var(--text-body);
}
.eligibility__label {
    font-size: 18px;
    font-weight: var(--fw-semibold);
    line-height: 30px;
    color: var(--white);
}

.eligibility__answer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 240px;
    padding: var(--space-md) 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-xl);
}
.eligibility__answer.is-right {
    border-color: rgba(52, 211, 153, 0.34);
    background: rgba(52, 211, 153, 0.06);
}
.eligibility__answer.is-wrong {
    border-color: rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.07);
}
.eligibility__answer.is-right .eligibility__answer-kicker { color: var(--green); }
.eligibility__answer.is-wrong .eligibility__answer-kicker { color: var(--red); }
.eligibility__answer-kicker { margin-bottom: var(--space-sm); }

/* Verdict line under the quiz */
.eligibility__note {
    max-width: 984px;
    margin: var(--space-md) auto 0;
    font-size: 17px;
    font-weight: var(--fw-semibold);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.eligibility__note.is-shown { opacity: 1; transform: none; }
.eligibility__note.is-right { color: var(--green); }
.eligibility__note.is-wrong { color: var(--red); }

/* Confetti burst on a correct answer */
.eligibility { position: relative; overflow: hidden; }
.eligibility > .container { position: relative; z-index: 2; }
.eligibility__confetti {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* The options sit left on desktop and on top on mobile, and the answer copy
   says so (Figma 15:1165 vs 96:3160). Both strings ship; CSS picks one. */
.eligibility__where--mobile { display: none; }
.eligibility__answer-title {
    font-size: 22px;
    font-weight: var(--fw-semibold);
    line-height: 29px;
    letter-spacing: -0.6539px;
    color: var(--white);
}
.eligibility__answer-body {
    max-width: 438px;
    font-size: 16px;
    line-height: 25.28px;
    color: var(--text-body);
}

/* =============================================================
   06 KPIs — "Let's smash your KPIs"  (Figma 18:2156 / 19:2285)
   Left: 11 selectable KPI tabs (2 x 6 grid, last cell empty).
   Right: the designed answer panel on a gradient plate.
   ============================================================= */
.kpis { background: var(--bg-section-b); padding-block: var(--space-2xl); }

/* Eyebrow replaces the plain kicker: the audience word cycles through the
   segments the summit is built for. Gradient-clipped with a sweeping underline. */
.kpis__dear {
    font-size: clamp(1.15rem, 0.85rem + 1.4vw, 1.85rem);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--white);
}
/* The slot glides between word widths instead of snapping. "Agency" is 101px
   and "Health and wellness" is 258px, so without this the centred line jerks
   sideways by up to 78px on every swap and "Marketers," teleports. JS sets an
   explicit width per word (measured after the webfont lands); with no JS the
   slot just sizes to its content as before. */
.kpis__flip {
    position: relative;
    display: inline-block;
    padding-inline: 2px;
    vertical-align: baseline;
    white-space: nowrap;
    transition: width 0.34s cubic-bezier(0.16, 0.84, 0.3, 1);
}
/* Colours are the supplied kpi-section.html's, exactly: the word is clipped
   to a green -> teal -> blue gradient over a teal glow, and it sits on a
   sweeping rule that retracts while the word swaps. Flat --teal-accent is the
   fallback wherever background-clip:text is unsupported. */
.kpis__flip-word {
    display: inline-block;
    font-weight: var(--fw-semibold);
    color: var(--teal-accent);
    filter: drop-shadow(0 0 22px rgba(168, 255, 246, 0.35));
    transition: opacity 0.34s cubic-bezier(0.16, 0.84, 0.3, 1),
                transform 0.34s cubic-bezier(0.16, 0.84, 0.3, 1);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .kpis__flip-word {
        background-image: linear-gradient(96deg, #34d399 0%, #a8fff6 48%, #67b3ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
/* The rule under the word: green -> teal -> brand teal, 3px, drawn from the
   left. It collapses on the way out and redraws under the new word. */
.kpis__flip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.16em;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--green), var(--teal-accent) 55%, #1db9aa);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.34s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.kpis__flip.is-out .kpis__flip-word { opacity: 0; transform: translateY(-16px) scale(0.97); }
.kpis__flip.is-in  .kpis__flip-word { opacity: 0; transform: translateY(16px) scale(0.97); }
.kpis__flip.is-out::after,
.kpis__flip.is-in::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
    .kpis__flip { transition: none; }
    .kpis__flip-word { transition: none; }
    .kpis__flip::after { transition: none; transform: scaleX(1); }
}
.kpis__body {
    display: grid;
    grid-template-columns: 696px minmax(0, 680px);
    justify-content: center;
    gap: 64px;
    align-items: start;
    margin-top: 64px;
}
.kpis__tabs-col { display: flex; flex-direction: column; }
.kpis__tabs {
    display: grid;
    grid-template-columns: repeat(2, 340px);
    gap: var(--space-md);
    align-content: start;
}
.kpis__tab {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 80px;
    padding: var(--space-md);
    text-align: left;
    background: var(--glass-bg);
    border: 0.8px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: background var(--transition-base), border-color var(--transition-base);
}
.kpis__tab:hover { border-color: rgba(52, 211, 153, 0.28); }
.kpis__tab[aria-selected="true"] {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.42);
}
.kpis__tab-kicker {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.kpis__tab[aria-selected="true"] .kpis__tab-kicker {
    font-weight: var(--fw-bold);
    color: var(--green);
}
.kpis__tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}
.kpis__tab-label {
    font-size: 16px;
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: #ffffff;
}
.kpis__tab-arrow {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--text-tertiary);
    transition: transform var(--transition-base), color var(--transition-base);
}
/* Selected tab's arrow rotates to point down at the panel (Figma 32:2796) */
.kpis__tab[aria-selected="true"] .kpis__tab-arrow {
    color: var(--green);
    transform: rotate(90deg);
}

/* The section plays through the eleven KPIs on its own until the reader
   picks one. The bar makes that auto-advance read as deliberate rather than
   as the panel glitching, and the hint says so in words. Both are added by
   JS (.is-autoplay) and removed the moment the reader takes over, so a
   no-JS page shows a plain, static tab list. */
.kpis__tab-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
}
.kpis__body.is-autoplay .kpis__tab[aria-selected="true"] .kpis__tab-bar {
    opacity: 0.85;
    animation: kpi-sweep 4200ms linear forwards;
}
@keyframes kpi-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.kpis__hint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: var(--space-md);
    font-size: 13px;
    color: var(--text-tertiary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.kpis__body.is-autoplay .kpis__hint { opacity: 1; visibility: visible; }
.kpis__hint::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: kpi-hint-pulse 1.9s ease-in-out infinite;
}
@keyframes kpi-hint-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1); }
}

/* The plate is the "stage": a slow teal wash that keeps the right-hand
   column alive while the panel text swaps. Gradient and blob geometry come
   straight from the supplied kpi-section.html. It sticks so the answer stays
   in view while the reader scans the eleven tabs beside it. */
.kpis__plate {
    /* Height comes from the grid row, so the plate ends flush with the tab
       list beside it instead of running past it on a fixed min-height.
       position:relative (never static) keeps .kpis__blobs, which is absolutely
       positioned to inset:0, contained by the card at every breakpoint. */
    position: relative;
    align-self: stretch;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    background: linear-gradient(158deg, #0f6f5f 0%, #0b3f3b 52%, #082427 100%);
    box-shadow: 0 30px 80px -28px rgba(29, 185, 170, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.kpis__blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* A rotating conic sweep under three drifting blobs: rotation is the most
   legible motion there is, and the blobs stop it reading as a spinner. */
.kpis__spin {
    position: absolute;
    left: -30%;
    top: -30%;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #34d399 0deg, #a8fff6 70deg, #1db9aa 145deg,
        #0b3f3b 205deg, #67b3ff 265deg, #34d399 360deg);
    filter: blur(46px);
    opacity: 0.62;
    animation: kpi-stage-spin 22s linear infinite;
}
@keyframes kpi-stage-spin { to { transform: rotate(360deg); } }
.kpis__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(38px);
}
/* Sized in px, not %, so the height always resolves inside the blob layer. */
.kpis__blob--1 {
    width: 380px; height: 380px; left: -90px; top: -120px; opacity: 0.85;
    background: radial-gradient(closest-side, #34d399, rgba(52, 211, 153, 0) 72%);
    animation: kpi-blob-1 13s ease-in-out infinite alternate;
}
.kpis__blob--2 {
    width: 320px; height: 320px; right: -100px; top: 30px; opacity: 0.7;
    background: radial-gradient(closest-side, #a8fff6, rgba(168, 255, 246, 0) 72%);
    animation: kpi-blob-2 17s ease-in-out infinite alternate;
}
.kpis__blob--3 {
    width: 420px; height: 420px; left: 90px; bottom: -190px; opacity: 0.8;
    background: radial-gradient(closest-side, #1db9aa, rgba(29, 185, 170, 0) 72%);
    animation: kpi-blob-3 15s ease-in-out infinite alternate;
}
@keyframes kpi-blob-1 { to { transform: translate(150px, 110px) scale(1.25); } }
@keyframes kpi-blob-2 { from { transform: scale(1.1); } to { transform: translate(-130px, 150px) scale(0.9); } }
@keyframes kpi-blob-3 { to { transform: translate(-120px, -140px) scale(1.2); } }

.kpis__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    background: rgba(8, 11, 16, 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
/* Panel content eases in on every swap. Only once JS has taken over — the
   no-JS page must render the first panel fully visible. */
.kpis__body.is-enhanced .kpis__panel > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.38s cubic-bezier(0.16, 0.84, 0.3, 1),
                transform 0.38s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.kpis__body.is-enhanced .kpis__panel.is-on > * { opacity: 1; transform: none; }
.kpis__panel-told {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 40px 40px var(--space-md);
    border-bottom: 1px solid var(--glass-border);
}
.kpis__told-label,
.kpis__told-quote {
    font-size: 16px;
    font-weight: var(--fw-medium);
    line-height: 26px;
}
.kpis__told-label { text-decoration: line-through; }
/* The quote is struck by a drawn rule rather than text-decoration so it can
   sweep in with the panel. Inline-block so the rule matches the text width. */
.kpis__told-line {
    position: relative;
    display: inline-block;
}
.kpis__told-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.3, 1) 0.12s;
}
.kpis__panel.is-on .kpis__told-line::after,
.kpis__body:not(.is-enhanced) .kpis__told-line::after { transform: scaleX(1); }
.kpis__told-label {
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted-cool);
}
.kpis__told-quote { color: var(--text-tertiary); }

/* Even top and bottom: this block is the bottom of the panel's body, so the
   40px above "What's actually going on" is matched below the copy rather than
   leaving it tight against the session bar. */
.kpis__panel-real {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 40px;
}
.kpis__real-label {
    font-size: 22px;
    font-weight: var(--fw-bold);
    line-height: 29px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
}
.kpis__real-body {
    font-size: 18px;
    font-weight: var(--fw-regular);
    line-height: 1.68;
    color: #ffffff;
}
.kpis__panel-session {
    padding: var(--space-md) 40px;
    background: rgba(52, 211, 153, 0.08);
    border-top: 1px solid rgba(52, 211, 153, 0.3);
}
.kpis__session-label {
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
}

/* =============================================================
   06b CONTENT CTA  (Figma 177:2509 desktop · 196:3706 mobile)
   Ported from edition6 — same component, same copy; this edition's
   CTA books a pass instead of requesting an invite.
   ============================================================= */
.content-cta {
    position: relative;                /* anchor the decorative marks */
    overflow: hidden;                  /* clip them so they can't cause overflow */
    background: var(--bg-section-a);
    text-align: center;
}

/* Quotation-mark glyph behind the statement, top-left (Figma 177:2516). */
.content-cta__symbol {
    position: absolute;
    top: 56px;
    left: calc(50% - 500px);
    z-index: 0;
    width: 150px;
    height: auto;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

/* CL gear-monogram watermarks (Figma 177:2512 / 177:2513 / 177:2514).
   Behind the statement: z-index 0, below .content-cta__inner. */
.content-cta__gear {
    position: absolute;
    z-index: 0;
    height: auto;
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}
/* 400px, centred just below/right of the middle (Figma 177:2512). */
.content-cta__gear--1 {
    width: 400px;
    top: calc(50% - 20px);
    left: calc(50% + 10px);
    transform: translate(-50%, -50%);
}
/* 200px upper-right — Figma left:1320 top:-60 in the 1290-wide block. */
.content-cta__gear--2 {
    width: 200px;
    top: -60px;
    right: -30px;
    transform: rotate(180deg) scaleY(-1);
}
/* 200px — Figma left:219 (the block's own left edge) top:344. */
.content-cta__gear--3 {
    width: 200px;
    top: 344px;
    left: 0;
    transform: rotate(180deg) scaleY(-1);
}

.content-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-cta__statement {
    max-width: 1020px;                 /* Figma 177:2520 */
    margin-inline: auto;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--fw-regular);
    line-height: 1.075;                /* 43 / 40 */
    letter-spacing: -1px;
    color: var(--white);
    text-wrap: balance;
}
.content-cta__em--teal   { color: var(--teal-accent); font-weight: var(--fw-semibold); }
.content-cta__em--orange { color: var(--orange);      font-weight: var(--fw-semibold); }

.content-cta__hashtag {
    margin-top: var(--space-2xl);
    font-size: clamp(44px, 5vw, 64px);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: -1.28px;
    color: var(--green);
}

.content-cta__cta {
    margin-top: var(--space-2xl);
    min-width: 320px;
    padding-block: 14px;
    font-size: 18px;
}

/* =============================================================
   07 SPEAKERS  (Figma 177:3347 · card 355:4652)
   ============================================================= */
.speakers { background: var(--bg-base); padding-block: var(--space-2xl); }
.speakers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 324px));
    justify-content: center;
    gap: var(--space-2xl);
    margin-top: 64px;
}
.speakers__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 702px;
    padding: var(--space-lg) var(--space-md);
    background: var(--card-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.speakers__role {
    align-self: flex-start;
    padding: 6px var(--space-sm);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--orange-alt);
    border: 0.8px solid var(--orange-alt);
    border-radius: 28px;
}
.speakers__tagline {
    margin-top: var(--space-lg);
    font-size: 14px;
    font-weight: var(--fw-regular);
    line-height: 22px;
    color: var(--text-on-light);
}
.speakers__tagline em {
    font-style: normal;
    font-size: 18px;
    font-weight: var(--fw-semibold);
    color: var(--orange-alt);
}
/* Photo: 292x320 box, radius applied here (exports are flat JPEGs).
   Figma ships two variants per speaker — "Property 1=Grey" (default) and
   "Property 1=Color" (orange ground). They are genuinely different artwork,
   not a filter, so both ship and cross-fade. The LinkedIn badge that used to
   sit in the top-right of both exports has been painted out of the JPEGs. */
.speakers__media {
    position: relative;
    display: block;
    width: 100%;
    margin-top: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.speakers__photo {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: bottom;
}
.speakers__photo--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-base);
}
.speakers__card:hover .speakers__photo--hover,
.speakers__card:focus-within .speakers__photo--hover { opacity: 1; }

.speakers__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    padding-left: var(--space-xs);
}
.speakers__name {
    font-size: 24px;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: var(--text-name);
}
.speakers__org {
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: 1;
    color: var(--text-strip);
}

/* Hairline that fades out at both ends (Figma 355:4715) — full content
   width, so it is NOT indented like .speakers__info / .speakers__synopsis. */
.speakers__divider {
    display: block;
    height: 1px;
    margin-top: var(--space-lg);
    background: linear-gradient(90deg,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.4) 50%,
        rgba(10, 10, 10, 0) 100%);
}
.speakers__synopsis {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-md);
    padding-left: var(--space-xs);
}
.speakers__synopsis-label {
    margin-bottom: var(--space-lg);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 18.6px;
    color: var(--text-name);
}
.speakers__synopsis p:not(.speakers__synopsis-label) + p { margin-top: var(--space-sm); }
.speakers__synopsis p:not(.speakers__synopsis-label) {
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: 16px;
    color: var(--text-strip);
}

/* =============================================================
   08 SOCIAL PROOF  (Figma 40:1887)
   The wall is the SAME Figma component as Mumbai's ("Testimonial
   Vertical", 1200x588) and the same six LinkedIn posts, so the
   card + auto-scroll CSS below is carried over from edition4
   unchanged apart from token names. Only the section heading and
   the stat pills are new (they use the shared .section-head).
   ============================================================= */
.proof { background: var(--bg-base); padding-block: var(--space-2xl); }
.proof__wall-wrap { margin-top: var(--space-2xl); }

/* 3-column VERTICAL auto-scroll wall (Figma 5861-1830 "Testimonial Vertical",
   1200x588). Fixed-height window; each column's card set is duplicated (JS clone)
   and scrolls upward for a seamless loop. Pause on hover; reduced-motion = static. */
.testimonials__wall {
    position: relative;
    height: 600px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
.testimonials__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 372px));
    justify-content: center;
    gap: var(--space-lg);
    align-items: start;
}
.testimonials__col {
    display: flex;
    flex-direction: column;
    gap: 0;                          /* no extra gap between the two sets (see set padding-bottom) */
    will-change: transform;
}
.testimonials__set {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg); /* trailing gap = inter-card gap, so translateY(-50%) loops seamlessly */
}
@media (prefers-reduced-motion: no-preference) {
    .testimonials__col--anim {
        animation: testimonials-scroll var(--tw-duration, 11s) linear infinite;
    }
    /* Stagger column speeds slightly for a livelier wall */
    .testimonials__col:nth-child(2).testimonials__col--anim { animation-duration: var(--tw-duration, 13s); }
    .testimonials__col:nth-child(3).testimonials__col--anim { animation-duration: var(--tw-duration, 12s); }
    .testimonials__wall:hover .testimonials__col--anim { animation-play-state: paused; }
}
@keyframes testimonials-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

.testimonials__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 8px;                /* Figma card radius */
    padding: 24px 30px;                /* Figma: 24px top, 30px sides */
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* Figma card body (BG_2 rect): white @ 0.2 fill + white @ 0.1 hairline stroke,
       with backdrop-blur 18.72px — reads as a soft translucent glass panel. */
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(18.72px);
            backdrop-filter: blur(18.72px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}
/* Decorative colored glow blobs behind each card. Figma BG frame = 4 ellipses
   sitting BEHIND a white @ 0.2 backdrop-blurred (18.72px) card, so on the canvas
   they read as a barely-there aura at the card corners — NOT vivid blobs. Exact
   ellipse colors/opacities from the Figma BG svg (452px frame; card = inner 372px):
     #1 top-left  #727272 @0.32  rx60 ry16
     #2 top-right #BC4FFF @0.16  rx60 ry20
     #3 bot-left  #FC41DB @0.24  rx32 ry16
     #4 bot-right #FC41DB @0.24  rx12 ry20
   The white 0.2 fill + heavy blur wash most of the saturation out, so we render
   the ellipses at a fraction of source opacity with a large blur to reproduce
   that subtle glass-diffused glow. */
.testimonials__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    filter: blur(24px);
    /* Exact Figma ellipse colors/opacities (BG svg): #1 TL #727272@0.32,
       #2 TR #BC4FFF@0.16, #3 BL #FC41DB@0.24, #4 BR #FC41DB@0.24. */
    background:
        radial-gradient(60px 26px at 4% 6%,  rgba(114, 114, 114, 0.32), transparent 72%),
        radial-gradient(72px 34px at 97% 20%, rgba(188, 79, 255, 0.16), transparent 72%),
        radial-gradient(90px 60px at 4% 96%,  rgba(252, 65, 219, 0.6), transparent 74%),
        radial-gradient(64px 70px at 97% 84%, rgba(252, 65, 219, 0.6), transparent 74%);
}

.testimonials__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}
.testimonials__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;    /* Figma: slightly rounded square (rounded-[20px] on 32px reads square-ish) */
    object-fit: cover;
    background: var(--surface-card);
}
.testimonials__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    flex: 1 1 auto;
}
.testimonials__name {
    font-size: 1rem;   /* 16px (Figma) */
    font-weight: 500;
    line-height: 1.25;
    color: var(--white);
}
.testimonials__handle {
    font-size: 0.625rem;   /* 10px (Figma role) */
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-tertiary);
}
.testimonials__brand {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--white);   /* Figma LinkedIn glyph SVG is fill=white, not brand-blue */
}
.testimonials__quote {
    margin: 0;
    max-width: 312px;      /* Figma quote block width */
    font-size: 1.125rem;   /* 18px (Figma quote) */
    font-weight: 500;
    line-height: 1.333;    /* 24px / 18px */
    color: var(--white);
}
.testimonials__quote-accent { color: #67b3ff; }   /* Figma emphasis blue */
.testimonials__tags {
    margin: var(--space-xs) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-lg);       /* ~2 per row like Figma (left 30 / 159 => ~129px cols) */
    font-size: 1rem;                /* 16px (Figma hashtags) */
    font-weight: 500;
    line-height: 1.4;
}
.testimonials__tag { color: #67b3ff; }

/* Tablet: 2 columns */
@media (max-width: 1000px) {
    .testimonials__track { grid-template-columns: repeat(2, minmax(0, 372px)); }
    .testimonials__col:nth-child(3) { display: none; }
}
/* Mobile: single column, taller window (Figma 5907-11643).
   All phones (<=767px) show a single vertical-scroll column of cards. */
@media (max-width: 767px) {
    .testimonials__wall { height: 560px; }
    .testimonials__track { grid-template-columns: minmax(0, 1fr); }
    .testimonials__col:nth-child(2),
    .testimonials__col:nth-child(3) { display: none; }
}

/* =============================================================
   08b PARTNER  (Figma 186:7733 desktop · 196:3771 mobile)
   A 1290x440 plate: handshake photo on the left, partner panel
   overlapping it on the right. The overlap is why everything here
   is absolutely positioned rather than a two-column grid.
   ============================================================= */
.partner {
    background: var(--bg-base);
    padding-block: var(--space-2xl);   /* (536 - 440) / 2 */
}
.partner__card {
    position: relative;
    height: 440px;
    border-radius: 32px;
    background: var(--bg-section-c);
    overflow: hidden;
}
/* Arrow watermark over the right half (Figma 186:7135, 5% opacity) */
.partner__arrows {
    position: absolute;
    top: 40px;                          /* 9.09% of 440 */
    left: 49.61%;                       /* Figma inset */
    width: 548px;
    height: 400px;
    opacity: 0.05;
    pointer-events: none;
}
.partner__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 49.61%;                      /* 640 / 1290 */
    height: 100%;
    object-fit: cover;
}
/* Widths are proportional so the panel keeps overlapping the photo the same
   way as the card narrows, instead of sliding off it. */
.partner__panel {
    position: absolute;
    top: 50%;
    right: 8.53%;                       /* 110 / 1290 */
    width: 49.61%;                      /* 640 / 1290 */
    min-width: 480px;
    height: 220px;
    transform: translateY(-50%);
}
/* Warm gradient bloom behind the white panel (Figma 186:7740) */
.partner__glow {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, #f43f5e 0%, #f97316 50%, #eab308 100%);
    filter: blur(32px);
    opacity: 0.16;
    pointer-events: none;
}
/* Title and logo sit in a row rather than at fixed offsets: at the Figma
   width this resolves to left:40 and logo-left:378 exactly, and it keeps
   working once the panel is a percentage. */
.partner__plate {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    height: 100%;
    padding-inline: 40px 82px;          /* 640 - 378 - 180 = 82 */
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Two soft tints inside the panel (Figma 190:7746 / 190:7747): green at
       the top-right corner, orange at the bottom-left. */
    background:
        radial-gradient(220px 220px at 100% 0%, rgba(52, 211, 153, 0.12), transparent 70%),
        radial-gradient(320px 320px at 0% 100%, rgba(234, 88, 12, 0.16), transparent 70%),
        #ffffff;
}
/* Faint HighLevel arrows inside the panel (Figma 196:3451, 20% opacity) */
.partner__plate-mark {
    position: absolute;
    right: 41.5px;
    bottom: 0;
    width: 260.5px;
    height: 180px;
    opacity: 0.2;
    pointer-events: none;
}
.partner__title {
    position: relative;
    font-size: clamp(24px, 2.4vw, 36px);
    font-weight: var(--fw-semibold);
    line-height: 1.162;                 /* 41.824 / 36 */
    letter-spacing: -1px;
    white-space: nowrap;
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.partner__logo {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 180px;
    height: 64px;
    border: 0.5px solid var(--orange-deep);
    border-radius: var(--radius-md);
    background: #ffffff;
    overflow: hidden;
}
.partner__logo img {
    width: 158px;                       /* the export's own box */
    height: 40px;
    transform: translateY(3px);         /* Figma optical centring */
}

/* =============================================================
   10 AGENDA  (Figma 53:2696 / 53:2697)
   ============================================================= */
.agenda { background: var(--bg-base); padding-block: var(--space-2xl); }
.agenda__list { margin-top: 64px; }
.agenda__row {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--hairline);
}
.agenda__time {
    flex: 0 0 auto;
    width: 200px;
    padding: var(--space-sm);
    font-size: 18px;
    font-weight: var(--fw-semibold);
    line-height: 30px;
    color: var(--text-time);
}
.agenda__detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.agenda__kicker {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    line-height: 17px;
    letter-spacing: 1.28px;
    text-transform: uppercase;
    color: var(--orange-alt);
}
.agenda__title {
    font-size: 18px;
    font-weight: var(--fw-semibold);
    line-height: 30px;
    color: var(--white);
}

/* =============================================================
   11 BRAND CLOUD — "Brands already on 1PD Ops"  (Figma 55:3087)
   PORTED from the CustomerLabs Astro homepage component:
     src/components/AnimatedBrandCloud/AnimatedBrandCloud.astro
     src/styles/components/animated-brand-cloud.css
   The Figma frames are literally named div.brand-cloud__card /
   __metric, so this is a 1:1 port. Only changes: Astro design
   tokens remapped to edition5 tokens, the component's own
   heading rules dropped (UK uses the shared .section-head),
   canvas ratio set to the Figma canvas (1226x640) and card
   padding to the Figma picture inset (15px 19px).
   Mobile (<48rem) hides the SVG mesh and lays the cards out as a
   2-column grid — which is exactly the UK mobile Figma (96:5067).
   ============================================================= */
.brands { background: var(--bg-base); padding-block: var(--space-2xl); }
.brands__cloud-wrap { margin-top: var(--space-2xl); }

/* ==========================================================================
   SECTION CONTAINER
   ========================================================================== */

.brand-cloud {
  position: relative;
  width: 100%;
  overflow: visible;
  background: transparent;
  padding-block: var(--space-2xl) var(--space-lg);
  isolation: isolate;
  contain: layout style;
}

/* Slow-moving aurora overlay */
.brand-cloud__aurora {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 80% 60% at 25% 40%, rgba(16, 18, 26, 0.1), transparent),
    radial-gradient(ellipse 60% 80% at 75% 60%, rgba(16, 18, 26, 0.1), transparent);
  animation: bc-aurora 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes bc-aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(3%, 2%) rotate(2deg) scale(1.05); }
  100% { transform: translate(-2%, -1%) rotate(-1deg) scale(1.02); }
}

/* ==========================================================================
   INNER CONTAINER
   ========================================================================== */

.brand-cloud__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ==========================================================================
   CANVAS — relative container for SVG + logo overlay
   ========================================================================== */

.brand-cloud__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1226 / 640;
  max-height: 640px;
}

/* ==========================================================================
   SVG MESH BACKGROUND
   ========================================================================== */

.brand-cloud__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Line draw --- */
.bc-mesh-line {
  stroke-dasharray: var(--path-len);
  stroke-dashoffset: var(--path-len);
  opacity: 0;
}

.brand-cloud.is-visible .bc-mesh-line {
  opacity: 1;
  animation: bc-draw-line 2s ease-out forwards;
  animation-delay: var(--line-delay, 0ms);
}

@keyframes bc-draw-line {
  to { stroke-dashoffset: 0; }
}

/* --- Intersection nodes (CSS glow via larger r + opacity, no SVG filter) --- */
.bc-mesh-node {
  fill: rgba(161, 161, 170, 0.3);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.brand-cloud.is-visible .bc-mesh-node {
  animation:
    bc-node-in 0.5s ease-out forwards,
    bc-node-pulse 5s ease-in-out 2s infinite;
  animation-delay: var(--node-delay, 0ms);
}

@keyframes bc-node-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bc-node-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.8); }
}

/* --- Pulse particles --- */
.bc-pulse-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.brand-cloud.is-visible .bc-pulse-dot {
  animation: bc-pulse-breathe 3s ease-in-out infinite;
  animation-delay: 2.5s;
}

@keyframes bc-pulse-breathe {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50%      { opacity: 0.75; transform: scale(1.4); }
}

/* --- Star twinkle --- */
.bc-star--twinkle {
  animation: bc-twinkle 5s ease-in-out infinite;
}

@keyframes bc-twinkle {
  0%, 100% { opacity: 0.04; }
  50%      { opacity: 0.3; }
}

/* ==========================================================================
   LOGO CARDS LAYER
   ========================================================================== */

.brand-cloud__logos {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* --- Card wrapper (position + entrance) --- */
.brand-cloud__card-wrap {
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  transform: translate(-50%, -50%);
  opacity: 0;
  scale: 0.5;
  transition:
    opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.brand-cloud.is-visible .brand-cloud__card-wrap {
  opacity: 1;
  scale: 1;
  transition-delay: var(--entrance-delay, 0ms);
}

/* Hover lift */
.brand-cloud__card-wrap:hover {
  z-index: 10;
  scale: 1.12;
  transition-delay: 0ms !important;
  transition-duration: 0.3s;
}

/* --- Glass card --- */
.brand-cloud__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 15px 19px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Float animation on inner card (won't conflict with wrapper entrance) */
.brand-cloud.is-visible .brand-cloud__card {
  animation: bc-float var(--float-dur, 3.5s) ease-in-out infinite;
  animation-delay: var(--float-offset, 0s);
}

@keyframes bc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Hover glow */
.brand-cloud__card-wrap:hover .brand-cloud__card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation-play-state: paused;
}

/* Logo plate: the UK Figma sits each logo on a white rounded plate inside the
   dark glass card (55:3206) — the Astro homepage put the logo straight on the
   card, so this plate is the one visual change the port needs. */
.brand-cloud__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.brand-cloud__card--md .brand-cloud__plate {
  width: 120px;
  height: 70px;
}

.brand-cloud__card--sm .brand-cloud__plate {
  width: 100px;
  height: 56px;
}

/* Logo art is inset within the plate (Figma: 96x21 inside 120x70) */
.brand-cloud__plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 64%;
  object-fit: contain;
}

/* ==========================================================================
   METRIC BADGES — business outcome pills
   ========================================================================== */

.brand-cloud__metric {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(10, 40, 30, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-family: var(--font);
  font-size: 0.65rem;
  white-space: nowrap;
  pointer-events: none;
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-cloud.is-visible .brand-cloud__metric {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transition-delay: var(--metric-delay, 0ms);
  animation: bc-metric-glow 4s ease-in-out infinite;
  animation-delay: calc(var(--metric-delay, 0ms) + 700ms);
}

@keyframes bc-metric-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  50%      { box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.2); }
}

.brand-cloud__metric-value {
  color: #6ee7b7;
  font-weight: 700;
}

.brand-cloud__metric-label {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Mobile: 2-column grid per Figma (node 492:2567) */
@media (max-width: 47.9375rem) {
  .brand-cloud {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .brand-cloud__canvas {
    aspect-ratio: auto;
    max-height: none;
  }

  .brand-cloud__svg {
    display: none;
  }

  .brand-cloud__logos {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0;
  }

  .brand-cloud__card-wrap {
    position: static;
    transform: none;
    scale: 1;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .brand-cloud.is-visible .brand-cloud__card-wrap {
    scale: 1;
  }

  .brand-cloud.is-visible .brand-cloud__card {
    animation: none;
  }

  .brand-cloud__card {
    padding: 14px 16px;
    width: 100%;
    justify-content: center;
  }

  .brand-cloud__card--md .brand-cloud__plate,
  .brand-cloud__card--sm .brand-cloud__plate {
    width: 100px;
    height: 56px;
  }

  .brand-cloud__metric {
    position: static;
    transform: none;
    margin-top: 8px;
    font-size: 0.65rem;
    padding: 3px 10px;
  }

  .brand-cloud.is-visible .brand-cloud__metric {
    transform: none;
  }
}

/* Tablet — taller canvas ratio to match SVG viewBox (1400×800 ≈ 16/9) + scaled cards */
@media (min-width: 48rem) and (max-width: 64rem) {

  .brand-cloud__canvas {
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  .brand-cloud__card-wrap {
    scale: 0.72;
  }

  .brand-cloud__card {
    padding: 10px 12px;
    border-radius: 9px;
  }

  .brand-cloud__card--md .brand-cloud__plate {
    width: 88px;
    height: 50px;
  }

  .brand-cloud__card--sm .brand-cloud__plate {
    width: 74px;
    height: 42px;
  }

  .brand-cloud__metric {
    font-size: 0.55rem;
    padding: 2px 7px;
    gap: 3px;
  }
}

/* Small desktop (1024–1279px) — scaled cards */
@media (min-width: 64.0625rem) and (max-width: 79.9375rem) {

  .brand-cloud__card-wrap {
    scale: 0.85;
  }

  .brand-cloud__card--md .brand-cloud__plate {
    width: 100px;
    height: 58px;
  }

  .brand-cloud__card--sm .brand-cloud__plate {
    width: 84px;
    height: 48px;
  }
}

/* Desktop (1280px+) */

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .brand-cloud__aurora {
    animation: none;
  }

  .bc-star--twinkle,
  .bc-mesh-node,
  .bc-pulse-dot {
    animation: none !important;
  }

  .bc-mesh-line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .brand-cloud__card {
    animation: none !important;
  }

  .brand-cloud__card-wrap {
    transition: none !important;
    opacity: 1 !important;
    scale: 1 !important;
  }

  .brand-cloud__metric {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================================
   12 PRICING  (Figma 55:3521 · Early Bird 55:3605 · Regular 55:3524)
   Two tiers, 1-10 seat selector, live "You Pay" total.
   Light card = live tier; dark card = the not-yet-open tier,
   dimmed by an overlay exactly as in the Figma.
   ============================================================= */
.pricing {
    position: relative;
    background: var(--bg-base);
    padding-block: var(--space-2xl);
    overflow: hidden;
}
/* Decorative corner blooms (Figma 55:3522 / 55:3523 — 450px blurs) */
.pricing::before,
.pricing::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 80, 34, 0.12), transparent 70%);
    pointer-events: none;
}
.pricing::before { top: -167px; right: -72px; }
.pricing::after  { bottom: -100px; left: -102px; }

.pricing__tiers {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    max-width: 1080px;
    margin: 64px auto 0;
}

.pricing__tier { position: relative; }
/* Warm glow behind the live tier (Figma 55:3606) */
.pricing__tier--live::before {
    content: '';
    position: absolute;
    inset: 20px 0 20px 0;
    background: var(--orange-deep);
    opacity: 0.24;
    filter: blur(60px);
    border-radius: var(--radius-xl);
    pointer-events: none;
}

.pricing__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 600fr) minmax(0, 360fr);
    gap: 40px;
    padding: 40px;
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.pricing__tier--live .pricing__card {
    background: #ffffff;
    border: 1px solid rgba(242, 80, 34, 0.48);
}
.pricing__tier--soon .pricing__card {
    background: #000000;
    border: 1px solid rgba(242, 80, 34, 0.16);
}
/* Dimming overlay over the tier that is not open yet (Figma 55:3604) */
.pricing__veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--bg-base);
    opacity: 0.64;
    border-radius: var(--radius-xl);
    pointer-events: none;
}

.pricing__panel {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    border: 0.5px solid rgba(242, 80, 34, 0.4);
}
.pricing__panel--price { border-radius: var(--radius-md); }
.pricing__panel--benefits { border-radius: var(--radius-lg); }
.pricing__tier--live .pricing__panel { background: var(--white); }
.pricing__tier--soon .pricing__panel { background: var(--surface-card); }

/* --- Panel head: tier badge + closing date --- */
.pricing__panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}
.pricing__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--space-sm);
    font-size: 16px;
    font-weight: var(--fw-semibold);
    line-height: 16px;
    border-radius: var(--radius-xl);
}
.pricing__status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.pricing__tier--live .pricing__status {
    color: var(--text-on-light);
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid var(--green);
}
.pricing__tier--live .pricing__status::before { background: var(--green); }
.pricing__tier--soon .pricing__status {
    color: var(--white);
    background: rgba(242, 80, 34, 0.12);
    border: 1px solid rgba(242, 80, 34, 0.5);
}
.pricing__tier--soon .pricing__status::before { background: var(--orange-deep); }

.pricing__closes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: var(--fw-medium);
}
.pricing__closes::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange-deep);
}
.pricing__tier--live .pricing__closes { color: var(--text-on-light); }
.pricing__tier--soon .pricing__closes { color: var(--white); }

/* --- Tier name + headline price --- */
.pricing__headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}
.pricing__tier-name {
    font-size: 24px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}
.pricing__tier-desc {
    max-width: 296px;
    margin-top: 6px;
    font-size: 11px;
    line-height: 16px;
}
.pricing__amounts { text-align: right; flex: 0 0 auto; }
.pricing__amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-xs);
}
.pricing__amount-value {
    font-size: 40px;
    font-weight: var(--fw-bold);
    line-height: 48px;
}
.pricing__amount-vat { font-size: 16px; font-weight: var(--fw-medium); }
.pricing__amount-was {
    margin-top: 4px;
    font-size: 16px;
    font-weight: var(--fw-medium);
    text-decoration: line-through;
}
.pricing__tier--live .pricing__tier-name,
.pricing__tier--live .pricing__amount-value { color: var(--text-on-light); }
.pricing__tier--live .pricing__tier-desc,
.pricing__tier--live .pricing__amount-vat,
.pricing__tier--live .pricing__amount-was { color: var(--text-muted-light); }
.pricing__tier--soon .pricing__tier-name,
.pricing__tier--soon .pricing__amount-value { color: var(--white); }
.pricing__tier--soon .pricing__tier-desc,
.pricing__tier--soon .pricing__amount-vat,
.pricing__tier--soon .pricing__amount-was { color: var(--text-muted); }

/* --- Seat selector --- */

/* --- "You Pay" total --- */

/* --- CTA --- */
.pricing__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--orange-deep);
    border-radius: var(--radius-sm);
    transition: filter var(--transition-base), transform var(--transition-base);
}
.pricing__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pricing__cta-label {
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white);
}
.pricing__cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.pricing__cta-arrow img { width: 14px; height: 14px; }
/* The not-yet-open tier's CTA is inert (Figma shows it dimmed) */
.pricing__cta[aria-disabled="true"] { pointer-events: none; }

/* --- Benefits panel --- */
.pricing__benefits-title {
    font-size: 24px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}
.pricing__tier--live .pricing__benefits-title { color: var(--text-on-light); }
.pricing__tier--soon .pricing__benefits-title { color: var(--teal-accent); }
.pricing__benefits-rule {
    height: 0;
    margin: var(--space-md) 0 var(--space-lg);
    border-top: 1px solid rgba(242, 80, 34, 0.24);
}
.pricing__benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pricing__benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 20px;
    font-weight: var(--fw-regular);
    line-height: 28px;
}
.pricing__benefit strong { font-weight: var(--fw-semibold); }
.pricing__benefit img { flex: 0 0 auto; width: 20px; }
.pricing__tier--live .pricing__benefit { color: var(--text-on-light); }
.pricing__tier--soon .pricing__benefit { color: var(--white); }

/* =============================================================
   13 LOCATION  (Figma 65:4064)
   ============================================================= */
.location { background: var(--bg-section-b); padding-block: var(--space-2xl); }
.location__card {
    display: grid;
    grid-template-columns: 600px minmax(0, 1fr);
    align-items: center;
    gap: 88px;
    min-height: 440px;
    padding: 40px 64px;
    background: var(--bg-nav);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-xl);
}
/* Now an <iframe> embed rather than a flat export, so it can point at the
   actual venue. Sizing is unchanged; the dark ground stops a white flash
   before the map tiles arrive. */
.location__map {
    display: block;
    width: 600px;
    height: 360px;
    border: 2px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-xl);
    background: var(--bg-base);
    object-fit: cover;
}
.location__contact { display: flex; flex-direction: column; gap: var(--space-sm); }
.location__title {
    font-size: 40px;
    font-weight: var(--fw-semibold);
    line-height: 44px;
    letter-spacing: -0.64px;
    color: #ffffff;
}
.location__title em { font-style: normal; color: var(--orange-alt); }
.location__body { font-size: 16px; line-height: 26px; color: var(--text-body); }
.location__body a { text-decoration: underline; }
.location__body a:hover { color: var(--green); }

/* =============================================================
   14 SITE FOOTER  (Figma 55:3691)
   ============================================================= */
.site-footer { background: var(--bg-base); border-top: 1px solid var(--glass-border); }
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: 80px;
    padding-block: var(--space-lg);
}
.site-footer__logo img { width: 137px; height: 32px; }
.site-footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    line-height: 17px;
    color: var(--text-body);
}
.site-footer__legal a:hover { color: var(--green); }
.site-footer__separator { color: var(--text-tertiary); }
.site-footer__social { display: flex; align-items: center; gap: var(--space-lg); }
.site-footer__social-link {
    display: flex;
    color: var(--text-body);
    transition: color var(--transition-base);
}
.site-footer__social-link:hover { color: var(--white); }

/* =============================================================
   15 RESPONSIVE
   Desktop Figma 1-1336 (1728 wide) · mobile Figma 94-2137 (375).
   Where the mobile frame restructures a section rather than just
   scaling it, the change is called out against its mobile node.
   ============================================================= */

/* ---------- Tablet & desktop: the phone panel must not exist ----------
   Placed here (after the .mobile-nav base rule) so it actually wins; the
   hamburger that opens it is display:none at these widths anyway, and this
   also covers resizing from phone to desktop while the panel is open. */
@media (min-width: 768px) {
    .mobile-nav,
    .mobile-nav.is-open { display: none; }
}

/* ---------- Large desktop: keep Figma's 1440 gutter ---------- */
@media (min-width: 1600px) {
    :root { --container-pad: 40px; }
}

/* ---------- Below the 1290 content width ---------- */
@media (max-width: 1360px) {
    /* Four 292px-wide cards + three 48px gutters + the container's 48px of
       padding need 1360px. Below that the columns would squeeze the card
       below its designed width and the synopsis would wrap to a ragged
       column, so drop to two full-width cards instead. */
    .speakers__grid { grid-template-columns: repeat(2, minmax(0, 324px)); gap: var(--space-lg); }
    .kpis__body { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 40px; }
    .location__card { gap: 48px; padding: 40px; }
}

/* ---------- Tablet (768–1023px) ---------- */
@media (max-width: 1023px) {
    .section-title { font-size: 38px; line-height: 44px; }
    .hero__eyebrow { font-size: 30px; line-height: 36px; }
    .hero__title { font-size: 46px; line-height: 52px; letter-spacing: -1.4px; }
    .hero__gear { width: 45px; height: 47px; transform: translateY(4px); }

    /* KPIs: tabs above, panel below */
    .kpis__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .kpis__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpis__body > .kpis__plate { justify-self: stretch; }
    /* Stacked, so there is nothing to stick beside */
    .kpis__plate { padding: var(--space-xl); }

    /* Partner: the 640px panel no longer fits beside the photo, so the card
       stacks the way the mobile frame does (Figma 196:3771). */
    .partner__card { height: auto; border-radius: var(--radius-lg); }
    .partner__arrows { display: none; }
    .partner__photo { position: relative; width: 100%; height: 280px; }
    .partner__panel {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        min-width: 0;
        height: auto;
        margin: -60px var(--space-lg) var(--space-lg);
        transform: none;
    }
    .partner__plate { padding: var(--space-xl) var(--space-lg); }

    /* Pricing: price panel then benefits panel */
    .pricing__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); }

    /* Location: map above the contact block */
    .location__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-xl); }
    .location__map { width: 100%; height: auto; aspect-ratio: 600 / 360; }
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
    :root {
        --container-pad: 16px;
        --section-py: 32px;
        --header-h: 88px;              /* 56 nav + 32 strip */
    }

    /* Nav: 56px bar, hamburger replaces links + CTA (Figma 94:2916) */
    .site-header__bar { height: 56px; }
    .site-header__logo img { width: 110px; height: 26px; }
    .site-header__actions { display: none; }
    .site-header__burger { display: flex; }

    /* Hero (Figma 94:2923) */
    .hero { min-height: 0; padding-block: var(--space-xl) 40px; }
    .hero__rings { top: 180px; width: 760px; height: 760px; }
    .hero__ring:nth-child(2) { inset: 64px; }
    .hero__ring:nth-child(3) { inset: 128px; }
    .hero__ring:nth-child(4) { inset: 192px; }
    .hero__ring:nth-child(5) { inset: 256px; }
    .hero__inner { gap: var(--space-md); }
    .hero__eyebrow {
        gap: var(--space-xs);
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.2px;
    }
    .hero__dots { gap: 2px; }
    .hero__dot { width: 4px; height: 4px; }
    .hero__title { font-size: 30px; line-height: 36px; letter-spacing: -0.9px; }
    .hero__gear { width: 29px; height: 31px; transform: translateY(3px); }
    .hero__subhead { font-size: 14px; line-height: 22px; }
    .hero__cta { width: 100%; }

    /* Info: 2 up, venue spans both (Figma 96:3078) */
    .info__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .info__cell { width: auto; padding: var(--space-md); }
    .info__cell:nth-child(2) { border-right: 0; }
    .info__cell:nth-child(3) {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
        border-top: 1px solid var(--divider);
    }
    .info__label { font-size: 12px; line-height: 18px; }
    .info__value { font-size: 22px; line-height: 28px; }
    .info__suffix { font-size: 12px; }

    /* Section heads */
    .section-title { font-size: 26px; line-height: 32px; letter-spacing: -0.4px; }
    .section-subhead { font-size: 13px; line-height: 20px; }
    .kicker { font-size: 11px; letter-spacing: 1.1px; }
    .pill { padding: 6px var(--space-sm); font-size: 13px; }

    /* Eligibility: options become a chip row ABOVE the answer, and the
       answer copy says "on the Top" instead of "on the left" (Figma 96:3160) */
    .eligibility__body {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        margin-top: var(--space-lg);
    }
    .eligibility__options {
        flex-direction: row;
        gap: var(--space-xs);
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .eligibility__options::-webkit-scrollbar { display: none; }
    .eligibility__option {
        flex: 0 0 auto;
        width: auto;
        height: 44px;
        gap: var(--space-xs);
        padding-inline: var(--space-sm);
    }
    .eligibility__label { font-size: 14px; line-height: 20px; }
    .eligibility__key { font-size: 11px; }
    .eligibility__where--desktop { display: none; }
    .eligibility__where--mobile { display: inline; }
    .eligibility__answer { min-height: 0; padding: var(--space-lg) var(--space-md); }
    .eligibility__answer-title { font-size: 18px; line-height: 24px; }
    .eligibility__answer-body { font-size: 14px; line-height: 22px; }

    /* KPIs: tabs scroll horizontally, one row (Figma 96:3374) */
    /* Partner — mobile (Figma 196:3771): photo on top, panel below it with
       the title stacked over the logo, both centred. */
    .partner { padding-block: var(--space-xl); }
    .partner__plate {
        flex-direction: column;
        justify-content: center;
        gap: var(--space-lg);
        min-height: 280px;
        padding: var(--space-xl) var(--space-md);
        border-radius: var(--radius-md);
    }
    .partner__panel { margin-inline: var(--space-md); }
    .partner__glow { border-radius: var(--radius-md); }
    .partner__title { font-size: 22px; line-height: 1.6; letter-spacing: normal; }
    .partner__plate-mark { right: 50%; transform: translateX(50%); }

    /* Content CTA — mobile (Figma 196:3706, a ~310px band) */
    .content-cta__symbol { top: var(--space-lg); left: var(--space-lg); width: 41px; }
    .content-cta__statement { font-size: 20px; line-height: 1.35; letter-spacing: -0.4px; }
    .content-cta__hashtag { margin-top: var(--space-xl); font-size: 30px; }
    .content-cta__cta { margin-top: var(--space-xl); width: 100%; min-width: 0; }
    /* Gears stay, scaled to the shorter band */
    .content-cta__gear--1 { width: 190px; top: calc(50% - 10px); left: 50%; }
    .content-cta__gear--2 { width: 120px; top: -24px; right: -18px; }
    .content-cta__gear--3 { width: 120px; top: 50%; left: -26px; transform: translateY(-50%) rotate(180deg) scaleY(-1); }

    .kpis__body { margin-top: var(--space-lg); gap: var(--space-lg); }
    .kpis__tabs {
        display: flex;
        gap: var(--space-sm);
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .kpis__tabs::-webkit-scrollbar { display: none; }
    .kpis__tab { flex: 0 0 258px; scroll-snap-align: start; min-height: 72px; }
    .kpis__tab-label { font-size: 14px; }
    /* On mobile the panel sits straight on the section, so the stage and its
       animation come off entirely rather than being shrunk. */
    .kpis__plate { padding: 0; background: none; border-radius: 0; box-shadow: none; }
    .kpis__blobs { display: none; }
    .kpis__panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-nav); }
    .kpis__panel { max-width: none; }
    .kpis__panel-told { padding: var(--space-lg) var(--space-md) var(--space-sm); }
    .kpis__panel-real { padding: var(--space-lg) var(--space-md); }
    .kpis__panel-session { padding: var(--space-sm) var(--space-md); }
    .kpis__told-label, .kpis__told-quote { font-size: 13px; line-height: 20px; }
    .kpis__real-label { font-size: 17px; line-height: 22px; letter-spacing: 1.4px; }
    .kpis__real-body { font-size: 14px; }
    .kpis__session-label { font-size: 12px; letter-spacing: 1.4px; }

    /* Speakers: single column (Figma 96:3745 — 7 cards stacked) */
    .speakers__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
        margin-top: var(--space-lg);
    }
    .speakers__card { min-height: 0; }
    .speakers__photo { height: auto; aspect-ratio: 292 / 320; }
    .speakers__photo--hover { height: 100%; }

    /* Agenda: narrower time column, smaller type — still 2 columns
       (Figma 96:4645 keeps the time/detail split on mobile) */
    .agenda__list { margin-top: var(--space-lg); }
    .agenda__row { gap: var(--space-sm); padding: var(--space-sm) 0; }
    .agenda__time { width: 108px; padding: 0; font-size: 11px; line-height: 16px; white-space: nowrap; }
    .agenda__kicker { font-size: 9px; line-height: 13px; letter-spacing: 0.8px; }
    .agenda__title { font-size: 13px; line-height: 19px; }

    /* Brand cloud mobile grid comes from the ported component CSS above */
    .brands__cloud-wrap { margin-top: var(--space-lg); }

    /* Pricing (Figma 96:5896) */
    .pricing__tiers { gap: var(--space-xl); margin-top: var(--space-lg); }
    .pricing__card { padding: var(--space-sm); gap: var(--space-sm); }
    .pricing__panel { padding: var(--space-md); }
    .pricing__panel-top { gap: var(--space-xs); }
    .pricing__status { font-size: 13px; padding: 3px 10px; }
    .pricing__closes { font-size: 10px; }
    .pricing__headline { gap: var(--space-sm); margin-top: var(--space-md); }
    .pricing__tier-name { font-size: 18px; }
    .pricing__tier-desc { max-width: 180px; font-size: 10px; line-height: 14px; }
    .pricing__amount-value { font-size: 28px; line-height: 34px; }
    .pricing__amount-vat, .pricing__amount-was { font-size: 12px; }
    .pricing__cta { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); }
    .pricing__cta-label { font-size: 13px; letter-spacing: 0.8px; }
    .pricing__cta-arrow { width: 24px; height: 24px; }
    .pricing__benefits-title { font-size: 18px; }
    .pricing__benefits-rule { margin: var(--space-sm) 0 var(--space-md); }
    .pricing__benefits { gap: var(--space-sm); }
    .pricing__benefit { font-size: 14px; line-height: 20px; gap: var(--space-xs); }
    .pricing__benefit img { width: 16px; }

    /* Location */
    .location__card { padding: var(--space-md); border-width: 1px; }
    .location__title { font-size: 26px; line-height: 32px; }
    .location__body { font-size: 14px; line-height: 22px; }

    /* Footer: stacked and centred, socials above the legal links
       (Figma 96:6679 — 209px tall) */
    .site-footer__inner {
        flex-direction: column;
        gap: var(--space-lg);
        padding-block: var(--space-xl);
        text-align: center;
    }
    .site-footer__legal { order: 3; font-size: 12px; }
    .site-footer__social { order: 2; gap: var(--space-xl); }
    .site-footer__social-link svg { width: 24px; height: 24px; }
    .strip__track { gap: var(--space-lg); padding-inline: var(--space-md); }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 400px) {
    .hero__title { font-size: 27px; line-height: 33px; }
    .hero__gear { width: 26px; height: 28px; }
    .agenda__time { width: 98px; font-size: 10px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .strip__track { animation: none; }
}