/* =========================================================================
   PulseCore v2 — components
   Consumes tokens from tokens.css only. No literal colours/sizes here.

   Everything is namespaced `v2-` so that pages whose body view has not been
   themed yet (they fall back to the original view) keep their own styling.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */

.v2-body {
  font-family: var(--v2-font-sans);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text);
  background: var(--v2-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.v2-scope,
.v2-scope * {
  box-sizing: border-box;
}

/* `:where()` keeps these element resets at zero extra specificity so every
   component rule below can override them without a specificity war. */
.v2-scope :where(img, svg) {
  max-width: 100%;
  height: auto;
  display: block;
}

.v2-scope :where(p) {
  font-size: inherit;
  margin: 0;
}

.v2-scope :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: inherit;
  font-weight: var(--v2-fw-semibold);
  line-height: var(--v2-lh-snug);
  letter-spacing: var(--v2-ls-tight);
  overflow-wrap: break-word;
}

.v2-scope :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-scope :where(a) {
  color: inherit;
  text-decoration: none;
}

/* style.css ships `a { transition: all .4s ease !important }`, which would
   otherwise outrank every component transition here — including the ones the
   reduced-motion block collapses. Re-state it through the motion tokens so
   `prefers-reduced-motion` is genuinely honoured on links too. */
.v2-scope a,
.v2-skip {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter !important;
  transition-duration: var(--v2-dur-2) !important;
  transition-timing-function: var(--v2-ease) !important;
}

.v2-scope :where(hr) {
  border: 0;
  border-top: 1px solid var(--v2-line);
  margin: 0;
}

.v2-scope :where(figure, blockquote, dl, dd) {
  margin: 0;
}

/* Long unbroken strings (URLs, org names) must never widen the page. */
.v2-scope :where(p, li, dd, dt, address, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

.v2-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;
}

/* Visible focus on every interactive element, on light and on dark. */
.v2-scope :focus-visible {
  outline: var(--v2-focus-width) solid var(--v2-focus);
  outline-offset: var(--v2-focus-offset);
  border-radius: var(--v2-r-xs);
}

.v2-on-dark :focus-visible,
.v2-scope .v2-on-dark :focus-visible {
  outline-color: var(--v2-focus-on-dark);
}

.v2-skip {
  position: absolute;
  left: var(--v2-sp-4);
  top: var(--v2-sp-2);
  z-index: var(--v2-z-skiplink);
  transform: translateY(-200%);
  background: var(--v2-accent);
  color: var(--v2-text-invert);
  padding: var(--v2-sp-3) var(--v2-sp-5);
  border-radius: var(--v2-r-sm);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  transition: transform var(--v2-dur-2) var(--v2-ease);
}

.v2-skip:focus {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   2. Layout primitives
   ------------------------------------------------------------------------- */

.v2-container {
  width: 100%;
  max-width: var(--v2-container);
  margin-inline: auto;
  padding-inline: var(--v2-gutter);
}

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

.v2-section--tight {
  padding-block: var(--v2-section-y-tight);
}

.v2-section--alt {
  background: var(--v2-surface-2);
}

.v2-section--dark {
  background: var(--v2-ink-850);
  color: var(--v2-text-invert);
}

.v2-section--line {
  border-top: 1px solid var(--v2-line);
}

.v2-section-head {
  max-width: 62ch;
  margin-bottom: var(--v2-sp-8);
}

.v2-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.v2-eyebrow--center {
  justify-content: center;
}

.v2-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-accent);
  margin-bottom: var(--v2-sp-3);
}

.v2-section-head--center .v2-eyebrow {
  justify-content: center;
}

.v2-eyebrow::before {
  content: "";
  width: var(--v2-sp-6);
  height: 2px;
  flex: none;
  background: var(--v2-accent);
}

.v2-section--dark .v2-eyebrow,
.v2-on-dark .v2-eyebrow {
  color: var(--v2-text-invert);
}

.v2-section--dark .v2-eyebrow::before,
.v2-on-dark .v2-eyebrow::before {
  background: var(--v2-accent);
}

.v2-section-title {
  font-size: var(--v2-fs-3xl);
  font-weight: var(--v2-fw-bold);
}

.v2-section-title--sm {
  font-size: var(--v2-fs-xl);
}

.v2-subheading {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-section-lead {
  margin-top: var(--v2-sp-4);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-section--dark .v2-section-lead,
.v2-on-dark .v2-section-lead {
  color: var(--v2-text-invert-muted);
}

.v2-section-foot {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-4);
  align-items: center;
}

.v2-section-foot--center {
  justify-content: center;
}

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-6);
  border: 1px solid transparent;
  border-radius: var(--v2-r-sm);
  background: var(--v2-accent);
  color: var(--v2-text-invert);
  font-family: inherit;
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-btn:hover {
  background: var(--v2-accent-hover);
  color: var(--v2-text-invert);
}

.v2-btn:active {
  background: var(--v2-accent-active);
}

.v2-btn--secondary {
  background: transparent;
  color: var(--v2-text);
  border-color: var(--v2-line-strong);
}

.v2-btn--secondary:hover {
  background: var(--v2-surface-3);
  color: var(--v2-text);
  border-color: var(--v2-text-muted);
}

.v2-btn--ghost-light {
  background: transparent;
  color: var(--v2-text-invert);
  border-color: var(--v2-line-on-dark-2);
}

.v2-btn--ghost-light:hover {
  background: var(--v2-tint-5);
  color: var(--v2-text-invert);
  border-color: var(--v2-text-invert);
}

.v2-btn--sm {
  min-height: var(--v2-tap);
  padding: var(--v2-sp-2) var(--v2-sp-4);
  font-size: var(--v2-fs-xs);
}

.v2-btn--block {
  width: 100%;
}

/* Quiet text link with a moving underline */
.v2-link {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
  min-height: var(--v2-tap);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-accent);
  border-bottom: 1px solid var(--v2-accent-line);
  transition: color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-link:hover {
  color: var(--v2-accent-hover);
  border-bottom-color: var(--v2-accent);
}

.v2-on-dark .v2-link,
.v2-section--dark .v2-link {
  color: var(--v2-text-invert);
  border-bottom-color: var(--v2-line-on-dark-2);
}

.v2-on-dark .v2-link:hover,
.v2-section--dark .v2-link:hover {
  color: var(--v2-text-invert);
  border-bottom-color: var(--v2-accent);
}

/* -------------------------------------------------------------------------
   4. Announcement bar
   ------------------------------------------------------------------------- */

.v2-announce {
  background: var(--v2-ink-900);
  color: var(--v2-text-invert-muted);
  border-bottom: 1px solid var(--v2-line-on-dark);
  font-size: var(--v2-fs-xs);
}

.v2-announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2) var(--v2-sp-4);
  padding-block: var(--v2-sp-2);
  text-align: center;
}

.v2-announce__item {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
  letter-spacing: var(--v2-ls-wide);
  min-width: 0;
}

.v2-announce__item--strong {
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
}

.v2-announce__dot {
  width: var(--v2-sp-1);
  height: var(--v2-sp-1);
  border-radius: var(--v2-r-pill);
  background: var(--v2-accent);
  flex: none;
}

.v2-announce__link {
  color: var(--v2-text-invert);
  border-bottom: 1px solid var(--v2-accent);
  font-weight: var(--v2-fw-semibold);
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
}

.v2-announce__link:hover {
  color: var(--v2-accent);
}

/* -------------------------------------------------------------------------
   5. Header + primary navigation
   ------------------------------------------------------------------------- */

.v2-header {
  position: sticky;
  top: 0;
  z-index: var(--v2-z-header);
  background: var(--v2-ink-850);
  color: var(--v2-text-invert);
  border-bottom: 1px solid var(--v2-line-on-dark);
}

.v2-header__inner {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  min-height: var(--v2-header-h);
}

.v2-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--v2-tap);
}

.v2-brand__img {
  height: var(--v2-logo-h-mobile);
  width: auto;
  /* Cap generously: the stacked mark is ~2.9:1, so at 34px it is ~98px wide.
     The cap only guards against an unexpectedly wide CMS logo. */
  max-width: 200px;
  object-fit: contain;
}

/* The desktop bar is hidden until there is provably room for nine items. */
.v2-nav {
  display: none;
}

.v2-header__cta {
  display: none;
}

.v2-header__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hamburger */
.v2-navtoggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2);
  min-width: var(--v2-tap);
  min-height: var(--v2-tap);
  padding-inline: var(--v2-sp-2);
  background: transparent;
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text-invert);
  font-family: inherit;
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-navtoggle:hover {
  background: var(--v2-tint-4);
}

.v2-navtoggle__bars {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.v2-navtoggle__bars::before,
.v2-navtoggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.v2-navtoggle__bars::before { top: -6px; }
.v2-navtoggle__bars::after  { top: 6px; }

/* ---- Mobile drawer ---- */

.v2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--v2-overlay-flat);
  z-index: var(--v2-z-drawer);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v2-dur-2) var(--v2-ease), visibility var(--v2-dur-2);
}

.v2-drawer-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.v2-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 380px);
  max-width: 100%;
  background: var(--v2-ink-850);
  color: var(--v2-text-invert);
  z-index: calc(var(--v2-z-drawer) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--v2-dur-3) var(--v2-ease-out), visibility var(--v2-dur-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.v2-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
}

.v2-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-4) var(--v2-sp-5);
  border-bottom: 1px solid var(--v2-line-on-dark);
}

.v2-drawer__title {
  font-size: var(--v2-fs-2xs);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-faint);
  font-weight: var(--v2-fw-semibold);
}

.v2-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--v2-tap);
  min-height: var(--v2-tap);
  background: transparent;
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text-invert);
  font-size: var(--v2-fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-drawer__close:hover {
  background: var(--v2-tint-5);
}

.v2-drawer__body {
  padding: var(--v2-sp-3) var(--v2-sp-5) var(--v2-sp-9);
}

.v2-drawer__list > li + li {
  border-top: 1px solid var(--v2-line-on-dark);
}

.v2-drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--v2-tap);
  padding-block: var(--v2-sp-3);
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-medium);
  color: var(--v2-text-invert);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-drawer__link:hover,
.v2-drawer__link[aria-current="page"] {
  color: var(--v2-accent);
}

.v2-drawer__disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-3);
  width: 100%;
  min-height: var(--v2-tap);
  padding-block: var(--v2-sp-3);
  background: transparent;
  border: 0;
  color: var(--v2-text-invert);
  font-family: inherit;
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-medium);
  text-align: left;
  cursor: pointer;
}

.v2-drawer__disclosure:hover {
  color: var(--v2-accent);
}

.v2-caret {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--v2-dur-2) var(--v2-ease);
}

[aria-expanded="true"] > .v2-caret {
  transform: rotate(180deg);
}

.v2-drawer__sub {
  padding: 0 0 var(--v2-sp-3) var(--v2-sp-4);
  border-left: 1px solid var(--v2-line-on-dark);
  margin-left: var(--v2-sp-1);
}

.v2-drawer__sub[hidden] {
  display: none;
}

.v2-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: var(--v2-tap);
  font-size: var(--v2-fs-base);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-drawer__sublink:hover {
  color: var(--v2-accent);
}

.v2-drawer__cta {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-drawer__meta {
  margin-top: var(--v2-sp-6);
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line-on-dark);
  font-size: var(--v2-fs-xs);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-faint);
}

/* ---- Desktop navigation: nine items, no overflow ----
   Enabled only from 1100px so the 992–1600px overflow bug cannot recur. */
@media (min-width: 1100px) {

  .v2-navtoggle {
    display: none;
  }

  .v2-brand__img {
    height: var(--v2-logo-h);
    max-width: 240px;
  }

  .v2-nav {
    display: block;
    margin-left: auto;
    min-width: 0;
  }

  .v2-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(0.25rem, -0.6rem + 1.2vw, 0.75rem);
  }

  .v2-nav__item {
    position: relative;
    flex: none;
  }

  .v2-nav__link,
  .v2-nav__disclosure {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-sp-1);
    min-height: var(--v2-tap);
    padding-inline: var(--v2-sp-2);
    background: transparent;
    border: 0;
    color: var(--v2-text-invert);
    font-family: inherit;
    font-size: var(--v2-fs-sm);
    font-weight: var(--v2-fw-medium);
    letter-spacing: var(--v2-ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--v2-dur-2) var(--v2-ease);
  }

  .v2-nav__link::after,
  .v2-nav__disclosure::after {
    content: "";
    position: absolute;
    left: var(--v2-sp-2);
    right: var(--v2-sp-2);
    bottom: var(--v2-sp-2);
    height: 2px;
    background: var(--v2-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--v2-dur-2) var(--v2-ease);
  }

  .v2-nav__link:hover,
  .v2-nav__disclosure:hover,
  .v2-nav__link[aria-current="page"] {
    color: var(--v2-text-invert);
  }

  .v2-nav__link:hover::after,
  .v2-nav__disclosure:hover::after,
  .v2-nav__link[aria-current="page"]::after,
  .v2-nav__disclosure[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .v2-nav__menu {
    position: absolute;
    top: calc(100% - var(--v2-sp-2));
    left: 0;
    min-width: 224px;
    padding: var(--v2-sp-2);
    background: var(--v2-ink-800);
    border: 1px solid var(--v2-line-on-dark);
    border-radius: var(--v2-r-md);
    box-shadow: var(--v2-sh-3);
  }

  .v2-nav__menu[hidden] {
    display: none;
  }

  .v2-nav__menu--end {
    left: auto;
    right: 0;
  }

  .v2-nav__menulink {
    display: flex;
    align-items: center;
    min-height: var(--v2-tap);
    padding-inline: var(--v2-sp-3);
    border-radius: var(--v2-r-sm);
    font-size: var(--v2-fs-sm);
    color: var(--v2-text-invert-muted);
    white-space: nowrap;
    transition: background-color var(--v2-dur-2) var(--v2-ease),
                color var(--v2-dur-2) var(--v2-ease);
  }

  .v2-nav__menulink:hover {
    background: var(--v2-tint-3);
    color: var(--v2-text-invert);
  }
}

@media (min-width: 1280px) {
  .v2-header__cta {
    display: inline-flex;
    flex: none;
    margin-left: var(--v2-sp-4);
  }

  .v2-nav {
    margin-left: auto;
  }
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */

.v2-hero {
  position: relative;
  background-color: var(--v2-ink-900);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
}

.v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-hero);
  z-index: -1;
}

.v2-hero__inner {
  padding-block: clamp(3rem, 1.9rem + 4.4vw, 6rem);
  display: grid;
  gap: var(--v2-sp-9);
}

.v2-hero__body {
  max-width: 44rem;
}

.v2-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v2-sp-2) var(--v2-sp-4);
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert);
  margin-bottom: var(--v2-sp-5);
}

.v2-hero__kicker span {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
}

.v2-hero__rule {
  width: clamp(2.5rem, 6vw, 5rem);
  height: 2px;
  background: var(--v2-hairline-grad);
  flex: none;
}

.v2-hero__title {
  font-size: var(--v2-fs-display);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  text-wrap: balance;
}

.v2-hero__lead {
  margin-top: var(--v2-sp-5);
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
  max-width: 58ch;
}

.v2-hero__facts {
  margin-top: var(--v2-sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
}

.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
  padding: var(--v2-sp-2) var(--v2-sp-4);
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-pill);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert);
  background: var(--v2-tint-2);
  max-width: 100%;
}

.v2-hero__actions {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-3);
}

.v2-hero__actions .v2-btn {
  flex: 1 1 auto;
  min-width: min(100%, 13rem);
}

@media (min-width: 480px) {
  .v2-hero__actions .v2-btn {
    flex: 0 0 auto;
  }
}

/* ---- Countdown ---- */

.v2-countdown {
  border-top: 1px solid var(--v2-line-on-dark);
  padding-top: var(--v2-sp-6);
}

.v2-countdown__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-faint);
  margin-bottom: var(--v2-sp-4);
}

.v2-countdown__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v2-sp-2);
  max-width: 34rem;
}

.v2-countdown__unit {
  padding: var(--v2-sp-3) var(--v2-sp-2);
  border: 1px solid var(--v2-line-on-dark);
  border-radius: var(--v2-r-md);
  background: var(--v2-tint-2);
  text-align: center;
  min-width: 0;
}

.v2-countdown__num {
  display: block;
  font-size: var(--v2-fs-numeric);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  letter-spacing: var(--v2-ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--v2-text-invert);
}

.v2-countdown__name {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-2xs);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-faint);
}

@media (min-width: 1024px) {
  .v2-hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--v2-sp-10);
  }

  .v2-countdown {
    border-top: 0;
    border-left: 1px solid var(--v2-line-on-dark);
    padding-top: 0;
    padding-left: var(--v2-sp-8);
  }

  .v2-countdown__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-sp-3);
  }
}

/* -------------------------------------------------------------------------
   7. Trust / logo strip
   ------------------------------------------------------------------------- */

.v2-trust {
  background: var(--v2-ink-900);
  color: var(--v2-text-invert);
  border-top: 1px solid var(--v2-line-on-dark);
  padding-block: var(--v2-sp-7);
}

.v2-trust__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-faint);
  text-align: center;
  margin-bottom: var(--v2-sp-5);
}

.v2-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  gap: var(--v2-sp-4);
  align-items: center;
}

.v2-trust__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--v2-sp-2);
}

.v2-trust__logo {
  width: 100%;
  max-width: 120px;
  aspect-ratio: var(--v2-ar-media);
  object-fit: contain;
  filter: grayscale(1) brightness(1.9);
  opacity: 0.72;
  transition: opacity var(--v2-dur-2) var(--v2-ease), filter var(--v2-dur-2) var(--v2-ease);
}

a:hover > .v2-trust__logo,
a:focus-visible > .v2-trust__logo {
  filter: none;
  opacity: 1;
}

/* -------------------------------------------------------------------------
   8. Quick links
   ------------------------------------------------------------------------- */

.v2-quick__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-quick__item {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease),
              transform var(--v2-dur-2) var(--v2-ease);
}

.v2-quick__item:hover {
  border-color: var(--v2-accent-line);
  box-shadow: var(--v2-sh-2);
  color: var(--v2-text);
}

.v2-quick__icon {
  width: 32px;
  height: 32px;
  flex: none;
  object-fit: contain;
}

.v2-quick__text {
  min-width: 0;
}

.v2-quick__name {
  display: block;
  font-size: var(--v2-fs-md);
}

.v2-quick__hint {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-xs);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text-muted);
}

/* -------------------------------------------------------------------------
   9. Overview + key themes
   ------------------------------------------------------------------------- */

.v2-overview {
  display: grid;
  gap: var(--v2-sp-9);
}

@media (min-width: 992px) {
  .v2-overview {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--v2-sp-10);
    align-items: start;
  }
}

.v2-prose {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-prose > * + * {
  margin-top: var(--v2-sp-4);
}

.v2-overview__media {
  position: relative;
  border-radius: var(--v2-r-lg);
  overflow: hidden;
  border: 1px solid var(--v2-line);
  background: var(--v2-surface-3);
}

.v2-overview__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: cover;
}

.v2-overview__caption {
  padding: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  background: var(--v2-surface);
  font-size: var(--v2-fs-base);
  color: var(--v2-text-muted);
}

.v2-overview__prose {
  margin-top: var(--v2-sp-6);
}

.v2-overview__themes {
  margin-top: var(--v2-sp-8);
}

.v2-themes {
  margin-top: var(--v2-sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-sp-1) var(--v2-sp-6);
}

.v2-themes__item {
  display: flex;
  gap: var(--v2-sp-3);
  padding-block: var(--v2-sp-3);
  border-bottom: 1px solid var(--v2-line);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text);
  min-width: 0;
}

.v2-themes__marker {
  flex: none;
  width: var(--v2-sp-2);
  height: var(--v2-sp-2);
  margin-top: 0.45em;
  background: var(--v2-signal);
  border-radius: var(--v2-r-xs);
}

/* -------------------------------------------------------------------------
   10. Speakers
   ------------------------------------------------------------------------- */

.v2-speakers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-speaker {
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  overflow: hidden;
  min-width: 0;
  height: 100%;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-speaker:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-2);
}

.v2-speaker__media {
  background: var(--v2-surface-3);
}

.v2-speaker__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-speaker);
  object-fit: cover;
  object-position: top center;
  transition: transform var(--v2-dur-3) var(--v2-ease);
}

.v2-speaker:hover .v2-speaker__img {
  transform: scale(1.03);
}

.v2-speaker__body {
  padding: var(--v2-sp-4) var(--v2-sp-5) var(--v2-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-2);
  flex: 1 1 auto;
  min-width: 0;
}

.v2-speaker__name {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
}

/* The card link is the primary target for this speaker, so it has to carry a
   full-size hit area rather than the height of one line of text. */
.v2-speaker__name a {
  display: flex;
  align-items: center;
  min-height: var(--v2-tap);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-speaker__name a:hover {
  color: var(--v2-accent);
}

/* Clamp long job titles so cards stay aligned; full text stays in title=""  */
.v2-speaker__role {
  font-size: var(--v2-fs-xs);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * var(--v2-lh-normal) * var(--v2-fs-xs));
}

/* -------------------------------------------------------------------------
   11. Agenda preview — day tabs
   ------------------------------------------------------------------------- */

.v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
  margin-bottom: var(--v2-sp-7);
}

.v2-tab {
  display: inline-flex;
  flex-direction: column;
  gap: var(--v2-sp-1);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  color: var(--v2-text-muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-tab:hover {
  border-color: var(--v2-line-strong);
  color: var(--v2-text);
}

.v2-tab[aria-selected="true"] {
  background: var(--v2-ink-850);
  border-color: var(--v2-ink-850);
  color: var(--v2-text-invert);
}

.v2-tab__name {
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
}

.v2-tab__date {
  font-size: var(--v2-fs-xs);
  color: inherit;
  opacity: 0.8;
}

.v2-tabpanel[hidden] {
  display: none;
}

.v2-agenda {
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-session {
  display: grid;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-signal-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-session:hover {
  box-shadow: var(--v2-sh-2);
  border-left-color: var(--v2-accent);
}

@media (min-width: 768px) {
  .v2-session {
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--v2-sp-6);
  }
}

.v2-session__time {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--v2-ls-tight);
  color: var(--v2-text);
}

.v2-session__main {
  min-width: 0;
}

.v2-session__title {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
}

.v2-session__speaker {
  margin-top: var(--v2-sp-2);
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  min-width: 0;
}

.v2-session__avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--v2-r-pill);
  object-fit: cover;
  object-position: top center;
  background: var(--v2-surface-3);
}

.v2-session__who {
  min-width: 0;
  font-size: var(--v2-fs-xs);
  line-height: var(--v2-lh-normal);
}

.v2-session__who strong {
  display: block;
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
}

.v2-session__who span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--v2-text-muted);
}

.v2-session__summary {
  margin-top: var(--v2-sp-3);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-session__action {
  display: flex;
  align-items: center;
}

/* -------------------------------------------------------------------------
   12. Reasons to attend
   ------------------------------------------------------------------------- */

.v2-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--v2-grid-gap);
  counter-reset: v2reason;
}

.v2-reason {
  position: relative;
  padding: var(--v2-sp-6);
  border: 1px solid var(--v2-line-on-dark);
  border-radius: var(--v2-r-md);
  background: var(--v2-tint-1);
  min-width: 0;
}

.v2-reason::before {
  counter-increment: v2reason;
  content: counter(v2reason, decimal-leading-zero);
  display: block;
  margin-bottom: var(--v2-sp-4);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  color: var(--v2-accent);
}

.v2-reason__text {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
}

/* -------------------------------------------------------------------------
   13. Testimonials
   ------------------------------------------------------------------------- */

.v2-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-quote {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-5);
  padding: var(--v2-sp-6);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
  height: 100%;
}

.v2-quote__mark {
  width: var(--v2-sp-8);
  height: 2px;
  background: var(--v2-hairline-grad);
  flex: none;
}

.v2-quote__text {
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-quote__cite {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  font-style: normal;
  min-width: 0;
}

.v2-quote__avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--v2-r-pill);
  object-fit: cover;
  object-position: top center;
  background: var(--v2-surface-3);
}

.v2-quote__who {
  min-width: 0;
}

.v2-quote__name {
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
}

.v2-quote__role {
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-muted);
}

/* -------------------------------------------------------------------------
   14. Ticket options
   ------------------------------------------------------------------------- */

.v2-passes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-pass {
  display: flex;
  flex-direction: column;
  padding: var(--v2-sp-6);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
  height: 100%;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-pass:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-2);
}

.v2-pass__name {
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-pass__price {
  margin-top: var(--v2-sp-3);
  font-size: var(--v2-fs-2xl);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-tight);
  color: var(--v2-text);
}

.v2-pass__list {
  margin-top: var(--v2-sp-5);
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  display: grid;
  gap: var(--v2-sp-3);
  flex: 1 1 auto;
}

.v2-pass__feature {
  display: flex;
  gap: var(--v2-sp-3);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-muted);
  min-width: 0;
}

.v2-pass__tick {
  flex: none;
  width: var(--v2-sp-4);
  height: var(--v2-sp-4);
  margin-top: 0.2em;
  border-radius: var(--v2-r-pill);
  background: var(--v2-positive-soft);
  color: var(--v2-positive);
  font-size: var(--v2-fs-2xs);
  line-height: var(--v2-sp-4);
  text-align: center;
  font-weight: var(--v2-fw-bold);
}

.v2-pass__action {
  margin-top: var(--v2-sp-6);
}

/* -------------------------------------------------------------------------
   15. Sponsors
   ------------------------------------------------------------------------- */

.v2-sponsors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--v2-sp-4);
}

.v2-sponsors__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-sp-4);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-sm);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-sponsors__cell:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-1);
}

.v2-sponsors__logo {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: contain;
}

.v2-sponsors__cta {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-5);
  padding: var(--v2-sp-6);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  background: var(--v2-surface);
}

.v2-sponsors__ctatext {
  min-width: 0;
  max-width: 60ch;
}

/* -------------------------------------------------------------------------
   16. Venue
   ------------------------------------------------------------------------- */

.v2-venue {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: center;
}

@media (min-width: 992px) {
  .v2-venue {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--v2-sp-10);
  }
}

.v2-venue__media {
  border-radius: var(--v2-r-lg);
  overflow: hidden;
  border: 1px solid var(--v2-line-on-dark);
  background: var(--v2-ink-800);
}

.v2-venue__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: cover;
}

.v2-venue__address {
  margin-top: var(--v2-sp-5);
  font-style: normal;
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
}

.v2-venue__address strong {
  display: block;
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
}

.v2-venue__facts {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-venue__fact {
  display: flex;
  gap: var(--v2-sp-3);
  padding-top: var(--v2-sp-3);
  border-top: 1px solid var(--v2-line-on-dark);
  font-size: var(--v2-fs-base);
  color: var(--v2-text-invert-muted);
  min-width: 0;
}

.v2-venue__fact dt {
  flex: none;
  min-width: 7rem;
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
}

.v2-venue__fact dd {
  margin: 0;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   17. Articles
   ------------------------------------------------------------------------- */

.v2-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-article {
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  overflow: hidden;
  min-width: 0;
  height: 100%;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-article:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-2);
}

.v2-article__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: cover;
  background: var(--v2-surface-3);
}

.v2-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-5);
  flex: 1 1 auto;
  min-width: 0;
}

.v2-article__date {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-faint);
}

.v2-article__title {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-article__title a {
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-article__title a:hover {
  color: var(--v2-accent);
}

.v2-article__excerpt {
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.v2-article__more {
  margin-top: auto;
  padding-top: var(--v2-sp-2);
}

/* -------------------------------------------------------------------------
   18. Newsletter
   ------------------------------------------------------------------------- */

.v2-newsletter {
  position: relative;
  background-color: var(--v2-ink-850);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
}

.v2-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-flat);
  z-index: -1;
}

.v2-newsletter__inner {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-newsletter__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--v2-sp-10);
  }
}

.v2-form {
  display: grid;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-6);
  border: 1px solid var(--v2-line-on-dark);
  border-radius: var(--v2-r-md);
  background: var(--v2-tint-2);
}

.v2-form__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert-faint);
}

.v2-form__input {
  width: 100%;
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  font-family: inherit;
  font-size: var(--v2-fs-md);
  color: var(--v2-text);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
}

.v2-form__input:focus-visible {
  outline: var(--v2-focus-width) solid var(--v2-focus-on-dark);
  outline-offset: var(--v2-focus-offset);
}

.v2-form__submit {
  -webkit-appearance: none;
  appearance: none;
}

.v2-form__note {
  font-size: var(--v2-fs-xs);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-invert-faint);
}

/* -------------------------------------------------------------------------
   19. Final CTA
   ------------------------------------------------------------------------- */

.v2-finalcta {
  position: relative;
  background-color: var(--v2-ink-900);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
  text-align: center;
}

.v2-finalcta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-media);
  z-index: -1;
}

.v2-finalcta__inner {
  max-width: var(--v2-container-narrow);
  margin-inline: auto;
}

.v2-finalcta__title {
  font-size: var(--v2-fs-4xl);
  font-weight: var(--v2-fw-bold);
  text-wrap: balance;
}

.v2-finalcta__text {
  margin-top: var(--v2-sp-5);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
}

.v2-finalcta__actions {
  margin-top: var(--v2-sp-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v2-sp-3);
}

/* -------------------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------------------- */

.v2-footer {
  background: var(--v2-ink-900);
  color: var(--v2-text-invert-muted);
  font-size: var(--v2-fs-base);
}

.v2-footer__top {
  padding-block: var(--v2-section-y-tight);
  display: grid;
  gap: var(--v2-sp-8);
}

@media (min-width: 768px) {
  .v2-footer__top {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--v2-sp-8);
  }
}

.v2-footer__col {
  min-width: 0;
}

.v2-footer__logo {
  height: var(--v2-logo-h);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: var(--v2-sp-4);
}

.v2-footer__blurb {
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
  max-width: 40ch;
}

.v2-footer__heading {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert);
  margin-bottom: var(--v2-sp-4);
}

.v2-footer__list {
  display: grid;
  gap: var(--v2-sp-1);
}

.v2-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-footer__link:hover {
  color: var(--v2-accent);
}

.v2-footer__address {
  font-style: normal;
  line-height: var(--v2-lh-relaxed);
}

.v2-footer__address strong {
  display: block;
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-semibold);
  margin-bottom: var(--v2-sp-1);
}

.v2-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
  margin-top: var(--v2-sp-4);
}

.v2-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-pill);
  color: var(--v2-text-invert);
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-social__link:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-text-invert);
}

.v2-footer__bottom {
  border-top: 1px solid var(--v2-line-on-dark);
  padding-block: var(--v2-sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-sp-3) var(--v2-sp-6);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert-faint);
}

.v2-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-1) var(--v2-sp-5);
}

.v2-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert-faint);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-legal a:hover {
  color: var(--v2-text-invert);
}

.v2-totop {
  position: fixed;
  right: var(--v2-sp-4);
  bottom: var(--v2-sp-4);
  z-index: var(--v2-z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  background: var(--v2-ink-800);
  color: var(--v2-text-invert);
  border: 1px solid var(--v2-line-on-dark-2);
  border-radius: var(--v2-r-pill);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v2-dur-2) var(--v2-ease), visibility var(--v2-dur-2);
}

.v2-totop[data-visible="true"] {
  opacity: 1;
  visibility: visible;
}

.v2-totop:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
}

/* -------------------------------------------------------------------------
   21. Dialog
   ------------------------------------------------------------------------- */

.v2-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-sp-4);
  background: var(--v2-overlay-flat);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v2-dur-2) var(--v2-ease), visibility var(--v2-dur-2);
}

.v2-dialog-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.v2-dialog {
  width: min(100%, 640px);
  max-height: min(86vh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  color: var(--v2-text);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-3);
  overflow: hidden;
}

.v2-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-5) var(--v2-sp-6);
  border-bottom: 1px solid var(--v2-line);
}

.v2-dialog__title {
  font-size: var(--v2-fs-lg);
  font-weight: var(--v2-fw-semibold);
  min-width: 0;
}

.v2-dialog__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--v2-tap);
  min-height: var(--v2-tap);
  background: transparent;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text);
  font-size: var(--v2-fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--v2-dur-2) var(--v2-ease);
}

.v2-dialog__close:hover {
  background: var(--v2-surface-3);
}

.v2-dialog__meta {
  padding: var(--v2-sp-4) var(--v2-sp-6) 0;
  font-size: var(--v2-fs-xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text-muted);
}

.v2-dialog__body {
  padding: var(--v2-sp-5) var(--v2-sp-6) var(--v2-sp-6);
  overflow-y: auto;
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-dialog__body ul {
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-dialog__body li {
  display: flex;
  gap: var(--v2-sp-3);
}

.v2-dialog__body li::before {
  content: "";
  flex: none;
  width: var(--v2-sp-2);
  height: var(--v2-sp-2);
  margin-top: 0.55em;
  border-radius: var(--v2-r-xs);
  background: var(--v2-signal);
}

.v2-dialog__body p + p {
  margin-top: var(--v2-sp-4);
}

/* -------------------------------------------------------------------------
   22. Reduced motion — belt and braces on top of the collapsed tokens
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v2-skip,
  .v2-scope,
  .v2-scope *,
  .v2-scope *::before,
  .v2-scope *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .v2-speaker:hover .v2-speaker__img {
    transform: none;
  }
}

/* =========================================================================
   PHASE 2 — interior pages
   Same rules as above: tokens only, everything namespaced `v2-`, and no
   literal colour anywhere. Components already defined in Phase 1
   (.v2-session, .v2-speaker, .v2-pass, .v2-tabs, .v2-dialog, .v2-sponsors…)
   are reused as-is rather than forked.
   ========================================================================= */

/* -------------------------------------------------------------------------
   23. Interior page head — the banner every non-home page opens with
   ------------------------------------------------------------------------- */

.v2-pagehead {
  position: relative;
  background-color: var(--v2-ink-900);
  background-size: cover;
  background-position: center;
  color: var(--v2-text-invert);
  isolation: isolate;
}

.v2-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--v2-overlay-hero);
  z-index: -1;
}

.v2-pagehead__inner {
  padding-block: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  max-width: var(--v2-container);
}

.v2-pagehead__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v2-sp-2) var(--v2-sp-4);
  margin-bottom: var(--v2-sp-4);
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-invert);
}

.v2-pagehead__title {
  font-size: var(--v2-fs-4xl);
  font-weight: var(--v2-fw-bold);
  line-height: var(--v2-lh-tight);
  max-width: 26ch;
  text-wrap: balance;
}

.v2-pagehead__lead {
  margin-top: var(--v2-sp-5);
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-invert-muted);
  max-width: 62ch;
}

.v2-pagehead__facts {
  margin-top: var(--v2-sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
}

/* ---- Breadcrumbs ---- */

.v2-crumbs {
  margin-bottom: var(--v2-sp-4);
}

.v2-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--v2-sp-3);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-invert-faint);
}

.v2-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-3);
  min-width: 0;
}

.v2-crumbs__item + .v2-crumbs__item::before {
  content: "/";
  color: var(--v2-text-invert-faint);
  flex: none;
}

.v2-crumbs__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert-muted);
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-crumbs__link:hover {
  color: var(--v2-text-invert);
}

.v2-crumbs__here {
  display: inline-flex;
  align-items: center;
  min-height: var(--v2-tap);
  color: var(--v2-text-invert);
  font-weight: var(--v2-fw-medium);
  /* a long article title must never widen the page */
  max-width: min(100%, 46ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   24. Agenda page — day meta, break rows, speaker links
   ------------------------------------------------------------------------- */

.v2-daymeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v2-sp-2) var(--v2-sp-5);
  margin-bottom: var(--v2-sp-5);
  padding-bottom: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-line);
  font-size: var(--v2-fs-xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-daymeta__day {
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  color: var(--v2-text);
}

.v2-daymeta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-sp-2);
}

.v2-daymeta__item::before {
  content: "";
  width: var(--v2-sp-1);
  height: var(--v2-sp-1);
  border-radius: var(--v2-r-pill);
  background: var(--v2-signal);
  flex: none;
}

/* Rows with no speaker — breaks, lunches, opening and closing slots, panels
   without an assigned speaker. Quieter than a talk, still fully readable. */
.v2-session--plain {
  background: var(--v2-surface-2);
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--v2-line-strong);
}

.v2-session--plain:hover {
  box-shadow: none;
  border-left-color: var(--v2-line-strong);
}

.v2-session--plain .v2-session__time,
.v2-session--plain .v2-session__title {
  color: var(--v2-text-muted);
  font-weight: var(--v2-fw-semibold);
}

/* The speaker name inside a session card is one line of small text, so the
   link itself would only be ~14px tall. Extend the hit area to a full 44px
   with a pseudo-element instead of padding, so the agenda keeps its compact
   rhythm on a 360px screen. Nothing it overlaps is interactive. */
.v2-session__speakerlink {
  position: relative;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-session__speakerlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--v2-tap);
  transform: translateY(-50%);
}

.v2-session__speakerlink:hover {
  color: var(--v2-accent);
}

.v2-dialog__more {
  margin-top: var(--v2-sp-5);
  padding-top: var(--v2-sp-4);
  border-top: 1px solid var(--v2-line);
}

.v2-dayblock + .v2-dayblock {
  margin-top: var(--v2-sp-9);
}

.v2-dayblock__title {
  margin-bottom: var(--v2-sp-4);
  padding-bottom: var(--v2-sp-3);
  border-bottom: 1px solid var(--v2-line);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text);
}

/* -------------------------------------------------------------------------
   25. Speaker profile
   ------------------------------------------------------------------------- */

.v2-profile {
  display: grid;
  gap: var(--v2-sp-8);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-profile {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--v2-sp-10);
  }
}

.v2-profile__aside {
  min-width: 0;
}

.v2-profile__main {
  min-width: 0;
}

.v2-profile__media {
  border-radius: var(--v2-r-lg);
  overflow: hidden;
  border: 1px solid var(--v2-line);
  background: var(--v2-surface-3);
  max-width: 300px;
}

.v2-profile__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-speaker);
  object-fit: cover;
  object-position: top center;
}

.v2-profile__links {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-profile__web {
  display: grid;
  gap: var(--v2-sp-1);
  min-width: 0;
}

.v2-profile__bio {
  margin-top: var(--v2-sp-6);
}

.v2-deflist {
  margin-top: var(--v2-sp-6);
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-deflist__row {
  display: grid;
  gap: var(--v2-sp-1);
  padding-top: var(--v2-sp-3);
  border-top: 1px solid var(--v2-line);
  min-width: 0;
}

.v2-deflist__row dt {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-faint);
}

.v2-deflist__row dd {
  margin: 0;
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text);
  min-width: 0;
}

@media (min-width: 640px) {
  .v2-deflist__row {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--v2-sp-4);
    align-items: baseline;
  }
}

/* Social pills on a light surface */
.v2-social--onlight .v2-social__link {
  border-color: var(--v2-line-strong);
  color: var(--v2-text);
}

.v2-social--onlight .v2-social__link:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-text-invert);
}

/* -------------------------------------------------------------------------
   26. Two-column page with a sidebar (blog listing + article)
   ------------------------------------------------------------------------- */

.v2-withside {
  display: grid;
  gap: var(--v2-sp-9);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-withside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: var(--v2-sp-10);
  }
}

.v2-withside__main,
.v2-withside__aside {
  min-width: 0;
}

/* ---- Sidebar widgets ---- */

.v2-aside {
  display: grid;
  gap: var(--v2-sp-6);
}

.v2-widget {
  padding: var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
}

.v2-widget__title {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
  margin-bottom: var(--v2-sp-4);
}

.v2-searchform {
  display: flex;
  gap: var(--v2-sp-2);
  min-width: 0;
}

.v2-searchform__input {
  flex: 1 1 auto;
  min-width: 0;
}

.v2-searchform__btn {
  flex: none;
  min-width: var(--v2-tap);
  padding-inline: var(--v2-sp-4);
}

.v2-recent {
  display: grid;
  gap: var(--v2-sp-4);
}

.v2-recent__item {
  display: flex;
  gap: var(--v2-sp-3);
  padding-bottom: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-line);
  min-width: 0;
}

.v2-recent__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.v2-recent__img {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--v2-r-sm);
  object-fit: cover;
  background: var(--v2-surface-3);
}

.v2-recent__text {
  min-width: 0;
  display: grid;
  gap: var(--v2-sp-1);
  align-content: start;
}

.v2-recent__link {
  font-size: var(--v2-fs-base);
  font-weight: var(--v2-fw-medium);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-recent__link:hover {
  color: var(--v2-accent);
}

.v2-recent__date {
  font-size: var(--v2-fs-2xs);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-faint);
}

/* ---- Article cards in the listing ---- */

.v2-postlist {
  display: grid;
  gap: var(--v2-sp-6);
}

.v2-post {
  display: flex;
  flex-direction: column;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-post:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-2);
}

.v2-post__media {
  display: block;
  background: var(--v2-surface-3);
}

.v2-post__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-media);
  object-fit: cover;
}

.v2-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-6);
  min-width: 0;
}

.v2-post__title {
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-semibold);
}

.v2-post__title a {
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-post__title a:hover {
  color: var(--v2-accent);
}

.v2-post__excerpt {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.v2-post--single:hover {
  border-color: var(--v2-line);
  box-shadow: none;
}

.v2-post__standfirst {
  font-size: var(--v2-fs-lg);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text);
  padding-bottom: var(--v2-sp-4);
  border-bottom: 1px solid var(--v2-line);
}

/* ---- Share row ---- */

.v2-share {
  margin-top: var(--v2-sp-7);
}

.v2-share__list {
  margin-top: var(--v2-sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
}

.v2-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  color: var(--v2-text);
  transition: background-color var(--v2-dur-2) var(--v2-ease),
              border-color var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-share__link:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-text-invert);
}

/* -------------------------------------------------------------------------
   27. Forms on light surfaces (contact, sidebar search)
   ------------------------------------------------------------------------- */

.v2-label {
  display: block;
  margin-bottom: var(--v2-sp-2);
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-field {
  margin-bottom: var(--v2-sp-5);
  min-width: 0;
}

.v2-field__req {
  color: var(--v2-accent);
}

.v2-input {
  width: 100%;
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  font-family: inherit;
  font-size: var(--v2-fs-md);
  color: var(--v2-text);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-sm);
  transition: border-color var(--v2-dur-2) var(--v2-ease);
}

.v2-input:hover {
  border-color: var(--v2-text-faint);
}

.v2-textarea {
  min-height: 11rem;
  line-height: var(--v2-lh-relaxed);
  resize: vertical;
}

.v2-formgrid {
  display: grid;
  gap: 0 var(--v2-sp-5);
}

@media (min-width: 768px) {
  .v2-formgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.v2-cform__actions {
  margin-top: var(--v2-sp-2);
}

.v2-contactgrid {
  display: grid;
  gap: var(--v2-sp-9);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-contactgrid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--v2-sp-10);
  }
}

.v2-contactgrid__aside,
.v2-contactgrid__main {
  min-width: 0;
}

.v2-contactcard {
  margin-top: var(--v2-sp-5);
  padding: var(--v2-sp-6);
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  display: grid;
  gap: var(--v2-sp-5);
  min-width: 0;
}

.v2-contactcard__address {
  font-style: normal;
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-contactcard__address strong {
  display: block;
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
  margin-bottom: var(--v2-sp-2);
}

.v2-contactcard__block {
  display: block;
}

.v2-contactcard__row {
  padding-top: var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
  min-width: 0;
}

.v2-contactcard__row .v2-subheading {
  display: block;
  margin-bottom: var(--v2-sp-2);
}

.v2-contactcard__meta {
  margin-top: var(--v2-sp-2);
  font-size: var(--v2-fs-xs);
  color: var(--v2-text-faint);
}

/* -------------------------------------------------------------------------
   28. Stored CMS / legal HTML
   The markup comes from the CMS, so this styles bare elements rather than
   classes. Scoped to .v2-doc so nothing else is affected.
   ------------------------------------------------------------------------- */

.v2-doc-wrap {
  max-width: 78ch;
}

.v2-doc {
  overflow-wrap: break-word;
}

.v2-doc > :first-child {
  margin-top: 0;
}

.v2-doc h2 {
  margin-top: var(--v2-sp-9);
  margin-bottom: var(--v2-sp-4);
  font-size: var(--v2-fs-2xl);
  font-weight: var(--v2-fw-bold);
  color: var(--v2-text);
}

.v2-doc h3 {
  margin-top: var(--v2-sp-7);
  margin-bottom: var(--v2-sp-3);
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
}

.v2-doc h4,
.v2-doc h5,
.v2-doc h6 {
  margin-top: var(--v2-sp-6);
  margin-bottom: var(--v2-sp-3);
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
}

.v2-doc p {
  margin-bottom: var(--v2-sp-4);
}

.v2-doc ul,
.v2-doc ol {
  margin: 0 0 var(--v2-sp-5);
  padding-left: var(--v2-sp-6);
  list-style: disc;
}

.v2-doc ol {
  list-style: decimal;
}

.v2-doc li {
  margin-bottom: var(--v2-sp-2);
  padding-left: var(--v2-sp-1);
}

.v2-doc li::marker {
  color: var(--v2-signal);
}

.v2-doc a {
  color: var(--v2-accent);
  border-bottom: 1px solid var(--v2-accent-line);
  word-break: break-word;
}

.v2-doc a:hover {
  color: var(--v2-accent-hover);
  border-bottom-color: var(--v2-accent);
}

.v2-doc strong,
.v2-doc b {
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
}

.v2-doc img {
  margin-block: var(--v2-sp-5);
  border-radius: var(--v2-r-md);
}

.v2-doc hr {
  margin-block: var(--v2-sp-7);
}

.v2-doc table {
  width: 100%;
  margin-bottom: var(--v2-sp-5);
  border-collapse: collapse;
  font-size: var(--v2-fs-base);
}

.v2-doc th,
.v2-doc td {
  padding: var(--v2-sp-3);
  border: 1px solid var(--v2-line);
  text-align: left;
  vertical-align: top;
}

.v2-doc th {
  background: var(--v2-surface-2);
  color: var(--v2-text);
  font-weight: var(--v2-fw-semibold);
}

/* Legal text runs long; give it a slightly tighter measure and a rule under
   each top-level heading so clauses stay easy to find. */
.v2-doc--legal h2 {
  padding-bottom: var(--v2-sp-3);
  border-bottom: 1px solid var(--v2-line);
}

/* -------------------------------------------------------------------------
   29. Sponsor categories and videos
   ------------------------------------------------------------------------- */

.v2-catblock[data-v2-spaced="true"] {
  margin-top: var(--v2-sp-10);
}

.v2-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-video {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  background: var(--v2-ink-900);
  aspect-ratio: var(--v2-ar-media);
  min-width: 0;
}

.v2-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------------------------------------------------------------------------
   30. Venue page
   ------------------------------------------------------------------------- */

.v2-venuepage {
  display: grid;
  gap: var(--v2-sp-9);
  align-items: start;
}

@media (min-width: 992px) {
  .v2-venuepage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--v2-sp-10);
  }
}

.v2-venuepage__main,
.v2-venuepage__aside {
  min-width: 0;
}

.v2-venuepage__prose {
  margin-top: var(--v2-sp-7);
}

.v2-mediafigure {
  border-radius: var(--v2-r-lg);
  overflow: hidden;
  border: 1px solid var(--v2-line);
  background: var(--v2-surface-3);
}

.v2-mediafigure__img {
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: cover;
}

.v2-mediafigure__cap {
  padding: var(--v2-sp-4) var(--v2-sp-5);
  border-top: 1px solid var(--v2-line);
  background: var(--v2-surface);
  font-size: var(--v2-fs-xs);
  letter-spacing: var(--v2-ls-wide);
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-factcard {
  padding: var(--v2-sp-6);
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
}

.v2-factcard .v2-deflist {
  margin-top: var(--v2-sp-5);
}

/* The fact card sits in a ~340px rail, so the two-column definition layout
   would squeeze the values into a three-word ribbon. Keep them stacked here
   whatever the viewport is. */
.v2-factcard .v2-deflist__row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v2-sp-1);
}

.v2-factcard__action {
  margin-top: var(--v2-sp-4);
}

/* -------------------------------------------------------------------------
   31. Pass features that are not included
   ------------------------------------------------------------------------- */

.v2-pass__feature--no {
  color: var(--v2-text-faint);
}

.v2-pass__tick--no {
  background: var(--v2-surface-3);
  color: var(--v2-text-faint);
}

/* -------------------------------------------------------------------------
   32. Dialog / drawer reveal — make the opening frame actually focusable

   `visibility` is in the transition list, and a transition to `visible` still
   computes as `hidden` at progress 0. That is exactly the frame on which the
   dialog and the drawer call .focus() to move focus inside themselves, so the
   call was silently a no-op and focus stayed on the trigger behind the
   overlay — which also defeated the Tab trap.

   Animating only opacity/transform while open flips visibility immediately.
   The closing transition is untouched, so the fade-out still reads the same.
   ------------------------------------------------------------------------- */

.v2-dialog-backdrop[data-open="true"] {
  transition-property: opacity;
}

.v2-drawer[data-open="true"] {
  transition-property: transform;
}

/* =========================================================================
   PHASE 3 — gallery, media, listings and gated material
   Same contract as above: tokens only, no literal colour, everything
   namespaced `v2-`. Phase 1/2 components (.v2-speaker, .v2-post, .v2-video,
   .v2-deflist, .v2-profile, .v2-doc, .v2-withside…) are reused as-is; only
   the shapes that did not exist yet are defined here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   33. Photo gallery

   No lightbox: with 23 public photos and 178 in the gated set, a dialog per
   image would mean hundreds of modals in the DOM. Each thumbnail is a plain
   link to the full-size file instead, which is keyboard operable by default.
   ------------------------------------------------------------------------- */

.v2-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--v2-surface-3);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-gallery__link:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-2);
}

.v2-gallery__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--v2-ar-card);
  object-fit: cover;
  transition: transform var(--v2-dur-3) var(--v2-ease);
}

.v2-gallery__link:hover .v2-gallery__img {
  transform: scale(1.04);
}

/* The zoom affordance is decorative; it also guarantees a 44px target inside
   an otherwise image-only link. */
.v2-gallery__zoom {
  position: absolute;
  right: var(--v2-sp-2);
  bottom: var(--v2-sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--v2-tap);
  height: var(--v2-tap);
  border-radius: var(--v2-r-sm);
  background: var(--v2-overlay-flat);
  color: var(--v2-text-invert);
  opacity: 0;
  transition: opacity var(--v2-dur-2) var(--v2-ease);
}

.v2-gallery__link:hover .v2-gallery__zoom,
.v2-gallery__link:focus-visible .v2-gallery__zoom {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   34. Video card — .v2-video keeps its fixed 16/9 frame, so a caption has to
   live beside it rather than inside it.
   ------------------------------------------------------------------------- */

.v2-videocard {
  display: grid;
  gap: var(--v2-sp-3);
  min-width: 0;
}

.v2-video__cap {
  font-size: var(--v2-fs-sm);
  line-height: var(--v2-lh-normal);
  color: var(--v2-text-muted);
  min-width: 0;
}

/* -------------------------------------------------------------------------
   35. People wall (attendees)

   Only the fields the public attendee list has ever shown: name, city and
   country. The monogram is derived from the name, so no third-party avatar
   service is contacted and no e-mail hash leaves the page.
   ------------------------------------------------------------------------- */

.v2-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-person {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-4) var(--v2-sp-5);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
}

.v2-person__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--v2-r-pill);
  background: var(--v2-signal-soft);
  border: 1px solid var(--v2-signal-line);
  color: var(--v2-ink-700);
  font-size: var(--v2-fs-sm);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-ls-wide);
}

.v2-person__text {
  display: block;
  min-width: 0;
}

.v2-person__name {
  display: block;
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  overflow-wrap: break-word;
}

.v2-person__place {
  display: block;
  margin-top: var(--v2-sp-1);
  font-size: var(--v2-fs-sm);
  color: var(--v2-text-muted);
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   36. Third-party embeds

   The stored parking maps carry hard-coded width="600" height="450", which
   overflows a 360px screen. The wrapper reclaims the geometry.
   ------------------------------------------------------------------------- */

.v2-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--v2-ar-media);
  background: var(--v2-surface-3);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
}

.v2-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  display: block;
}

/* -------------------------------------------------------------------------
   37. Places (parking)
   ------------------------------------------------------------------------- */

.v2-places {
  display: grid;
  gap: var(--v2-sp-9);
}

@media (min-width: 840px) {
  .v2-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v2-grid-gap) var(--v2-sp-8);
  }
}

.v2-place {
  display: grid;
  gap: var(--v2-sp-4);
  align-content: start;
  min-width: 0;
}

.v2-place__name {
  font-size: var(--v2-fs-xl);
  font-weight: var(--v2-fw-semibold);
}

.v2-place__text {
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

/* -------------------------------------------------------------------------
   38. Notice — honest empty states and form errors
   ------------------------------------------------------------------------- */

.v2-notice {
  padding: var(--v2-sp-5) var(--v2-sp-6);
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-signal);
  border-radius: var(--v2-r-sm);
  font-size: var(--v2-fs-md);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-notice--error {
  background: var(--v2-accent-soft);
  border-color: var(--v2-accent-line);
  border-left-color: var(--v2-accent);
  color: var(--v2-text);
}

.v2-notice__action {
  margin-top: var(--v2-sp-4);
}

/* -------------------------------------------------------------------------
   39. Tiles — the gated material category index
   ------------------------------------------------------------------------- */

.v2-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--v2-grid-gap);
}

.v2-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-8) var(--v2-sp-5);
  text-align: center;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease);
}

.v2-tile:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-2);
}

.v2-tile__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--v2-signal);
}

.v2-tile__name {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text);
  overflow-wrap: break-word;
  transition: color var(--v2-dur-2) var(--v2-ease);
}

.v2-tile:hover .v2-tile__name {
  color: var(--v2-accent);
}

/* -------------------------------------------------------------------------
   40. File list — the gated document list.
   Links always point at the gated route, never at /public/uploads/.
   ------------------------------------------------------------------------- */

.v2-filelist {
  display: grid;
  gap: var(--v2-sp-3);
}

.v2-file {
  display: flex;
  align-items: center;
  gap: var(--v2-sp-4);
  padding: var(--v2-sp-3) var(--v2-sp-5);
  min-height: var(--v2-tap);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  color: var(--v2-text);
  min-width: 0;
  transition: border-color var(--v2-dur-2) var(--v2-ease),
              box-shadow var(--v2-dur-2) var(--v2-ease),
              color var(--v2-dur-2) var(--v2-ease);
}

.v2-file:hover {
  border-color: var(--v2-line-strong);
  box-shadow: var(--v2-sh-1);
  color: var(--v2-accent);
}

.v2-file__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--v2-text-faint);
}

.v2-file:hover .v2-file__icon {
  color: var(--v2-accent);
}

.v2-file__title {
  font-size: var(--v2-fs-md);
  font-weight: var(--v2-fw-medium);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   41. Standalone form card (the material password gate)
   ------------------------------------------------------------------------- */

.v2-formcard {
  width: min(100%, 30rem);
  margin-inline: auto;
  padding: var(--v2-sp-7);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  box-shadow: var(--v2-sh-1);
}

.v2-formcard > * + * {
  margin-top: var(--v2-sp-5);
}

/* -------------------------------------------------------------------------
   42. Narrow single-column body (confirmation and gate pages)
   ------------------------------------------------------------------------- */

.v2-narrow {
  max-width: var(--v2-container-narrow);
}

.v2-narrow--center {
  margin-inline: auto;
}

.v2-tiles + .v2-notice,
.v2-filelist + .v2-notice {
  margin-top: var(--v2-sp-6);
}

/* -------------------------------------------------------------------------
   43. Checkout — step indicator, order summary and payment panels

   Presentation only. The Stripe / PayPal / invoice hooks these rules sit
   around (.paypal, .stripe, .Invoicep, #paypal-button, .stripe-button) are
   the legacy markup and are never targeted here: the jQuery in the view and
   in public/js/custom.js toggles them with inline display, which always wins
   over anything in this file. Nothing below sets `display` on a hook.
   ------------------------------------------------------------------------- */

/* ---- Step indicator: Details -> Payment -> Confirmation ---- */

.v2-steps {
  margin-bottom: var(--v2-sp-8);
}

.v2-steps__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-steps__item {
  flex: 1 1 11rem;
  display: flex;
  align-items: center;
  gap: var(--v2-sp-3);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) var(--v2-sp-4);
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-sm);
  color: var(--v2-text-faint);
  min-width: 0;
}

.v2-steps__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-r-pill);
  background: var(--v2-surface);
  font-size: var(--v2-fs-xs);
  font-weight: var(--v2-fw-bold);
}

.v2-steps__label {
  font-size: var(--v2-fs-2xs);
  font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-ls-caps);
  text-transform: uppercase;
  overflow-wrap: break-word;
  min-width: 0;
}

.v2-steps__item--done {
  border-color: var(--v2-line-strong);
  color: var(--v2-text-muted);
}

.v2-steps__item--done .v2-steps__num {
  background: var(--v2-positive-soft);
  border-color: var(--v2-positive);
  color: var(--v2-positive);
}

/* The current step is marked three ways — colour, weight and a left rule —
   so it is not carried by hue alone. aria-current="step" carries it for
   assistive technology. */
.v2-steps__item--current {
  background: var(--v2-surface);
  border-color: var(--v2-accent-line);
  border-left: 3px solid var(--v2-accent);
  color: var(--v2-text);
}

.v2-steps__item--current .v2-steps__num {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-text-invert);
}

/* ---- Attendee form: two columns, and full-width rows for the long fields ---- */

.v2-formgrid--2 {
  gap: 0 var(--v2-sp-5);
}

@media (min-width: 560px) {
  .v2-formgrid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v2-field--full {
  grid-column: 1 / -1;
}

.v2-fieldset {
  margin: 0 0 var(--v2-sp-5);
  padding: 0;
  border: 0;
  min-width: 0;
}

/* ---- Checkbox rows: the attendee-listing switch and the consent box ---- */

.v2-check {
  display: flex;
  align-items: flex-start;
  gap: var(--v2-sp-3);
  min-height: var(--v2-tap);
  padding: var(--v2-sp-3) 0;
}

/* The consent box keeps its legacy `form-check-input` class, because the
   inline jQuery that enables the Proceed button is matched to that markup.
   Bootstrap 4 gives that class `position: absolute; margin-left: -1.25rem`,
   which pulls the checkbox on top of the first words of its own label inside
   a flex row — so the positioning is reset here rather than the class being
   dropped from the element. */
.v2-check input[type="checkbox"] {
  position: static;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--v2-accent);
}

.v2-check__label {
  margin: 0;
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text);
  min-width: 0;
  cursor: pointer;
}

.v2-check__label p {
  margin: 0;
}

.v2-check__label a {
  color: var(--v2-accent);
  text-decoration: underline;
}

.v2-check__label a:hover {
  color: var(--v2-accent-hover);
}

.v2-check--consent {
  margin-top: var(--v2-sp-2);
  padding: var(--v2-sp-5);
  background: var(--v2-surface-2);
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-signal);
  border-radius: var(--v2-r-sm);
}

/* ---- Small explanatory notes ---- */

.v2-formnote {
  margin-top: var(--v2-sp-4);
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

.v2-formnote--aside {
  margin-top: var(--v2-sp-5);
}

/* ---- Order review: the two summary cards on step 2 ---- */

.v2-checkout__grid {
  display: grid;
  gap: var(--v2-grid-gap);
  align-items: start;
}

@media (min-width: 860px) {
  .v2-checkout__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v2-checkout__grid .v2-pass__list {
  margin-top: var(--v2-sp-5);
}

/* ---- Payment method chooser and the panels it reveals ---- */

.v2-pay {
  display: grid;
  gap: var(--v2-sp-5);
  min-width: 0;
}

.v2-pay__choice {
  max-width: 24rem;
  margin-bottom: 0;
}

/* The native arrow is drawn from tokens so the select matches .v2-input. */
select.v2-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--v2-sp-9);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--v2-text-muted) 50%),
    linear-gradient(135deg, var(--v2-text-muted) 50%, transparent 50%);
  background-position:
    right var(--v2-sp-5) center,
    right var(--v2-sp-4) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.v2-pay__panel {
  padding: var(--v2-sp-6);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-md);
  min-width: 0;
  overflow-wrap: break-word;
}

.v2-pay__panel > form {
  margin: var(--v2-sp-4) 0 0;
}

.v2-pay__note {
  margin: var(--v2-sp-4) 0 0;
  font-size: var(--v2-fs-base);
  line-height: var(--v2-lh-relaxed);
  color: var(--v2-text-muted);
}

/* The Stripe element is injected by checkout.js and carries its own skin; it
   only needs room to breathe and a focus ring that matches the rest of v2. */
.v2-pay__panel .stripe-button-el {
  max-width: 100%;
}

/* =========================================================================
   AUDIT_MOBILE_POLISH — appended 2026-09-12
   Mobile-only refinements. Every rule is wrapped in (max-width: 767.98px)
   so the desktop/tablet rendering above the 768px breakpoint is provably
   byte-for-byte unchanged. Backup: ~/mobilefix-backup-20260912-152700
   ========================================================================= */

@media (max-width: 767.98px) {

  /* -----------------------------------------------------------------------
     1. Legibility floor
     The eyebrow/meta token was 11px. 12px is the practical minimum for
     small-caps metadata on a phone; raising the token lifts eyebrows,
     countdown labels, footer headings and pass ticks in one move without
     touching any component's own rules.
     ----------------------------------------------------------------------- */
  :root {
    --v2-fs-2xs: 0.75rem;   /* 11px -> 12px, mobile only */
  }

  /* -----------------------------------------------------------------------
     2. Announcement bar
     Four items wrapped onto three rows and pushed the header 87px down the
     screen before any content. The pass-availability line is stated again
     in the hero and a third time in the footer blurb on the same page, so
     dropping just that one item on small screens removes a row without
     removing information from the page.
     ----------------------------------------------------------------------- */
  .v2-announce__inner > *:nth-child(3) {
    display: none;
  }

  .v2-announce__inner {
    gap: var(--v2-sp-1) var(--v2-sp-3);
    padding-block: var(--v2-sp-1);
  }

  .v2-announce__link {
    min-height: 32px;   /* still >= the 24px WCAG 2.5.8 target floor */
  }

  /* -----------------------------------------------------------------------
     3. Footer — the main event
     The footer measured 1447px at 390px wide and 1512px at 360px, on every
     page; on /contact that was 42% of the entire document. The cause was
     one-link-per-row at a forced 44px box height plus 40px gaps between
     four stacked column groups.

     The link lists become two columns, which keeps the full 44px touch
     target while halving the row count, and the group gaps tighten.
     ----------------------------------------------------------------------- */
  .v2-footer__top {
    gap: var(--v2-sp-6);
    padding-block: var(--v2-sp-7);
  }

  /* Two-up nav links: 6 rows become 3, 5 rows become 3. */
  .v2-footer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--v2-sp-4);
    row-gap: 0;
  }

  .v2-footer__heading {
    margin-bottom: var(--v2-sp-2);
  }

  /* Brand block: pull the wordmark and the blurb into one unit. */
  .v2-footer__logo {
    height: 38px;
    margin-bottom: var(--v2-sp-3);
  }

  .v2-footer__blurb {
    line-height: var(--v2-lh-normal);
    max-width: 34ch;
  }

  .v2-social {
    margin-top: var(--v2-sp-3);
    gap: var(--v2-sp-2);
  }

  /* Font Awesome glyphs have different natural advance widths (measured
     9px, 13px, 14px, 13px), so the marks sat optically off-centre inside
     their 44px circles. A fixed 1em box centres every glyph identically. */
  .v2-social__link i {
    font-size: 16px;
    line-height: 1;
    width: 1em;
    text-align: center;
    font-style: normal;
  }

  /* Contact column: the address is the tallest block in the footer. */
  .v2-footer__address {
    line-height: var(--v2-lh-normal);
  }

  .v2-footer__address strong {
    margin-bottom: var(--v2-sp-1);
  }

  /* Long e-mail addresses were breaking mid-domain ("leo.collin@pulsecore-"
     / "events.com"). Break at a sane point instead of hyphenating a word. */
  .v2-footer__address span,
  .v2-footer__blurb {
    overflow-wrap: anywhere;
  }

  .v2-footer__col:last-child .v2-footer__blurb {
    margin-top: var(--v2-sp-2);
  }

  /* -----------------------------------------------------------------------
     4. Footer bottom bar
     Copyright and the three legal links stacked into an uneven 115px block.
     ----------------------------------------------------------------------- */
  .v2-footer__bottom {
    padding-block: var(--v2-sp-4);
    gap: var(--v2-sp-2);
    justify-content: flex-start;
  }

  .v2-legal {
    gap: var(--v2-sp-1) var(--v2-sp-4);
  }

  .v2-legal a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* -----------------------------------------------------------------------
     5. Back-to-top button vs the legal links  (PRE-EXISTING defect)
     .v2-totop is position:fixed, 44x44, inset 16px from the bottom-right.
     Scrolled to the end of the document it sat on top of the last legal
     link: at 390px the button spans x330-374 while "Code of Conduct"
     spans x256-354, so 24px of a real tap target was covered by the
     button and could not be tapped. This was true before this stylesheet
     existed (measured: x264-363 vs x330-374).

     Reserving the button's footprint as trailing space means that at
     maximum scroll the links come to rest above it.
     ----------------------------------------------------------------------- */
  .v2-footer__bottom {
    padding-bottom: calc(var(--v2-tap) + var(--v2-sp-5));
  }
}
