/* ===========================================================================
   DeltaMax event page — stylesheet
   ---------------------------------------------------------------------------
   Plain CSS, no build step. Loaded with a normal <link>, so it still works
   when index.html is opened directly from the filesystem.

   ORGANISATION (in this order, top to bottom):
     1. Font
     2. Design tokens          light in :root, dark in [data-theme="dark"]
     3. Base & reset
     4. Utilities
     5. Layout shell & ambient background
     6. Components, in the order they appear on the page
     7. Motion preferences

   TWO RULES WORTH KEEPING:
   • No raw colour outside §2. Every colour is a token, so a theme can never
     half-apply. If you need a new colour, add it to *both* token blocks.
   • Media queries live with their component, not in a block at the bottom.
     Changing a component means editing one place, not two.
   =========================================================================== */

/* ============================ 1. FONT ==================================== */

@font-face{
  font-family:'Geist';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('./geist-sans.woff2') format('woff2');
}


/* ======================== 2. DESIGN TOKENS =============================== */

/* -------- Light (default) -------- */
:root{
  /* surfaces & text */
  --bg:#ffffff;
  --surface:#fbfcfd;
  --surface-hover:#f4fbfa;
  --border:rgba(9,25,40,.11);
  --border-strong:rgba(9,25,40,.22);
  --fg:#0a1016;
  --muted:#55636f;
  --chip-fg:#22303c;

  /* brand */
  --teal:#12b8ac;              /* fills: buttons, dots                       */
  --teal-ink:#0f766e;          /* teal as *text* — darkened to clear AA      */
  --teal-tint:rgba(18,184,172,.10);
  --teal-line:rgba(15,118,110,.30);
  --on-teal:#04191d;           /* text sitting on a teal fill                */
  --amber:#b45309;

  /* gradients */
  --accent-grad:linear-gradient(100deg,#0f766e 0%,#0e7490 45%,#2563eb 100%);
  --cta-grad:linear-gradient(135deg,#14c8ba 0%,#12b8ac 45%,#0d9488 100%);
  --avatar-grad:linear-gradient(135deg,#2ee6d6,#0e8f9e);
  --brand-tile:linear-gradient(150deg,#f2f6fa,#e8eef6);

  /* ambient background */
  --grid-line:rgba(9,25,40,.055);
  --glow-1:rgba(18,184,172,.20);
  --glow-2:rgba(37,99,235,.13);
  --glow-3:rgba(255,185,0,.13);
  --glow-blur:80px;
  --glow-opacity:.75;

  /* depth. Light leans on shadow; dark leans on glow, so these differ a lot. */
  --photo-bg:#eef1f4;
  --sticky-bg:rgba(255,255,255,.90);
  --shadow-card:0 1px 2px rgba(9,25,40,.05),0 8px 24px -14px rgba(9,25,40,.18);
  --shadow-card-hover:0 2px 6px rgba(9,25,40,.07),0 18px 38px -18px rgba(9,25,40,.24);
  --shadow-cta:0 10px 34px -10px rgba(13,148,136,.50),0 2px 6px rgba(9,25,40,.14);
  --shadow-cta-hover:0 16px 46px -10px rgba(13,148,136,.62),0 3px 8px rgba(9,25,40,.18);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --focus:#0f766e;

  /* ---- non-colour scales. Shared by both themes; declared once. ---- */
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --r-sm:9px;
  --r-md:14px;
  --r-lg:16px;
  --r-xl:20px;
  --r-2xl:24px;
  --r-pill:999px;

  --shell-max:1080px;
  --shell-pad:24px;
  --section-gap:92px;

  --ease-out:cubic-bezier(.2,.8,.3,1);
}

/* -------- Dark -------- */
:root[data-theme="dark"]{
  --bg:#07090c;
  --surface:rgba(255,255,255,.035);
  --surface-hover:rgba(34,211,197,.05);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --fg:#f4f6f8;
  --muted:#98a2ad;
  --chip-fg:#dbe2e9;

  --teal:#22d3c5;
  --teal-ink:#22d3c5;          /* bright teal already clears AA on near-black */
  --teal-tint:rgba(34,211,197,.10);
  --teal-line:rgba(34,211,197,.34);
  --on-teal:#04191d;
  --amber:#ffb900;

  --accent-grad:linear-gradient(100deg,#22d3c5 0%,#5fd9e0 45%,#7dd3fc 100%);
  --cta-grad:linear-gradient(135deg,#2ee6d6 0%,#22d3c5 45%,#12b8ac 100%);
  --avatar-grad:linear-gradient(135deg,#2ee6d6,#0e8f9e);
  --brand-tile:transparent;

  --grid-line:rgba(255,255,255,.045);
  --glow-1:rgba(34,211,197,.30);
  --glow-2:rgba(16,78,100,.55);
  --glow-3:rgba(255,185,0,.14);
  --glow-blur:90px;
  --glow-opacity:.5;

  --photo-bg:#11151a;
  --sticky-bg:rgba(7,9,12,.92);
  --shadow-card:none;
  --shadow-card-hover:none;
  --shadow-cta:0 10px 40px -8px rgba(34,211,197,.55),0 2px 6px rgba(0,0,0,.35);
  --shadow-cta-hover:0 16px 52px -8px rgba(34,211,197,.7),0 3px 8px rgba(0,0,0,.4);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --focus:#7ff0e6;
}


/* ========================= 3. BASE & RESET =============================== */

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

svg{display:block}

h1{
  font-size:clamp(34px,6vw,62px);line-height:1.06;font-weight:800;
  letter-spacing:-.035em;max-width:16ch;margin:0 auto;
}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:750;letter-spacing:-.028em;line-height:1.18}

/* Visible keyboard focus everywhere, in the page's own accent. */
a:focus-visible,
button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:8px;
}


/* =========================== 4. UTILITIES =============================== */

/* Icon sizing. Every <use> reference inherits colour and scales with font-size. */
.ico{
  width:1em;height:1em;
  stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

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

.skip{
  position:absolute;left:16px;top:-60px;z-index:60;
  background:var(--teal);color:var(--on-teal);
  font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:10px;text-decoration:none;
  transition:top .18s;
}
.skip:focus{top:16px}

/* Theme-swapped artwork. Logos ship as a light/dark pair; picking with CSS
   rather than by rewriting src means the right one is chosen during the first
   paint instead of flashing the wrong art. */
:root:not([data-theme="dark"]) .on-dark{display:none}
:root[data-theme="dark"]        .on-light{display:none}

/* The "raised surface" recipe, in one place.
   Seven components want the same border + fill + shadow. Listing them here
   instead of repeating three declarations seven times means the card treatment
   is retuned once. Each component still owns its own radius and padding. */
.theme-toggle,
.cd-unit,
.cta-ghost,
.meta-item,
.chip,
.host,
.platform,
.final{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-card);
}


/* ================= 5. LAYOUT SHELL & AMBIENT BACKGROUND ================= */

/* The decorative glows deliberately sit outside the viewport bounds. They must
   be clipped by a real element: `overflow-x:hidden` on <body> propagates to the
   viewport instead of clipping, which leaves the page scrollable sideways. */
.page{position:relative;min-height:100vh;overflow-x:hidden}

.shell{
  position:relative;z-index:1;
  max-width:var(--shell-max);
  margin:0 auto;
  padding:0 var(--shell-pad) 96px;
}

.grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 78%);
}

.glow{
  position:absolute;pointer-events:none;z-index:0;border-radius:50%;
  filter:blur(var(--glow-blur));
  opacity:var(--glow-opacity);
}
.glow-a{top:-220px;left:50%;transform:translateX(-50%);width:820px;height:520px;
  background:radial-gradient(circle,var(--glow-1) 0%,transparent 70%)}
.glow-b{top:180px;right:-180px;width:520px;height:520px;
  background:radial-gradient(circle,var(--glow-2) 0%,transparent 70%)}
.glow-c{top:620px;left:-200px;width:480px;height:480px;
  background:radial-gradient(circle,var(--glow-3) 0%,transparent 70%)}


/* ===================== 6. COMPONENTS (page order) ======================= */

/* ---------------------------- 6.1 Header -------------------------------- */

.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 0 0;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand-mark{
  width:42px;height:42px;flex-shrink:0;border-radius:11px;
  background:var(--brand-tile);
  display:flex;align-items:center;justify-content:center;
}
.brand-mark img{width:34px;height:34px;object-fit:contain;display:block}
.brand-name{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.brand-sub{font-size:11.5px;color:var(--muted)}
.top-right{display:flex;align-items:center;gap:10px}

@media (max-width:640px){
  .brand-sub{display:none}
}

/* ------------------------- 6.2 Theme toggle ----------------------------- */

.theme-toggle{
  position:relative;flex-shrink:0;cursor:pointer;
  width:58px;height:32px;border-radius:var(--r-pill);
  padding:0;font-family:inherit;
  transition:border-color .18s,background .18s;
}
.theme-toggle:hover{border-color:var(--border-strong)}

/* The knob travels; the two icons stay put and fade past each other. */
.theme-knob{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--cta-grad);
  box-shadow:0 2px 6px rgba(9,25,40,.28);
  transition:transform .26s var(--ease-out);
}
:root[data-theme="dark"] .theme-knob{transform:translateX(26px)}

.theme-ico{
  position:absolute;top:50%;width:14px;height:14px;
  transform:translateY(-50%);color:var(--muted);
  transition:opacity .2s;pointer-events:none;
}
.theme-ico.sun{left:8px}
.theme-ico.moon{right:8px}
/* Show the icon for the theme you would switch *to*. */
:root:not([data-theme="dark"]) .theme-ico.sun{opacity:0}
:root[data-theme="dark"]        .theme-ico.moon{opacity:0}

/* ----------------------------- 6.3 Hero --------------------------------- */

.hero{text-align:center;padding:76px 0 8px}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--teal-line);border-radius:var(--r-pill);
  background:var(--teal-tint);color:var(--teal-ink);
  font-size:12.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 16px;margin-bottom:28px;
}

.dot{
  width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0 var(--teal-line)}
  70% {box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Cool ramp only, in both themes. Running this into the amber accent blends
   blue through a desaturated olive in sRGB, which reads dirty across the middle
   of the line. The light ramp is darkened so it stays legible on white. */
.accent{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.lede{
  margin:22px auto 0;max-width:62ch;
  font-size:clamp(15px,2vw,18px);line-height:1.62;color:var(--muted);
}

@media (max-width:640px){
  .hero{padding-top:56px}
}

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

.countdown{
  margin:44px auto 0;max-width:560px;
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}
.cd-unit{
  flex:1 1 0;min-width:78px;
  border-radius:var(--r-lg);
  padding:16px 8px 13px;
  box-shadow:var(--inset-hi),var(--shadow-card);
}
.cd-n{
  display:block;
  font-size:clamp(28px,5.2vw,40px);font-weight:750;line-height:1;
  letter-spacing:-.04em;color:var(--fg);
  /* Tabular figures stop the digits jittering as they count down. */
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
.cd-l{
  display:block;margin-top:8px;
  font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.cd-status{
  margin:16px auto 0;font-size:13.5px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.cd-status b{color:var(--fg);font-weight:650}

/* Live / ended states replace the numeric tiles entirely. */
.cd-banner{
  margin:44px auto 0;max-width:560px;
  border:1px solid var(--teal-line);border-radius:var(--r-lg);
  background:var(--teal-tint);color:var(--fg);
  padding:22px 24px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:17px;font-weight:700;letter-spacing:-.02em;
}
.cd-banner.ended{
  border-color:var(--border);background:var(--surface);color:var(--muted);
  font-weight:600;font-size:15.5px;
}
.cd-banner .dot{width:9px;height:9px}

@media (max-width:640px){
  .countdown{gap:8px}
  .cd-unit{min-width:0;padding:14px 4px 11px}
  /* "Seconds" is the longest label. Shrink it enough to stay on one line inside
     a ~52px tile at 320px rather than wrapping the tiles to uneven heights. */
  .cd-l{font-size:9px;letter-spacing:.04em}
}

/* ----------------------------- 6.5 CTAs --------------------------------- */

.cta-wrap{margin:36px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:18px 40px;border-radius:var(--r-pill);text-decoration:none;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--on-teal);background:var(--cta-grad);
  box-shadow:var(--shadow-cta);
  transition:transform .18s var(--ease-out),box-shadow .18s;
}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta-hover)}
.cta:active{transform:translateY(0)}
.cta .ico{font-size:20px;stroke-width:2}

.cta-ghost{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:18px 28px;border-radius:var(--r-pill);text-decoration:none;
  font-size:15.5px;font-weight:650;letter-spacing:-.01em;
  color:var(--fg);font-family:inherit;
  transition:border-color .18s,background .18s;
}
.cta-ghost:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.cta-ghost .ico{font-size:18px}

.cta-note{font-size:13px;color:var(--muted)}

@media (max-width:640px){
  .cta,.cta-ghost{width:100%;justify-content:center;padding:17px 24px}
  .cta-row{width:100%}
}

/* -------------------------- 6.6 Meta strip ------------------------------ */

.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.meta-item{
  display:flex;align-items:center;gap:11px;
  border-radius:var(--r-md);padding:13px 20px;min-width:170px;
}
.meta-ico{
  width:32px;height:32px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--teal-tint);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.meta-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.meta-v{font-size:14.5px;font-weight:650;letter-spacing:-.01em;margin-top:2px;text-align:left}

@media (max-width:640px){
  .meta-item{flex:1 1 100%}
}

/* -------------------------- 6.7 Section type ---------------------------- */

section{margin-top:var(--section-gap)}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:12px;
}
.sub{margin-top:12px;font-size:15.5px;line-height:1.62;color:var(--muted);max-width:64ch}

@media (max-width:640px){
  section{margin-top:72px}
}

/* ------------------------ 6.8 Series timeline --------------------------- */

.track{
  /* Geometry lives here so the rail offset below can be *derived* rather than
     hand-measured. Changing the dot size or the label gap moves the rail with
     it; the old code hardcoded `top:59px` and silently broke when either
     changed. */
  --dot-size:56px;
  --month-h:16px;
  --month-gap:16px;
  --rail-h:2px;

  position:relative;margin-top:40px;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}

/* The rail sits behind the nodes and spans only first-to-last node centre, so
   it never pokes out past the ends of the track. */
.track::before{
  content:'';position:absolute;z-index:0;
  left:16.67%;right:16.67%;
  top:calc(var(--month-h) + var(--month-gap) + var(--dot-size) / 2 - var(--rail-h) / 2);
  height:var(--rail-h);
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-line) 45%,var(--border) 100%);
}

/* Grid areas rather than flex: the mobile layout needs the month and the body
   stacked *beside* one dot, which flex cannot do without a second wrapper. */
.stop{
  position:relative;z-index:1;
  display:grid;grid-template-areas:'month' 'dot' 'body';
  justify-items:center;text-align:center;
  /* Without this the grid inherits align-content:normal, which stretches the
     auto rows of the *shorter* cards to match the tallest. That inflated the
     month label and pushed two of the three dots off the rail. */
  align-content:start;
}
.stop-m{
  grid-area:month;
  margin-bottom:var(--month-gap);
  /* Explicit line-height keeps this row a known height, which is what lets the
     rail offset above be computed instead of guessed. */
  font-size:12px;line-height:var(--month-h);
  font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.stop.is-live .stop-m{color:var(--teal-ink)}

.stop-dot{
  grid-area:dot;
  width:var(--dot-size);height:var(--dot-size);border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  /* Opaque, so it masks the rail passing behind it. */
  background:var(--bg);border:2px solid var(--border);
  font-size:22px;font-weight:750;color:var(--muted);
}
.stop.is-live .stop-dot{
  border-color:transparent;background:var(--cta-grad);color:var(--on-teal);
  box-shadow:0 0 0 6px var(--teal-tint);
}
.stop.is-locked .stop-dot{border-style:dashed}
.stop.is-locked .stop-dot span{animation:mystery 3.4s ease-in-out infinite}
/* Offset the second unknown so the two do not breathe in lockstep. */
.stop:nth-child(3) .stop-dot span{animation-delay:.5s}
@keyframes mystery{
  0%,100%{opacity:.45;transform:translateY(0)}
  50%    {opacity:1;transform:translateY(-2px)}
}

.stop-body{grid-area:body;margin-top:18px}
/* Spans inside a span, so they need blockifying by hand. */
.stop-h{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.stop-d{display:block;margin-top:5px;font-size:13px;color:var(--muted);line-height:1.45}
.stop-tag{
  display:inline-block;margin-top:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-ink);background:var(--teal-tint);
  border:1px solid var(--teal-line);border-radius:var(--r-pill);
  padding:4px 11px;
}

@media (max-width:640px){
  /* Rail flips from a horizontal run to a left-hand vertical spine. */
  .track{grid-template-columns:1fr;gap:0;margin-top:32px}
  .track::before{
    left:calc(var(--dot-size) / 2 - var(--rail-h) / 2);
    right:auto;top:28px;bottom:28px;
    width:var(--rail-h);height:auto;
    background:linear-gradient(180deg,var(--teal) 0%,var(--teal-line) 45%,var(--border) 100%);
  }
  .stop{
    grid-template-columns:var(--dot-size) 1fr;
    grid-template-areas:'dot month' 'dot body';
    justify-items:start;text-align:left;
    column-gap:18px;padding:16px 0;
  }
  .stop-m{margin-bottom:4px}
  .stop-body{margin-top:2px}
}

/* ----------------------------- 6.9 Chips -------------------------------- */

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{
  border-radius:var(--r-pill);padding:9px 17px;
  font-size:13.5px;font-weight:600;color:var(--chip-fg);
}

/* ------------------------- 6.10 Platform link --------------------------- */

.platform{
  display:flex;align-items:center;gap:18px;margin-top:28px;
  padding:20px 24px;border-radius:var(--r-xl);
  text-decoration:none;color:inherit;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
}
.platform:hover{
  border-color:var(--teal-line);background:var(--surface-hover);
  transform:translateY(-2px);box-shadow:var(--shadow-card-hover);
}
.platform-mark{
  width:52px;height:52px;flex-shrink:0;border-radius:13px;
  background:var(--brand-tile);
  display:flex;align-items:center;justify-content:center;
}
.platform-mark img{width:40px;height:40px;object-fit:contain;display:block}
.platform-text{flex:1;min-width:0}
.platform-t{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.platform-u{
  display:block;margin-top:3px;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.platform-go{
  flex-shrink:0;display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:650;color:var(--teal-ink);
}
.platform-go .ico{transition:transform .2s}
.platform:hover .platform-go .ico{transform:translateX(3px)}

@media (max-width:560px){
  .platform{flex-wrap:wrap;gap:14px}
  .platform-text{flex:1 1 60%}
  .platform-go{
    flex:1 1 100%;justify-content:center;
    padding-top:14px;border-top:1px solid var(--border);
  }
}

/* ----------------------------- 6.11 Hosts ------------------------------- */

/* Exactly three speakers, so this is a deliberate 1-or-3 grid rather than
   auto-fit: auto-fit passes through a 2-column stage that leaves the third card
   orphaned on its own row at tablet widths. */
.hosts{display:grid;grid-template-columns:1fr;gap:16px;margin-top:36px}
@media (min-width:720px){
  .hosts{grid-template-columns:repeat(3,1fr)}
}

.host{
  border-radius:var(--r-xl);padding:34px 24px 30px;text-align:center;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
}
.host:hover{
  border-color:var(--teal-line);background:var(--surface-hover);
  transform:translateY(-3px);box-shadow:var(--shadow-card-hover);
}

/* Photo well. The monogram sits underneath and shows only when the image is
   absent or fails to load. */
.host-photo{
  position:relative;width:128px;height:128px;margin:0 auto 20px;
  border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px var(--border),0 0 0 6px var(--teal-tint);
}
.host-photo img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;background:var(--photo-bg);
}
.host-photo img[hidden]{display:none}
.avatar{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;font-weight:750;letter-spacing:-.03em;
  color:var(--on-teal);background:var(--avatar-grad);
}
.host-n{font-size:17px;font-weight:700;letter-spacing:-.02em}
.host-r{font-size:13.2px;color:var(--muted);margin-top:5px;line-height:1.45}

@media (max-width:640px){
  .host{padding:28px 20px 24px}
  .host-photo{width:112px;height:112px}
}

/* -------------------------- 6.12 Presented by --------------------------- */

.presented{text-align:center}
.logos{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(24px,5vw,52px);margin-top:28px;
}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{display:block;width:auto;opacity:.82;transition:opacity .2s}
.logo:hover img{opacity:1}

/* Sized by height, not width: the two lockups have very different aspect ratios
   (Katalyst is stacked at ~1.5:1, NeuAlto horizontal at ~3.6:1), so matching
   widths would leave one visually tiny. Both also carry small type inside the
   artwork, so these heights are legibility floors, not preferences. */
.logo-katalyst{height:78px}
.logo-neualto{height:54px}
.logo-sep{width:1px;height:52px;background:var(--border);flex-shrink:0}

@media (max-width:520px){
  .logo-sep{display:none}
  .logos{gap:28px}
  .logo-katalyst{height:64px}
  .logo-neualto{height:44px}
}

/* -------------------------- 6.13 Closing CTA ---------------------------- */

.final{
  margin-top:96px;text-align:center;
  border-color:var(--teal-line);border-radius:var(--r-2xl);
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%,var(--teal-tint),transparent 70%),
    var(--surface);
  padding:clamp(38px,6vw,64px) 24px;
}
.final h2{max-width:22ch;margin:0 auto}
.final .sub{margin:14px auto 0;text-align:center}

/* ----------------------------- 6.14 Footer ------------------------------ */

footer{
  margin-top:72px;padding-top:26px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.footer-links{display:flex;flex-wrap:wrap;gap:22px}
footer a{color:var(--muted);font-size:13.5px;text-decoration:none;transition:color .16s}
footer a:hover{color:var(--fg)}
.copy{font-size:12.5px;color:var(--muted);opacity:.85}

/* ------------------------ 6.15 Sticky mobile CTA ------------------------ */

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--sticky-bg);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  transform:translateY(110%);
  transition:transform .26s var(--ease-out);
}
.sticky.show{transform:translateY(0)}
.sticky-k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:650}
.sticky-v{
  font-size:14px;font-weight:700;letter-spacing:-.01em;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.sticky-btn{
  flex-shrink:0;padding:13px 22px;border-radius:var(--r-pill);text-decoration:none;
  font-size:14.5px;font-weight:700;
  color:var(--on-teal);background:var(--cta-grad);
}

/* Only ever shown on narrow viewports, where the header CTA is hidden. */
@media (max-width:860px){
  .sticky{display:flex}
  .shell{padding-bottom:120px}
}


/* ====================== 7. MOTION PREFERENCES =========================== */

/* Scroll reveal. Gated on `.js` so a visitor without JavaScript never gets
   content stuck at opacity:0 — the class is set by the inline head script. */
.js .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s var(--ease-out);
}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
  .stop.is-locked .stop-dot span{animation:none;opacity:.7}
  .cta,.host,.platform,.sticky,.theme-knob,.platform-go .ico{transition:none}
  .cta:hover,.host:hover,.platform:hover{transform:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}