/* ============================================================
   Home page - hero, discovery, orbit ("the sun"), feature tour, CTA
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(26px, 4vh, 48px));
  /* capped so the hero never stretches on a tall monitor while still filling a
     short laptop viewport */
  min-height: min(56vh, 520px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(74, 114, 255, 0.1), transparent 60%),
    radial-gradient(900px 420px at 85% -10%, rgba(191, 72, 255, 0.1), transparent 60%),
    var(--paper);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 1.35fr) 1fr;
  align-items: center;
  gap: 26px;
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: clamp(30px, 4.5vh, 54px);
}
.hero-copy { text-align: center; }
.hero-copy h1 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  font-weight: 800;
  color: var(--ink);
}
.hero-copy .hero-sub {
  margin: 18px auto 0;
  max-width: 470px;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.65;
  color: var(--ink-soft);
}
.hero-kicker {
  display: inline-block;
  font: 700 0.8rem/1 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 16px;
}

/* Floating side visuals */
.hero-visual { position: relative; height: 340px; }
.hero-visual .float-card {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  /* The tilt must be the resting transform too. Without it the cards render
     square and only snapped into their angle once the delayed animation began. */
  transform: rotate(var(--tilt, 0deg));
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(-12px) rotate(var(--tilt, 0deg)); }
}

/* avatar pair chip - content rotates through different connections */
.pair-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-width: 205px;
}
.pair-chip .faces { display: flex; }
.pair-chip .face {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background-size: cover;
  background-position: center;
}
.pair-chip .face + .face { margin-left: -10px; }
.pair-chip .meta .names { display: block; font: 700 0.78rem/1.3 var(--font-head); color: var(--ink); }
.pair-chip .meta .sub { display: block; font: 600 0.7rem/1.3 var(--font-body); color: var(--green); }
.pair-chip.swap .faces,
.pair-chip.swap .meta { animation: chip-swap 0.6s ease; }
@keyframes chip-swap {
  0% { opacity: 1; }
  30% { opacity: 0; transform: translateY(3px); }
  70% { opacity: 0; }
  100% { opacity: 1; transform: none; }
}

/* mini circle card */
.mini-circle {
  width: 190px;
  padding: 0 0 14px;
  overflow: hidden;
  text-align: center;
}
.mini-circle .cover { height: 56px; background: var(--cover, var(--grad)); }
.mini-circle .logo {
  width: 46px; height: 46px;
  margin: -23px auto 8px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mini-circle .logo img { width: 100%; height: 100%; object-fit: cover; }
.mini-circle .name { font: 700 0.82rem/1.2 var(--font-head); }
.mini-circle .members { font-size: 0.7rem; color: var(--ink-dim); margin-top: 3px; }

/* prompt bubble - question rotates every few seconds */
.prompt-bubble {
  width: 235px;
  padding: 14px 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.prompt-bubble b { display: block; font: 700 0.68rem/1 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); margin-bottom: 7px; }
.prompt-bubble .pq { display: block; min-height: 3.6em; }
.prompt-bubble .pq.swap { animation: q-swap 0.5s ease; }

/* match toast - centred, with a looping hand-drawn underline */
.match-toast {
  padding: 13px 20px;
  text-align: center;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.match-toast .txt { font: 700 0.85rem/1.3 var(--font-head); }
.match-toast .txt span { display: block; font: 500 0.72rem/1.3 var(--font-body); color: var(--ink-dim); margin-top: 5px; }
.match-toast .scribble {
  display: block;
  width: 104px;
  height: 12px;
  margin: 1px auto 0;
  overflow: visible;
}
.match-toast .scribble path {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
  animation: scribble-draw 3.4s ease-in-out infinite;
}
@keyframes scribble-draw {
  0% { stroke-dashoffset: 132; }
  28% { stroke-dashoffset: 0; }
  72% { stroke-dashoffset: 0; opacity: 1; }
  86% { opacity: 0; }
  100% { stroke-dashoffset: 132; opacity: 0; }
}

/* connection line doodles behind hero cards */
.hero-visual svg.doodle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-visual svg.doodle path {
  fill: none;
  stroke: rgba(107, 93, 255, 0.35);
  stroke-width: 1.6;
  stroke-dasharray: 4 7;
  animation: dash-crawl 30s linear infinite;
}
@keyframes dash-crawl { to { stroke-dashoffset: -600; } }

.hero-scrollcue {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink-dim);
  font: 600 0.72rem/1 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.hero-scrollcue:hover { color: var(--ink); }
.hero-scrollcue:hover .chev { border-color: var(--ink); }
.hero-scrollcue .chev {
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-dim);
  border-bottom: 2px solid var(--ink-dim);
  transform: rotate(45deg);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: rotate(45deg) translate(0,0); opacity:.5;} 50% { transform: rotate(45deg) translate(4px,4px); opacity:1;} }

/* ---------- Discovery ---------- */
.discover { background: var(--paper-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* title and search share the first line; the sub-heading sits under both */
.discover-head { margin-bottom: 20px; }
.discover-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.discover-title-row .section-title { margin: 0; }
.discover-head .section-sub { margin-top: 10px; max-width: 620px; }

.discover-search { position: relative; width: min(360px, 100%); }
.discover-search input {
  width: 100%;
  font: 600 0.92rem var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 13px 20px 13px 46px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.discover-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(74, 114, 255, 0.12); }
.discover-search svg {
  position: absolute; left: 17px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: var(--ink-dim);
}

.discover-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip {
  font: 700 0.82rem/1 var(--font-head);
  color: var(--ink-soft);
  background: #fff;
  border: 1.5px solid var(--line);
  padding: 10px 18px;
  border-radius: 999px;
  transition: all 0.2s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.chip:hover { border-color: var(--ink-dim); transform: translateY(-1px); }
.chip.on {
  color: #fff;
  background: var(--deep);
  border-color: var(--deep);
}

.circle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Circle card - replica of the in-app DiscoverSection card:
   full-bleed cover, white inner card anchored to the bottom (m-2 mt-auto),
   110px logo overlapping with a 6px white ring, 17px title,
   "members · visibility · Free" meta with small line icons.
   Corner radii sit between the app's 2rem (too soft at this size) and the
   1.25rem first tried here (too boxy). */
.circle-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
.circle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.circle-card .cover {
  position: absolute;
  inset: 0;
  background: var(--cover);
  transition: transform 0.7s ease;
}
.circle-card:hover .cover { transform: scale(1.05); }

.circle-card .inner {
  position: relative;
  z-index: 1;
  margin: 8px;
  margin-top: auto;
  background: #fff;
  border-radius: 1.15rem;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.circle-card .top { display: flex; gap: 16px; align-items: flex-start; }
.circle-card .logo {
  width: 110px; height: 110px;
  flex-shrink: 0;
  margin-top: -60px;
  border-radius: 50%;
  border: 6px solid #fff;
  background: var(--logo-bg, var(--grad));
  display: flex; align-items: center; justify-content: center;
  font: 800 1.9rem var(--font-head);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}
.circle-card:hover .logo { transform: scale(1.05); }
.circle-card .top > div:last-child { margin-top: -6px; min-width: 0; }
.circle-card h3 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.circle-card:hover h3 { color: #2563eb; }
.circle-card .meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
  font: 700 11px/1.3 var(--font-body);
  color: #4b5563;
  margin-top: 5px;
}
.circle-card .meta i { font-style: normal; color: #d1d5db; }
.circle-card .meta .mi { display: inline-flex; align-items: center; gap: 4px; }
.circle-card .meta svg { width: 11px; height: 11px; stroke: #6b7280; }
.circle-card .desc {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* real circle logos / covers sit inside the same discs the initials use */
.circle-card .logo.has-img,
.cpm-logo.has-img { overflow: hidden; padding: 0; }
.circle-card .logo.has-img img,
.cpm-logo.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* loading skeletons - the grid never flashes empty while the directory loads */
.circle-card.skeleton { cursor: default; pointer-events: none; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); }
.circle-card.skeleton .cover { background: linear-gradient(135deg, #eceef3, #e2e5ec); }
.circle-card.skeleton .logo { background: #eceef3; }
.circle-card.skeleton .sk-lines { flex: 1; margin-top: 2px; }
.sk-line {
  display: block;
  height: 11px;
  border-radius: 999px;
  background: #eceef3;
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.sk-line + .sk-line { margin-top: 8px; }
.sk-line.short { width: 55%; }
.sk-line.wide { margin-top: 14px; height: 30px; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.discover-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.discover-more .left-note { font-size: 0.82rem; color: var(--ink-dim); }
.discover-empty { text-align: center; color: var(--ink-dim); padding: 28px 0; font-weight: 600; }

/* empty / error state - an invitation, not a dead end */
.discover-cta {
  max-width: 520px;
  margin: 0 auto;
  padding: 36px 28px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.discover-cta .dc-orb {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.discover-cta .dc-orb svg { width: 24px; height: 24px; }
.discover-cta h3 { font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.35; }
.discover-cta p { margin: 12px 0 24px; font-size: 0.92rem; font-weight: 500; line-height: 1.65; color: var(--ink-soft); }

/* Circle preview modal - a port of the in-app CirclePreviewModal
   (src/components/circles/CirclePreviewModal.tsx + CircleAboutContent.tsx):
   the "Learn more about ..." details panel on the left, the circle card with
   the yellow join button on the right, same order and same proportions.

   The details panel is a flex column whose *inner* element scrolls, rather
   than the padded panel itself. That keeps the scrollbar off the rounded
   corners and inside the padding - exactly how the app nests
   `overflow-hidden py-6 pr-4` around `overflow-y-auto pl-8 pr-6`. */
.cpm {
  /* the app's max-w-6xl */
  width: min(1152px, 100%);
  max-height: 88vh;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-backdrop.open .cpm { transform: none; }
.cpm-desktop {
  display: flex;
  flex-direction: row;
  gap: 22px;
  max-height: 88vh;
}
.cpm-mobile { display: none; }

/* ----- left: details ----- */
.cpm-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: #fff;
  border-radius: 1.75rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  text-align: left;
}
/* the gutter the scrollbar lives in - never the panel's rounded edge */
.cpm-scroll-pad {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 26px 14px 26px 0;
}
.cpm-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 22px 0 32px;
}
.cpm-details h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  padding-right: 44px;
}
/* The About gallery: 16:9 stage with the thumbnail rail beside it, same as
   CircleAboutContent's desktop branch. The stage is black and the media is
   contained rather than cropped, so a portrait logo or a 4:3 photo letterboxes
   instead of being cut - which is what the app does. */
.cpm-media-row { display: flex; gap: 14px; margin-bottom: 24px; }
.cpm-media {
  flex: 1;
  min-width: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cpm-media img,
.cpm-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* the cover-image fallback is a banner, not gallery art - it crops to fill */
.cpm-media img.fill { object-fit: cover; }
.cpm-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cpm-media-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff;
  font: 700 0.85rem var(--font-head);
}
.cpm-media-link svg { width: 34px; height: 34px; }

.cpm-thumbs {
  width: 60px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}
.cpm-thumb {
  position: relative;
  width: 100%;
  height: 44px;
  flex-shrink: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #f3f4f6;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.cpm-thumb:hover { opacity: 1; border-color: #d1d5db; }
.cpm-thumb.on { opacity: 1; border-color: #3b82f6; box-shadow: var(--shadow-sm); }
.cpm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cpm-thumb-fallback,
.cpm-thumb-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.cpm-thumb-fallback { background: var(--grad); }
.cpm-thumb-play { background: rgba(0, 0, 0, 0.2); }
.cpm-thumb svg { width: 14px; height: 14px; }
/* the app's info strip: plain icon + label pairs over a hairline rule */
.cpm-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font: 700 0.81rem var(--font-body);
  color: #374151;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f1f0f6;
}
.cpm-facts span { display: inline-flex; align-items: center; gap: 8px; }
.cpm-facts svg { width: 16px; height: 16px; flex-shrink: 0; stroke: #111827; fill: none; }
/* "by <name>" - only rendered for circles that left anonymous_creator off */
.cpm-creator { color: var(--ink-dim); font-weight: 600; }
.cpm-creator b { color: #111827; font-weight: 700; }
.cpm-avatar {
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.cpm-avatar.is-initial {
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: var(--grad);
  color: #fff;
  font: 700 0.5rem var(--font-head);
}
.cpm-body p { font-size: 0.9rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 12px; }
.cpm-body p:last-child { margin-bottom: 0; }

.cpm-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #4b5563;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 5;
}
.cpm-close:hover { background: #e5e7eb; color: var(--ink); }
.cpm-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* ----- right: the circle card ----- */
.cpm-card {
  width: 370px;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
/* cover sits behind the white panel, bleeding to the card's edges */
.cpm-card .cover {
  position: absolute;
  inset: 0;
  background: var(--cover, var(--grad));
}
/* Flex, not block: the logo's -55px top margin would otherwise collapse with
   this panel's own margin and drag the whole panel up instead of lifting the
   disc out of it - which left the cover band too short. As a flex column the
   margin stays on the child, so the cover ends exactly at the disc's centre,
   the way the app's `flex justify-center -mt-[55px]` row does. */
.cpm-card .inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  background: #fff;
  border-radius: 1.35rem;
  padding: 0 20px 24px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.cpm-logo {
  width: 110px; height: 110px;
  margin: -55px auto 12px;
  border-radius: 50%;
  border: 6px solid #fff;
  background: var(--logo-bg, var(--grad));
  display: flex; align-items: center; justify-content: center;
  font: 800 2.2rem var(--font-head);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.cpm-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 10px;
}
.cpm-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 0.75rem var(--font-body);
  color: #111827;
  margin-bottom: 26px;
}
.cpm-online i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34a853;
  font-style: normal;
  animation: pulse-dot 2s infinite;
}
/* shown instead of the live dot for small circles, where an online count would
   point at one identifiable person (the RPC suppresses it below 5 members) */
.cpm-online.muted { color: #6b7280; font-weight: 700; }
.cpm-card .desc {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  color: #4b5563;
  margin-bottom: 26px;
}
.cpm-join {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 1.15rem;
  background: #fbd051;
  color: #111827;
  font: 800 1.02rem var(--font-head);
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s ease, transform 0.15s ease;
}
.cpm-join:hover { background: #ebd576; }
.cpm-join:active { transform: scale(0.98); }

/* ----- phones: the app's single-card preview (CirclePreviewModal, sm:hidden)
   Banner, overlapping logo, name + counts, join button, gallery, boxed info
   chips, then the About block - in that order, left-aligned. ----- */
.cpm-close.on-banner {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cpm-close.on-banner:hover { background: rgba(0, 0, 0, 0.6); color: #fff; }

.cpm-mscroll {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 30px;
}
.cpm-banner {
  height: 100px;
  flex-shrink: 0;
  background: var(--cover, var(--grad));
}
.cpm-mbody {
  position: relative;
  z-index: 1;
  margin-top: -40px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cpm-mlogo {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--logo-bg, var(--grad));
  display: flex; align-items: center; justify-content: center;
  font: 800 1.7rem var(--font-head);
  color: #fff;
  box-shadow: var(--shadow-md);
  margin-bottom: 8px;
}
.cpm-mlogo.has-img { overflow: hidden; padding: 0; }
.cpm-mlogo.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cpm-mobile h2 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 8px;
}
.cpm-mmeta {
  display: flex; align-items: center; gap: 10px;
  font: 700 0.69rem var(--font-body);
  color: #6b7280;
  margin-bottom: 16px;
}
.cpm-mmeta i { font-style: normal; color: #d1d5db; }
.cpm-mmeta .live { display: inline-flex; align-items: center; gap: 6px; color: #111827; }
.cpm-mmeta .live em {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34a853;
  animation: pulse-dot 2s infinite;
}
.cpm-mobile .cpm-join {
  padding: 14px;
  border-radius: 0.8rem;
  font-size: 0.94rem;
  margin-bottom: 30px;
}
.cpm-media-wrap { width: 100%; margin-bottom: 30px; }
.cpm-mchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cpm-mchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--paper-soft);
  border: 1px solid #f1f0f6;
  border-radius: 0.6rem;
  padding: 8px 12px;
  font: 700 0.8rem var(--font-body);
  color: #111827;
  box-shadow: var(--shadow-sm);
}
.cpm-mchip svg { width: 14px; height: 14px; flex-shrink: 0; stroke: #111827; fill: none; }
.cpm-mchip b { font-weight: 700; }
.cpm-mabout {
  width: 100%;
  border-top: 1px solid #f1f0f6;
  padding-top: 22px;
}
.cpm-mabout h3 { font-size: 1.25rem; font-weight: 800; color: #111827; margin-bottom: 10px; }
.cpm-mabout p {
  font: 500 0.82rem/1.7 var(--font-body);
  color: #374151;
  margin-bottom: 10px;
}
.cpm-mabout p:last-child { margin-bottom: 0; }

/* the rail runs under the stage when there is no room beside it */
.cpm-thumbs.is-row {
  width: 100%;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 8px;
  padding: 0 0 4px;
}
.cpm-thumbs.is-row .cpm-thumb { width: 56px; height: 40px; }

@media (max-width: 860px) {
  .cpm { max-height: 90vh; }
  .cpm-desktop { display: none; }
  .cpm-mobile {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1.75rem;
    box-shadow: var(--shadow-lg);
    text-align: left;
  }
}

/* ---------- Orbit section ("one circle, endless connections") ---------- */
.orbit-section {
  position: relative;
  background: var(--deep);
  color: #fff;
  overflow: hidden;
}
.orbit-section::before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 93, 255, 0.22), transparent 65%);
  top: 50%; left: 26%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orbit-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.orbit-stage { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto; width: 100%; }
.orbit-stage canvas { width: 100%; height: 100%; display: block; }

.orbit-copy .eyebrow { color: #cabdff; }
.orbit-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; }
.orbit-copy .lead {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}
.orbit-copy .lead b { color: #fff; }
.orbit-points { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.orbit-point { display: flex; gap: 14px; align-items: flex-start; }
.orbit-point .ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: #cabdff;
  font-size: 1.1rem;
}
.orbit-point h4 { font-size: 0.98rem; font-weight: 700; }
.orbit-point p { margin-top: 4px; font-size: 0.88rem; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }

/* The live-pair chip. It sits *below* the sphere, not over it: the orbit is
   drawn at r = 0.375 of the stage, so the lowest avatars reach roughly 92% of
   the stage height and anything higher than this collided with them. Absolutely
   positioned, so dropping it does not change the section's padding. */
.orbit-live {
  position: absolute;
  left: 50%; bottom: -30px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: rgba(20, 16, 42, 0.78);
  border: 1px solid rgba(52, 211, 153, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 8px 20px 8px 10px;
  white-space: nowrap;
}
.orbit-live .faces { display: flex; }
.orbit-live .faces img {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(52, 211, 153, 0.7);
  object-fit: cover;
  background: #2a2350;
}
.orbit-live .faces img + img { margin-left: -9px; }
.orbit-live .txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.orbit-live .txt span { font: 700 0.8rem var(--font-head); color: #fff; }
.orbit-live .txt small { font: 600 0.68rem var(--font-body); color: #a7f3d0; }

/* ---------- Feature tour ---------- */
.tour-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  /* stretch, so the stage column matches the height of the step list including
     whichever step is expanded - it used to be a short box next to a tall list */
  align-items: stretch;
  margin-top: var(--gap-block);
}
.tour-list { display: flex; flex-direction: column; gap: 8px; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.tour-item {
  text-align: left;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.tour-item:hover { background: var(--paper-soft); }
.tour-item.on { background: #fff; border-color: var(--line); box-shadow: var(--shadow-md); }
.tour-item .t-head { display: flex; align-items: center; gap: 12px; }
.tour-item .t-num {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--grad-soft);
  border: 1px solid rgba(107, 93, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  font: 800 0.82rem var(--font-head);
  letter-spacing: 0.03em;
  color: var(--blue);
  transition: all 0.25s ease;
}
.tour-item.on .t-num {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(107, 93, 255, 0.35);
}
.tour-item h3 { font-size: 1rem; font-weight: 800; color: var(--ink); }
.tour-item p {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 10px;
  display: none;
}
.tour-item.on p { display: block; animation: fade-slide 0.35s ease; }
.tour-item .t-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0%;
  background: var(--grad);
  border-radius: 3px;
  /* width driven by JS so the progress always matches the real timer */
}

/* Tour stage - mock app screens */
.tour-stage {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(191, 72, 255, 0.14), transparent 60%),
    radial-gradient(600px 300px at 10% 100%, rgba(74, 114, 255, 0.14), transparent 60%),
    var(--paper-soft);
  border: 1px solid var(--line);
  /* was a flat 520px, which pushed the tour off-screen on a laptop */
  min-height: clamp(400px, 48vh, 500px);
  overflow: hidden;
}
.tour-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3.5vw, 44px);
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.tour-screen.on { opacity: 1; transform: none; pointer-events: auto; }

.mock-window {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.mock-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-soft);
}
.mock-titlebar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); font-style: normal; }
.mock-titlebar i:nth-child(1) { background: #fca5a5; }
.mock-titlebar i:nth-child(2) { background: #fcd34d; }
.mock-titlebar i:nth-child(3) { background: #86efac; }
.mock-titlebar span { margin-left: 8px; font: 700 0.72rem var(--font-head); color: var(--ink-dim); }
.mock-body { padding: 22px; }

.mock-note { text-align: center; font-size: 0.78rem; color: var(--ink-dim); margin-top: 14px; }

/* screen 0 - matchmaking story (press → search → match) */
.tm { position: relative; min-height: 270px; }
.tm > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.tm.p-idle .tm-idle, .tm.p-search .tm-search, .tm.p-found .tm-found { opacity: 1; transform: none; }
.tm-count { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.dot-live {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 2s infinite;
}
.tm-start { pointer-events: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tm-start.pressed { transform: scale(0.93); box-shadow: 0 3px 10px rgba(107, 93, 255, 0.35); }

.radar { position: relative; width: 170px; height: 170px; margin-bottom: 14px; }
.radar .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(107, 93, 255, 0.4);
  animation: radar-pulse 2.1s ease-out infinite;
}
.radar .ring.r2 { animation-delay: 0.7s; }
.radar .ring.r3 { animation-delay: 1.4s; }
@keyframes radar-pulse {
  0% { transform: scale(0.35); opacity: 0.9; }
  100% { transform: scale(1.15); opacity: 0; }
}
.radar .face {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2.5px solid #fff;
  box-shadow: var(--shadow-sm);
}
.radar .you {
  width: 56px; height: 56px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-width: 3px;
  z-index: 1;
}
.radar .cand { width: 36px; height: 36px; animation: cand-blink 2.4s ease-in-out infinite; }
.radar .c1 { left: 6%; top: 16%; }
.radar .c2 { right: 2%; top: 40%; animation-delay: 0.8s; }
.radar .c3 { left: 22%; bottom: 2%; animation-delay: 1.6s; }
@keyframes cand-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.tm-status { font: 700 0.85rem var(--font-head); color: var(--ink-soft); }

.tm-pair { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tm-pair .face.big {
  width: 74px; height: 74px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--green);
  box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.18), var(--shadow-md);
}
.tm-zap {
  width: 26px; height: 26px;
  color: var(--violet);
  animation: cand-blink 1.2s ease-in-out infinite;
}
.tm-zap svg { width: 100%; height: 100%; fill: rgba(191, 72, 255, 0.15); }
.tm-names { font: 800 1.1rem var(--font-head); }
.tm-sub { font-size: 0.82rem; color: #047857; font-weight: 600; margin-top: 5px; }

/* screen 2 - filters */
.mock-label { font: 700 0.72rem/1 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin: 16px 0 9px; }
.mock-label:first-child { margin-top: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.mock-pill {
  font: 700 0.78rem/1 var(--font-head);
  color: var(--ink-soft);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  transition: all 0.25s ease;
}
.mock-pill.on { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 4px 14px rgba(107, 93, 255, 0.35); }
.sim-track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #93c5fd, #c4b5fd, #f0abfc);
  margin: 22px 6px 8px;
}
.sim-knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-md);
  transition: left 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sim-labels { display: flex; justify-content: space-between; font: 600 0.7rem var(--font-body); color: var(--ink-dim); padding: 0 2px; }

/* screen 2 - live call (prompt on top, like the real call screen) */
.call-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.call-tile {
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border: 2.5px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.call-tile.speaking {
  border-color: rgba(52, 211, 153, 0.9);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
.call-tile::after {
  content: attr(data-name);
  position: absolute;
  left: 8px; bottom: 8px;
  font: 700 0.66rem var(--font-head);
  color: #fff;
  background: rgba(14, 11, 31, 0.55);
  backdrop-filter: blur(4px);
  padding: 4px 9px;
  border-radius: 99px;
}
.call-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  position: relative;
}
.cbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.cbtn svg { width: 17px; height: 17px; }
.cbtn.end { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.cbtn.end svg { transform: rotate(135deg); }
.call-timer {
  position: absolute;
  right: 0;
  font: 800 0.85rem var(--font-head);
  color: var(--ink-soft);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: 7px 13px;
  border-radius: 99px;
}
.prompt-card {
  border-radius: var(--radius-md);
  background: var(--deep);
  color: #fff;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  min-height: 86px;
}
.prompt-card::before {
  content: "";
  position: absolute;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(191, 72, 255, 0.3);
  filter: blur(40px);
  right: -30px; top: -30px;
}
.prompt-card b { display: block; font: 700 0.62rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: #cabdff; margin-bottom: 7px; }
.prompt-card .q { font: 600 0.92rem/1.45 var(--font-body); min-height: 42px; }
.prompt-card .q.swap { animation: q-swap 0.5s ease; }
@keyframes q-swap { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* screen 4 - connections */
.biz-card {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.biz-card + .biz-card { margin-top: 10px; }
.biz-card .face { width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; }
.biz-card .who { flex: 1; }
.biz-card .who b { font: 700 0.9rem var(--font-head); display: block; }
.biz-card .who span { font-size: 0.75rem; color: var(--ink-dim); }
.biz-card .keep {
  font: 700 0.72rem var(--font-head);
  color: var(--blue);
  border: 1.5px solid rgba(74, 114, 255, 0.35);
  border-radius: 99px;
  padding: 7px 13px;
  transition: all 0.25s ease;
}
.biz-card.kept .keep { color: #fff; background: var(--green); border-color: transparent; }
.biz-card.kept { border-color: rgba(52, 211, 153, 0.5); }

/* screen 3 - wrap-up: the real circular post-call screen */
.wrapup {
  position: relative;
  width: min(360px, 82%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 20px 70px -15px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapup svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}
.wrapup .wu-ring-sim,
.wrapup .wu-ring-go {
  stroke-dasharray: 301.6;              /* 2π × r(48) */
  stroke-dashoffset: 301.6;
}
.wrapup .wu-ring-sim { transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.wrapup.ring-sim .wu-ring-sim { stroke-dashoffset: 39.2; }   /* 87% of the circle */
.wrapup .wu-ring-go { opacity: 0; transition: stroke-dashoffset 0.9s ease-in-out, opacity 0.3s ease; }
.wrapup.ring-go .wu-ring-sim { opacity: 0; }
.wrapup.ring-go .wu-ring-go { opacity: 1; stroke-dashoffset: 0; }

.wu-phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12%;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.wrapup.ph-sim .wu-phase.wu-sim,
.wrapup.ph-profile .wu-phase.wu-profile,
.wrapup.ph-decide .wu-phase.wu-profile,
.wrapup.ph-done .wu-phase.wu-done { opacity: 1; transform: none; }

.wu-phase.wu-sim b { font: 900 4rem/1 var(--font-head); }
.wu-phase.wu-sim span {
  font: 700 0.8rem var(--font-head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 10px;
}

.wu-phase.wu-profile .face {
  width: 84px; height: 84px;
  /* a flex item in a column shrinks vertically when the phase overflows the
     circle, which turned the avatar into an ellipse on narrow screens */
  flex-shrink: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  box-shadow: var(--shadow-md);
  margin-bottom: 12px;
}
.wu-phase.wu-profile b { font: 800 1.25rem var(--font-head); }
.wu-phase.wu-profile > span { font-size: 0.82rem; color: var(--ink-dim); margin-top: 3px; }
.wu-actions { display: flex; gap: 10px; margin-top: 18px; }
.wu-actions span {
  font: 700 0.82rem var(--font-head);
  padding: 11px 20px;
  border-radius: 99px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wu-skip { background: #fef2f2; color: #dc2626; }
.wu-connect { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(107, 93, 255, 0.35); }
.wu-connect.pressed { transform: scale(0.92); box-shadow: 0 2px 8px rgba(107, 93, 255, 0.35); }

.wu-phase.wu-done .wu-check {
  width: 74px; height: 74px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #dcfce7;
  color: #22c55e;
  font: 800 2rem/74px var(--font-head);
  text-align: center;
  margin-bottom: 14px;
  animation: wu-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wu-pop { from { transform: scale(0) rotate(-160deg); } }
.wu-phase.wu-done b { font: 800 1.3rem var(--font-head); }
.wu-phase.wu-done span { font-size: 0.84rem; color: var(--ink-dim); margin-top: 6px; }

/* screen 4 - hub & analytics */
.hub-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.hub-tab {
  font: 700 0.72rem var(--font-head);
  padding: 8px 14px;
  border-radius: 99px;
  color: var(--ink-dim);
  background: var(--paper-soft);
}
.hub-tab.on { color: #fff; background: var(--deep); }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 0 6px; }
.bars .bar {
  flex: 1;
  border-radius: 8px 8px 3px 3px;
  background: var(--grad);
  opacity: 0.85;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-screen.on .bars .bar { transform: scaleY(1); }
.bars .bar:nth-child(2) { transition-delay: 0.1s; }
.bars .bar:nth-child(3) { transition-delay: 0.2s; }
.bars .bar:nth-child(4) { transition-delay: 0.3s; }
.bars .bar:nth-child(5) { transition-delay: 0.4s; }
.bars .bar:nth-child(6) { transition-delay: 0.5s; }
.bars .bar:nth-child(7) { transition-delay: 0.6s; }
.stat-row { display: flex; gap: 10px; margin-top: 14px; }
.stat-box {
  flex: 1;
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  padding: 12px;
  text-align: center;
}
.stat-box b { font: 800 1.1rem var(--font-head); display: block; }
.stat-box span { font-size: 0.68rem; color: var(--ink-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero { min-height: unset; }
  .hero-scrollcue { display: none; }
  .hero-inner { padding-bottom: clamp(28px, 5vh, 50px); }
  .orbit-grid { grid-template-columns: 1fr; }
  .orbit-stage { max-width: 460px; }
  /* stacked layout: the copy column now sits right under the stage, so the chip
     tucks back up rather than eating into the grid gap */
  .orbit-live { bottom: -12px; }
}

/* Phones: the chip crowds the sphere at any offset and repeats what the copy
   beside it already says, so it is dropped entirely. */
@media (max-width: 767px) {
  .orbit-live { display: none; }
}

@media (max-width: 900px) {
  .circle-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  /* two rows: the tab nav + its bubble on top, the visualization underneath */
  .tour-grid { grid-template-columns: 1fr; gap: 20px; }
  .tour-list { display: none; }
  .tour-mnav { display: block; }

  /* Adaptive height. On desktop every screen is absolutely positioned inside a
     fixed-height stage; on a phone that left short screens swimming in dead
     space and tall ones clipped. Here the ACTIVE screen returns to the flow and
     sets the stage's height, so the padding around the mock is always even. */
  .tour-stage { min-height: 0; }
  .tour-screen.on { position: relative; inset: auto; }

  /* 03: the absolutely-positioned timer lands on top of the call buttons once
     the bar is this narrow. The clock is decoration; the controls are the point. */
  .call-timer { display: none; }

  /* 04: the wrap-up is a fixed circle with absolutely-positioned contents, so
     nothing inside it reflows - it has to be scaled down as a unit or the
     buttons wrap and the avatar is squeezed out of round. */
  .wrapup { width: min(300px, 92%); }
  .wu-phase { padding: 14%; }
  .wu-phase.wu-sim b { font-size: 3rem; }
  .wu-phase.wu-sim span { font-size: 0.68rem; letter-spacing: 0.16em; }
  .wu-phase.wu-profile .face { width: 62px; height: 62px; border-width: 3px; margin-bottom: 9px; }
  .wu-phase.wu-profile b { font-size: 1rem; }
  .wu-phase.wu-profile > span { font-size: 0.7rem; }
  .wu-actions { gap: 7px; margin-top: 13px; }
  .wu-actions span { font-size: 0.72rem; padding: 9px 13px; white-space: nowrap; }
  .wu-phase.wu-done .wu-check { width: 58px; height: 58px; font-size: 1.6rem; line-height: 58px; margin-bottom: 11px; }
  .wu-phase.wu-done b { font-size: 1.05rem; }
  .wu-phase.wu-done span { font-size: 0.74rem; }
}

@media (max-width: 600px) {
  .circle-grid { grid-template-columns: 1fr; }
  .discover-head { flex-direction: column; align-items: stretch; }
  /* see index.html - the contact band below already closes the page */
  .final-cta { display: none; }
  /* the card was sized for a 3-up desktop grid; full-width on a phone it only
     needs enough cover to read as a card */
  .circle-card { min-height: 190px; }
  .circle-card .logo { width: 82px; height: 82px; margin-top: -44px; border-width: 5px; font-size: 1.5rem; }
  .circle-card .inner { padding: 16px; }
  .discover-cta { padding: 30px 22px; }
  .discover-cta h3 { font-size: 1.08rem; }
}


/* the tour mocks are fixed-layout replicas of app screens; on a phone they
   need to scroll internally rather than spill out of the stage */
.hub-tabs { flex-wrap: wrap; }
@media (max-width: 600px) {
  .hub-tab { font-size: 0.66rem; padding: 7px 10px; }
  .mock-body { padding: 16px; }
  .stat-row { gap: 6px; }
  .stat-box b { font-size: 1rem; }
  .stat-box span { font-size: 0.6rem; }
}