/* ============================================================
   BIN CLEANING SUMMIT 2027
   Static stylesheet — no build step, no framework.
   Design and layout only. Motion lives in motion.css.

   v2 (registration phase): flatter. One card style everywhere,
   hairline borders instead of glowing strokes, sentence-case
   headings, no bevels. The brand carries through the palette,
   the logo and the hero — not through effects on every surface.
   Every stroke is blue-tinted, never grey (Chris, 16 Oct).
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* surface */
  --bg:         #000510;
  --bg-2:       #030915;
  --surface:    #07101e;
  --surface-2:  #0b1627;

  /* hairlines — the steel blue of the live site's strokes, at low
     alpha so they sit on any surface. White here reads grey. */
  --line:   rgba(92, 146, 204, 0.26);
  --line-2: rgba(106, 166, 228, 0.38);
  --line-3: rgba(122, 190, 255, 0.56);
  --tint:   rgba(29, 129, 255, 0.08);   /* blue wash for chips and tiles */

  /* light — one source, mostly overhead and leaning a little left, and
     every surface obeys it: faces and rims are brightest along the top,
     shade gathers at the bottom, top edges catch the light (left edges
     only faintly), and shadows fall down with a touch of right.
     --lit-angle drives every lit gradient: 180deg would be straight
     down, 135deg the old diagonal that read as left-lit on wide cards. */
  --lit-angle: 166deg;
  --lit-face:
    radial-gradient(130% 100% at 30% 0%, rgba(70, 140, 255, 0.08) 0%, rgba(70, 140, 255, 0) 60%),
    linear-gradient(var(--lit-angle), #0d1a2e 0%, #07101e 55%, #050b16 100%);
  --lit-rim: linear-gradient(var(--lit-angle),
    rgba(160, 212, 255, 0.56) 0%,
    rgba(106, 166, 228, 0.24) 30%,
    rgba(92, 146, 204, 0.11) 65%,
    rgba(92, 146, 204, 0.06) 100%);
  --lit-glint: inset 0 1px 0 rgba(200, 230, 255, 0.16), inset 1px 0 0 rgba(200, 230, 255, 0.05);
  --lit-cast:  3px 14px 26px -12px rgba(0, 2, 10, 0.75);    /* shadow, down */
  --lit-cast-sm: 1px 6px 12px -5px rgba(0, 2, 10, 0.6);

  /* type colour */
  --text:   #f4f6f9;
  --text-2: #c5ceda;
  --muted:  #8b96a7;
  --dim:    #5d697c;

  /* brand — lime is sampled from the SUMMIT wordmark */
  --lime:     #C1F439;
  --lime-2:   #aee02e;
  --lime-ink: #0a1300;
  --blue:     #3d8bff;
  --blue-2:   #60c1ff;
  --blue-3:   #8fcfff;

  /* families */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond: "Oswald", "Arial Narrow", sans-serif;

  /* metrics */
  --shell:      1200px;
  --shell-wide: 1388px;
  --gutter:     clamp(20px, 5vw, 40px);
  --r:          12px;
  --r-sm:       10px;
  --section-y:  clamp(80px, 9vw, 124px);

  /* easing — Chris's curves; nothing uses the built-in keywords */
  --bez:        cubic-bezier(0.600, 0.090, 0.155, 0.975);
  --bez-btn:    cubic-bezier(0.740, 0.115, 0.070, 0.905);
  --bez-scroll: cubic-bezier(0.130, 0.000, 0.120, 0.930);
  /* hero reveal (Chris, 16 Oct): a held start, a fast middle, a long soft
     landing. The headline words and the masked fades ride it. */
  --bez-reveal: cubic-bezier(0.570, 0.040, 0.110, 0.990);
  /* the hero buttons' rise: leaves almost at full speed, then settles */
  --bez-impact: cubic-bezier(0.160, 1.000, 0.300, 1.000);
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
/* with display:contents the <source> becomes a layout item of its own
   (in the splash grid it took a row and pushed the logo below centre) */
picture > source { display: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.section { padding-block: var(--section-y); position: relative; z-index: 1; }
.section--flush { padding-top: 0; }

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

/* ------------------------------------------------------------
   3. AMBIENT LIGHT
   Off-canvas blue light, from the Figma frame. Kept quiet — it is
   atmosphere, not decoration.
   ------------------------------------------------------------ */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(20, 130, 247, var(--a, 0.05)) 0%,
    rgba(20, 130, 247, var(--a, 0.05)) 38%,
    rgba(20, 130, 247, 0) 100%);
}
.ambient__glow--tl { --a: 0.045; left: 7%;   top: -180px; width: min(1398px, 132vw); height: min(1097px, 104vw); }
.ambient__glow--tr { --a: 0.045; left: 97%;  top: -150px; width: min(1336px, 126vw); height: min(1097px, 104vw); }
.ambient__glow--mr { --a: 0.035; left: 118%; top: 1180px; width: min(1250px, 120vw); height: min(1232px, 118vw); }
.ambient__glow--ml { --a: 0.028; left: -18%; top: 1080px; width: min(961px, 96vw);   height: min(976px, 98vw); }
.ambient__glow--bl { --a: 0.026; left: -14%; top: 72%;    width: min(1200px, 112vw); height: min(1000px, 100vw); }
.ambient__glow--br { --a: 0.03;  left: 114%; top: 88%;    width: min(1250px, 118vw); height: min(1050px, 104vw); }

/* ------------------------------------------------------------
   4. HEADER
   Stationary and open at the top of the page; becomes a glass bar
   once you scroll. The pane is its own layer (.glass__fill) so its
   opacity can fade — background-image does not interpolate.
   The glass, the rim and the sweep are the live site's recipe,
   kept as Chris had them.
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 20px 0 auto;
  z-index: 100;
  padding-inline: 24px;
}

/* Logo on the left; the nav sits on the right, next to the button. */
.site-header__bar {
  position: relative;
  isolation: isolate;
  max-width: var(--shell-wide);
  margin-inline: auto;
  height: 72px;
  padding: 0 14px 0 20px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 28px;
}

.glass__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* pointer proximity, as on the cards */
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(120, 195, 255, calc(var(--near, 0) * 0.10)),
      rgba(120, 195, 255, 0) 70%),
    /* light pooling at the top of the pane - blue, never white */
    linear-gradient(180deg,
      rgba(40, 122, 220, 0.17) 0%,
      rgba(18, 58, 118, 0.05) 46%,
      rgba(0, 0, 0, 0) 100%),
    /* the tinted body of the glass */
    linear-gradient(100deg,
      rgba(1, 5, 13, 0.64) 0%,
      rgba(5, 17, 36, 0.50) 50%,
      rgba(1, 5, 13, 0.64) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(175%) brightness(1.06);
  backdrop-filter: blur(14px) saturate(175%) brightness(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(120, 200, 255, 0.13),     /* constant hairline */
    inset 0  1px 0 rgba(96, 197, 254, 0.30),       /* specular top edge */
    inset 0 -1px 0 rgba(0, 0, 0, 0.60),            /* dark under edge */
    inset 0 12px 22px -16px rgba(58, 148, 255, 0.26),
    0 -1px 5px rgba(45, 96, 220, 0.18),            /* upward blue spill */
    2px 9px 18px rgba(0, 2, 8, 0.55);              /* cast shadow, down */
  opacity: 0;
}
.site-header.is-stuck .glass__fill { opacity: 1; }

/* Refracting rim — a blue light band that travels along the edge as
   you scroll, two passes per page (site.js writes --rim-pos and
   --rim-hi). */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background:
    /* pointer proximity (motion.js writes --near/--mx/--my) */
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(170, 220, 255, calc(var(--near, 0) * 0.8)) 0%,
      rgba(120, 190, 255, calc(var(--near, 0) * 0.3)) 40%,
      rgba(120, 190, 255, 0) 70%),
    linear-gradient(112deg,
    rgba(12, 34, 74, 0.30) 0%,
    rgba(12, 34, 74, 0.30) calc(var(--rim-pos, 34%) - 32%),
    rgba(96, 197, 254, var(--rim-hi, 0.5)) calc(var(--rim-pos, 34%) - 7%),
    rgba(29, 129, 255, var(--rim-hi, 0.5)) var(--rim-pos, 34%),
    rgba(14, 50, 112, 0.32) calc(var(--rim-pos, 34%) + 24%),
    rgba(12, 34, 74, 0.26) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
}

/* Diagonal specular sweep across the upper-left face. */
.site-header__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(104deg,
    rgba(110, 188, 255, 0.13) 0%,
    rgba(110, 188, 255, 0.045) 16%,
    rgba(110, 188, 255, 0) 38%);
  pointer-events: none;
  opacity: 0;
}
.site-header.is-stuck .site-header__bar::before,
.site-header.is-stuck .site-header__bar::after { opacity: 1; }

/* Open state: no pane, a little taller, logo a little larger. */
.site-header:not(.is-stuck) .site-header__bar {
  max-width: 100%;
  height: 88px;
  padding-inline: 24px;
}

.site-header__logo {
  position: relative;
  z-index: 3;
  grid-column: 1;
  justify-self: start;
}
.site-header__logo img { width: 128px; height: auto; }
.site-header:not(.is-stuck) .site-header__logo img { width: 150px; }

/* Nav — on the right beside the button, title case, medium weight. */
.nav {
  position: relative;
  z-index: 3;
  grid-column: 3;
  justify-self: end;
}
/* Thin blue divider between the links and the button (half the gap). */
.nav::before {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background: linear-gradient(180deg,
    rgba(96, 197, 254, 0) 0%,
    rgba(96, 197, 254, 0.42) 50%,
    rgba(96, 197, 254, 0) 100%);
}
.nav__list { display: flex; align-items: center; gap: 4px; }

.nav__link {
  position: relative;
  z-index: 1;
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #a9bdd3;
  white-space: nowrap;
}
.nav__link.is-active,
.nav__link:hover { color: var(--text); }

/* Hover: a low-opacity rounded rectangle under the label. Its own
   effect, separate from the pill, which only marks the current page. */
.nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(150, 205, 255, 0.10);
  opacity: 0;
  pointer-events: none;
}
.nav__link:hover::before,
.nav__link:focus-visible::before { opacity: 1; }

/* One pill, on the current page's link. It doesn't follow hover; it
   slides across when you arrive from another page. Positioned by
   site.js. */
.nav__indicator {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 0;
  height: 36px;
  margin-top: -18px;
  border-radius: 9px;
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.22) 0%, rgba(29, 129, 255, 0.07) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(64, 145, 255, 0.5),
    inset 0 1px 0 rgba(150, 212, 255, 0.32), inset 1px 0 0 rgba(150, 212, 255, 0.10);
  opacity: 0;
  pointer-events: none;
}

.site-header__cta {
  position: relative;
  z-index: 3;
  grid-column: 4;
  justify-self: end;
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 3;
  grid-column: 4;
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 12px 11px;
  border-radius: var(--r-sm);
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.12) 0%, rgba(29, 129, 255, 0.03) 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint);
}
.nav-toggle span { display: block; height: 1.5px; border-radius: 2px; background: var(--text); }
.nav-toggle span + span { margin-top: 5px; }

.mobile-nav {
  display: none;
  max-width: var(--shell-wide);
  margin: 10px auto 0;
  padding: 10px;
  border-radius: 14px;
  /* sits over live page content, so it needs a heavier frost than the bar */
  background: rgba(6, 16, 34, 0.9);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(0.72);
  backdrop-filter: blur(26px) saturate(180%) brightness(0.72);
  box-shadow:
    inset 0 0 0 1px rgba(120, 200, 255, 0.16),
    inset 0 1px 0 rgba(96, 197, 254, 0.26),
    0 10px 30px rgba(0, 2, 8, 0.5);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__link {
  position: relative;
  z-index: 0;
  display: block;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.mobile-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(150, 205, 255, 0.10);
  opacity: 0;
  pointer-events: none;
}
.mobile-nav__link:hover::before,
.mobile-nav__link:focus-visible::before,
.mobile-nav__link:active::before { opacity: 1; }
.mobile-nav__link.is-active {
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.22) 0%, rgba(29, 129, 255, 0.07) 100%);
  box-shadow: inset 0 0 0 1px rgba(64, 145, 255, 0.45), inset 0 1px 0 rgba(150, 212, 255, 0.28), inset 1px 0 0 rgba(150, 212, 255, 0.08);
}
.mobile-nav__cta { margin-top: 8px; width: 100%; }

/* ------------------------------------------------------------
   5. BUTTONS
   Flat. The asymmetric corner (larger top-left / bottom-right) is
   the one carry-over from the bevelled v1 — a nod to the banner ends
   of the logo, without the slab underneath.
   ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px 5px 12px 5px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.btn__arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Buttons take the same light: brighter along the top, a glint on the
   top edge (fainter on the left), shade along the bottom, a small
   shadow falling below. */
.btn--primary {
  background: linear-gradient(var(--lit-angle), #d9ff6a 0%, var(--lime) 42%, #a7da2a 100%);
  color: var(--lime-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.57), inset 1px 0 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(40, 72, 0, 0.22),
    var(--lit-cast-sm);
}
/* The live site's blue outline button. */
.btn--ghost {
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.19) 0%, rgba(29, 129, 255, 0.06) 100%);
  border-color: rgba(143, 207, 255, 0.40);
  color: var(--blue-3);
  box-shadow:
    inset 0 1px 0 rgba(170, 215, 255, 0.25), inset 1px 0 0 rgba(170, 215, 255, 0.08),
    var(--lit-cast-sm);
}
/* On the lime band. Green hairline, as requested. */
.btn--dark {
  background: linear-gradient(var(--lit-angle), #1b2c0b 0%, #0a1300 70%);
  border-color: rgba(10, 19, 0, 0.6);
  color: #e6f8bd;
  box-shadow:
    inset 0 0 0 1px rgba(193, 244, 57, 0.35),
    inset 0 1px 0 rgba(193, 244, 57, 0.37), inset 1px 0 0 rgba(193, 244, 57, 0.11),
    1px 6px 12px -5px rgba(30, 50, 0, 0.45);
}

.btn--sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px 4px 10px 4px; }
.btn--lg { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 14px 5px 14px 5px; }

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

/* Plain text link with an arrow, for "see more" moments. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.link-arrow .btn__arrow { width: 15px; height: 15px; }

/* ------------------------------------------------------------
   6. TYPE
   Sentence case, tight tracking. Uppercase is kept for the hero
   headline (the Figma design) and for small labels only.
   ------------------------------------------------------------ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex: 0 0 auto;
}

.h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: balance;
}

.h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.section-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head .lede { margin-top: 18px; }
.section-head--split {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head--split > div { max-width: 720px; }
.section-head--inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: none; }

.fine {
  max-width: 820px;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--dim);
}

.prose p { color: var(--text-2); }
.prose p + p { margin-top: 18px; }
.prose strong { color: var(--text); font-weight: 600; }

/* Small label pills. */
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.14) 0%, rgba(29, 129, 255, 0.04) 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint);
  white-space: nowrap;
}
.tag--lime {
  color: var(--lime);
  background: linear-gradient(var(--lit-angle), rgba(193, 244, 57, 0.14) 0%, rgba(193, 244, 57, 0.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(193, 244, 57, 0.22), inset 0 1px 0 rgba(225, 255, 160, 0.23), inset 1px 0 0 rgba(225, 255, 160, 0.07);
}
.tag--blue {
  color: var(--blue-2);
  background: linear-gradient(var(--lit-angle), rgba(96, 193, 255, 0.14) 0%, rgba(96, 193, 255, 0.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(96, 193, 255, 0.22), inset 0 1px 0 rgba(200, 235, 255, 0.23), inset 1px 0 0 rgba(200, 235, 255, 0.07);
}

/* Notice pill, e.g. "Subject to change". */
.notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text-2);
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.13) 0%, rgba(29, 129, 255, 0.03) 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint);
}
.notice::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2b23d;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   7. CARD — the one surface style used everywhere, lit from the
   same overhead light as everything else
   ------------------------------------------------------------ */
.card {
  position: relative;
  isolation: isolate;
  padding: 26px;
  border-radius: var(--r);
  background: var(--lit-face);
  box-shadow: var(--lit-cast);
}
/* The rim: bright along the top where the light lands, fading down the
   sides into the bottom edge. A masked 1px ring, so the gradient follows
   the border. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--lit-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }

/* Blue icon tile — the live site's, without the glow, lit from above. */
.card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border-radius: 10px 4px 10px 4px;
  background: linear-gradient(var(--lit-angle),
    rgba(72, 165, 255, 0.34) 0%,
    rgba(29, 129, 255, 0.15) 55%,
    rgba(18, 84, 232, 0.10) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(110, 190, 255, 0.30),
    inset 0 1px 0 rgba(210, 236, 255, 0.37), inset 1px 0 0 rgba(210, 236, 255, 0.11),
    var(--lit-cast-sm);
}
.card__icon svg { width: 20px; height: 20px; fill: #cfe9ff; }

.card__meta {
  display: block;
  margin-bottom: 10px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.card__title { font-size: 18px; font-weight: 600; line-height: 1.32; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.card__text  { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Checked bullet list, used in tiers and day cards. */
.ticks { display: grid; gap: 10px; margin-top: 18px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   8. HERO (home)
   Geometry traced from the Figma frame; the lockup group is centred
   by motion.js during the intro.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 1;
  padding-top: 128px;
  text-align: center;
  overflow-x: clip;   /* nothing in the hero may widen the page on phones */
}
.hero__lockup { display: flex; justify-content: center; }

.hero__logo {
  width: min(661px, 88vw);
  height: auto;
  filter:
    drop-shadow(2px 8px 12px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(29, 129, 255, 0.09));
}

/* The two lines under the lockup share one face (the condensed label
   face, which matches the logo lettering) and differ only in size and
   colour: a quiet credit, then the date in blue. */
.hero__credit {
  margin-top: 12px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d91a8;
  text-wrap: balance;
  /* "In partnership with" + the small USTBCA logo on one centred line */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.hero__credit picture { display: block; }
.hero__partner { display: block; height: 46px; width: auto; opacity: 0.92; transition: opacity 220ms var(--bez), transform 220ms var(--bez); }
.hero__partner-link { display: block; border-radius: 8px; }
.hero__partner-link:hover .hero__partner, .hero__partner-link:focus-visible .hero__partner { opacity: 1; transform: translateY(-1px); }

.hero__eyebrow {
  margin-top: 36px;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-2);
  text-wrap: balance;
}
.hero__eyebrow .sep { padding: 0 0.35em; }

.hero__title {
  margin-top: 72px;
  /* the floor shrinks on narrow phones so each line stays one line */
  font-size: clamp(min(44px, calc((100vw - 40px) * 0.105)), 6.9vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
}
.hero__title { position: relative; font-weight: 700; }
.hero__line { display: block; }
.hero__word { display: inline-block; }   /* each word moves on its own in the reveal */

/* Soft blue light behind the headline. The reveal fades it in
   (motion.css); afterwards it rests at this opacity. */
.hero__title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(1100px, 88vw);
  aspect-ratio: 1 / 0.5;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(58, 148, 255, 0.16) 0%,
    rgba(46, 136, 255, 0.10) 30%,
    rgba(36, 126, 255, 0.05) 55%,
    rgba(29, 119, 255, 0.015) 80%,
    rgba(29, 119, 255, 0) 100%);
  opacity: 0.45;
  pointer-events: none;
}

.hero__sub {
  margin: 26px auto 0;
  max-width: 740px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-2);
  /* natural line lengths (balance made every line the same: a hard rectangle).
     At 740px the copy falls into three uneven lines, long in the middle;
     pretty still keeps a lone word off the last line on narrower screens */
  text-wrap: pretty;
}

.hero__actions { margin-top: 40px; justify-content: center; }
.hero__micro {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
  text-wrap: balance;
}
/* keeps a phrase together when a centred line has to wrap */
.nw { white-space: nowrap; }
.hero__micro .dot { color: var(--dim); padding: 0 0.45em; }

/* ------------------------------------------------------------
   9. STATS
   ------------------------------------------------------------ */
.stats { position: relative; z-index: 1; padding-top: 120px; }
.stat { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.stat__num {
  font-size: clamp(38px, 3.8vw, 50px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 15px; line-height: 1.35; color: var(--muted); }

/* ------------------------------------------------------------
   10. WHY (home)
   ------------------------------------------------------------ */
.why__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.why__body .h2 + p { margin-top: 24px; }
.why__body p + p { margin-top: 18px; }
/* the opening line carries the point of the whole section */
.why__body strong { color: var(--text); font-weight: inherit; }

/* What you walk away with — three icon rows instead of a paragraph. */
.takeaway { padding: 30px; }
.takeaway__head {
  margin-bottom: 26px;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.takeaway__list { display: grid; gap: 22px; }
.takeaway__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;   /* icon sits on the middle of its title + text block */
}
.takeaway__item .card__icon { margin: 0; }
.takeaway__item h4 {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text);
}
.takeaway__item p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------
   11. DAYS (schedule at a glance)
   ------------------------------------------------------------ */
.day-card { padding: 30px; display: flex; flex-direction: column; }
.day-card__date {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.day-card__title { margin-top: 8px; font-size: 24px; font-weight: 650; letter-spacing: -0.025em; color: var(--text); }
.day-card .ticks { flex: 1; align-content: start; }
.day-card__lede { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.day-card__foot { margin-top: 24px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--line); }

.below-grid { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* ------------------------------------------------------------
   12. FEATURE PAIR (venue + vendors)
   ------------------------------------------------------------ */
.feature { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.feature .h3 { font-size: 22px; }
.feature p:not(.kicker) { color: var(--muted); }
.feature .feature__price {
  font-size: 15px;
  color: var(--text-2);
}
.feature__price strong { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; color: var(--text); margin-right: 6px; }
.feature .btn-row { margin-top: auto; padding-top: 10px; }

/* ------------------------------------------------------------
   13. PAGE HEAD (subpages)
   ------------------------------------------------------------ */
.page-head { position: relative; z-index: 1; padding: 176px 0 64px; }
.page-head__title {
  max-width: 900px;
  font-size: clamp(40px, 5.6vw, 70px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--text);
  text-wrap: balance;
}
.page-head .lede { max-width: 720px; margin-top: 22px; }
.page-head .btn-row { margin-top: 34px; }
.page-head__note { margin-top: 18px; font-size: 14.5px; color: var(--muted); max-width: 640px; }

/* Facts strip at the top of Information. */
.fact { padding: 24px; }
.fact__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.fact__value { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.fact__sub { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fact__sub a { color: var(--blue-2); }

/* ------------------------------------------------------------
   14. AGENDA (Information)
   ------------------------------------------------------------ */
.agenda-day { padding: 0; overflow: hidden; }
.agenda-day + .agenda-day { margin-top: 20px; }
.agenda-day__head {
  /* same two columns as the rows below, so the day's title lines up with the session titles */
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: baseline;
  gap: 6px 28px;
  padding: 24px 28px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.agenda-day__date {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.agenda-day__title { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }

.agenda__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 28px;
  padding: 18px 28px;
}
.agenda__row + .agenda__row { box-shadow: inset 0 1px 0 var(--line); }
.agenda__time {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.agenda__title { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.agenda__note  { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.agenda__body .tag { margin-top: 10px; }

/* Main sessions stand out; breaks recede. */
.agenda__row.is-session .agenda__title { color: var(--text); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.agenda__row.is-break .agenda__title,
.agenda__row.is-break .agenda__time { color: var(--dim); }

/* Concurrent breakouts — two tracks side by side. */
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.track {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.10) 0%, rgba(29, 129, 255, 0.02) 100%);
  box-shadow: inset 0 0 0 1px var(--line), var(--lit-glint);
}
.track .tag { margin: 0 0 8px; }
.track p { font-size: 15px; line-height: 1.45; color: var(--text); font-weight: 500; }

.agenda-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 26px; }
.agenda-meta p { font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------
   15. TIERS / STEPS (Vendors & sponsors)
   ------------------------------------------------------------ */
.tier { padding: 30px; display: flex; flex-direction: column; }
.tier__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tier__name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.tier__price {
  margin-top: 14px;
  font-size: clamp(34px, 3.4vw, 44px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.tier__note { margin-top: auto; padding-top: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.sponsor { padding: 24px; }
.sponsor p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* two classes, so it outranks `.sponsor p` (the price is a <p> too) */
.sponsor .sponsor__price { font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); }

.step { padding: 24px; }
.step__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 650;
  color: var(--lime);
  background: linear-gradient(var(--lit-angle), rgba(193, 244, 57, 0.14) 0%, rgba(193, 244, 57, 0) 100%);
  box-shadow: inset 0 0 0 1px rgba(193, 244, 57, 0.35), inset 0 1px 0 rgba(225, 255, 160, 0.32), inset 1px 0 0 rgba(225, 255, 160, 0.10);
  font-variant-numeric: tabular-nums;
}
/* one short title + one line each, so the four cards carry equal weight */
.step .card__title { font-size: 17px; }
.step p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Two-column text block. */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.split .h2 { margin: 0; }

/* Hairline list (exhibitor schedule, when & where). */
.hlist { box-shadow: inset 0 1px 0 var(--line); }
.hlist__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px 28px;
  padding: 22px 2px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.hlist__row dt {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-2);
}
.hlist__row dd { font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.hlist__row dd strong { color: var(--text); font-weight: 600; }
.split .hlist__row { grid-template-columns: 150px 1fr; }

/* Statement panel. */
.statement { padding: clamp(28px, 4vw, 44px); }
.statement .kicker { margin-bottom: 14px; }
.statement p:not(.kicker) { max-width: 820px; font-size: 17px; line-height: 1.65; color: var(--text-2); }

/* Bottom CTA panel on subpages. */
.cta-panel {
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-panel .h2 { font-size: clamp(26px, 3vw, 36px); }
.cta-panel p { margin-top: 10px; color: var(--muted); }
.cta-panel p a { color: var(--blue-2); }

/* Registration form (/register/ when registration is open). */
.regform { padding: 0; display: grid; grid-template-columns: 1fr 340px; overflow: hidden; }
.regform__main { padding: clamp(24px, 3.5vw, 40px); }
.regform__side {
  padding: clamp(24px, 3.5vw, 40px);
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.10), rgba(29, 129, 255, 0.02));
  box-shadow: inset 1px 0 0 var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.regform__head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 30px; }
.regform__hint { margin-top: 10px; font-size: 14px; color: var(--muted); }
.regform__fine { font-size: 13px; line-height: 1.55; color: var(--dim); }
.regform__error { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14.5px; color: #ffd2d2;
  background: rgba(255, 90, 90, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 120, 120, 0.35); }

.fields { display: grid; gap: 14px; }
.fields--2 { grid-template-columns: 1fr 1fr; }
.fields--3 { grid-template-columns: 1fr 1fr 1.3fr; }
.field--full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input {
  height: 46px; padding: 0 14px; border: 0; border-radius: var(--r-sm);
  font: inherit; font-size: 15.5px; color: var(--text);
  background: rgba(2, 8, 20, 0.6);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: box-shadow 200ms var(--bez);
}
.field input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--blue-2), 0 0 0 3px rgba(96, 193, 255, 0.18); }
.field.is-invalid input { box-shadow: inset 0 0 0 1px #ff7a7a; }

.attendees { display: grid; gap: 12px; margin: 12px 0 14px; }
.attendees:empty { margin: 0; }
.regform__hint--top { margin: 6px 0 14px; }
.attendee { padding: 16px; border-radius: var(--r-sm); background: rgba(29, 129, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line), var(--lit-glint); }
.attendee.is-invalid { box-shadow: inset 0 0 0 1px #ff7a7a; }
.attendee__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.attendee__num { font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-2); }
.attendee__remove { font-size: 13.5px; color: var(--muted); }
.attendee__remove:hover { color: var(--text); }

.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; font-size: 14.5px; color: var(--text-2); }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lime); flex: 0 0 auto; }
.check a { color: var(--blue-2); }
.check.is-invalid { color: #ffb4b4; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.summary { display: grid; gap: 8px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summary dt { color: var(--muted); }
.summary dd { color: var(--text); font-variant-numeric: tabular-nums; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; box-shadow: inset 0 1px 0 var(--line); }
.summary__total span { color: var(--text-2); font-weight: 600; }
.summary__total strong { font-size: 36px; font-weight: 650; letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.regform__side .btn { width: 100%; }
.regform + .hotel { margin-top: 16px; }
/* payment page (/register/pay/): North's card form (an iframe, dark theme
   in North's designer, matched to --surface) inside our card */
.paybox { padding: clamp(10px, 1.6vw, 16px); }
.paybox__frame {
  /* North's iframe fills this box (height: 100%), so the box sets the height.
     Wide: the summary sits beside the card fields. Narrow: it stacks below. */
  height: 1400px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.paybox__frame[hidden] { display: none; }
.paybox__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .paybox__frame { height: 1040px; } }
.paybox .regform__error { margin: 12px; }
.page-head--pay .page-head__note .link-arrow { margin-left: 10px; }
/* speaker / invitation code: a quiet link until it's needed */
.regform__code-toggle {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--blue-2);
  text-decoration: underline; text-decoration-color: rgba(96, 193, 255, 0.35); text-underline-offset: 3px;
  transition: text-decoration-color 200ms var(--bez);
}
.regform__code-toggle:hover { text-decoration-color: currentColor; }
.regform__code { display: grid; gap: 8px; }
/* the code field and its Apply button share the narrow side column: let the
   input shrink instead of pushing Apply past the panel's edge */
.regform__code, .regform__code .field { grid-template-columns: minmax(0, 1fr); }
/* "Add a Friday reception guest ($35)" is long: on the narrowest phones let it wrap instead of overflowing */
@media (max-width: 360px) { #add-guest { white-space: normal; height: auto; min-height: 44px; padding: 10px 16px; line-height: 1.3; text-align: center; } }
.regform__code[hidden] { display: none; }
.regform__code-row { display: flex; gap: 8px; }
.regform__code-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.regform__side .regform__code-row .btn { width: auto; flex: none; height: 46px; padding: 0 16px; }
.regform__code-msg { font-size: 13px; line-height: 1.45; color: var(--muted); min-height: 0; }
.regform__code-msg:empty { display: none; }
.regform__code-msg.is-ok { color: var(--lime, #c1f439); }
.regform__code-msg.is-bad { color: #ffb4b4; }
@media (max-width: 980px) {
  .regform { grid-template-columns: 1fr; }
  .regform__side { box-shadow: inset 0 1px 0 var(--line); }
}
@media (max-width: 640px) {
  .fields--2, .fields--3 { grid-template-columns: 1fr; }
}

/* Legal pages: a narrow reading column. */
.legal { max-width: 760px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.legal p + p { margin-top: 14px; }
.legal h2 {
  margin: 44px 0 14px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.legal h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 600; color: var(--text); }
.legal ul { margin: 10px 0 0; padding-left: 22px; list-style: disc; }
.legal li + li { margin-top: 4px; }
.legal li::marker { color: var(--blue-2); }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--blue-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

.site-footer__legal { margin-left: 18px; }
.site-footer__legal a { color: var(--muted); }
.site-footer__legal a + a { margin-left: 16px; }
.site-footer__legal a:hover { color: var(--blue-2); }

/* Whole-card links. */
a.card { display: flex; color: inherit; }
a.card .link-arrow { margin-top: auto; padding-top: 6px; }
.register-links { margin-top: 16px; }

/* ------------------------------------------------------------
   16. REGISTER
   ------------------------------------------------------------ */
.hotel { padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 28px; align-items: center; }
.hotel .h2 { font-size: clamp(26px, 3vw, 36px); }
.hotel p:not(.kicker) { margin-top: 14px; color: var(--text-2); }
.hotel__rate { text-align: right; }
.hotel__rate strong { display: block; font-size: clamp(44px, 5vw, 60px); font-weight: 650; line-height: 1; letter-spacing: -0.045em; color: var(--text); }
.hotel__rate span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.hotel .btn-row { margin-top: 24px; }

/* ------------------------------------------------------------
   17. SEAM — a blue hairline between modules
   ------------------------------------------------------------ */
.seam {
  position: relative;
  z-index: 1;
  height: 1px;
  margin-inline: auto;
  width: min(var(--shell), calc(100% - 2 * var(--gutter)));
  background: linear-gradient(90deg,
    rgba(96, 197, 254, 0) 0%,
    rgba(96, 197, 254, 0.22) 50%,
    rgba(96, 197, 254, 0) 100%);
}

/* ------------------------------------------------------------
   18. FINAL CTA (home)
   ------------------------------------------------------------ */
.final {
  position: relative;
  z-index: 1;
  padding-block: clamp(72px, 8vw, 104px);
  text-align: center;
  /* lit like everything else: brightest along the top, leaning left */
  background:
    radial-gradient(90% 130% at 30% -10%, rgba(236, 255, 170, 0.55) 0%, rgba(236, 255, 170, 0) 60%),
    linear-gradient(var(--lit-angle), #cff853 0%, var(--lime) 45%, #a6d82a 100%);
  color: var(--lime-ink);
}
.final__title {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--lime-ink);
  text-wrap: balance;
}
.final__text {
  margin: 18px auto 34px;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.55;
  color: #2b3d0f;
}
.final .btn-row { justify-content: center; }

/* ------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 7vw, 80px) 0 36px;
  box-shadow: inset 0 1px 0 var(--line);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(36px, 6vw, 88px);
  padding-bottom: 44px;
}
.site-footer__logo { width: 200px; }
.site-footer__tag {
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.site-footer__blurb { margin-top: 12px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--muted); }

.site-footer__nav { display: grid; grid-auto-flow: column; gap: clamp(40px, 6vw, 80px); }
.site-footer__col { display: grid; gap: 11px; align-content: start; }
.site-footer__col h3 {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.site-footer__col a { font-size: 15px; color: var(--text-2); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 13.5px;
  color: var(--dim);
}

/* ------------------------------------------------------------
   20. STICKY CTA (phones and tablets)
   Below 980px the header button is behind the menu, so once the hero
   has gone there is no visible way to act. The bar replaces what
   scrolled away, stands down at the closing CTA, and can be dismissed.
   ------------------------------------------------------------ */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 12, 26, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--line-2), 0 -8px 24px rgba(0, 2, 10, 0.5);
  transform: translateY(130%);
}
.cta-bar.is-in { transform: translateY(0); }
.cta-bar__btn { flex: 1; }
.cta-bar__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: linear-gradient(var(--lit-angle), rgba(29, 129, 255, 0.12) 0%, rgba(29, 129, 255, 0.03) 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint);
  color: var(--muted);
}
.cta-bar__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* ------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nav__link { padding: 9px 11px; }
}

@media (max-width: 980px) {
  html { scroll-padding-top: 100px; }

  .nav, .site-header__cta { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav { display: block; }
  .mobile-nav[hidden] { display: none; }
  .cta-bar { display: flex; }

  .site-header__bar,
  .site-header:not(.is-stuck) .site-header__bar { height: 64px; }
  .site-header__logo img,
  .site-header:not(.is-stuck) .site-header__logo img { width: 118px; }

  .hero { padding-top: 112px; }
  .hero__title { margin-top: 52px; }
  .stats { padding-top: 88px; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .why__grid, .split, .hotel { grid-template-columns: 1fr; }
  .hotel__rate { text-align: left; }
  .page-head { padding-top: 140px; }
  .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hide-phone { display: none; }   /* desktop/tablet only (Chris, 19 Oct: the vendors paragraph on home, the footer date line) */
  body { font-size: 16px; }

  .site-header { inset: 12px 0 auto; padding-inline: 12px; }
  .site-header__bar,
  .site-header:not(.is-stuck) .site-header__bar { padding: 0 10px 0 14px; }

  .hero { padding-top: 96px; }
  .hero__credit { margin-top: 8px; font-size: 11px; letter-spacing: 0.12em; }
  .hero__partner { height: 38px; }
  .hero__eyebrow { margin-top: 26px; font-size: 13px; letter-spacing: 0.05em; }
  .hero__title { margin-top: 40px; }
  .hero__sub { font-size: 17px; }
  .hero__actions .btn { width: 100%; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stats { padding-top: 72px; }

  .agenda__row { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
  .agenda-day__head { grid-template-columns: 1fr; gap: 4px; padding: 20px; }
  .tracks { grid-template-columns: 1fr; }
  .hlist__row { grid-template-columns: 1fr; gap: 6px; }

  .page-head { padding: 116px 0 44px; }
  .page-head .btn-row .btn { width: 100%; }
  .cta-panel .btn { width: 100%; }

  .site-footer__nav { grid-auto-flow: row; gap: 28px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* the button label plus the arrow is wider than the bar on small phones */
@media (max-width: 374px) {
  .cta-bar__btn .btn__arrow { display: none; }
}

/* ------------------------------------------------------------
   PRICE + WHAT'S INCLUDED (home), HOSTS (home), FAQ (information)
   Corbin's list, 21 Oct
   ------------------------------------------------------------ */
.price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.price-card, .included { padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; }
.price-card__amount { margin-top: 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-card__amount strong { font-size: clamp(56px, 6.4vw, 80px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: var(--text); }
.price-card__amount span { font-size: 15px; color: var(--muted); }
.price-card__deadline { margin-top: 14px; font-size: 16px; color: var(--text-2); }
.price-card__deadline strong { color: var(--lime); font-weight: 600; }
.price-card__rates { margin-top: 20px; display: grid; gap: 10px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--line); }
.price-card__rates div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.price-card__rates dt { color: var(--muted); }
.price-card__rates dd { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-card .btn-row { margin-top: auto; padding-top: 24px; }
.ticks--lg { gap: 14px; }
.ticks--lg li { font-size: 16.5px; color: var(--text); }
.included__more { margin-top: auto; padding-top: 22px; font-size: 14.5px; color: var(--muted); }
.included__more a { color: var(--blue-2); }

.hosts { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: center; padding: clamp(28px, 4vw, 48px); }
.hosts__photo { display: block; position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: inset 0 0 0 1px var(--line), var(--lit-cast-sm); }
.hosts__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hosts__mark {
  display: flex; align-items: center; justify-content: center;
  width: clamp(96px, 12vw, 132px); aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(var(--lit-angle), rgba(61, 139, 255, 0.28), rgba(29, 129, 255, 0.06));
  box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint);
  font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.04em; color: var(--text);
}
.hosts__mark span + span { color: var(--lime); }
.hosts__body .h2 { margin-top: 10px; }
.hosts__company { margin-top: 10px; }
.hosts__sub { font-family: var(--cond); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-2); }
.hosts__motto { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; color: var(--text) !important; }
.hosts__body p:not(.kicker):not(.hosts__company) { margin-top: 14px; max-width: 640px; color: var(--text-2); }

.faq { display: grid; gap: 10px; }
.faq__aside { margin-top: 18px; font-size: 15px; color: var(--muted); }
.faq__aside a, .faq__item a { color: var(--blue-2); }
.faq__item {
  border-radius: var(--r-sm);
  background: rgba(29, 129, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line), var(--lit-glint);
  transition: box-shadow 220ms var(--bez);
}
.faq__item[open] { box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint); }
.faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 16px 48px 16px 18px; font-size: 16px; font-weight: 600; color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--blue-2); border-bottom: 2px solid var(--blue-2);
  transform: translateY(-70%) rotate(45deg); transition: transform 260ms var(--bez);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { padding: 0 18px 18px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.faq__cta { padding: 0 18px 18px; margin-top: -2px; }   /* a button under an answer (the hotel one) */

@media (max-width: 860px) {
  .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hosts { grid-template-columns: 1fr; }
  .hosts__photo { aspect-ratio: 4 / 3; }
}

/* "From" in front of the hotel price (cheapest room in the block) */
.feature__from, .hotel__from { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------
   SPEAKER CAROUSEL (/information/#speakers, speakers.js)
   Cards share one grid cell; the script places each one by its distance
   from the centre (transform, blur, opacity), so the track is as tall as
   the tallest card and nothing jumps. Full-bleed so the side cards peek in
   from the edges; the centre card is the only sharp one.
   ------------------------------------------------------------ */
.spk {
  --spk-w: min(880px, calc(100vw - 96px));
  position: relative;
  margin-top: clamp(36px, 5vw, 56px);
  overflow: hidden;
  padding: 10px 0 6px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.spk__track { display: grid; justify-items: center; margin: 0; padding: 0; list-style: none; }
.spk__card {
  grid-area: 1 / 1;
  width: var(--spk-w);
  will-change: transform, filter, opacity;
  transform-origin: 50% 50%;
}
.spk__inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--lit-face);
  box-shadow: var(--lit-cast);
  position: relative;
  isolation: isolate;
}
.spk__inner::before {          /* the same lit rim as the other cards */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px; background: var(--lit-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.spk__card.is-blank .spk__inner { min-height: 100%; }
.spk__photo { display: block; position: relative; }
.spk__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; pointer-events: none; }
.spk__body { padding: clamp(24px, 3.2vw, 40px); display: flex; flex-direction: column; }
.spk__name { margin-top: 10px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--text); }
.spk__company { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-family: var(--cond); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-2); }
.spk__link {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none;
  transition: color 220ms var(--bez);
}
.spk__link svg { width: 17px; height: 17px; flex: none; fill: currentColor; }
.spk__link:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.spk__place { color: var(--muted); }
.spk__bio { margin-top: 18px; }
.spk__bio p { font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.spk__bio p + p { margin-top: 12px; }

.spk__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.spk__arrow {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(29, 129, 255, 0.08);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--lit-glint);
  transition: box-shadow 220ms var(--bez), transform 220ms var(--bez);
}
.spk__arrow:hover { box-shadow: inset 0 0 0 1px var(--line-3), var(--lit-glint); }
.spk__arrow:active { transform: scale(0.92); }
.spk__arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spk__dots { display: flex; gap: 8px; }
.spk__dot {
  position: relative; width: 26px; height: 6px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(106, 166, 228, 0.22); overflow: hidden; transition: width 420ms var(--bez);
}
.spk__dot.is-active { width: 52px; }
.spk__dot i {               /* time left on this slide */
  position: absolute; inset: 0; border-radius: inherit; background: var(--lime);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.spk__dot:not(.is-active) i { transform: scaleX(0); }

.spk__track { cursor: grab; }
.spk.is-dragging .spk__track { cursor: grabbing; }

@media (max-width: 760px) {
  .spk { --spk-w: calc(100vw - 56px); }
  .spk__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .spk__photo { aspect-ratio: 4 / 3; }
  .spk__bio p { font-size: 15px; }
}

/* Friday reception guests on the registration form (23 Oct) */
.regform__guests-intro { margin: 10px 0 14px; padding: 16px 18px; border-radius: var(--r-sm);
  background: rgba(193, 244, 57, 0.05); box-shadow: inset 0 0 0 1px rgba(193, 244, 57, 0.22); }
.regform__guests-intro p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.regform__guests-intro strong { color: var(--text); }
.regform__guests-intro .regform__hint { margin-top: 8px; }
#guests:empty { margin: 0; }
#guests { margin-top: 12px; }

/* vendor page, Why exhibit?: the attendance projection as a stat, with its
   no-guarantee note right under it (23 Oct) */
.exhibit-stat { margin-top: 28px; padding-left: 18px; box-shadow: inset 2px 0 0 var(--lime); }
.exhibit-stat__num { font-size: clamp(54px, 6vw, 76px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: var(--lime); }
.exhibit-stat__label { margin-top: 10px; max-width: 300px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text); }
.exhibit-stat__note { margin-top: 10px; max-width: 320px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* order over the online limit (the account's high-ticket amount) */
.regform__limit { margin-top: -4px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.45;
  color: #ffd2d2; background: rgba(255, 90, 90, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 120, 120, 0.35); }
.regform__limit[hidden] { display: none; }

/* Payment page with NMI (/register/pay/): the registration card's layout, card
   details on the left, the server's order summary and the Pay button on the
   right. The card number / expiry / CVV boxes are NMI's Payment Component
   (its own frames, themed in pay.js to match .field input); it shows its own
   spinner while they load, so the slot keeps their height. */
.paycard[hidden], .paynote[hidden] { display: none; }
.paycard__card { margin: 14px 0; min-height: 168px; }
.paycard__secure { margin-top: 16px; }
.paycard .regform__side .btn:disabled { opacity: 0.55; cursor: default; }
.paycard .regform__side .regform__error { margin-top: 0; }
.paycard__test { font-size: 12.5px; font-weight: 600; color: #ffc46b; }
.paycard__test[hidden] { display: none; }
/* reCAPTCHA v3: the "Security check" line right above Pay (Google's own
   floating badge is hidden; its required notice sits under the button) */
.paycard__check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.paycard__check[hidden], .paycard__recaptcha[hidden] { display: none; }
.paycard__check span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px rgba(139, 150, 167, 0.18); }
.paycard__check b { font-weight: 600; color: var(--text); }
.paycard__check em { font-style: normal; color: var(--muted); }
.paycard__check.is-ok span { background: var(--lime); box-shadow: 0 0 0 3px rgba(193, 244, 57, 0.18); }
.paycard__check.is-ok em { color: var(--lime); }
.paycard__check.is-bad span { background: #ff7a7a; box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.18); }
.paycard__check.is-bad em { color: #ffb4b4; }
.paycard__recaptcha { font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.paycard__recaptcha a { color: var(--muted); }
.grecaptcha-badge { visibility: hidden; }
.paynote { padding: clamp(24px, 3.5vw, 40px); }
.paynote p { max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.paynote .btn-row { margin-top: 20px; }