/* Bettear Auracast™ — HORIZONTAL presenter version.
   Slides are laid out at design pixels (1514×1002 card, home 1814×1002)
   and uniformly scaled by JS (transform: scale on .fit) to fit the window.
   No page scrolling; navigation is left/right arrows, keyboard, dots. */

:root {
  --purple: #57007e;
  --tile: #effaff;
  --page-bg: #ebebeb;
  --panel: #f4f4f6;
  --ink: #45454d;
  --muted: #5f5f5f;
  --r-card: 26px;
  --cut-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.14), inset 0 -1px 2px rgba(255, 255, 255, 0.65);
  /* one canonical frosted-glass material used across the whole site (matches Figma:
     ~80% white fill + heavy background blur + soft ambient shadow) */
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(40px) saturate(1.2);
  --glass-shadow: 0 4px 26px rgba(0, 0, 0, 0.15);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.horiz {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------------- deck ---------------- */
.deck-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.deck {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.25, 1);
}

.deck.no-anim { transition: none; }

.slide {
  /* narrower than the viewport so the neighbouring cards peek in at the
     screen edges; JS computes --slide-w from the card size */
  flex: 0 0 var(--slide-w, 100vw);
  width: var(--slide-w, 100vw);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fit {
  transform-origin: center center;
  will-change: transform;
}

/* neighbouring peek cards show as empty shells — their content fades out
   after the slide movement, and appears immediately on the incoming one */
.slide .fit .hero-band,
.slide .fit .card > *,
.slide .fit .ch-hero > *,
.slide .fit .home-layout > * {
  opacity: 0;
  transition: opacity 0.25s ease 0.3s;
}
.slide.is-cur .fit .hero-band,
.slide.is-cur .fit .card > *,
.slide.is-cur .fit .ch-hero > *,
.slide.is-cur .fit .home-layout > * {
  opacity: 1;
  transition-delay: 0s;
}

/* HERO version: the chapter scene fills the whole slide; the section
   card sits on it as frosted glass, its top strip showing the scene */
.herowrap {
  position: relative;
  width: 1514px;
  padding-top: 142px;
}

.hero-band {
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  overflow: hidden;
}

.hero-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.herowrap > .card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ---------------- cards ---------------- */
.card {
  position: relative;
  width: 1514px;
  height: 1002px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

/* Deployment slide is taller than the screen → local scrolling */
.card--tall {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.card--tall::-webkit-scrollbar { width: 10px; }
.card--tall::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 999px; }
.card--tall::-webkit-scrollbar-track { background: transparent; }

.card-tall-inner { padding: 140px 42px 56px 42px; }

/* ---------------- numbered title pill ----------------
   Mirrors the vertical site's .head-pill at 1.5× design pixels:
   white pill + soft shadow, #effaff number tile with its own
   radius/shadow, thin black number, small uppercase muted label. */
.h-pill {
  position: absolute;
  top: 42px;
  left: 42px;
  z-index: 3;
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  background: #fff;
  border-radius: 21px;
  box-shadow: 0 9px 30px rgba(0, 0, 0, 0.12);
  min-height: 87px;
  overflow: hidden;
}

.h-pill .num {
  flex: 0 0 81px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile);
  border-radius: 21px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  color: #000;
  font-size: 50px;
  font-weight: 400;
}

.h-pill .lbl {
  display: flex;
  align-items: center;
  padding: 0 45px 0 33px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
  white-space: nowrap;
}


.card--tall .h-pill { position: static; flex-shrink: 0; }

/* ---------------- recessed cut-out pills ---------------- */
.cut-pill {
  --ico-d: 62px; --ico-l: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  padding: 16px 24px 16px 16px;
}

.cut-pill .ico {
  flex-shrink: 0;
  width: var(--ico-d);
  height: var(--ico-d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cut-shadow);
  color: #47474c;
}

.cut-pill .ico svg { width: 26px; height: 26px; }

.cut-pill .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cut-pill .txt strong { font-size: 20px; font-weight: 600; white-space: nowrap; }
.cut-pill .txt span { font-size: 15px; color: var(--muted); white-space: nowrap; }
.cut-pill .txt .on { color: #18a957; font-weight: 500; }

/* ---------------- education: hero (slide 1) ----------------
   These class names also exist in the vertical markup (.vsec slides), so
   they are guarded with .card to avoid leaking into reused sections. */
.hero-top { position: relative; height: 516px; }

.card .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.hero-logo {
  position: absolute;
  top: 40px;
  left: 48px;
  color: #fff;
}
.hero-logo svg { height: 62px; width: auto; display: block; }

.card .hero-pill {
  position: absolute;
  bottom: 30px;
  left: 48px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 999px;
}

.card .explore {
  position: absolute;
  top: 26px;
  right: 26px;
  bottom: 26px;
  width: 600px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 20px;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.x-label {
  padding: 14px 30px 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--muted);
}

.x-row {
  display: grid;
  grid-template-columns: 52px 1fr 26px;
  align-items: center;
  gap: 22px;
  padding: 19px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  text-align: left;
  transition: background 0.2s ease;
}

.x-row:hover { background: rgba(255, 255, 255, 0.75); }

.x-row .num {
  width: 52px;
  height: 56px;
  border-radius: 12px;
  background: var(--tile);
  color: #45454d;
  font-size: 26px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-row .lbl { font-size: 23px; font-weight: 500; }
.x-row .arr { color: var(--muted); display: flex; }
.x-row .arr svg { width: 18px; height: 18px; }

/* five-section chapters get tighter explore rows so the panel still fits */
.explore--dense .x-row { padding: 11px 30px; gap: 18px; }
.explore--dense .x-row .num { width: 46px; height: 50px; font-size: 23px; }
.explore--dense .x-row .lbl { font-size: 21px; }
.explore--dense .x-label { padding-bottom: 6px; }

.hero-bottom { padding: 46px 56px 0; }
.hero-bottom h1 { font-size: 54px; font-weight: 600; }
.hero-bottom .sub { margin-top: 14px; font-size: 23px; color: var(--muted); }

.hero-cols {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 70px;
}

.cap {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 16px;
}

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips--col { flex-direction: column; align-items: flex-start; }

.card .chip {
  background: var(--tile);
  border-radius: 12px;
  padding: 13px 22px;
  font-size: 19px;
  font-weight: 500;
}

/* ---------------- reused vertical sections ----------------
   Each section slide is a standard 1514×1002 card (same as education).
   The refined vertical section content is rearranged to landscape —
   head pill top, text left, media right — and, when naturally taller
   than the card interior, uniformly scaled down by JS (.sec-fit). */
.vcard2 {
  display: flex;
  flex-direction: column;
  /* top padding clears the title pill row */
  padding: 140px 46px 42px 46px;
}

.vcard2 .sec-fit {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vrow { width: 1390px; transform-origin: center center; }

.vcard2 .section-card {
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: 100%;
}

.vrow .section-head { margin: 0 !important; }

.vrow .vrow-body {
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 28px 60px;
  align-items: center;
  margin-top: 36px;
}

.vrow .v-left { min-width: 0; }
.vrow .v-left > * + * { margin-top: 24px; }
.vrow .v-right { min-width: 0; }
.vrow .v-right > * + * { margin-top: 28px; }

.vrow .vcol-body { margin-top: 36px; }
.vrow .vcol-body > * + * { margin-top: 26px; }

.vrow .deck-note { margin-top: 32px !important; margin-bottom: 0 !important; }

/* ---------------- education §1: centralized management ---------------- */
.s1-left {
  position: absolute;
  left: 56px;
  top: 208px;
  width: 560px;
  z-index: 2;
}

.s1-left h2 { font-size: 48px; font-weight: 600; }
.s1-left .body { margin-top: 24px; font-size: 21px; line-height: 1.6; color: #2c2c30; max-width: 470px; }

.rooms { margin-top: 46px; display: flex; gap: 18px; }
.rc { display: flex; flex-direction: column; gap: 18px; }
.rc2 { margin-top: 44px; }

.s1-img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 940px;
  object-fit: cover;
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

/* ---------------- education §2: deployment options ---------------- */
.s2-head { display: block; margin-bottom: 10px; }
.s2-title { margin-top: 0; }
.s2-title h2 { font-size: 48px; font-weight: 600; }
.s2-title .body { margin-top: 12px; font-size: 21px; color: var(--muted); }

/* each tier is a white card wrapping the info column + gray panel */
.tier {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: center;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  padding: 36px 38px;
}

.t-info { padding-left: 16px; }
.t-info h3 { font-size: 36px; font-weight: 600; }
.t-info p { margin-top: 10px; font-size: 20px; color: var(--muted); max-width: 220px; }

.t-panel {
  border-radius: 24px;
  background: var(--page-bg) url(../images/contour-wide-50.png) center / cover no-repeat;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.11), inset 0 -1px 2px rgba(255, 255, 255, 0.65);
  min-height: 396px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 30px;
  padding: 34px 44px;
}

.t-panel figure { text-align: center; position: relative; }

/* soft halo fades the contour lines out around each product, so multiply
   never draws lines across light device bodies */
.t-panel figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 150%;
  height: 105%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--page-bg) 55%, rgba(235, 235, 235, 0) 100%);
}

.t-panel figure img { position: relative; margin: 0 auto 20px; width: auto; mix-blend-mode: multiply; }
.t-panel figcaption { position: relative; }
.t-panel figcaption { font-size: 17px; color: var(--muted); line-height: 1.35; }
.t-panel figcaption strong { display: block; font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }

/* ---------------- education §3: sound card mode ---------------- */
.s3-left {
  position: absolute;
  left: 56px;
  top: 230px;
  width: 600px;
}

.s3-left h2 { font-size: 48px; font-weight: 600; margin-bottom: 28px; }
.s3-left .body { font-size: 21px; line-height: 1.6; color: #2c2c30; }
.s3-left .body + .body { margin-top: 20px; }
.s3-left .body strong { font-weight: 600; color: var(--ink); }

.s3-img {
  position: absolute;
  right: 96px;
  top: 50%;
  transform: translateY(-50%);
  width: 650px;
}

/* ---------------- education §4: quick access ---------------- */
.s4-left {
  position: absolute;
  left: 56px;
  top: 180px;
  width: 640px;
}

.s4-left h2 { font-size: 48px; font-weight: 600; }
.s4-left .body { margin-top: 22px; font-size: 21px; line-height: 1.6; color: #2c2c30; max-width: 540px; }

.methods { margin-top: 42px; display: flex; flex-direction: column; gap: 22px; }

.s4-grid {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, 300px);
  gap: 26px;
}

.recv {
  background: var(--panel);
  border-radius: 20px;
  padding: 24px 18px 20px;
  text-align: center;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.recv img { height: 160px; width: auto; margin: 0 auto auto; object-fit: contain; max-width: 100%; mix-blend-mode: multiply; }
.recv figcaption { font-size: 15px; color: var(--muted); margin-top: 14px; }
.recv figcaption strong { display: block; font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* ---------------- home ---------------- */
.home-layout {
  width: 1814px;
  height: 1002px;
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 36px;
}

.home-intro {
  position: relative;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
  padding: 56px;
  overflow: hidden;
}

/* the gallery photo fills the whole intro card; content overlays it */
.intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-logo { position: relative; color: var(--ink); }
.home-logo svg { height: 64px; width: auto; display: block; }

.home-intro h1 { position: relative; margin-top: 52px; font-size: 54px; font-weight: 400; line-height: 1.3; }
.home-intro .sub { position: relative; margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); }

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 24px;
  min-height: 0;
}

.sc {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.sc:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.13);
}

.sc--static { cursor: default; }

.sc .ph {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  display: block;
}

.sc .ph img { width: 100%; height: 100%; object-fit: cover; }

.sc .tb {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.sc .tb svg { width: 24px; height: 24px; }

.sc .tx { display: flex; align-items: center; gap: 15px; padding: 13px 8px 6px; }

.sc .tx .num {
  flex-shrink: 0;
  width: 44px;
  height: 48px;
  border-radius: 10px;
  background: var(--tile);
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc .tx strong { font-size: 20px; font-weight: 500; }

/* ---------------- EXPERIMENT: chapter containers ----------------
   Strict build of Figma "Horizontal Chapter Cultural Venues" (24:644).
   One 1572×1012 image-backed container; sections are an inner deck of
   1338×835 frosted cards; 33px slivers of neighbours stay visible. */
.ch-frame {
  position: relative;
  width: 1572px;
  height: 1012px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.35);
}

.chf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.in-deck {
  position: absolute;
  inset: 0;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.25, 1);
  will-change: transform;
}
.in-deck.no-anim { transition: none; }

.in-slide { position: absolute; }
.in-hero { left: 0; top: 0; width: 1572px; height: 1012px; }

.in-card {
  top: 149px;
  width: 1338px;
  height: 835px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
}

/* neighbours are empty frosted shells; content only on the current one */
.in-slide > * { opacity: 1; transition: opacity 0.25s ease; }
.chapter-container .in-slide:not(.is-cur) > * { opacity: 0 !important; transition-delay: 0.3s; }

/* --- section card internals (design pixels, card-relative) --- */
.in-card h2 { position: absolute; margin: 0; font-size: 52px; font-weight: 400; line-height: 1.15; color: #45454d; }
.in-card .body { position: absolute; margin: 0; font-size: 24px; line-height: 1.3; color: #46464f; }

.chc-stack { position: absolute; display: flex; flex-direction: column; gap: 19px; }

.chc-bubble {
  --ico-d: 51px; --ico-l: 7px;
  display: flex; align-items: center; gap: 11px;
  border-radius: 999px;
  padding: 7px 19px 7px 7px; min-height: 66px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.chc-bubble .ico { flex-shrink: 0; width: var(--ico-d); height: var(--ico-d); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2c2c33; box-shadow: var(--cut-shadow); }
.chc-bubble .ico:empty { display: none; }
.chc-bubble .ico svg { width: 24px; height: 24px; }
.chc-bubble .txt { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }
.chc-bubble .txt strong { font-size: 18px; font-weight: 600; color: #45454d; }
.chc-bubble .txt span { font-size: 14px; color: #62626c; }
.chc-bubble .txt span:empty { display: none; }

/* ---- boolean cutout: the icon circle is a HOLE punched through the pill ----
   The pill's fill lives on a ::before layer that is masked with a transparent
   disc at the icon's position, so the card behind shows through the cut. The
   .ico carries no fill of its own — only --cut-shadow, which gives the hole its
   depth. Pills with no icon (e.g. the --hl summary pill) keep a solid fill.
   --ico-d / --ico-l are set per pill variant so the hole tracks the icon. */
.chc-bubble, .chc-step, .cut-pill { position: relative; isolation: isolate; background: none; }
.chc-bubble::before, .chc-step::before, .cut-pill::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--pill-fill, var(--glass-bg));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.cut-pill { --pill-fill: #fff; }
.chc-bubble:has(.ico:not(:empty))::before,
.chc-step:has(.ico:not(:empty))::before,
.cut-pill:has(.ico:not(:empty))::before {
  -webkit-mask-image: radial-gradient(circle at calc(var(--ico-l) + var(--ico-d) / 2) 50%,
    transparent calc(var(--ico-d) / 2), #000 calc(var(--ico-d) / 2 + 0.5px));
  mask-image: radial-gradient(circle at calc(var(--ico-l) + var(--ico-d) / 2) 50%,
    transparent calc(var(--ico-d) / 2), #000 calc(var(--ico-d) / 2 + 0.5px));
}

.chc-stack--tight { gap: 11px; }
.chc-stack--tight .chc-bubble { min-height: 58px; padding: 6px 17px 6px 7px; --ico-d: 46px; }
.chc-stack--tight .chc-bubble .ico { width: 46px; height: 46px; }
.chc-stack--tight .chc-bubble .ico svg { width: 24px; height: 24px; }
.chc-stack--tight .chc-bubble .txt strong { font-size: 16.5px; }
.chc-stack--tight .chc-bubble .txt span { font-size: 13px; }

.chc-prod {
  position: absolute; width: 276px; height: 291px; margin: 0;
  background: var(--glass-bg); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 18px; text-align: center;
}
.chc-prod img { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: auto; }
.chc-prod figcaption { font-size: 17px; color: #62626c; }
.chc-prod figcaption strong { display: block; font-size: 20px; font-weight: 700; color: #45454d; }

.chc-steps { position: absolute; display: flex; flex-direction: column; gap: 11px; }
.chc-step {
  /* --ico-l MUST match the rendered padding-left (16px, set below at the
     "translucent frost" override) so the punched hole lines up with the icon */
  --ico-d: 44px; --ico-l: 16px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 999px; min-height: 56px;
  padding: 6px 34px 6px 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.chc-step .ico { flex-shrink: 0; width: var(--ico-d); height: var(--ico-d); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #2c2c33; box-shadow: var(--cut-shadow); }
.chc-step .ico svg { width: 22px; height: 22px; }
.chc-step .txt { display: flex; flex-direction: column; }
.chc-step .txt strong { font-size: 18px; font-weight: 600; color: #45454d; }
.chc-step .txt span { font-size: 13.5px; color: #62626c; white-space: nowrap; }
.chc-step--hl { --pill-fill: #d9eefc; padding-left: 28px; }
/* forge §2 KEY FEATURES: more compact pills so the label reads larger relative to the pill */
.chc-steps--tight .chc-step { min-height: 44px; padding: 4px 22px 4px 22px; --ico-l: 22px; }
.chc-steps--tight .chc-step .txt strong { font-size: 19px; }

.chc-media {
  position: absolute; background: var(--glass-bg); border-radius: 24px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.chc-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.chc-media--bare { background: transparent; box-shadow: none; overflow: visible; }
.chc-media--bare img { max-width: none; max-height: none; }
.chc-media video { width: 100%; height: 100%; object-fit: cover; }

/* the hidden-installation illustration floats on the frost: crop the
   baked shadow and blend its white paper away */
/* hidden installation: no panel — the illustration fills the box exactly */
.chc-media--illu { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 20px; padding: 0; overflow: hidden; }
.chc-media--illu img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
/* line-art network diagram: the PNG now has a genuinely transparent background
   (white keyed to alpha), so it floats on the glass with no blend hack. Multiply
   was the old approach and it FAILED here — multiply only erases white against a
   dark backdrop, but this sits on a near-white frosted panel, so the white box
   survived. Do NOT reintroduce mix-blend-mode on this image. */

.chc-mini {
  position: absolute; background: var(--glass-bg); border-radius: 20px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.chc-mini h4 { margin: 0; font-size: 20px; font-weight: 500; color: #45454d; line-height: 1.3; }
.chc-mini > img { align-self: center; margin-top: auto; margin-bottom: auto; }
.chc-mini--row { flex-direction: row; align-items: center; justify-content: space-between; }
.dots2 { display: flex; gap: 10px; margin-top: 16px; }
.dots2 i { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.14); }

.chc-antpanel h4 { font-size: 22px; }
.ant-row { display: flex; gap: 13px; width: 100%; }
.ant-row figure { margin: 0; flex: 1; background: #fff; border: 1px solid #ececf1; border-radius: 14px; padding: 12px; height: 132px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.ant-row img { align-self: center; height: 62px !important; }
.ant-row figcaption { font-size: 14px; color: #46464f; line-height: 1.25; }

/* --- education / multi / transport container components --- */
.chc-grid2 {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 18px;
}

.chc-bubble .txt .on { color: #18a957; font-weight: 500; }
.chc-grid2 .chc-bubble .txt span { font-size: 15px; white-space: nowrap; }

/* diagram exports with baked white bg dissolve into the frost */
.chc-media--blend { background: transparent; box-shadow: none; }
.chc-media--blend img { max-width: none; max-height: none; mix-blend-mode: multiply; }

.chc-mini--tier { flex-direction: row; justify-content: space-between; align-items: center; padding: 24px 40px; }
.chc-mini--tier h4 { font-size: 26px; }
.chc-mini--tier p { margin: 8px 0 0; font-size: 16px; color: #62626c; }
.tier-prods { display: flex; gap: 30px; align-items: flex-end; }
.tier-prods img { width: auto; }

.cap2 { position: absolute; font-size: 18px; font-weight: 600; letter-spacing: 3px; color: #45454d; }

/* --- sports / corporate / legal container components --- */
.chc-bubble--hl { --pill-fill: #d9eefc; }


.chc-stack--snug { gap: 9px; }
.chc-stack--snug .chc-bubble { min-height: 64px; padding: 6px 18px 6px 7px; --ico-d: 50px; }
.chc-stack--snug .chc-bubble .ico { width: 50px; height: 50px; }
.chc-stack--snug .chc-bubble .ico svg { width: 24px; height: 24px; }
.chc-stack--snug .chc-bubble .txt strong { font-size: 18px; }
.chc-stack--snug .chc-bubble .txt span { font-size: 14px; }

/* sports §1 — stream flow cards */
.chc-scard {
  position: absolute; background: none; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  padding: 18px 15px; display: flex; flex-direction: column; gap: 10px;
}
.chc-scard .sc-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; color: #45454d; margin-bottom: 2px; }
.chc-scard .sc-head .i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #f0f1f5; display: flex; align-items: center; justify-content: center; color: #2c2c33; }
.chc-spill {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #ececf1; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  padding: 8px 14px; font-size: 15px; color: #2c2c33; white-space: nowrap;
}
.chc-spill .i { display: flex; color: #2c2c33; }
.chc-spill.hl { background: #d9eefc; border-color: transparent; }
.chc-fnode {
  position: absolute; z-index: 2; background: var(--glass-bg); border-radius: 22px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
  display: flex; align-items: center; justify-content: center; gap: 26px; padding: 20px;
}
.chc-fnode figure {
  margin: 0; text-align: center;
  display: grid; grid-template-rows: 4.2em 170px 4.2em;
  align-items: center; justify-items: center;
}
.chc-fnode figure img { grid-row: 2; }
.chc-fnode figure figcaption { grid-row: 3; align-self: start; margin-top: 10px; }
.chc-fnode img { width: auto; }
.chc-fnode figcaption { font-size: 15px; color: #62626c; line-height: 1.3; max-width: 175px; }
.chc-fnode figcaption strong { display: block; font-size: 18px; font-weight: 700; color: #45454d; }

/* sports §2 — antenna options panel, lead beside the cards */
.chc-antpanel--side { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.chc-antpanel--side .ant-row { width: auto; flex-shrink: 0; }
.chc-antpanel--side .ant-row figure { flex: none; width: 172px; height: 158px; }
.chc-antpanel--side .ant-row img { height: 80px !important; }

/* sports §3 — wide text + illustration cards */
.chc-illus2 {
  position: absolute; background: #fff; border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  display: flex; align-items: stretch; overflow: hidden;
}
.chc-illus2 .txt { flex: 0 0 252px; padding: 30px 6px 28px 30px; align-self: center; }
.chc-illus2 h4 { margin: 0 0 16px; font-size: 19px; font-weight: 700; color: #45454d; line-height: 1.35; }
.chc-illus2 p { margin: 0; font-size: 16px; color: #46464f; line-height: 1.4; }
.chc-illus2 > img { flex: 1; min-width: 0; object-fit: cover; }

/* corporate / legal §1 — integration option columns */
/* integration columns: full 40% back panel; title text on it; a smaller 40%
   front panel below the title holds the products (does not cover the title) */
/* each integration card = TWO equal-width glass panels stacked (title panel + products
   panel); the column itself is just a transparent container */
.chc-col {
  position: absolute; background: transparent;
  display: flex; flex-direction: column; gap: 0;
}
/* the rear (title) sheet spans the FULL column - top unchanged, bottom flush
   with the front panel's bottom; drawn as a backdrop so the front panel and
   the column geometry stay untouched */
.chc-col::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}
.chc-col .col-head {
  text-align: center; padding: 20px 12px 44px; margin-bottom: -28px; border-radius: 18px;
  position: relative;
  background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.chc-col .col-head h4 { margin: 0; font-size: 27px; font-weight: 600; color: #45454d; }
.chc-col .col-head p { margin: 6px 0 0; font-size: 15px; color: #62626c; }
.chc-col .col-panel {
  flex: 1; min-height: 0; margin: 0; border-radius: 18px; z-index: 1;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 18px 10px;
}
.chc-col .col-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url('../images/contour-wide-50.png') center / cover no-repeat; opacity: 0.3;
}
.chc-col .col-panel figure { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
/* width AND height auto so the image scales uniformly to fit BOTH the inline
   max-height and this max-width — otherwise a forced height + clamped width
   squishes the wide (900px-native) product renders */
.chc-col .col-panel img { width: auto; height: auto; max-width: 96%; }
.chc-col .col-panel figcaption { font-size: 13px; color: #62626c; line-height: 1.3; }
.chc-col .col-panel figcaption strong { display: block; font-size: 16px; font-weight: 700; color: #45454d; }

/* corporate / legal §2 — product + info cards */
.chc-pcard {
  position: absolute; background: var(--glass-bg); border-radius: 22px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.chc-pcard h4 { margin: 0; font-size: 25px; font-weight: 600; color: #45454d; line-height: 1.25; flex-shrink: 0; }
.chc-pcard .imgs { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; }
.chc-pcard img { width: auto; }
.chc-icard {
  position: absolute; background: none; border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  padding: 26px 30px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
}
.chc-icard .chc-icirc { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: #f0f1f5; display: flex; align-items: center; justify-content: center; color: #2c2c33; align-self: flex-start; }
.chc-icard h4 { margin: 0; font-size: 19px; font-weight: 600; color: #45454d; }
.chc-icard p { margin: 0; font-size: 15.5px; color: #46464f; line-height: 1.4; }
.chc-icard .chip-col { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.chc-icard .chip-col span { background: #fff; border: 1px solid #ececf1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); border-radius: 999px; padding: 9px 20px; font-size: 15px; color: #46464f; white-space: nowrap; }
.chc-icard .api { margin-top: 2px; }
.chc-icard .api strong { font-weight: 700; color: #45454d; }

/* --- new home: bright container with 3×3 grid --- */
.home-frame .chf-bg { object-position: center bottom; }

.hf-logo { position: absolute; top: 185px; left: 120px; z-index: 2; color: #45454d; }
.hf-logo svg { height: 70px; width: auto; display: block; }

.hf-title {
  position: absolute;
  left: 120px;
  top: 335px;
  margin: 0;
  font-size: 55px;
  font-weight: 400;
  line-height: 1.16;
  color: #45454d;
}

.hf-sub {
  position: absolute;
  left: 120px;
  top: 600px;
  width: 300px;
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  color: #4d4d4d;
}

.hf-grid {
  position: absolute;
  left: 718px;
  top: 105px;
  display: grid;
  grid-template-columns: repeat(3, 267px);
  grid-auto-rows: 250px;
  gap: 30px 15px;
}

.hf-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hf-card:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18); }

.hf-card .ph { display: block; height: 185px; overflow: hidden; position: relative; }
.hf-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.hf-card .ph .tb {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.hf-card .ph .tb svg { width: 21px; height: 21px; }

.hf-card .tx { flex: 1; display: flex; align-items: center; gap: 13px; padding: 0 14px; }
.hf-card .tx .num {
  flex-shrink: 0;
  width: 45px; height: 49px;
  border-radius: 10px;
  background: #cfeaf8;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; color: #45454d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.hf-card .tx strong { font-size: 15px; font-weight: 600; color: #45454d; line-height: 1.25; }

/* --- hero panels --- */
.chc-panel {
  position: absolute;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.chc-hero-panel { left: 24px; top: 149px; width: 617px; height: 835px; padding: 42px 40px; color: #45454d; }
.chc-hero-panel h1 { margin: 0; font-size: 62px; font-weight: 400; line-height: 1.28; }
.chc-hero-panel .sub { margin: 26px 0 0; font-size: 24px; line-height: 1.45; color: #4d4d4d; max-width: 505px; }
.chc-hero-panel .cap { margin: 38px 0 14px; font-size: 18px; font-weight: 600; letter-spacing: 3px; color: #45454d; }

.chc-chips { display: flex; flex-wrap: wrap; gap: 11px; max-width: 380px; }
.chc-chips--col { flex-direction: column; align-items: flex-start; max-width: none; }
.chip3 { background: #fff; border-radius: 999px; padding: 7px 20px; font-size: 17px; color: #46464f; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); white-space: nowrap; }

.chc-deploy { left: 1098px; top: auto; bottom: 28px; width: 447px; height: auto; padding: 40px 48px; }
.chc-deploy .x-label { padding: 0 0 20px; font-size: 18px; font-weight: 600; letter-spacing: 2.5px; color: #45454d; text-transform: uppercase; }
.d-row {
  display: grid; grid-template-columns: 50px 1fr 24px; align-items: center; gap: 19px;
  width: 350px; height: 53px; background: #e9f4fb; border-radius: 14px; margin-bottom: 13px;
  text-align: left;
  transition: transform 0.2s ease;
}
.d-row:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.d-row .num {
  width: 50px; height: 53px; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 400; color: #45454d;
}
.d-row .lbl { font-size: 24px; font-weight: 400; color: #5b6470; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-row .arr { color: #45454d; display: flex; }
.d-row .arr svg { width: 17px; height: 17px; }

/* chapters with long section names: rows span more of the panel and the
   label scales down (inline) so the full text stays readable */
.chc-deploy--wide { padding: 48px 26px 48px 30px; }
.chc-deploy--wide .d-row { width: 391px; }

/* --- chapter chrome (inside the frame, scales with it) --- */
.ch-bar { position: absolute; top: 53px; left: 24px; z-index: 6; display: flex; align-items: center; gap: 16px; }
.ch-home { width: 62px; height: 62px; border-radius: 50%; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); display: flex; align-items: center; justify-content: center; color: #45454d; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.ch-home svg { width: 26px; height: 26px; transition: transform 0.2s ease; }
.ch-home:hover svg { transform: scale(1.12); }
.ch-name { height: 63px; padding: 0 34px; border-radius: 999px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); font-size: 22px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: #45454d; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.ch-name:hover { color: #45454d; }
.ch-logo { position: absolute; top: 44px; right: 49px; z-index: 6; color: #fff; }
.ch-logo svg { height: 62px; width: auto; display: block; }

/* --- rail per design: small tiles inside the frame, sentence-case label --- */
.chapter-container .side-menu { position: absolute; left: 59px; top: 203px; transform: none !important; gap: 7px; z-index: 5; }
.chapter-container .side-menu .sm-it { margin-left: 0; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.chapter-container .side-menu .sm-it .n { width: 44px; height: 48px; font-size: 24px; font-weight: 400; border-radius: 10px; }
.chapter-container .side-menu .sm-it.is-on { margin: 0; border-radius: 10px; }
.chapter-container .side-menu .sm-it.is-on .n { width: 44px; height: 48px; font-size: 24px; border-radius: 10px; background: #bfe3f4; }
.chapter-container .side-menu .sm-it .l { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.chapter-container .side-menu .sm-it .l em { text-transform: none; letter-spacing: 0; font-size: 21px; font-weight: 400; color: #3a3a45; padding: 0 26px 0 20px; }
.chapter-container .side-menu.is-hero { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }

/* --- arrows at the container's bottom corners --- */
.chf-arrow { position: absolute; top: calc(50% + 76px); z-index: 6; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); transition: opacity 0.25s ease; }
.chf-arrow svg { width: 22px; height: 30px; transition: transform 0.2s ease; }
.chf-arrow--prev { left: 60px; }
.chf-arrow--prev svg { transform: rotate(180deg); }
.chf-arrow--next { right: 48px; }
.chf-arrow:hover svg { transform: scale(1.2); }
.chf-arrow--prev:hover svg { transform: rotate(180deg) scale(1.2); }
.chf-arrow.on-hero { opacity: 0; pointer-events: none; }

/* ---------------- chrome: arrows, dots, home ---------------- */
.h-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: opacity 0.25s ease;
}

.h-arrow--prev { left: 28px; }
.h-arrow--next { right: 28px; }
.h-arrow svg { width: 26px; height: 26px; transition: transform 0.2s ease; }
.h-arrow--prev svg { transform: rotate(180deg); }

.h-arrow:hover svg { transform: scale(1.18); }
.h-arrow--prev:hover svg { transform: rotate(180deg) scale(1.18); }

.h-arrow.is-hidden { opacity: 0; pointer-events: none; }

/* Section context menu — visible on every slide. Idle items are number
   circles; the active (and hovered) item expands to show its label via
   the 0fr→1fr grid trick, so no JS measurement is needed. */
.sec-menu {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.sm-it {
  display: flex;
  align-items: center;
  border-radius: 999px;
  color: var(--muted);
  transition: background 0.25s ease;
}

.sm-it .n {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.06);
  transition: background 0.25s ease, color 0.25s ease;
}

.sm-it .n svg { width: 16px; height: 16px; }

.sm-it .l {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.35s ease-in-out;
}

.sm-it .l em {
  font-style: normal;
  display: block;
  padding: 0 13px 0 9px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
}

.sm-it:hover { background: rgba(0, 0, 0, 0.05); }
.sm-it:hover .l, .sm-it.is-on .l { max-width: 220px; }
.sm-it.is-on { background: var(--tile); }
.sm-it.is-on .n { background: var(--purple); color: #fff; }

/* ---------------- EXPERIMENT: left side menu ----------------
   Vertical rail fused with the title pill, overlaid on the card's
   top-left corner (JS positions + scales it with the card). The active
   item is the full title pill; others collapse to numbered tiles.
   The bottom .sec-menu styles above are kept dormant for easy revert. */
.side-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* glides between the hero card's and the taller section slides' tops */
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.25, 1);
}

.side-menu.no-anim { transition: none; }

.side-menu .sm-it {
  display: flex;
  align-items: stretch;
  /* the frosted drawer lives on the whole pill so it stretches from the number's
     left edge across the label; 10px rounded on every corner */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  /* collapsed tiles live OUTSIDE the card, left-aligned with the pill */
  margin-left: -56px;
}

.side-menu .sm-it .n {
  flex-shrink: 0;
  width: 48px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  background: #fff;
  border-radius: 14px;
  transition: background 0.25s ease;
}

.side-menu .sm-it .n svg { width: 20px; height: 20px; color: #47474c; }

.side-menu .sm-it .l {
  max-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: max-width 0.35s ease-in-out;
}

.side-menu .sm-it .l em {
  font-style: normal;
  white-space: nowrap;
  padding: 0 34px 0 24px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a5a;
}

.side-menu .sm-it:hover .l,
.side-menu .sm-it.is-on .l { max-width: 460px; }

/* the active item rides at the top of the rail — it IS the title pill,
   its number tile straddling the card's edge, label bridging inside */
.side-menu .sm-it.is-on {
  order: -1;
  margin-left: -58px;
  margin-bottom: 14px;
  border-radius: 18px;
  box-shadow: 0 9px 30px rgba(0, 0, 0, 0.12);
}

/* on the hero slide the explore panel covers navigation, so the rail
   collapses to just the Overview pill (also avoids the chapter-name pill) */
.side-menu .sm-it { transition: opacity 0.25s ease; }
.side-menu.is-hero .sm-it:not(.is-on) { opacity: 0; pointer-events: none; }
.side-menu .sm-it.is-on .n {
  width: 78px;
  height: 86px;
  font-size: 44px;
  border-radius: 18px;
  background: var(--tile);
}
.side-menu .sm-it.is-on .n svg { color: var(--purple); }

/* Bettear logo — fixed page chrome on section pages, ~80px from the
   screen's top-left. JS tucks it away when the window is too narrow
   for it to clear the card. */
.page-logo {
  position: fixed;
  top: 80px;
  left: 80px;
  z-index: 40;
  color: var(--ink);
  display: block;
  transition: opacity 0.25s ease;
}

.page-logo svg { height: 44px; width: auto; display: block; }
.page-logo.is-tucked { opacity: 0; pointer-events: none; }

.home-btn {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 40;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.home-btn svg { width: 24px; height: 24px; transition: transform 0.2s ease; }
.home-btn:hover svg { transform: scale(1.15); }

/* ---------------- neon click pulse ----------------
   Presenter feedback: every click on an interactive element fires a
   neon-green ring at the pointer, so the audience sees what was pressed. */
.click-pulse {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(57, 255, 20, 0.85);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.85);
  transform: translate(-50%, -50%) scale(0.6);
  animation: pulse-out 0.45s ease-out forwards;
}

@keyframes pulse-out {
  from { opacity: 0.95; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

@media (prefers-reduced-motion: reduce) {
  .click-pulse { display: none; }
}

/* ---------------- cross-page slide transition ---------------- */
@view-transition { navigation: auto; }

.page-shell { view-transition-name: shell; }
.h-arrow--next { view-transition-name: hnext; }
.h-arrow--prev { view-transition-name: hprev; }
.home-btn { view-transition-name: hhome; }
.sec-menu { view-transition-name: hmenu; }
.side-menu { view-transition-name: hmenu; }
.page-logo { view-transition-name: plogo; }

@keyframes vt-out-left { to { transform: translateX(-100vw); } }
@keyframes vt-in-right { from { transform: translateX(100vw); } }
@keyframes vt-out-right { to { transform: translateX(100vw); } }
@keyframes vt-in-left { from { transform: translateX(-100vw); } }

html[data-nav="fwd"]::view-transition-old(shell) { animation: vt-out-left 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
html[data-nav="fwd"]::view-transition-new(shell) { animation: vt-in-right 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
html[data-nav="back"]::view-transition-old(shell) { animation: vt-out-right 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
html[data-nav="back"]::view-transition-new(shell) { animation: vt-in-left 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }

::view-transition-old(hnext), ::view-transition-new(hnext),
::view-transition-old(hprev), ::view-transition-new(hprev),
::view-transition-old(hhome), ::view-transition-new(hhome),
::view-transition-old(hmenu), ::view-transition-new(hmenu) {
  animation-duration: 0.25s;
}

/* fallback slide for browsers without cross-document view transitions:
   the outgoing shell animates before navigation, the incoming one after */
html.no-xvt[data-out="fwd"] .page-shell { animation: vt-out-left 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
html.no-xvt[data-out="back"] .page-shell { animation: vt-out-right 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
html.no-xvt[data-nav="fwd"]:not([data-out]) .page-shell { animation: vt-in-right 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }
html.no-xvt[data-nav="back"]:not([data-out]) .page-shell { animation: vt-in-left 0.55s cubic-bezier(0.22, 0.61, 0.25, 1) both; }

@media (prefers-reduced-motion: reduce) {
  html.no-xvt .page-shell { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .deck { transition: none; }
  .sm-it, .sm-it .l, .sm-it .n { transition: none; }
  ::view-transition-old(shell), ::view-transition-new(shell),
  ::view-transition-old(hnext), ::view-transition-new(hnext),
  ::view-transition-old(hprev), ::view-transition-new(hprev),
  ::view-transition-old(hhome), ::view-transition-new(hhome),
  ::view-transition-old(hmenu), ::view-transition-new(hmenu) { animation: none; }
}

/* --- interaction language: hover = expand, click = green (wave 4) --- */
.d-row, .sm-it, .chf-arrow, .ch-home, .ch-name, .home-btn, .h-arrow, .chc-deploy .d-row { transition: transform 0.18s ease; }
.chf-arrow:hover, .ch-home:hover, .home-btn:hover, .h-arrow:hover { transform: scale(1.14); }
.ch-name:hover { transform: scale(1.05); }
.chapter-container .side-menu .sm-it:hover { transform: scale(1.08); }
.hf-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.20); }
.d-row:active .lbl, .d-row:active .num,
.ch-name:active, .sm-it:active .n, .sm-it:active .l em,
.hf-card:active .tx strong, .hf-card:active .tx .num,
.x-row:active .txt, .x-row:active .num { color: #24c53d; }
.chf-arrow:active, .ch-home:active, .home-btn:active, .h-arrow:active { color: #24c53d; }

/* --- home: frosted veil behind the scenario grid --- */
/* home scene is mirrored so the group sits behind the headline, leaving the
   clean end of the gallery behind the cards (no veil needed there) */
.home-frame .chf-bg { transform: scaleX(-1); }

/* blur the text column so the headline + sub stay readable over the group;
   fades out to the right so there is no visible edge before the cards */

/* --- multi/transport: composed language diagram (flags + products) --- */
.chc-diag { position: absolute; }
.chc-diag .strip {
  position: absolute; left: 0; right: 0; top: 178px; height: 136px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.chc-diag .col { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chc-diag .col img { width: auto; position: relative; }
.chc-diag .dcap { text-align: center; font-size: 19px; color: #45454d; line-height: 1.3; }
.chc-diag .dcap strong { display: block; font-size: 24px; font-weight: 700; }
.chc-diag .dcap .dante { height: 31px; width: auto; margin: 8px auto 0; }
.chc-diag--below .col { flex-direction: column-reverse; }
.chc-flags {
  position: absolute; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 14px; width: 300px;
}
.chc-flags span {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 999px; padding: 10px 19px;
  font-size: 21px; font-weight: 600; color: #45454d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.chc-flags span i { font-style: normal; font-size: 24px; line-height: 1; }

/* --- transport: white panel with caption column + media --- */
.chc-duo {
  position: absolute; border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
  display: grid; grid-template-columns: 225px 1fr;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
/* min-height:0 lets the grid items shrink so the illustration scales to fit */
.chc-duo .cap, .chc-duo .med { min-height: 0; }
.chc-duo .cap { padding: 30px 6px 26px 28px; display: flex; flex-direction: column; gap: 22px; justify-content: center; align-items: flex-start; }
.chc-duo .cap p { margin: 0; font-size: 16px; color: #45454d; line-height: 1.45; }
.chc-duo .cap .up { text-transform: uppercase; letter-spacing: 1px; font-size: 15px; color: #5b6470; }
.chc-duo .cap .ant { height: 130px; width: auto; align-self: center; }
.chc-duo .med { display: flex; align-items: center; justify-content: center; padding: 14px; min-width: 0; }
.chc-duo .med img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- multi §2: render view labels --- */
.chc-vlabel { position: absolute; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 3px; color: #45454d; }

/* --- museums: photo cards + old-vs-new panels --- */
.chc-photo {
  position: absolute; margin: 0; background: #fff; border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  overflow: hidden; display: flex; flex-direction: column;
}
.chc-photo img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.chc-photo figcaption { padding: 18px 24px; font-size: 20px; font-weight: 600; color: #45454d; }
.chc-vs {
  position: absolute; background: #fff; border-radius: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  padding: 26px 30px; display: flex; flex-direction: column; gap: 13px; align-items: flex-start;
}
.chc-vs h4 { margin: 0 0 4px; font-size: 21px; font-weight: 600; color: #45454d; }
.chc-vs span { border-radius: 999px; padding: 9px 20px; font-size: 15px; color: #3c3c44; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); white-space: nowrap; }
.chc-vs--new span { background: #deffb6; }
.chc-vs--old span { background: #ffbfb6; }

/* --- closing notes restored from the vertical content --- */
.chc-note { position: absolute; margin: 0; font-size: 16px; line-height: 1.45; color: #6b6b75; }
.chc-note--sm { font-size: 16px; text-align: center; }

/* ============================================================
   POLISH BATCH (wave 6): frosted translucent white boxes,
   translucent section-title pills, pill text spacing, new
   diagram / museum / home component styles.
   ============================================================ */

/* --- frosted translucent white content boxes (~70% + blur) ---
   .chc-bubble / .chc-step / .chc-mode / .chc-icard / .chc-scard are deliberately
   NOT in this list: their fill lives on the masked ::before layer that punches
   the icon cutout, so a background/backdrop-filter here would paint over the
   hole (and blur through it). */
.chc-mini, .chc-spill,
.chc-fnode, .chc-pcard, .chip3, .ant-row figure,
.chc-flags span, .chc-icard .chip-col span, .chc-tourcard {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
/* restore highlight fills over the frosted base (placed after → wins) */
.chc-step--hl { --pill-fill: rgba(217, 238, 252, 0.88); }
.chc-bubble--hl { --pill-fill: rgba(217, 238, 252, 0.88); }
.chc-spill.hl { background: rgba(217, 238, 252, 0.88); }

/* --- translucent + blur section-title (rail) pills all over the site --- */
.chapter-container .side-menu .sm-it .n {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.chapter-container .side-menu .sm-it.is-on .n { background: rgba(191, 227, 244, 0.9); }
.chapter-container .side-menu .sm-it .l { background: transparent; }

/* --- more space between the start of a pill and its text --- */
.chc-bubble .txt { padding-left: 14px; }
.chc-step { padding-left: 16px; }
.chc-step .txt { padding-left: 12px; }
.chc-spill { padding-left: 18px; }


/* --- multi/transport language diagram: aligned captions + products ---
   strip is centred on the product row (dcap 88 + dprod 180 -> centre 178)
   so the products sit ON it and the captions stay above it */
.chc-diag .strip {
  position: absolute; left: 0; right: 0; top: 178px; height: 100px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.58); border-radius: 999px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.chc-diag .dcol { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.chc-diag .dcap { text-align: center; font-size: 19px; color: #45454d; line-height: 1.3; min-height: 88px; }
.chc-diag .dcap strong { display: block; font-size: 24px; font-weight: 700; }
.chc-diag .dcap .dante { height: 31px; width: auto; margin: 8px auto 0; display: block; }
.chc-diag .dprod { height: 180px; display: flex; align-items: center; justify-content: center; }
.chc-diag .dprod img { width: auto; }

/* forge > caster > languages flow (Figma 6-148): products ride the strip,
   captions sit centred BELOW their renders, chevrons mark the signal path */
.chc-diag--flow .strip {
  top: 90px; height: 92px;
  background: rgba(224, 238, 250, 0.78);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.chc-diag .dchev { position: absolute; top: 90px; transform: translateY(-50%); z-index: 1; }

/* --- museums §1: guided / self-guided tour cards --- */
.chc-tourcard {
  position: absolute; border-radius: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
  padding: 30px 24px 24px; display: flex; flex-direction: column; align-items: center; overflow: hidden;
}
.chc-tourcard h4 { margin: 0; font-size: 32px; font-weight: 500; color: #45454d; }
.chc-tourcard .sub { margin: 4px 0 0; font-size: 17px; color: #62626c; }
.chc-tourcard ul { margin: 22px 0 24px; padding: 0; list-style: none; text-align: center; }
.chc-tourcard li { font-size: 18px; color: #46464f; line-height: 1.9; }
.chc-tourcard img { width: 100%; height: 283px; flex: none; object-fit: cover; border-radius: 16px; margin-top: auto; }

/* --- museums §2: playback-mode cards in two labelled rows --- */
.chc-modes { position: absolute; display: flex; gap: 18px; }
.chc-mode {
  width: 202px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 12px;
}
.chc-mode .ico { width: 46px; height: 46px; border-radius: 50%; background: #f0f1f5; display: flex; align-items: center; justify-content: center; color: #2c2c33; }
.chc-mode h5 { margin: 0; font-size: 21px; font-weight: 700; color: #45454d; line-height: 1.2; }
.chc-mode p { margin: 0; font-size: 15px; color: #62626c; line-height: 1.4; }

/* --- home: big translate mark on the Multi Stream Event card --- */
.hf-card .ph .tb--big {
  top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
  width: 84px; height: 84px; background: rgba(255, 255, 255, 0.92);
}
.hf-card .ph .tb--big svg { width: 46px; height: 46px; }

/* ============================================================
   WAVE 7 — layered 60% cards, blue waves 30%, transport pills,
   sports z-order + 2-col feature grid, diagram alignment, home icon
   ============================================================ */

/* home icon nudged up ~4px (optical) */
.ch-home svg { transform: translateY(-4px); }
.ch-home:hover svg { transform: translateY(-4px) scale(1.12); }

/* integration option columns: two 60% squares, one behind the other */

/* transport §1: the two run/coverage texts as pills (same spot) */
.chc-duo .cap .dpill {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  padding: 16px 22px; font-size: 17px; color: #45454d; line-height: 1.35;
}

/* sports §1: CASTER/FORGE node sits BEHIND the two side cards; all frosted */
.chc-fnode { z-index: 1; }
.chc-scard { z-index: 2; }
/* feature pills in a lifted 2-column grid so they clear the container floor */
.chc-grid2--feat { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 16px; }
.chc-grid2--feat .chc-bubble { min-height: 58px; padding: 6px 16px 6px 7px; }
.chc-grid2--feat .chc-bubble .ico { width: 46px; height: 46px; }
.chc-grid2--feat .chc-bubble .ico svg { width: 22px; height: 22px; }
.chc-grid2--feat .chc-bubble .txt strong { font-size: 16.5px; }
.chc-grid2--feat .chc-bubble .txt span { font-size: 13px; white-space: normal; }

/* language diagram: flags centred on the white strip (aligned with products) */
.chc-diag .chc-flags { top: 178px !important; transform: translateY(-50%) !important; }
.chc-diag--flow .chc-flags { top: 90px !important; }

/* ============================================================
   Museums §5 — "Old way vs. the Bettear way"  (Figma frame 4:64)
   ============================================================ */
.bw-card {
  position: absolute; border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
}
/* Traditional card: squared top-right so the control-chain box abuts it seamlessly,
   making the two read as one continuous glass shape (Figma "div.Timestamp" union) */
.bw-card--trad { border-top-right-radius: 0; }
/* CONTROL ROOM / AUDIENCE AREA panes — translucent glass, matching the Figma
   "div.Timestamp" reference (same frosted material as the rest of the site) */
.bw-pane { position: absolute; border-radius: 20px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.bw-head {
  position: absolute; z-index: 3; border-radius: 999px; padding: 9px 24px;
  font-size: 25px; font-weight: 400; color: #45454d;
}
.bw-head--blue { background: #dceffb; }
.bw-head--white { background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); }
.bw-lab {
  position: absolute; z-index: 2; font-size: 17px; letter-spacing: 0.6px;
  line-height: 1.35; color: #55555e; text-transform: uppercase;
}
.bw-ico { position: absolute; z-index: 2; color: #2a2a30; }
.bw-l { position: absolute; width: 1.4px; background: #3a3a42; z-index: 0; }
.bw-bus { position: absolute; height: 1.4px; background: #3a3a42; z-index: 0; }

/* control chain panel: sits directly on the Traditional card's squared top-right,
   rounded only on top so the two form one continuous glass shape */
.bw-chain {
  position: absolute; border-radius: 20px 20px 0 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.bw-node {
  position: absolute; z-index: 2; text-align: center;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; box-shadow: 0 3px 11px rgba(0, 0, 0, 0.14);
  padding: 8px 0; font-size: 17px; color: #3a3a42; white-space: nowrap;
}

/* vertical transmitter / antenna capsules: rotated label + upright number */
.bw-vpill {
  position: absolute; z-index: 2; width: 26px;
  background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  padding: 11px 0 9px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 12px; color: #3a3a42;
}
.bw-vpill .t { writing-mode: vertical-rl; white-space: nowrap; letter-spacing: 0.2px; }
.bw-vpill .n { writing-mode: horizontal-tb; font-size: 13px; }

/* outcome banners */
.bw-banner { position: absolute; z-index: 4; border-radius: 14px; padding: 0 22px; display: flex; align-items: center; }
.bw-banner ul { margin: 0; padding: 0; list-style: none; }
.bw-banner li { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.6; white-space: nowrap; }
.bw-banner .bw-dot { width: 13px; height: 13px; flex-shrink: 0; }
.bw-banner--green { background: #ddfbb0; }
.bw-banner--green li { color: #5c6f46; }
.bw-banner--red { background: #ffcfc8; }
.bw-banner--red li { color: #9c6058; }

/* provided translate icon (Google-Translate A/文), recoloured to brand purple */
.hf-card .ph .tb--big .tr-mask {
  display: block; width: 48px; height: 35px;
  background: var(--purple);
  -webkit-mask: url('../images/translate-icon.png') center / contain no-repeat;
  mask: url('../images/translate-icon.png') center / contain no-repeat;
}

/* deploy panel auto-height: kill trailing margin so it hugs the last row */
.chc-deploy .d-row:last-child { margin-bottom: 0; }

/* iMac shots sit on their own frosted panel: 70% white + blur, 20px, drop shadow */
/* product-media panels are their OWN distinct glass panel at the general 50%; nested
   inside the section card they correctly stack to >50% — that stacking is intended */
.chc-media--imac {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
  overflow: hidden; padding: 26px;
}
.chc-media--imac img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* forge / sound-card renders: clean frosted panel, image sits large */
.chc-media--fpanel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  overflow: hidden; padding: 0;
}
.chc-media--fpanel img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* soundcard illustration fills its panel edge-to-edge (image === container, no padding) */
.chc-media--fill img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* home: soft blur just behind the headline + subtitle (feathered so no hard edge) */

/* home: glass panel behind logo + headline + subtitle (Figma "Glass": 40% + heavy frost) */
.hf-panel {
  position: absolute; left: 62px; top: 115px; width: 428px; height: 793px;
  border-radius: 28px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none; z-index: 0;
}

/* cultural §4 / sports §2: antenna sub-cards match the panels' 40% frost */
.ant-row figure { background: var(--glass-bg); border-color: rgba(255, 255, 255, 0.5); }

/* extend the 40% frost to the museum mode cards + secure-broadcast chips */
/* .chc-mode glass fill now lives on the masked ::before (icon cutout) */
.chc-icard .chip-col span { background: var(--glass-bg); border-color: rgba(255, 255, 255, 0.5); }

/* ============================================================
   Hover polish: gentle expand on panels/pills (subtler than
   buttons), + a slight saturation pop on the buttons themselves
   ============================================================ */
.chc-bubble, .chc-step, .chc-spill, .chip3, .chc-flags span, .chc-icard .chip-col span,
.bw-node, .bw-vpill, .chc-duo .cap .dpill,
.chc-media, .chc-mini, .chc-mode, .chc-pcard, .chc-icard, .chc-tourcard,
.chc-col, .chc-scard, .chc-fnode, .chc-photo, .chc-illus2, .bw-card,
.chc-prod, .chc-note {
  transition: transform 0.22s ease-in-out, box-shadow 0.22s ease-in-out, filter 0.22s ease;
}
/* hover = a gentle expand plus a soft shadow lift. Pills expand a touch more
   than panels (a big panel scaling by the same factor moves much further). */
.chc-bubble:hover, .chc-step:hover, .chc-spill:hover, .chip3:hover, .chc-flags span:hover,
.chc-icard .chip-col span:hover, .bw-node:hover, .bw-vpill:hover, .chc-duo .cap .dpill:hover {
  transform: scale(1.0175);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.17);
}
.chc-media:hover, .chc-mini:hover, .chc-mode:hover, .chc-pcard:hover, .chc-icard:hover,
.chc-tourcard:hover, .chc-col:hover, .chc-scard:hover, .chc-fnode:hover, .chc-photo:hover,
.chc-illus2:hover, .bw-card:hover, .chc-prod:hover, .chc-note:hover {
  transform: scale(1.0075);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.17);
}

/* buttons on hover: white / frosted objects take a light-blue tint;
   colour (photo) objects get +10% saturation. No darkening. */
.chf-arrow, .h-arrow, .d-row, .hf-card, .ch-home, .ch-name, .home-btn,
.chapter-container .side-menu .sm-it {
  transition: transform 0.18s ease, box-shadow 0.22s ease,
              background-color 0.2s ease, color 0.2s ease;
}
.chf-arrow svg, .chf-arrow svg *, .h-arrow svg, .h-arrow svg * { transition: stroke 0.2s ease, color 0.2s ease; }
/* frosted white chrome -> light-blue frost */
.ch-home:hover, .ch-name:hover, .home-btn:hover {
  background: rgba(191, 227, 244, 0.72);
}
/* rail tiles (number + expanded label) -> blue tint. Tint the white container
   itself too, otherwise its #fff shows through the number tile's rounded-corner
   notches as small white corners behind the blue pill. */
.chapter-container .side-menu .sm-it:hover,
.chapter-container .side-menu .sm-it:hover .n,
.chapter-container .side-menu .sm-it:hover .l {
  background: rgba(191, 227, 244, 0.82);
}
/* deployment rows (already pale blue) -> a touch deeper blue */
.d-row:hover { background: #d2ebf8; }
/* white chevron arrows -> blue-tinted stroke */
.chf-arrow:hover svg, .chf-arrow:hover svg *,
.h-arrow:hover svg, .h-arrow:hover svg * {
  stroke: #3fa4dd; color: #3fa4dd;
}
/* colour objects: photo cards -> +10% saturation on the image only
   (kept off any frosted text layer to avoid backdrop-filter flicker) */
.hf-card .ph img { transition: filter 0.25s ease; }
.hf-card:hover .ph img { filter: saturate(1.1); }

/* ================= VARIATION: black chapter main section (/black) =================
   Figma frame "Black Chapter Main Section" (6:19782). Scoped entirely to
   .theme-black, which only the /black pages carry — the live root site never
   sees any of this. Same markup, same content, pure CSS re-skin.

   Per Figma: the chapter's main panel, its deployment panel and the feature /
   fits chips all take the same 40% black glass at radius 20. Titles, section
   captions, chip text AND the subtitle go white; the numbered deployment rows
   deliberately STAY pale blue — the contrast against the dark panel is the
   point of the design. The frost is kept LOW (light blur) so the scene reads
   through the dark glass rather than being washed out. */
.theme-black {
  --black-glass: rgba(25, 25, 25, 0.4);
  --black-glass-shadow: 0 3.5px 26.5px rgba(0, 0, 0, 0.15);
  --black-frost: blur(8px) saturate(1.1);
}
.theme-black .chc-hero-panel,
.theme-black .chc-deploy {
  background: var(--black-glass);
  backdrop-filter: var(--black-frost);
  -webkit-backdrop-filter: var(--black-frost);
  border-radius: 20px;
  box-shadow: var(--black-glass-shadow);
  color: #fff;
}
.theme-black .chc-hero-panel h1 { color: #fff; }
.theme-black .chc-hero-panel .cap,
.theme-black .chc-deploy .x-label { color: #fff; }
/* subtitle: white (was muted in the frame; Naty wants it white on the dark panel) */
.theme-black .chc-hero-panel .sub { color: #fff; }
/* KEY FEATURES / WHERE IT FITS chips: same black glass, radius 20, white label */
.theme-black .chc-hero-panel .chip3 {
  background: var(--black-glass);
  backdrop-filter: var(--black-frost);
  -webkit-backdrop-filter: var(--black-frost);
  border-radius: 20px;
  box-shadow: var(--black-glass-shadow);
  color: #fff;
}
/* the numbered rows keep the light theme's ink: every child sets its own colour
   today, but without this they'd inherit the panel's white and any text added
   later would land white-on-pale-blue */
.theme-black .chc-deploy .d-row { color: #5b6470; }

/* ============================================================
   Icon-circle boolean cutout on the mode / info / stream cards
   (museum §2 playback modes, secure-broadcast icards, sports §1
   scards). Same technique as the pills: the card's glass fill
   lives on a masked ::before with the icon punched out, so the
   panel behind shows through the hole; the icon keeps only
   --cut-shadow for the recessed depth. Hole center + radius are
   set per card type from its padding + icon size.
   ============================================================ */
.chc-mode, .chc-icard, .chc-scard { isolation: isolate; background: none; }
.chc-mode { position: relative; }   /* icard/scard are already position:absolute */
.chc-mode::before, .chc-icard::before, .chc-scard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  -webkit-mask-image: radial-gradient(circle at var(--ico-x) var(--ico-y),
    transparent var(--ico-r), #000 calc(var(--ico-r) + 0.5px));
  mask-image: radial-gradient(circle at var(--ico-x) var(--ico-y),
    transparent var(--ico-r), #000 calc(var(--ico-r) + 0.5px));
}
.chc-mode  { --ico-x: 41px; --ico-y: 43px; --ico-r: 23px; }  /* pad 20/18, ico 46 */
.chc-icard { --ico-x: 58px; --ico-y: 54px; --ico-r: 28px; }  /* pad 26/30, icirc 56 */
.chc-scard { --ico-x: 35px; --ico-y: 38px; --ico-r: 20px; }  /* pad 18/15, .i 40 */
.chc-mode .ico, .chc-icard .chc-icirc, .chc-scard .sc-head .i {
  background: none; box-shadow: var(--cut-shadow);
}

/* ============================================================
   List card (Figma 1:767 smart dispatch / 1:787 tour builder):
   one glass card with a clipboard icon cut out of the left edge
   and a list — bullets (last item medium-weight) or title/subtitle
   pairs. Replaces the stacked step-pill lists.
   ============================================================ */
.chc-listcard {
  position: absolute; --ico-x: 65px; --ico-r: 33px;
  border-radius: 24px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.10);
  display: flex; align-items: center; gap: 22px;
  padding: 30px 44px 30px 32px;
  isolation: isolate; background: none;
}
.chc-listcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  -webkit-mask-image: radial-gradient(circle at var(--ico-x) 50%, transparent var(--ico-r), #000 calc(var(--ico-r) + 0.5px));
  mask-image: radial-gradient(circle at var(--ico-x) 50%, transparent var(--ico-r), #000 calc(var(--ico-r) + 0.5px));
}
.chc-listcard .lc-ico {
  flex: none; width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #2c2c33; box-shadow: var(--cut-shadow);
}
.chc-listcard .lc-ico svg { width: 32px; height: 32px; }
.chc-listcard .lc-list { list-style: none; margin: 0; padding: 0; flex: 1; }
/* bullets variant */
.chc-listcard .lc-list li { position: relative; padding-left: 22px; font-size: 17px; font-weight: 300; color: #1e1e1e; line-height: 1.4; }
.chc-listcard .lc-list li + li { margin-top: 4px; }
.chc-listcard .lc-list li::before { content: '\2022'; position: absolute; left: 5px; }
.chc-listcard .lc-list li.hl { font-weight: 500; }
/* title / subtitle pairs */
.chc-listcard--titled .lc-list li { padding-left: 0; margin-bottom: 13px; }
.chc-listcard--titled .lc-list li + li { margin-top: 0; }
.chc-listcard--titled .lc-list li:last-child { margin-bottom: 0; }
.chc-listcard--titled .lc-list li::before { content: none; }
.chc-listcard--titled .lc-list li strong { display: block; font-size: 17px; font-weight: 500; color: #1e1e1e; }
.chc-listcard--titled .lc-list li span { display: block; font-size: 13.5px; font-weight: 300; color: #4d4d4d; margin-top: 1px; }

/* ------- Dante-to-Auracast flow diagram (Figma 61-682 / 62-1814) ------- */
.dflow { position: relative; width: 100%; aspect-ratio: 1398 / 596; container-type: inline-size; margin-top: 0; font-family: inherit; }
.dflow-blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.dflow-tag { position: absolute; height: 5.201%; background: #fff; border: 0.179cqw solid rgba(31,162,255,0.85); box-sizing: border-box; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #1fa2ff; font-weight: 600; font-size: 1.431cqw; }
.dflow-card { position: absolute; background: #fff; border-radius: 2.146cqw; box-shadow: 0 0.715cqw 2.003cqw rgba(0,0,0,0.10); }
.dflow-card .dc-mark { position: absolute; left: 1.431cqw; top: 1.073cqw; width: 4.435cqw; height: 4.435cqw; padding: 0.930cqw; box-sizing: border-box; object-fit: contain; background: #eef0f3; border-radius: 50%; box-shadow: inset 0 0.143cqw 0.429cqw rgba(0,0,0,0.10); }
.dflow-card .dc-title { position: absolute; left: 6.795cqw; top: 2.718cqw; font-size: 1.707cqw; font-weight: 300; color: #5a5a72; line-height: 1.15; }
.dflow-card .dc-title strong { display: block; font-weight: 300; }
.dflow-card .dc-row { position: absolute; left: 2.289cqw; width: 20.959cqw; height: 3.290cqw; background: #fff; border-radius: 999px; box-shadow: 0 0.286cqw 0.858cqw rgba(0,0,0,0.10); display: flex; align-items: center; }
.dflow-card .dc-row span { margin-left: 1.931cqw; font-size: 1.073cqw; font-weight: 400; color: #000; }
.dflow-card .dc-row i { position: absolute; left: 11.445cqw; width: 8.083cqw; height: 0.858cqw; background: #f1f1f1; border-radius: 999px; overflow: hidden; }
.dflow-card .dc-row i b { position: absolute; left: 0; top: 0; bottom: 0; background: #82efa2; border-radius: 999px; }
.dflow-card .dc-row:nth-of-type(1) { top: 8.941cqw; }
.dflow-card .dc-row:nth-of-type(2) { top: 12.732cqw; }
.dflow-card .dc-row:nth-of-type(3) { top: 16.524cqw; }
.dflow-card .dc-row:nth-of-type(4) { top: 20.315cqw; }
.dflow-card .dc-row:nth-of-type(5) { top: 24.106cqw; }
.dflow-card .dc-row:nth-of-type(6) { top: 27.897cqw; }
.dflow-card .dc-row:nth-of-type(7) { top: 31.688cqw; }
.dflow-card .dc-row:nth-of-type(8) { top: 35.479cqw; }

.dflow-forge, .dflow-caster { position: absolute; text-align: center; }
.dflow-forge .pr { width: 100%; height: 3.648cqw; object-fit: cover; display: block; }
.dflow-caster .pr { width: 12.446cqw; height: 12.518cqw; object-fit: cover; display: block; margin: 0 auto; }
.dflow-forge .cap { margin-top: 4.507cqw; } .dflow-caster .cap { margin-top: 1.430cqw; } .dflow-forge .cap, .dflow-caster .cap { font-size: 1.574cqw; font-weight: 300; line-height: 1.25; color: #000; }
.dflow-forge .cap strong, .dflow-caster .cap strong { display: block; font-weight: 600; }
.dflow-forge .cap .dlogo { display: block; height: 2.861cqw; width: auto; margin: 0.572cqw auto 0; }
.dflow-arcs { position: absolute; aspect-ratio: 80 / 108; height: auto; }
.dflow-langs { position: absolute; height: 100%; }
.dflow-langs .lang { position: absolute; left: 0; width: 100%; height: 3.577cqw; background: #fff; border-radius: 999px; box-shadow: 0 0.429cqw 1.144cqw rgba(0,0,0,0.10); display: flex; align-items: center; gap: 0.644cqw; font-size: 1.707cqw; font-weight: 500; color: #000; }
.dflow-langs .lang img { width: 2.575cqw; height: 2.575cqw; margin-left: 0.572cqw; }
.dflow-note { margin-top: var(--gap-item); font-size: var(--fs-body); line-height: 1.45; max-width: 760px; }
.dflow-note strong { font-weight: 700; }


/* ------- TimeCode section (Figma 62-1538) ------- */
@font-face { font-family: 'Seven Segment'; src: url('../fonts/seven-segment.ttf') format('truetype'); font-display: swap; }
.tcode { position: relative; width: 100%; aspect-ratio: 1305 / 620; container-type: inline-size; margin-top: 0; }
.tcode .tc-row { position: absolute; width: 42.912cqw; height: 3.525cqw; background: #eaf9ff; border: 0.2px solid rgba(9, 90, 158, 0.55); border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; gap: 1.226cqw; padding-right: 1.686cqw; }
.tcode .tc-row span { font-size: 1.379cqw; font-weight: 400; color: #000; }
.tcode .tc-row b { font-family: 'Seven Segment', 'Courier New', monospace; font-weight: 400; font-size: 1.840cqw; color: #068fff; }
.tcode .tc-caster { position: absolute; height: auto; }
.tcode .tc-title { position: absolute; font-size: 1.829cqw; font-weight: 300; color: #5a5a72; line-height: 1.25; }
.tcode .tc-title strong { display: block; font-weight: 500; color: #3f3f4a; font-size: 2.146cqw; margin-bottom: 0.2cqw; }
.tcode .tc-arcs { position: absolute; aspect-ratio: 80 / 108; height: auto; }
.tcode .tc-dots { position: absolute; display: block; }
.tcode .tc-dots i { position: absolute; width: 0.613cqw; height: 0.613cqw; border-radius: 50%; }
.tcode .tc-dots i:nth-child(1) { left: 0.766cqw; top: 0; }
.tcode .tc-dots i:nth-child(2) { left: 0.460cqw; top: 0.690cqw; }
.tcode .tc-dots i:nth-child(3) { left: 0.230cqw; top: 1.379cqw; }
.tcode .tc-dots--lt i { background: #5ed4ff; }
.tcode .tc-dots--rt i { background: #068fff; }
.tcode .tc-card { position: absolute; width: 23.908cqw; height: 10.268cqw; background: #ebfaff; border: 0.2px solid rgba(9, 90, 158, 0.55); border-radius: 2.299cqw; }
.tcode .tc-card strong { position: absolute; left: 1.686cqw; top: 1.073cqw; font-size: 1.533cqw; font-weight: 500; color: #000002; }
.tcode .tc-card .fl { position: absolute; left: 1.686cqw; top: 3.755cqw; display: flex; gap: 0.230cqw; }
.tcode .tc-card .fl img { width: 1.916cqw; height: 1.916cqw; }
.tcode .tc-card .tcv { position: absolute; left: 1.686cqw; top: 6.437cqw; display: flex; align-items: center; gap: 0.766cqw; }
.tcode .tc-card .tcv svg { width: 1.073cqw; height: 1.226cqw; }
.tcode .tc-card .tcv b { font-family: 'Seven Segment', 'Courier New', monospace; font-weight: 400; font-size: 2.299cqw; color: #068fff; }
.tcode .tc-card .tcv em { font-style: normal; font-size: 1.149cqw; font-weight: 500; color: #0acc00; align-self: flex-end; }
.tcode .tc-card .rtx { position: absolute; right: 1.916cqw; top: 0.920cqw; height: 8.429cqw; width: auto; }
.tcode .tc-note { position: absolute; margin: 0; width: 58.238cqw; font-size: 1.533cqw; line-height: 1.35; color: #000; }
.tcode .tc-note strong { font-weight: 700; }


/* gentle hover on the flow/timecode pills (matches the deck's pill hover) */
.dflow-langs .lang, .dflow-tag, .dflow-card .dc-row, .tcode .tc-row, .tcode .tc-card {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dflow-langs .lang:hover, .dflow-tag:hover, .dflow-card .dc-row:hover {
  background: #eaf4fd;
}
.tcode .tc-row:hover, .tcode .tc-card:hover {
  background: #d9f1ff;
  border-color: rgba(9, 90, 158, 0.85);
}