/* ==========================================================================
   ConverXion KL 2026 — site stylesheet
   Design system: "Modernist" — Archivo, zero radius, 2px hairline grid.
   Tokens mirror the Claude Design project so the look stays identical.
   ========================================================================== */

/* ---------- Tokens ---------- */
/* `hidden` must always hide. The browser's own `[hidden] { display: none }` is
   the weakest rule on the page, so any class that sets a display — .form,
   .form .field, .agenda-row — silently overrode it. That left the register
   form's other-mode fields on screen, the invite form visible after a
   successful submit, and the agenda track filter doing nothing at all. */
[hidden] { display: none !important; }

:root {
  --accent: #1b4dd8;
  --accent-100: #eef3ff;
  --accent-200: #d8e3ff;
  --accent-300: #b3c8ff;
  --accent-400: #7d9dfb;
  --accent-500: #3d6ff0;
  --accent-600: #1740b8;
  --accent-700: #133391;
  --accent-800: #102469;
  --accent-900: #0d1a45;

  --bg: #f4f5f7;
  --text: #14161c;
  --ink: #0d1633;

  --n-100: #f8f4f4;
  --n-200: #eae7e7;
  --n-300: #d7d3d3;
  --n-400: #bab6b6;
  --n-500: #9b9797;
  --n-600: #7d7979;
  --n-700: #605d5d;
  --n-800: #444141;
  --n-900: #2d2b2b;

  --divider: rgba(32, 30, 29, 0.4);

  /* text colours used on the ink (dark navy) surfaces */
  --on-ink: #c9cfe0;
  --on-ink-dim: #8f97ad;
  --on-ink-body: #a9b1c7;
  --on-ink-faint: #7b839a;
  --on-accent: #dbe4ff;

  --font-h: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-b: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1320px;
  --header-h: 78px;
  --gutter: 40px;
  --rule: 2px;
  --header-h: 76px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-h);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

p { margin: 0 0 12px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-700); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Text selection follows the brand colour. The literal below is the fallback
   for engines without color-mix; everything current takes the derived value, so
   changing the brand colour in the CMS changes this too. */
::selection { background: rgba(27, 77, 216, 0.25); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

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

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* The landing block runs the full width rather than sitting in a centred
   column — the headline's own max-width still controls the line length. */
.wrap--wide {
  max-width: none;
  padding-left: clamp(20px, 4vw, 80px);
  padding-right: clamp(20px, 4vw, 80px);
}

.section { border-bottom: var(--rule) solid var(--divider); }
.section--pad { padding: 96px 0; }
.section--pad-sm { padding: 80px 0; }
.section--ink { background: var(--ink); color: #fff; }
.section--tint { background: var(--accent-100); }
.section--accent { background: var(--accent); color: #fff; }

/* The signature motif: cells separated by 2px hairlines, achieved with a
   divider-coloured background showing through the grid gap. */
.rule-grid {
  display: grid;
  gap: var(--rule);
  background: var(--divider);
}
.rule-grid--boxed { border: var(--rule) solid var(--divider); }
.rule-grid > * { background: var(--bg); }
.section--tint .rule-grid > * { background: var(--accent-100); }

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their longest unbreakable word — a long email address was forcing the
   contacts grid wider than the phone and scrolling the whole page sideways. */
.rule-grid > *, .register-grid > *, .sec-head > *, .cta-split > * { min-width: 0; }

/* ---------- Type helpers ---------- */
.kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 14px;
}
.kicker--muted { color: var(--n-600); }
.kicker--light { color: var(--accent-300); }

.h-display {
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0;
}
.h-page {
  font-size: clamp(42px, 5.2vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0;
}
.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--n-800);
  margin: 0;
  max-width: 60ch;
}
.note { font-size: 12px; color: var(--n-600); margin: 16px 0 0; }

/* Section head: narrow title column + wide lede column. */
.sec-head {
  display: grid;
  grid-template-columns: 0.9fr 2fr;
  gap: 56px;
  margin-bottom: 56px;
}
.sec-head > .lede { align-self: end; }

/* Section head variant: title left, action right. */
.sec-head-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 13px 20px;
}
.btn-primary { background: var(--accent); color: #fff; transition: background 0.15s ease; }
.btn-primary:hover { background: var(--accent-500); color: #fff; }
.btn-primary:active { background: var(--accent-600); color: #fff; }
.btn-secondary { border-color: var(--divider); color: var(--text); }
.btn-secondary:hover { background: rgba(20, 22, 28, 0.07); color: var(--text); }
.btn-lg { font-size: 15px; padding: 15px 24px; }
.btn-nav { font-size: 11.5px; letter-spacing: 0.09em; padding: 11px 18px; }

/* Buttons that sit on the accent band. */
.btn-on-accent {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--accent-700);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  padding: 15px 24px;
}
.btn-on-accent:hover { color: var(--accent-800); }
.btn-on-accent-outline {
  display: inline-flex;
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  padding: 13px 22px;
}
.btn-on-accent-outline:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: var(--rule) solid var(--accent);
}
.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 40px;
}
/* The brand shows the logo image when it is present, and falls back to a
   typographic wordmark when it is not — so the header is never empty. */
.brand { flex: 0 0 auto; display: block; color: #fff; }
.brand:hover { color: #fff; }
.brand img { height: 30px; width: auto; }
/* Any image the fallback script marks as unavailable is removed from flow —
   the placeholder or wordmark next to it takes over. */
img[data-missing] { display: none; }
img[data-missing] + .brand__text { display: block; }
.brand__text {
  display: none;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 30px;
}
.brand__text b { color: var(--accent-400); font-weight: 800; }

.footer-about .brand__text { font-size: 24px; line-height: 32px; margin-bottom: 22px; }

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-h);
  font-weight: 600;
}
.nav a { color: var(--on-ink); }
.nav a:hover { color: #fff; }
.nav a.is-current,
.nav a.is-active {
  color: #fff;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}
.nav a.btn-primary { color: #fff; border-bottom: 0; padding-bottom: 11px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}

/* ---------- Hero ----------
   A photograph carrying the headline. The picture is a background, so the copy
   has to stay readable over whatever image the CMS points at — hence the fixed
   scrim rather than trusting any one photo's tonal range. */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The hero fills the first screen and the stage takes whatever the countdown
   bar leaves. Sizing it by subtracting a hard-coded bar height meant the bar
   dropped below the fold the moment its contents changed. */
.hero {
  /* The few spare pixels absorb sub-pixel rounding between svh and the header's
     measured height, which was leaving the bar a couple of pixels short. */
  min-height: calc(100vh - var(--header-h) - 4px);
  min-height: calc(100svh - var(--header-h) - 4px);
}
.hero__stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 400px;
}
/* Specificity, not just order: `.shot-frame` is declared further down the file
   and sets `position: relative` + a light placeholder background. At equal
   weight it would win, leaving the photo in normal flow and pushing the whole
   headline below the fold. */
.hero .hero__photo {
  position: absolute;
  inset: 0;
  background: var(--ink);
}
/* A real element, not ::after — .shot-frame already uses ::after for the
   "drop a photo here" label, and it must clear the image's own z-index. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgba(6, 9, 20, 0.94) 0%, rgba(6, 9, 20, 0.78) 38%, rgba(6, 9, 20, 0.42) 100%),
    linear-gradient(to bottom, rgba(6, 9, 20, 0.45) 0%, rgba(6, 9, 20, 0.15) 40%, rgba(6, 9, 20, 0.80) 100%);
}
.hero__body {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 48px 0 38px;
}
/* Without this the .wrap is a content-sized flex item and its auto margins
   centre it, which is what pushed the whole headline into the middle. */
.hero__body > .wrap { width: 100%; }
.hero__bar {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--ink);
}

.hero-flags {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.flag {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
}
.flag-plain {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero-title {
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  max-width: 17ch;
  color: #fff;
}
.hero-lede {
  font-size: 19px;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.86);
}
/* Bold inside the lede must not disappear against the photograph. */
.hero-lede b, .hero-lede strong { color: #fff; }

/* Outlined button, for use on the photograph. */
.btn-on-photo {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
}
.btn-on-photo:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.hero-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  /* Vertical only — this element is also the .wrap, and the padding shorthand
     would wipe out its horizontal gutter and push the row to the screen edge. */
  padding-top: 20px;
  padding-bottom: 22px;
}
.hero-bar__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.countdown-bar { display: flex; gap: clamp(24px, 4vw, 56px); }
.countdown-bar .num {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.countdown-bar .cd:last-child .num { color: var(--accent-400); }
.countdown-bar .lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 9px;
}
.hero-bar__note { text-align: center; }
.hero-bar__note-title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 26px);
  letter-spacing: -0.025em;
}
.hero-bar__note-sub {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 7px;
}

/* ---------- Landing photo band ----------
   The full-width photograph that closes the landing block, above the numbers. */
.landing-band-sec { padding: 0; }
.landing-band {
  position: relative;
  height: clamp(280px, 42vw, 520px);
  border-top: var(--rule) solid var(--divider);
}

/* ---------- Stat strips ---------- */
/* Sized by how many figures there are, so adding or removing one in the CMS
   just reflows — no column count to keep in step. */
.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat-list { display: contents; }
.stats .cell { background: var(--bg); padding: 44px 20px; text-align: center; }
.stat-num {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.045em;
}
.stat-num sup, .stat-num .of {
  font-size: 22px;
  color: var(--n-600);
  letter-spacing: 0;
}
.stat-lbl {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--n-700);
  margin-top: 12px;
}

/* ---------- "Why join" pillars ---------- */
.pillars {
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule) solid var(--divider);
  border-bottom: var(--rule) solid var(--divider);
}
.pillars .cell { padding: 40px 32px 44px; }
.pillars .cell:first-child { padding-left: 0; }
.pillars .cell:last-child { padding-right: 0; }
.pillar-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-bottom: 22px;
}
.pillar h3 {
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.pillar p { font-size: 14.5px; line-height: 1.6; color: var(--n-700); margin: 0; }

/* ---------- Topic tiles ---------- */
/* ---------- Feature topics ----------
   A numbered index rather than a tile grid: the numbers are decorative, so they
   are rendered from the item's position and never typed into the CMS. */
.topic-list { border-top: 2px solid var(--text); }
.topic-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--n-300);
}
.topic-list .topic-row:last-child { border-bottom: 2px solid var(--text); }
.topic-no {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.topic-title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ---------- Delegate profile ---------- */
/* ---------- delegate profile ----------
   A full-bleed two-column band: the headline figure on ink, the breakdown on
   light. Each side's outer padding lines up with the page gutter so the text
   sits on the same vertical as every other section. */
.room-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2px;
  background: var(--divider);
}
.room-side,
.room-main {
  min-width: 0;                                   /* let long words wrap, not push */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.room-side {
  background: var(--ink);
  color: #fff;
  padding: 80px 56px 88px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.room-main {
  background: var(--bg);
  padding: 80px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 88px 56px;
}

.room-stat {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(64px, 7vw, 110px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  margin: 0 0 20px;
}
.room-stat__mid { color: var(--accent-300); }
.room-claim {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  max-width: 18ch;
}
.room-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-ink-body);
  margin: 0 0 36px;
  max-width: 36ch;
}
.room-sub {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-300);
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  padding-top: 26px;
  margin-bottom: 16px;
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  border: 2px solid rgba(255, 255, 255, 0.35);
  padding: 8px 13px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
}

/* The rules above and below the bars bracket the figures as one table. */
.bars { border-top: 2px solid var(--text); }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--n-300);
}
.bar-row:last-child { border-bottom: 2px solid var(--text); }
.bar-lbl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 8px;
}
.bar { height: 10px; background: var(--n-200); }
.bar__fill { display: block; height: 100%; background: var(--accent); }
.bar__fill--soft { background: var(--accent-300); }
.bar-pct {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 17px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.room-block { margin-top: 32px; }
.room-inds {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  margin: 0;
}
/* The separator is drawn rather than typed, so the CMS list holds clean names. */
.ind + .ind::before { content: ' · '; }
.room-inds__more { color: var(--n-600); }
.room-main .note { margin-top: 26px; }

/* ---------- Photo band with overlay caption ---------- */
/* Fixed height, full width. `aspect-ratio` with a `max-height` was tried and
   reverted: once the cap bites, the width shrinks to preserve the ratio and the
   band stops reaching the edge of the screen. */
.photo-band {
  position: relative;
  height: 56vh;
  min-height: 420px;
}
/* The source is framed wider than this band, so bias the crop a little above
   centre and the faces survive on short, wide windows. A focal point set in the
   CMS overrides this. */
.photo-band .shot { object-position: 50% 40%; }
.photo-band__caption {
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;
  padding: 40px 0;
  background: linear-gradient(to top, rgba(5, 7, 15, 0.88), transparent);
  /* Must clear `.shot-frame img`, which is lifted to z-index 1 so it covers the
     "drop a photo here" placeholder. Without this the caption is painted behind
     the photograph and never seen. */
  z-index: 2;
}
.photo-band__caption p {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 40px);
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 24ch;
  line-height: 1.05;
  margin: 0;
}

/* ---------- Speakers ---------- */
.speakers { grid-template-columns: repeat(4, 1fr); }
.speaker { display: flex; flex-direction: column; }

/* The cards are wrapped so the CMS can replace just the list without taking the
   "want to speak?" card with it; `display: contents` keeps them as grid items.
   That wrapper is what `.rule-grid > *` would have painted, so the background
   the cards used to inherit is restated here. */
.speaker-list { display: contents; }
.speakers .speaker { background: var(--bg); }
.section--tint .speakers .speaker { background: var(--accent-100); }
.speakers .speaker--ink { background: var(--ink); }
.speaker--ink { background: var(--ink); color: #fff; }
.speaker__shot { position: relative; aspect-ratio: 1 / 1; background: var(--n-200); }
.speaker__body { padding: 20px 22px 24px; }
.speaker__name {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 10px;
}
.speaker__role { font-size: 13px; color: var(--n-700); line-height: 1.45; }
.speaker__org { font-size: 13px; color: var(--accent); line-height: 1.45; }
.speaker--ink .speaker__role { color: var(--on-ink); }
.speaker--ink .speaker__org { color: var(--accent-300); }

.speaker-cta {
  background: var(--accent-100);
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.speaker-cta__year {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.speaker-cta p { font-size: 13.5px; line-height: 1.55; color: var(--n-800); margin: 10px 0 0; }

/* The dedicated speakers page. Four columns rather than three: the source
   headshots are only 430px square, and a three-column grid stretched them to
   ~411 CSS px — close to a 2x upscale on a Retina screen, which showed. */
.speakers--lg { grid-template-columns: repeat(4, 1fr); }
.speakers--lg .speaker__body { padding: 22px 24px 26px; }
.speakers--lg .speaker__name { font-size: 20px; letter-spacing: -0.022em; line-height: 1.12; }
.speakers--lg .speaker__role,
.speakers--lg .speaker__org { font-size: 13.5px; line-height: 1.5; }
.speakers--lg .speaker-cta__year { font-size: 38px; }
.speakers--lg .speaker-cta { padding: 28px 24px 32px; }
.speakers--lg .speaker-cta p { font-size: 13.5px; }

/* ---------- Agenda ---------- */
.agenda-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.agenda-tab {
  border: 0;
  cursor: pointer;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 12px 18px;
  background: transparent;
  color: var(--on-ink);
}
.agenda-tab:hover { color: #fff; }
.agenda-tab[aria-pressed="true"] { background: var(--accent); color: #fff; }

.agenda { border-top: 2px solid rgba(255, 255, 255, 0.2); }
.agenda-row {
  display: grid;
  grid-template-columns: 110px 150px 1fr 220px;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.agenda-row:last-child { border-bottom: 0; }
.agenda-row[hidden] { display: none; }
.agenda-time {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.agenda-track {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.agenda-row[data-track="cx"] .agenda-track,
.agenda-row[data-track="adopt"] .agenda-track,
.agenda-row[data-track="growth"] .agenda-track { color: var(--accent-300); }
.agenda-title { font-size: 17px; font-family: var(--font-h); font-weight: 600; }
.agenda-who { font-size: 13px; color: var(--on-ink-dim); }
.agenda-note { font-size: 13px; color: var(--on-ink-dim); margin: 24px 0 0; }

/* ---------- Recap ---------- */
.recap-top {
  grid-template-columns: 1.85fr 1fr;
  margin-bottom: 2px;
}
.recap-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.recap-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.recap-aside {
  background: var(--ink);
  color: #fff;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.recap-aside h3 {
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: #fff;
}
.recap-aside p { font-size: 14px; line-height: 1.6; color: var(--on-ink-body); margin: 0; }
.recap-link {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
  align-self: flex-start;
}
.recap-link:hover { color: #fff; }
.recap-shots { grid-template-columns: repeat(3, 1fr); border-top: 0; }
.recap-shots .cell { position: relative; aspect-ratio: 4 / 3; }

/* ---------- Passes ---------- */
.passes { grid-template-columns: repeat(3, 1fr); }
.pass { padding: 40px 34px 44px; display: flex; flex-direction: column; position: relative; }
.pass--ink { background: var(--ink); color: #fff; }
.pass__tier {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-600);
  margin-bottom: 20px;
}
.pass--ink .pass__tier { color: var(--accent-300); }
.pass h3 { font-size: 24px; letter-spacing: -0.025em; margin: 0 0 18px; }
.pass--ink h3 { color: #fff; }
.pass__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 26px; }
.pass__price b {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pass__price span { font-size: 13px; color: var(--n-600); }
.pass--ink .pass__price span { color: var(--on-ink-dim); }
.pass ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--n-800);
}
.pass li { border-top: 1px solid var(--n-300); padding-top: 10px; }
.pass--ink ul { color: var(--on-ink); }
.pass--ink li { border-top-color: rgba(255, 255, 255, 0.2); }
.pass .btn { margin-top: auto; }
.pass__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
}

/* ---------- Sponsor tiers ---------- */
.tiers { grid-template-columns: repeat(3, 1fr); }
.tier { padding: 36px 30px 40px; }
.tier--ink { background: var(--ink); color: #fff; }
.tier__label {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-600);
  margin-bottom: 16px;
}
.tier--ink .tier__label { color: var(--accent-300); }
.tier h4 { font-size: 24px; letter-spacing: -0.022em; margin: 0 0 10px; }
.tier--ink h4 { color: #fff; }
.tier__price {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  color: var(--accent);
}
.tier--ink .tier__price { color: #fff; }
.tier ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--n-800);
}
.tier li { border-top: 1px solid var(--n-300); padding-top: 9px; }
.tier--ink ul { color: var(--on-ink); }
.tier--ink li { border-top-color: rgba(255, 255, 255, 0.2); }

/* Sponsors on the left, partners on the right, each with its own grid. */
.logo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.logo-group__title {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-700);
  margin: 0 0 12px;
}

/* Partner logos sit on white regardless of the surrounding surface — brand
   marks are drawn for white and go muddy on the tinted background.

   These hairlines are drawn per cell, not by the grid's own background showing
   through the gaps: the number of logos is set in the CMS, so a last row that
   is only half full would otherwise end in a block of divider grey. */
.logos { grid-template-columns: repeat(4, 1fr); gap: 0; background: transparent; border: 0; }
.logos .cell { outline: var(--rule) solid var(--divider); }
.logos--pair { grid-template-columns: repeat(2, 1fr); }
.logos .cell,
.section--tint .logos .cell {
  min-height: 170px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 30px;
}
.logos img { height: 86px; width: auto; max-width: 100%; object-fit: contain; }
.logos--pair img { height: 72px; }

/* The CMS replaces the contents of this wrapper wholesale, so it exists only to
   be a replacement target — `display: contents` keeps the cells themselves as
   direct grid items, exactly as if the wrapper were not there. */
.logo-list { display: contents; }

/* The open slot that invites the next sponsor. */
.logos .cell--open,
.section--tint .logos .cell--open {
  background: var(--ink);
  text-align: center;
  padding: 14px;
}
.logos .cell--open span {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-300);
  line-height: 1.4;
}

/* ---------- Split CTA band ---------- */
.cta-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: end;
}
.cta-split h2 {
  font-size: clamp(36px, 4.6vw, 70px);
  line-height: 0.99;
  letter-spacing: -0.038em;
  margin: 0;
  color: #fff;
}
.cta-split p { font-size: 16px; line-height: 1.55; margin: 0 0 28px; color: var(--on-accent); }

/* ---------- Venue ---------- */

.venue-shots { grid-template-columns: repeat(3, 1fr); }
.venue-shots .cell { position: relative; aspect-ratio: 3 / 2; }
/* ---------- Venue ---------- */
.venue-title { margin-bottom: 40px; max-width: 20ch; }
.venue-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2px;
  background: var(--divider);
  border: var(--rule) solid var(--divider);
}
.venue-card {
  background: var(--ink);
  color: #fff;
  padding: 52px 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.venue-card__room {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.venue-card__addr {
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-ink);
  margin: 0 0 24px;
  max-width: 30ch;
}
.venue-card__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-ink-body);
  margin: 0 0 30px;
  max-width: 34ch;
}
.venue-card__link {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-300);
  align-self: start;
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
}
.venue-card__link:hover { color: #fff; }
.venue-map { min-height: 460px; }
.venue-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Full colour by default; the CMS can switch this to muted or mono. */
  filter: var(--map-filter, none);
}

/* ---------- Register ---------- */
.register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Sized by how many contacts there are — a shorter list used to leave an empty
   grey column where the grid had nothing to put. */
.contacts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.contacts .cell { background: var(--bg); padding: 20px 22px; }
.contacts .name { font-family: var(--font-h); font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.contacts .meta {
  font-size: 13px;
  color: var(--n-700);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .field { display: flex; flex-direction: column; gap: 6px; }

.form .field--wide { grid-column: span 2; }
.form .field > span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-700);
}
.input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  caret-color: var(--accent);
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 0;
}
textarea.input { min-height: 88px; resize: vertical; line-height: 1.55; padding-top: 10px; }
.form .field > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.input:hover { border-color: rgba(20, 22, 28, 0.55); }
.input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.form__actions {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.form__msg { font-size: 13px; color: var(--n-700); }
.form__msg[data-state="error"] { color: #b3261e; }
.hp {
  /* Off-canvas via clipping rather than a negative offset, which can itself
     create a scrollable overflow area. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.6fr 2fr;
  gap: 64px;
  align-items: start;
}
.faq-aside { position: sticky; top: calc(var(--header-h) + 34px); }
.faq-aside p { font-size: 15px; line-height: 1.6; color: var(--n-800); margin: 0 0 20px; }
.faq-list { border-top: var(--rule) solid var(--divider); }
.faq-list details { border-bottom: var(--rule) solid var(--divider); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
}
.faq-list summary:hover { color: var(--accent-700); }
.faq-list summary .sign { color: var(--accent); font-size: 26px; line-height: 1; }
.faq-list details[open] summary .sign { transform: rotate(45deg); }
.faq-list summary .sign { display: inline-block; transition: transform 0.2s ease; }
.faq-list p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--n-800);
  margin: 0 0 26px;
  max-width: 70ch;
}

/* ---------- Comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th {
  text-align: left;
  padding: 14px 16px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-bottom: var(--rule) solid var(--divider);
}
.compare td,
.compare tbody th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--n-300);
}
/* Row headers are the benefit names — plain body text, not the uppercase
   treatment the column headers get. */
.compare tbody th {
  text-align: left;
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.compare th:first-child, .compare td:first-child { padding-left: 0; }
.compare th:last-child, .compare td:last-child { padding-right: 0; }
.compare tbody tr:last-child td,
.compare tbody tr:last-child th { border-bottom: 0; }
.compare .num { font-family: var(--font-h); font-weight: 800; }
.table-scroll { overflow-x: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-grid img { height: 32px; width: auto; margin-bottom: 22px; }
.footer-about p { font-size: 14px; line-height: 1.6; color: var(--on-ink-body); margin: 0 0 20px; max-width: 42ch; }
.footer-about .addr {
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.footer-col h5 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin: 0 0 16px;
  font-weight: 800;
}
.footer-col nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-col a { color: var(--on-ink); }
.footer-col a:hover { color: #fff; }
.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--on-ink-faint);
  flex-wrap: wrap;
}
.footer-slim {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--on-ink-faint);
  padding-top: 48px;
  padding-bottom: 48px;
}
.footer-slim a { color: var(--on-ink); }

/* ---------- Images ---------- */
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot--contain { object-fit: contain; padding: 12%; }

/* Placeholder shown when an asset has not been dropped in yet. */
.shot-frame { position: relative; overflow: hidden; background: var(--n-200); }
.shot-frame::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-500);
  background: var(--n-200);
  z-index: 0;
}
.shot-frame img { position: relative; z-index: 1; }

/* ---------- Reveal on scroll ----------
   Content is visible by DEFAULT. The hidden state is only applied once the
   script has confirmed it can observe and un-hide again (it sets .reveal-on
   on <html>). A decorative animation must never be able to swallow the page:
   if the script fails, IntersectionObserver misbehaves, or the element is too
   tall to trigger, the reader still sees everything — they just don't get the
   fade. */
[data-reveal] { opacity: 1; transform: none; }

/* Hidden only while waiting to be revealed. */
.reveal-on [data-reveal]:not(.in) { opacity: 0; transform: translateY(18px); }

/* The revealed state is a PLAIN DECLARATION, with the fade as a separate
   entrance animation and no fill-mode. If the animation never runs — throttled
   tab, reduced motion, an engine that drops it — the element simply resolves to
   opacity 1 and is readable. Nothing about the content's visibility depends on
   an animation or transition finishing. */
.reveal-on [data-reveal].in {
  opacity: 1;
  transform: none;
  animation: cx-reveal 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes cx-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-on [data-reveal]:not(.in) { opacity: 1; transform: none; }
  .reveal-on [data-reveal].in { animation: none; }
}

/* ==========================================================================
   Responsive — the source design is desktop-only; these rules carry the same
   look down to tablet and phone without changing the grammar.
   ========================================================================== */

@media (max-width: 1180px) {
  :root { --gutter: 28px; }
  .agenda-row { grid-template-columns: 90px 130px 1fr 180px; gap: 18px; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header .wrap { gap: 20px; }

  /* Mobile drawer */
  .nav.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--ink);
    border-bottom: var(--rule) solid var(--accent);
    padding: 8px 0 20px;
  }
  .nav.is-open a {
    padding: 14px var(--gutter);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav.is-open a.is-current,
  .nav.is-open a.is-active { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .nav.is-open a.btn-primary {
    margin: 14px var(--gutter) 0;
    padding: 14px 18px;
    justify-content: center;
    border-bottom: 0;
  }

  .cols-6 { grid-template-columns: repeat(3, 1fr); }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .cols-5 { grid-template-columns: repeat(2, 1fr); }
  .cols-4, .speakers { grid-template-columns: repeat(2, 1fr); }
  .speakers--lg { grid-template-columns: repeat(2, 1fr); }

  .stats .cell, .pillars .cell { padding-left: 24px; padding-right: 24px; }
  .pillars .cell:first-child { padding-left: 24px; }
  .pillars .cell:last-child { padding-right: 24px; }

  .recap-top { grid-template-columns: 1fr; }
  .register-grid, .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-aside { position: static; }
  .venue-split { grid-template-columns: 1fr; }
  .venue-card { padding: 40px 28px 36px; }
  .venue-map { min-height: 380px; }
}

@media (max-width: 900px) {
  .logo-split { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .section--pad { padding: 64px 0; }
  .section--pad-sm { padding: 56px 0; }
  .topic-row { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 18px 0; }

  /* The bar stacks under the copy; the note moves to the left so it does not
     sit alone against the right edge on a narrow screen. */
  .hero { min-height: 0; }
  .hero__body { padding: 72px 0 56px; }
  .hero-bar { gap: 14px; padding-top: 22px; padding-bottom: 24px; }
  .countdown-bar { gap: 30px; }

  .sec-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .sec-head-split { margin-bottom: 32px; }

  .pillars, .cols-3, .passes, .tiers, .recap-shots, .venue-shots { grid-template-columns: 1fr; }
  .pillars .cell:first-child, .pillars .cell:last-child { padding-left: 24px; padding-right: 24px; }

  .cta-split { grid-template-columns: 1fr; gap: 28px; }

  /* Explicit areas rather than auto-placement: the previous `order` +
     `grid-row: span` combination pushed the session title into the narrow
     84px column while the time took the wide one. */
  .agenda-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "time  track"
      "title title"
      "who   who";
    gap: 6px 14px;
    align-items: baseline;
    padding: 18px 0;
  }
  .agenda-time  { grid-area: time; }
  .agenda-track { grid-area: track; }
  .agenda-title { grid-area: title; font-size: 16.5px; line-height: 1.3; }
  .agenda-who   { grid-area: who; }
  .agenda-tabs  { flex-wrap: wrap; }

  .faq-list summary { font-size: 18px; padding: 22px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-about { grid-column: span 2; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  body { font-size: 14.5px; }

  .hero-lede, .lede { font-size: 16.5px; }
  .btn-row .btn { width: 100%; }

  .cols-6, .logos, .cols-4, .speakers, .speakers--lg,
  .cols-5 { grid-template-columns: repeat(2, 1fr); }
  .logos .cell { min-height: 130px; padding: 16px 20px; }
  .logos img { height: 64px; }

  .stats .cell { padding: 28px 16px; }
  .stat-num { font-size: 36px; }
  .pillars .cell { padding: 28px 20px 32px !important; }
  .pass, .tier { padding: 28px 22px 32px; }
  .recap-aside { padding: 28px 22px; }

  /* Stacked, both halves share the plain page gutter so nothing can push
     wider than the viewport. */
  .room-split { grid-template-columns: 1fr; }
  .room-side { padding: 56px var(--gutter) 60px; }
  .room-main { padding: 56px var(--gutter) 60px; }
  .room-lede { margin-bottom: 30px; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 60px; gap: 14px; }
  .bar-lbl, .room-inds { font-size: 15px; }
  .bar-pct { font-size: 16px; }
  .chip { font-size: 12.5px; padding: 7px 11px; }

  .photo-band__caption { padding: 24px 0; }
  .photo-band { min-height: 320px; }
  .venue-map { min-height: 300px; }

  .form, .contacts.cols-2 { grid-template-columns: 1fr; }
  .form .field--wide, .form__actions { grid-column: span 1; }
  .form__actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .cols-6 { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  /* Narrow phones: pull the number column in so the titles keep their width. */
  .topic-row { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
  /* Speakers stay two-up even on the narrowest phones: a single full-width
     column makes the section ~7700px of scrolling, and blows the 430px source
     headshots up far past their natural size. */
  .speakers, .speakers--lg { grid-template-columns: repeat(2, 1fr); }
  .speakers .speaker__body { padding: 14px 14px 18px; }
  .speakers .speaker__name { font-size: 16px; margin-bottom: 6px; }
  .speakers .speaker__role,
  .speakers .speaker__org { font-size: 12px; line-height: 1.4; }
}

/* The partner grid normally sits below the packages. When the packages are
   hidden it becomes the first thing in the section, so drop the gap. */
.sponsor-logos { margin-top: 56px; }
.sponsor-logos:first-child { margin-top: 0; }

@media (max-width: 560px) {
  /* Four countdown figures will not fit on one line at this width. */
  .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .countdown-bar .num { font-size: 26px; }
  .countdown-bar .lbl { font-size: 9px; letter-spacing: 0.12em; }
  .hero__body { padding: 60px 0 44px; }
}

/* Footer links are wrapped so the CMS can replace the set; `display: contents`
   keeps them laid out by the nav exactly as before. */
.footer-links { display: contents; }

/* The "All" button is fixed; the track buttons are replaced by the CMS, so they
   live in a wrapper that generates no box of its own. */
.agenda-track-list { display: contents; }

/* ---------- register: delegate / sponsor switch ---------- */
.form-switch {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  background: var(--divider);
  border: var(--rule) solid var(--divider);
  margin-bottom: 6px;
}
.form-switch__btn {
  flex: 1;
  padding: 13px 14px;
  background: var(--bg);
  border: 0;
  cursor: pointer;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-700);
}
.form-switch__btn.is-on { background: var(--accent); color: #fff; }
.form-switch__btn:not(.is-on):hover { background: var(--accent-100); color: var(--accent-700); }

.checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks legend {
  font-size: 13px;
  color: var(--n-700);
  padding: 0;
  margin-bottom: 10px;
}
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }

/* ==========================================================================
   Invitation page (/special-register)
   A private, link-only page. It borrows the landing page's language — the
   photograph under a dark wash, white type, the accent flag — so an invited
   guest recognises the event the moment it opens.
   ========================================================================== */
.invite-page { background: var(--ink); }

.invite-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  padding: 22px 0;
}
.invite-top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.invite-top__tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 7px 12px;
}

.invite {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
/* Specificity, not order: .shot-frame is declared later and would otherwise
   put the photograph back into normal flow. */
.invite .invite__photo { position: absolute; inset: 0; background: var(--ink); }
.invite__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgba(6, 9, 20, 0.95) 0%, rgba(6, 9, 20, 0.82) 45%, rgba(6, 9, 20, 0.6) 100%),
    linear-gradient(to bottom, rgba(6, 9, 20, 0.55) 0%, rgba(6, 9, 20, 0.2) 40%, rgba(6, 9, 20, 0.85) 100%);
}

.invite__grid {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-top: 120px;
  padding-bottom: 72px;
}

.invite__intro { min-width: 0; }
.invite__intro .flag { display: inline-block; margin-bottom: 26px; }
.invite__title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  max-width: 14ch;
}
.invite__lede {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 36px;
  max-width: 44ch;
}

/* Four facts as a ruled two-by-two, drawn in light hairlines for the dark ground. */
.invite__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin: 0 0 32px;
  max-width: 520px;
}
.invite__facts > div { background: rgba(8, 12, 26, 0.72); padding: 16px 18px; }
.invite__facts dt {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.invite__facts dd {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.invite__count-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.invite__count-row { display: flex; gap: clamp(22px, 3vw, 40px); }
.invite__count .num {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.invite__count .cd:last-child .num { color: var(--accent-300); }
.invite__count .lbl {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

/* The form sits on a light card so the fields read as fields, not as more
   type on the photograph. */
.invite__card {
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  border-top: 4px solid var(--accent);
}
.invite__card-head { margin-bottom: 22px; }
.invite__card-head h2 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.invite__card-head p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-700); }
.invite__card .form { gap: 14px; align-items: end; }   /* paired inputs line up even when one label wraps */
/* Codes are typed from a message or a slide, so show them the way they are
   printed: capitals, a little tracked, and no autocorrect. */
.input--code { text-transform: uppercase; letter-spacing: 0.08em; text-overflow: ellipsis; }
.input--code::placeholder { text-transform: none; letter-spacing: 0; }
.invite__card .form__actions .btn { width: 100%; justify-content: center; }
.invite__card .form__msg { width: 100%; }

.invite__done { text-align: center; padding: 28px 8px 20px; outline: none; }
.invite__done-mark {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 800;
}
.invite__done h2 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.invite__done p { font-size: 15px; line-height: 1.6; color: var(--n-700); margin: 0 auto 22px; max-width: 36ch; }
.invite__done-link {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  border-bottom: 2px solid currentColor;
  padding-bottom: 3px;
}

.invite-page .site-footer .wrap { padding-top: 22px; padding-bottom: 22px; }

@media (max-width: 960px) {
  .invite { align-items: stretch; }
  .invite__grid { grid-template-columns: 1fr; gap: 40px; padding-top: 104px; padding-bottom: 40px; }
  .invite__title { max-width: none; }
}
@media (max-width: 560px) {
  .invite-top__tag { display: none; }
  /* Two-up even on a phone: stacked, the four facts pushed the form a full
     screen further down. */
  .invite__facts > div { padding: 12px 14px; }
  .invite__facts dd { font-size: 14px; }
  .invite__count-row { justify-content: space-between; gap: 8px; }
  .invite__card .form { grid-template-columns: 1fr; }
  .invite__card .form .field--wide,
  .invite__card .form__actions { grid-column: span 1; }
}