/* ================================================================
   Caelus 2026 – caelus.css
   ================================================================ */

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #0a0a0a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

/* ─── Container ─── */
.cal-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── Section shared ─── */
.cal-section {
  scroll-margin-top: 100px;   /* MainNavBar (50px) + SubNavBar (50px) */
}

.cal-section-header {
  text-align: center;
  margin-bottom: 56px;
}

.cal-section-title {
  font-size: 58px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.74px;
  margin-bottom: 50px;
}

.cal-section-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: .36px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 1120px;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.cal-watch-link {
  display: inline-block;   /* own box → hover/letter-spacing won't reflow the centred subtitle */
  font-size: 14px;
  font-weight: 500;
  color: #4dccff;
  white-space: nowrap;
  margin-left: 6px;
  transition: color 0.15s ease;
}

/* Only the link itself changes on hover — no layout shift on the preceding text */
.cal-watch-link:hover {
  color: #7de0ff;
}


/* ════════════════════════════
   Sub-NavBar
   Identical behaviour to Sol / Chronus SubNavBar.
════════════════════════════ */
.cal-subnav {
  position: sticky;
  top: 50px;            /* sits directly beneath the 50px MainNavBar */
  z-index: 999;         /* below MainNavBar (1000) so its dropdowns stay on top */
  background: #1e1e1e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.30);
}

.cal-subnav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
}

.cal-subnav-brand {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-subnav-links {
  display: flex;
  list-style: none;
  margin: 0 0 0 40px;
  padding: 0;
  gap: 30px;
  flex: 1;
  min-width: 0;        /* allow the links area to shrink below its content width */
  overflow: hidden;    /* clip instead of forcing page-wide horizontal overflow */
}

.cal-subnav-links a {
  display: inline-block;
  padding: 3px 16px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
  border-radius: 20px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.cal-subnav-links a:hover,
.cal-subnav-links a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.cal-subnav-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 6px 12px 7px;
  background: #4dccff;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cal-subnav-cta:hover {
  background: #7de0ff;
  color: #000;
  transform: translateY(-1px);
}

/* ── SubNavBar links responsive ──────────────────────────────────
   B) Medium widths: compress links (margin / gap / padding / font)
      so they keep fitting as the bar narrows.
   A) Below ~900px even the compressed links can't fit → hide them.
──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cal-subnav-links   { margin-left: 24px; gap: 16px; }
  .cal-subnav-links a { padding: 3px 10px; font-size: 15px; }
  .cal-subnav-brand   { font-size: 24px; }
}
@media (max-width: 900px) {
  .cal-subnav-links { display: none; }
}


/* ════════════════════════════
   1. Cover
   Full-bleed background image; text absolutely positioned over it.
════════════════════════════ */
.cal-cover {
  position: relative;
  overflow: hidden;
}

.cal-cover-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Left-to-right darkening gradient for text legibility */
.cal-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cal-cover-inner {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  padding: 0 clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
  z-index: 2;
}

.cal-cover-text {
  max-width: 655px;
}

.cal-cover-title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1.8px;
  color: #fff;
  margin-bottom: 6px;
}

.cal-cover-eyebrow {
  font-size: 30px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.25;
  margin-bottom: clamp(16px, 2.2vw, 28px);
}

.cal-cover-desc {
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.70;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: clamp(24px, 2.8vw, 36px);
}

.cal-cover-cta {
  display: inline-flex;
  align-items: center;
  /* 1920: padding 0 20px, height 34px  → 20÷1920=1.042vw  34÷1920=1.771vw */
  padding: 0 clamp(14px, 1.042vw, 20px);
  height: clamp(26px, 1.771vw, 34px);
  background: #4dccff;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.2s;
}

.cal-cover-cta:hover {
  background-color: #6fd7ff;
  color: #000;
}


/* ════════════════════════════
   2. Advanced Visual Attention Analysis
════════════════════════════ */
.cal-analysis {
  padding: 120px 0 0;
}

/* ─── Sub-section (vertical stack) ─── */
.cal-subsection {
  margin-bottom: 80px;
  scroll-margin-top: 120px;   /* navbar + subnav (100px) + breathing room */
}

.cal-subsection:last-child { margin-bottom: 0; }

.cal-subsection-title {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 50px;
  text-align: center;
}

/* ─── Sub-tab bar (Heatmap / Gaze Plot / AOI) ─── */
.cal-subtabs {
  display: flex;          /* always visible — sits inside the DV sub-section */
  justify-content: flex-start;
  gap: clamp(16px, 3.646vw, 50px);
  margin-bottom: 50px;
  justify-content: center;
  flex-wrap: wrap;
}

.cal-subtab {
  -webkit-appearance: none;
  appearance: none;
  padding: 7px 30px;
  border-radius: 100px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-width: 150px
}

.cal-subtab:hover {
  border-color: rgba(255, 255, 255, 0.36);
  color: rgba(255, 255, 255, 0.88);
}

.cal-subtab.is-active {
  background: #4dccff;
  border-color: #4dccff;
  color: #000;
  font-weight: 600;
}

/* ─── Panels: always visible by default ─── */
.cal-panel { display: block; }

/* Visualization sub-panels: only the active one shows */
.cal-viz-panel         { display: none; }
.cal-viz-panel.is-active { display: block; }

.cal-panel-img-wrap {
  position: relative;
  border-radius: 16px;
  line-height: 0;
  /* overflow: visible so hotspot cards can extend beyond the image */
  overflow: visible;
  /* Centre the panel within its container */
  display: block;
  margin: 0 auto;
}

.cal-panel-img-wrap > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* ─── Hotspot dot ─── */
.cal-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
  /*
   * Delay the z-index drop by 0.3 s (= 0.15 s card-fade-delay + 0.15 s fade).
   * This prevents sibling dots from popping on top of the card while it is
   * still fading out after the pointer leaves.
   */
  transition: z-index 0s 0.3s;
}

/* Raise immediately on activation; positional logic handles dot avoidance */
.cal-hotspot:hover,
.cal-hotspot:focus-within,
.cal-hotspot.is-open {
  z-index: 30;
  transition: z-index 0s 0s;
}

.cal-hotspot-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF9500;
  position: relative;
  box-shadow: 0 0 6px 2px rgba(255, 149, 0, 0.50);
  animation: cal-dot-glow 2.4s ease-in-out infinite;
}

/* Invisible enlarged hit area so the dot is easier to hover / tap */
.cal-hotspot-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* transparent but captures the pointer */
}

/* Expanding ring */
.cal-hotspot-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 149, 0, 0.55);
  transform: translate(-50%, -50%) scale(0.5);
  animation: cal-ring-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes cal-dot-glow {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(255, 149, 0, 0.50); }
  50%       { box-shadow: 0 0 14px 5px rgba(255, 149, 0, 0.75); }
}

@keyframes cal-ring-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.85; }
  70%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0;    }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0;    }
}

/* ─── Hotspot annotation card ─── */
/*
 * Card is hidden by default, shown on :hover (desktop) or .is-open (touch).
 * The 0.15s delay on the hide transition gives the pointer time to
 * travel from the dot across the connecting line to the card body.
 */
.cal-hotspot-card {
  position: absolute;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  /* Slow fade-out with a delay so cursor can cross the line */
  transition: opacity 0.15s ease 0.15s;
}

.cal-hotspot:hover .cal-hotspot-card,
.cal-hotspot:focus-within .cal-hotspot-card,
.cal-hotspot.is-open .cal-hotspot-card {
  opacity: 1;
  pointer-events: auto;
  /* Show immediately */
  transition: opacity 0.15s ease 0s;
}

/* Directional variants — all start from the dot's edge (5px radius + 1px gap) */
.cal-hotspot-card.card-right {
  left: calc(50% + 6px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: row;
}

.cal-hotspot-card.card-left {
  right: calc(50% + 6px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: row-reverse;
}

.cal-hotspot-card.card-top {
  bottom: calc(50% + 6px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
  align-items: center;
}

.cal-hotspot-card.card-bottom {
  top: calc(50% + 6px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
}

/* ─── Connecting line ─── */
.cal-hotspot-line {
  background: rgba(255, 149, 0, 0.55);
  flex-shrink: 0;
}

.card-right .cal-hotspot-line,
.card-left  .cal-hotspot-line {
  width: var(--line-len, 48px);
  height: 2px;
}

.card-top   .cal-hotspot-line,
.card-bottom .cal-hotspot-line {
  width: 1px;
  height: var(--line-len, 40px);
}

/* ─── Card content bubble ─── */
/*
 * Use `width` (not min/max-width) as the single source of truth for tooltip
 * size.  JS will only apply an inline `max-width` override when space is tight
 * (image boundary or dot-overlap avoidance).  To change tooltip width, edit
 * only this `width` value AND update the `maxW` constant in caelus.js to match.
 */
.cal-hotspot-content {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 16px;
  width: 250px;            /* ← edit this to resize the tooltip */
  flex-shrink: 0;          /* prevent flex from squeezing below `width` */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.cal-hotspot-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin: 0 0 5px;
  line-height: 1.35;
  white-space: normal;
}

.cal-hotspot-desc {
  font-size: 18px;
  line-height: 1.55;
  color: #000000;
  margin: 0;
  white-space: normal;
}


/* ════════════════════════════
   3. Advanced Eye Tracking Software Ecosystem
   (same structure as Chronus — cal- prefix)
════════════════════════════ */
.cal-ecosystem {
  padding: 120px 0 0;
  background: #0a0a0a;
}

.cal-eco-grid { display: block; }

/* ── Desktop panel ── */
.cal-eco-panel {
  overflow: visible;
  background: transparent;
}

.cal-eco-panel-img {
  line-height: 0;
  margin-left: max(-7.79%, min(-40px, calc(-50vw + 610px)));
}

.cal-eco-panel-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.cal-eco-panel-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cal-eco-col {
  padding: 0 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cal-eco-col-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  margin-bottom: 25px;
}

.cal-eco-col-desc {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  margin-bottom: 25px;
}

.cal-eco-col-link {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #4dccff;
  margin-top: auto;
  transition: letter-spacing 0.2s ease;
}

.cal-eco-col-link:hover { letter-spacing: 0.4px; }

/* ── Mobile cards ── */
.cal-eco-cards-mobile { display: none; }

.cal-eco-card {
  border-radius: 16px;
  overflow: hidden;
  background: #141414;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cal-eco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55);
}

.cal-eco-card-visual {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
}

.cal-eco-card-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s ease;
}

.cal-eco-card:hover .cal-eco-card-visual img { transform: scale(1.04); }

.cal-eco-card-body {
  padding: 60px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.cal-eco-card-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  margin-bottom: 25px;
}

.cal-eco-card-desc {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  margin-bottom: 25px;
}

.cal-eco-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #4dccff;
  transition: letter-spacing 0.2s ease;
  margin-top: auto;
}

.cal-eco-card-link:hover { letter-spacing: 0.4px; }


/* ════════════════════════════
   4. Blog  (Bootstrap Carousel)
   Styles shared with Chronus / Sol Glasses.
════════════════════════════ */
.cal-blog {
  padding: 120px 0 120px;   /* last section → 120px gap to footer */
}

.cal-blog-outer {
  position: relative;
  padding: 0 44px;
}

/* Card design mirrors Home "Featured News" (.news-card) */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;                                         /* fill the carousel column for equal heights */
  container-type: inline-size;                          /* title font scales to the card's own width */
  background: #121212;                                  /* Home --surface */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(77, 204, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 60px rgba(77, 204, 255, 0.25),
              0 16px 48px rgba(0, 0, 0, 0.45);
}

/* Image: 9px frame margin + 12px radius (Home Featured News look) */
.blog-card-img {
  height: 270px;
  margin: 9px;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
}

.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img img { transform: scale(1.06); }

.blog-card-body {
  flex: 1;
  padding: 14px 22px 24px;
}

.blog-card-title {
  /* scales to the card's own width: 20px max (Home), 14px floor */
  font-size: clamp(14px, 5cqi, 20px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.4px;
  color: #fff;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #4dccff;
  margin-top: auto;
  transition: letter-spacing 0.2s ease, color 0.15s ease;
  position: absolute;
  bottom: 12px;
}

.blog-card:hover .blog-card-link {
  color: #7de0ff;
  letter-spacing: 0.4px;
}

/* Carousel arrows */
.cal-blog-carousel .carousel-control-prev,
.cal-blog-carousel .carousel-control-next {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: background 0.15s ease;
}

.cal-blog-carousel .carousel-control-prev { left: -44px; }
.cal-blog-carousel .carousel-control-next { right: -44px; }

.cal-blog-carousel .carousel-control-prev:hover,
.cal-blog-carousel .carousel-control-next:hover {
  background: rgba(255, 255, 255, 0.16);
  opacity: 1;
}

.cal-blog-carousel .carousel-control-prev-icon,
.cal-blog-carousel .carousel-control-next-icon {
  width: 16px; height: 16px;
}


/* ════════════════════════════
   Mobile feature description box
   Built by JS; default display:none (shown only at ≤600px).
════════════════════════════ */
.cal-hs-desc-box {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 14px;
  background: #141414;
  border: 1px solid rgba(77, 204, 255, 0.22);
  border-radius: 14px;
  min-height: 96px;
}

.cal-hs-nav {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(77, 204, 255, 0.35);
  background: transparent;
  color: #4dccff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cal-hs-nav:hover,
.cal-hs-nav:active {
  background: rgba(77, 204, 255, 0.12);
  border-color: rgba(77, 204, 255, 0.60);
}

.cal-hs-desc-content {
  flex: 1;
  min-width: 0;
  transition: opacity 0.12s ease;
}

.cal-hs-desc-content.is-switching {
  opacity: 0;
}

.cal-hs-desc-text {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px;
  white-space: normal;
}

.cal-hs-desc-counter {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(77, 204, 255, 0.75);
}


/* ════════════════════════════
   Responsive
════════════════════════════ */

@media (max-width: 1200px) {
  .cal-cover-title { font-size: 48px; }
}

@media (max-width: 720px) {
  .cal-cover-title { font-size: 34px; }
}

@media (max-width: 480px) {
  .cal-cover-title   { font-size: 28px; }
  .cal-cover-eyebrow { font-size: 22px; }
  .cal-cover-cta     { font-size: 16px; }
}

/* ── ≤ 768px ── */
@media (max-width: 768px) {
  /* Cover */
  .cal-cover { min-height: 380px; }
  .cal-cover-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .cal-cover-inner {
    align-items: flex-start;
    padding-top: 64px;
    padding-bottom: 40px;
  }
  .cal-cover-text { max-width: 70%; }

  /* SubNavBar */
  .cal-subnav-links { display: none; }

  /* Container */
  .cal-container { padding: 0 20px; }

  /* Section type */
  .cal-section-title    { font-size: 28px; }
  .cal-section-subtitle { font-size: 15px; }

  /* Analysis tabs — allow scroll */
  .cal-tabs { justify-content: flex-start; }
  .cal-tab  { padding: 10px 18px 12px; font-size: 14px; }

  /* Sub-tabs */
  .cal-subtab { padding: 6px 20px; font-size: 14px; }

  /* Ecosystem: swap panel → mobile cards */
  .cal-eco-panel        { display: none; }
  .cal-eco-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Blog */
  .cal-blog-outer { padding: 0 32px; }
  .cal-blog-carousel .carousel-control-prev { left: -32px; }
  .cal-blog-carousel .carousel-control-next { right: -32px; }

  /* Section spacing */
  .cal-analysis, .cal-ecosystem, .cal-blog { padding: 80px 0; }

  /* Hotspot cards: slightly narrower on tablet */
  .cal-hotspot-content { width: 180px; }
  .cal-hotspot-title   { font-size: 14px; }
  .cal-hotspot-desc    { font-size: 14px; }
}

/* ── ≤ 600px ── */
@media (max-width: 600px) {
  /* Hotspot cards stay hidden; description is shown in .cal-hs-desc-box instead */
  .cal-hotspot-card { display: none; }

  /* Slightly larger dot so it is more visible as a tap indicator */
  .cal-hotspot-dot  { width: 12px; height: 12px; }

  /*
   * Invisible 44×44 px touch target centred on each dot.
   * Keeps visual size unchanged while meeting touch-target guidelines.
   */
  .cal-hotspot::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* Active dot: elevate z-index (replaces is-open which would show the card) */
  .cal-hotspot.is-mobile-active {
    z-index: 30;
    transition: z-index 0s 0s;
  }

  /* Active dot: brighter glow + slightly larger to show which feature is selected */
  .cal-hotspot.is-mobile-active .cal-hotspot-dot {
    width: 14px; height: 14px;
    box-shadow:
      0 0 0 4px rgba(255, 149, 0, 0.25),
      0 0 16px 6px rgba(255, 149, 0, 0.75);
    animation: none; /* pause idle glow so the active state stands out */
  }

  /* Show the description box */
  .cal-hs-desc-box { display: flex; }
}