/* Pearl — Phase 1 (website hero)
 * Mirrors packages/dashboard/app/globals.css. Class names match the dashboard
 * 1:1 so screenshots and inspector views are consistent across surfaces.
 * Tokens (--cb-*, --aurora-*, --glass-*) come from index.html :root (Phase 0).
 */

/* ── Golden-ratio spacing scale ──────────────────────────────
   Every step is φ (≈1.618) times the one below it — and they
   land on the Fibonacci sequence (13·φ≈21, 21·φ≈34, 34·φ≈55,
   55·φ≈89, 89·φ≈144), so the whole page breathes on one
   self-similar rhythm: section padding, header offsets, and the
   gaps between kicker → headline → subhead all step through the
   same ratio instead of arbitrary round numbers. φ-split grids
   (ROI inputs vs. ring, etc.) reference --phi directly. */
:root {
  --phi: 1.618;
  --space-2xs: 8px;
  --space-xs: 13px;
  --space-sm: 21px;
  --space-md: 34px;
  --space-lg: 55px;
  --space-xl: 89px;
  --space-2xl: 144px;
}

/* ── Aurora drift (mirrors globals.css :body keyframes) ──
   We don't replace the page body background; the hero gets its own
   absolutely-positioned aurora layer so the rest of the page can keep its
   existing palette through Phase 1. */
.pearl-hero {
  position: relative;
  min-height: clamp(560px, 82vh, 780px);
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  display: grid;
  place-items: center;
}
.pearl-hero__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--cb-bg));
  background-image:
    radial-gradient(ellipse 1200px 800px at 8% 0%, rgb(var(--aurora-1) / 0.42), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 92% 4%, rgb(var(--aurora-2) / 0.46), transparent 60%),
    radial-gradient(ellipse 1400px 900px at 50% 100%, rgb(var(--aurora-3) / 0.32), transparent 55%);
  background-attachment: local;
  animation: pearlAuroraDrift 40s ease-in-out infinite alternate;
}
@keyframes pearlAuroraDrift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
  100% { background-position: 4% -3%, -4% 3%, 2% -2%; }
}

.pearl-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-lg);
}
@media (max-width: 880px) {
  .pearl-hero__inner { grid-template-columns: 1fr; gap: var(--space-md); text-align: center; justify-items: center; }
}

/* ── Hero shush-S centerpiece ── */
.pearl-hero__mark {
  width: 280px;
  height: 280px;
  color: rgb(var(--cb-accent));
  flex-shrink: 0;
  margin-bottom: 4px;
  animation: pearlMarkPulse 2.4s ease-in-out 1700ms infinite;
}
@keyframes pearlMarkPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
@media (max-width: 880px) {
  .pearl-hero__mark { width: 200px; height: 200px; }
}

/* ── Headline / subhead / cluster ── */
.pearl-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 640px;
}
@media (max-width: 880px) {
  .pearl-hero__copy { align-items: center; }
}

.pearl-hero__h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: rgb(var(--cb-text));
  margin: 0;
  opacity: 0;
  animation: pearlFadeUp 720ms cubic-bezier(0.32, 0.72, 0, 1) 1080ms forwards;
}

.pearl-hero__sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  color: rgb(var(--cb-text-sec));
  margin: 0;
  /* copy column ÷ φ — the subhead measure is the golden subdivision
     of the headline column it sits under */
  max-width: 396px;
  opacity: 0;
  animation: pearlFadeUp 720ms cubic-bezier(0.32, 0.72, 0, 1) 1280ms forwards;
}

.pearl-hero__actions {
  margin-top: 6px;
  opacity: 0;
  animation: pearlFadeUp 720ms cubic-bezier(0.32, 0.72, 0, 1) 1480ms forwards;
}

@keyframes pearlFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Right column: TopbarRing + (mobile re-stacks below copy) ── */
.pearl-hero__ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: pearlFadeUp 720ms cubic-bezier(0.32, 0.72, 0, 1) 1380ms forwards;
}
.pearl-hero__ring-caption {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
}

/* ── Hero variant: copy on left, laptop-framed app window on right ── */
.pearl-hero__inner--side {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 88px);
  max-width: 1320px;
  padding-inline: clamp(0px, 2vw, 32px);
}
.pearl-hero__inner--side .pearl-hero__copy {
  align-items: flex-start;
  text-align: left;
  max-width: 400px;
}
.pearl-hero__inner--side .pearl-hero__h1 { text-align: left; }
@media (max-width: 1100px) {
  .pearl-hero__inner--side { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 880px; }
  .pearl-hero__inner--side .pearl-hero__copy { align-items: center; text-align: center; max-width: 640px; margin: 0 auto; }
  .pearl-hero__inner--side .pearl-hero__h1 { text-align: center; }
}

/* ============================================================
   Typewriter (rotates hero taglines after shush draw)
   ============================================================ */
.pearl-hero__h1[data-pearl-typewriter] {
  min-height: 1.04em;
  display: block;
}
.pearl-typewriter__text { display: inline; }
.pearl-typewriter__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.86em;
  margin-left: 0.04em;
  vertical-align: -0.06em;
  background: rgb(var(--cb-accent));
  border-radius: 1px;
  animation: pearlCaretBlink 900ms steps(1, end) infinite;
  transform: translateY(0.04em);
}
/* While the typewriter is actively typing or deleting, lock the caret
   solid — real terminals stop blinking under keystrokes, and the constant
   blink during type-out reads as mechanical. */
.pearl-hero__h1.is-typing .pearl-typewriter__caret {
  animation: none;
  opacity: 1;
}
@keyframes pearlCaretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   App window — Mac-style desktop app frame, much larger.
   The viewport renders an iframe at native dashboard viewport
   (1440x900) and JS scales it to fit the container, so the
   real Pearl layout renders without breaking.
   ============================================================ */
.pearl-window {
  position: relative;
  width: 100%;
  max-width: 1240px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(28, 26, 38, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 40px 80px -20px rgba(28, 26, 38, 0.22),
    0 16px 32px -12px rgba(28, 26, 38, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: pearlFadeUp 820ms cubic-bezier(0.32, 0.72, 0, 1) 1500ms forwards, pearlWindowFloat 11s ease-in-out 2400ms infinite;
  align-self: center;
}
@keyframes pearlWindowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.pearl-window__chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(28, 26, 38, 0.06);
  background: rgba(246, 245, 242, 0.65);
}
.pearl-window__lights { display: flex; gap: 7px; flex-shrink: 0; }
.pearl-window__light {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 38, 0.08);
}
.pearl-window__light--r { background: #FF6058; }
.pearl-window__light--y { background: #FFBE2F; }
.pearl-window__light--g { background: #2BC840; }

.pearl-window__title {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: rgb(var(--cb-text));
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  user-select: none;
}
.pearl-window__title-mark { display: block; flex-shrink: 0; }

.pearl-window__live {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  background: rgba(127, 227, 196, 0.18);
  color: rgb(28, 110, 90);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}
.pearl-window__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(28, 110, 90);
  box-shadow: 0 0 0 0 rgba(28, 110, 90, 0.55);
  animation: pearlLivePulse 1.8s ease-out infinite;
}
@keyframes pearlLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(28, 110, 90, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(28, 110, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(28, 110, 90, 0); }
}

/* Viewport: aspect-ratio matches native dashboard viewport (16:10,
   MacBook-true) so the scaled iframe fills it precisely. JS sets
   --pearl-window-scale on the host based on container width; CSS
   does the rest. */
.pearl-window__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1200;
  background: rgb(var(--cb-bg));
  overflow: hidden;
  --pearl-window-scale: 1;
}
.pearl-window__viewport iframe {
  position: absolute;
  top: 0; left: 0;
  /* Render at 1920×1200 native (16:10), then CSS-scale to fit. The
     extra source resolution means the GPU layer has more pixels to
     downsample from, which keeps text crisp on retina. */
  width: 1920px;
  height: 1200px;
  border: 0; display: block;
  background: rgb(var(--cb-bg));
  transform-origin: top left;
  /* translateZ(0) forces a dedicated GPU compositor layer; scale3d
     keeps it on the GPU. backface-visibility + will-change tell the
     compositor to keep the layer at full quality. */
  transform: translateZ(0) scale(var(--pearl-window-scale));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  /* iframe fades in once contentDocument hides the demo banner */
  opacity: 0;
  transition: opacity 600ms ease;
  /* The hero embed is a decorative, aria-hidden poster of the running app —
     never an interactive surface. pointer-events:none keeps clicks (incl.
     the demo's own "Exit demo" / sign-out links, which would otherwise
     reload the homepage inside this frame) from ever landing here, and
     lets hero scroll/clicks pass straight through to the page. The real,
     interactive demo lives at /try. */
  pointer-events: none;
}
.pearl-window__viewport iframe.is-ready { opacity: 1; }

/* Poster — soft Pearl placeholder until iframe is ready */
.pearl-window__poster {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgb(var(--aurora-1) / 0.32), transparent 60%),
    radial-gradient(ellipse 80% 60% at 80% 90%, rgb(var(--aurora-2) / 0.28), transparent 60%),
    rgb(var(--cb-bg));
}
.pearl-window__poster-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(28, 26, 38, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 26, 38, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
}
.pearl-window__poster-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgb(var(--cb-accent));
  transform: translate(-50%, -50%);
  opacity: 0.18;
  animation: pearlPosterPulse 2.4s ease-in-out infinite;
}
@keyframes pearlPosterPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.10; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.28; }
}
.pearl-window__poster.is-hidden {
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pearl-window { animation: pearlFadeUp 820ms cubic-bezier(0.32, 0.72, 0, 1) 1500ms forwards; }
  .pearl-window__live-dot,
  .pearl-window__poster-pulse,
  .pearl-typewriter__caret { animation: none; }
}

/* ============================================================
   TopbarRing — mirrors globals.css 1601–1656
   Sized via inline style (200px on the hero).
   ============================================================ */
.topbar-ring-wrap { position: relative; }
.topbar-ring {
  position: relative;
  border-radius: 50%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
  aspect-ratio: 1;
}
.topbar-ring:hover { transform: scale(1.04); }
.topbar-ring svg { position: absolute; inset: 0; display: block; }
.topbar-ring-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 0.05em));
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  color: rgb(var(--cb-text));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
}
.topbar-ring-pct {
  font-weight: 500;
  color: rgb(var(--cb-text-muted));
  margin-left: 2px;
  letter-spacing: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* ============================================================
   Segmented action cluster — mirrors globals.css 1701–1772
   ============================================================ */
.topbar-cluster {
  display: flex;
  align-items: stretch;
  height: 44px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-top);
  border-radius: 999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.topbar-cluster-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--cb-text));
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.topbar-cluster-cell:hover { background: rgba(0, 0, 0, 0.04); }
.topbar-cluster-cell + .topbar-cluster-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--glass-border-top);
}
.topbar-cluster-cell--accent {
  background: rgb(var(--cb-accent));
  color: white;
}
.topbar-cluster-cell--accent:hover {
  background: rgb(var(--cb-accent-2));
  box-shadow: var(--glow-iris);
}
.topbar-cluster-cell--accent + .topbar-cluster-cell::before {
  /* Hide the divider that would render against the coral fill */
  background: transparent;
}

/* ============================================================
   BotBanner — mirrors globals.css 1297–1496 byte-for-byte
   ============================================================ */
.bot-banner {
  position: fixed;
  /* Dashboard ships top:16px (no nav). Website has a fixed nav up top, so
     drop the banner below it. Class name + everything else matches dashboard
     exactly so screenshots/inspector reads stay consistent. */
  top: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 60;
  width: 440px;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 14px 12px;
  background: rgba(255, 252, 248, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 50px rgba(60, 50, 40, 0.18),
    0 4px 14px rgba(60, 50, 40, 0.10);
  cursor: pointer;
  overflow: visible;
  color: rgb(var(--cb-accent));
  animation: botBannerIn 480ms cubic-bezier(0.32, 0.72, 0, 1);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.bot-banner:hover {
  transform: translateX(-50%) translateY(1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 60px rgba(60, 50, 40, 0.22),
    0 6px 18px rgba(60, 50, 40, 0.12);
}
.bot-banner--leaving {
  animation: botBannerOut 600ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.bot-banner--done {
  cursor: default;
  color: rgb(var(--cb-mint));
}
@keyframes botBannerIn {
  from { transform: translateX(-50%) translateY(-32px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes botBannerOut {
  to { transform: translateX(-50%) translateY(-32px); opacity: 0; }
}

.bot-banner-mark {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bot-banner-check {
  width: 26px;
  height: 26px;
  animation: botBannerCheckPop 360ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
@keyframes botBannerCheckPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.bot-banner-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bot-banner-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.bot-banner-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--cb-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.bot-banner-elapsed {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  color: rgb(var(--cb-text-muted));
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bot-banner-step {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  color: rgb(var(--cb-text-sec));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.bot-banner-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-radius: 0 0 18px 18px;
}
.bot-banner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(var(--cb-accent)), rgb(var(--cb-accent-2)));
  box-shadow: 0 0 8px rgb(var(--cb-accent) / 0.5);
  transition: width 600ms cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: 0 2px 2px 0;
}
.bot-banner--done .bot-banner-progress-fill {
  background: rgb(var(--cb-mint));
}
.bot-banner-progress-shimmer {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgb(var(--cb-accent)), transparent);
  animation: botBannerShimmer 1.4s linear infinite;
}
@keyframes botBannerShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(440%); }
}

/* ============================================================
   Shush S logo — mirrors globals.css 1371–1429
   Mount: ribbon strokes in → fills → finger fades in.
   While .shush-s--active, comet ink trail (head + halo) traverses path.
   ============================================================ */
.shush-s {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Mount sequence */
.shush-s-ribbon {
  fill-opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation:
    shushDraw 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards,
    shushFill 380ms ease-out 820ms forwards;
}
@keyframes shushDraw { to { stroke-dashoffset: 0; } }
@keyframes shushFill {
  from { fill-opacity: 0; stroke-opacity: 1; }
  to   { fill-opacity: 1; stroke-opacity: 0; }
}

/* Finger — fade in once, no loop */
.shush-s-finger {
  opacity: 0;
  animation: shushFingerIn 420ms cubic-bezier(0.32, 0.72, 0, 1) 1080ms forwards;
}
@keyframes shushFingerIn {
  from { opacity: 0; transform: scale(0.92); transform-origin: 50% 60%; }
  to   { opacity: 1; transform: scale(1); }
}

/* Comet ink trail — head leads halo by ~180ms, both travel the S path
   over 3.5s. stroke-dashoffset 0→-100 (pathLength=100 normalizes the
   dash math regardless of actual perimeter length). */
.shush-trail {
  opacity: 0;
  stroke-dashoffset: 0;
  animation:
    shushTrailFadeIn 0.5s ease-out 1500ms forwards,
    shushTrailTravel 3.5s linear 1500ms infinite;
}
.shush-trail--head { animation-delay: 1500ms, 1320ms; }
@keyframes shushTrailFadeIn { to { opacity: 1; } }
@keyframes shushTrailTravel { to { stroke-dashoffset: -100; } }

/* Pause the trail on idle/done state */
.bot-banner--done .shush-trail {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .shush-trail { display: none; }
  .pearl-hero__mark { animation: none; }
}

/* ============================================================
   Phase 4 — Feature rails (mirrors ClassRails.tsx)
   Six glass rows, seven day cells, 32px completion ring.
   Class names are pearl-prefixed so they don't collide with the
   dashboard's own .rail / .rail-cell selectors that ship inside
   the iframe demo.
   ============================================================ */
.pearl-section {
  position: relative;
  padding: var(--space-xl) var(--space-md) var(--space-xl);
  background-color: rgb(var(--cb-bg));
}
/* Collapse the vertical gap between two adjacent Pearl sections.
   A full --space-xl on both sides would compound into a ~178px
   hole that reads as broken rhythm; dropping the upper section's
   top pad to --space-lg lands the section-to-section gap at the
   next φ step up (89 + 55 = 144 — itself a Fibonacci number). */
.pearl-section + .pearl-section { padding-top: var(--space-lg); }
.pearl-section-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.pearl-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}
@media (max-width: 720px) {
  .pearl-section { padding: var(--space-lg) 20px var(--space-lg); }
  .pearl-section + .pearl-section { padding-top: var(--space-md); }
  .pearl-section-header { margin-bottom: var(--space-md); }
}
.pearl-section-kicker {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--cb-accent));
  /* kicker → h2 gap is φ × the h2 → sub gap below it, so the
     header copy compresses as the eye travels down it */
  margin-bottom: var(--space-sm);
}
.pearl-section-h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgb(var(--cb-text));
  margin: 0 0 var(--space-xs);
}
.pearl-section-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgb(var(--cb-text-sec));
  margin: 0;
}

/* Pearl line-icon family (PEARL_ICONS in pearl.js + static SVGs in
   index.html). Block display kills the inline-SVG baseline gap; the
   stroke inherits currentColor from whatever Pearl-token container it
   sits in (coral glyph tile, mint "done" cell, white "live" cell, …). */
.pearl-icon { display: block; }


/* ============================================================
   Phase 4 — Humanizer interactive
   Three stages: paste → loading ring (3s mocked) → side-by-side
   result + score-drop ring. Locked client-side mock; no network.
   ============================================================ */
.pearl-humanizer {
  max-width: 880px;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 22px;
  padding: 28px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
}
.pearl-humanizer-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pearl-humanizer-textarea {
  width: 100%;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(var(--cb-text));
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 26, 38, 0.10);
  border-radius: 14px;
  padding: 16px 18px;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pearl-humanizer-textarea:focus {
  outline: none;
  border-color: rgba(var(--cb-accent), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--cb-accent), 0.18);
}
.pearl-humanizer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pearl-humanizer-row--footer { margin-top: 18px; }
.pearl-humanizer-hint {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: rgb(var(--cb-text-muted));
}
.pearl-humanizer-cta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: rgb(var(--cb-accent));
  border: 0;
  border-radius: 12px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pearl-humanizer-cta:hover {
  background: rgb(var(--cb-accent-2));
  box-shadow: var(--glow-iris);
  transform: translateY(-1px);
}
.pearl-humanizer-cta--ghost {
  background: transparent;
  color: rgb(var(--cb-text));
  border: 1px solid rgba(28, 26, 38, 0.14);
}
.pearl-humanizer-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.pearl-humanizer-stage--loading {
  align-items: center;
  text-align: center;
  padding: 42px 12px 36px;
}
.pearl-humanizer-loading-ring { margin-bottom: 18px; }
.pearl-humanizer-loading-msg {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: rgb(var(--cb-text));
}
.pearl-humanizer-loading-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  color: rgb(var(--cb-text-sec));
  max-width: 360px;
}

.pearl-humanizer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pearl-humanizer-panel {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 26, 38, 0.08);
  border-radius: 14px;
  padding: 14px 16px 16px;
}
.pearl-humanizer-panel--before { border-color: rgba(196, 68, 68, 0.18); }
.pearl-humanizer-panel--after  { border-color: rgba(28, 110, 90, 0.20); background: rgba(224, 248, 240, 0.55); }
.pearl-humanizer-panel-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--cb-text-muted));
  margin-bottom: 8px;
}
.pearl-humanizer-panel--before .pearl-humanizer-panel-label { color: rgb(196, 68, 68); }
.pearl-humanizer-panel--after  .pearl-humanizer-panel-label { color: rgb(28, 110, 90); }
.pearl-humanizer-panel-text {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgb(var(--cb-text));
}

.pearl-humanizer-meter {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(28, 26, 38, 0.08);
  border-radius: 14px;
}
.pearl-humanizer-meter-text { display: flex; flex-direction: column; gap: 2px; }
.pearl-humanizer-meter-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--cb-text-muted));
}
.pearl-humanizer-meter-sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  color: rgb(var(--cb-text));
  font-variant-numeric: tabular-nums;
}

.pearl-score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1;
}
.pearl-score-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pearl-score-ring-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 0.06em));
  line-height: 1;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cb-text));
  letter-spacing: -0.02em;
}

@media (max-width: 720px) {
  .pearl-humanizer-grid { grid-template-columns: 1fr; }
  .pearl-humanizer-meter { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Phase 5 — Pricing cards + ROI calculator
   Three pricing-card columns with hours-saved rings, an ROI
   slider card below. All tokens come from index.html :root.
   ============================================================ */

/* Soft variant of pearl-section for the ROI band so pricing
   reads first and the calculator sits in a slightly lifted
   panel beneath it without leaving the same hue family. */
.pearl-section--soft {
  background-image:
    radial-gradient(ellipse 1100px 700px at 12% 0%, rgb(var(--aurora-1) / 0.18), transparent 55%),
    radial-gradient(ellipse 900px 600px at 88% 100%, rgb(var(--aurora-2) / 0.20), transparent 60%);
}

.pearl-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  align-items: stretch;
}

.pearl-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 28px 24px 26px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pearl-pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.pearl-pricing-card--featured {
  border-color: rgba(var(--cb-accent), 0.35);
  box-shadow: var(--shadow-card-hover), var(--glow-iris);
  transform: translateY(-4px);
}
.pearl-pricing-card--featured:hover {
  transform: translateY(-6px);
}

.pearl-pricing-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(var(--cb-accent));
  color: white;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--glow-iris);
  white-space: nowrap;
}

/* Hours-saved counter — large Newsreader number that tweens 0→target
   on scroll-into-view. Replaced the fuel-gauge bar; a clean number
   reads at a glance and stops competing with the price + feature list
   for attention. */
.pearl-pricing-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.pearl-pricing-counter__num-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: rgb(var(--cb-text));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pearl-pricing-counter__dollar {
  font-size: 32px;
  color: rgb(var(--cb-text-sec));
  font-weight: 500;
  margin-right: 2px;
}
.pearl-pricing-counter__num {
  font-size: 56px;
}
.pearl-pricing-card--featured .pearl-pricing-counter__num,
.pearl-pricing-card--featured .pearl-pricing-counter__dollar {
  color: rgb(var(--cb-accent));
}
.pearl-pricing-counter__cap {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
  white-space: nowrap;
}

.pearl-pricing-name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: rgb(var(--cb-text));
  text-align: center;
  letter-spacing: -0.01em;
}

.pearl-pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: -4px;
}
.pearl-pricing-amount {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  color: rgb(var(--cb-text));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pearl-pricing-cadence {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  color: rgb(var(--cb-text-muted));
  font-weight: 500;
}

.pearl-pricing-pitch {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: rgb(var(--cb-text-sec));
  min-height: 38px;
  padding: 0 4px;
}

.pearl-pricing-features {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pearl-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgb(var(--cb-text));
}
.pearl-pricing-feature.is-excluded {
  color: rgb(var(--cb-text-muted));
}
.pearl-pricing-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.pearl-pricing-badge--done {
  background: rgb(var(--cb-mint-light));
  color: rgb(28, 110, 90);
}
.pearl-pricing-badge--excluded {
  background: rgba(28, 26, 38, 0.05);
  color: rgb(var(--cb-text-muted));
}
.pearl-pricing-feature-text { min-width: 0; flex: 1; }
/* "NEW" pill that calls out the just-added perks per tier. Coral
   accent, tiny, all-caps — same tone the route-pulse uses. */
.pearl-pricing-feature-new {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgb(var(--cb-accent) / 0.14);
  color: rgb(var(--cb-accent));
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
  align-self: center;
}

.pearl-pricing-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: rgb(var(--cb-accent));
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pearl-pricing-cta:hover {
  background: rgb(var(--cb-accent-2));
  box-shadow: var(--glow-iris);
  transform: translateY(-1px);
}
.pearl-pricing-card:not(.pearl-pricing-card--featured) .pearl-pricing-cta {
  background: transparent;
  color: rgb(var(--cb-text));
  border: 1px solid rgba(28, 26, 38, 0.14);
}
.pearl-pricing-card:not(.pearl-pricing-card--featured) .pearl-pricing-cta:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgb(var(--cb-accent));
  color: rgb(var(--cb-accent));
  box-shadow: none;
}

@media (max-width: 880px) {
  .pearl-pricing-grid { grid-template-columns: 1fr; gap: 18px; }
  .pearl-pricing-card--featured { transform: none; }
  .pearl-pricing-card--featured:hover { transform: translateY(-2px); }
}

/* ── ROI calculator ─────────────────────────────────────────── */
.pearl-roi-card {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 22px;
  padding: var(--space-md);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-card);
}
.pearl-roi-grid {
  display: grid;
  /* Golden split: the slider inputs take the φ-major share, the
     ring takes the minor — 1.618fr : 1fr. (Literal fr values —
     calc() on <flex> tracks isn't reliable cross-browser.) */
  grid-template-columns: 1.618fr 1fr;
  gap: var(--space-md);
  align-items: center;
}
.pearl-roi-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.pearl-roi-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pearl-roi-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pearl-roi-slider-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--cb-text));
}
.pearl-roi-slider-value {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: rgb(var(--cb-accent));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Reuse the same coral-fill slider treatment as the legacy calculator,
   restyled with Pearl tokens so it matches the rest of the surface. */
.pearl-roi-slider-track {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    rgb(var(--cb-accent)) 0%,
    rgb(var(--cb-accent-2)) var(--pct, 50%),
    rgba(28, 26, 38, 0.10) var(--pct, 50%),
    rgba(28, 26, 38, 0.10) 100%
  );
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.pearl-roi-slider-track::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
.pearl-roi-slider-track::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
.pearl-roi-slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgb(var(--cb-accent));
  box-shadow: 0 4px 12px rgba(255, 161, 126, 0.32);
  cursor: grab;
  margin-top: -8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pearl-roi-slider-track::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pearl-roi-slider-track::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.04); }
.pearl-roi-slider-track::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgb(var(--cb-accent));
  box-shadow: 0 4px 12px rgba(255, 161, 126, 0.32);
  cursor: grab;
}

.pearl-roi-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
}
.pearl-roi-ring {
  position: relative;
  display: inline-flex;
  aspect-ratio: 1;
}
.pearl-roi-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pearl-roi-ring-num {
  position: absolute;
  left: 50%;
  top: 50%;
  /* nudge up so the {hours, "hrs / wk"} pair straddles the middle */
  transform: translate(-50%, calc(-50% - 9px));
  font-family: 'Newsreader', Georgia, serif;
  font-size: 56px;
  font-weight: 600;
  color: rgb(var(--cb-text));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pearl-roi-ring-unit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 31px));
  line-height: 1;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
  white-space: nowrap;
}
.pearl-roi-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.pearl-roi-line {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  line-height: 1.45;
  color: rgb(var(--cb-text));
  letter-spacing: -0.005em;
}
.pearl-roi-line strong {
  font-weight: 600;
  color: rgb(var(--cb-accent));
  font-variant-numeric: tabular-nums;
}
.pearl-roi-hint {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: rgb(var(--cb-text-muted));
}

@media (max-width: 880px) {
  .pearl-roi-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .pearl-roi-output { padding: 0; }
  .pearl-roi-card { padding: var(--space-sm); }
  .pearl-roi-ring-num { font-size: 44px; }
}

/* ============================================================
   Phase 6 — Cinematic "How it works"
   Detect → Draft → Submit. Three scenes pinned via IO; mobile
   collapses to stacked cards with a ▶ play button per scene.
   No third-party libs; all keyframes + transitions are native.
   Reuses the Phase 0 :root tokens — no new colours introduced.
   ============================================================ */

/* Real Pearl status badges, mirrored 1:1 from
   packages/dashboard/app/globals.css :218–239 (where the dashboard
   declares them via Tailwind @apply). The Submit scene transitions
   between these two, so the markup uses the same class names a
   reviewer would find by Inspect-Element on a dashboard page. The
   selector is unscoped because account.html doesn't load pearl.css
   and index.html has no other .badge rule (verified before adding). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 2px 10px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.badge-in-progress {
  background-color: rgb(var(--cb-accent-light));
  color: rgb(var(--cb-accent));
}
.badge-in-progress::before {
  background: rgb(var(--cb-accent));
}
.badge-submitted {
  background-color: rgb(var(--cb-success-light));
  color: rgb(var(--cb-success));
}
.badge-submitted::before {
  background: rgb(var(--cb-success));
}

/* ============================================================
   "How it works" — Phase 10 vertical assembly line
   ────────────────────────────────────────────────────────────
   One assignment runs top-to-bottom through four machine
   stages. A connector "spine" links the stage ports; as each
   stage finishes, the connector beneath it energizes and a
   work-card rides it down to the next port, which lights up
   and opens its panel to the matching app screen (the four
   reused scene builders in pearl.js).

   Geometry contract: every port sits at --how-port-top from
   its stage's top edge, and every connector starts at that
   port and ends calc(--how-gap + --how-port-top) past the
   stage's bottom edge — i.e. exactly the next port. Because
   --how-port-top and --how-gap are fixed, the connector
   auto-stretches as panels open and close, with zero JS
   pixel-measuring.

   Timing contract: --how-flow-dur MUST match HOW_HANDOFF_MS
   in pearl.js — the connector-flow animation and the JS
   hand-off timer run in lockstep.
   ============================================================ */
.pearl-section--how {
  position: relative;
  overflow: clip;
}
.pearl-section--how::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 1300px 800px at 88% 12%, rgb(var(--aurora-1) / 0.20), transparent 55%),
    radial-gradient(ellipse 1100px 700px at 8% 88%, rgb(var(--aurora-2) / 0.18), transparent 60%);
  z-index: 0;
}
.pearl-section--how > .pearl-section-inner {
  position: relative;
  z-index: 1;
  /* Theater layout deserves more breathing room than the default
     section inner — widen the rail+screen split. */
  max-width: 1320px;
}

/* ============================================================
   How-it-works v2 — theater split (left 1/3 timeline + right 2/3
   live screen). On narrow viewports it stacks back to a single
   column with the screen on top, rail beneath.
   ============================================================ */
.pearl-how--theater {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 56px;
  align-items: start;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* ---- LEFT: vertical timeline rail ---- */
.pearl-how-rail {
  position: relative;
  align-self: stretch;
}
.pearl-how-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pearl-how-rail-step {
  position: relative;
  --rail-port-cx: 22px;
  padding: 4px 0;
}
.pearl-how-rail-btn {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  width: 100%;
  padding: 14px 18px 14px 0;
  background: transparent;
  border: 0;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: background 0.4s ease, transform 0.4s ease;
}
.pearl-how-rail-step.is-active .pearl-how-rail-btn {
  background: rgb(var(--cb-accent) / 0.04);
}
.pearl-how-rail-btn:hover {
  background: rgba(28, 26, 38, 0.025);
}
.pearl-how-rail-step.is-active .pearl-how-rail-btn:hover {
  background: rgb(var(--cb-accent) / 0.06);
}

/* Port — the work "docks" here as the step processes. */
.pearl-how-rail-port {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(var(--cb-surface));
  border: 1.5px solid rgba(28, 26, 38, 0.14);
  color: rgb(var(--cb-text-muted));
  z-index: 3;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease,
              box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.pearl-how-rail-port > * { grid-area: 1 / 1; }
.pearl-how-rail-port-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px dashed rgb(var(--cb-accent) / 0.6);
  opacity: 0;
  transform: scale(1.42);
  transition: opacity 0.4s ease;
}
.pearl-how-rail-port-icon,
.pearl-how-rail-port-check { transition: opacity 0.3s ease, transform 0.3s ease; }
.pearl-how-rail-port-check { opacity: 0; transform: scale(0.5); }

.pearl-how-rail-step.is-pending .pearl-how-rail-port { transform: scale(0.82); }
.pearl-how-rail-step.is-pending .pearl-how-rail-port-icon { opacity: 0.45; }

.pearl-how-rail-step.is-active .pearl-how-rail-port {
  background: rgb(var(--cb-accent));
  border-color: rgb(var(--cb-accent));
  color: rgb(var(--cb-text-inverse));
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgb(var(--cb-accent) / 0.14), var(--glow-iris);
}
.pearl-how-rail-step.is-active .pearl-how-rail-port-ring {
  opacity: 1;
  animation: pearlHowPortSpin 3.4s linear infinite;
}
@keyframes pearlHowPortSpin { to { transform: scale(1.42) rotate(360deg); } }

.pearl-how-rail-step.is-done .pearl-how-rail-port {
  background: rgb(var(--cb-success));
  border-color: rgb(var(--cb-success));
  color: rgb(var(--cb-text-inverse));
}
.pearl-how-rail-step.is-done .pearl-how-rail-port-icon { opacity: 0; transform: scale(0.5); }
.pearl-how-rail-step.is-done .pearl-how-rail-port-check { opacity: 1; transform: scale(1); }

/* Text block — name / title / body / status */
.pearl-how-rail-text { min-width: 0; display: block; }
.pearl-how-rail-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
  transition: color 0.4s ease;
}
.pearl-how-rail-step.is-active .pearl-how-rail-name { color: rgb(var(--cb-accent)); }
.pearl-how-rail-step.is-done .pearl-how-rail-name { color: rgb(var(--cb-success)); }
.pearl-how-rail-title {
  display: block;
  margin-top: 4px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: rgb(var(--cb-text));
}
.pearl-how-rail-body {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgb(var(--cb-text-sec));
}
.pearl-how-rail-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cb-text-muted));
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease;
}
.pearl-how-rail-step.is-active .pearl-how-rail-status {
  opacity: 1;
  max-height: 20px;
  color: rgb(var(--cb-accent));
}
.pearl-how-rail-status-spinner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1.5px solid rgb(var(--cb-accent) / 0.3);
  border-top-color: rgb(var(--cb-accent));
  animation: pearlHowSpin 0.7s linear infinite;
}
@keyframes pearlHowSpin { to { transform: rotate(360deg); } }

/* Connector line between consecutive ports */
.pearl-how-rail-connector {
  position: absolute;
  left: var(--rail-port-cx);
  top: 62px;
  bottom: -8px;
  width: 2px;
  transform: translateX(-50%);
  z-index: 1;
}
.pearl-how-rail-connector-track,
.pearl-how-rail-connector-fill {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 2px;
}
.pearl-how-rail-connector-track {
  top: 0; bottom: 0;
  background: rgba(28, 26, 38, 0.10);
}
.pearl-how-rail-connector-fill {
  top: 0;
  height: 0%;
  background: linear-gradient(180deg, rgb(var(--cb-success)), rgb(var(--cb-accent)));
}
.pearl-how-rail-connector.is-flowing .pearl-how-rail-connector-fill {
  animation: pearlHowConnFill 0.56s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
.pearl-how-rail-connector.is-done .pearl-how-rail-connector-fill { height: 100%; }
@keyframes pearlHowConnFill { from { height: 0%; } to { height: 100%; } }

/* Work-card riding the connector — a small chip representing the
   assignment being passed from one stage to the next. */
.pearl-how-rail-connector-chip {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  background: rgb(var(--cb-surface));
  border: 1.5px solid rgb(var(--cb-accent) / 0.55);
  box-shadow: var(--glow-iris), 0 4px 12px rgb(var(--cb-accent) / 0.25);
  background-image:
    linear-gradient(rgb(var(--cb-accent) / 0.55) 0 0),
    linear-gradient(rgb(var(--cb-accent) / 0.35) 0 0);
  background-size: 14px 2px, 10px 2px;
  background-position: 7px 8px, 7px 13px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 2;
}
.pearl-how-rail-connector.is-flowing .pearl-how-rail-connector-chip {
  animation: pearlHowFlowChip 0.56s cubic-bezier(0.4, 0.1, 0.2, 1) forwards;
}
@keyframes pearlHowFlowChip {
  0%   { top: 0;    opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { top: 100%; opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* ---- RIGHT: live screen ---- */
.pearl-how-screen {
  position: relative;
  position: sticky;
  top: 88px;
  align-self: start;
}
.pearl-how-screen-frame {
  position: relative;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(28, 26, 38, 0.08);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 60px 100px -30px rgba(28, 26, 38, 0.28),
    0 24px 48px -16px rgba(28, 26, 38, 0.16);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  overflow: hidden;
}
.pearl-how-screen-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(28, 26, 38, 0.06);
  background: rgba(246, 245, 242, 0.65);
}
.pearl-how-screen-lights { display: flex; gap: 7px; flex-shrink: 0; }
.pearl-how-screen-light {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 38, 0.08);
}
.pearl-how-screen-light--r { background: #FF6058; }
.pearl-how-screen-light--y { background: #FFBE2F; }
.pearl-how-screen-light--g { background: #2BC840; }
.pearl-how-screen-title {
  text-align: center;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgb(var(--cb-text));
  transition: opacity 0.3s ease;
}
.pearl-how-screen-live {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  background: rgba(127, 227, 196, 0.18);
  color: rgb(28, 110, 90);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}
.pearl-how-screen-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(28, 110, 90);
  box-shadow: 0 0 0 0 rgba(28, 110, 90, 0.55);
  animation: pearlLivePulse 1.8s ease-out infinite;
}

/* Stage: the 4 scenes stack here, only one .is-active at a time */
.pearl-how-screen-stage {
  position: relative;
  /* 16:10 so the pane reads like a MacBook screen */
  aspect-ratio: 16 / 10;
  background: rgb(var(--cb-bg));
  overflow: hidden;
}
.pearl-how-pane--positioned {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.pearl-how-pane--positioned.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Decorative data-line that visually connects the active rail step
   to the right-pane screen. Pure decoration. */
.pearl-how-dataline {
  position: absolute;
  left: -56px;
  top: 40%;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgb(var(--cb-accent) / 0.4) 50%, rgb(var(--cb-accent) / 0.7) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Scene pane styling — same as before, but now lives in the right
   pane instead of inside a stage panel. */
.pearl-how-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 24px 22px;
}
.pearl-how-pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(28, 26, 38, 0.06);
}
.pearl-how-pane-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: rgb(var(--cb-text));
  letter-spacing: -0.005em;
}
.pearl-how-pane-meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: rgb(var(--cb-text-muted));
  font-variant-numeric: tabular-nums;
}

/* Responsive — stack rail above screen on narrow viewports. */
@media (max-width: 960px) {
  .pearl-how--theater {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pearl-how-screen {
    position: relative;
    top: 0;
    order: 1;
  }
  .pearl-how-rail { order: 2; }
  .pearl-how-dataline { display: none; }
}
@media (max-width: 720px) {
  .pearl-how-rail-btn { grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 14px 12px 0; }
  .pearl-how-rail-port { width: 36px; height: 36px; }
  .pearl-how-rail-title { font-size: 19px; }
  .pearl-how-rail-step { --rail-port-cx: 18px; }
  .pearl-how-rail-connector { top: 52px; }
  .pearl-how-pane { padding: 14px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pearl-how-port,
  .pearl-how-panel,
  .pearl-how-stage-body { transition: none; }
  .pearl-how-stage.is-active .pearl-how-port-ring,
  .pearl-how-stage.is-active .pearl-how-stage-status-spinner { animation: none; }
  .pearl-how-connector.is-flowing .pearl-how-connector-fill,
  .pearl-how-connector.is-flowing .pearl-how-flow { animation-duration: 1ms; }
}

/* ---- Detect pane — assignment list ─────────────────────── */
.pearl-how-list {
  display: grid;
  gap: 6px;
  flex: 1;
  align-content: start;
  overflow: hidden;
}
.pearl-how-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(28, 26, 38, 0.02);
  border: 1px solid rgba(28, 26, 38, 0.05);
  font-family: 'DM Sans', system-ui, sans-serif;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s cubic-bezier(.22,.61,.36,1),
    transform 0.4s cubic-bezier(.22,.61,.36,1),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.pearl-how-list.is-playing .pearl-how-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--idx) * 70ms);
}
.pearl-how-row-course {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
}
.pearl-how-row-title {
  font-size: 13.5px;
  color: rgb(var(--cb-text));
  font-weight: 500;
}
.pearl-how-row-due {
  font-size: 12px;
  color: rgb(var(--cb-text-muted));
  font-variant-numeric: tabular-nums;
}
.pearl-how-row-due--submitted { color: rgb(var(--cb-success)); }
.pearl-how-row-due--urgent {
  color: rgb(var(--cb-accent));
  font-weight: 600;
}
.pearl-how-row--target {
  border-color: rgb(var(--cb-accent) / 0.28);
}
.pearl-how-list.is-target-pulse .pearl-how-row--target {
  background: rgb(var(--cb-accent-light) / 0.85);
  border-color: rgb(var(--cb-accent) / 0.55);
  box-shadow:
    0 0 0 1px rgb(var(--cb-accent) / 0.25),
    var(--glow-iris);
  animation: pearlHowRowPulse 2.4s cubic-bezier(.22,.61,.36,1) 0.35s 2;
}
@keyframes pearlHowRowPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 1px rgb(var(--cb-accent) / 0.25), var(--glow-iris);
  }
  50% {
    transform: translateY(-1px) scale(1.005);
    box-shadow: 0 0 0 1px rgb(var(--cb-accent) / 0.45), 0 0 36px rgb(var(--cb-accent) / 0.55);
  }
}

/* ---- Quiz pane — single MCQ + 12-dot progress strip ──── */
.pearl-how-quiz-card {
  background: rgba(28, 26, 38, 0.02);
  border: 1px solid rgba(28, 26, 38, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.pearl-how-quiz-question {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15.5px;
  line-height: 1.45;
  color: rgb(var(--cb-text));
  letter-spacing: -0.005em;
}
.pearl-how-quiz-options {
  display: grid;
  gap: 7px;
}
.pearl-how-quiz-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border-radius: 9px;
  background: rgb(var(--cb-bg));
  border: 1px solid rgba(28, 26, 38, 0.08);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  color: rgb(var(--cb-text-sec));
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.pearl-how-quiz-bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(28, 26, 38, 0.20);
  flex-shrink: 0;
  position: relative;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.pearl-how-quiz-option.is-correct {
  background: rgb(var(--cb-success-light));
  border-color: rgb(var(--cb-success) / 0.40);
  color: rgb(var(--cb-text));
  font-weight: 500;
  box-shadow: 0 0 0 1px rgb(var(--cb-success) / 0.20);
}
.pearl-how-quiz-option.is-correct .pearl-how-quiz-bullet {
  background: rgb(var(--cb-success));
  border-color: rgb(var(--cb-success));
}
.pearl-how-quiz-option.is-correct .pearl-how-quiz-bullet::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 5.5px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.pearl-how-quiz-progress {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}
.pearl-how-quiz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(28, 26, 38, 0.10);
  transition: background 0.22s ease, transform 0.22s ease;
}
.pearl-how-quiz-dot.is-done {
  background: rgb(var(--cb-success));
  transform: scale(1.08);
}

/* ---- Draft pane — rubric + essay split ─────────────────── */
.pearl-how-draft-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.pearl-how-panel {
  background: rgba(28, 26, 38, 0.02);
  border: 1px solid rgba(28, 26, 38, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pearl-how-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.pearl-how-panel-kicker {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
}
.pearl-how-rubric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.pearl-how-rubric-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12.5px;
  color: rgb(var(--cb-text-sec));
  line-height: 1.5;
}
.pearl-how-rubric-list b {
  color: rgb(var(--cb-text));
  font-weight: 600;
}
.pearl-how-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: rgb(var(--cb-bg));
  color: rgb(var(--cb-text-muted));
  border: 1px solid rgba(28, 26, 38, 0.10);
  font-size: 11px;
  font-weight: 700;
}
.pearl-how-check--done {
  background: rgb(var(--cb-success-light));
  color: rgb(var(--cb-success));
  border-color: rgb(var(--cb-success) / 0.25);
}
.pearl-how-essay-body {
  flex: 1;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgb(var(--cb-text));
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
.pearl-how-essay-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: rgb(var(--cb-accent));
  opacity: 0;
}
.pearl-how-panel--essay.is-typing .pearl-how-essay-caret {
  animation: pearlHowCaretBlink 1s steps(2, jump-none) infinite;
}
@keyframes pearlHowCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.pearl-how-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 1;
}
.pearl-how-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.pearl-how-ring-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 0.06em));
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: rgb(var(--cb-text));
  transition: color 0.25s ease;
}

/* ---- Submit pane — confirmation card ───────────────────── */
.pearl-how-submit-card {
  background: rgba(28, 26, 38, 0.02);
  border: 1px solid rgba(28, 26, 38, 0.06);
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  gap: 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
  margin: auto 0;
}
.pearl-how-submit-card.is-submitted {
  border-color: rgb(var(--cb-success) / 0.40);
  box-shadow:
    0 0 0 1px rgb(var(--cb-success) / 0.18),
    var(--glow-mint);
}
.pearl-how-submit-head {
  display: grid;
  gap: 4px;
  border-bottom: 1px dashed rgba(28, 26, 38, 0.10);
  padding-bottom: 10px;
}
.pearl-how-submit-course {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
}
.pearl-how-submit-title {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  color: rgb(var(--cb-text));
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pearl-how-submit-due {
  font-size: 12.5px;
  color: rgb(var(--cb-text-sec));
}
.pearl-how-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
.pearl-how-submit-label {
  color: rgb(var(--cb-text-muted));
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.pearl-how-submit-confidence {
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cb-success));
  font-weight: 600;
}
.pearl-how-submit-mode {
  color: rgb(var(--cb-text));
  font-weight: 500;
}
.pearl-how-submit-receipt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgb(var(--cb-success-light) / 0.6);
  color: rgb(var(--cb-success));
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pearl-how-submit-receipt.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.pearl-how-submit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: rgb(var(--cb-success));
  color: rgb(var(--cb-text-inverse));
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Tablet/mobile — scene-internal tweaks only. The assembly
   line itself is responsive by construction (it's a single
   column at every width); the rail metrics shrink via the
   --how-* overrides in the section block above. ─────────────── */
@media (max-width: 720px) {
  .pearl-how-pane-title { font-size: 15px; }
  .pearl-how-row { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 10px 12px; }
  .pearl-how-row-title { font-size: 13px; }
  .pearl-how-row-due { font-size: 11.5px; }
  .pearl-how-draft-grid { grid-template-columns: 1fr; gap: 8px; }
  .pearl-how-essay-body { font-size: 13.5px; }
  .pearl-how-submit-title { font-size: 17px; }
  .pearl-how-submit-card { padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pearl-how-row { transition: none; opacity: 1; transform: none; }
  .pearl-how-list.is-target-pulse .pearl-how-row--target { animation: none; }
  .pearl-how-essay-caret { animation: none; }
  .pearl-how-submit-receipt { transition: none; }
}

/* ============================================================
   Phase 7 — polish + bold swings
   ────────────────────────────────────────────────────────────
   1. Shush-S motion identity (CTA finger nudge, route pulse, 404)
   2. Time-of-day aurora variants
   3. Footer live-stat strip
   ============================================================ */

/* ── Shush-S motion identity ─────────────────────────────── */

/* CTA hover finger-nudge. Inline shush mark gets injected into primary
   CTAs at boot via pearl.js's `installCtaShushNudge`. The mark itself is
   visually invisible (zero-width spacer) on the website CTAs — only the
   `transform` jump on hover is doing visible work. Keeping it as a
   gated class means the rule never matches a non-CTA shush-S elsewhere
   on the page (hero, footer pill, BotBanner). */
.pearl-cta-mark {
  display: inline-flex;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  color: currentColor;
  flex-shrink: 0;
  pointer-events: none;
}
.pearl-cta-mark .shush-s-ribbon {
  fill-opacity: 1;
  stroke-opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.pearl-cta-mark .shush-s-finger {
  opacity: 0.95;
  transform: none;
  animation: none;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: 50% 60%;
}
/* Hover the CTA → finger nudges 2px down. Triggered from any ancestor
   marked .pearl-cta-host so the rule covers `.signup-trigger`,
   `.topbar-cluster-cell--accent`, `.pearl-pricing-cta`, etc. */
.pearl-cta-host:hover .pearl-cta-mark .shush-s-finger,
.pearl-cta-host:focus-visible .pearl-cta-mark .shush-s-finger {
  transform: translateY(2px);
}

/* Route-transition pulse — a tiny shush-S finger pulse over the page
   during internal-link navigations. ~120ms, then a quick fade. JS sets
   sessionStorage on click, then the *next* page's boot reads it and
   plays the pulse over the loaded shell. Pearl tokens only, no
   third-party libs, no scroll-jacking. */
.pearl-route-pulse {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: rgb(var(--cb-bg) / 0.0);
  animation: pearlRoutePulseFade 360ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.pearl-route-pulse__mark {
  width: 56px;
  height: 56px;
  color: rgb(var(--cb-accent));
  opacity: 0;
  transform: scale(0.92);
  animation: pearlRoutePulseMark 360ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.pearl-route-pulse__mark .shush-s-ribbon {
  fill-opacity: 1;
  stroke-opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.pearl-route-pulse__mark .shush-s-finger {
  opacity: 0.95;
  animation: pearlRoutePulseFinger 240ms cubic-bezier(0.32, 0.72, 0, 1) 60ms backwards;
  transform-origin: 50% 60%;
}
@keyframes pearlRoutePulseFade {
  0%   { background: rgb(var(--cb-bg) / 0.0); }
  40%  { background: rgb(var(--cb-bg) / 0.10); }
  100% { background: rgb(var(--cb-bg) / 0.0); }
}
@keyframes pearlRoutePulseMark {
  0%   { opacity: 0; transform: scale(0.92); }
  40%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes pearlRoutePulseFinger {
  0%   { transform: translateY(-1px); }
  100% { transform: translateY(2px); }
}

/* 404 page — half-drawn shush. Ribbon strokes in to ~40% of the path
   and *stops*. The finger never fades in. The `dash-offset` end value
   is what makes it look "frozen halfway" instead of "still drawing".
   Lives here (instead of inline in 404.html) so the same source-of-truth
   token + path animations stay in one place. */
.pearl-404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--cb-bg));
  color: rgb(var(--cb-text));
  text-align: center;
}
.pearl-404__aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 1100px 700px at 12% 0%, rgb(var(--aurora-1) / 0.32), transparent 55%),
    radial-gradient(ellipse 900px 600px at 88% 100%, rgb(var(--aurora-3) / 0.24), transparent 60%);
}
.pearl-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 520px;
}
.pearl-404__mark {
  width: 220px;
  height: 220px;
  color: rgb(var(--cb-accent));
}
.pearl-404__mark .shush-s-ribbon {
  fill: none;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-opacity: 1;
  stroke-width: 28;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pearl404Half 1400ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.pearl-404__mark .shush-s-finger {
  display: none; /* Stays quiet — finger never appears. */
}
@keyframes pearl404Half {
  /* Stops at 60 (60% remaining ⇒ 40% drawn). The fill-opacity stays at
     0 so the unfinished feel survives the freeze. */
  to { stroke-dashoffset: 60; }
}
.pearl-404__num {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 500;
  line-height: 1;
  color: rgb(var(--cb-accent));
  letter-spacing: -0.02em;
}
.pearl-404__caption {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  color: rgb(var(--cb-text-sec));
  max-width: 28ch;
  line-height: 1.4;
}
.pearl-404__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: rgb(var(--cb-accent));
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pearl-404__back:hover {
  background: rgb(var(--cb-accent-2));
  box-shadow: var(--glow-iris);
  transform: translateY(-1px);
}

/* ── Time-of-day aurora ──────────────────────────────────── */
/* JS sets `body[data-time]` on boot from the visitor's local hour.
   Buckets:
     "night" 00–06  (cool slate-blue, see one-off note below)
     "dawn"  06–12  (mint→peach)
     "day"   12–18  (Pearl default)
     "dusk"  18–24  (deeper coral/indigo)
   All variants reuse the same `.pearl-hero__aurora` shape and layer
   geometry as Phase 1 — only opacities and (for night) the `--aurora-*`
   refs change. The Phase-7 master plan locks this as the only place
   where a one-off color is allowed; everywhere else stays on the
   --aurora-1/2/3 tokens.

   Note: night is the single intentional exception to the "no new tokens"
   rule. Slate is hand-mixed inline because there is no Pearl token for
   pre-dawn cool light; promoting it to a global :root entry would make
   it look optional everywhere else, which it isn't. */
body[data-time="dawn"] .pearl-hero__aurora {
  background-image:
    radial-gradient(ellipse 1200px 800px at 8% 0%, rgb(var(--aurora-2) / 0.46), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 92% 4%, rgb(var(--aurora-1) / 0.40), transparent 60%),
    radial-gradient(ellipse 1400px 900px at 50% 100%, rgb(var(--aurora-3) / 0.28), transparent 55%);
}
body[data-time="day"] .pearl-hero__aurora {
  /* Default (Pearl). Identical to the base rule. Repeated here so an
     inspector view of `body[data-time="day"]` confirms the token use. */
  background-image:
    radial-gradient(ellipse 1200px 800px at 8% 0%, rgb(var(--aurora-1) / 0.42), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 92% 4%, rgb(var(--aurora-2) / 0.46), transparent 60%),
    radial-gradient(ellipse 1400px 900px at 50% 100%, rgb(var(--aurora-3) / 0.32), transparent 55%);
}
body[data-time="dusk"] .pearl-hero__aurora {
  background-image:
    radial-gradient(ellipse 1200px 800px at 8% 0%, rgb(var(--aurora-1) / 0.50), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 92% 4%, rgb(var(--aurora-3) / 0.42), transparent 60%),
    radial-gradient(ellipse 1400px 900px at 50% 100%, 88 84 140 / 0.22, transparent 55%);
}
body[data-time="night"] .pearl-hero__aurora {
  /* One-off cool slate blend — the only Phase-7 exception to the "no
     new tokens" rule. Documented inline so future maintainers don't
     promote it to :root by accident. */
  background-image:
    radial-gradient(ellipse 1200px 800px at 8% 0%, 130 150 200 / 0.30, transparent 55%),
    radial-gradient(ellipse 1000px 700px at 92% 4%, 110 120 180 / 0.28, transparent 60%),
    radial-gradient(ellipse 1400px 900px at 50% 100%, 70 80 130 / 0.24, transparent 55%);
}

/* ── Footer live-stat strip ──────────────────────────────── */
/* Glass pill pinned in the footer block. Shush-S logo on the left
   (re-uses the buildShushSvg pattern from mountBotBanner — colored as
   currentColor so the ribbon stays coral); LivePill text on the right
   cycles through `recent_submissions` with the same apple-notification
   slide-in / hold / slide-out as BotBanner. */
.pearl-footer-pill-host {
  display: flex;
  justify-content: center;
  margin: 0 auto 22px;
  padding: 0 20px;
}
.pearl-footer-pill {
  position: relative;
  display: inline-grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: rgba(255, 252, 248, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 9999px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 32px rgba(60, 50, 40, 0.10);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: rgb(var(--cb-text));
  max-width: min(520px, calc(100vw - 40px));
  overflow: hidden;
}
.pearl-footer-pill__mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--cb-accent));
  flex-shrink: 0;
}
.pearl-footer-pill__mark .shush-s-ribbon {
  fill: currentColor;
  fill-opacity: 1;
  stroke-opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
.pearl-footer-pill__mark .shush-s-finger {
  opacity: 0.95;
  animation: none;
}
.pearl-footer-pill__feed {
  position: relative;
  min-height: 18px;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pearl-footer-pill__entry {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  animation: pearlFooterPillIn 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pearl-footer-pill__entry.is-leaving {
  animation: pearlFooterPillOut 320ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.pearl-footer-pill__name {
  font-weight: 600;
  color: rgb(var(--cb-text));
}
.pearl-footer-pill__action {
  color: rgb(var(--cb-text-sec));
}
.pearl-footer-pill__sep {
  color: rgb(var(--cb-text-muted));
  margin: 0 4px;
}
.pearl-footer-pill__ago {
  color: rgb(var(--cb-text-muted));
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
@keyframes pearlFooterPillIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes pearlFooterPillOut {
  to { transform: translateY(-8px); opacity: 0; }
}
@media (max-width: 520px) {
  .pearl-footer-pill { font-size: 12px; padding: 8px 12px 8px 8px; }
  .pearl-footer-pill__feed { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pearl-route-pulse,
  .pearl-route-pulse__mark,
  .pearl-route-pulse__mark .shush-s-finger { animation: none; opacity: 0; }
  .pearl-footer-pill__entry { animation: none; }
  .pearl-cta-mark .shush-s-finger { transition: none; }
  .pearl-404__mark .shush-s-ribbon { animation: none; stroke-dashoffset: 60; }
}

/* ============================================================
   Pearl device — MacBook-true clamshell wrapping .pearl-window.
   Proportions match a 14"/16" MBP: thin even bezels on the sides,
   slightly thicker chin, a notch hint at the top of the lid, a
   silver aluminum deck with a thin hinge, a centered finger slot
   at the front edge, and a soft contact shadow on the floor.

     1. Chassis (lid)  — black anodized bezel, 9px sides / 14px
        chin / 11px top, with a 78x22 notch hint hosting the
        camera dot and a soft diagonal glare across the glass.
     2. Hinge          — slim 3px aluminum seam between lid and
        base.
     3. Base (deck)    — silver/aluminum, slightly wider than the
        lid (foreshortened perspective), with a centered half-circle
        finger slot at the front edge.
     4. Floor shadow   — wide soft contact shadow under the rig.
   ============================================================ */
/* Wraps the laptop + below-screen CTA in a single column so the
   "Try the live demo" button sits centered under the chassis. */
.pearl-device-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.pearl-device-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgb(var(--cb-accent));
  color: white;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 8px 28px rgb(var(--cb-accent) / 0.32), 0 2px 6px rgba(28, 26, 38, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  opacity: 0;
  animation: pearlFadeUp 720ms cubic-bezier(0.32, 0.72, 0, 1) 1700ms forwards;
}
.pearl-device-cta:hover {
  background: rgb(var(--cb-accent-2));
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgb(var(--cb-accent) / 0.38), 0 4px 10px rgba(28, 26, 38, 0.14);
}
.pearl-device-cta:hover .pearl-device-cta__arrow {
  transform: translateX(3px);
}
.pearl-device-cta__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: pearlDeviceCtaPulse 2s infinite;
}
.pearl-device-cta__arrow {
  font-weight: 400;
  transition: transform 200ms ease;
}
@keyframes pearlDeviceCtaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.pearl-device {
  position: relative;
  width: 100%;
  max-width: 600px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Float the whole rig instead of the window. Same easing as before
     so the rhythm matches the rest of the hero. */
  opacity: 0;
  transform: translateY(14px);
  animation:
    pearlFadeUp 820ms cubic-bezier(0.32, 0.72, 0, 1) 1500ms forwards,
    pearlDeviceFloat 11s ease-in-out 2400ms infinite;
  /* Layered shadow: tight contact + soft ambient + far falloff = depth. */
  filter:
    drop-shadow(0 12px 22px rgba(28, 26, 38, 0.14))
    drop-shadow(0 36px 64px rgba(28, 26, 38, 0.18))
    drop-shadow(0 80px 140px rgba(28, 26, 38, 0.16));
}
/* Ambient halo behind the laptop — pushes it forward visually by softly
   coloring the air around it. Sits behind the chassis (z-index:-1) and
   ignores pointer events. */
.pearl-device::before {
  content: '';
  position: absolute;
  inset: -14% -10% -22%;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, rgb(var(--aurora-1) / 0.28), transparent 70%),
    radial-gradient(ellipse 75% 55% at 50% 70%, rgb(var(--aurora-2) / 0.18), transparent 75%);
  filter: blur(56px);
  opacity: 0.85;
  pointer-events: none;
}
@keyframes pearlDeviceFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Chassis (laptop lid) — MacBook-style near-black bezel. ── */
.pearl-device__chassis {
  position: relative;
  /* Thin even sides (9px), slightly thicker chin (14px), and a
     heavier top (22px) so the 18px notch sits in pure bezel above
     the screen content with a 4px clearance. */
  padding: 22px 9px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #0a0a0c 0%, #050507 55%, #000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.7);
  /* Subtle backward screen tilt — the lid pivots at the hinge edge so
     the whole rig reads as a real laptop with a slight recline. */
  transform: perspective(1800px) rotateX(2deg);
  transform-origin: 50% 100%;
}
.pearl-device__chassis::before {
  /* Brushed aluminum micro-grain on the bezel */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0 1px,
      transparent 1px 3px
    );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ── Notch — small dark inverted pill at the top center of the lid,
       hosting the camera dot like a MacBook 14"/16". The chin sits
       behind the notch so the bezel reads continuous. ── */
.pearl-device__camera {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 18px;
  border-radius: 0 0 10px 10px;
  background: #000;
  box-shadow:
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
.pearl-device__camera::after {
  /* Camera lens inside the notch */
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), transparent 50%),
    #0e0e14;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.06),
    0 0 3px rgba(0, 0, 0, 0.7);
}

/* ── Glare — subtle diagonal screen reflection. Sits above the
       window but is pointer-events:none so the iframe stays clickable. ── */
.pearl-device__glare {
  position: absolute;
  inset: 22px 9px 14px;
  border-radius: 4px;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 18%,
      rgba(255, 255, 255, 0) 36%,
      rgba(255, 255, 255, 0) 64%,
      rgba(255, 255, 255, 0.02) 82%,
      rgba(255, 255, 255, 0.05) 100%
    );
  mix-blend-mode: screen;
  z-index: 4;
}

/* ── Hinge — slim aluminum seam between lid and base. ── */
.pearl-device__hinge {
  height: 3px;
  margin: 0 auto;
  width: 96%;
  background:
    linear-gradient(180deg, #5c5c66 0%, #3f3f48 50%, #2a2a32 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}

/* ── Base — silver aluminum deck, slightly wider than the lid for
       the foreshortened perspective. Wedge taper toward the front. ── */
.pearl-device__base {
  position: relative;
  height: 10px;
  width: 104%;
  margin: 0 -2%;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(180deg,
      #c8c9cf 0%,
      #b4b5bc 25%,
      #9b9ca4 60%,
      #82838b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.04);
  /* Subtle wedge — thinner at the front edge */
  clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
}
.pearl-device__base::before {
  /* Front lip highlight on the trackpad edge */
  content: '';
  position: absolute;
  bottom: 0.5px;
  left: 0;
  right: 0;
  height: 0.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
}
/* ── Finger slot — half-circle cutout centered at the front edge,
       used to open the lid. Sits inside the base. ── */
.pearl-device__base-notch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 5px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #2a2a32 0%, #0e0e14 100%);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Floor shadow — wide soft contact shadow under the laptop. ── */
.pearl-device__floor-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -36px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(28, 26, 38, 0.36) 0%, rgba(28, 26, 38, 0.12) 45%, rgba(28, 26, 38, 0) 75%);
  pointer-events: none;
  filter: blur(10px);
  z-index: -1;
}

/* ── Interior window: drop the standalone shadow + float, since the
       chassis owns the physical look now. Keep the chrome + viewport
       behavior identical so the iframe & banner still hit the same
       scale calculations. ── */
.pearl-device .pearl-window {
  max-width: none;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    inset 0 0 0 1px rgba(0, 0, 0, 0.65);
  border-color: rgba(0, 0, 0, 0.7);
  animation: pearlFadeUp 820ms cubic-bezier(0.32, 0.72, 0, 1) 1500ms forwards;
}
/* The viewport is the actual "screen surface" — round its inner
   corners so the chassis bezel reads cleanly without a hairline. */
.pearl-device .pearl-window__viewport {
  border-radius: 0 0 3px 3px;
}

/* Compact the chassis on narrower screens so the laptop doesn't
   look cartoonishly thick on smaller viewports. */
@media (max-width: 700px) {
  .pearl-device__chassis { padding: 16px 6px 10px; border-radius: 10px; }
  .pearl-device__glare { inset: 16px 6px 10px; border-radius: 3px; }
  .pearl-device__camera { width: 56px; height: 13px; border-radius: 0 0 7px 7px; }
  .pearl-device__camera::after { right: 12px; width: 4px; height: 4px; }
  .pearl-device__hinge { height: 2px; }
  .pearl-device__base { height: 7px; }
  .pearl-device__base-notch { width: 56px; height: 4px; }
  .pearl-device__floor-shadow { bottom: -26px; height: 32px; }
}

/* ============================================================
   Embedded BotBanner — same .bot-banner classes as the dashboard,
   but anchored inside the laptop screen instead of fixed to the
   viewport. The host is a non-interactive flexbox so the banner
   itself can keep its own hover/leaving transforms.
   ============================================================ */
.pearl-window__banner-host {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.pearl-window__banner-host .bot-banner {
  /* Override the dashboard's fixed positioning. Inside the laptop
     the banner is just a normal flex child centered above the
     dashboard chrome. Sized proportionally so it matches the
     dashboard's visual ratio (~30% of viewport in real Pearl). */
  position: relative;
  top: auto;
  left: auto;
  transform: translateY(0);
  width: clamp(220px, 36%, 300px);
  padding: 8px 12px 11px 8px;
  border-radius: 14px;
  grid-template-columns: 32px 1fr auto;
  gap: 9px;
  pointer-events: auto;
  animation: botBannerInEmbed 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
.pearl-window__banner-host .bot-banner-mark {
  width: 32px;
  height: 32px;
}
.pearl-window__banner-host .bot-banner-check {
  width: 20px;
  height: 20px;
}
.pearl-window__banner-host .bot-banner-name { font-size: 11px; }
.pearl-window__banner-host .bot-banner-step { font-size: 10px; }
.pearl-window__banner-host .bot-banner-elapsed { font-size: 9.5px; }
.pearl-window__banner-host .bot-banner-progress {
  height: 2px;
  border-radius: 0 0 14px 14px;
}
.pearl-window__banner-host .bot-banner:hover {
  transform: translateY(1px);
}
.pearl-window__banner-host .bot-banner--leaving {
  animation: botBannerOutEmbed 600ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes botBannerInEmbed {
  from { transform: translateY(-32px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes botBannerOutEmbed {
  to { transform: translateY(-32px); opacity: 0; }
}

/* The pearl-window title-mark in the chrome bar gets the actual
   shush-S logo (mounted by JS) instead of the placeholder dot. */
.pearl-window__title-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgb(var(--cb-accent));
  flex-shrink: 0;
}
.pearl-window__title-mark svg { width: 100%; height: 100%; overflow: visible; }
.pearl-window__title-mark .shush-s-finger { fill: rgba(255, 250, 244, 0.92); }

/* ============================================================
   Pearl platforms — horizontal swipeable card track replacing the
   old dark-ground 3x2 vendor grid. Each card is a mini case study:
   logo on a soft white tile + name + description + verified pill
   + stat. Scroll-snap-x does the heavy lifting; pearl.js layers
   drag-to-scroll, auto-advance, and IntersectionObserver dots.
   ============================================================ */
.pearl-section--platforms {
  background-image:
    radial-gradient(ellipse 1100px 600px at 12% 0%, rgb(var(--aurora-1) / 0.18), transparent 55%),
    radial-gradient(ellipse 900px 700px at 88% 100%, rgb(var(--aurora-2) / 0.16), transparent 60%);
}

/* ============================================================
   Pearl platforms — swipeable card track.
   Track is edge-to-edge (negative margin pulls it outside the
   1180px column so cards fade off the page rather than clipping).
   Mouse-drag + native touch + scroll-snap-x for paging; pagination
   dots and arrow keys for keyboard / a11y.
   ============================================================ */
.pearl-platforms {
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: 0 max(32px, calc(50vw - 590px));
}

.pearl-platforms-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 32vw, 360px);
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(32px, calc(50vw - 590px));
  padding-block: 8px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  cursor: grab;
}
.pearl-platforms-track::-webkit-scrollbar { display: none; }
.pearl-platforms-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.pearl-platforms-track.is-dragging * { pointer-events: none; }

/* Pagination dots — coral pill expands on the active platform. */
.pearl-platforms-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.pearl-platforms-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(28, 26, 38, 0.18);
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.3s ease;
}
.pearl-platforms-dot:hover { background: rgba(28, 26, 38, 0.32); }
.pearl-platforms-dot.is-active {
  width: 24px;
  background: rgb(var(--cb-accent));
}

.pearl-platforms-hint {
  margin: 14px 0 0;
  text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--cb-text-muted));
  opacity: 0.7;
}

@media (max-width: 720px) {
  .pearl-platforms-track { grid-auto-columns: clamp(260px, 78vw, 320px); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pearl-platforms-track { scroll-behavior: auto; }
}

/* Platform glass-card — logo tile on top, body with name + desc +
   verified pill below. Sized by the swipe-track's grid-auto-columns;
   the flex-basis fallback handles any non-grid context. */
.pearl-platforms-card {
  flex: 0 0 clamp(280px, 32vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Logo tile — soft white interior so brand colors read true. */
.pearl-platforms-card__logo-tile {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  background: linear-gradient(180deg, #fffdfb 0%, #f9f6f1 100%);
  border-bottom: 1px solid rgba(28, 26, 38, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pearl-platforms-card__logo-tile::after {
  /* Subtle radial spotlight on logo */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 0%, rgba(28, 26, 38, 0.025) 100%);
  pointer-events: none;
}
.pearl-platforms-card__logo-tile img,
.pearl-platforms-card__logo-tile svg {
  max-height: 52px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  /* Brand colors render full strength on the white tile */
  filter: none;
}
/* Logos that ship as white SVGs from the dark vendor brand kits
   need to flip to a dark tone on our white tile. Identified per-platform
   via a modifier class on the logo-tile. */
.pearl-platforms-card__logo-tile--invert svg path,
.pearl-platforms-card__logo-tile--invert svg g,
.pearl-platforms-card__logo-tile--invert svg circle,
.pearl-platforms-card__logo-tile--invert svg polyline,
.pearl-platforms-card__logo-tile--invert svg polygon,
.pearl-platforms-card__logo-tile--invert svg rect {
  fill: rgb(28, 26, 38) !important;
}
.pearl-platforms-card__logo-tile--invert svg .st0,
.pearl-platforms-card__logo-tile--invert svg .cls-1,
.pearl-platforms-card__logo-tile--invert svg .cls-2,
.pearl-platforms-card__logo-tile--invert svg .cls-3,
.pearl-platforms-card__logo-tile--invert svg .cls-7 {
  fill: rgb(28, 26, 38) !important;
}
/* PNG / IMG — CSS can't change pixel colors, but invert + brightness clamp
   turns a white-on-transparent bitmap into deep dark text on white tile. */
.pearl-platforms-card__logo-tile--invert img {
  filter: invert(1) brightness(0.15) contrast(1.1);
}

.pearl-platforms-card__body {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.pearl-platforms-card__name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgb(var(--cb-text));
  margin: 0;
  line-height: 1.15;
}
.pearl-platforms-card__desc {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgb(var(--cb-text-sec));
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pearl-platforms-card__meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed rgba(28, 26, 38, 0.08);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
}
.pearl-platforms-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--cb-accent));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}
.pearl-platforms-card__verified::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--cb-accent));
  box-shadow: 0 0 0 3px rgba(255, 161, 126, 0.18);
}
.pearl-platforms-card__stat {
  color: rgb(var(--cb-text-muted));
  font-variant-numeric: tabular-nums;
}


/* Live tally chip in the platforms subtitle. Hidden until the stats
   poller resolves a real number; we never render a fake count. */
.pearl-platforms-tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(60, 50, 40, 0.04);
  font-size: 13px;
  color: rgb(var(--cb-text));
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pearl-platforms-tally.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pearl-platforms-tally__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--cb-success, var(--cb-accent)));
  box-shadow: 0 0 6px rgb(var(--cb-success, var(--cb-accent)) / 0.6);
  animation: pearlTallyPulse 2.4s ease-in-out infinite;
}
.pearl-platforms-tally__num { font-weight: 600; }
.pearl-platforms-tally__num::after { content: '+'; opacity: 0.5; margin-left: 1px; }
.pearl-platforms-tally__label { color: rgb(var(--cb-text-sec)); }
@keyframes pearlTallyPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (max-width: 560px) {
  .pearl-platforms-tally { display: inline-flex; margin-left: 0; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pearl-platforms-tally { transition: none; }
  .pearl-platforms-tally__dot { animation: none; }
}

/* ============================================================
   Phase 8 — Pearl conversions of legacy landing sections
   ────────────────────────────────────────────────────────────
   1. Testimonials  — was .section.section-dark   (dark band)
   2. Control       — was .section.section-warm   (warm band)
   3. FAQ           — was .section.section-warm   (warm band)
   4. Final CTA     — was .final-cta              (dark+aurora)
   All four now ride on the standard Pearl bg with token-driven
   glass cards, so the rhythm reads as one continuous surface.
   ============================================================ */

/* ── 1. Testimonials marquee ─────────────────────────────── */
.pearl-section--testimonials {
  background-image:
    radial-gradient(ellipse 900px 500px at 88% 0%, rgb(var(--aurora-2) / 0.14), transparent 55%),
    radial-gradient(ellipse 800px 600px at 12% 100%, rgb(var(--aurora-1) / 0.16), transparent 60%);
}
.pearl-testimonials {
  position: relative;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  padding-block: 8px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.pearl-testimonials-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: pearlTestimonialsMarquee 60s linear infinite;
  will-change: transform;
}
.pearl-testimonials:hover .pearl-testimonials-track {
  animation-play-state: paused;
}
@keyframes pearlTestimonialsMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pearl-testimonial-card {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.4s ease;
}
.pearl-testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
}
.pearl-testimonial-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  color: rgb(var(--cb-accent));
}
.pearl-star {
  display: block;
  filter: drop-shadow(0 1px 1px rgb(var(--cb-accent) / 0.25));
}
.pearl-testimonial-text {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.55;
  color: rgb(var(--cb-text));
  margin: 0;
}
.pearl-testimonial-author {
  font-size: 13px;
  color: rgb(var(--cb-text-sec));
  font-weight: 600;
  margin-top: auto;
}
.pearl-testimonial-author span {
  color: rgb(var(--cb-text-muted));
  font-weight: 400;
}
@media (max-width: 720px) {
  /* Touch — drop the marquee, fall back to native swipe. */
  .pearl-testimonials { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pearl-testimonials-track {
    animation: none;
    width: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 20px;
  }
  .pearl-testimonial-card { scroll-snap-align: center; flex-basis: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .pearl-testimonial-card { transition: none; }
  .pearl-testimonials-track { animation: none; }
}

/* ── 2. Control grid ─────────────────────────────────────── */
.pearl-control-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.pearl-control-card {
  position: relative;
  padding: 28px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.4s ease;
}
.pearl-control-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgb(var(--cb-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.pearl-control-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-panel);
}
.pearl-control-card:hover::after { transform: scaleX(1); }
.pearl-control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgb(var(--cb-accent) / 0.12);
  font-size: 20px;
  margin-bottom: 16px;
}
.pearl-control-card h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  color: rgb(var(--cb-text));
  margin: 0 0 8px;
}
.pearl-control-card p {
  font-size: 14px;
  color: rgb(var(--cb-text-sec));
  line-height: 1.6;
  margin: 0;
}
/* Second-line detail — a concrete number / setting on each card so
   the reader understands what the control actually does. */
.pearl-control-card__detail {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(28, 26, 38, 0.10);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px !important;
  color: rgb(var(--cb-text-muted)) !important;
  line-height: 1.5 !important;
  font-variant-numeric: tabular-nums;
}

/* Add a soft gradient backplate to each card so the section reads
   weightier — same Pearl aurora that the rest of the page uses. */
.pearl-control-card {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse 200px 140px at 92% 8%, rgb(var(--aurora-1) / 0.10), transparent 70%);
}

@media (max-width: 720px) {
  .pearl-control-grid { grid-template-columns: 1fr; gap: var(--space-xs); }
  .pearl-control-card { padding: var(--space-sm); }
}

/* ── 3. FAQ ──────────────────────────────────────────────── */
/* Wrapper class (.pearl-faq) wraps the existing .faq-item / .faq-q
   markup so the legacy toggle JS at index.html:3505 keeps working. */
.pearl-faq {
  max-width: 720px;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-top);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.pearl-faq .faq-item { border-bottom: 1px solid rgba(28, 26, 38, 0.08); }
.pearl-faq .faq-item:last-child { border-bottom: none; }
.pearl-faq .faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: rgb(var(--cb-text));
  transition: background 0.2s ease;
}
.pearl-faq .faq-q:hover { background: rgba(28, 26, 38, 0.025); }
.pearl-faq .faq-q::after {
  content: '+';
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: rgb(var(--cb-text-muted));
  transition: transform 0.3s ease;
  flex-shrink: 0;
  line-height: 1;
}
.pearl-faq .faq-item.open .faq-q::after { transform: rotate(45deg); }
.pearl-faq .faq-a {
  overflow: hidden;
  max-height: 0;
  padding: 0 28px;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.pearl-faq .faq-item.open .faq-a {
  max-height: 360px;
  padding-bottom: 22px;
}
.pearl-faq .faq-a p {
  font-size: 14.5px;
  color: rgb(var(--cb-text-sec));
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 720px) {
  .pearl-faq .faq-q { padding: 18px 20px; font-size: 16px; }
  .pearl-faq .faq-a { padding: 0 20px; }
  .pearl-faq .faq-item.open .faq-a { padding-bottom: 18px; }
}

/* ── 4. Final CTA ────────────────────────────────────────── */
.pearl-section--cta {
  text-align: center;
  background-image:
    radial-gradient(ellipse 900px 480px at 30% 70%, rgb(var(--cb-accent) / 0.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 70% 30%, rgb(var(--aurora-2) / 0.14), transparent 60%);
}
.pearl-section--cta .pearl-section-header { margin-bottom: 0; }
.pearl-section--cta .pearl-section-h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}
.pearl-cta-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pearl-cta-note {
  margin-top: 16px;
  font-size: 13px;
  color: rgb(var(--cb-text-muted));
}