/* ═══════════════════════════════════════════════════
   v6 — component & utility classes
   Tokens from ../shared/styles/tokens.css are already
   loaded. All values here reference those tokens.
═══════════════════════════════════════════════════ */

/* ── Custom fonts ── */
@font-face {
  font-family: 'Cornella';
  src: url('../fonts/cornella-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Logo ── */
.logo         { display: flex; align-items: center; gap: 8px; }
.logo__mark   { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.logo__letter { color: #fff; font-weight: var(--font-weight-black); font-size: 13px; }
.logo__text   { font-weight: var(--font-weight-extrabold); font-size: 16px; color: var(--color-ink); }
.logo__text--dark { color: #fff; }
.logo__accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-home,
.logo-clickable { cursor: pointer; }

/* ── Card ── */
.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.badge-success { background: var(--color-success-light); color: var(--color-success); }
.badge-brand   { background: var(--color-brand-light);   color: var(--color-brand);   }
.badge-error   { background: var(--color-error-light);   color: var(--color-error);   }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge-neutral { background: var(--color-border);         color: var(--color-muted);   }
.badge-lg      { padding: 5px 12px; font-size: var(--font-size-sm); }

/* ── Section label ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
  background: rgba(124, 58, 237, 0.08);
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Toggle (Monthly / Annual) ── */
.toggle-group {
  display: inline-flex;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: var(--shadow-card);
}
.toggle-btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, color .2s;
  background: transparent;
  color: var(--color-muted);
}
.toggle-btn.active { background: var(--color-ink); color: var(--color-canvas); }

/* ── Card hover lift ── */
.card-hoverable { transition: border-color .2s, box-shadow .2s; cursor: pointer; }
.card-hoverable:hover {
  border-color: var(--color-brand) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: default; }

/* Sizes */
.btn-sm  { padding: 6px 14px;  font-size: var(--font-size-xs);  border-radius: var(--radius-sm); }
.btn-md  { padding: 8px 16px;  font-size: var(--font-size-base); border-radius: var(--radius-sm); }
.btn-lg  { padding: 10px 22px; font-size: var(--font-size-md);  border-radius: var(--radius-md); }
.btn-xl  { padding: 13px 32px; font-size: 15px;                  border-radius: var(--radius-md); }
.btn-full { width: 100%; }

/* Variants */
.btn-ink     { background: var(--color-ink);     color: #fff; }
.btn-ink:hover { background: var(--color-ink-dark); }
/* Gradient AI button — use sparingly for hero/primary CTAs. The shadow uses
   the brand tint so the hover lift reads as "energized" rather than "darker". */
.btn-brand {
  background: var(--grad-ai);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .25);
  transition: background-position .4s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-brand:hover {
  background-position: 100% 50%;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .32);
}
.btn-success { background: var(--color-success); color: #fff; }
.btn-outline { background: var(--color-canvas); border: 1px solid var(--color-divider); color: var(--color-ink-soft); }
.btn-ghost   { background: none; color: var(--color-brand); padding-left: 0; padding-right: 0; }
.btn-ghost-white { background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--color-subtle); }
.btn-white   { background: #fff; color: var(--color-ink); }

/* ════════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════════ */
.input, .select {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-ink);
}
.input:focus, .select:focus { outline: none; border-color: var(--color-brand); }
.input { margin-bottom: 10px; }
.select {
  margin-bottom: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color-scheme: light;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.select option {
  font-family: inherit;
  font-size: var(--font-size-base);
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: 8px 14px;
}

/* ════════════════════════════════════════════
   PAGE LAYOUTS
════════════════════════════════════════════ */
.page-light   { background: var(--color-canvas); min-height: 100vh; }
.page-surface { background: var(--color-surface); min-height: 100vh; }

.page-wrap    { max-width: var(--max-width-page);    margin: 0 auto; padding: 32px 24px; }
.page-wrap-lg { max-width: var(--max-width-pricing); margin: 0 auto; padding: 32px 24px; }

/* ── Shared page topbar ── */
.topbar-page {
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-divider);
  padding: 14px 24px;
}
.topbar-page__inner {
  max-width: var(--max-width-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-page__inner--wide { max-width: var(--max-width-pricing); }
.topbar-page__actions { display: flex; gap: 10px; }

/* ════════════════════════════════════════════
   SHARED PRIMITIVES — kept after the landing/marketing cleanup.
   These are still rendered live by the Styleguide (#/styleguide)
   and/or dashboard sub-views, so they survive even though their
   original landing sections were removed:
     .hero__title(-accent) · .section* · grid utils · .hiw-* (How it works)
════════════════════════════════════════════ */
.hero__title {
  font-size: clamp(44px, 6vw, 70px);
  font-weight: var(--font-weight-black);
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin-bottom: 20px;
  color: var(--color-ink);
}
.hero__title-accent { color: var(--color-brand); }
/* Sections */
.section,
.section-sm { padding: var(--space-20) 24px; max-width: var(--max-width-shell); margin: 0 auto; }
.section__header { text-align: center; margin-bottom: var(--space-12); }
.section__title  { font-size: clamp(28px, 4vw, 40px); font-weight: var(--font-weight-extrabold); letter-spacing: -1.5px; margin-top: var(--space-2); }

/* ── Grid utilities ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* How it works — modern circle style */
.hiw-section { padding: var(--space-20) 24px; background: var(--color-canvas); }
.hiw-section .section__header { max-width: 640px; margin: 0 auto; }

.hiw-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 780px;
  margin: var(--space-12) auto 0;
}

.hiw-step {
  flex: 1;
  text-align: center;
  max-width: 220px;
}

.hiw-circle-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.hiw-circle {
  width: 88px; height: 88px;
  background: var(--color-brand-light);
  border-radius: 50%;
  border: 1.5px solid var(--color-brand-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brand);
  margin: 0 auto;
}
.hiw-circle--dashed {
  background: transparent;
  border: 1.5px dashed var(--color-brand-border);
}

.hiw-step-label {
  font-size: 11px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hiw-connector {
  flex-shrink: 0;
  padding-top: 44px;
  width: 100px;
}

.hiw-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: 8px; }
.hiw-desc  { font-size: var(--font-size-base); color: var(--color-muted); line-height: 1.65; }
/* ════════════════════════════════════════════
   PRICING
════════════════════════════════════════════ */
.pricing-header { max-width: var(--max-width-pricing); margin: 0 auto; padding: calc(52px + var(--nav-height)) 24px 0; text-align: center; }
.pricing-title  { font-size: clamp(28px,4vw,42px); font-weight: var(--font-weight-black); letter-spacing: -1.5px; margin: 8px 0 10px; }
.pricing-sub    { color: var(--color-muted); font-size: var(--font-size-md); margin-bottom: 28px; }
.pricing-wrap   { max-width: var(--max-width-pricing); margin: 0 auto; padding: 48px 24px 80px; }

/* Pricing cards — new style */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pc-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto;
}

/* Horizontal scroll variant — for 4-card pricing page */
.pc-scroll { position: relative; }
.pc-grid--scroll {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(290px, 1fr);
  overflow-x: auto;
  padding: 24px 4px 32px;
  margin: -24px -4px -32px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.pc-grid--scroll::-webkit-scrollbar { display: none; }
.pc-grid--scroll.pc-grid--dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.pc-grid--scroll.pc-grid--dragging .pc-card { pointer-events: none; }
.pc-grid--scroll > .pc-card { scroll-snap-align: start; min-width: 0; }

/* Edge fades — visual hints content is scrollable.
   Extend by -24px to overlap .pricing-wrap's horizontal padding,
   so fade reaches the visible page edge. */
.pc-scroll::before,
.pc-scroll::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 84px;
  pointer-events: none;
  z-index: 2;
}
.pc-scroll::before { left:  -24px; background: linear-gradient(to left,  transparent, var(--color-surface)); opacity: 0; transition: opacity .2s; }
.pc-scroll::after  { right: -24px; background: linear-gradient(to right, transparent, var(--color-surface)); }
.pc-scroll:has(.pc-arrow--left:not([hidden]))::before { opacity: 1; }
.pc-scroll:has(.pc-arrow--right[hidden])::after { opacity: 0; }

/* Arrow buttons */
.pc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  color: var(--color-ink);
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.pc-arrow:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.pc-arrow:active { transform: translateY(-50%) scale(.95); }
.pc-arrow[hidden] { display: none; }
.pc-arrow--left  { left:  4px; }
.pc-arrow--right { right: 4px; }

.pc-card {
  position: relative;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.pc-card--highlight {
  border-color: var(--color-brand);
  box-shadow: 0 8px 32px rgba(124, 58, 237,.14);
  transform: translateY(-10px);
}

/* Floating pill badge — sits above card top, doesn't add height */
.pc-banner {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-brand), #60A5FA);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(124, 58, 237,.25);
  z-index: 1;
}

.pc-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pc-icon {
  width: 38px; height: 38px;
  background: var(--color-surface);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft);
  flex-shrink: 0;
}
.pc-icon--brand {
  background: var(--color-brand-light);
  color: var(--color-brand);
}
.pc-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); }

.pc-price  { font-size: 38px; font-weight: var(--font-weight-black); letter-spacing: -1px; margin-bottom: 8px; line-height: 1; }
.pc-period { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-muted); }

.pc-desc { font-size: var(--font-size-base); color: var(--color-muted); line-height: 1.55; margin-bottom: 20px; min-height: 64px; }

.pc-cta {
  width: 100%; padding: 12px;
  border: none; border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-bold);
  cursor: pointer;
  background: var(--color-ink); color: #fff;
  transition: opacity .15s;
  margin-bottom: 20px;
}
.pc-cta:hover   { opacity: .88; }
.pc-cta--brand  { background: var(--color-brand); }

.pc-divider { border: none; border-top: 1px solid var(--color-divider); margin-bottom: 18px; }

.pc-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pc-feature  { display: flex; align-items: flex-start; gap: 8px; font-size: var(--font-size-base); color: var(--color-ink-soft); line-height: 1.5; }
.pc-feature strong { color: var(--color-ink); font-weight: var(--font-weight-bold); }
.pc-check    { color: var(--color-muted); margin-top: 1px; flex-shrink: 0; }

/* Landing pricing section */
.pc-section       { background: var(--color-surface); padding: var(--space-20) 24px; }
.pc-section__sub  { color: var(--color-muted); font-size: var(--font-size-md); margin-top: 8px; }
.pc-section__all  { text-align: center; margin-top: 28px; color: var(--color-muted); font-size: var(--font-size-base); }
.pc-section__link { color: var(--color-brand); font-weight: var(--font-weight-bold); cursor: pointer; }
.pc-section__link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════
   DASHBOARD SHELL
════════════════════════════════════════════ */
/* The dashboard is one big floating glass panel. Sidebar + main view sit
   inside it as sections — sidebar gets a lavender tint to read as a nav
   area, main stays transparent so the panel's own surface shows through.
   The aurora wash (body bg, see further down) is visible in the 16px
   gutter around the panel and faintly through the panel's glass surface. */
.dashboard {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-col, 240px) 1fr;
  margin: 16px;
  /* Fixed-height app shell: the panel never scrolls — only the main view
     inside it does. Keeps the sidebar visually attached to the panel even
     when content is scrolled. */
  height: calc(100vh - 32px);
  overflow: hidden;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 24px 60px rgba(15, 23, 42, .08),
    0 2px 6px rgba(15, 23, 42, .04);
  isolation: isolate;
}
/* Prevent body scroll only on dashboard route (scoped via :has() so other
   pages keep their normal page-scroll behavior). */
body:has(.dashboard) { overflow: hidden; }

/* ── Modal scroll-lock ──
   When any full-screen overlay is open, freeze the dashboard's real scroll
   container so wheel/touch events over the overlay can't chain through to the
   page behind it. On desktop the scroller is .dash-main (body is already
   locked above); the mobile breakpoint locks <body> instead. Overlays live as
   body children: .sub-overlay (Subscribe) and .chk-modal-overlay (calendar
   day / post lightbox / upgrade modal — :not([hidden]) skips its closed
   resting state). */
body:has(.sub-overlay) .dash-main,
body:has(.chk-modal-overlay:not([hidden])) .dash-main { overflow: hidden; }
/* Keep modal scroll regions self-contained (no chaining at their own edges). */
.sub-stage, .soc-native__scroll, .chk-modal__body, .sub-detail__feats { overscroll-behavior: contain; }
.dashboard.is-sidebar-collapsed { --sidebar-col: 76px; }

/* ── Aurora wallpaper ──
   Baked directly into the body background as four soft radial color
   washes layered over a neutral gradient. Scoped to dashboard route via
   :has() so other pages keep their own canvas. Replaces the old
   .dash-aurora element + 4 animated blob children. */
body:has(.dashboard) {
  background:
    radial-gradient(560px 560px at -10% -10%,  rgba(37,  99, 235, .32) 0%, transparent 65%),
    radial-gradient(480px 480px at 110% 25%,   rgba(236, 72, 153, .28) 0%, transparent 65%),
    radial-gradient(440px 440px at 28% 110%,   rgba(124, 58, 237, .28) 0%, transparent 65%),
    radial-gradient(380px 380px at -8% 55%,    rgba(20, 184, 166, .26) 0%, transparent 65%),
    linear-gradient(180deg, #f5f7fb 0%, #eef1f7 100%);
  background-attachment: fixed;
}


/* Custom dropdown component */
.dd { position: relative; }
.dd__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color .15s;
}
/* Compact size — for sidebars, dense UIs */
.dd--sm .dd__trigger {
  padding: 8px 10px;
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
}
.dd__trigger:hover { border-color: var(--color-ink-soft); }
.dd--open .dd__trigger { border-color: var(--color-brand); }
.dd__label  { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__caret  { color: var(--color-muted); transition: transform .18s, color .18s; flex-shrink: 0; }
.dd--open .dd__caret { transform: rotate(180deg); color: var(--color-brand); }

.dd__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  padding: 6px;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}
.dd__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.dd__opt:hover { background: var(--color-surface); }
.dd__opt[aria-selected="true"] {
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
}
.dd__opt[aria-selected="true"]::after {
  content: '✓';
  margin-left: auto;
  font-size: var(--font-size-base);
  color: var(--color-brand);
}

/* Dark variant — for use on dark backgrounds (footer CTA) */
.dd--dark .dd__trigger {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.1);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.dd--dark .dd__trigger:hover { border-color: rgba(255,255,255,.25); }
.dd--dark.dd--open .dd__trigger { border-color: rgba(255,255,255,.4); }
.dd--dark .dd__caret { color: rgba(255,255,255,.6); }
.dd--dark.dd--open .dd__caret { color: #fff; }

.dash-main {
  margin-left: 0;
  min-width: 0;
  /* This is the scroll container. Sidebar stays put while this scrolls.
     Flex column lets .dash-view claim the remaining height so any sub-view
     that opts into .chk-page--fit can size to the viewport. */
  height: 100%;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
}

/* ── Left sidebar — embedded section of the dashboard panel ──
   Reads as a tinted "nav region" of the larger panel, not a separate
   floating card. Left corners follow the panel's 24px radius; right side
   is flat with a subtle divider so it merges with the main area. */
.dash-sidebar {
  /* Fills the dashboard's fixed height — no sticky needed because the
     parent panel is the app shell and never scrolls. */
  height: 100%;
  margin: 0;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(124, 58, 237, .045);
  border: none;
  border-right: 1px solid rgba(15, 23, 42, .05);
  border-radius: 24px 0 0 24px;
  box-shadow: none;
  transition: padding .25s ease;
  position: relative;
}

/* Chevron tab — floats off the right edge of the sidebar card. */
.dash-sidebar__toggle {
  position: absolute;
  top: 64px;
  right: -14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  color: var(--color-ink-soft);
  cursor: pointer;
  z-index: 5;
  transition: color .15s, transform .25s, background .15s;
}
.dash-sidebar__toggle:hover { color: var(--color-brand); background: var(--color-brand-light); }
.dash-sidebar__toggle-icon { transition: transform .25s ease; }
.is-sidebar-collapsed .dash-sidebar__toggle-icon { transform: rotate(180deg); }

.dash-sidebar__brand {
  display: flex;
  align-items: center;
  padding: 4px 10px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  cursor: pointer;
  min-height: 48px;
}
.is-sidebar-collapsed .dash-sidebar__brand { justify-content: center; padding: 4px 0 12px; }
.is-sidebar-collapsed .dash-sidebar__brand .logo__text { display: none; }

.dash-sidebar__section-label {
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 0 12px 6px;
}
.is-sidebar-collapsed .dash-sidebar__section-label { display: none; }
/* Demo disclaimer under the "Workspace" label — small + muted, hidden when the
   sidebar is collapsed (mirrors the section label). */
.dash-sidebar__demo-note {
  margin: -2px 0 10px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-subtle);
}
.is-sidebar-collapsed .dash-sidebar__demo-note { display: none; }

.dash-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.dash-sidebar__nav::-webkit-scrollbar { display: none; }

.dash-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.dash-sidebar__item:hover {
  background: rgba(124, 58, 237, .08);
  color: var(--color-ink);
}
.dash-sidebar__item.is-active {
  background: var(--color-brand-light);
  color: var(--color-brand-text);
}
.dash-sidebar__item.is-active .dash-sidebar__icon { color: var(--color-brand); }
.is-sidebar-collapsed .dash-sidebar__item {
  justify-content: center;
  padding: 12px 10px;
}
.is-sidebar-collapsed .dash-sidebar__label { display: none; }

.dash-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-ink-soft);
  transition: color .15s;
}
.dash-sidebar__icon svg { width: 18px; height: 18px; }
.dash-sidebar__item:hover .dash-sidebar__icon { color: var(--color-brand); }
.dash-sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-sidebar__footer { display: flex; flex-direction: column; }
.dash-sidebar__upgrade {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--grad-ai);
  color: #fff;
  box-shadow: 0 10px 26px rgba(124, 58, 237, .25);
}
.is-sidebar-collapsed .dash-sidebar__upgrade { display: none; }
.dash-sidebar__upgrade-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
}
.dash-sidebar__upgrade-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
}
.dash-sidebar__upgrade-cta {
  margin-top: 10px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background .15s;
}
.dash-sidebar__upgrade-cta:hover { background: rgba(255, 255, 255, .25); }

/* Compact upgrade pill shown only when sidebar is collapsed. */
.dash-sidebar__upgrade-mini {
  display: none;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  place-items: center;
  background: var(--grad-ai);
  color: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .3);
  cursor: pointer;
  transition: transform .15s;
}
.dash-sidebar__upgrade-mini:hover { transform: translateY(-1px); }
.is-sidebar-collapsed .dash-sidebar__upgrade-mini { display: grid; }

/* ── Floating AI agent panel — bottom-right launcher + collapsible chat ──
   Same feature set as the old always-on right-side panel (suggestions,
   product-summary cards, typing dots, keyword-matched replies) but tucked
   into a chat bubble so it doesn't steal screen space when not in use. */
/* TEMP: assistant FAB hidden for now — delete this one rule to bring it back. */
.dash-agent-fab { display: none !important; }

.dash-agent-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-ai);
  background-size: 180% 180%;
  border: none;
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(124, 58, 237, .35);
  cursor: pointer;
  z-index: 60;
  transition: transform .2s ease, box-shadow .2s ease, background-position .35s ease;
}
.dash-agent-fab:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 18px 38px rgba(124, 58, 237, .42);
}
.dash-agent-fab.is-active { transform: scale(.92); }
.dash-agent-fab__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-error);
  border: 2px solid #fff;
  animation: dash-agent-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dash-agent-dot-pulse {
  0%, 100% { transform: scale(1);   }
  50%      { transform: scale(1.2); }
}

.dash-agent {
  position: fixed;
  right: 24px;
  bottom: 96px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 580px;
  max-height: calc(100vh - 140px);
  /* Glass surface — slightly more opaque than topbar since chat content
     needs higher readability. */
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  z-index: 59;
  transform-origin: bottom right;
  animation: dash-agent-pop .22s cubic-bezier(.16, 1, .3, 1);
}
.dash-agent[hidden] { display: none; }
@keyframes dash-agent-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Header — sits at top of the floating panel. */
.dash-agent__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  flex-shrink: 0;
}
.dash-agent__avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-ink);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.dash-agent__avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-ai);
}
.dash-agent__avatar span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 14px;
  font-weight: var(--font-weight-black);
  letter-spacing: -.5px;
}
.dash-agent__title {
  flex: 1;
  min-width: 0;
}
.dash-agent__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: 1.2;
}
.dash-agent__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 1px;
}
.dash-agent__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  animation: chatLivePulse 2s ease-in-out infinite;
}
/* Relocated from the removed landing chat-card section — still drives the
   dashboard agent live-status dot above. */
@keyframes chatLivePulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50%     { opacity: .6; box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}
.dash-agent__icon-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dash-agent__icon-btn:hover {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-divider);
}

/* Message list (scrollable) */
.dash-agent__msgs {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Tighter scrollbar so it feels native */
  scrollbar-width: thin;
}
.dash-agent__msgs::-webkit-scrollbar { width: 6px; }
.dash-agent__msgs::-webkit-scrollbar-thumb {
  background: var(--color-divider);
  border-radius: 3px;
}

.dash-msg { display: flex; gap: 8px; }
.dash-msg__avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-ink);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  margin-top: 2px;
}
.dash-msg__avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-brand), #60A5FA);
}
.dash-msg__avatar span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-black);
}
.dash-msg__bubble {
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 14px;
  max-width: 86%;
  color: var(--color-ink);
}
.dash-msg__bubble strong { font-weight: var(--font-weight-bold); color: var(--color-ink); }
.dash-msg--ai .dash-msg__bubble {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-bottom-left-radius: 4px;
}
.dash-msg--user {
  justify-content: flex-end;
}
.dash-msg--user .dash-msg__bubble {
  background: var(--color-ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.dash-msg__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

/* Rich AI card — title + bulleted features + CTA + stat pill. Posted by
   postAgentCard() when the user switches to a chapter whose main view has
   been simplified (so the agent re-states the value prop).
   Slow flowing brand-tinted gradient reads as "AI-generated" and visually
   separates these cards from plain chat bubbles. */
/* Compound selector (.dash-msg__bubble.dash-msg__card) matches the
   specificity of `.dash-msg--ai .dash-msg__bubble` above, then wins by
   source order — without this the AI bubble's solid bg would override the
   gradient. */
.dash-msg__bubble.dash-msg__card {
  position: relative;
  background:
    linear-gradient(120deg,
      rgba(124, 58, 237, .10)  0%,
      rgba(124, 58, 237, .12) 28%,
      rgba(236, 72, 153, .10) 52%,
      rgba(22, 163, 74, .10)  76%,
      rgba(124, 58, 237, .10) 100%);
  background-size: 280% 280%;
  border: 1px solid rgba(124, 58, 237, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 3px rgba(124, 58, 237, .06);
  animation: dash-card-flow 12s ease-in-out infinite;
  max-width: 92%;
  padding: 12px 14px;
  overflow: hidden;
  isolation: isolate;
}
/* Subtle moving sheen — diagonal light streak drifts across the card. */
.dash-msg__bubble.dash-msg__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent  35%,
    rgba(255, 255, 255, .30) 50%,
    transparent  65%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: dash-card-sheen 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes dash-card-flow {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes dash-card-sheen {
  0%   { background-position: -100% 0; opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { background-position:  200% 0; opacity: 0; }
}
/* Collapsible header — title + chevron act as the click target. */
.dash-msg__card-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 0 10px;
  margin-bottom: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(124, 58, 237, .28);
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dash-msg__card-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  line-height: 1.45;
}
.dash-msg__card-title strong {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
}
.dash-msg__card-chevron {
  color: var(--color-ink-soft);
  flex-shrink: 0;
  transition: transform .25s ease, color .15s ease;
}
.dash-msg__card.is-expanded .dash-msg__card-chevron { transform: rotate(180deg); }
.dash-msg__card-toggle:hover .dash-msg__card-chevron { color: var(--color-ink); }
/* Collapsed state — hide body + drop the title underline so the card reads
   as a tidy one-liner. */
.dash-msg__card-body { display: block; position: relative; z-index: 1; }
.dash-msg__card:not(.is-expanded) .dash-msg__card-body { display: none; }
.dash-msg__card:not(.is-expanded) .dash-msg__card-toggle {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.dash-msg__card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-msg__card-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-ink-soft);
  line-height: 1.4;
}
.dash-msg__card-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.dash-msg__card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dash-msg__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: var(--grad-ai);
  background-size: 180% 100%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(124, 58, 237, .22);
  transition: background-position .35s ease, box-shadow .15s, transform .1s;
}
.dash-msg__card-cta:hover  { background-position: 100% 50%; box-shadow: 0 4px 14px rgba(124, 58, 237, .3); }
.dash-msg__card-cta:active { transform: scale(.97); }
.dash-msg__card-stat {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.dash-msg__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-subtle);
  animation: typeDot 1.4s ease-in-out infinite;
}
.dash-msg__typing span:nth-child(2) { animation-delay: .15s; }
.dash-msg__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typeDot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}

/* Suggestion chips — shown above input on first load, hidden after first send */
.dash-agent__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
  flex-shrink: 0;
}
.dash-agent__suggestions.is-hidden { display: none; }
.dash-agent__sugg {
  padding: 6px 11px;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dash-agent__sugg:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-light);
}

/* Input box (textarea + send) — pinned at bottom. Transparent so the
   agent panel's glass surface shows through. */
.dash-agent__input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(15, 23, 42, .08);
  background: transparent;
  flex-shrink: 0;
}
.dash-agent__textarea {
  flex: 1;
  min-width: 0;
  /* Padding sums to 18px y; combined with line-height 1.4 * font-size sm
     this gives a 40px single-row resting height that matches .dash-agent__send. */
  padding: 9px 12px;
  min-height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-ink);
  resize: none;
  outline: none;
  max-height: 140px;
  overflow-y: auto;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.dash-agent__textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}
.dash-agent__textarea::placeholder { color: var(--color-subtle); }
.dash-agent__send {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.dash-agent__send:hover { background: var(--color-brand); }
.dash-agent__send:active { transform: scale(.94); }

/* Responsive — narrow viewports use the same collapsed sidebar treatment
   as the manual toggle (the JS still wins if the user has expanded it). */
@media (max-width: 1100px) {
  .dashboard:not(.is-sidebar-expanded-force) { --sidebar-col: 92px; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__brand { justify-content: center; padding: 4px 0 12px; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__brand .logo__text { display: none; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__section-label { display: none; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__demo-note { display: none; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__item { justify-content: center; padding: 12px 10px; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__label { display: none; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__upgrade { display: none; }
  .dashboard:not(.is-sidebar-expanded-force) .dash-sidebar__upgrade-mini { display: grid; }
  .dash-agent { width: calc(100vw - 32px); }
}

.dash-topbar {
  /* Flat header inside the panel. Sticky relative to .dash-main (the
     scroll container), so it stays at the top of the visible main area
     while view content scrolls underneath. flex-shrink:0 keeps it from
     squeezing when its dash-main parent is a flex column. */
  flex-shrink: 0;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  border-radius: 12px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Back arrow — inline inside .dash-topbar__heading at the start of the
   title row (mobile only). Display:none in default state so desktop layout
   is unaffected; mobile media query reveals it. */
.dash-topbar__back {
  width: 36px; height: 36px; padding: 0;
  display: none;
  place-items: center;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.dash-topbar__back:hover { background: var(--color-canvas); border-color: var(--color-ink-soft); color: var(--color-ink); }
/* Home (tile grid) is the root — no level to go back to, so hide the arrow
   even on mobile where it's otherwise always shown. */
.dashboard.is-tile-grid .dash-topbar__back { display: none; }
.dash-topbar__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-topbar__eyebrow {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.dash-topbar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0;
}
.dash-topbar__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Inline page tag — sub-views set this via window.__dashSetTopbarTag.
   Compact success pill that sits next to the page title. */
.dash-topbar__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  background: var(--color-success-light);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  line-height: 1.5;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
/* The `display:inline-flex` above beats the UA `[hidden]{display:none}`, so a
   tag set hidden (every tab except Check-In/Reviews) still rendered as an empty
   green pill on desktop. Honor the hidden attribute explicitly. */
.dash-topbar__tag[hidden] { display: none !important; }
.dash-topbar__tag:hover { background: var(--color-canvas); border-color: var(--color-success); box-shadow: var(--shadow-card); }
.dash-topbar__tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-light);
}
.dash-topbar__tag-arrow { font-weight: var(--font-weight-bold); transition: transform .15s; }
.dash-topbar__tag:hover .dash-topbar__tag-arrow { transform: translateX(2px); }
.dash-topbar__actions { display: flex; align-items: center; gap: var(--space-2); position: relative; }

/* Horizontal/bottom inset is handled by .dash-main padding now; only need
   a gap between the floating topbar card and the view content below.
   flex:1 lets fit-to-viewport sub-views (.chk-page--fit) claim remaining
   height instead of hard-coding a min-height. */
.dash-view {
  padding: 16px 0 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.settings-placeholder { padding: 40px 0; }
.settings-placeholder h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); }
.settings-placeholder p  { color: var(--color-muted); margin-top: 4px; }

/* ════════════════════════════════════════════
   DASHBOARD HOME (modern)
════════════════════════════════════════════ */
.dh-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}
.dh-greeting { font-size: 28px; font-weight: var(--font-weight-extrabold); letter-spacing: -.5px; margin-bottom: 4px; }
.dh-sub      { font-size: var(--font-size-md); color: var(--color-muted); }
.dh-sub strong { color: var(--color-ink); font-weight: var(--font-weight-bold); }
.dh-header__date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 8px 14px;
}
.dh-header__date-label { font-size: 10px; font-weight: var(--font-weight-extrabold); color: var(--color-muted); letter-spacing: .12em; }
.dh-header__date-value { font-size: var(--font-size-base); color: var(--color-ink); font-weight: var(--font-weight-bold); margin-top: 2px; }

/* KPI cards */
.dh-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dh-kpi {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 18px 20px;
}
.dh-kpi__label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-muted);
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.dh-kpi__value {
  font-size: 32px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.dh-kpi__delta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}
.dh-kpi__delta--success { color: var(--color-success); }
.dh-kpi__delta--muted   { color: var(--color-muted); }
.dh-kpi__sub { font-weight: var(--font-weight-medium); color: var(--color-muted); }

/* Row: chart + score side-by-side */
.dh-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  margin-bottom: 16px;
}
.dh-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 22px 24px;
}
.dh-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.dh-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); }
.dh-card__sub   { font-size: 12px; color: var(--color-muted); margin-top: 2px; }

.dh-badge {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}
.dh-badge--success { background: var(--color-success-light); color: var(--color-success); }

/* Chart card */
.dh-chart__canvas { height: 220px; position: relative; }

/* Score card */
.dh-score { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dh-score .dh-card__head { width: 100%; }
.dh-score__ring { margin: 6px 0 14px; }
.dh-score__pill {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  background: var(--color-brand-light);
  color: var(--color-brand);
}

/* AI action card — featured row */
.dh-action {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}
.dh-action::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(124, 58, 237,.08), transparent 70%);
  right: -80px; top: -80px;
  pointer-events: none;
}
.dh-action__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}
.dh-action__eyebrow { font-size: 11px; font-weight: var(--font-weight-extrabold); color: var(--color-brand); letter-spacing: .1em; }
.dh-action__impact {
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: 12px;
  font-weight: var(--font-weight-extrabold);
  padding: 5px 12px;
  border-radius: 999px;
}
.dh-action__body {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  position: relative;
}
.dh-action__icon {
  width: 52px; height: 52px;
  background: var(--color-surface);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.dh-action__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); margin-bottom: 4px; }
.dh-action__desc  { font-size: var(--font-size-base); color: var(--color-muted); line-height: 1.6; }
.dh-action__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  position: relative;
}
.dh-action__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity .15s;
}
.dh-action__cta:hover { opacity: .88; }
.dh-action__cta span { font-size: 16px; }
.dh-action__meta { font-size: 12px; color: var(--color-muted); }

/* Responsive */
@media (max-width: 1024px) {
  .dh-row { grid-template-columns: 1fr; }
  .dh-score { padding: 22px; }
}
@media (max-width: 768px) {
  .dh-header { flex-direction: column; align-items: flex-start; }
  .dh-kpis { grid-template-columns: repeat(2, 1fr); }
  .dh-kpi__value { font-size: 26px; }
  .dh-action__footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ════════════════════════════════════════════
   DASHBOARD OVERVIEW v2  (AETHER-inspired 65/35)
   Classes: dh-overview / dh-grid-65-35 / dh-hero / dh-kpi-tile /
            dh-side / dh-score-card / dh-pro / dh-trend / dh-recs /
            dh-rec / dh-activity
   All colors from design tokens (--color-brand, semantic-light, neutrals).
════════════════════════════════════════════ */
.dh-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.dh-grid-65-35 {
  display: grid;
  grid-template-columns: 1.85fr 1fr;   /* ~65/35 */
  gap: var(--space-5);
}
.dh-grid-65-35 > * { min-width: 0; }

/* ── HERO (left) ── */
.dh-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.dh-hero__greeting {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.6px;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.dh-hero__sub {
  font-size: var(--font-size-md);
  color: var(--color-muted);
  margin: 0;
}

/* KPI tiles — 2x2 pastel grid with arrow buttons */
.dh-kpis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.dh-kpi-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  min-height: 140px;
}
.dh-kpi-tile--peach { background: var(--color-warning-light); }
.dh-kpi-tile--blue  { background: var(--color-brand-light); }
.dh-kpi-tile--mint  { background: var(--color-success-light); }
.dh-kpi-tile--cream { background: var(--color-surface); }

.dh-kpi-tile__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.dh-kpi-tile__value {
  font-size: 32px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.6px;
  color: var(--color-ink);
  margin-top: auto;
}
.dh-kpi-tile__meta {
  display: flex; gap: 4px; align-items: baseline;
  font-size: var(--font-size-xs);
}
.dh-kpi-tile__delta { color: var(--color-success); font-weight: var(--font-weight-bold); }
.dh-kpi-tile__sub   { color: var(--color-muted); }

.dh-kpi-tile__cta {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.dh-kpi-tile__cta svg { width: 14px; height: 14px; }
.dh-kpi-tile__cta:hover { background: var(--color-ink-mid); transform: translate(-1px, -1px); }

/* ── SIDE (right column: score + pro) ── */
.dh-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Score card — dark */
.dh-score-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 20px 20px,
    linear-gradient(135deg, var(--color-ink-dark) 0%, var(--color-ink-mid) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.dh-score-card::before {
  content: ''; position: absolute; width: 200px; height: 200px;
  background: rgba(124, 58, 237,.25); border-radius: 50%; filter: blur(80px);
  top: -60px; right: -60px; pointer-events: none;
}
.dh-score-card::after {
  content: ''; position: absolute; width: 160px; height: 160px;
  background: rgba(139,92,246,.18); border-radius: 50%; filter: blur(60px);
  bottom: -50px; left: -50px; pointer-events: none;
}
.dh-score-card > * { position: relative; z-index: 1; }
.dh-score-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-2);
}
.dh-score-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dh-score-card__pill {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  background: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.dh-score-card__ring {
  display: flex; justify-content: center; align-items: center;
  margin: var(--space-2) 0;
  flex: 1;
}
.dh-score-card__sub {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.55);
  text-align: center;
  margin: 0;
}

/* Pro upgrade card — brand gradient + dot pattern, click opens upgrade modal */
.dh-pro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-hover) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.dh-pro:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(124, 58, 237,.35), inset 0 0 0 1px rgba(255,255,255,.14);
}
.dh-pro::before {
  content: ''; position: absolute; width: 180px; height: 180px;
  background: rgba(255,255,255,.14); border-radius: 50%; filter: blur(40px);
  top: -60px; right: -40px; pointer-events: none;
}
.dh-pro::after {
  content: ''; position: absolute; width: 140px; height: 140px;
  background: rgba(139,92,246,.32); border-radius: 50%; filter: blur(50px);
  bottom: -50px; left: -30px; pointer-events: none;
}
.dh-pro > * { position: relative; z-index: 1; }
.dh-pro__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: .12em;
  background: rgba(255,255,255,.18);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.dh-pro__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.3px;
  margin: 0 0 var(--space-1);
  max-width: 180px;
  line-height: 1.3;
}
.dh-pro__sub {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.75);
  line-height: 1.5;
  margin: 0 50px 0 0;
}
.dh-pro__cta {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform .15s;
}
.dh-pro__cta svg { width: 14px; height: 14px; }
.dh-pro__cta:hover { transform: translate(-1px, -1px); }

/* ── TREND chart (Row 2 left) ── */
.dh-trend {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.dh-trend__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-5);
}
.dh-trend__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  margin: 0 0 2px;
  color: var(--color-ink);
}
.dh-trend__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin: 0;
}
.dh-trend__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
  cursor: pointer;
}
.dh-trend__summary {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.dh-trend__total {
  font-size: 28px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.5px;
  color: var(--color-ink);
}
.dh-trend__delta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  background: var(--color-success-light);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.dh-trend__total-sub {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.dh-trend__chart {
  height: 220px;
  position: relative;
}

/* ── RECOMMENDATIONS (Row 2 right) ── */
.dh-recs {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dh-recs__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  margin: 0;
  color: var(--color-ink);
}
.dh-rec {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-3);
  align-items: flex-start;
}
.dh-rec__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.dh-rec__icon--brand   { background: var(--color-brand-light); }
.dh-rec__icon--warning { background: var(--color-warning-light); }
.dh-rec__icon--success { background: var(--color-success-light); }
.dh-rec__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  margin: 0 0 2px;
}
.dh-rec__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-2);
}
.dh-rec__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  text-decoration: none;
}
.dh-rec__link:hover { text-decoration: underline; }

/* ── RECENT ACTIVITY table (Row 3, full width) ── */
.dh-activity {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.dh-activity__head {
  margin-bottom: var(--space-5);
}
.dh-activity__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  margin: 0 0 2px;
  color: var(--color-ink);
}
.dh-activity__sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin: 0;
}
.dh-activity__table {
  width: 100%;
  border-collapse: collapse;
}
.dh-activity__table th,
.dh-activity__table td {
  padding: var(--space-3) 0;
  text-align: left;
  font-size: var(--font-size-base);
  border-bottom: 1px solid var(--color-border);
}
.dh-activity__table th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dh-activity__table tbody tr:last-child td { border-bottom: 0; }
.dh-activity__table td:first-child {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}
.dh-activity__action-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.dh-activity__date {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}
.dh-activity__result {
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-semibold);
}
.dh-activity__status {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.dh-activity__status--success { background: var(--color-success-light); color: var(--color-success); }
.dh-activity__status--brand   { background: var(--color-brand-light);   color: var(--color-brand-text); }
.dh-activity__status--warning { background: var(--color-warning-light); color: var(--color-warning); }
.dh-activity__status--error   { background: var(--color-error-light);   color: var(--color-error); }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .dh-grid-65-35 { grid-template-columns: 1fr; }
  .dh-side { flex-direction: row; }
  .dh-side > * { flex: 1; }
}
@media (max-width: 720px) {
  .dh-kpis-grid  { grid-template-columns: 1fr; }
  .dh-side       { flex-direction: column; }
  .dh-trend      { padding: var(--space-5); }
  .dh-activity   { padding: var(--space-5); }
  .dh-activity__table th:nth-child(2),
  .dh-activity__table td:nth-child(2) { display: none; }   /* hide Date column on mobile */
}

/* ════════════════════════════════════════════
   DASHBOARD CHATBOT  (cb-*)
   Floating bubble bottom-right of viewport, only rendered in dashboard shell.
════════════════════════════════════════════ */
.cb-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(124, 58, 237,.4);
  z-index: 1000;
  transition: transform .2s ease;
}
.cb-fab:hover  { transform: scale(1.06); }
.cb-fab:active { transform: scale(.96); }
.cb-fab svg    { width: 24px; height: 24px; }
.cb-fab[hidden] { display: none; }

.cb-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 48px);
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
}
.cb-panel[hidden] { display: none; }

.cb-panel__head {
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.cb-panel__title {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-base);
  color: var(--color-ink);
}
.cb-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.cb-close {
  width: 28px; height: 28px;
  background: var(--color-surface);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cb-close:hover { background: var(--color-divider); color: var(--color-ink); }

.cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cb-msg {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  word-wrap: break-word;
}
.cb-msg--bot {
  align-self: flex-start;
  background: var(--color-surface);
  color: var(--color-ink);
  border-bottom-left-radius: 4px;
}
.cb-msg--bot strong { color: var(--color-ink); font-weight: var(--font-weight-bold); }
.cb-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-brand-text);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-brand-border);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.cb-link:hover { text-decoration-color: var(--color-brand); }
.cb-msg--user {
  align-self: flex-end;
  background: var(--color-brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.cb-typing {
  display: inline-flex; gap: 4px;
  padding: 12px 16px;
}
.cb-typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-subtle);
  animation: cb-typing-blink 1.2s infinite ease-in-out;
}
.cb-typing-dot:nth-child(2) { animation-delay: .15s; }
.cb-typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes cb-typing-blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--space-4) var(--space-3);
}
.cb-chip {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  font-family: inherit;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cb-chip:hover {
  background: var(--color-brand-light);
  color: var(--color-brand-text);
  border-color: var(--color-brand-border);
}

.cb-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.cb-input {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-ink);
}
.cb-input::placeholder { color: var(--color-subtle); }
.cb-input:focus { outline: none; border-color: var(--color-brand); background: var(--color-canvas); }

.cb-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.cb-send:hover { background: var(--color-brand-hover); }
.cb-send svg   { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .cb-panel {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 12px;
    height: calc(100vh - 24px);
  }
  .cb-fab { right: 16px; bottom: 16px; }
}

/* ════════════════════════════════════════════
   GO CHECK-IN  (chk-*)
   Kiosk-centric layout: fits one viewport. 3-col main row with
   landscape kiosk device in the center.
════════════════════════════════════════════ */
.chk-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Make Check-In's page fit the visible area exactly so the kiosk preview
   scales to viewport (no scroll). Other sub-views keep auto-height so
   tall content (Reviews stack, etc.) can still scroll naturally. */
.chk-page--fit {
  flex: 1;
  min-height: 0;
}

/* POS tab panel — stretches to fill the page's remaining height after
   the seo-tabs row so the inner .chk-coming-soon can size to viewport
   (matches Booking's full-viewport empty state). */
.pos-page .seo-panel {
  flex: 1;
  min-height: 0;
}

/* .chk-hero removed — page title now lives in the dash-topbar; the
   contextual status pill (Connected to ...) is surfaced via
   window.__dashSetTopbarTag as an inline tag next to the title. */
@keyframes chk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.4); }
}

/* Flow section — explains check-in → SMS → rating → Reviews so users entering
   Go Check-in first understand where the data flows next */
.chk-flow {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
}
.chk-flow__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.chk-flow__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -.1px;
}
.chk-flow__sub {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 2px 0 0;
}
.chk-flow__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  background: var(--color-brand-light);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.chk-flow__badge-icon { font-size: var(--font-size-sm); }

.chk-flow__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.chk-flow__step {
  flex: 1 1 200px;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
  min-width: 0;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.chk-flow__step:not(.chk-flow__step--cta):hover {
  background: var(--color-canvas);
  border-color: var(--color-divider);
}
.chk-flow__step-num {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  color: var(--color-ink-soft);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  margin-top: 2px;
}
.chk-flow__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.chk-flow__step-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: 1.3;
}
.chk-flow__step-icon { font-size: var(--font-size-lg); line-height: 1; }
.chk-flow__step-sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  line-height: 1.4;
  margin: 0;
}

.chk-flow__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-subtle);
  flex-shrink: 0;
  align-self: center;
}
.chk-flow__chevron svg { width: 16px; height: 16px; }

.chk-flow__step--cta {
  cursor: pointer;
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-canvas);
}
.chk-flow__step--cta:hover {
  background: var(--color-ink-mid);
  border-color: var(--color-ink-mid);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}
.chk-flow__step--cta .chk-flow__step-num {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .15);
  color: var(--color-canvas);
}
.chk-flow__step--cta .chk-flow__step-title { color: var(--color-canvas); }
.chk-flow__step--cta .chk-flow__step-sub   { color: rgba(255, 255, 255, .72); }

/* KPI strip — pastel tiles with icon, value, trend */
.chk-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.chk-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.chk-kpi::after {
  content: ''; position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  bottom: -50px; right: -30px;
  pointer-events: none;
  opacity: .55;
}
.chk-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

.chk-kpi--peach { background: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 220%); }
.chk-kpi--peach::after { background: radial-gradient(circle, rgba(245,158,11,.25), transparent 70%); }
.chk-kpi--blue  { background: linear-gradient(135deg, #EFF6FF 0%, #BFDBFE 220%); }
.chk-kpi--blue::after  { background: radial-gradient(circle, rgba(124, 58, 237,.22),  transparent 70%); }
.chk-kpi--mint  { background: linear-gradient(135deg, #F0FDF4 0%, #BBF7D0 220%); }
.chk-kpi--mint::after  { background: radial-gradient(circle, rgba(22,163,74,.22),  transparent 70%); }
.chk-kpi--blush { background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 220%); }
.chk-kpi--blush::after { background: radial-gradient(circle, rgba(220,38,38,.20),  transparent 70%); }

.chk-kpi > * { position: relative; z-index: 1; }
.chk-kpi__top { display: flex; justify-content: space-between; align-items: flex-start; }
.chk-kpi__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.chk-kpi__icon {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.chk-kpi__icon svg { width: 16px; height: 16px; }
.chk-kpi__value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.chk-kpi__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.6px;
  color: var(--color-ink);
  line-height: 1;
}
.chk-kpi__bottom {
  display: flex; justify-content: space-between; align-items: center;
}
.chk-kpi__sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
}
.chk-kpi__sub--warn { color: var(--color-error); font-weight: var(--font-weight-bold); }
.chk-kpi__trend { width: 22px; height: 22px; flex-shrink: 0; }
.chk-kpi__trend--up   { color: var(--color-success); }
.chk-kpi__trend--down { color: var(--color-error); }

/* Main 3-column grid — customize | kiosk (focus) | prompts + feed */
.chk-main-grid {
  display: grid;
  grid-template-columns: 290px 1fr 290px;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}
.chk-main-grid > * { min-width: 0; min-height: 0; }

/* Left column wrapper */
.chk-left { display: flex; min-width: 0; min-height: 0; }
.chk-left > .chk-card { width: 100%; flex: 1; }

/* Mobile-only bottom-sheet chrome on .chk-left — hidden on desktop where
   the customize panel is always inline. The mobile media query reveals
   these and repositions .chk-left as a fixed sheet. */
.chk-theme-btn { display: none; }
.chk-customize-sheet-head { display: none; }
.chk-customize-backdrop { display: none; }

/* Card base */
.chk-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.chk-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.chk-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  margin: 0 0 2px;
  color: var(--color-ink);
}
.chk-card__sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin: 0;
}

/* Coming Soon block — shared empty state for demo modules not yet built.
   Sits inside a .chk-card so it inherits the page's card styling. Uses
   flex:1 + justify-center so when the parent .chk-page--fit fills the
   viewport, the block centers vertically and the card grows to fill. */
.chk-coming-soon {
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: var(--space-8) var(--space-5);
}
/* On a coming-soon page the card keeps its base flex:1 so it grows to fill the
   space ABOVE the closing CTA, pinning the CTA to the bottom of the viewport
   (see the desktop page-fit block next to .prod-subscribe). */
.chk-coming-soon__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-brand-light);
  color: var(--color-brand);
  margin-bottom: 4px;
}
.chk-coming-soon__icon svg { width: 32px; height: 32px; }
.chk-coming-soon__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.4px;
  color: var(--color-ink);
  margin: 0;
}
.chk-coming-soon__desc {
  max-width: 480px;
  font-size: var(--font-size-base);
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}
.chk-coming-soon__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 4px;
}
.chk-coming-soon__feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.chk-coming-soon__feature svg { width: 14px; height: 14px; color: var(--color-brand); flex-shrink: 0; }
/* "Coming Soon" status tag — replaces the old notify-me button. Static badge
   with a gently pulsing dot so it reads as a live status, not a CTA. */
.chk-coming-soon__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 9px 18px;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.chk-coming-soon__tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, .45);
  animation: chk-cs-pulse 1.9s ease-out infinite;
}
@keyframes chk-cs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chk-coming-soon__tag-dot { animation: none; }
}

/* Recent check-ins feed */
.chk-feed__live { gap: 6px; }
.chk-feed__live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  animation: chk-pulse 2s infinite;
  display: inline-block;
}
.chk-feed__list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chk-feed__list::-webkit-scrollbar { width: 4px; }
/* Modern customer card — vertical stack: identity header → contact lines → tier pill + visits.
   Plain white card, soft border, no left stripe; tier shows up in the bottom pill. */
.chk-feed__row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  transition: box-shadow .2s, transform .15s, border-color .15s;
  cursor: pointer;
}
.chk-feed__row:hover {
  border-color: var(--color-divider);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}

/* Newest row — soft brand wash + subtle ring (preserved from prior design) */
.chk-feed__row.is-just-now {
  background:
    linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-canvas) 70%),
    var(--color-canvas);
  border-color: var(--color-brand-border);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .08);
}
.chk-feed__row.is-just-now:hover {
  box-shadow: 0 8px 20px rgba(124, 58, 237, .12);
}

/* ── Header row: avatar + name/time stack + 3-dot menu ── */
.chk-feed__head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--space-2);
  align-items: center;
}
.chk-feed__avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  box-shadow: 0 0 0 2px var(--color-canvas), 0 2px 6px rgba(0, 0, 0, .08);
}
.chk-feed__row.is-just-now .chk-feed__avatar::after {
  /* Pulse ring on the newest avatar — same effect as before, draws the eye */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--color-success);
  animation: chk-feed-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes chk-feed-pulse {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.45); opacity: 0;  }
}
.chk-feed__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chk-feed__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chk-feed__time {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 1px;
}
.chk-feed__row.is-just-now .chk-feed__time {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
}
.chk-feed__menu {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.chk-feed__menu svg { width: 16px; height: 16px; }
.chk-feed__menu:hover { background: var(--color-surface); color: var(--color-ink); }

/* ── Contact lines: phone + email, icon-prefixed, muted ── */
.chk-feed__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chk-feed__line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  min-width: 0;
}
.chk-feed__line svg {
  width: 13px;
  height: 13px;
  color: var(--color-muted);
  flex-shrink: 0;
}
.chk-feed__line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Footer row: tier pill (left) + lifetime visits (right) ── */
.chk-feed__foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.chk-feed__pill {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
}
.chk-feed__pill--vip {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #92400E;
  border: 1px solid rgba(217, 119, 6, .25);
}
.chk-feed__pill--new {
  background: rgba(34, 197, 94, .12);
  color: var(--color-success);
}
.chk-feed__pill--regular {
  background: var(--color-surface);
  color: var(--color-muted);
}
.chk-feed__visits {
  font-size: 11px;
  color: var(--color-muted);
}

.chk-feed__foot {
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}
.chk-feed__more {
  width: 100%;
  background: transparent;
  border: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.chk-feed__more:hover { background: var(--color-brand-light); }

/* Fly-to-feed ghost — green check badge that animates from the kiosk's
   success screen to the new feed row (add-to-cart cue). */
.chk-fly-ghost {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(34, 197, 94, .45);
  will-change: transform, opacity;
}
.chk-fly-ghost svg { width: 18px; height: 18px; }

/* New row pulse — fires when the fly ghost lands, draws the eye one more
   beat before settling. Overshoot easing gives the "popped in" feel. */
.chk-feed__row.is-just-added {
  animation: chk-row-pop .65s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes chk-row-pop {
  0%   { transform: scale(.96); box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
  50%  { transform: scale(1.025); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ──────────────────────────────────────────────
   AI promo suggestion popover — fixed below the 3-dot button on a feed row
────────────────────────────────────────────── */
.chk-promo-menu {
  position: fixed;
  /* Above .chk-modal-overlay (9100) so the menu is clickable when opened
     from a 3-dot inside the All Check-ins modal — otherwise the overlay
     covers it and swallows clicks. */
  z-index: 9500;
  min-width: 300px;
  max-width: 340px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
  padding: 6px;
  animation: chk-pop-in .15s ease-out;
}
@keyframes chk-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chk-promo-menu__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.chk-promo-menu__ai {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--color-brand);
}
.chk-promo-menu__ai::before { content: '✨'; font-size: 11px; }
.chk-promo-menu__name {
  font-size: 11px;
  color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.chk-promo-menu__item {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
}
.chk-promo-menu__item:hover { background: var(--color-surface); }
.chk-promo-menu__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.chk-promo-menu__icon svg { width: 16px; height: 16px; }
.chk-promo-menu__icon--brand   { background: var(--color-brand-light);     color: var(--color-brand);   }
.chk-promo-menu__icon--success { background: rgba(34, 197, 94, .12);       color: var(--color-success); }
.chk-promo-menu__icon--warning { background: rgba(245, 158, 11, .15);      color: var(--color-warning); }
.chk-promo-menu__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.chk-promo-menu__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}
.chk-promo-menu__desc {
  font-size: 11px; line-height: 1.35;
  color: var(--color-muted);
}
.chk-promo-menu__pill {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .3px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────
   Promo SMS preview modal — full-screen overlay + centered card.
   SaaS-leaning: airy spacing, soft shadows, editable message textarea,
   inline character counter, two-state body (form ↔ success).
────────────────────────────────────────────── */
.chk-modal-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  animation: chk-fade-in .15s ease-out;
}
@keyframes chk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.chk-modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  background: var(--color-canvas);
  border-radius: 20px;
  box-shadow:
    0 32px 80px rgba(15, 23, 42, .24),
    0 8px 24px rgba(15, 23, 42, .08);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: chk-pop-in .2s cubic-bezier(.16, 1, .3, 1);
}

/* ── Header ── */
.chk-modal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--space-5) var(--space-5) var(--space-4);
  gap: var(--space-3);
}
.chk-modal__head-info { min-width: 0; }
.chk-modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -.2px;
}
.chk-modal__sub {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.chk-ai-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-brand-light);
  color: var(--color-brand);
}
.chk-modal__suggestion {
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-semibold);
}
.chk-modal__close {
  width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.chk-modal__close:hover { background: var(--color-surface); color: var(--color-ink); }
.chk-modal__close svg { width: 18px; height: 18px; }

/* ── Body (form state) ── */
.chk-modal__body {
  padding: 0 var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* The [hidden] attribute is `display: none` in UA styles (specificity 0,1,0).
   `.chk-modal__body` / `.chk-modal__foot` have the same specificity but win
   by source order, defeating the toggle. Re-attach hidden with higher
   specificity so the form↔success view swap works. */
.chk-modal__body[hidden],
.chk-modal__foot[hidden] { display: none; }

/* Generic form field used inside modals (label above input). */
.upgrade-field { display: flex; flex-direction: column; gap: 6px; }
.upgrade-field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.upgrade-field__input { margin-bottom: 0; }
.chk-modal-overlay[hidden] { display: none; }

/* Feed modal — Recent check-ins "View all" popup. Reuses .chk-modal chrome
   and the existing .chk-feed__row markup, with the inner list flowing inside
   the modal body's scroll container (so we suppress the row's own overflow). */
.chk-feed-modal { max-width: 520px; }
.chk-feed-modal__body { padding-top: var(--space-3); }
.chk-feed-modal__list {
  overflow: visible;
  flex: 0 1 auto;
  min-height: 0;
}
.chk-feed-modal .chk-modal__sub {
  display: block;
  margin: 4px 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}

/* Upgrade plan modal — two-step wizard (pick plan → enter details). */
.upgrade-modal { max-width: 480px; }

.upgrade-steps {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.upgrade-step-dot {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-divider);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  transition: background .15s, border-color .15s, color .15s;
}
.upgrade-step-dot.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}
.upgrade-step-line {
  width: 28px; height: 2px;
  background: var(--color-divider);
  border-radius: 999px;
}

.upgrade-step-panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: upgrade-step-in .2s ease-out;
}
.upgrade-step-panel[hidden] { display: none; }
@keyframes upgrade-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.upgrade-step-sub {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin: 0;
}

.upgrade-step-actions {
  display: flex; gap: 10px; margin-top: 4px;
}

/* ──────────────────────────────────────────────
   BACK TO TOP — floating button (bottom-right),
   fades in once scrolled past ~400px.
────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  /* Stacked above the chatbot FAB so the two don't overlap.
     Chat FAB = 56px @ bottom:24px → back-to-top sits 12px above it. */
  bottom: calc(24px + 56px + 12px);
  right: 30px; /* slight right-shift centers the smaller 44px button under the 56px FAB */
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
  z-index: 90;
}
@media (max-width: 640px) {
  .back-to-top {
    bottom: calc(16px + 56px + 10px);
    right: 22px;
  }
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--color-ink-dark, #000);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .25);
}
.back-to-top svg { width: 18px; height: 18px; }

/* ──────────────────────────────────────────────
   TRY DEMO MODAL — small "capture lead" popup
   fired from the Try Demo CTA in header/footer.
────────────────────────────────────────────── */
.try-demo-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  animation: try-demo-fade-in .18s ease-out;
}
@keyframes try-demo-fade-in { from { opacity: 0; } to { opacity: 1; } }
.try-demo-overlay.is-closing { animation: try-demo-fade-out .18s ease-out forwards; }
@keyframes try-demo-fade-out { to { opacity: 0; } }

.try-demo {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--color-canvas);
  border-radius: 24px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
  box-shadow:
    0 32px 80px rgba(15, 23, 42, .28),
    0 8px 24px rgba(15, 23, 42, .08);
  animation: try-demo-pop .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes try-demo-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.try-demo__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.try-demo__close:hover { background: var(--color-surface); color: var(--color-ink); }
.try-demo__close svg { width: 18px; height: 18px; }

.try-demo__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-brand) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .28);
}

.try-demo__title {
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.4px;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.try-demo__sub {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0 auto var(--space-5);
  max-width: 320px;
}

.try-demo__form {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: var(--space-3);
}
.try-demo__input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-md);
  color: var(--color-ink);
  background: var(--color-canvas);
  transition: border-color .15s, box-shadow .15s;
}
.try-demo__input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
}
.try-demo__input::placeholder { color: var(--color-subtle); }

.try-demo__cta {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 24px;
  background: var(--color-ink);
  color: #fff;
  border: 0; border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.try-demo__cta:hover { opacity: .92; transform: translateY(-1px); }

.try-demo__skip {
  background: transparent; border: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.try-demo__skip:hover { color: var(--color-ink); background: var(--color-surface); }

/* Plan picker — radio rows with name on the left, price on the right. */
.upgrade-plans { display: flex; flex-direction: column; gap: 8px; }
.upgrade-plan {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upgrade-plan__radio { margin-top: 2px; }
.upgrade-plan:hover { border-color: var(--color-ink-mid); }
.upgrade-plan__input { position: absolute; opacity: 0; pointer-events: none; }
.upgrade-plan__radio {
  width: 18px; height: 18px;
  border: 2px solid var(--color-divider);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s;
}
.upgrade-plan:has(.upgrade-plan__input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
}
.upgrade-plan:has(.upgrade-plan__input:checked) .upgrade-plan__radio { border-color: var(--color-brand); }
.upgrade-plan:has(.upgrade-plan__input:checked) .upgrade-plan__radio::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--color-brand); border-radius: 50%;
}
.upgrade-plan__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.upgrade-plan__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.upgrade-plan__name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.upgrade-plan__badge {
  font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--color-brand); color: #fff;
  text-transform: uppercase;
}
.upgrade-plan__desc {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  line-height: 1.35;
}
.upgrade-plan__price { font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
.upgrade-plan__period { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-muted); }
.chk-modal__recipient {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.chk-modal__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-sm);
}
.chk-modal__rec-meta { min-width: 0; }
.chk-modal__rec-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}
.chk-modal__rec-phone {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Editable message field */
.chk-modal__field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.chk-modal__field-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.chk-modal__field-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  letter-spacing: .2px;
}
.chk-modal__count {
  font-size: 11px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.chk-modal__count.is-over .chk-modal__count-val { color: var(--color-error); font-weight: var(--font-weight-bold); }
.chk-modal__bubble {
  width: 100%;
  background: var(--color-canvas);
  color: var(--color-ink);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  resize: vertical;
  min-height: 110px;
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.chk-modal__bubble:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}
.chk-modal__field-hint {
  margin: 0;
  font-size: 11px;
  color: var(--color-muted);
}

/* ── AI-flavored message field — soft gradient + label group + regenerate ── */
.chk-modal__field--ai {
  padding: 12px;
  background:
    linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 50%, #ECFEFF 100%);
  border: 1px solid #E0E7FF;
  border-radius: 12px;
  gap: 8px;
}
.chk-modal__field--ai .chk-modal__field-head { align-items: center; }
.chk-modal__label-group {
  display: inline-flex; align-items: center; gap: 6px;
}
.chk-ai-chip--xs {
  font-size: 9px;
  padding: 2px 6px;
}
.chk-modal__field-actions {
  display: inline-flex; align-items: center; gap: 8px;
}
.chk-modal__regen {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chk-modal__regen:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
}
.chk-modal__regen:disabled { opacity: .55; cursor: wait; }
.chk-modal__regen svg { width: 12px; height: 12px; }
.chk-modal__regen.is-spinning svg {
  animation: chk-spin .65s linear infinite;
}
@keyframes chk-spin { to { transform: rotate(360deg); } }

/* Brief shimmer on the textarea while "AI is rewriting" — purely cosmetic */
.chk-modal__bubble.is-regenerating {
  color: transparent;
  background:
    linear-gradient(90deg,
      var(--color-canvas) 0%,
      #EEF2FF 50%,
      var(--color-canvas) 100%);
  background-size: 200% 100%;
  animation: chk-shimmer .8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Discount chip selector — segmented control feel; active chip filled brand */
.chk-modal__pcts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.chk-modal__pct {
  padding: 8px 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chk-modal__pct:hover {
  border-color: var(--color-subtle, var(--color-divider));
  background: var(--color-surface);
}
.chk-modal__pct.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

/* Inline "Code THANKS10" display next to the Discount label */
.chk-modal__code-inline {
  font-size: 11px;
  color: var(--color-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.chk-modal__code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  letter-spacing: .8px;
  padding: 2px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* ── Body (success state) ── */
.chk-modal__body--success {
  align-items: center;
  text-align: center;
  padding: 32px var(--space-5) var(--space-5);
  gap: var(--space-3);
}
.chk-modal__success-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(34, 197, 94, .35);
  animation: chk-success-pop .55s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
.chk-modal__success-ring::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, .35);
  animation: chk-success-ring 1.4s ease-out infinite;
}
@keyframes chk-success-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes chk-success-ring {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.35); opacity: 0;  }
}
.chk-modal__success-ring svg { width: 36px; height: 36px; }
.chk-modal__success-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin: 4px 0 0;
  letter-spacing: -.3px;
}
.chk-modal__success-sub {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}
.chk-modal__success-sub strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.chk-modal__success-code {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-weight: var(--font-weight-semibold);
}
.chk-modal__success-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: .8px;
  color: var(--color-ink);
}
/* Demo disclaimer on the success screens (Campaign launched / Message sent) —
   a quiet info chip so users know the result is illustrative only. Borderless +
   fainter than the code pill above it so it reads as a footnote, not a peer. */
.chk-modal__success-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .045);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: .1px;
  color: var(--color-subtle);
}
.chk-modal__success-demo svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: .75;
}

/* ── Footer ── */
.chk-modal__foot {
  padding: var(--space-3) var(--space-5) var(--space-4);
  display: flex; gap: var(--space-3); justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .015));
}
.chk-modal__foot--success { justify-content: center; }
.chk-modal__foot--success .btn { min-width: 140px; }

/* ──────────────────────────────────────────────
   Campaign builder modal — larger sibling of the SMS modal.
   Opens from an AI promotion request CTA. Layout: campaign info card →
   AI message field → chat strip; three views (form / confirm / success).
────────────────────────────────────────────── */
.chk-camp-modal { max-width: 600px; }

/* "AI Generated" larger chip — uses an extra spark icon vs the inline xs */
.chk-ai-chip--gen {
  font-size: 11px;
  padding: 4px 10px;
}

/* Campaign info card — soft wash + 2-col info grid */
.chk-camp-card {
  padding: var(--space-4);
  border-radius: 14px;
  border: 1px solid transparent;
}
/* Accents mirror the prompt-card gradients so the campaign card the user
   clicked into reads as the same palette: peach=warning (birthday),
   pink=error (winback), indigo=brand (VIP). */
.chk-camp-card--peach  { background: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 100%); border-color: #FDBA74; }
.chk-camp-card--pink   { background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%); border-color: #FCA5A5; }
.chk-camp-card--indigo { background: linear-gradient(135deg, #EFF6FF 0%, #BFDBFE 100%); border-color: #93C5FD; }

.chk-camp-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin: 0 0 4px;
  letter-spacing: -.2px;
}
.chk-camp-card__title span { margin-left: 4px; }
.chk-camp-card__desc {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.chk-camp-card__divider {
  height: 0;
  border-top: 1px dashed rgba(0, 0, 0, .12);
  margin: var(--space-3) 0;
}
.chk-camp-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.chk-camp-info { min-width: 0; }
.chk-camp-info__label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2px;
}
.chk-camp-info__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.25;
}
.chk-camp-info__sub {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 1px;
}

/* Body padding adjustments — bigger modal, more breathing room */
.chk-camp-body { gap: var(--space-3); }

/* ── Campaign chat strip — input + post-send toast ── */
.chk-camp-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chk-chat__input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}
.chk-chat__input-row:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}
.chk-chat__input {
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-ink);
}
.chk-chat__input::placeholder { color: var(--color-muted); }
.chk-chat__send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.chk-chat__send:hover { background: var(--color-brand-hover); }
.chk-chat__send:active { transform: scale(.95); }
.chk-chat__send svg { width: 14px; height: 14px; }

/* Post-send toast — confirms the tweak landed and links to the chatbot
   for full history. Sits inline below the chat input so it doesn't
   obscure the campaign card. */
.chk-camp-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-success-light);
  border: 1px solid #BBF7D0;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.chk-camp-toast.is-in { opacity: 1; transform: translateY(0); }
/* `display: flex` above overrides UA [hidden] { display: none } via source
   order at equal specificity. Re-attach with higher specificity so the toast
   takes no space until the first send. */
.chk-camp-toast[hidden] { display: none; }
.chk-camp-toast__check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chk-camp-toast__check svg { width: 11px; height: 11px; }
.chk-camp-toast__text {
  font-weight: var(--font-weight-semibold);
}
.chk-camp-toast__link {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
  cursor: pointer;
}
.chk-camp-toast__link:hover { color: var(--color-brand-hover); }

/* ── Chat view (data-view="chat" inside the campaign modal) ── */
.chk-camp-chat-view {
  gap: var(--space-3);
  min-height: 380px;
}
.chk-camp-chat-head {
  display: grid;
  grid-template-columns: 32px 40px 1fr;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.chk-camp-chat-back {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--color-ink-soft);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s, color .15s;
}
.chk-camp-chat-back:hover { background: var(--color-surface); color: var(--color-ink); }
.chk-camp-chat-back svg { width: 18px; height: 18px; }
.chk-camp-chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-light) 0%, #DBEAFE 100%);
  color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.chk-camp-chat-id { min-width: 0; }
.chk-camp-chat-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.2;
}
.chk-camp-chat-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 2px;
}
.chk-camp-chat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  display: inline-block;
}

.chk-camp-chat-history {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 360px;
  min-height: 200px;
}
.chk-camp-chat-history:empty::before {
  content: 'Start typing to tweak this campaign…';
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin: auto;
  text-align: center;
}
.chk-camp-chat-bubble {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 85%;
  word-wrap: break-word;
  animation: chk-bubble-in .2s ease-out;
}
@keyframes chk-bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chk-camp-chat-bubble--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chk-camp-chat-bubble--ai {
  align-self: flex-start;
  background: var(--color-canvas);
  border: 1px solid #DDD6FE;
  color: var(--color-ink);
  border-bottom-left-radius: 4px;
}
.chk-camp-chat-bubble--ai.is-loading {
  padding: 12px 16px;
}

/* "AI thinking" 3-dot indicator */
.chk-camp-chat-dots { display: inline-flex; align-items: center; gap: 4px; }
.chk-camp-chat-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
  opacity: .35;
  animation: chk-camp-dot 1.2s ease-in-out infinite;
}
.chk-camp-chat-dots span:nth-child(2) { animation-delay: .15s; }
.chk-camp-chat-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes chk-camp-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0);    }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* "What changed" card — nested inside an AI bubble */
.chk-camp-change {
  margin-top: 10px;
  border: 1px solid #E0E7FF;
  border-radius: 10px;
  overflow: hidden;
  font-size: var(--font-size-xs);
}
.chk-camp-change__head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);
  border-bottom: 1px solid #E0E7FF;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}
.chk-camp-change__icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--color-brand-light);
  color: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.chk-camp-change__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  background: var(--color-canvas);
}
.chk-camp-change__label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--color-ink-soft);
}
.chk-camp-change__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-warning);
  display: inline-block;
}
.chk-camp-change__value {
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Confirm view ── */
.chk-camp-body--confirm {
  align-items: center;
  text-align: center;
  padding: 32px var(--space-5);
}
.chk-camp-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 380px;
}
.chk-camp-confirm__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-warning-light);
  color: var(--color-warning);
  display: inline-flex; align-items: center; justify-content: center;
}
.chk-camp-confirm__icon svg { width: 28px; height: 28px; }
.chk-camp-confirm__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin: 4px 0 0;
}
.chk-camp-confirm__sub {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

/* Smart prompts — richer cards with gradient + decorative blob */
.chk-prompts__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chk-prompts__foot {
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.chk-prompts__more {
  width: 100%;
  background: transparent;
  border: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.chk-prompts__more:hover { background: var(--color-brand-light); }
.chk-prompt {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.chk-prompt::after {
  content: ''; position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  top: -60px; right: -50px;
  pointer-events: none;
  opacity: .6;
}
.chk-prompt:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

.chk-prompt--warning { background: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 100%); }
.chk-prompt--warning::after { background: radial-gradient(circle, rgba(245,158,11,.35), transparent 70%); }
.chk-prompt--error   { background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%); }
.chk-prompt--error::after   { background: radial-gradient(circle, rgba(220,38,38,.3), transparent 70%); }
.chk-prompt--brand   { background: linear-gradient(135deg, #F5F3FF 0%, #DDD6FE 100%); }
.chk-prompt--brand::after   { background: radial-gradient(circle, rgba(124, 58, 237,.3), transparent 70%); }

.chk-prompt > * { position: relative; z-index: 1; }
.chk-prompt__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.chk-prompt__icon svg { width: 18px; height: 18px; }
.chk-prompt__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin-bottom: 2px;
  letter-spacing: -.2px;
}
.chk-prompt__desc {
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  line-height: 1.45;
  margin: 0 0 var(--space-2);
}
/* Prompt CTA — uses .btn.btn-ink.btn-sm (styleguide). No custom styling. */

/* Stage — center column hosting the kiosk preview. Same card chrome as
   .chk-card so the Customize button has a surface to anchor against. */
.chk-stage {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.chk-stage__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.chk-stage__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin: 0;
}
.chk-stage__actions { display: flex; gap: 8px; align-items: center; }

/* Desktop/Mobile preview switch — segmented control with animated pill,
   mirrors the chapter switcher pattern in the topbar. */
.chk-device-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
}
.chk-device-toggle__pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: var(--color-ink);
  border-radius: 999px;
  z-index: 0;
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              width     .35s cubic-bezier(.16,1,.3,1),
              opacity   .2s ease;
}
.chk-device-toggle__pill.is-ready { opacity: 1; }
.chk-device-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
}
.chk-device-tab:hover { color: var(--color-ink); }
.chk-device-tab.is-active { color: #fff; }
/* Toggle removed from view entirely — each viewport has exactly one
   useful preview (landscape on desktop, portrait on mobile), so the
   tabs are redundant. The DOM stays so init JS can still programmatically
   "click" the Mobile tab on mobile viewport to set the orientation. */
.chk-device-toggle { display: none; }

/* Portrait mobile frame — iPhone 14 Pro Max styling.
   - 19.5:9 aspect (Pro Max screen ratio)
   - Polished titanium-ish gradient w/ inner bezel highlight
   - Dynamic Island (pill-shaped) overlaid on the screen, not the bezel
   - Subtle side buttons (action+volume left, power right) */
.chk-device--portrait .chk-device__frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  padding: 6px;
  display: flex;
  flex-direction: column;
  border-radius: 52px;
  background:
    linear-gradient(150deg, #2c2c2e 0%, #1a1a1c 55%, #2c2c2e 100%);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .28),
    0 6px 14px rgba(0, 0, 0, .14),
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    inset 0 0 0 6px #0a0a0c;
}
/* Dynamic Island — sits over the top of the screen, centered */
.chk-device--portrait .chk-device__notch {
  left: 50%; top: 14px; transform: translateX(-50%);
  width: 90px; height: 26px;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  z-index: 3;
}
.chk-device--portrait .chk-device__notch::before,
.chk-device--portrait .chk-device__notch::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #1a1a1c;
}
.chk-device--portrait .chk-device__notch::before {
  /* Selfie camera dot */
  right: 10px;
  width: 8px; height: 8px;
  box-shadow: inset 0 0 0 1.5px rgba(60, 80, 140, .35);
}
.chk-device--portrait .chk-device__notch::after {
  /* Face ID sensor */
  left: 12px;
  width: 6px; height: 6px;
  background: rgba(30, 30, 40, .9);
}
.chk-device--portrait .chk-device__screen {
  border-radius: 46px;
  background: #000;
}
/* Side buttons — pseudo-elements on the frame itself so they hug the actual
   silhouette edge regardless of viewport width. */
.chk-device--portrait .chk-device__frame::before,
.chk-device--portrait .chk-device__frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* Left side — combined strip: action button + volume up + volume down */
.chk-device--portrait .chk-device__frame::before {
  left: -2.5px;
  top: 18%;
  width: 3px;
  height: 42%;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(180deg,
      #2a2a2c 0,       #2a2a2c 12%,
      transparent 12%, transparent 17%,
      #2a2a2c 17%,     #2a2a2c 48%,
      transparent 48%, transparent 53%,
      #2a2a2c 53%,     #2a2a2c 100%);
}
/* Right side — single power/lock button */
.chk-device--portrait .chk-device__frame::after {
  right: -2.5px;
  top: 26%;
  width: 3px;
  height: 16%;
  border-radius: 0 2px 2px 0;
  background: #2a2a2c;
}

/* Full View — hides every chrome panel and expands the stage to the whole
   viewport so the kiosk reads like a presentation slide. */
.dashboard--focus {
  grid-template-columns: 1fr;
  margin: 0;
  height: 100vh;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dashboard--focus .dash-topbar,
.dashboard--focus .dash-sidebar,
.dashboard--focus .dash-agent,
.dashboard--focus .dash-agent-fab { display: none !important; }
.dashboard--focus .dash-main { padding: 0; }
.dashboard--focus .dash-view { padding: 16px; }
.dashboard--focus .chk-page > .chk-hero,
.dashboard--focus .chk-page > .chk-main-grid > .chk-left,
.dashboard--focus .chk-page > .chk-main-grid > .chk-right { display: none; }
/* Full View is a focused preview — hide the closing subscribe CTA (and the
   "included in" note) so only the kiosk stage fills the screen; they reappear
   on exit. */
.dashboard--focus .chk-page > .prod-subscribe,
.dashboard--focus .chk-page > .prod-included { display: none; }
.dashboard--focus .chk-page { height: 100vh; }
.dashboard--focus .chk-main-grid {
  grid-template-columns: 1fr;
  height: calc(100vh - 32px);
}
/* In focus mode, give the frame a modest size bump — bigger than normal
   (820px) but not viewport-filling. Portrait stays phone-sized. */
.dashboard--focus .chk-device--landscape .chk-device__frame { max-width: 1100px; }
.dashboard--focus .chk-device--portrait  .chk-device__frame { max-width: 380px; }

/* Right column wrapper — stacks AI prompts + Recent check-ins.
   Cards collapse to PREVIEW_COUNT items by default so the page fits without
   scrolling. Each card grows on demand when its "View more" toggle is clicked. */
.chk-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
}
.chk-right > .chk-card {
  width: 100%;
  flex: 0 0 auto;
  padding: var(--space-4);
}
.chk-right > .chk-card:last-child { flex: 1 0 auto; }
.chk-right > .chk-card .chk-card__head { margin-bottom: var(--space-3); }

/* ── Tablet device frame (landscape 16:10) ── */
.chk-device {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.chk-device__frame {
  position: relative;
  background: linear-gradient(145deg, var(--color-ink-dark) 0%, var(--color-ink-mid) 100%);
  border-radius: 28px;
  /* Asymmetric padding keeps the inner screen at exactly 1280:800 aspect
     (the kiosk's native ratio) — symmetric padding would leave horizontal
     letterboxing since the frame is 1.6 ratio but reduced by equal margins. */
  padding: 10px 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.chk-device--landscape .chk-device__frame {
  width: 100%;
  max-width: 820px;
  aspect-ratio: 1280 / 800;
  display: flex;
  flex-direction: column;
}
.chk-device__notch {
  position: absolute;
  left: 6px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 60px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.chk-device__screen {
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  flex: 1;
  position: relative;
}

/* ── Kiosk preview — rendered at native Figma 1280×800 scale.
   .kiosk-wrap fills the device screen; .kiosk-inner is a fixed 1280×800
   surface scaled via JS (see bindKioskScale in checkin.js). Every metric
   below is 1:1 with the source design.                                  */
.kiosk-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* The kiosk surface — all themable values are CSS variables defined here with
   Christmas (v1) as the default fallback. applyTheme() overrides via inline
   style.setProperty(). Brand themes set image vars to `none` and use solid
   colors / gradients for bg + reward cards.                                  */
.kiosk-inner {
  /* ─ Tokens — pre-theme fallback values ─
     Image URLs are deliberately omitted at this layer: any url() declared
     here would resolve against this stylesheet's location (/styles/),
     while url() declared via inline style in JS resolves against the
     document. Mixing the two creates 404s. The JS layer (applyTheme) always
     provides absolute URLs for image vars, so the only defaults that need
     to make sense here are colors / gradients / fonts — the values brand
     themes inherit when they don't override. */
  --k-bg-color:           #000;
  --k-bg-image:           none;
  --k-text-primary:       #FFDB9C;
  --k-text-highlight:     #FFE0AB;
  --k-text-on-bg:         #FFFFFF;
  --k-text-on-reverse:    #111111;
  --k-bg-primary:         #FFDB9C;
  --k-bg-primary-soft:    rgba(255, 255, 255, 0.07);
  --k-border-primary:     #FFDB9C;
  --k-border-highlight:   #FFFFFF;
  --k-link:               #FFDB9C;
  --k-font-highlight:     'Great Vibes', cursive;
  --k-font-heading:       'Graduate', Georgia, serif;
  --k-font-body:          'Graduate', Georgia, serif;
  --k-font-text:          'Plus Jakarta Sans', sans-serif;
  /* Reward cards: vibrant promo gradients as ultimate fallback. Each theme
     overrides with its own palette-matched gradient (brand) or url (seasonal). */
  --k-reward-top-bg:      transparent;
  --k-reward-top-image:   linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
  --k-reward-bot-bg:      transparent;
  --k-reward-bot-image:   linear-gradient(135deg, #FB923C 0%, #EF4444 100%);
  --k-key-glow-image:     none;
  --k-key-glow-alt-image: none;
  --k-key-shadow:         drop-shadow(0 0 8px #111);

  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 800px;
  transform-origin: top left;
  will-change: transform;
  background-color: var(--k-bg-color);
  background-image: var(--k-bg-image);
  background-size: cover;
  background-position: center;
}

/* ── Multi-screen router ──
   The screens frame is the viewport; each .kiosk-screen is absolutely
   positioned inside. CSS states drive slide transitions (see goToScreen in
   checkin.js). Adding a new screen = new .kiosk-screen--xxx layout block.   */
.kiosk-screens-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.kiosk-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  transform: translateX(100%);  /* default: off-screen right */
}
.kiosk-screen.is-active { transform: translateX(0); }
.kiosk-screen.is-prev   { transform: translateX(-100%); }
.kiosk-screen.is-next   { transform: translateX(100%); }

.kiosk-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Top padding clears the persistent .kiosk-device-bar (statusbar ~16px +
     its own 16px padding = ~32px); add a touch more so the screen content
     doesn't kiss the bar. Non-phone screens use absolute positioning and
     are unaffected. */
  padding: 40px 24px 0;
  height: 100%;
  box-sizing: border-box;
}

/* Device-level status bar — pinned to the top of .kiosk-inner so it stays
   put across screen transitions (treated like the OS chrome, not part of
   any single screen's content). */
.kiosk-device-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 16px 24px 0;
  z-index: 5;
  pointer-events: none;
  color: var(--k-text-primary);
}

/* TOP */
.kiosk-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kiosk-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.kiosk-statusbar-left {
  display: flex;
  gap: 8px;
  font-family: var(--k-font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: var(--k-text-primary);
}
.kiosk-statusbar-right {
  display: inline-flex;
  align-items: center;
  height: 12px;
  width: 67px;
  color: var(--k-text-primary);
}
.kiosk-statusbar-right svg { width: 100%; height: 100%; }

.kiosk-header-block { display: flex; flex-direction: column; }
.kiosk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -40px;
}
.kiosk-logo-wrap { width: 220px; display: flex; align-items: center; }
.kiosk-logo-img  { height: 32px; width: auto; display: block; }
.kiosk-logo-text {
  font-family: var(--k-font-heading);
  font-size: 22px;
  line-height: 32px;
  color: var(--k-text-primary);
  letter-spacing: .02em;
}
.kiosk-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  color: var(--k-text-primary);
  white-space: nowrap;
}
.kiosk-heading-script {
  font-family: var(--k-font-highlight);
  font-size: var(--k-heading-script-size, 64px);
  line-height: var(--k-heading-script-line, 64px);
  font-weight: 400;
  text-transform: var(--k-heading-script-case, none);
  letter-spacing: var(--k-heading-script-spacing, normal);
}
.kiosk-heading-main {
  font-family: var(--k-font-heading);
  font-size: var(--k-heading-main-size, 44px);
  line-height: var(--k-heading-main-line, 52px);
  text-transform: uppercase;
}

/* MAIN */
.kiosk-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-right: 90px;
  width: 100%;
}
.kiosk-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding-left: 16px;
}

.kiosk-rewards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
}
.kiosk-rewards-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.kiosk-arrow {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--k-text-primary);
}
.kiosk-arrow svg { width: 100%; height: 100%; }

.kiosk-reward {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.kiosk-reward--top {
  width: 360px;
  height: 201px;
  background-color: var(--k-reward-top-bg);
  background-image: var(--k-reward-top-image);
}
.kiosk-reward--bot {
  width: 312px;
  height: 177px;
  background-color: var(--k-reward-bot-bg);
  background-image: var(--k-reward-bot-image);
}
.kiosk-reward-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.kiosk-reward-points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--k-text-highlight);
  font-family: var(--k-font-heading);
  width: 92px;
}
.kiosk-reward-num   { font-size: 48px; line-height: 56px; width: 100%; }
.kiosk-reward-label { font-size: 20px; line-height: 28px; width: 100%; }
.kiosk-reward-desc {
  font-family: var(--k-font-body);
  font-size: 24px;
  line-height: 20px;
  color: var(--k-text-on-bg);
  width: 360px;
}

.kiosk-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 652px;
}
.kiosk-consent { display: flex; gap: 24px; align-items: flex-start; }
.kiosk-consent-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--k-text-on-bg);
}
.kiosk-consent-icon svg { width: 100%; height: 100%; }
.kiosk-consent-text {
  margin: 0;
  font-family: var(--k-font-text);
  font-size: 14px;
  line-height: 20px;
  color: var(--k-text-on-bg);
  width: 604px;
}
.kiosk-consent-link { color: var(--k-link); }
.kiosk-version {
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: var(--k-font-text);
  font-size: 14px;
  color: var(--k-text-on-bg);
}
.kiosk-version-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  padding: 2px;
  color: var(--k-text-on-bg);
  transform: rotate(180deg);
}
.kiosk-version-icon svg { width: 100%; height: 100%; }

/* RIGHT */
.kiosk-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.kiosk-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: var(--k-input-padding, 0 24px);
  background: var(--k-input-bg, var(--k-bg-primary));
  border: var(--k-input-border-width, 1px) solid var(--k-input-border, var(--k-border-highlight));
  border-radius: 12px;
  font-family: var(--k-font-body);
  font-size: 36px;
  line-height: 36px;
  color: var(--k-input-color, var(--k-text-on-reverse));
  text-align: center;
  transition: background-color .2s, border-color .2s, color .2s, padding .2s;
}
/* Empty state — hide the box entirely until the user types a digit.
   We still reserve the 72px height so the keypad below doesn't jump up. */
.kiosk-input:empty {
  background: transparent;
  border-color: transparent;
  padding: 0;
}
.kiosk-input.is-error {
  border-color: var(--color-error);
  color: var(--color-error);
  animation: kiosk-shake .35s ease;
}
@keyframes kiosk-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.kiosk-keypad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 112px);
  grid-template-rows: repeat(4, 112px);
  gap: 16px;
  width: 368px;
  height: 496px;
}
.kiosk-key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 1.5px solid var(--k-border-primary);
  border-radius: 60px;
  background-color: var(--k-bg-primary-soft);
  font-family: var(--k-font-heading);
  font-size: 48px;
  line-height: 56px;
  color: var(--k-key-color, var(--k-text-primary));
  cursor: pointer;
  overflow: hidden;
}
/* Pseudo provides the optional decorative glow (Christmas key-ellipse art).
   Brand themes set --k-key-glow-image: none and the layer becomes invisible. */
.kiosk-key::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--k-key-glow-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .9;
  pointer-events: none;
}
.kiosk-key--alt::before { background-image: var(--k-key-glow-alt-image, none); }
.kiosk-key > span {
  position: relative;
  z-index: 1;
  padding-top: 4px;
}
.kiosk-key--next {
  background-color: var(--k-bg-primary);
  background-image: var(--k-next-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--k-text-on-reverse);
  border-color: var(--k-border-primary);
  filter: var(--k-key-shadow);
  font-family: var(--k-font-body);
  font-size: 28px;
  line-height: 36px;
}
.kiosk-key--next::before { display: none; }
.kiosk-key--next > span { padding-top: 4px; }
.kiosk-key--next.is-disabled { opacity: .45; }

/* ── SCREEN 2: Enter Name ──
   Layout from Figma Christmas Test-Theme-2 (node 2:12946). Back button is
   absolutely positioned top-left; the form (heading + line input + NEXT
   button) is anchored to the geometric center of the screen.               */
/* Nav buttons — circular outline buttons positioned at a top corner of the
   screen. .kiosk-back lives top-left (Enter Name / Birthday / Email), .kiosk-close
   lives top-right (Success). Identical shape + theme-aware colors; only the
   corner anchor and the inner icon size differ. */
.kiosk-back,
.kiosk-close {
  position: absolute;
  top: 40px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--k-nav-bg, transparent);
  border: 1px solid var(--k-nav-border, var(--k-border-primary));
  border-radius: 24px;
  color: var(--k-text-primary);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: opacity .15s;
}
.kiosk-back  { top: 60px; left: 40px; }
.kiosk-close { right: 40px; }
.kiosk-back:hover,
.kiosk-close:hover { opacity: .85; }

.kiosk-back-icon,
.kiosk-close-icon {
  display: inline-flex;
  color: inherit;
}
.kiosk-back-icon svg,
.kiosk-close-icon svg { width: 100%; height: 100%; }
.kiosk-back-icon  { width: 20px; height: 14px; transform: rotate(180deg); }  /* skip-arrow flipped to point left */
.kiosk-close-icon { width: 20px; height: 20px; }

.kiosk-name-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  /* .kiosk-content has z-index:1 and covers the full screen — without an
     explicit z-index here, the form (and its input) sits beneath it in the
     stacking order, so user clicks on the input fall through to the content
     layer instead of reaching the input. */
  z-index: 2;
}
.kiosk-name-group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}
.kiosk-name-heading {
  font-family: var(--k-font-heading);
  font-size: 44px;
  line-height: 52px;
  text-transform: uppercase;
  text-align: center;
  color: var(--k-text-primary);
  width: 100%;
}
.kiosk-name-input-wrap {
  border-bottom: 1px solid var(--k-line-border, var(--k-border-primary));
  padding: 0 10px 12px;
  width: 100%;
}
.kiosk-name-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--k-font-heading);
  font-size: 64px;
  line-height: 72px;
  color: var(--k-text-primary);
  text-align: center;
  text-transform: uppercase;
  padding: 0;
  caret-color: var(--k-text-primary);
}
.kiosk-name-input::placeholder {
  color: var(--k-text-primary);
  opacity: .35;
  text-transform: none;
}
.kiosk-name-input.is-error,
.kiosk-name-input.is-error::placeholder {
  color: var(--color-error);
  animation: kiosk-shake .35s ease;
}

.kiosk-name-next {
  width: 560px;
  height: 112px;
  background-color: var(--k-bg-primary);
  background-image: var(--k-name-next-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 8px;
  font-family: var(--k-font-body);
  font-size: 40px;
  line-height: 48px;
  color: var(--k-text-on-reverse);
  cursor: pointer;
  padding-top: 4px;
  filter: var(--k-key-shadow);
  transition: opacity .15s;
}
.kiosk-name-next.is-disabled { opacity: .45; cursor: not-allowed; }
.kiosk-name-next:not(.is-disabled):hover { filter: var(--k-key-shadow) brightness(1.05); }

/* ── Virtual iPad keyboard ──
   Mimics iPadOS native keyboard for desktop preview. Slides up from the
   bottom of the kiosk screen when Enter Name becomes active. The keyboard
   is *cosmetic-fidelity* — it doesn't respect theme color tokens because
   iPad's keyboard chrome is identical across all apps. */
.kiosk-keyboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300px;
  background: linear-gradient(180deg, #D7DAE0 0%, #C5C8CE 100%);
  padding: 8px 6px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(100%);
  /* Slight delay so the screen slide finishes first, then the keyboard
     rises up — same staggered feel as iPadOS. Delay applies on entrance
     only; when the user dismisses with Enter we want an immediate drop. */
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  z-index: 10;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  user-select: none;
}
.kiosk-keyboard.is-open {
  transform: translateY(0);
  transition-delay: .15s;
}
.kiosk-kbd-row {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex: 1;
  min-height: 0;
}
/* Row 2 has 9 keys (A-L) — center them, same widths as row 1 */
.kiosk-kbd-row--2 { padding: 0 60px; }
.kiosk-kbd-key {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 26px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  padding: 0;
  transition: background-color .05s, transform .05s;
}
.kiosk-kbd-key:hover { background: #F2F4F7; }
.kiosk-kbd-key:active {
  background: #C8CCD2;
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.kiosk-kbd-key--wide   { flex: 1.6; }
.kiosk-kbd-key--space  { flex: 5; }
.kiosk-kbd-key--mod    { background: #ABB0B8; color: #000; font-size: 20px; }
.kiosk-kbd-key--mod:hover { background: #B6BAC1; }
.kiosk-kbd-key--return {
  background: var(--k-bg-primary, #007AFF);
  color: var(--k-text-on-reverse, #fff);
  font-size: 22px;
  font-weight: 500;
}
.kiosk-kbd-key--return:hover { filter: brightness(1.08); background: var(--k-bg-primary, #007AFF); }
.kiosk-kbd-key-icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: currentColor;
}
.kiosk-kbd-key-icon svg { width: 100%; height: 100%; }

/* Push the form up a bit so the keyboard doesn't overlap the NEXT button */
.kiosk-screen--name .kiosk-name-form {
  top: calc(50% - 130px);
}

/* ── Birthday screen ── */
.kiosk-bd-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1040px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  z-index: 2;
}
.kiosk-bd-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: var(--k-text-primary);
}
.kiosk-bd-heading-script {
  font-family: var(--k-font-heading);
  font-size: 36px;
  line-height: 44px;
  opacity: .85;
}
.kiosk-bd-heading-main {
  font-family: var(--k-font-heading);
  font-size: 44px;
  line-height: 52px;
}

.kiosk-bd-pickers {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
}
.kiosk-bd-col {
  width: 240px;
  display: flex;
  flex-direction: column;
  user-select: none;
  cursor: grab;
  touch-action: none;
  /* Hint the browser this layer transforms a lot — avoids jank on drag */
  will-change: transform;
}
.kiosk-bd-col:active { cursor: grabbing; }
.kiosk-bd-item {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--k-font-heading);
  font-size: 44px;
  color: var(--k-text-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.kiosk-bd-item[data-off="-2"],
.kiosk-bd-item[data-off="2"]  { opacity: .25; }
.kiosk-bd-item[data-off="-1"],
.kiosk-bd-item[data-off="1"]  { opacity: .55; }
.kiosk-bd-item.is-selected {
  background-color: var(--k-bd-active-bg, var(--k-bg-primary));
  background-image: none;
  color: var(--k-text-on-reverse);
  opacity: 1;
}

.kiosk-bd-actions {
  display: flex;
  gap: 32px;
  margin-top: 12px;
}
.kiosk-bd-btn {
  width: 360px;
  height: 104px;
  font-family: var(--k-font-body);
  font-size: 32px;
  line-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: filter .15s, background-color .15s;
}
.kiosk-bd-skip {
  background-color: var(--k-nav-bg, transparent);
  background-image: var(--k-skip-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--k-text-primary);
  border: 1px solid var(--k-border-primary);
}
.kiosk-bd-skip:hover { background: rgba(255, 255, 255, 0.06); }
.kiosk-bd-next {
  background-color: var(--k-bg-primary);
  background-image: var(--k-bd-next-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--k-text-on-reverse);
  border: none;
  filter: var(--k-key-shadow);
}
.kiosk-bd-next:hover { filter: var(--k-key-shadow) brightness(1.05); }
.kiosk-bd-next.is-disabled { opacity: .45; cursor: not-allowed; }
.kiosk-bd-next.is-disabled:hover { filter: var(--k-key-shadow); }

/* ── Email screen ──
   Reuses the .kiosk-bd-btn buttons (same SKIP / NEXT shape as birthday).
   Form is pushed up so the virtual keyboard (300px tall) doesn't overlap. */
.kiosk-email-form {
  position: absolute;
  top: calc(50% - 130px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  z-index: 2;
}
.kiosk-email-heading {
  font-family: var(--k-font-heading);
  font-size: 44px;
  line-height: 52px;
  text-align: center;
  color: var(--k-text-primary);
}
.kiosk-email-input-wrap {
  border-bottom: 1px solid var(--k-line-border, var(--k-border-primary));
  padding: 0 10px 12px;
  width: 720px;
}
.kiosk-email-input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--k-font-heading);
  font-size: 48px;
  line-height: 56px;
  color: var(--k-text-primary);
  text-align: center;
  padding: 0;
  caret-color: var(--k-text-primary);
}
.kiosk-email-input::placeholder {
  color: var(--k-text-primary);
  opacity: .35;
}
.kiosk-email-input.is-error,
.kiosk-email-input.is-error::placeholder {
  color: var(--color-error);
  animation: kiosk-shake .35s ease;
}

.kiosk-email-domains {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: nowrap;
}
.kiosk-email-domain {
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding: 0 12px;
  background-color: var(--k-bg-primary);
  background-image: none;
  color: var(--k-text-on-reverse);
  border: none;
  border-radius: 8px;
  font-family: var(--k-font-body);
  font-size: 22px;
  line-height: 28px;
  cursor: pointer;
  filter: var(--k-key-shadow);
  transition: filter .15s, transform .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kiosk-email-domain:hover  { filter: var(--k-key-shadow) brightness(1.05); }
.kiosk-email-domain:active { transform: translateY(1px); }

.kiosk-email-actions {
  display: flex;
  gap: 32px;
  margin-top: 4px;
}

/* ── Success screen ──
   Theme-driven via --k-success-* tokens. Seasonal swaps in image artwork
   for the divider, coupon background, and gift icon; brand themes use a
   solid color + the shared confetti gift SVG.
   Close button (.kiosk-close) shares its rule with .kiosk-back — see the
   "Nav buttons" block earlier in this file. */
.kiosk-success-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1040px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  z-index: 2;
}
.kiosk-success-check {
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kiosk-success-check svg { width: 100%; height: 100%; }
.kiosk-success-heading {
  font-family: var(--k-font-heading);
  font-size: 44px;
  line-height: 52px;
  text-align: center;
  color: var(--k-text-primary);
  margin: 0;
}
.kiosk-success-divider {
  width: 680px;
  height: var(--k-success-divider-height, 1px);
  background-color: var(--k-success-divider-color);
  background-image: var(--k-success-divider-image, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.kiosk-success-points {
  font-family: var(--k-font-heading);
  font-size: 36px;
  line-height: 44px;
  color: var(--k-success-points-color, var(--k-text-primary));
  text-align: center;
}
.kiosk-success-coupon {
  position: relative;
  width: 680px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 36px 48px;
  background-color: var(--k-success-coupon-bg);
  background-image: var(--k-success-coupon-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--k-success-coupon-radius, 16px);
  box-sizing: border-box;
}
.kiosk-success-coupon-icon {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  background-image: var(--k-success-gift-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.kiosk-success-coupon-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.kiosk-success-coupon-amount {
  font-family: var(--k-font-heading);
  font-size: 56px;
  line-height: 64px;
  color: var(--k-success-coupon-amount-color, var(--k-bg-primary));
  font-weight: 800;
}
.kiosk-success-coupon-redeem {
  font-family: var(--k-font-body);
  font-size: 24px;
  line-height: 32px;
  color: var(--k-success-coupon-redeem-color, var(--k-text-on-bg, var(--k-text-primary)));
  opacity: .85;
}

/* Interactive affordances — pointer cursor on clickable kiosk elements */
.kiosk-arrow,
.kiosk-consent-icon { cursor: pointer; user-select: none; }
.kiosk-arrow:hover,
.kiosk-consent-icon:hover { opacity: .8; }
.kiosk-consent-icon.is-unchecked svg polyline { display: none; }

/* Reward carousel — physical card slide. The whole .kiosk-reward (including
   its gradient bg) translates up/down. Mid-animation each card sits fully
   outside the visible clip — JS swaps content + gradient there so the new
   reward appears to "push in" from the opposite edge. The .kiosk-rewards-clip
   wrapper has overflow:hidden so sliding cards don't bleed into the arrows. */
.kiosk-rewards-clip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow: hidden;
}
/* Translate distance is larger than the tallest card (201px) so the card is
   fully off-screen at midpoint. The 0.01% step from keyframe 49.99→50 is a
   sub-frame instant "teleport" — invisible because the card is clipped by
   .kiosk-rewards-clip overflow on both ends. Material's standard curve
   (cubic-bezier(.4 0 .2 1)) gives a calmer acceleration/deceleration. */
@keyframes kiosk-card-up {
  0%      { transform: translateY(0); }
  49.99%  { transform: translateY(-320px); }
  50%     { transform: translateY(320px); }
  100%    { transform: translateY(0); }
}
@keyframes kiosk-card-down {
  0%      { transform: translateY(0); }
  49.99%  { transform: translateY(320px); }
  50%     { transform: translateY(-320px); }
  100%    { transform: translateY(0); }
}
.kiosk-reward.is-slide-up   { animation: kiosk-card-up   .6s cubic-bezier(.4, 0, .2, 1); }
.kiosk-reward.is-slide-down { animation: kiosk-card-down .6s cubic-bezier(.4, 0, .2, 1); }

/* ──────────────────────────────────────────────────────────────────────────
   PORTRAIT MODE — Mobile phone preview
   ──────────────────────────────────────────────────────────────────────────
   Activated when bindKioskScale detects .chk-device--portrait and adds
   .is-portrait to .kiosk-inner, switching the canvas from 1280×800 (tablet)
   to 480×1040 (phone, ~9:19.5).

   The landscape layout has rewards/keypad side-by-side; for portrait we
   stack everything vertically and shrink type/spacing to match a phone form
   factor. Each screen is overridden below — JS + screen DOM are untouched.
   ────────────────────────────────────────────────────────────────────────── */

/* Portrait: tighter side padding; top clears device-bar + Dynamic Island
   (island bottom ~40px) — start content ~48px in. Bottom padding reserves
   space for the absolutely-positioned footer so .kiosk-main doesn't extend
   underneath it. */
.kiosk-inner.is-portrait .kiosk-content { padding: 48px 16px 120px; gap: 14px; }

/* Device-bar in portrait: time stays at left edge, battery/wifi at right edge
   — the centered Dynamic Island lives on the device frame (above this layer)
   and visually fills the gap between them, just like iOS. */
.kiosk-inner.is-portrait .kiosk-device-bar {
  padding: 16px 26px 0;
}
.kiosk-inner.is-portrait .kiosk-statusbar-left {
  font-size: 13px;
  line-height: 16px;
  gap: 4px;
}
.kiosk-inner.is-portrait .kiosk-statusbar-right {
  height: 14px;
  width: 78px;
}

/* Top — statusbar + compact header + smaller heading */
.kiosk-inner.is-portrait .kiosk-statusbar-left { font-size: 12px; line-height: 14px; }
.kiosk-inner.is-portrait .kiosk-statusbar-right { height: 11px; width: 60px; }
.kiosk-inner.is-portrait .kiosk-header {
  margin-bottom: 0;
}
.kiosk-inner.is-portrait .kiosk-logo-wrap { width: auto; }
.kiosk-inner.is-portrait .kiosk-logo-img  { height: 22px; }
.kiosk-inner.is-portrait .kiosk-logo-text { font-size: 16px; line-height: 22px; }
.kiosk-inner.is-portrait .kiosk-heading { white-space: normal; gap: 4px; }
.kiosk-inner.is-portrait .kiosk-heading-script { font-size: 36px; line-height: 38px; }
.kiosk-inner.is-portrait .kiosk-heading-main   { font-size: 22px; line-height: 28px; }

/* ── Phone screen — stack everything vertically, generous spacing.
   .kiosk-main flex-grows to fill the column; rewards (.kiosk-left) gets
   margin-block:auto so the slider sits visually centered between the keypad
   above and the footer text below. */
.kiosk-inner.is-portrait .kiosk-main {
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding-right: 0;
  gap: 22px;
}
.kiosk-inner.is-portrait .kiosk-left {
  padding-left: 0;
  width: 100%;
  align-items: center;
  gap: 14px;
  order: 2;
  margin-block: auto;
}
.kiosk-inner.is-portrait .kiosk-right {
  width: 100%;
  gap: 18px;
  order: 1;
}

/* Rewards — horizontal slider (both cards in a row, scroll-snap, no arrows).
   Cards share the same size in portrait so the slider reads as a uniform
   carousel rather than the landscape "big card / small card" stack. */
.kiosk-inner.is-portrait .kiosk-rewards { width: 100%; }
.kiosk-inner.is-portrait .kiosk-rewards-stack {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
}
.kiosk-inner.is-portrait .kiosk-arrow { display: none; }
/* Portrait view: drop the kiosk footer (consent text + opt-in block).
   On phones the screen is already tight; the consent paragraph crowds
   the primary actions and clutters the demo. The desktop kiosk keeps
   it intact for the real-world tablet kiosk experience. */
.kiosk-inner.is-portrait .kiosk-footer { display: none; }
.kiosk-inner.is-portrait .kiosk-rewards-clip {
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: 4px 8px;
  width: 100%;
  scrollbar-width: none;
}
.kiosk-inner.is-portrait .kiosk-rewards-clip::-webkit-scrollbar { display: none; }
.kiosk-inner.is-portrait .kiosk-reward {
  flex-shrink: 0;
  scroll-snap-align: center;
}
.kiosk-inner.is-portrait .kiosk-reward--top,
.kiosk-inner.is-portrait .kiosk-reward--bot {
  width: 220px;
  height: 130px;
}
.kiosk-inner.is-portrait .kiosk-reward--bot { display: flex; }
/* Vertical slide animations look broken in a horizontal row — drop them. */
.kiosk-inner.is-portrait .kiosk-reward.is-slide-up,
.kiosk-inner.is-portrait .kiosk-reward.is-slide-down { animation: none; }

.kiosk-inner.is-portrait .kiosk-reward-points {
  width: auto;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.kiosk-inner.is-portrait .kiosk-reward-num   { font-size: 36px; line-height: 40px; width: auto; }
.kiosk-inner.is-portrait .kiosk-reward-label { font-size: 16px; line-height: 22px; width: auto; }
.kiosk-inner.is-portrait .kiosk-reward-desc  { font-size: 15px; line-height: 20px; width: auto; }

/* Footer (consent + version) — pinned to the phone's bottom edge, escaping
   the .kiosk-left flex stack via absolute positioning. .kiosk-screen is the
   positioned ancestor (position: absolute). */
.kiosk-inner.is-portrait .kiosk-footer {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  padding: 0 18px;
  width: auto;
  gap: 10px;
  z-index: 3;
}
.kiosk-inner.is-portrait .kiosk-consent { gap: 12px; align-items: flex-start; }
.kiosk-inner.is-portrait .kiosk-consent-icon { width: 18px; height: 18px; }
.kiosk-inner.is-portrait .kiosk-consent-text {
  font-size: 12px;
  line-height: 16px;
  width: 100%;
}
.kiosk-inner.is-portrait .kiosk-version { font-size: 11px; gap: 10px; }
.kiosk-inner.is-portrait .kiosk-version-icon { width: 16px; height: 16px; }

/* Phone-number input + keypad — bigger, more proportional to phone width */
.kiosk-inner.is-portrait .kiosk-input {
  height: 60px;
  font-size: 30px;
  line-height: 30px;
  border-radius: 10px;
}
.kiosk-inner.is-portrait .kiosk-keypad {
  grid-template-columns: repeat(3, 96px);
  grid-template-rows: repeat(4, 96px);
  gap: 14px;
  width: 320px;
  height: 412px;
}
.kiosk-inner.is-portrait .kiosk-key {
  width: 96px;
  height: 96px;
  font-size: 36px;
  line-height: 40px;
  border-radius: 48px;
  border-width: 1.2px;
}

/* ── Name screen ── */
.kiosk-inner.is-portrait .kiosk-name-form {
  width: 380px;
  gap: 32px;
  top: 45%;
}
.kiosk-inner.is-portrait .kiosk-screen--name .kiosk-name-form { top: 38%; }
.kiosk-inner.is-portrait .kiosk-name-group { gap: 22px; }
.kiosk-inner.is-portrait .kiosk-name-heading {
  font-size: 22px;
  line-height: 28px;
}
.kiosk-inner.is-portrait .kiosk-name-input {
  font-size: 30px;
  line-height: 38px;
}
.kiosk-inner.is-portrait .kiosk-name-input-wrap { padding: 0 6px 8px; }
.kiosk-inner.is-portrait .kiosk-name-next {
  width: 280px;
  height: 64px;
  font-size: 22px;
  line-height: 28px;
  border-radius: 6px;
}

/* ── Birthday screen ── */
.kiosk-inner.is-portrait .kiosk-bd-form {
  width: 420px;
  gap: 20px;
}
.kiosk-inner.is-portrait .kiosk-bd-pickers { gap: 28px; }
.kiosk-inner.is-portrait .kiosk-bd-col { width: 130px; }
.kiosk-inner.is-portrait .kiosk-bd-item {
  height: 48px;
  font-size: 24px;
  border-radius: 6px;
}
.kiosk-inner.is-portrait .kiosk-bd-actions { gap: 14px; margin-top: 8px; }
.kiosk-inner.is-portrait .kiosk-bd-btn {
  width: 160px;
  height: 60px;
  font-size: 18px;
  line-height: 24px;
  border-radius: 6px;
}

/* ── Email screen ── */
.kiosk-inner.is-portrait .kiosk-email-form {
  width: 420px;
  gap: 18px;
  top: 38%;
}
.kiosk-inner.is-portrait .kiosk-email-heading {
  font-size: 22px;
  line-height: 28px;
}
.kiosk-inner.is-portrait .kiosk-email-input-wrap { width: 360px; padding: 0 6px 8px; }
.kiosk-inner.is-portrait .kiosk-email-input {
  font-size: 24px;
  line-height: 30px;
}
.kiosk-inner.is-portrait .kiosk-email-domains {
  gap: 8px;
  flex-wrap: wrap;
}
.kiosk-inner.is-portrait .kiosk-email-domain {
  flex: 0 1 auto;
  height: 42px;
  font-size: 15px;
  line-height: 18px;
  padding: 0 14px;
  border-radius: 6px;
}
.kiosk-inner.is-portrait .kiosk-email-actions { gap: 14px; }

/* ── Success screen ── */
.kiosk-inner.is-portrait .kiosk-success-body {
  width: 420px;
  gap: 18px;
}
.kiosk-inner.is-portrait .kiosk-success-check { width: 60px; height: 60px; }
.kiosk-inner.is-portrait .kiosk-success-heading {
  font-size: 22px;
  line-height: 28px;
}
.kiosk-inner.is-portrait .kiosk-success-divider { width: 360px; }
.kiosk-inner.is-portrait .kiosk-success-points {
  font-size: 18px;
  line-height: 24px;
}
.kiosk-inner.is-portrait .kiosk-success-coupon {
  width: 360px;
  min-height: 120px;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 12px;
}
.kiosk-inner.is-portrait .kiosk-success-coupon-icon { width: 70px; height: 70px; }
.kiosk-inner.is-portrait .kiosk-success-coupon-amount {
  font-size: 28px;
  line-height: 32px;
}
.kiosk-inner.is-portrait .kiosk-success-coupon-redeem {
  font-size: 13px;
  line-height: 18px;
}

/* ── Virtual keyboard — shorter + smaller keys ── */
.kiosk-inner.is-portrait .kiosk-keyboard {
  height: 220px;
  padding: 6px 4px 10px;
  gap: 5px;
}
.kiosk-inner.is-portrait .kiosk-kbd-row { gap: 4px; }
.kiosk-inner.is-portrait .kiosk-kbd-row--2 { padding: 0 22px; }
.kiosk-inner.is-portrait .kiosk-kbd-key {
  font-size: 14px;
  border-radius: 4px;
}
.kiosk-inner.is-portrait .kiosk-kbd-key--mod    { font-size: 11px; }
.kiosk-inner.is-portrait .kiosk-kbd-key--return { font-size: 12px; }
.kiosk-inner.is-portrait .kiosk-kbd-key-icon { width: 14px; height: 14px; }

/* Back/close nav buttons — re-size + tighten corner offsets for the smaller
   portrait canvas. Original is 48×48 at top:60px / left|right:40px. */
.kiosk-inner.is-portrait .kiosk-back,
.kiosk-inner.is-portrait .kiosk-close {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  top: 40px;
}
.kiosk-inner.is-portrait .kiosk-back  { left: 16px; }
.kiosk-inner.is-portrait .kiosk-close { right: 16px; }
.kiosk-inner.is-portrait .kiosk-back-icon  { width: 14px; height: 10px; }
.kiosk-inner.is-portrait .kiosk-close-icon { width: 14px; height: 14px; }

/* ── Customize panel (left column) ── */
.chk-cust__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.chk-cust__reset:hover {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-ink-soft);
}

.chk-cust__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.chk-cust__tab {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chk-cust__tab.is-active {
  background: var(--color-canvas);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.chk-cust__hint {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
  line-height: 1.45;
}

/* Theme grid */
.chk-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  overflow-y: auto;
  /* flex: 1; */
  min-height: 0;
  padding-right: 4px;
}
.chk-theme-grid::-webkit-scrollbar { width: 4px; }

.chk-theme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 8px;
  background: var(--color-canvas);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .1s;
  height: fit-content;
}
.chk-theme:hover  { border-color: var(--color-subtle); }
.chk-theme:active { transform: scale(.98); }
.chk-theme.is-active { border-color: var(--color-brand); }

/* Brand: 3-swatch strip + name + font-family preview */
.chk-theme__swatch {
  display: flex;
  gap: 3px;
  height: 38px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.chk-theme__sw         { flex: 1; }
.chk-theme__sw--bg     { flex: 2; }
.chk-theme__meta       { display: flex; flex-direction: column; gap: 2px; }
.chk-theme__font       { font-size: 13px; color: var(--color-muted); line-height: 1.1; }

/* Seasonal: image preview */
.chk-theme__preview {
  height: 58px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}

.chk-theme__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: 1.2;
}
.chk-theme__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  background: var(--color-brand);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.chk-theme.is-active .chk-theme__check { display: flex; }

/* Responsive */
@media (max-width: 1200px) {
  .chk-main-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
  }
  .chk-stage { order: -1; }
}
@media (max-width: 720px) {
  .chk-kpis { grid-template-columns: repeat(2, 1fr); }
  .chk-card { padding: var(--space-4); }
}

/* ════════════════════════════════════════════
   AI VIEW
════════════════════════════════════════════ */
/* AI Agent view — modern */
.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}
.ai-header__title { font-size: 28px; font-weight: var(--font-weight-extrabold); letter-spacing: -.5px; margin-bottom: 4px; }
.ai-header__sub   { font-size: var(--font-size-md); color: var(--color-muted); }
.ai-header__sub strong { color: var(--color-ink); font-weight: var(--font-weight-bold); }

.ai-header__upside {
  background: var(--color-ink);
  color: #fff;
  border-radius: 14px;
  padding: 14px 22px;
  text-align: right;
  flex-shrink: 0;
}
.ai-header__upside-label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  color: rgba(255,255,255,.55);
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.ai-header__upside-value { font-size: 28px; font-weight: var(--font-weight-black); letter-spacing: -1px; line-height: 1; }
.ai-header__upside-value span { font-size: 14px; font-weight: var(--font-weight-medium); color: rgba(255,255,255,.55); margin-left: 4px; }

/* Stats row */
.ai-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.ai-stat {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 20px 22px;
}
.ai-stat__label {
  display: block;
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-muted);
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.ai-stat__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.ai-stat__value {
  font-size: 36px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ai-stat__value--brand { color: var(--color-brand); }
.ai-stat__unit { font-size: 16px; font-weight: var(--font-weight-medium); color: var(--color-muted); letter-spacing: 0; }
.ai-stat__sub  { font-size: 12px; color: var(--color-muted); }
.ai-stat__meta { font-size: 11px; color: var(--color-subtle); margin-top: 4px; }

.ai-stat__bar {
  background: var(--color-surface);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.ai-stat__bar-fill {
  height: 100%;
  background: var(--color-brand);
  border-radius: 999px;
  transition: width .6s ease;
}

/* Actions header */
.ai-actions-head { margin-bottom: 14px; }
.ai-actions-head__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); letter-spacing: -.5px; }
.ai-actions-head__sub   { font-size: var(--font-size-base); color: var(--color-muted); margin-top: 2px; }

/* Action cards */
.ai-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ai-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.ai-card:hover { border-color: var(--color-ink-soft); box-shadow: var(--shadow-card); }

/* Priority-colored accent stripe on left */
.ai-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.ai-card--high::before   { background: var(--color-error); }
.ai-card--medium::before { background: var(--color-warning); }
.ai-card--low::before    { background: var(--color-subtle); }

.ai-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ai-card__priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: .1em;
}
.ai-card__priority-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ai-card--high   .ai-card__priority       { color: var(--color-error); }
.ai-card--high   .ai-card__priority-dot   { background: var(--color-error); }
.ai-card--medium .ai-card__priority       { color: var(--color-warning); }
.ai-card--medium .ai-card__priority-dot   { background: var(--color-warning); }
.ai-card--low    .ai-card__priority       { color: var(--color-muted); }
.ai-card--low    .ai-card__priority-dot   { background: var(--color-subtle); }

.ai-card__impact {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  color: var(--color-success);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}

.ai-card__body {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  flex: 1;
}
.ai-card__icon {
  width: 44px; height: 44px;
  background: var(--color-surface);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ai-card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); margin-bottom: 4px; }
.ai-card__desc  { font-size: var(--font-size-base); color: var(--color-muted); line-height: 1.6; }

.ai-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
}
.ai-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--color-ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity .15s;
}
.ai-card__cta:hover { opacity: .85; }
.ai-card__cta span { font-size: 15px; }
.ai-card__meta { font-size: 12px; color: var(--color-muted); }

/* Responsive */
@media (max-width: 1024px) {
  .ai-stats   { grid-template-columns: 1fr; }
  .ai-actions { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ai-header { flex-direction: column; align-items: flex-start; }
  .ai-header__upside { align-self: stretch; text-align: left; }
  .ai-card__footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ════════════════════════════════════════════
   LOCKED VIEW
════════════════════════════════════════════ */
.locked-view         { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.locked-view__inner  { max-width: 440px; text-align: center; padding: 0 24px; }
.locked-icon         { font-size: 52px; margin-bottom: 16px; }
.locked-title        { font-size: 24px; font-weight: var(--font-weight-extrabold); margin-bottom: 8px; }
.locked-desc         { color: var(--color-muted); font-size: var(--font-size-md); line-height: 1.7; margin-bottom: 24px; }
.locked-features     { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 14px; padding: 18px 20px; margin-bottom: 28px; text-align: left; }
.locked-features__plan { margin-bottom: 10px; }
.locked-features__list { display: flex; flex-direction: column; gap: 7px; list-style: none; padding: 0; }
.locked-features__item { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-base); color: var(--color-ink-soft); }
.locked-features__check { color: var(--color-success); }
.locked-note         { font-size: 12px; color: var(--color-subtle); }

/* ════════════════════════════════════════════
   RESPONSIVE — landing page
════════════════════════════════════════════ */

/* Tablet landscape — tighten layouts */
@media (max-width: 1024px) {
  .ftcta__inner       { padding: 44px 40px; gap: 32px; grid-template-columns: 1fr 360px; }
  .footer-main        { gap: 48px; }
  .modules-grid       { gap: 12px; }
}

/* Tablet portrait & below — major stacking */
@media (max-width: 768px) {
  /* Section padding */
  .section, .section-sm,
  .hiw-section, .modules-section, .pain-section,
  .pc-section, .ftcta { padding: var(--space-12) 20px; }
  .testimonials-section { padding: var(--space-12) 0; }
  .testimonials-section .section__header { padding: 0 20px; }

  /* Nav */
  .landing-nav__links { display: none; }

  /* Hero */
  .hero               { padding: 100px 20px 40px; }
  .hero-form__row     { grid-template-columns: 1fr; gap: 10px; }
  .hero-form__row .input { margin-bottom: 0; }
  .upload-zone__hint  { display: none; }
  .upload-zone__text strong { font-size: 13px; }
  .upload-zone__text span   { font-size: 11px; }

  /* Pain section — stack cards */
  .pain-inner         { padding: var(--space-12) 20px; }

  /* How it works — vertical stack */
  .hiw-row            { flex-direction: column; gap: 36px; max-width: 320px; }
  .hiw-step           { max-width: 100%; }
  .hiw-connector      { display: none; }

  /* Pricing — single column */
  .pc-grid, .pc-grid--3 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pc-grid--scroll {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow-x: visible;
    padding: 0; margin: 0;
  }
  .pc-scroll::after { display: none; }
  .pc-card--highlight { transform: none; }

  /* Footer CTA — stack */
  .ftcta__inner       { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; }
  .ftcta__form-card   { padding: 24px 20px; }

  /* Footer bottom — stack */
  .footer-main        { grid-template-columns: 1fr; gap: 40px; padding: 48px 20px 24px; }
  .footer-bar         { flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px 20px 24px; }
  .footer-big-email   { font-size: 28px; }
  .footer-nl-row      { max-width: 100%; }

  /* Section title — tighter */
  .section__title     { font-size: clamp(24px, 6vw, 32px); letter-spacing: -1px; }
  .pricing-title      { font-size: clamp(26px, 6vw, 34px); }
  .pricing-wrap       { padding: 32px 20px 60px; }
}

/* Small mobile fine-tune */
@media (max-width: 480px) {
  .hero__title        { font-size: clamp(28px, 8vw, 40px); }
  .hero__subtitle     { font-size: var(--font-size-base); }
  .ftcta__heading     { font-size: 24px; }
  .hiw-row            { max-width: 100%; }
}

/* ════════════════════════════════════════════
   STYLEGUIDE
════════════════════════════════════════════ */
.sg-page { background: var(--color-canvas); min-height: 100vh; }

.sg-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-canvas);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.92);
}
.sg-topbar__left { display: flex; align-items: center; gap: 16px; }
.sg-topbar__divider { width: 1px; height: 28px; background: var(--color-divider); }
.sg-topbar__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); }
.sg-topbar__sub   { font-size: 12px; color: var(--color-muted); margin-top: 1px; }

.sg-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

/* Sticky TOC */
.sg-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.sg-toc__head {
  font-size: 10px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-subtle);
  letter-spacing: .12em;
  padding: 14px 12px 6px;
}
.sg-toc__head:first-child { padding-top: 0; }
.sg-toc__link {
  padding: 7px 12px;
  font-size: var(--font-size-base);
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background .15s, color .15s;
}
.sg-toc__link:hover { background: var(--color-surface); color: var(--color-ink); }

/* Main content */
.sg-main { min-width: 0; display: flex; flex-direction: column; gap: 64px; }
.sg-section {
  scroll-margin-top: 100px;
}
.sg-section__title {
  font-size: 28px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}
.sg-section__sub {
  font-size: var(--font-size-md);
  color: var(--color-muted);
  margin-bottom: 24px;
}
.sg-section__sub code {
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-ink);
}

.sg-h3 {
  font-size: 14px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 28px 0 14px;
}
.sg-h3:first-of-type { margin-top: 0; }

/* Generic row layout for inline samples */
.sg-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Colors */
.sg-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.sg-color {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-color__swatch {
  height: 64px;
  border-radius: var(--radius-md);
}
.sg-color__token {
  font-size: 12px;
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.sg-color__hex {
  font-size: 11px;
  color: var(--color-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* AI gradients */
.sg-grad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.sg-grad {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.sg-grad__swatch {
  height: 96px;
  border-radius: var(--radius-md);
}
.sg-grad__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-grad__use {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.5;
  margin-top: 4px;
}

/* Aurora + glass panel demo — miniature preview of the dashboard backdrop */
.sg-glass-demo {
  position: relative;
  height: 280px;
  background: linear-gradient(180deg, #f5f7fb 0%, #eef1f7 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}
.sg-glass-demo__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.sg-glass-demo__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  will-change: transform;
}
.sg-glass-demo__blob--1 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, #2563eb 0%, transparent 65%);
  top: -50px; left: -40px;
  animation: dash-aurora-1 28s ease-in-out infinite;
}
.sg-glass-demo__blob--2 {
  width: 190px; height: 190px;
  background: radial-gradient(circle, #ec4899 0%, transparent 65%);
  top: 20%; right: -50px;
  animation: dash-aurora-2 32s ease-in-out infinite;
}
.sg-glass-demo__blob--3 {
  width: 170px; height: 170px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 65%);
  bottom: -40px; left: 30%;
  animation: dash-aurora-3 26s ease-in-out infinite;
}
.sg-glass-demo__blob--4 {
  width: 150px; height: 150px;
  background: radial-gradient(circle, #14b8a6 0%, transparent 65%);
  top: 55%; left: -30px;
  animation: dash-aurora-4 30s ease-in-out infinite;
}
/* Keyframes shared with the styleguide's mini aurora demo. The dashboard
   itself no longer uses these (its aurora is baked into the body bg). */
@keyframes dash-aurora-1 {
  0%, 100% { transform: translate3d(0, 0, 0)        scale(1);    }
  50%      { transform: translate3d(80px, 60px, 0)  scale(1.15); }
}
@keyframes dash-aurora-2 {
  0%, 100% { transform: translate3d(0, 0, 0)        scale(1);    }
  50%      { transform: translate3d(-90px, 40px, 0) scale(.9);   }
}
@keyframes dash-aurora-3 {
  0%, 100% { transform: translate3d(0, 0, 0)        scale(1);    }
  50%      { transform: translate3d(60px, -70px, 0) scale(1.1);  }
}
@keyframes dash-aurora-4 {
  0%, 100% { transform: translate3d(0, 0, 0)        scale(1);    }
  50%      { transform: translate3d(80px, 50px, 0)  scale(.95);  }
}
.sg-glass-demo__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 70%;
  padding: 22px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sg-glass-demo__pill {
  width: 90px; height: 14px; border-radius: 999px;
  background: var(--grad-ai);
}
.sg-glass-demo__line {
  height: 8px;
  border-radius: 4px;
  background: rgba(15, 23, 42, .12);
}
.sg-glass-demo__label {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-muted);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* Typography rows */
.sg-type-list { display: flex; flex-direction: column; gap: 10px; }
.sg-type-row {
  display: grid;
  grid-template-columns: 200px 80px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.sg-type-row__token { font-size: 12px; color: var(--color-muted); font-family: 'SF Mono', Menlo, Consolas, monospace; }
.sg-type-row__px    { font-size: 12px; color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.sg-type-row__sample { color: var(--color-ink); }

/* Heading-sample variant: stacked meta column + free-form sample */
.sg-type-row--head {
  grid-template-columns: 240px 1fr;
  align-items: center;
  padding: 18px 0;
}
.sg-type-row--head .sg-type-row__meta {
  display: flex; flex-direction: column; gap: 4px;
}

/* Spacing rows */
.sg-space-list { display: flex; flex-direction: column; gap: 10px; }
.sg-space-row {
  display: grid;
  grid-template-columns: 160px 60px 1fr;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
}
.sg-space-row__token { font-size: 12px; color: var(--color-muted); font-family: 'SF Mono', Menlo, Consolas, monospace; }
.sg-space-row__px    { font-size: 12px; color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.sg-space-row__bar   { height: 16px; background: var(--color-brand); border-radius: 4px; }

/* Radii grid */
.sg-radii-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}
.sg-radius {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.sg-radius__box  { width: 64px; height: 64px; background: var(--color-brand); }
.sg-radius__token { font-size: 11px; color: var(--color-ink); font-weight: var(--font-weight-bold); font-family: 'SF Mono', Menlo, Consolas, monospace; }
.sg-radius__px    { font-size: 11px; color: var(--color-muted); font-family: 'SF Mono', Menlo, Consolas, monospace; }

/* Shadows grid */
.sg-shadows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  padding: 12px 4px;
}
.sg-shadow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sg-shadow__box {
  width: 100%;
  height: 80px;
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}
.sg-shadow__token { font-size: 11px; color: var(--color-ink); font-weight: var(--font-weight-bold); font-family: 'SF Mono', Menlo, Consolas, monospace; }
.sg-shadow__desc  { font-size: 11px; color: var(--color-muted); }

/* Form grid */
.sg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.sg-form-grid__dark {
  background: linear-gradient(135deg, #0d1f2d, #1a2f3a);
  padding: 20px;
  border-radius: var(--radius-md);
}
.sg-label {
  display: block;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  margin-bottom: 8px;
}
.sg-label--inverted { color: rgba(255,255,255,.6); }

/* Generic preview wrapper */
.sg-preview {
  background: var(--color-surface);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}

/* Responsive */
@media (max-width: 900px) {
  .sg-layout { grid-template-columns: 1fr; gap: 24px; }
  .sg-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .sg-toc__head { width: 100%; padding: 8px 0 4px; }
  .sg-grid-2, .sg-grid-3 { grid-template-columns: 1fr; }
  .sg-type-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .sg-type-row--head { grid-template-columns: 1fr; gap: 12px; }
}

/* ════════════════════════════════════════════
   DASHBOARD → REVIEWS
   Refreshed visual — larger typography hierarchy,
   bigger cards, more whitespace. Full token compliance.
════════════════════════════════════════════ */
/* .dr-reviews removed — outer shell now uses .chk-page (matches Go Check-In). */

/* .dr-header* + .dr-kpi-tile* removed — now using .chk-hero + .chk-kpi. */

/* ── Main grid ── 65/35: feed | side stack. Feed and side share equal
   intrinsic height; the second row (.dr-row-2) sits below. */
.dr-main {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 10px;
}

/* Second row — AI Insights | Promo, 50/50 on desktop. Base layout shared
   with Social Media tab (which also uses .dr-row-2 for its 2-col rows). */
.dr-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dr-row-2 > .chk-card { padding: 14px 16px; }

/* ── Reviews-only highlight zone ──
   Scoped to .dr-page so it only affects the Reviews tab's bottom row
   (Social Media also uses .dr-row-2 but should NOT get the dark
   spotlight treatment). Dark navy backdrop with brand radial blobs +
   gradient rim — mirrors the SEO .seo-spotlight. */
.dr-page {
  /* Grow to fill the dashboard chapter on tall screens so the highlighted
     bottom row can stretch into leftover space (no empty gap under
     dr-row-2). The `0` in `1 0 auto` is flex-shrink:0 — it stops this flex
     column from cramming + clipping its sections on SHORT viewports (e.g. a
     14" laptop, where content is taller than the chapter): the page keeps
     its natural height and .dash-main scrolls instead of collapsing the KPI
     strip and dr-row-2. */
  flex: 1 0 auto;
  min-height: 0;
}
.dr-page .dr-row-2 {
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,   rgba(124, 58, 237, .35) 0%, transparent 55%),
    radial-gradient(110% 90% at 100% 0%, rgba(236, 72, 153, .25) 0%, transparent 55%),
    radial-gradient(120% 100% at 50% 100%, rgba(59, 130, 246, .25) 0%, transparent 55%),
    linear-gradient(180deg, #0F172A 0%, #111827 100%);
  box-shadow:
    0 24px 60px -20px rgba(124, 58, 237, .35),
    0 8px 32px -10px rgba(0, 0, 0, .35);
}
/* Gradient inner border-glow — 1px brand-rainbow rim that lifts the dark
   surface (same mask-composite trick as the SEO spotlight). */
.dr-page .dr-row-2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .6) 0%, rgba(236, 72, 153, .4) 50%, rgba(59, 130, 246, .6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}
.dr-page .dr-row-2 > .chk-card {
  height: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
  /* Lift cards over the dark wrapper so they pop against the navy bg. */
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .15);
}

/* ── Scroll-in reveal — mirrors .seo-page [data-anim] pattern ──
   Sections fade up; the highlight zone's inner cards stagger 120ms
   after each other so it "settles" into place as the user scrolls. */
.dr-page [data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.0,.0,1), transform .6s cubic-bezier(.2,.0,.0,1);
  will-change: transform, opacity;
}
.dr-page [data-anim].is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Inner cards: start hidden too, then reveal staggered after parent is-in. */
.dr-page .dr-row-2 > [data-stagger] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s cubic-bezier(.2,.0,.0,1), transform .55s cubic-bezier(.2,.0,.0,1);
}
.dr-page .dr-row-2.is-in > [data-stagger] {
  opacity: 1;
  transform: translateY(0);
}
.dr-page .dr-row-2.is-in > [data-stagger="0"] { transition-delay: 180ms; }
.dr-page .dr-row-2.is-in > [data-stagger="1"] { transition-delay: 320ms; }
.dr-main > .chk-card {
  padding: 14px 16px;
}
.dr-feed {
  min-height: 0;
}
.dr-feed > .chk-card__head { margin-bottom: 10px; }
.dr-side > .chk-card { padding: 12px 14px; }
.dr-side > .chk-card > .chk-card__head { margin-bottom: 8px; }
/* .dr-card* + .dr-feed-cell removed — sections now wrap with .chk-card.
   Inner review feed list, filters, items keep their dr-* classes below. */

/* ── Review feed (LEFT) inner content ── */
/* Filter pill group — segmented control above the feed list. */
.dr-feed__filters { display: flex; gap: 4px; background: var(--color-surface); padding: 4px; border-radius: var(--radius-sm); }
.dr-feed__filter {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: none; background: transparent; font-family: inherit;
  font-size: 11px; font-weight: var(--font-weight-bold); color: var(--color-muted);
  padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer;
  line-height: 1.5; transition: color .12s, background .12s;
}
.dr-feed__filter svg { width: 12px; height: 12px; flex-shrink: 0; }
.dr-feed__filter:hover { color: var(--color-ink); }
.dr-feed__filter.is-active { background: var(--color-canvas); color: var(--color-ink); box-shadow: var(--shadow-card); }

/* Scrollable feed list — fills the remaining card height. */
.dr-feed__list {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px;
  scrollbar-width: thin;
}
.dr-feed__list::-webkit-scrollbar { width: 6px; }
.dr-feed__list::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }

/* Customer-feedback card — 4-col grid shared by both card types so they
   line up: avatar | profile (name + contact) | rating block (source +
   emoji/date + stars + comment) | 28px more menu. Action items live in
   the more menu (Reply for Go Check-in, View detail for both). */
.dr-review {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(180px, 1.2fr) minmax(200px, 1.6fr) 28px;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
  transition: border-color .12s, box-shadow .12s, transform .12s;
  align-items: start;
}
.dr-review:hover { border-color: var(--color-divider); box-shadow: var(--shadow-card); }
.dr-review__avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  color: #fff;
  font-weight: var(--font-weight-extrabold); font-size: var(--font-size-md);
  display: grid; place-items: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  background: var(--avatar-tint, linear-gradient(135deg, #8B5CF6, #6D28D9));
}
/* Profile column: name + source mark + tier pill + contact list */
.dr-review__profile { min-width: 0; }
.dr-review__name-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dr-review__name { font-size: var(--font-size-base); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
/* Tier pill — reuses .chk-feed__pill base + modifiers from the Check-in
   page (.chk-feed__pill--vip / --regular / --new). Adds the Atrisk
   variant which isn't surfaced in Check-in but is needed here. */
.dr-review__tier { flex-shrink: 0; }
.chk-feed__pill--atrisk {
  background: var(--color-warning-light, rgba(245, 158, 11, .15));
  color: var(--color-warning-text, #B45309);
}
.dr-review__contact {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.dr-review__contact li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-ink-soft);
}
.dr-review__contact svg {
  width: 13px; height: 13px;
  color: var(--color-muted); flex-shrink: 0;
}

/* Layered star rendering — dim track behind a clipped gold fill so partial
   ratings (4.5 stars etc.) render cleanly without half-star glyphs.
   IMPORTANT: `align-self: flex-start` is required because the parent
   `.dr-review__rating-block` is a flex column with default
   `align-items: stretch` — without it the stars container stretches to
   full column width and the fill's inline width:X% becomes a percentage
   of that (much larger) box, so all 5 gold stars always show. */
.dr-review__stars {
  position: relative; display: inline-block;
  line-height: 1; font-size: 14px; letter-spacing: 1px;
  flex-shrink: 0; align-self: flex-start;
  width: max-content;
}
.dr-review__stars-track { color: var(--color-divider); }
.dr-review__stars-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  color: #F59E0B;
  overflow: hidden; white-space: nowrap;
}

/* Rating block (3rd column): source label + emoji-date row + stars + comment + Reply */
.dr-review__rating-block {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.dr-review__src-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--font-weight-bold); color: var(--color-ink);
}
.dr-review__src-row-icon { display: inline-flex; align-items: center; height: 18px; }
.dr-review__src-row-icon svg { width: auto; height: 18px; display: block; }
.dr-review__emoji-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-ink-soft);
}
.dr-review__rating-emoji {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
}
.dr-review__rating-label { font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.dr-review__rating-sep { color: var(--color-divider); }
.dr-review__rating-date { color: var(--color-muted); }
.dr-review__comment {
  font-size: 13px; line-height: 1.55; color: var(--color-ink-soft);
  margin: 2px 0 0;
  font-style: italic;
}
.dr-review__comment.is-empty { color: var(--color-muted); }
.dr-star-dim { color: var(--color-divider); }

/* 3-dot more menu — same anchored dropdown for both card types */
.dr-review__more-wrap { position: relative; align-self: start; }
.dr-review__more {
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--color-muted); cursor: pointer;
  opacity: .5;
  transition: background .12s, color .12s, opacity .12s;
}
.dr-review__more svg { width: 16px; height: 16px; }
.dr-review:hover .dr-review__more { opacity: 1; }
.dr-review__more:hover,
.dr-review__more[aria-expanded="true"] {
  background: var(--color-surface); color: var(--color-ink); opacity: 1;
}
.dr-review__menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  z-index: 20;
  min-width: 160px;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: 4px;
  animation: dr-menu-pop .12s ease;
}
@keyframes dr-menu-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.dr-review__menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft); cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.dr-review__menu-item svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--color-brand); }
.dr-review__menu-item:hover { background: var(--color-brand-light); color: var(--color-brand-text); }

/* Review detail modal — read-only summary popped from "View detail" */
.dr-detail { display: flex; flex-direction: column; gap: 16px; }
.dr-detail__head {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
}
.dr-detail__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #DDD6FE, #8B5CF6);
  color: #fff;
  font-weight: var(--font-weight-extrabold); font-size: var(--font-size-md);
  display: grid; place-items: center;
}
.dr-detail__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dr-detail__contact { margin-top: 6px; }
.dr-detail__rating {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.dr-detail__rating-label {
  font-size: 13px; font-weight: var(--font-weight-bold); color: var(--color-ink);
  margin-right: auto;
}
.dr-detail__rating .dr-review__stars { font-size: 16px; }
.dr-detail__comment {
  padding: 12px 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.6; color: var(--color-ink-soft);
  font-style: italic;
}
.dr-detail__comment.is-empty { color: var(--color-muted); }

/* ── Side stack (RIGHT) ──
   Two cards stacked vertically. The side stretches to match the grid row
   height set by Recent reviews (default align-self: stretch in grid). The
   Go Check-in Ratings card flex-grows to fill remaining space so the
   bottom edge aligns with Recent reviews — no staggered/so-le look. */
.dr-side { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.dr-side > .dr-ci-ratings { flex: 1; }

/* Hero KPI strip — reuses .seo-kpis glass-aurora component. The .dr-kpis
   modifier swaps the SEO grid (1.5fr + 3×1fr for the score card) to 4
   equal columns and tightens padding since this row is a supporting strip,
   not the headline. Selector is .seo-kpis.dr-kpis (specificity 0,2,0) so
   it beats the SEO mobile override (.seo-kpis, 0,1,0). */
.seo-kpis.dr-kpis {
  grid-template-columns: repeat(4, 1fr);
  padding: 16px;
  margin-bottom: 10px;
}

/* Layered star widget — used by the per-review row. Outer track is gray;
   inner fill is clipped to a percentage width. */
.dr-stars { position: relative; display: inline-block; line-height: 1; font-size: 16px; letter-spacing: 1px; }
.dr-stars--lg { font-size: 18px; }
.dr-stars__track { color: var(--color-divider); }
.dr-stars__fill {
  position: absolute; inset: 0;
  color: #F59E0B;
  overflow: hidden; white-space: nowrap;
}

/* ── Rating distribution card — "Visitor Channels" style ──
   Header (title + Details pill) → big avg + delta → 3-segment sentiment
   bar + legend → 5-row star table. */
.dr-side > .chk-card.dr-rating-summary {
  display: flex; flex-direction: column; gap: 12px;
}
.dr-rating-summary__head {
  margin-bottom: 0 !important;
}
/* Sentiment segmented bar (also fixes the digest modal — same classes were
   referenced there with no CSS). 3 colored segments + 3-dot legend. */
.dr-sentiment__bar {
  display: flex; gap: 3px;
  height: 8px;
}
.dr-sentiment__seg {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width .3s ease;
}
.dr-sentiment__seg--pos { background: var(--color-success); }
.dr-sentiment__seg--neu { background: #38BDF8; }
.dr-sentiment__seg--neg { background: var(--color-error); }

.dr-sentiment__legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.dr-sentiment__legend li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.dr-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dr-dot--pos { background: var(--color-success); }
.dr-dot--neu { background: #38BDF8; }
.dr-dot--neg { background: var(--color-error); }

/* 5-row star breakdown table */
.dr-rating-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.dr-rating-table th {
  text-align: left;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--color-divider);
}
.dr-rating-table td {
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--color-surface);
}
.dr-rating-table tr:last-child td { border-bottom: none; }
.dr-rating-table th:nth-child(2),
.dr-rating-table td:nth-child(2) { text-align: right; padding-right: 14px; }
.dr-rating-table th:nth-child(3),
.dr-rating-table td:nth-child(3) { text-align: right; }
.dr-rating-table__stars { width: 1%; white-space: nowrap; }
.dr-rating-table__pct {
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.dr-rating-table__count {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ── Go Check-in Ratings card — donut + emoji legend ── */
.dr-ci-ratings__head { margin-bottom: 10px !important; }
.dr-ci-ratings__body {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: center;
  align-content: center;
  flex: 1;
}
.dr-ci-ratings__chart {
  position: relative;
  width: 130px; height: 130px;
  /* Soft shadow under the donut for depth — modern dashboards rarely sit
     a chart flat against the card surface. */
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .08));
}
.dr-ci-ratings__chart svg {
  width: 100%; height: 100%;
  display: block;
}
/* Rounded stroke ends on every arc → soft, pill-like segments that pair
   with the JS-side gap to read as a clean segmented ring. */
.dr-ci-ratings__chart svg circle {
  stroke-linecap: round;
}
.dr-ci-ratings__total {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.dr-ci-ratings__total-label {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.dr-ci-ratings__total-num {
  font-size: 24px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dr-ci-ratings__legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
/* Row: emoji + label on the left, count on the right. `margin-left: auto`
   on the count cleanly pushes it to the far right edge so the legend
   reads "[status] ......... [count]" regardless of viewport width. */
.dr-ci-ratings__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-ink);
}
.dr-ci-ratings__count { margin-left: auto; }
.dr-ci-ratings__emoji {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
}
.dr-ci-ratings__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.dr-ci-ratings__count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.dr-ci-ratings__count strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-extrabold);
}
.dr-ci-ratings__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
}

/* AI Insights — compact list, icon button in card head for SMS config */
.dr-insights__cta-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm); color: var(--color-ink-soft);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.dr-insights__cta-icon svg { width: 14px; height: 14px; }
.dr-insights__cta-icon:hover { background: var(--color-brand-light); color: var(--color-brand); border-color: var(--color-brand-border); }

.dr-insights__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.dr-insight { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: flex-start; }
.dr-insight__icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.dr-insight__icon svg { width: 14px; height: 14px; }
.dr-insight__icon--success { background: var(--color-success-light); color: var(--color-success); }
.dr-insight__icon--warning { background: var(--color-warning-light); color: var(--color-warning); }
.dr-insight__icon--brand   { background: var(--color-brand-light); color: var(--color-brand); }
.dr-insight__body { min-width: 0; }
.dr-insight__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.dr-insight__text {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  line-height: 1.5;
  margin: 0 0 4px;
}
.dr-insight__link {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  text-decoration: none;
  cursor: pointer;
}
.dr-insight__link:hover { text-decoration: underline; }
.dr-insight__link.is-done { color: var(--color-muted); cursor: default; pointer-events: none; }
.dr-insight__link.is-done:hover { text-decoration: none; }

/* Insight confirm modal — context strip + summary block */
.dr-insight-confirm__context {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.dr-insight-confirm__context--success { background: var(--color-success-light); border-color: var(--color-success-border); }
.dr-insight-confirm__context--warning { background: var(--color-warning-light); border-color: var(--color-warning-border); }
.dr-insight-confirm__context--brand   { background: var(--color-brand-light);   border-color: var(--color-brand-border);   }
.dr-insight-confirm__context-icon { flex-shrink: 0; display: inline-grid; place-items: center; }
.dr-insight-confirm__context-icon svg { width: 18px; height: 18px; }
.dr-insight-confirm__recipients {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.dr-insight-confirm__summary {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   Reviews promo card — replaces the old funnel.
   Light card with subtle brand-gradient tint, decorative floating
   stars, animated "LIVE" pill, gradient hero number, and 3 feature
   rows with colored icon chips. Designed to read in under 10s.
═══════════════════════════════════════════════════════════════ */
.dr-promo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(236, 72, 153, .07) 0%, transparent 55%),
    radial-gradient(110% 90% at 0% 100%, rgba(59, 130, 246, .07) 0%, transparent 55%),
    radial-gradient(100% 80% at 50% 0%, rgba(124, 58, 237, .08) 0%, transparent 55%),
    #ffffff;
  border: 1px solid rgba(124, 58, 237, .12);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .04),
    0 12px 28px -16px rgba(124, 58, 237, .22);
}

/* Floating decorative stars in the background — gentle twinkle to suggest
   "AI sparkle / magic" without being childish. */
.dr-promo__deco {
  position: absolute;
  pointer-events: none;
  color: rgba(124, 58, 237, .14);
  animation: dr-promo-twinkle 4s ease-in-out infinite;
}
.dr-promo__deco--1 {
  top: 12px;
  right: -6px;
  transform: rotate(-12deg);
}
.dr-promo__deco--2 {
  bottom: 18px;
  right: 28px;
  color: rgba(236, 72, 153, .16);
  animation-delay: 1.2s;
}
@keyframes dr-promo-twinkle {
  0%, 100% { opacity: 1;   transform: scale(1)    rotate(-12deg); }
  50%      { opacity: .45; transform: scale(.85)  rotate(-6deg);  }
}

/* Feature rows — icon chip on the left (tinted per-feature), title + sub
   on the right. Subtle hover lift hints at interactivity even though they
   aren't clickable yet (room to wire up to a "learn more" panel later). */
.dr-promo__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
  /* Let the feature row consume remaining card height so the 3 cells
     stretch to fill the full card alongside dr-insights. */
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.dr-promo__feat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-width: 0;
  /* Grid stretch + flex column → each cell ends up exactly the same
     height across the row, regardless of text length. */
  height: 100%;
}
.dr-promo__feat:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, .18);
  box-shadow: 0 6px 18px -10px rgba(124, 58, 237, .25);
}
/* Illustration tile — sits at the top of each feature card. Holds the
   PNG illustration (provided by design). Lavender backdrop already lives
   inside the source image, so the tile itself only handles sizing +
   subtle inner border. */
.dr-promo__feat-illo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.dr-promo__feat-illo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Desktop (mouse/hover only): zoom into the illustration on hover so the small
   in-image text (SMS, review screens) becomes legible. The source webp is a
   sharp 1254px lossless, so the browser re-samples from it at the zoomed size —
   the magnified view stays crisp (no upscale blur). overflow:hidden +
   border-radius keep it clipped inside the rounded frame. */
@media (hover: hover) and (pointer: fine) {
  .dr-promo__feat-illo img { transition: transform .4s ease; transform-origin: center; }
  .dr-promo__feat:hover .dr-promo__feat-illo img { transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .dr-promo__feat-illo img,
  .dr-promo__feat:hover .dr-promo__feat-illo img { transition: none; transform: none; }
}
.dr-promo__feat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dr-promo__feat-text strong {
  font-size: 13px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.35;
}
.dr-promo__feat-text span {
  font-size: 11.5px;
  color: var(--color-muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .dr-promo               { gap: 14px; }
  /* On mobile drop 3-col → single column stack so each feature has room
     for illustration + text without getting cramped. */
  .dr-promo__features     { grid-template-columns: 1fr; gap: 8px; }
  .dr-promo__feat         {
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    gap: 12px;
  }
  /* Illustration shrinks to a compact tile on mobile so the row reads
     icon-style: illo on the left, text on the right. */
  .dr-promo__feat-illo    {
    width: 72px;
    flex-shrink: 0;
    aspect-ratio: 1;
    border-radius: 10px;
  }
  .dr-promo__feat-text strong { font-size: 12.5px; }
  .dr-promo__feat-text span   { font-size: 11px; }
  .dr-promo__deco--1      { width: 28px; height: 28px; }
  .dr-promo__deco--1 svg  { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   Social Media — preview/teaser dashboard
   Mirrors Reviews/SEO layout (hero KPIs + dr-main grid + dr-row-2)
   so the visual language stays consistent. Adds a sticky subscribe
   bar at the bottom + per-card "locked" affordances (AI chip, pulse).
═══════════════════════════════════════════════════════════════ */

/* .soc-page's bottom spacing now comes from the shared closing CTA's 20px
   margin (Social always renders the CTA). Its own 32px padding-bottom stacked
   on top of that (→ 52px below the CTA, inconsistent with every other page),
   so it's dropped. */

/* Tier badge / pending chip — small AI-flavored pill in card heads */
.soc-locked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-size: 11px; font-weight: var(--font-weight-bold);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.soc-locked-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.soc-locked-chip--brand {
  background: linear-gradient(135deg, #FB923C, #F97316);
  color: #fff;
}

/* ── Content calendar (week view, Google Calendar–style) ── */
.soc-calendar { min-height: 0; }
.soc-cal-head {
  align-items: center !important;
  margin-bottom: 12px !important;
}
.soc-cal-head__title h2 { margin: 0 0 2px; }
.soc-cal-nav {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 4px;
}
.soc-cal-nav__btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--color-ink-soft); cursor: pointer;
  transition: background .12s, color .12s;
}
.soc-cal-nav__btn:hover { background: var(--color-canvas); color: var(--color-ink); }
.soc-cal-nav__today {
  height: 28px;
  padding: 0 12px;
  background: var(--color-canvas); border: none; border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11px; font-weight: var(--font-weight-bold); color: var(--color-ink);
  cursor: pointer;
  transition: background .12s;
}
.soc-cal-nav__today:hover { background: var(--color-brand-light); color: var(--color-brand); }

/* Weekday label row sits above the date cells (separate grid) so the
   sticky day names don't share borders with the cell area. */
.soc-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
.soc-cal-weekday {
  font-size: 11px; font-weight: var(--font-weight-extrabold);
  color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .06em;
  text-align: left;
  padding-left: 6px;
}

.soc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.soc-cal-day {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 8px 12px;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  min-height: 160px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s, background .12s;
}
.soc-cal-day:hover {
  border-color: var(--color-brand-border);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(139, 92, 246, .12);
}
.soc-cal-day.is-past {
  background: var(--color-surface);
  opacity: .72;
}
.soc-cal-day.is-today {
  border-color: var(--color-brand);
  background: linear-gradient(180deg, rgba(139, 92, 246, .06), transparent 60%);
}
.soc-cal-day__head {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin-bottom: 2px;
}
.soc-cal-day__num {
  font-size: 18px; font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.soc-cal-day.is-today .soc-cal-day__num { color: var(--color-brand); }
.soc-cal-day__today-chip {
  padding: 2px 8px;
  background: var(--color-brand);
  color: #fff;
  font-size: 10px; font-weight: var(--font-weight-extrabold);
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .06em;
}
.soc-cal-day__pending-dot {
  position: absolute; top: 8px; right: 8px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: #F59E0B;
  color: #fff;
  font-size: 11px; font-weight: var(--font-weight-extrabold);
  border-radius: 999px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--color-canvas);
}
.soc-cal-day__posts {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0;
  flex: 1;
}
.soc-cal-day__empty {
  font-size: var(--font-size-xs); color: var(--color-muted);
  font-style: italic;
}
.soc-cal-day__more {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: var(--color-brand);
  padding: 2px 4px;
}

/* Event pill — colored left-border accent (calendar event style) +
   time + truncated caption. Status changes the fill saturation. */
.soc-cal-event {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-left: 3px solid currentColor;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 10%, white);
  min-width: 0;
  overflow: hidden;
}
.soc-cal-event__icon { display: inline-grid; place-items: center; grid-row: 1 / span 2; }
.soc-cal-event__icon svg { width: 12px; height: 12px; }
.soc-cal-event__time {
  font-size: 11px; font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  grid-column: 2;
}
.soc-cal-event__caption {
  font-size: 11px;
  color: var(--color-ink-soft);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  grid-column: 2;
}
.soc-cal-event--facebook  { color: #1877F2; }
.soc-cal-event--instagram { color: #E4405F; }
.soc-cal-event--tiktok    { color: #111827; }
.soc-cal-event--pending {
  background: color-mix(in srgb, currentColor 6%, white);
  border-left-style: dashed;
}
.soc-cal-event--sent {
  opacity: .6;
}

/* Week 2 cells (the empty "future planning" row) — dashed border + lower
   opacity reads as upcoming/empty, distinct from past cells (filled gray). */
.soc-cal-day.is-week2 {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-border);
  opacity: .7;
}
.soc-cal-day.is-week2 .soc-cal-day__empty { color: var(--color-muted); }

/* "View full calendar" button — only visible on mobile (when collapsed). */
.soc-cal-show-more {
  display: none;
  margin-top: 10px;
}

/* ── AI Drafts queue (right column) ── */
.soc-side { gap: 10px; }
.soc-draft-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.soc-draft {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.soc-draft:hover {
  border-color: var(--color-brand-border);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(139, 92, 246, .12);
}
.soc-draft:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* Thumbnail — Unsplash primary on top, Picsum fallback as bg so cell
   is never blank (matches the post-preview image fallback pattern). */
.soc-draft__thumb {
  position: relative;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.soc-draft__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.soc-draft__main { min-width: 0; }
.soc-draft__head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.soc-draft__platform {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
}
.soc-draft__platform svg { width: 14px; height: 14px; }
.soc-draft__platform--facebook  { background: #E7F0FF; color: #1877F2; }
.soc-draft__platform--instagram { background: #FFE3EC; color: #E4405F; }
.soc-draft__platform--tiktok    { background: #ECECEC; color: #000;    }
.soc-draft__schedule {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  margin-right: auto;
}
.soc-draft__caption {
  font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-ink);
  margin: 0 0 6px;
}
.soc-draft__source {
  font-size: var(--font-size-xs); color: var(--color-muted);
  margin: 0;
  font-style: italic;
}

/* ── Top performing post — horizontal layout: hero image left, post content right ── */
.soc-top-post__preview {
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: grid;
  /* Caption column gets the larger share so the post text stays readable at
     half-width (the old fixed 260–340px hero squeezed it into a tall, narrow
     strip). Hero & content stretch to equal height. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: stretch;
}
.soc-top-post__hero {
  position: relative;
  /* Landscape (not square) so the Top post card height lines up with the
     How it works card beside it — avoids the staggered/uneven row. */
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.soc-top-post__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.soc-top-post__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.soc-top-post__head { margin-bottom: 12px; }
.soc-top-post__footer {
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: auto;
}

/* ── AI Content Scout — profile card + image moodboard + status footer ── */
.soc-scout {
  display: flex; flex-direction: column;
}
.soc-scout__profile {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: 14px;
  margin-bottom: 14px;
}
.soc-scout__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DDD6FE, #8B5CF6);
  color: #fff;
  font-size: 22px;
  display: grid; place-items: center;
  font-weight: var(--font-weight-extrabold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.soc-scout__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.2;
}
.soc-scout__sub {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  margin-top: 2px;
}
.soc-scout__profile-action {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.soc-scout__profile-action:hover { background: var(--color-surface); color: var(--color-ink); }
.soc-scout__profile-action svg { width: 16px; height: 16px; }
.soc-scout__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex: 1;
  margin-bottom: 14px;
}
.soc-scout__cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.soc-scout__cell img,
.soc-scout__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.soc-scout__video { position: absolute; inset: 0; }
/* AI Studio thumbnails: fill the card's free height as two EQUAL rows so the
   grid has no leftover gap at the bottom and the 6px spacing stays uniform.
   (The card is stretched to match the flexible Brand DNA slider beside it; with
   square cells the two rows would otherwise leave an empty band below.) */
.soc-studio__grid { grid-auto-rows: 1fr; }
.soc-studio__grid .soc-scout__cell { aspect-ratio: auto; }
.soc-scout__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
  margin-top: auto;
}
.soc-scout__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-semibold);
}
.soc-scout__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-brand);
  animation: soc-scout-pulse 1.4s ease-in-out infinite;
}
@keyframes soc-scout-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .5; }
}
.soc-scout__counter {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Sticky subscribe bar (footer) ── */
.soc-subscribe {
  /* Spacing above comes from the page's flex `gap` (same as every other
     section) — no extra margin-top, or this section sits farther from the
     content above it than the rest. */
  padding: 22px 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 72, 153, .14), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, .14), transparent 45%),
    linear-gradient(135deg, #FFF5F9, #F5F2FE);
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Bottom breathing room for the closing CTA — a 20px margin on the section
   itself (not padding on the scroll container, which a flex scroll container
   drops at the scroll-end). flex:0 0 auto stops a flex parent from shrinking
   it: POS Retail's `flex:1 0 auto` demo surface was squeezing this down to a
   clipped 46px sliver (the section is overflow:hidden, so its content was cut
   off — "lỗi bị cắt"). */
.prod-subscribe,
.prod-included { margin-bottom: 20px; flex: 0 0 auto; }

/* ── Closing CTA · page-fit layout (desktop only) ───────────────────────
   On desktop the dashboard is a FIXED-HEIGHT flex scroll container, so every
   product page must flow as ONE natural-height document that fills the viewport.
   Without this the fit-to-viewport pages (.chk-page--fit: Check-In, Booking, POS
   coming-soon) either cap/squeeze their content — Check-In's customer column
   overflowed *past* the CTA, leaving a phantom gap — or pack everything at the
   top with a gap below the CTA. Mobile (≤900px) body-scrolls and already
   neutralises --fit, so these stay desktop-scoped (and keep the mobile
   padding-bottom that clears the FAB). Net result on every page: 16px above the
   CTA (the page's flex gap) and 20px below (the CTA's own margin). */
@media (min-width: 901px) {
  .chk-page:has(.prod-subscribe),
  .chk-page:has(.prod-included) { flex: 1 0 auto; min-height: 0; }
  /* Check-In: the kiosk grid grows to absorb leftover viewport height so the
     grid + closing CTA together fill the screen on large/tall displays (CTA
     sits flush at the bottom instead of floating with an empty gap below).
     flex-shrink:0 + basis:auto means it never shrinks below its content, so on
     short screens it keeps its natural height and the page scrolls — no
     viewport-cap spill (the old `flex:none` bug this replaces). */
  .chk-page:has(.prod-subscribe) .chk-main-grid { flex: 1 0 auto; }

  /* POS Retail has no .chk-page — the CTA lands straight in .dash-view, after a
     full-bleed white demo (margin: 0 -20px -20px). Let the view grow to wrap the
     CTA + its bottom margin (so the gap renders), stop the white bleeding under
     the CTA, and add the 16px top gap the flex column gives every other page. */
  .dash-view:has(> .prod-subscribe),
  .dash-view:has(> .prod-included) { flex: 1 0 auto; }
  .dash-view:has(> .prod-subscribe) .pos-demo-section { margin-bottom: 0; }
  .pos-retail-desk + .prod-subscribe,
  .pos-retail-desk + .prod-included { margin-top: 16px; }

  /* The scroll container drops its padding-bottom at the scroll-end on tall
     pages but keeps it on short ones (→ 20px vs 40px below the CTA). On any page
     carrying a CTA, drop it so the CTA's 20px margin is the single bottom gap. */
  .dash-main:has(.prod-subscribe),
  .dash-main:has(.prod-included) { padding-bottom: 0; }
}

/* "Already included in <product>" note — used where a feature ships inside
   another plan (e.g. Reviews comes with Go Check-In) instead of its own pricing. */
.prod-included {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 72, 153, .14), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, .14), transparent 45%),
    linear-gradient(135deg, #FFF5F9, #F5F2FE);
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: var(--radius-xl);
}
.prod-included__check {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--grad-ai); color: #fff;
  border-radius: 50%;
  font-weight: 800; font-size: 16px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .28);
}
.prod-included__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.prod-included__text strong { font-size: 15px; color: var(--color-ink); }
.prod-included__text span { font-size: 13px; color: var(--color-muted); }
.prod-included__btn {
  flex-shrink: 0;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  color: var(--color-brand-text);
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.prod-included__btn:hover { background: var(--color-brand-light); }
@media (max-width: 640px) {
  .prod-included { flex-direction: column; align-items: flex-start; }
  .prod-included__btn { width: 100%; }
}
.soc-subscribe.is-pulsing {
  animation: soc-pulse 1.6s ease-in-out;
}
@keyframes soc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(236, 72, 153, .25); }
}
.soc-subscribe__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff;
  color: #EC4899;
  font-size: 11px; font-weight: var(--font-weight-extrabold);
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.soc-subscribe__eyebrow svg { width: 12px; height: 12px; }
.soc-subscribe__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  margin: 0 0 6px;
}
.soc-subscribe__sub {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0;
}
/* Compact perks row in the pitch column (Go POS → free terminal, dual pricing,
   device compatibility) — green-bullet items that wrap onto multiple lines. */
.soc-perks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.soc-perk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.soc-perk::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}
.soc-perk__strike {
  color: var(--color-subtle);
  font-weight: var(--font-weight-medium);
  text-decoration: line-through;
}
.soc-subscribe__tiers {
  display: grid;
  grid-template-columns: repeat(var(--tier-cols, 3), 1fr);
  gap: 10px;
}
.soc-tier {
  position: relative;
  background: rgba(255, 255, 255, .9);
  border: 1.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.soc-tier:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, .15);
}
.soc-tier.is-highlight {
  border-color: var(--color-brand);
  background: linear-gradient(135deg, #fff, rgba(139, 92, 246, .04));
}
.soc-tier__badge {
  position: absolute; top: -10px; right: 10px;
  padding: 3px 9px;
  background: var(--color-brand);
  color: #fff;
  font-size: 10px; font-weight: var(--font-weight-extrabold);
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: .04em;
}
.soc-tier__name {
  font-size: 12px; font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px;
}
.soc-tier__price {
  font-size: 22px; font-weight: var(--font-weight-black);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.soc-tier__price span {
  font-size: 12px; font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  margin-left: 2px;
}
/* Text formula price (e.g. "Interchange +0.3%" + "/txn") — the 22px dollar
   size is too large for words, so shrink it and drop the unit to its own line. */
.soc-tier__price--text {
  font-size: 15px; letter-spacing: -.2px; line-height: 1.3;
}
.soc-tier__price--text span { display: block; margin-left: 0; margin-top: 1px; }
/* Processing-rate price (Standard Pricing): one or more options stacked with an
   "or" between them — each a label + optional green value + muted unit. */
.soc-tier__price--rate { display: flex; flex-direction: column; align-items: flex-start; letter-spacing: -.1px; line-height: 1.2; }
.soc-tier__price--rate .soc-tier__rateopt { display: flex; flex-direction: column; margin-left: 0; }
.soc-tier__price--rate .soc-tier__ratelabel { font-size: 14px; font-weight: var(--font-weight-black); color: var(--color-ink); margin-left: 0; }
.soc-tier__price--rate .soc-tier__rateline { display: block; margin: 2px 0 0; font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-muted); }
.soc-tier__price--rate .soc-tier__rate-val { color: var(--color-teal); margin-left: 0; }
.soc-tier__price--rate .soc-tier__or { margin: 6px 0; font-size: 10px; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--color-subtle); }
.soc-tier__desc {
  font-size: 11px; line-height: 1.45;
  color: var(--color-ink-soft);
  margin-top: 8px;
}

/* ── Day-detail modal (opens on calendar cell click)
   Renders each post as a Facebook/Instagram-style preview card. No
   action buttons — pure preview to demonstrate AI output value. ── */
.soc-day-modal__body {
  display: flex; flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: #F4F6F8;
  padding: 20px !important;
  border-radius: var(--radius-md);
}
.soc-day-empty {
  text-align: center;
  padding: 32px;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* ── Scheduler footer — appended to the AI Drafts queue popup so the owner
   can pick the publish date/time. Pinned below the scrollable body; demo
   only (confirm swaps in a success line, no real publishing). ── */
.soc-sched {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 16px var(--space-5);
  border-top: 1px solid var(--color-divider);
  background: var(--color-canvas);
}
.soc-sched__head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
}
.soc-sched__head svg { width: 16px; height: 16px; color: var(--color-brand); }
.soc-sched__head .chk-ai-chip { margin-left: auto; }
.soc-sched__fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.soc-sched__field { display: flex; flex-direction: column; gap: 5px; }
.soc-sched__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
}
/* ── Custom date/time picker — replaces the OS-native inputs so the popovers
   match the styleguide (brand-violet selection, app radii/shadows/fonts). ── */
.soc-picker { position: relative; }
.soc-picker__trigger {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: var(--font-size-md);
  font-family: inherit;
  color: var(--color-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.soc-picker__trigger:hover { border-color: var(--color-brand-border); }
.soc-picker.is-open .soc-picker__trigger {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}
.soc-picker__lead { display: inline-flex; color: var(--color-brand); flex-shrink: 0; }
.soc-picker__lead svg { width: 16px; height: 16px; }
.soc-picker__value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--font-weight-semibold);
}
.soc-picker__value.is-placeholder { color: var(--color-muted); font-weight: var(--font-weight-medium); }
.soc-picker__caret { display: inline-flex; color: var(--color-muted); flex-shrink: 0; transition: transform .2s ease; }
.soc-picker__caret svg { width: 14px; height: 14px; }
.soc-picker.is-open .soc-picker__caret { transform: rotate(180deg); }

/* Popover floats UP from the trigger (the footer sits at the modal bottom)
   so it never collides with the modal's clipped overflow. */
.soc-picker__pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: none;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16), 0 4px 12px rgba(15, 23, 42, .08);
  animation: chk-pop-in .16s cubic-bezier(.16, 1, .3, 1);
}
.soc-picker.is-open .soc-picker__pop { display: block; }
/* Time pop right-aligns so it stays inside the modal's right edge. */
.soc-picker[data-picker="time"] .soc-picker__pop { left: auto; right: 0; }

/* Calendar popover */
.soc-cp { width: 268px; padding: 12px; }
.soc-cp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.soc-cp__month { font-size: var(--font-size-base); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
.soc-cp__nav { display: flex; gap: 4px; }
.soc-cp__navbtn {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm); color: var(--color-ink-soft); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.soc-cp__navbtn:hover { background: var(--color-brand-light); border-color: var(--color-brand-border); color: var(--color-brand); }
.soc-cp__weekdays, .soc-cp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.soc-cp__weekdays { margin-bottom: 4px; }
.soc-cp__weekdays span {
  text-align: center; font-size: 11px; font-weight: var(--font-weight-bold);
  color: var(--color-muted); padding: 4px 0;
}
.soc-cp__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: none; background: transparent; border-radius: var(--radius-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-ink); cursor: pointer; font-family: inherit;
  transition: background .12s ease, color .12s ease;
}
button.soc-cp__day:hover { background: var(--color-brand-light); color: var(--color-brand); }
.soc-cp__day.is-muted { color: #C2C8D0; cursor: default; }
.soc-cp__day.is-disabled { color: #C2C8D0; cursor: not-allowed; }
.soc-cp__day.is-today { color: var(--color-brand); font-weight: var(--font-weight-extrabold); }
.soc-cp__day.is-selected,
.soc-cp__day.is-selected.is-today {
  background: var(--color-brand); color: #fff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, .35);
}
button.soc-cp__day.is-selected:hover { background: var(--color-brand-hover); color: #fff; }
.soc-cp__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-divider);
}
.soc-cp__foot-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  color: var(--color-muted); padding: 4px 8px; border-radius: var(--radius-sm);
}
.soc-cp__foot-btn:hover { background: var(--color-surface); color: var(--color-ink); }
.soc-cp__foot-btn--today { color: var(--color-brand); }

/* Time popover */
.soc-tp { list-style: none; margin: 0; padding: 6px; width: 150px; max-height: 220px; overflow-y: auto; }
.soc-tp li { margin: 0; }
.soc-tp__opt {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-ink); padding: 8px 12px; border-radius: var(--radius-sm);
  transition: background .12s ease, color .12s ease;
}
.soc-tp__opt:hover { background: var(--color-brand-light); color: var(--color-brand); }
.soc-tp__opt.is-selected { background: var(--color-brand); color: #fff; }
.soc-tp__opt.is-selected:hover { background: var(--color-brand-hover); color: #fff; }

.soc-sched__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.soc-sched__btn svg { width: 16px; height: 16px; }
.soc-sched__success {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--color-success-light, #E6F7EE);
  color: var(--color-success, #16A34A);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}
.soc-sched__success svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Social-media-style post preview card (mirrors FB/IG news-feed look) */
.soc-post-preview {
  background: var(--color-canvas);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}
.soc-post-preview__head {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.soc-post-preview__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DDD6FE, #8B5CF6);
  color: #fff;
  font-size: 22px;
  display: grid; place-items: center;
  font-weight: var(--font-weight-extrabold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.soc-post-preview__name {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.2;
}
.soc-post-preview__platform-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-pill);
}
.soc-post-preview__platform-pill svg { width: 12px; height: 12px; }
.soc-post-preview__platform-pill--facebook  { background: #E7F0FF; color: #1877F2; }
.soc-post-preview__platform-pill--instagram { background: #FFE3EC; color: #E4405F; }
.soc-post-preview__platform-pill--tiktok    { background: #ECECEC; color: #000;    }
.soc-post-preview__sub {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: 2px;
}
.soc-post-preview__more {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--color-muted); cursor: pointer;
  align-self: start;
}
.soc-post-preview__more svg { width: 16px; height: 16px; }
.soc-post-preview__more:hover { background: var(--color-surface); }

/* 3-image grid (1:1:1 horizontal, like the reference). Falls back to a
   subtle gradient if the Unsplash CDN fails to load. */
.soc-post-preview__images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.soc-post-preview__img {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.soc-post-preview__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.soc-post-preview__caption {
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 6px;
  white-space: pre-wrap;
}
.soc-post-preview__tags {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #1F6FEB;
  margin: 0 0 14px;
}
.soc-post-preview__footer {
  display: flex; align-items: center; gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--color-divider);
}
.soc-post-preview__metric,
.soc-post-preview__share {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.soc-post-preview__metric svg,
.soc-post-preview__share svg {
  width: 16px; height: 16px;
  color: var(--color-muted);
}
.soc-post-preview__metric strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-extrabold);
}
.soc-post-preview__share {
  margin-left: auto;
  cursor: default;
}

.soc-day-foot {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.soc-day-foot__lock {
  margin: 0;
  font-size: 12px; color: var(--color-muted);
  text-align: center;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  /* Calendar collapses to a 2-col grid on phones. By default only the
     next 4 days (offset 0/1/2/3) are visible — past + far-future cells
     are hidden until the user taps "View full calendar". */
  .soc-cal-weekdays { display: none; }
  .soc-cal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .soc-cal-day {
    min-height: 110px;
    padding: 10px;
  }
  .soc-calendar.is-mobile-collapsed .soc-cal-day { display: none; }
  .soc-calendar.is-mobile-collapsed .soc-cal-day[data-day-offset="0"],
  .soc-calendar.is-mobile-collapsed .soc-cal-day[data-day-offset="1"],
  .soc-calendar.is-mobile-collapsed .soc-cal-day[data-day-offset="2"],
  .soc-calendar.is-mobile-collapsed .soc-cal-day[data-day-offset="3"] {
    display: flex;
    flex-direction: column;
  }
  .soc-cal-show-more { display: block; }
  .soc-cal-day__head::before {
    content: attr(data-label);
  }
  /* Show weekday label inline since the header row is hidden on mobile */
  .soc-cal-day__num::after {
    content: " · " attr(data-label);
    font-size: 11px; font-weight: var(--font-weight-bold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .soc-top-post__preview { grid-template-columns: 1fr; gap: 14px; }
  .soc-top-post__hero { aspect-ratio: 1 / 1; }
  .soc-top-post__footer { gap: 10px 18px; }
  .soc-subscribe { grid-template-columns: 1fr; padding: 18px; }
  .soc-subscribe__tiers { grid-template-columns: 1fr; }
  .soc-day-modal__body { padding: 12px !important; gap: 14px; }
  .soc-post-preview { padding: 14px; border-radius: 12px; }
  .soc-post-preview__head { gap: 10px; }
  .soc-post-preview__name { flex-wrap: wrap; }
  .soc-post-preview__footer { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Social Media — offering sections (added)
   Brand Foundation · Google/YouTube channels · Base|Ultra groups ·
   AI Studio content types · How-it-works · trust stats · Ultra tier
═══════════════════════════════════════════════════════════════ */

/* New platform colors (Google Business + YouTube Shorts) */
.soc-cal-event--google  { color: #1A73E8; }
.soc-cal-event--youtube { color: #FF0000; }
.soc-draft__platform--google  { background: #E8F0FE; color: #1A73E8; }
.soc-draft__platform--youtube { background: #FFE5E5; color: #FF0000; }
.soc-post-preview__platform-pill--google  { background: #E8F0FE; color: #1A73E8; }
.soc-post-preview__platform-pill--youtube { background: #FFE5E5; color: #FF0000; }

/* ── AI Studio — content-type chips + cell badges ── */
.soc-studio__types {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.soc-studio__type {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  min-width: 0;
}
.soc-studio__type-icon {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--color-canvas);
  color: var(--color-brand);
}
.soc-studio__type-icon svg { width: 16px; height: 16px; }
.soc-studio__type--posters .soc-studio__type-icon { color: #EC4899; }
.soc-studio__type--videos  .soc-studio__type-icon { color: #F97316; }
.soc-studio__type--brand   .soc-studio__type-icon { color: #0EA5E9; }
.soc-studio__type-text { display: flex; flex-direction: column; min-width: 0; }
.soc-studio__type-label {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  color: var(--color-ink); line-height: 1.2;
}
.soc-studio__type-hint {
  font-size: 11px; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soc-studio__cell-badge {
  position: absolute; left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 9px; font-weight: var(--font-weight-extrabold);
  text-transform: uppercase; letter-spacing: .03em;
  color: #fff;
}
.soc-studio__cell-badge svg { width: 10px; height: 10px; }
.soc-studio__cell-badge--poster { background: rgba(236, 72, 153, .92); }
.soc-studio__cell-badge--video  { background: rgba(17, 24, 39, .82); }

/* How it works (dr-promo card) shares this row with the Top post card; both are
   forced to EQUAL height so they don't stagger. The Top post fills the matched
   height (hero + content stretch); How it works fills via its flex:1 features.
   The Top post caption/tags are clamped so a long post can't run the card tall. */
.soc-row-top-howto { align-items: stretch; }
.soc-row-top-howto .soc-top-post__preview { flex: 1; }
.soc-row-top-howto .soc-top-post__content .soc-post-preview__caption {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.soc-row-top-howto .soc-top-post__content .soc-post-preview__tags {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Desktop only: the hero fills its cell via stretch with aspect-ratio OFF.
   Left on, a tall equal-height row makes the 3:2 hero compute a width = height
   × 1.5 that's wider than its column, so it overflowed and covered/clipped the
   caption. With auto, width = the column, height = the stretched row. Mobile
   (≤900px) keeps its own square hero from the media block below. */
@media (min-width: 901px) {
  .soc-row-top-howto .soc-top-post__hero { aspect-ratio: auto; min-width: 0; }
}
/* "What's included" — modern glass cards laid out two per row. Each card pairs
   a gradient icon chip with the feature title + blurb. Scoped to .soc-howto-promo
   so the shared .dr-promo (used by Reviews) keeps its illustration thumbnails. */
.soc-howto-promo .dr-promo__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.soc-howto-promo .dr-promo__feat {
  position: relative;
  flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: linear-gradient(152deg, rgba(255, 255, 255, .92), rgba(244, 243, 255, .6));
  border: 0; border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 20px -12px rgba(124, 58, 237, .2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.soc-howto-promo .dr-promo__feat:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 14px 28px -12px rgba(124, 58, 237, .28);
}
/* Animated dashed border — gentle "marching ants" in brand violet, drawn with
   an inset SVG rect so the dashes follow the 16px corner radius. The dash slides
   by exactly one period (14px) per loop → seamless; it speeds up + darkens on
   hover. Respects prefers-reduced-motion. */
.soc-howto-promo .dr-promo__feat-dash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.soc-howto-promo .dr-promo__feat-dash rect {
  x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 16px; ry: 16px;
  fill: none; stroke: rgba(124, 58, 237, .32); stroke-width: 1.5;
  stroke-dasharray: 8 6;
  animation: dr-dash-march 1s linear infinite;
  transition: stroke .2s ease;
}
.soc-howto-promo .dr-promo__feat:hover .dr-promo__feat-dash rect {
  stroke: rgba(124, 58, 237, .62); animation-duration: .6s;
}
@keyframes dr-dash-march { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) {
  .soc-howto-promo .dr-promo__feat-dash rect { animation: none; }
}
.soc-howto-promo .dr-promo__feat-ic {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366F1, var(--color-brand)); color: #fff;
  box-shadow: 0 6px 14px rgba(124, 58, 237, .3);
}
.soc-howto-promo .dr-promo__feat-ic svg { width: 23px; height: 23px; }
.soc-howto-promo .dr-promo__feat-text strong { font-size: 13.5px; }
.soc-howto-promo .dr-promo__feat-text span { font-size: 12px; }

/* Mobile: show only the first 3 feature cards + a "View more" toggle
   (same pattern as the SEO tab's .seo-show-more). Hidden on desktop. */
.soc-howto-more { display: none; }
@media (max-width: 900px) {
  .soc-howto-more {
    display: block; width: 100%; margin-top: 6px;
    background: transparent; border: none; padding: 8px;
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
    color: var(--color-brand); cursor: pointer; border-radius: var(--radius-sm);
    transition: background .15s ease;
  }
  .soc-howto-more:hover { background: var(--color-brand-light); }
  .soc-howto-promo:not(.is-expanded) .dr-promo__feat:nth-child(n+4) { display: none; }
  /* one card per row on mobile (the scoped 2-col rule above out-specifies the
     generic .dr-promo__features 1fr mobile rule, so re-state it here) */
  .soc-howto-promo .dr-promo__features { grid-template-columns: 1fr; }
  /* mobile keeps the compact horizontal card (icon left, text right) — the
     desktop "icon on its own row" column layout is re-stated back to row here */
  .soc-howto-promo .dr-promo__feat { flex-direction: row; align-items: center; gap: 14px; }

  /* Keep the small "✨ AI" / "One-time" chips on the title row (don't let the
     generic mobile head-wrap push them onto their own line → taller card). */
  .soc-studio .chk-card__head,
  .soc-posts  .chk-card__head,
  .soc-dna    .chk-card__head { flex-wrap: nowrap; }
  .soc-studio .chk-card__head > div,
  .soc-posts  .chk-card__head > div,
  .soc-dna    .chk-card__head > div { min-width: 0; }
  .soc-studio .chk-ai-chip,
  .soc-posts  .chk-ai-chip { flex-shrink: 0; }
}

/* ── Brand DNA card — a 3-page brand-book slider (cover · colors · imagery)
   that pairs with AI Studio. ── */
.soc-dna { display: flex; flex-direction: column; }
.soc-dna__chip { flex-shrink: 0; white-space: nowrap; }   /* keep "One-time" on one line */

.soc-dna-slider { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; }
.soc-dna-slider__viewport {
  position: relative;
  flex: 1; min-height: 230px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
/* Faint prev/next arrows — brighten on hover, hidden at the ends */
.soc-dna-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .55); color: #2b2420; border: none; cursor: pointer;
  backdrop-filter: blur(3px); box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  opacity: .45; transition: opacity .15s, background .15s;
}
.soc-dna-slider:hover .soc-dna-arrow { opacity: .85; }
.soc-dna-arrow:hover { opacity: 1; background: rgba(255, 255, 255, .92); }
.soc-dna-arrow:disabled { opacity: 0; pointer-events: none; }
.soc-dna-arrow--prev { left: 8px; }
.soc-dna-arrow--next { right: 8px; }
.soc-dna-arrow svg { width: 17px; height: 17px; }
.soc-dna-slider__track {
  display: flex; height: 100%;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  touch-action: pan-y;
}
.soc-dna-slide {
  flex: 0 0 100%; min-width: 0; height: 100%;
  position: relative;
  display: flex; flex-direction: column;
}


/* Slide 2 · Palette */
.soc-dna-slide--palette { padding: 16px; gap: 12px; background: var(--color-canvas); }
.soc-dna-slide__label {
  font-size: 11px; font-weight: var(--font-weight-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted);
}
.soc-dna-pal { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.soc-dna-pal__sw { display: flex; flex-direction: column; min-width: 0; }
.soc-dna-pal__chip {
  flex: 1; min-height: 64px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.soc-dna-pal__name {
  font-size: 11px; font-weight: var(--font-weight-bold); color: var(--color-ink);
  margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.soc-dna-pal__hex {
  font-size: 9.5px; font-weight: var(--font-weight-semibold);
  color: var(--color-muted); letter-spacing: .02em;
}

/* Slide 3 · Imagery */
.soc-dna-slide--imagery { padding: 16px; gap: 12px; background: var(--color-canvas); }
.soc-dna-imgs {
  flex: 1; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px;
}
.soc-dna-imgs__cell {
  position: relative; overflow: hidden; border-radius: 10px;
  background-color: var(--color-surface);
  background-size: cover; background-position: center;
}
.soc-dna-imgs__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Slide · real brand-book page (landscape PDF export) — show the whole page */
.soc-dna-slide--page { align-items: center; justify-content: center; background: var(--color-surface); }
.soc-dna-slide--page img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Dots */
.soc-dna-slider__dots { display: flex; justify-content: center; gap: 7px; }
.soc-dna-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--color-divider); cursor: pointer;
  transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.soc-dna-dot.is-active { width: 20px; border-radius: 4px; background: var(--color-brand); }

/* ── Subscribe — pitch column + Ultra tier accent ── */
.soc-subscribe__pitch { min-width: 0; }
.soc-tier--ultra {
  border-color: rgba(236, 72, 153, .40);
  background: linear-gradient(135deg, #fff, rgba(236, 72, 153, .05));
}
.soc-tier--ultra:hover { border-color: #EC4899; }
.soc-tier__badge--ultra {
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  display: inline-flex; align-items: center; gap: 4px;
}
.soc-tier__badge--ultra svg { width: 10px; height: 10px; }

@media (max-width: 900px) {
  .soc-studio__types { grid-template-columns: 1fr; }
}

/* ── Link preview (in SMS config modal) ── */
.dr-link-preview {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dr-link-preview__url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dr-link-preview__icon { font-size: var(--font-size-base); }
.dr-link-preview__url code {
  font-size: var(--font-size-xs);
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  background: var(--color-canvas);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.dr-link-preview__token {
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
}
.dr-link-preview__badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-brand-light);
  color: var(--color-brand);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.dr-link-preview__help {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.55;
  color: var(--color-muted);
}
.dr-link-preview__help strong { color: var(--color-ink); font-weight: var(--font-weight-bold); }

/* ── Wide modal variant (All responses, Campaign builder, etc.) ── */
.chk-modal.chk-modal--wide { max-width: 720px; }
/* Extra-wide variant for the All responses modal so the 4-col review
   cards have room to breathe. Overrides --wide via higher specificity. */
.chk-modal.chk-modal--xwide { max-width: 1080px; }

/* ── All-responses modal ── */
.dr-all-modal__count {
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
}
.dr-all-modal__body {
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dr-all-modal__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dr-all-modal__shown {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}
.dr-all-modal__shown strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}
.dr-all-modal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 4px;
}
.dr-all-modal__list::-webkit-scrollbar { width: 8px; }
.dr-all-modal__list::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }

.dr-all-modal__empty {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  padding: var(--space-6);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-md);
}

/* ── Pagination ── */
.dr-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
}
.dr-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--color-divider);
  background: var(--color-canvas);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.5;
  transition: border-color .12s, color .12s;
}
.dr-pagination__nav:hover:not(:disabled) { border-color: var(--color-ink-soft); }
.dr-pagination__nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.dr-pagination__pages {
  display: flex;
  gap: 4px;
  align-items: center;
}
.dr-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--color-divider);
  background: var(--color-canvas);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dr-pagination__page:hover { background: var(--color-surface); color: var(--color-ink); }
.dr-pagination__page.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-canvas);
}
.dr-pagination__ellipsis {
  width: 24px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-weight: var(--font-weight-bold);
}

/* ── Reply composer modal — original review quote ── */
.dr-reply__quote {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
  font-style: italic;
  padding: 12px 14px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-divider);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Flow explainer (Go Check-in → Reviews modal) ── */
.dr-flow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dr-flow__step {
  display: flex;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  align-items: flex-start;
}
.dr-flow__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink-soft);
  margin-top: 2px;
}
.dr-flow__step-body { flex: 1; min-width: 0; }
.dr-flow__step-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  line-height: 1.4;
}
.dr-flow__step-desc {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 4px 0 0;
}
.dr-flow__step-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.dr-flow__step-list li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.dr-flow__step-list strong { color: var(--color-ink); font-weight: var(--font-weight-bold); }
.dr-flow__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 44px;
}
.dr-flow__pill--brand { background: var(--color-brand-border); color: var(--color-brand-text); }
.dr-flow__pill--warn  { background: var(--color-warning-border); color: var(--color-warning-text); }
.dr-flow__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
}
.dr-flow__connector-line {
  flex: 1;
  height: 1px;
  background: var(--color-divider);
  max-width: 80px;
}
.dr-flow__connector-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
  white-space: nowrap;
}
.dr-flow__connector-arrow {
  color: var(--color-subtle);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

/* ── Toast (success confirmation) ── */
.dr-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: 9200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-ink);
  color: var(--color-canvas);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
  max-width: calc(100vw - 32px);
}
.dr-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.dr-toast__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-success);
  color: var(--color-canvas);
  border-radius: 50%;
}
.dr-toast__icon svg { width: 12px; height: 12px; }
/* Demo-disclaimer variant: an info chip (brand violet) rather than the green
   success check, since the message is a notice, not a confirmation. */
.dr-toast--demo .dr-toast__icon { background: var(--color-brand); }
.dr-toast--demo .dr-toast__icon svg { width: 13px; height: 13px; }
.dr-toast__msg { letter-spacing: -.1px; }

/* ═══════════════════════════════════════════════════════════════
   Social Media — "Your posts" card grid + native platform previews
   (Facebook / Instagram / TikTok / Google Business). Click a card →
   openPostNative() lightboxes the post in that platform's chrome.
═══════════════════════════════════════════════════════════════ */
.soc-posts__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 14px;
}
.soc-post-card {
  display: flex; flex-direction: column;
  background: var(--color-canvas);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .12s;
}
.soc-post-card:hover  { border-color: var(--color-brand); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.soc-post-card:active { transform: translateY(0); }
.soc-post-card:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.soc-post-card__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface) center / cover no-repeat;
}
.soc-post-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-post-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-post-card__badge {
  position: absolute; top: 7px; left: 7px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.soc-post-card__badge svg { width: 13px; height: 13px; }
.soc-post-card--facebook  .soc-post-card__badge { color: #1877F2; }
.soc-post-card--instagram .soc-post-card__badge { color: #E4405F; }
.soc-post-card--tiktok    .soc-post-card__badge { color: #111827; }
.soc-post-card--google    .soc-post-card__badge { color: #1A73E8; }
.soc-post-card--youtube   .soc-post-card__badge { color: #FF0000; }
.soc-post-card__top {
  position: absolute; top: 7px; right: 7px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(17,24,39,.82); color: #fff;
  font-size: 9px; font-weight: var(--font-weight-bold);
}
.soc-post-card__top svg { width: 10px; height: 10px; }
.soc-post-card__body { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 4px; }
.soc-post-card__platform {
  align-self: flex-start;
  font-size: 9px; font-weight: var(--font-weight-extrabold);
  text-transform: uppercase; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 999px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.soc-post-card--facebook  .soc-post-card__platform { background: #E7F0FF; color: #1877F2; }
.soc-post-card--instagram .soc-post-card__platform { background: #FFE3EC; color: #E4405F; }
.soc-post-card--tiktok    .soc-post-card__platform { background: #ECECEC; color: #111827; }
.soc-post-card--google    .soc-post-card__platform { background: #E8F0FE; color: #1A73E8; }
.soc-post-card--youtube   .soc-post-card__platform { background: #FFE5E5; color: #FF0000; }
.soc-post-card__caption {
  margin: 0; font-size: 11px; line-height: 1.35; color: var(--color-ink);
  min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.soc-post-card__meta { font-size: 9.5px; color: var(--color-muted); }

/* ── Inline "Your posts" tab viewer ──
   Platform tabs + a centered native preview (default: YouTube Shorts). The
   detail post lives in the middle of the card so the two-column row stays
   balanced; tapping the stage expands it to the full-screen lightbox. */
.soc-posts__viewer {
  flex: 1;
  display: flex; flex-direction: column;
  /* Center the tabs + frame + hint as a group so the preview sits in the
     vertical middle of the section (the card is stretched to match the
     "What's included" column, so there'd otherwise be empty space below). */
  justify-content: center;
  gap: 12px;
  min-height: 0;
}
.soc-posts__tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px;
}
.soc-ptab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-canvas);
  cursor: pointer;
  font-size: 12px; font-weight: var(--font-weight-bold);
  color: var(--color-ink-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.soc-ptab:hover { border-color: var(--color-ink-soft); color: var(--color-ink); }
.soc-ptab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.soc-ptab__ic { display: grid; place-items: center; }
.soc-ptab__ic svg { width: 14px; height: 14px; }
.soc-ptab.is-active { color: #fff; border-color: transparent; }
.soc-ptab--facebook.is-active  { background: #1877F2; }
.soc-ptab--instagram.is-active { background: #E4405F; }
.soc-ptab--tiktok.is-active    { background: #111827; }
.soc-ptab--google.is-active    { background: #1A73E8; }
.soc-ptab--youtube.is-active   { background: #FF0000; }

.soc-posts__stage {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  /* FIXED height so switching tabs never resizes the card. The floor (504px)
     clears the tallest preview (Facebook ≈ 497px) so nothing is ever cut, even
     on short viewports; previews center within it. Tune this to resize. */
  height: clamp(504px, 56vh, 524px);
  overflow: hidden;
  cursor: pointer;
}
.soc-posts__stage > * { flex: 0 0 auto; max-height: 100%; }
.soc-posts__stage:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 16px; }
/* Vertical (9:16) previews fill the fixed height; width follows the ratio. */
.soc-posts__stage .ttpost,
.soc-posts__stage .ytpost {
  width: auto;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
/* Feed previews (FB / IG / Google) — fixed width + lighter frame. */
.soc-posts__stage .fbpost,
.soc-posts__stage .igpost,
.soc-posts__stage .gpost {
  width: min(360px, 100%);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
/* Unify the media height and clamp the caption to 3 lines so all three feed
   previews land at ~the same height (and fit the fixed stage). */
.soc-posts__stage .fbpost__media img,
.soc-posts__stage .igpost__media img { height: 200px; object-fit: cover; }
.soc-posts__stage .igpost__media { aspect-ratio: auto; }
/* Google = photo collage only (no text/CTA), so let it grow to fill the stage:
   wider card + taller gallery so it doesn't read as a small narrow block. */
.soc-posts__stage .gpost { width: min(440px, 100%); }
.soc-posts__stage .gpost__gallery { height: 440px; }
.soc-posts__stage .fbpost__text p,
.soc-posts__stage .gpost__text p,
.soc-posts__stage .igpost__caption {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Instagram-only trims — drop the timestamp + composer footer. Because that
   leaves the lone comment as the last element (its own padding is just 1px),
   give the card a 12px bottom gutter so it doesn't sit flush on the edge —
   matching Facebook's bottom spacing. */
.soc-posts__stage .igpost__time,
.soc-posts__stage .igpost__compose { display: none; }
.soc-posts__stage .igpost { padding-bottom: 12px; }
.soc-posts__stage .igpost__cmt { padding-top: 3px; }
/* One sample comment on the feed previews (hide the comment after a comment). */
.soc-posts__stage .fbpost__cmt + .fbpost__cmt,
.soc-posts__stage .igpost__cmt + .igpost__cmt { display: none; }
.soc-posts__hint {
  margin: 0; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; color: var(--color-muted);
}
.soc-posts__hint svg { width: 12px; height: 12px; }

/* ── Native lightbox shell ── */
.soc-native-overlay { display: flex; align-items: center; justify-content: center; padding: 20px; }
/* White popup shell: a titled bar (platform + close) on top, the native post
   scrolls beneath. The X lives at the bar's top-right corner — always on-screen
   and right next to the post, no matter how tall the post is. */
.soc-native {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(15,23,42,.34);
  animation: socNativeIn .2s cubic-bezier(.16,1,.3,1);
}
@keyframes socNativeIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.soc-native__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px 11px 16px;
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
}
.soc-native__bar-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--font-weight-bold); color: var(--color-ink); }
.soc-native__bar-ic { display: grid; place-items: center; }
.soc-native__bar-ic svg { width: 18px; height: 18px; }
.soc-native--facebook  .soc-native__bar-ic { color: #1877F2; }
.soc-native--instagram .soc-native__bar-ic { color: #E4405F; }
.soc-native--tiktok    .soc-native__bar-ic { color: #111827; }
.soc-native--google    .soc-native__bar-ic { color: #1A73E8; }
.soc-native--youtube   .soc-native__bar-ic { color: #FF0000; }
.soc-native__close {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--color-ink-soft);
  border: 1px solid var(--color-divider); cursor: pointer;
  transition: background .15s, color .15s;
}
.soc-native__close:hover { background: var(--color-surface); color: var(--color-ink); }
.soc-native__close svg { width: 16px; height: 16px; }
/* flex:1 + min-height:0 lets this shrink below its content so overflow-y
   actually engages — without min-height:0 a flex child won't scroll. */
.soc-native__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* FB / IG / Google are already white cards → fill the shell edge-to-edge and
   drop their own frame so it isn't a card-inside-a-card. */
.soc-native__scroll .fbpost,
.soc-native__scroll .igpost,
.soc-native__scroll .gpost { border-radius: 0; border: none; box-shadow: none; }
/* Google photo grid in the expanded lightbox — give EACH tile a square ratio
   (relying on the container's aspect-ratio leaves the 1fr rows indefinite, so
   portrait images render at their own ratio → mismatched tiles). */
.soc-native__scroll .gpost__gallery { height: auto; }
.soc-native__scroll .gpost__gallery img { height: auto; aspect-ratio: 1 / 1; max-height: none; }
/* TikTok / YouTube are dark vertical cards → frame them on a soft canvas.
   Padding only (no flex) so the block-level card fills the width and its
   9/16 aspect-ratio drives the height — a row-flex would collapse it to 0. */
.soc-native--tiktok .soc-native__scroll,
.soc-native--youtube .soc-native__scroll {
  padding: 16px; background: var(--color-surface);
}

/* ── Facebook ── */
.fbpost {
  background: #fff; border-radius: 12px; overflow: hidden;
  font-family: 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 16px 48px rgba(0,0,0,.32);
}
.fbpost__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.fbpost__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 20px; background: #E7F0FF; color: #1877F2; }
.fbpost__id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fbpost__name { font-weight: 700; font-size: 14px; color: #050505; }
.fbpost__meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #65676B; }
.fbpost__globe { width: 12px; height: 12px; }
.fbpost__more { color: #65676B; }
.fbpost__more svg { width: 20px; height: 20px; }
.fbpost__text { padding: 0 12px 10px; font-size: 15px; line-height: 1.4; color: #050505; }
.fbpost__text p { margin: 0; }
.fbpost__tags { color: #1877F2; margin-top: 6px !important; }
.fbpost__media { background: #000; }
.fbpost__media img { width: 100%; display: block; max-height: 460px; object-fit: cover; }
.fbpost__count { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 13px; color: #65676B; }
.fbpost__reacts { display: inline-flex; align-items: center; }
.fbpost__react { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; line-height: 1; box-shadow: 0 0 0 1.5px #fff; }
.fbpost__react--like { background: #1877F2; z-index: 1; }
.fbpost__react--love { background: #fff; margin-left: -5px; }
.fbpost__react-n { margin-left: 5px; }
.fbpost__bar { display: flex; border-top: 1px solid #E4E6EB; }
.fbpost__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #65676B; }
.fbpost__btn:hover { background: #F2F2F2; }
.fbpost__btn svg { width: 18px; height: 18px; }

/* ── Instagram ── */
.igpost {
  background: #fff; border-radius: 12px; overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow: 0 16px 48px rgba(0,0,0,.32); border: 1px solid #DBDBDB;
}
.igpost__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.igpost__avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; padding: 2px; background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF); }
.igpost__avatar span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: #fff; }
.igpost__user { flex: 1; font-weight: 600; font-size: 14px; color: #262626; }
.igpost__more svg { width: 18px; height: 18px; color: #262626; }
.igpost__media { background: #000; aspect-ratio: 1 / 1; }
.igpost__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igpost__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; }
.igpost__acts { display: inline-flex; gap: 14px; }
.igpost__acts svg, .igpost__save svg { width: 24px; height: 24px; color: #262626; }
.igpost__likes { padding: 2px 12px; font-weight: 600; font-size: 14px; color: #262626; }
.igpost__caption { padding: 2px 12px; font-size: 14px; line-height: 1.4; color: #262626; margin: 0; }
.igpost__caption strong { font-weight: 600; margin-right: 4px; }
.igpost__tags { padding: 2px 12px; font-size: 14px; color: #00376B; margin: 0; }
.igpost__comments { padding: 4px 12px; font-size: 14px; color: #8E8E8E; }
.igpost__time { padding: 2px 12px 12px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #8E8E8E; }

/* ── TikTok ── */
.soc-native--tiktok { max-width: 340px; }
.ttpost {
  position: relative; background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 9 / 16; max-height: calc(100vh - 80px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ttpost__media { position: absolute; inset: 0; }
.ttpost__media img, .ttpost__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttpost__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 36%, transparent 72%, rgba(0,0,0,.28) 100%); }
.ttpost__rail { position: absolute; right: 10px; bottom: 88px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ttpost__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: #fff; border: 2px solid #fff; margin-bottom: 2px; }
.ttpost__act { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: #fff; font-size: 12px; font-weight: 600; }
.ttpost__act svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.ttpost__act em { font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.ttpost__overlay { position: absolute; left: 0; right: 56px; bottom: 0; z-index: 2; padding: 16px; color: #fff; }
.ttpost__user { font-weight: 700; font-size: 15px; margin-bottom: 6px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ttpost__caption { font-size: 13px; line-height: 1.45; margin: 0 0 8px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ttpost__tags { font-weight: 600; }
.ttpost__music { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ttpost__music svg { width: 13px; height: 13px; }

/* ── YouTube Shorts ── */
.soc-native--youtube { max-width: 340px; }
.ytpost {
  position: relative; background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 9 / 16; max-height: calc(100vh - 80px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ytpost__media { position: absolute; inset: 0; }
.ytpost__media img, .ytpost__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytpost__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 34%, transparent 78%, rgba(0,0,0,.32) 100%); }
.ytpost__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.ytpost__badge svg { width: 18px; height: 18px; color: #FF0000; }
.ytpost__rail { position: absolute; right: 10px; bottom: 96px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.ytpost__act { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: #fff; font-size: 11px; font-weight: 600; }
.ytpost__act svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.ytpost__act em { font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.ytpost__act--dislike svg { transform: rotate(180deg); }
.ytpost__overlay { position: absolute; left: 0; right: 56px; bottom: 0; z-index: 2; padding: 16px; color: #fff; }
.ytpost__chan { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ytpost__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: #fff; color: #FF0000; flex-shrink: 0; }
.ytpost__handle { font-weight: 700; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ytpost__sub { margin-left: 4px; padding: 6px 14px; border-radius: 999px; border: none; cursor: pointer; background: #FF0000; color: #fff; font-size: 12px; font-weight: 700; }
.ytpost__caption { font-size: 13px; line-height: 1.45; margin: 0 0 8px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ytpost__tags { font-weight: 600; }
.ytpost__audio { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); font-size: 12px; }
.ytpost__audio span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ytpost__audio svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Google Business ── */
.gpost {
  background: #fff; border-radius: 12px; overflow: hidden;
  font-family: 'Roboto', system-ui, 'Segoe UI', sans-serif;
  box-shadow: 0 16px 48px rgba(0,0,0,.32); border: 1px solid #DADCE0;
}
.gpost__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.gpost__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 20px; background: #E8F0FE; color: #1A73E8; }
.gpost__id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gpost__name { font-weight: 500; font-size: 15px; color: #202124; }
.gpost__meta { font-size: 12px; color: #5F6368; }
.gpost__more { color: #5F6368; align-self: flex-start; }
.gpost__more svg { width: 20px; height: 20px; }
.gpost__media { background: #000; }
.gpost__media img { width: 100%; display: block; max-height: 380px; object-fit: cover; }

/* Google Business "Photos" grid — 2×2 of 4 equal tiles. */
.gpost__gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 300px; }
.gpost__gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpost__text { padding: 14px 16px 4px; font-size: 14px; line-height: 1.5; color: #3C4043; }
.gpost__text p { margin: 0; }
.gpost__cta { display: inline-block; margin: 8px 16px 14px; color: #1A73E8; font-size: 14px; font-weight: 500; text-decoration: none; }
.gpost__cta:hover { text-decoration: underline; }
.gpost__foot { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-top: 1px solid #E8EAED; font-size: 12px; color: #5F6368; }
.gpost__foot svg { width: 14px; height: 14px; }
.gpost__actions { display: flex; gap: 6px; padding: 2px 16px 14px; }
.gpost__act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 0; background: #fff; border: 1px solid #DADCE0; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: #1A73E8; }
.gpost__act:hover { background: #F8FBFF; }
.gpost__act svg { width: 15px; height: 15px; flex-shrink: 0; }

/* One business logo — identical "B" monogram on EVERY platform avatar
   (like a real uploaded logo). White serif B on the brand gradient. */
.fbpost__avatar,
.ttpost__avatar,
.ytpost__avatar,
.gpost__avatar,
.soc-post-preview__avatar,
.igpost__avatar span {
  background: linear-gradient(135deg, #1D6FFF 0%, #9333EA 100%) !important;
  color: #fff !important;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  letter-spacing: .5px;
}
/* B sized a touch smaller than the avatar so it reads as a logo, not fill */
.fbpost__avatar          { font-size: 17px; }
.ttpost__avatar          { font-size: 18px; }
.ytpost__avatar          { font-size: 13px; }
.gpost__avatar           { font-size: 17px; }
.soc-post-preview__avatar { font-size: 18px; }
.igpost__avatar span     { font-size: 13px; }

/* Facebook comments + composer */
.fbpost__cmts { padding: 8px 12px 12px; border-top: 1px solid #E4E6EB; display: flex; flex-direction: column; gap: 8px; }
.fbpost__cmt { display: flex; gap: 8px; align-items: flex-start; }
.fbpost__cmt-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #E4E6EB; color: #65676B; }
.fbpost__cmt-bubble { background: #F0F2F5; border-radius: 14px; padding: 7px 11px; font-size: 13px; line-height: 1.35; color: #050505; }
.fbpost__cmt-bubble strong { display: block; font-weight: 600; }
.fbpost__compose { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fbpost__compose-input { flex: 1; background: #F0F2F5; border-radius: 999px; padding: 7px 12px; font-size: 13px; color: #65676B; }
.fbpost__compose svg { width: 18px; height: 18px; color: #1877F2; flex-shrink: 0; }

/* Instagram comments + composer */
.igpost__cmt { padding: 1px 12px; margin: 0; font-size: 14px; line-height: 1.4; color: #262626; }
.igpost__cmt strong { font-weight: 600; margin-right: 4px; }
.igpost__compose { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 4px; border-top: 1px solid #EFEFEF; }
.igpost__compose-av { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; background: #FAFAFA; }
.igpost__compose-input { flex: 1; font-size: 14px; color: #8E8E8E; }
.igpost__compose-emoji { margin-left: auto; font-size: 14px; flex-shrink: 0; }

/* Posts grid sits beside "How it works" in a 50/50 row — ALWAYS 3 columns so
   the 5 cards read as a tidy 3 + 2 (even on wide screens). Cards keep their
   square thumb (no vertical stretch → no "kéo dài"); extra height is absorbed
   by spacing the two rows apart so the section stays level with How it works. */
.soc-row-posts-howto .soc-posts__grid {
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: space-between;
}

@media (max-width: 600px) {
  .soc-posts__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .soc-native { max-width: 100%; }
  .soc-native--tiktok,
  .soc-native--youtube { max-width: 300px; }
  /* Inline viewer on phones: the row stacks to one column, so there's no
     neighbour to balance against — let the stage size to its content (no fixed
     height, no clip). Feed posts show in full; give the vertical video a
     definite height so it still renders at a phone-sized 9:16. */
  .soc-posts__stage { height: auto; overflow: visible; }
  .soc-posts__stage .ttpost,
  .soc-posts__stage .ytpost { height: min(116vw, 480px); }
}

/* ════════════════════════════════════════════
   DASHBOARD — MOBILE TILE GRID + RESPONSIVE
════════════════════════════════════════════ */
/* Tile-grid landing — rendered when activeNav is null (mobile default).
   2-col grid of module tiles; tapping a tile pushes /dashboard/{id} and
   re-inits the dashboard with the back arrow visible. Desktop never
   shows this view because activeNav defaults to 'checkin' there. */
.dash-tiles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 12px;
}
.dash-tiles__head { padding: 0 4px; }
.dash-tiles__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  letter-spacing: -.2px;
}
.dash-tiles__sub {
  margin: 4px 0 0;
  font-size: var(--font-size-base);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
}
.dash-tile-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* Each <li> fills its grid cell (stretched to the row height) and lays out as
   a flex column so the .dash-tile button stretches to match — keeps every card
   in a row the same height even when descriptions wrap to different line counts. */
.dash-tile-grid > li { display: flex; }
.dash-tile {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 14px;
  min-height: 130px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .12s;
}
.dash-tile:hover { border-color: var(--color-brand); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.dash-tile:active { transform: translateY(0); }
.dash-tile__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-radius: var(--radius-md);
}
.dash-tile__icon svg { width: 22px; height: 22px; }
.dash-tile__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.2;
}
.dash-tile__desc {
  font-size: 12px;
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
}
.dash-tile__hint {
  position: absolute; top: 10px; right: 10px;
  padding: 2px 7px;
  background: var(--color-warning-light);
  color: var(--color-warning-text);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-pill);
  letter-spacing: .02em;
}

/* ── Tablet + mobile (≤900px) ──
   Drop the fixed app-shell pattern: dashboard scrolls naturally, sidebar
   hides (tile grid handles nav), topbar stays sticky, FAB stays floating. */
@media (max-width: 900px) {
  /* Body bg keeps the aurora wash — we let it show full-bleed now. */
  body:has(.dashboard) { overflow: auto; }

  /* Mobile scroll-lock: here <body> is the scroller, so freeze it directly
     (instead of .dash-main) while a modal overlay is open. */
  body:has(.dashboard):has(.sub-overlay),
  body:has(.dashboard):has(.chk-modal-overlay:not([hidden])) { overflow: hidden; }

  .dashboard {
    grid-template-columns: 1fr;
    margin: 0;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Sidebar entirely hidden on mobile — the tile grid is the nav. */
  .dash-sidebar { display: none; }

  .dash-main {
    height: auto;
    overflow-y: visible;
    padding: 12px 14px 40px;  /* extra bottom space so FAB doesn't cover content */
  }

  .dash-topbar {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .dash-topbar__eyebrow { display: none; }
  .dash-topbar__title { font-size: var(--font-size-base); }
  /* Topbar Subscribe CTA — sidebar is hidden on mobile so this is the
     only persistent path to upgrade. Compact version — keeps the .btn-md
     border-radius (8px) per styleguide; just shrinks padding/min-height
     to fit the topbar. The landing-wide `btn-md { min-height: 48px }`
     rule is overridden here so it doesn't enlarge the topbar. */
  .dash-topbar #topbar-upgrade {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: var(--font-weight-extrabold);
    gap: 4px;
  }
  .dash-topbar #topbar-upgrade svg { margin-right: 3px !important; width: 12px; height: 12px; }

  /* Disable the flex-fit chain on mobile — pages scroll vertically instead
     of squeezing into the viewport. Drop the 16px top gap so the page
     content sits flush under the topbar. */
  .dash-view { display: block; padding-top: 0; }
  .chk-page--fit { min-height: auto; flex: none; }

  /* Back arrow always shown on mobile. JS routes the click by depth:
     sub-view → tile grid, tile grid → landing. Sidebar is hidden on mobile
     so this is the only escape hatch out of a chapter (or out of dashboard). */
  .dash-topbar__back { display: grid; }

  /* Stack all 2-column sub-view grids into a single vertical column. */
  .dr-main { grid-template-columns: 1fr !important; }
  .dr-row-2 { grid-template-columns: 1fr !important; }
  /* Reviews-only highlight zone: keep the dark spotlight on mobile but
     tighten padding/radius so the wrapper doesn't waste horizontal space.
     Scoped to .dr-page so Social Media's plain .dr-row-2 isn't touched. */
  .dr-page .dr-row-2 {
    padding: 16px 14px;
    border-radius: 18px;
    gap: 12px;
    flex: none;
    box-shadow:
      0 16px 40px -20px rgba(124, 58, 237, .3),
      0 4px 16px -8px rgba(0, 0, 0, .3);
  }
  /* Disable the gradient inner border-glow on mobile — at small radius it
     can render as a thin aliased halo; the outer shadow alone is enough. */
  .dr-page .dr-row-2::before { display: none; }
  .dr-page { flex: none; }
  .dr-side { overflow-y: visible; height: auto; }
  /* Go Check-in Ratings — stack donut above legend on mobile. Donut stays
     centered; legend stretches full width so each row's count sits flush
     to the right edge (margin-left: auto pushes it). */
  .dr-ci-ratings__body { grid-template-columns: 1fr; }
  .dr-ci-ratings__chart { justify-self: center; }
  .dr-ci-ratings__legend { width: 100%; }

  /* Review cards collapse on mobile: 36px avatar | profile | 28px more
     in row 1, rating block spans full width in row 2. Contact list is
     hidden — phone/email/last-visit accessible via 3-dot → View detail. */
  .dr-review {
    grid-template-columns: 36px 1fr 28px;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 12px 14px;
    align-items: center;
  }
  .dr-review__avatar {
    width: 36px; height: 36px;
    font-size: var(--font-size-sm);
    align-self: center;
  }
  /* Explicit placement — without it the rating block (spanning all 3
     cols) pushes the more-wrap into row 3 col 1 (bottom-left). Pin the
     more-wrap to row 1 col 3 (top-right) and the rating block to row 2. */
  .dr-review__profile { grid-column: 2; grid-row: 1; }
  .dr-review__more-wrap { grid-column: 3; grid-row: 1; align-self: start; }
  .dr-review__rating-block { grid-column: 1 / -1; grid-row: 2; }
  .dr-review__contact { display: none; }
  /* Name row keeps name + source mark + tier on one line at small widths */
  .dr-review__name-row { gap: 6px; }
  .dr-review__name { font-size: var(--font-size-sm); }
  /* KPI strip on mobile: 2 per row instead of 4. Tightened down to feel
     like a compact stat strip rather than 4 stretched cards — smaller
     padding, smaller cards, hint hidden, icon shrunk so 2 cards fit
     horizontally without overflow on 360px viewports. */
  .seo-kpis.dr-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    margin-bottom: 6px;
  }
  .seo-kpis.dr-kpis .seo-kpi {
    padding: 10px 12px;
    gap: 4px;
    border-radius: 12px;
    column-gap: 8px;
  }
  .seo-kpis.dr-kpis .seo-kpi__num    { font-size: 20px; line-height: 1.1; }
  .seo-kpis.dr-kpis .seo-kpi__icon   { width: 28px; height: 28px; border-radius: 8px; }
  .seo-kpis.dr-kpis .seo-kpi__icon svg { width: 14px; height: 14px; }
  .seo-kpis.dr-kpis .seo-kpi__label  { font-size: 11px; line-height: 1.25; }
  .seo-kpis.dr-kpis .seo-kpi__delta-badge { font-size: 9.5px; padding: 2px 6px; }
  /* Hint is supplementary on mobile — drop it to gain a line of height
     and keep the strip from dominating above-the-fold space. */
  .seo-kpis.dr-kpis .seo-kpi__hint   { display: none; }
  /* Smaller inner glow blob — proportional to the smaller card. */
  .seo-kpis.dr-kpis .seo-kpi::before {
    width: 100px; height: 100px;
    top: -36px; right: -36px;
    filter: blur(20px);
  }

  /* GCI: stack the 3-col chk-main-grid (left customize + center stage +
     right prompts) into one column. Kiosk demo first (the main attraction),
     prompts second; the customize panel moves into a bottom sheet (see below)
     so it's hidden from the inline flow. */
  .chk-main-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .chk-stage { order: 1; padding: 14px; }
  .chk-right { order: 2; }
  .chk-right > .chk-card { padding: 14px; }

  /* Swap the two right-column cards on mobile: Recent check-ins goes
     above AI promotion requests. After a check-in completes the kiosk
     plays a "new row slides in" animation on the feed — putting the
     feed right under the kiosk preview means that animation is in
     view, not buried below the prompts card. */
  .chk-right .chk-feed    { order: 1; }
  .chk-right .chk-prompts { order: 2; }

  /* Stage head stays as a single row on mobile: title on the left + the
     compact Theme button on the right. Device toggle + Full View are
     hidden, so the actions slot has just one button — no need to wrap
     to a second row. */
  .chk-stage__head    { gap: 10px; }
  .chk-stage__actions { gap: 8px; }
  .chk-fullview       { display: none; }  /* Always-full on mobile; toggle moot. */
  .chk-theme-btn      { display: inline-flex; }
  /* Use double-class selector to beat the landing-wide
     `.btn-md, .btn-lg, .btn-xl { min-height: 48px }` rule that lives
     inside @media (max-width: 768px). Same single-class specificity
     would lose to it on source order. */
  .chk-theme-btn.btn-md {
    height: 40px;
    min-height: 40px;
    padding: 0 14px;
  }
  .chk-customize-sheet-head { display: flex; }
  .chk-customize-backdrop   { display: block; }

  /* Hide topbar contextual tag on mobile — the title is already truncated
     and the tag wraps awkwardly under the back arrow. */
  .dash-topbar__tag { display: none !important; }

  /* ── Customize bottom sheet (mobile only) ──
     The Customize panel (chk-left) drops out of the inline grid and becomes
     a fixed sheet at the bottom of the viewport, off-screen by default.
     Tapping "Theme" in the stage actions slides it up to 70vh — leaving the
     kiosk preview visible in the top 30vh so changes update live behind. */
  .chk-left {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 70vh;
    z-index: 70;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    background: var(--color-canvas);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(15, 23, 42, .22);
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 0;
  }
  .chk-page.is-customize-open .chk-left {
    transform: translateY(0);
  }
  /* Inner customize card fills the sheet and scrolls internally. Drop the
     card chrome (border/radius) since the sheet itself is the visual frame. */
  .chk-left > .chk-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 24px;
  }
  .chk-customize-sheet-head {
    position: relative;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 14px 12px 6px;
    flex-shrink: 0;
  }
  .chk-customize-sheet-handle {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--color-divider);
  }
  .chk-customize-close {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: 50%;
    color: var(--color-ink-soft);
    cursor: pointer;
  }
  .chk-customize-close:hover { background: var(--color-surface); color: var(--color-ink); }

  /* Backdrop — fades in when sheet is open. Catches taps to close. */
  .chk-customize-backdrop {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .chk-page.is-customize-open .chk-customize-backdrop {
    opacity: 1; pointer-events: auto;
  }
  /* Lock body scroll while sheet is open so the kiosk preview behind stays
     pinned in the visible 30vh. */
  body:has(.chk-page.is-customize-open) { overflow: hidden; }

  /* Hide the kiosk's virtual keyboard in portrait on real phones — the
     user already has their native keyboard, and the fake one is just
     visual clutter taking up the bottom 300px of the preview. Desktop
     preview-of-mobile still shows it so the demo flow stays clickable. */
  .kiosk-inner.is-portrait .kiosk-keyboard { display: none; }

  /* Wider + shorter portrait frame on phones — 280px × 9:18 ≈ 560px tall.
     The previous 220px frame at 9:19.5 made the kiosk text unreadable
     (scale ratio 220/480 ≈ 0.46). At 280px the scale jumps to ~0.58,
     so headings, buttons, and labels are legible. The shorter 9:18
     aspect (vs 9:19.5) keeps overall height in check so the AI
     promotion requests card still peeks at the bottom of the viewport.
     The aspect mismatch with the kiosk's 480×1040 design only clips the
     bottom ~46px under cover scaling — that's the footer region, which
     `.kiosk-inner.is-portrait .kiosk-footer { display: none }` already
     hides, so no visible content is lost. */
  .chk-device--portrait .chk-device__frame {
    max-width: 280px;
    aspect-ratio: 9 / 18;
  }
  /* Drop the Dynamic Island + selfie/Face-ID dots on the mobile portrait
     preview — at this scale they sit on top of the kiosk's top text
     ("To checkin", "PLEASE ENTER YOUR PHONE NUMBER") and clip it. The
     desktop preview is unaffected. */
  .chk-device--portrait .chk-device__notch { display: none; }
  /* Push the kiosk's top text down so it doesn't sit flush against the
     bezel where the island used to be. 48 → 80 in the 480-wide canvas =
     ~47px visual at 0.58 scale (vs ~28px before). */
  .kiosk-inner.is-portrait .kiosk-content { padding-top: 80px; }

  /* Back / Close buttons sit at the screen's top corners but the phone
     screen has a 46px border-radius (overflow:hidden), so anything in
     the corner quadrant gets clipped by the curve. The default portrait
     positions (top:40, left|right:16) are well inside the curve at
     0.58 scale. Bump to top:90 + left|right:50 so the buttons clear
     the curved corners. */
  .kiosk-inner.is-portrait .kiosk-back,
  .kiosk-inner.is-portrait .kiosk-close { top: 90px; }
  .kiosk-inner.is-portrait .kiosk-back  { left: 50px; }
  .kiosk-inner.is-portrait .kiosk-close { right: 50px; }

  /* ── Modals → bottom sheet on mobile ──
     Centered modals feel cramped on phones; switch to a bottom-anchored
     sheet with rounded top corners and full viewport width. Long modal
     bodies stay internally scrollable via .chk-modal__body { overflow:auto }. */
  .chk-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .chk-modal,
  .chk-modal.chk-modal--wide {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }
  .chk-modal__head { padding: 18px 16px 12px; }
  .chk-modal__body { padding: 0 16px 16px; }
  /* Mobile footer with 2 buttons (outline + brand): split 40/60 with the
     brand CTA taking the larger share so it reads as the primary action
     and is easier to thumb-tap. Targets the universal "Cancel + Action"
     pattern via :has().
     `:not([hidden])` is critical — without it this rule has the same
     specificity as `.chk-modal__foot[hidden] { display: none }` (defined
     earlier in the file) and would override it, breaking the multi-view
     toggle (form / confirm / success) on the Promotion Campaign modal. */
  .chk-modal__foot:not([hidden]):has(.btn-outline + .btn-brand) {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }
  /* Single-button footers (success "Close", solo "Launch Campaign", etc.):
     button takes full width of the bar. `:only-child` matches the button
     when it's the only element child of the footer. */
  .chk-modal__foot:not([hidden]) > .btn:only-child {
    width: 100%;
  }

  /* ── Reviews mobile polish ──
     - Feed list: drop the internal scroll cap so the page scrolls naturally
       (avoid "nested scroll trap" on touch).
     - Card padding tightened to maximize content width on narrow phones.
     - Filter pills row wraps + each takes equal share for thumb tapping. */
  .dr-feed__list { max-height: none; overflow: visible; padding-right: 0; }
  /* Show only the first 2 reviews on mobile — anything more makes the page
     scroll long; users can tap "View all" for the full list in the modal. */
  .dr-feed__list .dr-review:nth-of-type(n+3) { display: none; }
  .dr-main > .chk-card,
  .dr-side > .chk-card { padding: 14px; }
  .dr-feed > .chk-card__head { flex-wrap: wrap; row-gap: 10px; }
  .dr-feed__filters { width: 100%; }
  .dr-feed__filter { flex: 1; }

  /* Review items: keep 44px avatar (touch target), tighten outer padding +
     allow name/stars + date/source rows to wrap on narrow widths. */
  .dr-review { padding: 12px 14px; gap: 12px; }
  .dr-review__row1 { flex-wrap: wrap; row-gap: 4px; }
  .dr-review__row2 { flex-wrap: wrap; row-gap: 4px; }
  .dr-review__status { margin-left: 0; }

  /* Pipeline funnel: tighten the drop-percent column so labels don't get
     squeezed on phones. */
  .dr-funnel__head { grid-template-columns: 20px 1fr auto 32px; }

  /* Generic card head wrap: allow CTA buttons + filter chips to wrap below
     the title when the row would otherwise overflow. */
  .chk-card__head { flex-wrap: wrap; row-gap: 8px; }

  /* ── Coming Soon (POS/Booking/Website) mobile ──
     Without the flex-fit chain the card collapses to its natural height
     and floats at the top — give it a min-height so it reads as a
     full-screen empty state. Shrink the title + icon to fit phones. */
  .chk-coming-soon {
    min-height: calc(100vh - 180px);
    padding: 32px 16px;
    justify-content: center;
  }
  .chk-coming-soon__icon { width: 60px; height: 60px; }
  .chk-coming-soon__icon svg { width: 28px; height: 28px; }
  .chk-coming-soon__title { font-size: var(--font-size-xl); }
  .chk-coming-soon__desc { font-size: var(--font-size-sm); }

  /* Floating agent FAB + panel — shrink + reposition for thumb reach +
     respect iOS safe area (home indicator on notched phones). */
  .dash-agent-fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 52px; height: 52px;
    box-shadow: 0 10px 24px rgba(124, 58, 237, .35);
  }
  .dash-agent {
    left: 8px; right: 8px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none;
    max-height: calc(100vh - 110px - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
  .dash-agent__head { padding: 12px 14px; }
  .dash-agent__msgs { padding: 12px 14px; }
  .dash-agent__suggestions { padding: 8px 14px; }
  .dash-agent__input { padding: 10px 12px; }
}

/* ── Small mobile (≤480px) ──
   Tighter tile grid + smaller paddings for narrow phones. */
@media (max-width: 480px) {
  .dash-tile { padding: 14px 12px; min-height: 120px; }
  .dash-tile__icon { width: 36px; height: 36px; }
  .dash-tile__icon svg { width: 20px; height: 20px; }
  .dash-tile__label { font-size: 14px; }
  .dash-tile__desc { font-size: 11px; }
}

/* ── GCI device toggle: Desktop-only overlay ──
   When the kiosk's Desktop tab is active on a ≤900px viewport, the 1280×800
   landscape frame can't fit — swap to a friendly overlay instructing the
   user to tap "Mobile" (or open on a laptop). Default hidden; the mobile
   media query reveals it when .chk-device--landscape is active. */
.chk-device__desktop-only { display: none; }
@media (max-width: 900px) {
  .chk-device--landscape .chk-device__frame { display: none; }
  .chk-device--landscape .chk-device__desktop-only {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 28px 22px;
    gap: 12px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-width: 420px;
    margin: 0 auto;
  }
}
.chk-device__desktop-only-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-radius: 50%;
}
.chk-device__desktop-only-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
}
.chk-device__desktop-only-desc {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-muted);
  line-height: 1.55;
}
.chk-device__desktop-only-desc strong { color: var(--color-brand); font-weight: var(--font-weight-extrabold); }

/* ════════════════════════════════════════════
   LANDING + MARKETING — MOBILE RESPONSIVE
════════════════════════════════════════════ */
/* Tablet + phone (≤768px). Landing/marketing pages drop side padding to
   16px, the nav links row collapses into a hamburger dropdown, and CTA
   buttons grow to a 48px touch target. Scoped separately from the
   dashboard's 900px breakpoint since marketing layouts compress sooner. */
@media (max-width: 768px) {
  /* ── Nav bar ── */
  .landing-nav { padding: 0 16px; }
  .landing-nav__inner { gap: 8px; }

  /* Hide the inline link row by default; the hamburger reveals it as a
     full-width dropdown panel anchored below the nav bar. */
  .landing-nav__links {
    display: none;
    position: absolute;
    top: var(--nav-height); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 16px;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
    font-size: var(--font-size-md);
  }
  .landing-nav.is-menu-open .landing-nav__links { display: flex; }
  .landing-nav__links .nav-link {
    display: flex; align-items: center;
    min-height: 48px;
    padding: 0 4px;
    color: var(--color-ink-soft);
    border-bottom: 1px solid var(--color-divider);
  }
  .landing-nav__links .nav-link:last-child { border-bottom: none; }
  .landing-nav__links .nav-link.is-active { color: var(--color-brand); }

  .landing-nav__hamburger { display: inline-flex; }

  /* ── Buttons → 48px touch target ──
     Stretch btn-md / btn-lg / btn-xl to 48px min-height so they feel
     thumb-friendly without restyling. btn-sm stays small (chips/pills). */
  .btn-md, .btn-lg, .btn-xl { min-height: 48px; padding-top: 0; padding-bottom: 0; }
  /* Header CTA: match the hamburger button's 44px height (not the global
     48px touch target) so the nav row stays balanced + compact. */
  .landing-nav .btn {
    min-height: 44px;
    height: 44px;
    padding-left: 14px; padding-right: 14px;
    font-size: var(--font-size-sm);
  }

  /* ── Page sections → 16px side padding ──
     The marketing sections (hero, pricing, industries, footer) author at
     24-32px sides on desktop; trim to 16px on phones for max content width. */
  .hero,
  .pc-section,
  .ind-section,
  .landing-section,
  .footer-main,
  .footer-bar { padding-left: 16px; padding-right: 16px; }

  /* ── Pricing page: horizontal scroll → vertical stack on mobile ──
     The desktop layout is a 4-card horizontal slider (.pc-grid--scroll has
     overflow-x: auto, which the CSS spec then forces overflow-y to auto on,
     trapping vertical page scroll on phones). On mobile we drop the slider
     entirely: cards stack in one column and the page scrolls naturally. */
  .pc-grid--scroll {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    overflow-x: visible;
    padding: 0;
    margin: 0;
    scroll-snap-type: none;
    cursor: auto;
    gap: 14px;
  }
  .pc-arrow { display: none; }
  .pc-scroll::before,
  .pc-scroll::after { display: none; }
  .pricing-wrap { padding: 24px 16px 48px; }
  .pricing-header { padding-left: 16px; padding-right: 16px; }
}

/* ════════════════════════════════════════════
   WEBSITE + SEO chapter (dashboard sub-view)
   Lives inside .chk-page like other tabs. KPI tile
   row + SERP preview as the demo "device", then
   templates / keywords / recs / 30-day plan cards.
════════════════════════════════════════════ */

/* No extra wrapper styles — .chk-page (gap, flex column) does the layout.
   Reveal base — sections start translated + faded; .is-in releases them. */
.seo-page [data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.0,.0,1), transform .6s cubic-bezier(.2,.0,.0,1);
  will-change: transform, opacity;
}
.seo-page [data-anim].is-in { opacity: 1; transform: translateY(0); }

/* Panels: each tab's container fills the same column flow as .chk-page */
.seo-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.seo-panel[hidden] { display: none; }

/* ════════════════════════════
   Tabs nav — segmented pill
════════════════════════════ */
.seo-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.seo-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seo-tabs__btn:hover { color: var(--color-ink); }
.seo-tabs__btn.is-active {
  background: #fff;
  color: var(--color-brand);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.seo-tabs__btn svg { flex-shrink: 0; }

/* ════════════════════════════
   Row 1 — KPI tile row
   Section background: vibrant aurora gradient (visible pink + violet + sky).
   Each card: glass card with internal accent-colored aurora blob.
════════════════════════════ */
.seo-kpis {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 14px;
  padding: 22px;
  border-radius: 22px;
  /* Saturated aurora background — pink → violet → sky, visible through cards */
  background:
    radial-gradient(circle at 15% 30%,  rgba(244, 114, 182, .55), transparent 45%),
    radial-gradient(circle at 65% 80%,  rgba(167, 139, 250, .55), transparent 50%),
    radial-gradient(circle at 90% 20%,  rgba(125, 211, 252, .45), transparent 45%),
    linear-gradient(135deg, #FFE7F1 0%, #ECE5FF 50%, #E0F2FE 100%);
  overflow: hidden;
}

/* Per-KPI card — glass-morphic over the aurora background. Each card has
   its own subtle accent-colored radial glow in the top-right corner,
   driven by --kpi-aurora (set per color variant). */
.seo-kpi {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 100%);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  box-shadow:
    0 4px 18px rgba(124, 58, 237, .08),
    0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* Non-score KPIs: icon sits on the right column, text stacks on the left.
   Shortens the card height vs. icon-on-top vertical stack. */
.seo-kpi:not(.seo-kpi--score) {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: start;
}
.seo-kpi:not(.seo-kpi--score) > .seo-kpi__icon {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
}
.seo-kpi:not(.seo-kpi--score) > :not(.seo-kpi__icon) {
  grid-column: 1;
}
/* Aurora blob INSIDE each card — bleeds the accent color across the card */
.seo-kpi::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kpi-aurora, rgba(124, 58, 237, .35)), transparent 70%);
  filter: blur(28px);
  top: -50px;
  right: -50px;
  pointer-events: none;
  z-index: -1;
}

.seo-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--kpi-icon-bg, rgba(255, 255, 255, .8));
  color: var(--kpi-icon-color, var(--color-brand));
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
/* SVGs inside .seo-kpi__icon — sized via CSS so icons sourced from
   different icon sets (some have inline width/height, some don't) all
   render at the same 18px. Without this rule a bare <svg> defaults to
   ~300×150 and overflows the 36×36 container. */
.seo-kpi__icon svg { width: 18px; height: 18px; display: block; }
/* Color variants per KPI tile */
.seo-kpi--pink   { --kpi-icon-bg: #FCE7F3; --kpi-icon-color: #DB2777; --kpi-aurora: rgba(236, 72, 153, .45); }
.seo-kpi--violet { --kpi-icon-bg: #EDE9FE; --kpi-icon-color: #7C3AED; --kpi-aurora: rgba(124, 58, 237, .45); }
.seo-kpi--teal   { --kpi-icon-bg: #CCFBF1; --kpi-icon-color: #0D9488; --kpi-aurora: rgba(13, 148, 136, .42); }
.seo-kpi--amber  { --kpi-icon-bg: #FEF3C7; --kpi-icon-color: #D97706; --kpi-aurora: rgba(245, 158, 11, .45); }
.seo-kpi--score  { --kpi-aurora: rgba(124, 58, 237, .4); }

.seo-kpi__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.seo-kpi__num {
  font-size: 30px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.seo-kpi__delta-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(22, 163, 74, .15);
  color: var(--color-success);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
  letter-spacing: .02em;
}
.seo-kpi__label {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.seo-kpi__hint {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: -4px;
}

/* SEO Score tile — gauge + body horizontal layout */
.seo-kpi--score {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.seo-kpi--score .seo-kpi__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.seo-kpi__gauge {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}
.seo-kpi__gauge svg { width: 100%; height: 100%; display: block; }
.seo-kpi__gauge-track { stroke: rgba(124, 58, 237, .16); }
.seo-kpi__gauge-bar {
  stroke: var(--color-brand);
  transition: stroke .6s ease;
}
.seo-kpi__gauge.is-improved .seo-kpi__gauge-bar { stroke: var(--color-success); }
.seo-kpi__gauge-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.seo-kpi__num-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  flex-wrap: wrap;
}
.seo-kpi__before { color: var(--color-muted); }
.seo-kpi__arrow  { opacity: .5; }
.seo-kpi__after  {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: var(--font-weight-black);
}

/* Desktop: KPI wrapper transparent so its 3 children flow into the
   section's 4-col grid alongside the score card. All show-more toggles
   hidden on desktop. */
.seo-kpis__more   { display: contents; }
.seo-show-more    { display: none; }

/* ════════════════════════════
   Row 2 — SERP preview centerpiece
════════════════════════════ */
.seo-serp__card {
  background: #FAFBFD;
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seo-serp__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .04);
}

/* Mouse cursor — sits absolutely positioned inside the bar, animates from a
   resting point (offscreen-bottom-left) onto the brand search button on the
   right. Loop is driven by .is-moving (drifts in) → .is-clicking (press pulse)
   → class removed (drifts away), restarted by playSerp. */
.seo-serp__cursor {
  position: absolute;
  right: 18px;   /* lines up with the brand search button at the right edge */
  bottom: -10px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-40px, 18px) scale(.9);
  transition: opacity .25s ease, transform .65s cubic-bezier(.34,1.06,.64,1);
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .25));
  z-index: 5;
}
.seo-serp__cursor.is-moving {
  opacity: 1;
  transform: translate(0, 4px) scale(1);
}
.seo-serp__cursor.is-clicking {
  transform: translate(0, 4px) scale(.78);
  transition: transform .12s ease-out;
}
.seo-serp__bar-icon--brand {
  transition: transform .18s ease, background .18s ease;
}
.seo-serp__bar-icon--brand.is-clicked {
  transform: scale(.88);
  background: var(--color-brand-hover, #6D28D9);
}
.seo-serp__g { display: inline-flex; }
.seo-serp__query {
  flex: 1;
  /* Flex children get implicit `min-width: auto` which prevents shrinking
     below content size. Without min-width:0 here, the typed search query
     pushes the entire bar wider than the SERP card on narrow phones —
     shoving the search button + cursor off the right edge. */
  min-width: 0;
  font-size: var(--font-size-md);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-serp__query-typed { display: inline; }
.seo-serp__caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--color-ink);
  margin-left: 2px;
  vertical-align: middle;
  animation: seo-caret 1s steps(2, end) infinite;
}
@keyframes seo-caret { 50% { opacity: 0; } }

.seo-serp__bar-icons { display: flex; align-items: center; gap: 8px; color: var(--color-muted); }
.seo-serp__bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.seo-serp__bar-icon--brand {
  background: var(--color-brand);
  color: #fff;
  width: 26px; height: 26px;
}
.seo-serp__bar-divider {
  width: 1px;
  height: 14px;
  background: var(--color-divider);
}

.seo-serp__tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--color-divider);
  padding: 0 4px;
}
.seo-serp__tab {
  padding: 8px 0 12px;
  font-size: var(--font-size-md);
  color: var(--color-muted);
  font-weight: var(--font-weight-medium);
  position: relative;
  cursor: default;
}
.seo-serp__tab.is-active {
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
}
.seo-serp__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-brand);
  border-radius: 2px;
}

.seo-serp__result {
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.seo-serp__result.is-revealed { opacity: 1; transform: translateY(0); }

.seo-serp__result-head { display: flex; align-items: center; gap: 12px; }
.seo-serp__favicon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-ai);
  color: #fff;
  font-weight: var(--font-weight-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.seo-serp__result-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* Single-line + ellipsis for brand + URL — biz names and URLs are
   unbreakable strings on mobile; without this they push the result-head
   row wider than the SERP card and shove the "Top 1" pill off-screen. */
.seo-serp__result-brand,
.seo-serp__result-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seo-serp__result-brand {
  font-size: var(--font-size-base);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}
.seo-serp__result-url { font-size: 12px; color: var(--color-muted); }
.seo-serp__top-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1.5px solid #BFDBFE;
  color: #1D4ED8;
  background: #fff;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.seo-serp__result-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: #1A0DAB;
  text-decoration: none;
  line-height: 1.3;
  margin-top: 4px;
}
.seo-serp__result-title:hover { text-decoration: underline; }
.seo-serp__result-desc {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.seo-serp__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.seo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(22, 163, 74, .18);
}

.seo-serp__competitors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease .15s, transform .55s ease .15s;
}
.seo-serp__competitors.is-revealed { opacity: .55; transform: translateY(0); }
.seo-serp__comp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--color-divider);
  border-radius: 12px;
  background: #FFFFFF;
}
.seo-serp__comp-fav {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.seo-serp__comp-brand { font-size: 12px; color: var(--color-ink-soft); font-weight: var(--font-weight-semibold); }
.seo-serp__comp-meta  { font-size: 11px; color: var(--color-muted); }

/* ════════════════════════════
   AI Search Visibility card
   (sits right of SERP — same row)
════════════════════════════ */
.seo-ai {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* chk-card__head has margin-bottom: 16px which stacks with the .seo-ai
   flex-gap, making the space between head and chat 30px while SERP only
   has 16px. Zero out the margin so gap alone controls spacing → matches
   the SERP card's head-to-content gap exactly. */
.seo-ai > .chk-card__head { margin-bottom: 0; }

.seo-ai__chat {
  background: linear-gradient(160deg, #F8F6FF 0%, #FFFFFF 100%);
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seo-ai__chat-head {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-divider);
}
.seo-ai__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-soft);
}
.seo-ai__chip svg { color: var(--color-brand); }

.seo-ai__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.seo-ai__msg--user { justify-content: flex-end; }
.seo-ai__msg--ai {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.0,.0,1);
}
.seo-ai__msg--ai.is-revealed { opacity: 1; transform: translateY(0); }

.seo-ai__bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 92%;
  /* Flex children get `min-width: auto = min-content` which equals the
     longest unbreakable token width. Without these two rules, a long
     biz slug or URL inside the bubble can push the bubble past its
     own max-width and overflow the chat container on mobile. */
  min-width: 0;
  overflow-wrap: break-word;
}
.seo-ai__bubble--user {
  background: var(--color-ink);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.seo-ai__caret {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: #fff;
  margin-left: 1px;
  vertical-align: middle;
  animation: seo-caret 1s steps(2, end) infinite;
}
.seo-ai__bubble--user .seo-ai__caret { background: #fff; }

.seo-ai__avatar {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-ai);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seo-ai__bubble--ai {
  background: #fff;
  color: var(--color-ink);
  border: 1px solid var(--color-divider);
  border-bottom-left-radius: 6px;
}
.seo-ai__brand {
  color: var(--color-brand);
  background: linear-gradient(transparent 60%, rgba(124, 58, 237, .15) 60%);
  padding: 0 2px;
  font-weight: var(--font-weight-extrabold);
}
.seo-ai__sources {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-divider);
}
.seo-ai__source {
  font-size: 10px;
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
}

/* Citation potential score */
.seo-ai__score {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-ai__score-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.seo-ai__score-label {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted);
}
.seo-ai__score-val {
  font-size: 22px;
  font-weight: var(--font-weight-black);
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}
.seo-ai__score-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.seo-ai__score-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-brand), #EC4899);
  border-radius: var(--radius-pill);
  transition: width 1.2s cubic-bezier(.4,.0,.2,1);
}
.seo-ai__score-hint {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* Readiness signals checklist */
.seo-ai__signals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-ai__signal {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  opacity: 0;
  transform: translateX(-8px);
}
[data-anim="ai"].is-in .seo-ai__signal {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.0,.0,1);
}
[data-anim="ai"].is-in .seo-ai__signal[data-stagger="0"] { transition-delay: 1100ms; }
[data-anim="ai"].is-in .seo-ai__signal[data-stagger="1"] { transition-delay: 1200ms; }
[data-anim="ai"].is-in .seo-ai__signal[data-stagger="2"] { transition-delay: 1300ms; }
[data-anim="ai"].is-in .seo-ai__signal[data-stagger="3"] { transition-delay: 1400ms; }

.seo-ai__signal-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.seo-ai__signal-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--color-ink-soft);
  line-height: 1.4;
}
.seo-ai__signal-text strong {
  display: block;
  font-size: 12.5px;
  color: var(--color-ink);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.35;
}
.seo-ai__signal-why {
  display: block;
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
}

/* ════════════════════════════
   Row 3 — Website concepts
════════════════════════════ */
.seo-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.seo-tpl {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.0,.0,1), box-shadow .25s ease, border-color .2s ease;
  opacity: 0;
  transform: translateY(16px);
}
[data-anim="templates"].is-in .seo-tpl {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.0,.0,1);
}
[data-anim="templates"].is-in .seo-tpl[data-stagger="0"] { transition-delay: 0ms; }
[data-anim="templates"].is-in .seo-tpl[data-stagger="1"] { transition-delay: 120ms; }
[data-anim="templates"].is-in .seo-tpl[data-stagger="2"] { transition-delay: 240ms; }
.seo-tpl:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
  border-color: var(--tpl-accent);
}
.seo-tpl__mock {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tpl-accent) 8%, #fff) 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-divider);
}
.seo-tpl__mock-bar {
  display: flex;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid var(--color-border);
}
.seo-tpl__mock-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-divider); }
.seo-tpl__mock-bar span:nth-child(1) { background: #FCA5A5; }
.seo-tpl__mock-bar span:nth-child(2) { background: #FDE047; }
.seo-tpl__mock-bar span:nth-child(3) { background: #86EFAC; }
.seo-tpl__mock-body {
  flex: 1;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-tpl__mock-kicker {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tpl-accent);
}
.seo-tpl__mock-h1 {
  font-size: 15px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.seo-tpl__mock-sub { font-size: 11px; color: var(--color-muted); line-height: 1.4; }
.seo-tpl__mock-cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--tpl-accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-pill);
  margin-top: 2px;
}
.seo-tpl__mock-strip { display: flex; gap: 5px; margin-top: auto; }
.seo-tpl__mock-strip span { flex: 1; height: 20px; border-radius: 5px; background: rgba(15, 23, 42, .06); }
.seo-tpl__meta {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seo-tpl__name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.seo-tpl__name { font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
.seo-tpl__tag {
  font-size: 11px;
  color: var(--tpl-accent);
  background: color-mix(in srgb, var(--tpl-accent) 10%, transparent);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
}
.seo-tpl__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.seo-tpl__cta:hover {
  background: var(--tpl-accent);
  color: #fff;
  border-color: var(--tpl-accent);
}

/* ════════════════════════════
   2-col rows (Keywords+Recs / Pages+Built-in)
════════════════════════════ */
.seo-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
/* SERP + AI Search Visibility — equal widths + equal heights. Cards stretch
   to match the tallest column (default grid behaviour, no align-items). */
.seo-row-2col--serp {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
/* Make both cards fill their grid cell so heights match exactly.
   `min-width: 0` lets the card shrink below intrinsic content width
   inside the grid track — without it, wide content (badges row, source
   chips) pushes the card past its 1fr column. */
.seo-row-2col--serp > .chk-card {
  height: 100%;
  min-width: 0;
}

/* ── Spotlight wrapper ──
   Frames SERP + AI cards as a "hero zone" so they read as the most important
   thing on the page. Dark gradient backdrop + brand-glow accent draws the eye,
   while the cards themselves stay light so content readability isn't sacrificed.
   The hero head (badge + title + sub) sits ABOVE the 2-col row inside the
   wrapper. */
.seo-spotlight {
  position: relative;
  /* Critical: .seo-panel is a flex column whose children default to
     min-width: auto — without this, wide intrinsic content inside the
     spotlight (SERP search bar, badges row) pushes the wrapper past the
     viewport on narrow phones, causing horizontal scroll. */
  min-width: 0;
  width: 100%;
  padding: 28px 28px 32px;
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124, 58, 237, .35) 0%, transparent 55%),
    radial-gradient(110% 90% at 100% 0%, rgba(236, 72, 153, .25) 0%, transparent 55%),
    radial-gradient(120% 100% at 50% 100%, rgba(59, 130, 246, .25) 0%, transparent 55%),
    linear-gradient(180deg, #0F172A 0%, #111827 100%);
  box-shadow:
    0 24px 60px -20px rgba(124, 58, 237, .35),
    0 8px 32px -10px rgba(0, 0, 0, .35);
  overflow: hidden;
}
/* Subtle inner border-glow to lift the dark surface */
.seo-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .6) 0%, rgba(236, 72, 153, .4) 50%, rgba(59, 130, 246, .6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
}
.seo-spotlight__head {
  position: relative;
  margin-bottom: 22px;
  text-align: left;
}
.seo-spotlight__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-ai);
  box-shadow: 0 4px 14px rgba(124, 58, 237, .45);
  margin-bottom: 10px;
}
.seo-spotlight__badge svg { color: #fff; }
.seo-spotlight__title {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: var(--font-weight-bold);
  color: #fff;
  letter-spacing: -0.01em;
}
.seo-spotlight__sub {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.5;
}
.seo-spotlight > .seo-row-2col--serp {
  position: relative;
  /* Constrain grid to the wrapper's content box so wide intrinsic content
     (SERP bar, badges row, AI source chips) can't push it past the wrapper. */
  width: 100%;
  min-width: 0;
}
/* Cards inside spotlight: light surface stays the same, but lift via shadow
   so they pop against the dark wrapper. Crucial: `min-width: 0` so the
   grid item can shrink below the card's intrinsic min-content width —
   without it, long URLs / wide search bars push the card past the column. */
.seo-spotlight > .seo-row-2col--serp > .chk-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 14px 36px -16px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .15);
}

@media (max-width: 900px) {
  .seo-spotlight {
    padding: 20px 14px 22px;
    border-radius: 18px;
    /* Tone down the outer shadow so the wrapper doesn't bleed past viewport
       edges (the parent chk-page has horizontal padding ~16px). */
    box-shadow:
      0 16px 40px -16px rgba(124, 58, 237, .3),
      0 4px 16px -6px rgba(0, 0, 0, .25);
  }
  .seo-spotlight__head    { margin-bottom: 16px; }
  .seo-spotlight__badge {
    padding: 5px 10px;
    font-size: 10px;
    margin-bottom: 8px;
  }
  .seo-spotlight__badge svg { width: 11px; height: 11px; }
  .seo-spotlight__title   { font-size: 17px; line-height: 1.3; }
  .seo-spotlight__sub     { font-size: 12px; line-height: 1.45; }
  /* Inner row tightens its gap so the two stacked cards stay close-knit
     under the hero head. */
  .seo-spotlight > .seo-row-2col--serp { gap: 12px; }
  /* Reduce inner card padding when stacked inside spotlight to avoid
     double-padding eating horizontal room on small screens. */
  .seo-spotlight > .seo-row-2col--serp > .chk-card { padding: 16px 14px; }
  /* Disable the gradient inner border-glow on mobile — at small radius it
     can render as a thin pixel halo around the rounded corners that looks
     like an aliasing artifact. The outer shadow alone is enough. */
  .seo-spotlight::before { display: none; }
}

@media (max-width: 480px) {
  .seo-spotlight {
    padding: 16px 10px 18px;
    border-radius: 16px;
  }
  .seo-spotlight__head    { margin-bottom: 14px; }
  .seo-spotlight__badge {
    padding: 4px 9px;
    font-size: 9.5px;
    letter-spacing: .03em;
  }
  .seo-spotlight__title   { font-size: 15.5px; }
  .seo-spotlight__sub     { font-size: 11.5px; }
  .seo-spotlight > .seo-row-2col--serp { gap: 10px; }
  .seo-spotlight > .seo-row-2col--serp > .chk-card { padding: 14px 12px; }
}

/* Source + plan row: plan has 3 sub-cards so it needs more horizontal
   room than the source donut+legend. 2:3 split gives source ~40% and
   plan ~60%. Cards stretch to equal heights. */
.seo-row-2col--src-plan {
  grid-template-columns: 2fr 3fr;
}
.seo-row-2col--src-plan > .chk-card { height: 100%; }
/* ── Keywords as a GSC-style table ── columns: Query | Impressions bar |
   Clicks | Position. Each row is a button so it can still toggle .is-open
   for the suggested-action behavior. */
.seo-kw-table {
  display: flex; flex-direction: column;
  gap: 2px;
}
.seo-kw-table__head,
.seo-kw {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 56px 56px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.seo-kw-table__head {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--color-divider);
}
.seo-kw-table__head > span:nth-child(3),
.seo-kw-table__head > span:nth-child(4),
.seo-kw > .seo-kw__num { text-align: right; }
.seo-kw {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
  opacity: 0;
  transform: translateY(8px);
}
[data-anim="keywords"].is-in .seo-kw {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease, background .15s, border-color .15s;
}
[data-anim="keywords"].is-in .seo-kw[data-stagger="0"] { transition-delay:   0ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="1"] { transition-delay:  60ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="2"] { transition-delay: 120ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="3"] { transition-delay: 180ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="4"] { transition-delay: 240ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="5"] { transition-delay: 300ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="6"] { transition-delay: 360ms; }
[data-anim="keywords"].is-in .seo-kw[data-stagger="7"] { transition-delay: 420ms; }
.seo-kw:hover { background: var(--color-surface); }
.seo-kw.is-open {
  background: var(--color-brand-light);
  border-color: var(--color-brand-border);
}
.seo-kw__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seo-kw__bar-cell {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.seo-kw__bar {
  flex: 1; min-width: 0;
  height: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.seo-kw__bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
  border-radius: var(--radius-pill);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.4,.0,.2,1) .2s;
}
[data-anim="keywords"].is-in .seo-kw__bar-fill { transform: scaleX(1); }
.seo-kw__bar-num {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.seo-kw__num {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════
   AI Recommendations
   Reference: list of square pastel icon tiles + bold title + muted sub,
   with thin dividers between rows. Plus a floating gradient CTA in the
   section header's right corner.
════════════════════════════ */

.seo-rec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-rec {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  /* Glass base — semi-transparent white over the running gradient */
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 2px 10px rgba(15, 23, 42, .04),
    0 1px 0 rgba(255, 255, 255, .7) inset;
  opacity: 0;
  transform: translateY(8px);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Running gradient layer — uses the row's accent color (--rec-color).
   Lives under the glass via z-index: -1; background-position animates
   horizontally to create a slow shimmer / aurora flow. */
.seo-rec::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--rec-color, var(--color-brand))  5%, transparent)  0%,
    color-mix(in srgb, var(--rec-color, var(--color-brand)) 22%, transparent) 25%,
    color-mix(in srgb, var(--rec-color, var(--color-brand))  9%, transparent) 50%,
    color-mix(in srgb, var(--rec-color, var(--color-brand)) 22%, transparent) 75%,
    color-mix(in srgb, var(--rec-color, var(--color-brand))  5%, transparent) 100%
  );
  background-size: 260% 100%;
  animation: seo-rec-flow 7s ease-in-out infinite;
  pointer-events: none;
}
/* Stagger the flow start so all 6 rows don't shimmer in lockstep */
.seo-rec[data-stagger="0"]::before { animation-delay:  0s; }
.seo-rec[data-stagger="1"]::before { animation-delay: -1.2s; }
.seo-rec[data-stagger="2"]::before { animation-delay: -2.4s; }
.seo-rec[data-stagger="3"]::before { animation-delay: -3.6s; }
.seo-rec[data-stagger="4"]::before { animation-delay: -4.8s; }
.seo-rec[data-stagger="5"]::before { animation-delay: -6.0s; }

@keyframes seo-rec-flow {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.seo-rec:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--rec-color, var(--color-brand)) 25%, transparent),
    0 1px 0 rgba(255, 255, 255, .8) inset;
}
.seo-rec:hover::before {
  animation-duration: 3.5s;
}
[data-anim="recs"].is-in .seo-rec {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.0,.0,1), box-shadow .2s ease;
}
[data-anim="recs"].is-in .seo-rec[data-stagger="0"] { transition-delay:   0ms; }
[data-anim="recs"].is-in .seo-rec[data-stagger="1"] { transition-delay:  80ms; }
[data-anim="recs"].is-in .seo-rec[data-stagger="2"] { transition-delay: 160ms; }
[data-anim="recs"].is-in .seo-rec[data-stagger="3"] { transition-delay: 240ms; }
[data-anim="recs"].is-in .seo-rec[data-stagger="4"] { transition-delay: 320ms; }
[data-anim="recs"].is-in .seo-rec[data-stagger="5"] { transition-delay: 400ms; }

/* Icon tile — square rounded, pastel bg, accent color per .seo-rec--<tone> */
.seo-rec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--rec-bg, var(--color-brand-light));
  color: var(--rec-color, var(--color-brand));
  flex-shrink: 0;
}
/* Tone variants — pastel bg + saturated accent */
.seo-rec--blue   { --rec-bg: #DBEAFE; --rec-color: #2563EB; }
.seo-rec--violet { --rec-bg: #EDE9FE; --rec-color: #7C3AED; }
.seo-rec--pink   { --rec-bg: #FCE7F3; --rec-color: #DB2777; }
.seo-rec--amber  { --rec-bg: #FED7AA; --rec-color: #D97706; }
.seo-rec--yellow { --rec-bg: #FEF3C7; --rec-color: #CA8A04; }
.seo-rec--teal   { --rec-bg: #CCFBF1; --rec-color: #0D9488; }

.seo-rec__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.seo-rec__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.seo-rec__sub {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.4;
}

/* ════════════════════════════
   Traffic source — donut + legend
   Donut: SVG concentric circles with stroke-dasharray segments.
   Legend: 4 rows (color dot + count + percent + label with device icon).
════════════════════════════ */
.seo-source__body {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 28px;
  align-items: center;
}
.seo-source__chart {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.seo-source__chart svg {
  width: 100%; height: 100%;
  transform: rotate(0);
}
.seo-source__chart svg circle {
  transition: stroke-dasharray .8s cubic-bezier(.4,.0,.2,1);
}
.seo-source__total {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  pointer-events: none;
}
.seo-source__total-num {
  font-size: 22px;
  font-weight: var(--font-weight-black);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
  line-height: 1;
}
.seo-source__total-label {
  font-size: 11px;
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
}
.seo-source__legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.seo-source__row {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
}
.seo-source__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.seo-source__meta {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.seo-source__count {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.seo-source__pct {
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
}
.seo-source__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}
.seo-source__label svg { color: var(--color-muted); }

/* ════════════════════════════
   Row 5 — 30-day plan
   Glass cards (iconly-style) with a sequential "current step" highlight
   that cycles W1 → W2 → W3 → W4 on a 6s loop, then repeats.
════════════════════════════ */
.seo-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
  padding: 6px 4px;
  /* Fill the chk-card's remaining height so the bottom edge of the cards
     lines up with the sibling Traffic-source card — avoids a tall empty
     gap below the plan cards on desktop. */
  flex: 1;
  align-content: stretch;
}
/* Connector line between cards */
.seo-plan-grid::before {
  content: "";
  position: absolute;
  top: 32px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand) 0%, #EC4899 50%, var(--color-success) 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity .4s ease .3s, transform 1.1s cubic-bezier(.4,.0,.2,1) .3s;
  z-index: 0;
}
[data-anim="plan"].is-in .seo-plan-grid::before { opacity: .35; transform: scaleX(1); }

/* Glass card base — semi-transparent white with backdrop blur. */
.seo-plan-card {
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, .06),
    0 1px 0 rgba(255, 255, 255, .8) inset;
  opacity: 0;
  transform: translateY(12px);
  cursor: pointer;
  z-index: 1;
}

.seo-plan-card[data-stagger="0"] { --plan-accent-1: #7C3AED; --plan-accent-2: #A855F7; }
.seo-plan-card[data-stagger="1"] { --plan-accent-1: #8B5CF6; --plan-accent-2: #EC4899; }
.seo-plan-card[data-stagger="2"] { --plan-accent-1: #6366F1; --plan-accent-2: #3B82F6; }
.seo-plan-card[data-stagger="3"] { --plan-accent-1: #10B981; --plan-accent-2: #22D3EE; }

/* Reveal stagger on first scroll-in */
[data-anim="plan"].is-in .seo-plan-card {
  opacity: 1; transform: translateY(0);
  transition: opacity .45s ease, transform .25s cubic-bezier(.2,.0,.0,1), box-shadow .25s ease;
}
[data-anim="plan"].is-in .seo-plan-card[data-stagger="0"] { transition-delay:  80ms, 0ms, 0ms; }
[data-anim="plan"].is-in .seo-plan-card[data-stagger="1"] { transition-delay: 200ms, 0ms, 0ms; }
[data-anim="plan"].is-in .seo-plan-card[data-stagger="2"] { transition-delay: 320ms, 0ms, 0ms; }
[data-anim="plan"].is-in .seo-plan-card[data-stagger="3"] { transition-delay: 440ms, 0ms, 0ms; }

/* Marching-ants border — SVG rect sits absolutely over the card edge.
   The stroke always marches (dashoffset animation); opacity cycles on/off
   per-card so only one card lights up at a time. */
.seo-plan-card__march {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  z-index: 2;
}
.seo-plan-card__march rect {
  x: 1.5;
  y: 1.5;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  fill: none;
  stroke: var(--plan-accent-1, var(--color-brand));
  stroke-width: 2;
  stroke-dasharray: 8 6;
  animation: seo-plan-march 1s linear infinite;
}
@keyframes seo-plan-march {
  to { stroke-dashoffset: -14; }
}
/* Visibility cycle: each card "on" for ~22% of a 6s loop, staggered by 1.5s */
@keyframes seo-plan-on {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  22%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
[data-anim="plan"].is-in .seo-plan-card .seo-plan-card__march {
  animation: seo-plan-on 6s ease-in-out infinite;
}
[data-anim="plan"].is-in .seo-plan-card[data-stagger="0"] .seo-plan-card__march { animation-delay: 1.0s; }
[data-anim="plan"].is-in .seo-plan-card[data-stagger="1"] .seo-plan-card__march { animation-delay: 2.5s; }
[data-anim="plan"].is-in .seo-plan-card[data-stagger="2"] .seo-plan-card__march { animation-delay: 4.0s; }
[data-anim="plan"].is-in .seo-plan-card[data-stagger="3"] .seo-plan-card__march { animation-delay: 5.5s; }

/* Hover: lock the dashed border ON + soft lift. The march keeps running. */
.seo-plan-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--plan-accent-1, var(--color-brand)) 22%, transparent),
    0 1px 0 rgba(255, 255, 255, .9) inset;
}
.seo-plan-card:hover .seo-plan-card__march {
  animation: none;
  opacity: 1;
}

.seo-plan-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--plan-accent-1, var(--color-brand)), var(--plan-accent-2, var(--color-brand)));
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-black);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--plan-accent-1, var(--color-brand)) 35%, transparent);
}

.seo-plan-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  letter-spacing: -.01em;
}
.seo-plan-card__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seo-plan-card__items li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--font-size-base);
  color: var(--color-ink-soft);
  line-height: 1.45;
}
.seo-plan-card__dot {
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--plan-accent-1, var(--color-brand));
}

/* ════════════════════════════
   Tab 2 — Pages included grid
════════════════════════════ */
.seo-pages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.seo-page-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  opacity: 0;
  transform: scale(.94);
}
[data-anim="pages"].is-in .seo-page-chip {
  opacity: 1;
  transform: scale(1);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
[data-anim="pages"].is-in .seo-page-chip[data-stagger="0"] { transition-delay:   0ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="1"] { transition-delay:  60ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="2"] { transition-delay: 120ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="3"] { transition-delay: 180ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="4"] { transition-delay: 240ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="5"] { transition-delay: 300ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="6"] { transition-delay: 360ms; }
[data-anim="pages"].is-in .seo-page-chip[data-stagger="7"] { transition-delay: 420ms; }

.seo-page-chip__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.seo-page-chip__label {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}
.seo-page-chip__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════
   Tab 2 — Built-in features list
════════════════════════════ */
.seo-built-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
.seo-built__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(-10px);
}
[data-anim="built"].is-in .seo-built__item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.0,.0,1);
}
[data-anim="built"].is-in .seo-built__item[data-stagger="0"] { transition-delay:   0ms; }
[data-anim="built"].is-in .seo-built__item[data-stagger="1"] { transition-delay:  80ms; }
[data-anim="built"].is-in .seo-built__item[data-stagger="2"] { transition-delay: 160ms; }
[data-anim="built"].is-in .seo-built__item[data-stagger="3"] { transition-delay: 240ms; }
[data-anim="built"].is-in .seo-built__item[data-stagger="4"] { transition-delay: 320ms; }
[data-anim="built"].is-in .seo-built__item[data-stagger="5"] { transition-delay: 400ms; }

.seo-built__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.seo-built__body { display: flex; flex-direction: column; gap: 2px; }
.seo-built__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
}
.seo-built__desc {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  line-height: 1.45;
}

/* ════════════════════════════════════════════
   Tab 2 — Theme picker (live mini-iframe thumbs)
════════════════════════════════════════════ */
/* Theme picker uses the same visual language as .seo-tpl
   (Three AI-generated directions) — browser-chrome bar over a
   thumbnail, then a meta row with name + tag + Preview CTA — but
   compact (tighter paddings, smaller fonts, smaller dots) so 3 cards
   fit comfortably without dwarfing the live preview below. Per-theme
   --theme-accent drives tag color + hover/active border/glow. */
.seo-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.seo-theme {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: transform .25s cubic-bezier(.2,.0,.0,1), box-shadow .25s ease, border-color .2s ease;
}
.seo-theme:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  border-color: var(--theme-accent, var(--color-brand-border));
}
.seo-theme.is-active {
  border-color: var(--theme-accent, var(--color-brand));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--theme-accent, var(--color-brand)) 22%, transparent);
}

/* Mock wrapper: faint tinted gradient bg + chrome bar over the iframe */
.seo-theme__mock {
  background: linear-gradient(160deg, color-mix(in srgb, var(--theme-accent, var(--color-brand)) 8%, #fff) 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-divider);
}
.seo-theme__mock-bar {
  display: flex;
  gap: 3px;
  padding: 5px 8px;
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--color-border);
}
.seo-theme__mock-bar span { width: 5px; height: 5px; border-radius: 50%; background: var(--color-divider); }
.seo-theme__mock-bar span:nth-child(1) { background: #FCA5A5; }
.seo-theme__mock-bar span:nth-child(2) { background: #FDE047; }
.seo-theme__mock-bar span:nth-child(3) { background: #86EFAC; }

/* Live mini iframe — actual theme site scaled to a thumbnail.
   Trick: render iframe at a fixed 1280×800 "desktop" viewport so the
   inner site renders its desktop layout, then scale to fit the thumb
   exactly via container queries (100cqi / 1280px). The thumb's
   aspect-ratio matches 1280:800 so the iframe always perfectly fills
   the area at any card width — no empty gap on the right or bottom. */
.seo-theme__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 800;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-surface), #fff);
  container-type: inline-size;
}
/* Transparent click-shield over the scaled iframe so clicks land on
   the parent .seo-theme button rather than scrolling the iframe. */
.seo-theme__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 2;
  background: transparent;
}
.seo-theme__thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 800px;
  border: 0;
  transform: scale(calc(100cqi / 1280px));
  transform-origin: top left;
  pointer-events: none;
}

/* Selected-state corner badge — sits on top of the iframe thumb,
   above the click-shield, fades+pops in when the theme is active. */
.seo-theme__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--theme-accent, var(--color-brand));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .22);
}
.seo-theme__check svg { width: 10px; height: 10px; }
.seo-theme.is-active .seo-theme__check {
  opacity: 1;
  transform: scale(1);
}

.seo-theme__meta {
  padding: 8px 10px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.seo-theme__name {
  font-size: 12px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-theme__tag {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--theme-accent, var(--color-brand));
  background: color-mix(in srgb, var(--theme-accent, var(--color-brand)) 12%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  letter-spacing: .01em;
}

/* ════════════════════════════════════════════
   Tab 2 — Device toggle + preview frame + iframe
════════════════════════════════════════════ */
.seo-device-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
}
.seo-device-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.seo-device-toggle__btn:hover { color: var(--color-ink); }
.seo-device-toggle__btn.is-active {
  background: #fff;
  color: var(--color-brand);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
/* "View Full" replaces the Desktop tab on mobile (shown via the @media block).
   It opens the real site in a new tab, so it never takes the active state. */
.seo-device-toggle__btn--full { display: none; }
.seo-device-toggle__ext { opacity: .55; margin-left: -1px; }
/* Preview hint copy — desktop wording by default, mobile wording on phones. */
.seo-preview__hint-m { display: none; }

.seo-frame {
  position: relative;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
  transition: max-width .35s cubic-bezier(.4,.0,.2,1),
              border-radius .35s ease,
              border-color .35s ease,
              padding .35s ease,
              background .35s ease;
}
.seo-frame--desktop {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
/* Mobile: visually matches .chk-device--portrait from GCI for cross-tab
   consistency. iPhone-style — rounded bezel, dark gradient frame,
   Dynamic Island notch, side buttons (action+volume left, power right). */
.seo-frame--mobile {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  padding: 6px;
  border-radius: 52px;
  border: none;
  background: linear-gradient(150deg, #2c2c2e 0%, #1a1a1c 55%, #2c2c2e 100%);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .28),
    0 6px 14px rgba(0, 0, 0, .14),
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    inset 0 0 0 6px #0a0a0c;
}
/* Side buttons — pseudo-elements on the frame itself */
.seo-frame--mobile::before,
.seo-frame--mobile::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.seo-frame--mobile::before {
  /* Left side — action + volume up + volume down */
  left: -2.5px;
  top: 18%;
  width: 3px;
  height: 42%;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(180deg,
      #2a2a2c 0,       #2a2a2c 12%,
      transparent 12%, transparent 17%,
      #2a2a2c 17%,     #2a2a2c 48%,
      transparent 48%, transparent 53%,
      #2a2a2c 53%,     #2a2a2c 100%);
}
.seo-frame--mobile::after {
  /* Right side — single power button */
  right: -2.5px;
  top: 26%;
  width: 3px;
  height: 16%;
  border-radius: 0 2px 2px 0;
  background: #2a2a2c;
}

/* Browser chrome (desktop only) */
.seo-frame__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border-bottom: 1px solid var(--color-divider);
}
.seo-frame--mobile .seo-frame__chrome { display: none; }
.seo-frame__dots { display: flex; gap: 5px; }
.seo-frame__dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #CBD5E1;
}
.seo-frame__dots span:nth-child(1) { background: #FCA5A5; }
.seo-frame__dots span:nth-child(2) { background: #FDE047; }
.seo-frame__dots span:nth-child(3) { background: #86EFAC; }
.seo-frame__url {
  flex: 1;
  padding: 4px 14px;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}
.seo-frame__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--color-muted);
  transition: background .15s ease, color .15s ease;
}
.seo-frame__open:hover {
  background: var(--color-brand-light);
  color: var(--color-brand);
}

/* Phone notch — Dynamic Island, sits over the screen top (not the bezel) */
.seo-frame__notch {
  display: none;
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  z-index: 3;
}
.seo-frame--mobile .seo-frame__notch { display: flex; }
/* Selfie camera dot (right) + Face ID sensor (left) */
.seo-frame__notch::before,
.seo-frame__notch::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #1a1a1c;
}
.seo-frame__notch::before {
  right: 10px;
  width: 8px; height: 8px;
  box-shadow: inset 0 0 0 1.5px rgba(60, 80, 140, .35);
}
.seo-frame__notch::after {
  left: 12px;
  width: 6px; height: 6px;
  background: rgba(30, 30, 40, .9);
}
.seo-frame__notch span { display: none; }

/* Iframe wrap — desktop is just a wrapped iframe under the chrome.
   Mobile becomes the phone screen: rounded inside the bezel, sits flush. */
.seo-iframe-wrap {
  position: relative;
  background: #fff;
  height: 620px;
  transition: height .35s ease, border-radius .35s ease;
}
.seo-frame--mobile .seo-iframe-wrap {
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background: #000;
}
.seo-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.seo-frame--mobile .seo-iframe { border-radius: 46px; }

/* Loading overlay + AI dot loader */
.seo-iframe-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(255, 247, 254, .98), rgba(247, 248, 255, .98));
  color: var(--color-ink);
  font-size: 12.5px;
  font-weight: var(--font-weight-extrabold);
  z-index: 1;
  transition: opacity .25s ease, visibility .25s ease;
}
.seo-frame--mobile .seo-iframe-loading { border-radius: 46px; }
.seo-iframe-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.seo-iframe-loading__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  color: var(--color-brand);
  box-shadow: 0 4px 12px rgba(124, 58, 237, .12);
}
.seo-iframe-loading__text svg { color: var(--color-brand); }

/* AI dot loader — 3 brand-gradient dots bouncing in sequence */
.seo-ai-loader {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.seo-ai-loader span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grad-ai);
  box-shadow: 0 4px 10px rgba(124, 58, 237, .35);
  animation: seo-ai-pulse 1.1s ease-in-out infinite;
}
.seo-ai-loader span:nth-child(2) { animation-delay: .18s; background: linear-gradient(135deg, #8B5CF6, #F472B6); }
.seo-ai-loader span:nth-child(3) { animation-delay: .36s; background: linear-gradient(135deg, #A855F7, #FB923C); }
@keyframes seo-ai-pulse {
  0%, 80%, 100% { transform: scale(.7); opacity: .55; }
  40%           { transform: scale(1);  opacity: 1;   }
}

/* Header controls row (device toggle + Full View) */
.seo-preview__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.seo-preview__controls .chk-fullview,
.seo-preview__controls .seo-theme-btn {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

/* Desktop defaults — these elements are mobile-only entry points and
   overlays. Shown via the @media (max-width: 900px) block below. */
.seo-frame__desktop-only { display: none; }
.seo-theme-btn           { display: none; }
.seo-theme-sheet-head    { display: none; }
.seo-theme-backdrop      { display: none; }

/* Desktop-only overlay (rendered inside .seo-frame--desktop) — appears
   on mobile when the Desktop tab is active so users get a clear "open
   on desktop" message instead of a broken half-rendered iframe. */
.seo-frame__desktop-only-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-radius: 50%;
}
.seo-frame__desktop-only-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-ink);
}
.seo-frame__desktop-only-desc {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-muted);
  line-height: 1.55;
}
.seo-frame__desktop-only-desc strong {
  color: var(--color-brand);
  font-weight: var(--font-weight-extrabold);
}

/* ════════════════════════════
   Full View — extends GCI's .dashboard--focus to the website tab.
════════════════════════════ */
.dashboard--focus.dashboard--focus-website .seo-page > *:not(.seo-panel),
.dashboard--focus.dashboard--focus-website .seo-page > .seo-tabs,
.dashboard--focus.dashboard--focus-website .seo-panel > :not(.seo-preview) {
  display: none !important;
}
.dashboard--focus.dashboard--focus-website .seo-page {
  height: 100vh;
  padding: 16px;
}
.dashboard--focus.dashboard--focus-website .seo-panel { height: 100%; }
.dashboard--focus.dashboard--focus-website .seo-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dashboard--focus.dashboard--focus-website .seo-frame {
  flex: 1;
  margin: 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Desktop frame in Full View: stretch to the whole viewport width,
   no max-width cap. The entire point of Full View is to give the
   embedded site as much horizontal real estate as possible — letting
   the wrapper breathe past 1280px makes ultra-wide monitors useful. */
.dashboard--focus.dashboard--focus-website .seo-frame--desktop {
  max-width: none;
  width: 100%;
}
.dashboard--focus.dashboard--focus-website .seo-frame--mobile {
  max-width: 380px;
  flex: none;
  height: auto;
}
.dashboard--focus.dashboard--focus-website .seo-iframe-wrap {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* ════════════════════════════
   RESPONSIVE — Website + SEO
════════════════════════════ */
@media (max-width: 900px) {
  /* Clip horizontal overflow at the page + panel level so animated
     descendants (SERP cursor with right:18px + bottom:-10px, AI signal
     items with translateX(-8px), KPI aurora blobs, marching-ants SVG
     stroke that draws ~1px outside its rect, etc) can never push the
     viewport into a horizontal scroll during the SERP/AI loop on phones.
     Uses `clip` (not `hidden`) so vertical scrolling/positioning of
     sticky elements is unaffected. */
  .seo-page,
  .seo-panel { overflow-x: clip; }

  .seo-tabs        { width: 100%; }
  .seo-tabs__btn   { flex: 1; justify-content: center; padding: 9px 12px; }

  /* ── KPI row: compact + collapsible ── */
  .seo-kpis {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 10px;
  }
  .seo-kpi {
    padding: 12px 14px;
    gap: 8px;
    border-radius: 14px;
  }
  .seo-kpi__num         { font-size: 24px; }
  .seo-kpi__icon        { width: 32px; height: 32px; border-radius: 10px; }
  .seo-kpi__icon svg    { width: 16px; height: 16px; }
  .seo-kpi__gauge       { width: 64px; height: 64px; }
  .seo-kpi__gauge-num   { font-size: 18px; }
  .seo-kpi__hint        { font-size: 10.5px; }
  .seo-kpi--score       { gap: 12px; }
  .seo-kpi--score .seo-kpi__after { font-size: 15px; }

  /* Shared show-more button — matches Check-In's .chk-prompts__more
     pattern (transparent bg, brand text, arrow glyphs in label). */
  .seo-show-more {
    display: block;
    width: 100%;
    margin-top: 6px;
    background: transparent;
    border: none;
    padding: 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background .15s ease;
  }
  .seo-show-more:hover { background: var(--color-brand-light); }

  .seo-tpl-grid    { grid-template-columns: 1fr; }
  .seo-row-2col,
  .seo-row-2col--serp,
  .seo-row-2col--src-plan { grid-template-columns: 1fr; }
  .seo-rec-list--2col { grid-template-columns: 1fr; }
  .seo-plan-grid   { grid-template-columns: 1fr; }
  .seo-plan-grid::before { display: none; }

  /* Keywords + AI Recs + AI Signals: hide items 3+ until parent card has
     .is-expanded. Use :nth-of-type for keywords since the table now has a
     <div> header row that would throw off :nth-child counting. */
  .seo-keywords:not(.is-expanded) .seo-kw:nth-of-type(n+3),
  .seo-recs:not(.is-expanded)     .seo-rec:nth-child(n+3),
  .seo-ai:not(.is-expanded)       .seo-ai__signal:nth-child(n+3) {
    display: none;
  }

  /* Keyword table on phones: drop the Position column (4th col) — Query +
     Impressions bar + Clicks fit comfortably; Position is the least
     useful metric on a small screen. Re-grid to 3 columns. */
  .seo-kw-table__head,
  .seo-kw {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 44px;
    gap: 8px;
    padding: 8px 10px;
  }
  .seo-kw-table__head > span:nth-child(4),
  .seo-kw > .seo-kw__num:last-child { display: none; }

  /* Source breakdown: stack chart on top of legend (donut + 4 rows
     becomes a vertical reading flow), shrink donut so it doesn't dominate. */
  .seo-source__body {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .seo-source__chart { max-width: 180px; }
  .seo-source__legend { width: 100%; }

  /* SERP card on mobile: scale fonts down to match the AI card scale
     (bubble 12.5px, signal strong 12.5px). Previously the SERP title was
     17px / desc 15px which read 30%+ larger than the AI card next to it,
     making the column feel visually heavier. */
  .seo-serp__card         { padding: 14px; gap: 12px; }
  .seo-serp__tabs         { gap: 12px; font-size: var(--font-size-sm); overflow-x: auto; }
  .seo-serp__result       { padding: 12px 14px; gap: 6px; }
  .seo-serp__result-brand { font-size: 13px; }
  .seo-serp__result-url   { font-size: 11px; }
  .seo-serp__result-title { font-size: 14.5px; }
  .seo-serp__result-desc  { font-size: 12.5px; line-height: 1.5; }
  .seo-serp__top-pill     { font-size: 10px; padding: 3px 8px; }
  .seo-serp__favicon      { width: 26px; height: 26px; font-size: 12px; }
  .seo-badge              { font-size: 10.5px; padding: 3px 8px; gap: 4px; }
  .seo-serp__comp         { padding: 8px 12px; }
  .seo-serp__comp-brand   { font-size: 11.5px; }
  .seo-serp__comp-meta    { font-size: 10.5px; }
  .seo-serp__comp-fav     { width: 22px; height: 22px; font-size: 10px; }

  /* SERP bar: keep just Google icon + query + search button on phones.
     The close/divider/mic icons + drift cursor take ~95px combined; on a
     320px viewport that leaves only ~37px for the query and shoves the
     search button off the card. Per user spec: "just type and click —
     don't make the search bar too long." So we hide the secondary icons
     and the drift cursor; the search button's click pulse still fires. */
  .seo-serp__bar          { padding: 7px 12px; gap: 8px; }
  .seo-serp__query        { font-size: 13px; }
  .seo-serp__bar-divider,
  .seo-serp__bar-icon:not(.seo-serp__bar-icon--brand),
  .seo-serp__cursor       { display: none; }

  /* AI chat: the AI message has avatar (26px) + gap (8px) + bubble
     (max-width: 92%). At ~204px chat width that's 222px → 18px overflow.
     Constrain the AI bubble so avatar + gap + bubble always fits. */
  .seo-ai__msg--ai .seo-ai__bubble { max-width: calc(100% - 34px); }
  /* Chip row: tighter padding/font so all three providers can sit on
     one or two lines without bleeding past the chat container. */
  .seo-ai__chip                    { padding: 3px 7px; font-size: 9.5px; }

  /* Preview controls (Website tab): on mobile the Full View button is
     hidden, leaving the device toggle + Theme button. Stretch the row
     to full width with space-between so they sit at opposite ends. */
  .seo-preview__controls {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .seo-pages-grid  { grid-template-columns: 1fr 1fr; }
  .seo-built-list  { grid-template-columns: 1fr; }

  /* Tab 2 — Theme picker + Preview */
  .seo-theme-grid       { grid-template-columns: repeat(2, 1fr); }
  .seo-device-toggle__btn { padding: 6px 10px; }
  /* On phones the Desktop tab is replaced by "View Full" (opens the real
     site) — a desktop layout can't render in a phone-width iframe. It sits
     after Mobile in the DOM, so the mobile order is [Mobile, View Full]. */
  .seo-device-toggle__btn--desktoponly { display: none; }
  .seo-device-toggle__btn--full { display: inline-flex; }
  .seo-preview__hint-d { display: none; }
  .seo-preview__hint-m { display: inline; }
  .seo-iframe-wrap      { height: 480px; }
  /* Let the mobile frame's 9:19.5 aspect-ratio drive its height; the
     iframe-wrap fills the screen area. Locking it to a fixed height
     here previously left half the phone bezel empty. */
  .seo-frame--mobile .seo-iframe-wrap { height: 100%; }

  /* Hide the inline desktop iframe + chrome on phones — the iframe
     would just render the site's mobile layout (since iframes inherit
     viewport width), which is misleading + ugly. Show the friendly
     "Desktop preview only on desktop" overlay instead. */
  .seo-frame--desktop .seo-frame__chrome,
  .seo-frame--desktop .seo-iframe-wrap {
    display: none;
  }
  .seo-frame--desktop {
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  .seo-frame--desktop .seo-frame__desktop-only {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px;
    gap: 12px;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    max-width: 420px;
    margin: 0 auto;
  }

  /* ── Theme picker as bottom sheet ──
     Mirrors the GCI .chk-left customize sheet pattern. The themes card
     drops out of the inline flow and becomes a fixed sheet at the
     bottom of the viewport, off-screen by default. Tapping the "Theme"
     button in the preview controls slides it up to 70vh so the user
     can pick a theme while the iframe behind updates live. */
  .seo-theme-btn        { display: inline-flex; }
  .seo-theme-sheet-head { display: flex; }
  .seo-theme-backdrop   { display: block; }

  .seo-panel[data-panel="website"] .seo-themes {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 70vh;
    z-index: 70;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    background: var(--color-canvas);
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(15, 23, 42, .22);
    overflow-y: auto;
    margin: 0;
    padding: 0 16px 24px;
  }
  .seo-panel[data-panel="website"].is-theme-sheet-open .seo-themes {
    transform: translateY(0);
  }
  .seo-theme-sheet-head {
    position: sticky; top: 0;
    align-items: center; justify-content: flex-end;
    padding: 14px 4px 6px;
    background: var(--color-canvas);
    z-index: 2;
    flex-shrink: 0;
  }
  .seo-theme-sheet-handle {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--color-divider);
  }
  .seo-theme-sheet-close {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--color-divider);
    border-radius: 50%;
    color: var(--color-ink-soft);
    cursor: pointer;
  }
  .seo-theme-sheet-close:hover { background: var(--color-surface); color: var(--color-ink); }

  .seo-theme-backdrop {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .seo-panel[data-panel="website"].is-theme-sheet-open .seo-theme-backdrop {
    opacity: 1; pointer-events: auto;
  }
  /* Lock body scroll while the sheet is open so the preview behind
     stays pinned in the visible top portion of the viewport. */
  body:has(.seo-panel[data-panel="website"].is-theme-sheet-open) { overflow: hidden; }
}
@media (max-width: 480px) {
  .seo-kpis__more   { grid-template-columns: 1fr; }
  .seo-pages-grid   { grid-template-columns: 1fr; }
  .seo-tabs__btn span { font-size: var(--font-size-base); }
  /* Theme grid stays 2-col on small phones so the bottom sheet
     always shows two themes per row, per the GCI-style picker spec. */
  .seo-theme-grid   { grid-template-columns: repeat(2, 1fr); }
}
/* Intermediate breakpoint — step down 4 → 3 columns before the
   900px tablet rule kicks in and drops to 2, so cards never get
   squeezed below ~190px wide where the chrome bar looks cramped. */
@media (max-width: 1180px) and (min-width: 901px) {
  .seo-theme-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   Subscribe modal (.sub-*) — fixed-size shell · service-style pricing
   Pane 1: product switcher + tiers (✓/✗ checklist) · Pane 2: plan + form
   JS: js/components/subscribe-modal.js
   ════════════════════════════════════════════════════════════════════ */
.sub-overlay {
  position: fixed; inset: 0; z-index: 9300;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 14px; animation: sub-fade-in .2s ease-out;
}
@keyframes sub-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sub-overlay.is-closing { animation: sub-fade-out .2s ease-out forwards; }
@keyframes sub-fade-out { to { opacity: 0; } }

/* FIXED size — never changes when switching product/plan. */
.sub-dialog {
  position: relative;
  width: min(1060px, calc(100vw - 28px));
  height: min(900px, 92vh);
  /* Shared backdrop for every screen (pricing · form · success): plain white
     replaced with a faint blueprint grid + a few scattered brand-tinted squares
     + a soft top glow, so all panes share the same depth. The panes are
     transparent and sit on top of this. */
  background-color: var(--color-canvas);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='420'%3E%3Cg fill='%236366F1' fill-opacity='0.08'%3E%3Crect x='44' y='34' width='34' height='34' rx='6'/%3E%3Crect x='140' y='96' width='22' height='22' rx='5'/%3E%3Crect x='312' y='20' width='28' height='28' rx='6'/%3E%3Crect x='520' y='58' width='40' height='40' rx='8'/%3E%3Crect x='462' y='134' width='20' height='20' rx='4'/%3E%3Crect x='78' y='172' width='16' height='16' rx='4'/%3E%3Crect x='566' y='198' width='18' height='18' rx='4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 0%, rgba(99, 102, 241, .07), transparent 62%),
    linear-gradient(rgba(99, 102, 241, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, .05) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-position: top center, top center, 0 0, 0 0;
  background-size: auto, auto, 38px 38px, 38px 38px;
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(15, 23, 42, .30), 0 10px 30px rgba(15, 23, 42, .10);
  overflow: hidden;
  animation: sub-pop .34s cubic-bezier(.16, 1, .3, 1);
}
@keyframes sub-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sub-sheet-up   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sub-sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }

.sub-close {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 34px; height: 34px; background: rgba(255, 255, 255, .78);
  border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-muted); cursor: pointer; transition: background .15s, color .15s;
}
.sub-close:hover { background: var(--color-surface); color: var(--color-ink); }
.sub-close svg { width: 18px; height: 18px; }

.sub-stage { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }

/* panes stacked for crossfade; min-height:100% lets the form rail fill the box */
.sub-pane { position: absolute; top: 0; left: 0; right: 0; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.sub-pane--enter { opacity: 0; transform: translateX(26px); }
.sub-pane--in { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.sub-pane--leave { opacity: 0; transform: translateX(-22px); pointer-events: none; transition: opacity .22s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.sub-pane__inner { flex: 1 0 auto; padding: 30px 32px 26px; }

/* product switcher — sticky segmented control, the pane's header */
.sub-switch { position: sticky; top: 0; z-index: 4; display: flex; justify-content: center; margin: -30px -32px 0; padding: 20px 20px 18px; }
.sub-switch__track { display: inline-flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 5px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-pill); }
.sub-switch__track::-webkit-scrollbar { display: none; }
.sub-switch__tab { flex: 0 0 auto; padding: 8px 17px; background: transparent; border: 0; border-radius: var(--radius-pill); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.sub-switch__tab:hover { color: var(--color-ink); }
.sub-switch__tab.is-active { background: var(--color-canvas); color: var(--color-brand); box-shadow: 0 2px 6px rgba(15, 23, 42, .1); }
.sub-switch__head { display: none; }  /* desktop: tabs only, no title row */
.sub-switch__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); letter-spacing: -.3px; color: var(--color-ink); }
.sub-switch__dd { display: none; width: 100%; max-width: 340px; }
.sub-switch__dd-label { display: none; }  /* shown on mobile only */

.sub-pane__foot { margin: 22px 0 0; text-align: center; font-size: var(--font-size-xs); color: var(--color-subtle); }
/* Product-level pricing details (setup fee, asterisk note, Add-on price list,
   trial note) rendered below the tier cards. */
/* 932 = 3×300px cards + 2×16px gaps → the block's left edge lines up with the
   first tier card instead of floating centred. */
.sub-addon { width: 100%; max-width: 932px; margin: 22px auto 0; text-align: left; font-size: var(--font-size-xs); color: var(--color-subtle); }
.sub-addon__block { margin-top: 14px; }
.sub-addon__block:first-child { margin-top: 0; }
.sub-addon__title { margin: 0 0 5px; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.sub-addon__subtitle { margin: 8px 0 4px; font-weight: var(--font-weight-semibold); color: var(--color-ink-soft); }
.sub-addon__list { margin: 0; padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 3px; }
.sub-addon__list li { line-height: 1.45; }
.sub-addon__note { margin: 9px 0 0; color: var(--color-subtle); }
.sub-addon__trial { margin: 0; text-align: center; color: var(--color-subtle); }

/* pricing pane: cards vertically centred so the popular tag clears the header line */
.sub-pricing { display: flex; flex-direction: column; }

/* tier cards — service pricing look */
.sub-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: 16px; align-items: start; margin-top: 0; }
.sub-tiers[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 300px)); }
.sub-tiers[data-cols="1"] { grid-template-columns: minmax(0, 320px); }
.sub-tier { position: relative; display: flex; flex-direction: column; background: var(--color-canvas); border: 1.5px solid var(--color-divider); border-radius: var(--radius-xl); overflow: hidden; }
/* featured card pops up by the banner height so all card bodies stay aligned */
/* featured = a brand-coloured frame wrapping a rounded white inner card */
.sub-tier--featured { border: 0; background: linear-gradient(150deg, #6366F1, var(--color-brand)); padding: 0 5px 5px; box-shadow: 0 18px 46px rgba(124, 58, 237, .26); margin-top: -38px; }
.sub-tier__banner { height: 38px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: var(--font-weight-bold); letter-spacing: .8px; text-transform: uppercase; }
.sub-tier__inner { display: flex; flex-direction: column; padding: 22px 20px; }
.sub-tier--featured .sub-tier__inner { background: var(--color-canvas); border-radius: var(--radius-lg); }
/* "simple" price cards (Payment): stretch all tiers to equal height and pin the
   CTA to the bottom, so the Get-Started buttons line up even though Standard's
   two-option price block is taller than the $24.99 ones (no stagger). */
.sub-tiers:has(.sub-tier--simple) { align-items: stretch; }
.sub-tier--simple .sub-tier__inner { flex: 1; }
.sub-tier--simple .sub-tier__cta { margin-top: auto; }
.sub-tier__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
.sub-tier__note { font-size: var(--font-size-sm); color: var(--color-muted); line-height: 1.45; margin: 6px 0 0; min-height: 38px; }
.sub-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 14px 0 16px; }
.sub-price__old { font-size: var(--font-size-lg); color: var(--color-subtle); text-decoration: line-through; }
.sub-price__amount { font-size: 34px; font-weight: var(--font-weight-black); color: var(--color-ink); letter-spacing: -1px; }
.sub-price--text .sub-price__amount { font-size: 22px; letter-spacing: -.4px; }  /* word formulas (e.g. "Interchange +0.3%") need a smaller size than dollar amounts */
/* Processing-rate price (Standard Pricing): one or more options — each a label
   (e.g. "Flat Rate" / "Interchange Rate") with an optional emphasised green
   value (+0.3% • +10¢) and a muted unit — stacked with an "or" between them. */
.sub-price--rate { flex-direction: column; align-items: flex-start; gap: 0; }
.sub-price__rateopt { display: flex; flex-direction: column; gap: 2px; }
.sub-price--rate .sub-price__amount { font-size: 20px; letter-spacing: -.3px; }
.sub-price__rateline { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-muted); }
.sub-price__rate-val { color: var(--color-teal); font-weight: var(--font-weight-bold); }
.sub-price__rate-unit { font-weight: var(--font-weight-medium); }
.sub-price__or { margin: 9px 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--color-subtle); }
.sub-price__unit { font-size: var(--font-size-sm); color: var(--color-muted); font-weight: var(--font-weight-medium); }
.sub-tier__cta { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; background: var(--color-canvas); color: var(--color-ink); border: 1.5px solid var(--color-divider); border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sub-tier__cta:hover { border-color: var(--color-ink); transform: translateY(-1px); }
.sub-tier__cta--brand { background: linear-gradient(135deg, #6366F1, var(--color-brand)); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(124, 58, 237, .26); }
.sub-tier__cta--brand:hover { box-shadow: 0 10px 26px rgba(124, 58, 237, .34); }
.sub-tier__divider { height: 1px; background: var(--color-divider); margin: 18px 0 16px; }
.sub-tier__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sub-feat { display: flex; gap: 10px; font-size: var(--font-size-sm); color: var(--color-ink-soft); line-height: 1.45; }
.sub-feat__ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-brand-light); color: var(--color-brand); }
.sub-feat__ic svg { width: 11px; height: 11px; }
.sub-feat--x { color: var(--color-subtle); }
.sub-feat--x .sub-feat__ic { background: var(--color-border); color: var(--color-subtle); }
.sub-tier__more { display: none; }  /* desktop: full list, no toggle */

/* ── Special "Bundle" tier — the all-in-one hero offer. One tier only, so it
   gets a wider single-column card, a richer frame + glow, a strikethrough sale
   price and a savings pill, making it clearly distinct from every other plan. */
.sub-tiers:has(.sub-tier--bundle) { grid-template-columns: minmax(0, 460px); }
.sub-tier--bundle { background: linear-gradient(150deg, #A855F7 0%, #6366F1 48%, var(--color-brand) 100%); box-shadow: 0 28px 64px rgba(124, 58, 237, .36); }
.sub-tier--bundle .sub-tier__inner { padding: 26px 24px; }
.sub-tier--bundle .sub-tier__banner { letter-spacing: 1px; }
/* bundle features read "Name — $X/mo value": bold dark name, muted value */
.sub-tier--bundle .sub-feat__label { font-weight: var(--font-weight-bold); color: var(--color-ink); }
.sub-tier--bundle .sub-feat__val { color: var(--color-muted); }
.sub-tier--bundle .sub-feat__val::before { content: ' — '; }
.sub-tier__save { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: -4px 0 16px; padding: 6px 13px; border-radius: var(--radius-pill); background: var(--color-brand-light); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.sub-tier__save svg { width: 13px; height: 13px; }
.sub-tier__feats-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 14px; }

/* Bundle bonus card (e.g. Prepaid 12-Month Bonus) — soft brand-tinted panel
   below the plan, with a gift icon, heading and a blue-check perk list. */
.sub-bonus { width: 100%; max-width: 460px; margin: 18px auto 0; padding: 20px 22px; background: var(--color-brand-light); border: 1px solid var(--color-brand-border); border-radius: var(--radius-xl); text-align: left; box-sizing: border-box; }
.sub-bonus__head { display: flex; align-items: center; gap: 14px; }
.sub-bonus__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366F1, var(--color-brand)); color: #fff; }
.sub-bonus__icon svg { width: 22px; height: 22px; }
.sub-bonus__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
.sub-bonus__sub { font-size: var(--font-size-sm); color: var(--color-muted); margin-top: 2px; }
.sub-bonus__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sub-bonus__item { display: flex; gap: 10px; font-size: var(--font-size-sm); line-height: 1.45; color: var(--color-ink-soft); }
.sub-bonus__check { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-brand); }
.sub-bonus__check svg { width: 15px; height: 15px; }
.sub-bonus__text strong { font-weight: var(--font-weight-bold); color: var(--color-ink); }
.sub-bonus__muted { color: var(--color-muted); font-weight: var(--font-weight-medium); }

.sub-seg { display: none; }  /* mobile-only plan switcher (shown in the ≤720px block) */
.sub-feat__val::before { content: ': '; }  /* desktop re-joins "Label: value" */
.sub-feat__val--none { display: none; }     /* desktop: not-included rows show only the label */

/* only the cards slide when the product switches (switcher stays put);
   flex-centred so short products sit in the middle, tall ones fall back to top */
.sub-cards { flex: 1; display: flex; flex-direction: column; justify-content: safe center; padding-top: 48px; transition: opacity .26s ease, transform .32s cubic-bezier(.16, 1, .3, 1); }
.sub-cards.is-leaving { opacity: 0; transform: translateX(-24px); }
.sub-cards.is-entering { opacity: 0; transform: translateX(24px); }

/* ── Pane 2: form — a single centred column (no promo rail). Chip pinned on
   top, fields + submit below, mirroring the main website's consultation form.
   Transparent — the shared blueprint backdrop on .sub-dialog shows through. */
.sub-form {
  display: flex; align-items: stretch; padding: 0;
}

/* fields: chip pinned top (clears the X), the rest of the form centred. The
   column is capped + auto-centred so the form sits in the middle of the dialog. */
.sub-fields { flex: 1; min-width: 0; width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 54px 32px 36px; box-sizing: border-box; }
.sub-form__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sub-plan-chip { display: flex; align-items: center; gap: 13px; width: 100%; margin-bottom: 4px; padding: 13px 16px; background: var(--color-surface); border: 1.5px solid var(--color-divider); border-radius: var(--radius-md); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sub-plan-chip:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.sub-plan-chip__ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-canvas); border: 1px solid var(--color-divider); color: var(--color-ink-soft); }
.sub-plan-chip__ic svg { width: 17px; height: 17px; }
.sub-plan-chip__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sub-plan-chip__hint { font-size: 11px; color: var(--color-muted); font-weight: var(--font-weight-medium); }
.sub-plan-chip__plan { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-plan-chip__price { flex: 0 0 auto; font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-brand); }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 8px; }
.sub-field { display: flex; flex-direction: column; gap: 8px; }
.sub-field--full { grid-column: 1 / -1; }
.sub-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.sub-label__req { color: #EF4444; margin-left: 2px; }
.sub-input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--color-divider); border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-base); color: var(--color-ink); background: var(--color-canvas); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.sub-input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }
.sub-input::placeholder { color: var(--color-subtle); }
.sub-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.sub-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; }
.sub-submit { width: 100%; padding: 15px 28px; background: linear-gradient(135deg, #6366F1, var(--color-brand)); color: #fff; border: 0; border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); cursor: pointer; box-shadow: 0 8px 20px rgba(124, 58, 237, .26); transition: transform .15s, box-shadow .15s; }
.sub-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(124, 58, 237, .34); }
.sub-consent { margin: 4px 0 0; text-align: center; font-size: var(--font-size-xs); color: var(--color-subtle); line-height: 1.55; }
.sub-consent__link { color: var(--color-muted); text-decoration: underline; }
.sub-consent__link:hover { color: var(--color-brand); }

/* ── Success — modern celebratory state ── */
.sub-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 40px; }
.sub-success__badge { position: relative; width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366F1, var(--color-brand)); box-shadow: 0 16px 40px rgba(124, 58, 237, .4); }
.sub-success__badge::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--color-brand-border); opacity: .7; }
.sub-success__badge-ic { display: flex; }
.sub-success__badge-ic svg { width: 40px; height: 40px; color: #fff; }
.sub-success__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); letter-spacing: -.5px; color: var(--color-ink); margin: 0 0 10px; }
.sub-success__text { font-size: var(--font-size-md); color: var(--color-muted); line-height: 1.6; margin: 0 auto 22px; max-width: 400px; }
.sub-success__plan { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); margin-bottom: 28px; }
.sub-success__plan-name { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-ink); }
.sub-success__plan-price { font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); color: var(--color-brand); }
.sub-success__cta { max-width: 260px; }

/* ── Mobile: bottom-sheet modal + pill switcher / single-plan detail ── */
@media (max-width: 720px) {
  /* Present the whole modal as a bottom sheet: anchored to the screen bottom,
     full width, rounded top corners, slides up from below with a grab handle. */
  .sub-overlay { align-items: flex-end; justify-content: center; padding: 0; }
  .sub-dialog {
    width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    animation: sub-sheet-up .36s cubic-bezier(.16, 1, .3, 1);
    /* Fade the blueprint backdrop a touch more on mobile (lower-alpha layers;
       positions/sizes inherit from the base .sub-dialog rule). */
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='420'%3E%3Cg fill='%236366F1' fill-opacity='0.05'%3E%3Crect x='44' y='34' width='34' height='34' rx='6'/%3E%3Crect x='140' y='96' width='22' height='22' rx='5'/%3E%3Crect x='312' y='20' width='28' height='28' rx='6'/%3E%3Crect x='520' y='58' width='40' height='40' rx='8'/%3E%3Crect x='462' y='134' width='20' height='20' rx='4'/%3E%3Crect x='78' y='172' width='16' height='16' rx='4'/%3E%3Crect x='566' y='198' width='18' height='18' rx='4'/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(120% 70% at 50% 0%, rgba(99, 102, 241, .045), transparent 62%),
      linear-gradient(rgba(99, 102, 241, .03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99, 102, 241, .03) 1px, transparent 1px);
  }
  .sub-overlay.is-closing .sub-dialog { animation: sub-sheet-down .2s ease-in forwards; }
  .sub-dialog::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 999px;
    background: var(--color-divider);
    z-index: 5;
    pointer-events: none;
  }
  .sub-pane__inner { padding: 22px 16px 18px; }

  /* switcher → title row + a separate product-dropdown row, so the dropdown
     reads as a selector instead of the popup title */
  .sub-switch { flex-direction: column; align-items: stretch; gap: 11px; margin: -22px -16px 0; padding: 20px 16px 14px; }
  .sub-switch__head { display: flex; align-items: center; min-height: 30px; padding-right: 42px; }  /* padding clears the X */
  .sub-switch__track { display: none; }
  .sub-switch__dd { display: flex; flex-direction: column; gap: 6px; max-width: none; }
  .sub-switch__dd-label { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-muted); }

  /* ── Mobile: pill switcher + single-plan detail (replaces the 3 stacked cards).
        Picks one plan at a time so the panel is short but shows EVERY feature as
        a Label–value spec row, with a sticky Get-Started bar pinned to the bottom. */
  .sub-cards { flex: none; padding-top: 14px; justify-content: flex-start; }

  /* Segmented plan switcher */
  .sub-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 5px;
    margin: 0 0 16px;
    padding: 5px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
  }
  .sub-seg__pill {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 4px;
    background: transparent; border: 0; border-radius: var(--radius-md);
    font-family: inherit; cursor: pointer;
    transition: background .15s, box-shadow .15s;
  }
  .sub-seg__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-muted); white-space: nowrap; }
  .sub-seg__price { font-size: var(--font-size-xs); color: var(--color-subtle); }
  .sub-seg__pill--featured .sub-seg__name::after { content: ' ★'; color: #F59E0B; }
  .sub-seg__pill.is-active { background: var(--color-canvas); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
  .sub-seg__pill.is-active .sub-seg__name { color: var(--color-brand); }
  .sub-seg__pill.is-active .sub-seg__price { color: var(--color-ink); }

  /* Only the selected plan renders; it fills the column with no card chrome. */
  .sub-tiers, .sub-tiers[data-cols="2"], .sub-tiers[data-cols="1"] { grid-template-columns: 1fr; gap: 0; justify-content: stretch; }
  .sub-tier { display: none; border: 0; border-radius: 0; overflow: visible; }
  .sub-tier.is-seg-active { display: flex; }
  .sub-tier__banner { display: none; }            /* the pill marks "popular" */
  .sub-tier--featured { background: none; padding: 0; box-shadow: none; margin-top: 0; }
  .sub-tier__inner, .sub-tier--featured .sub-tier__inner { padding: 0; border-radius: 0; background: none; }

  /* Plan header row */
  .sub-tier__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sub-tier__note { min-height: 0; margin-top: 3px; }
  .sub-price { margin: 0; }
  .sub-price__amount { font-size: 24px; }

  /* Features always visible as a compact Label–value spec list */
  .sub-tier__more { display: none; }
  .sub-tier__divider { display: block; height: 1px; margin: 14px 0 2px; }
  .sub-tier__feats { display: flex; gap: 0; }
  .sub-feat {
    display: grid;
    grid-template-columns: minmax(92px, 38%) 1fr;
    column-gap: 14px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .sub-feat:last-child { border-bottom: 0; }
  .sub-feat__ic { display: none; }
  .sub-feat__txt { display: contents; }
  .sub-feat__label { color: var(--color-muted); font-weight: var(--font-weight-semibold); }
  .sub-feat__val { color: var(--color-ink); font-weight: var(--font-weight-semibold); text-align: left; }
  .sub-feat__val::before { content: none; }       /* no colon in the spec rows */
  .sub-feat__val--none { display: inline; color: var(--color-subtle); font-weight: var(--font-weight-medium); }
  .sub-feat--x .sub-feat__label { color: var(--color-subtle); }

  /* Sticky Get-Started bar — bleeds to the modal edges, pinned to its bottom */
  .sub-tier__cta {
    order: 9;
    position: sticky;
    bottom: 0;
    width: calc(100% + 32px);          /* + the -16px bleed each side = flush to edges */
    margin: 16px -16px 0;
    padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, #6366F1, var(--color-brand));
    color: #fff;
    box-shadow: 0 -8px 22px rgba(15, 23, 42, .10);
  }
  .sub-tier__cta:hover { transform: none; box-shadow: 0 -8px 22px rgba(15, 23, 42, .10); }

  /* ── Radio-list plan picker + per-plan detail page (mobile) ── */
  .sub-plans-wrap { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 16px; transition: opacity .26s ease, transform .32s cubic-bezier(.16, 1, .3, 1); }
  /* Switching product slides only the plans (the switcher/dropdown stays put). */
  .sub-plans-wrap.is-leaving  { opacity: 0; transform: translateX(-24px); }
  .sub-plans-wrap.is-entering { opacity: 0; transform: translateX(24px); }
  .sub-plans__lead { font-size: var(--font-size-sm); color: var(--color-muted); margin: 0 0 14px; }
  .sub-plans { display: flex; flex-direction: column; gap: 12px; }
  .sub-plan { border: 1.5px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s, background .15s; }
  .sub-plan.is-selected { border-color: var(--color-brand); background: var(--color-brand-light); }
  .sub-plan__pick { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; background: transparent; border: 0; text-align: left; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .sub-plan__radio { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border); position: relative; transition: border-color .15s; }
  .sub-plan.is-selected .sub-plan__radio { border-color: var(--color-brand); }
  .sub-plan.is-selected .sub-plan__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-brand); }
  .sub-plan__main { flex: 1 1 auto; min-width: 0; }
  .sub-plan__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .sub-plan__name { font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
  .sub-plan__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--grad-ai); color: #fff; font-size: 9px; font-weight: var(--font-weight-bold); letter-spacing: .05em; text-transform: uppercase; }
  .sub-plan__note { display: block; font-size: var(--font-size-sm); color: var(--color-muted); margin-top: 3px; line-height: 1.4; }
  .sub-plan__price { flex: 0 0 auto; font-size: var(--font-size-md); font-weight: var(--font-weight-extrabold); color: var(--color-ink); white-space: nowrap; }
  /* "View details" is a plain text link, not a card button — aligned under the
     plan name (radio 20 + gap 13 + pick pad 16 = 49px). */
  .sub-plan__details { display: inline-flex; align-items: center; gap: 4px; width: auto; margin: -2px 0 0; padding: 0 16px 13px 49px; background: none; border: 0; color: var(--color-brand); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .sub-plan__details:hover { opacity: .78; }
  .sub-plan__details svg { width: 12px; height: 12px; }

  /* Detail page: lock the pane to the sheet height (top:0 + bottom:0 → definite)
     so the title/price header + footer stay put and ONLY the features scroll. */
  .sub-pane:has(.sub-detail) { bottom: 0; }
  .sub-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-top: 50px; padding-bottom: 0; }
  /* Fixed header (below the close X): plan name + price on one row, and any
     badge on its OWN line below — so a long badge ("Best for Growing
     Businesses") never gets crammed between the name and price. */
  .sub-detail__head { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0px; padding: 0 0 14px; border-bottom: 1px solid var(--color-divider); }
  .sub-detail__headrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .sub-detail__badge { align-self: flex-start; white-space: nowrap; }
  .sub-detail__save { margin: 10px 0 0; }
  .sub-detail__name { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--color-ink); }
  .sub-detail__sub { flex: 0 0 auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); margin: 16px 0 0; }
  /* The only scrolling region on the detail page. */
  .sub-detail__feats { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; list-style: none; margin: 12px 0 0; padding: 0 0 6px; display: flex; flex-direction: column; gap: 12px; }
  .sub-detail__feats::-webkit-scrollbar { display: none; }
  /* The detail page lists features like the DESKTOP checklist — a check icon +
     flowing "Label: value" text — NOT the 2-column spec grid used on plan cards. */
  .sub-detail__feats .sub-feat {
    display: flex; grid-template-columns: none; column-gap: 0; gap: 10px;
    align-items: flex-start; padding: 0; border-bottom: 0;
    font-size: var(--font-size-base); color: var(--color-ink-soft); line-height: 1.45;
  }
  .sub-detail__feats .sub-feat__ic { display: inline-flex; }
  .sub-detail__feats .sub-feat__txt { display: block; }
  .sub-detail__feats .sub-feat__label,
  .sub-detail__feats .sub-feat__val { display: inline; color: inherit; font-weight: var(--font-weight-normal); text-align: left; }
  .sub-detail__feats .sub-feat__val::before { content: ': '; }
  .sub-detail__feats .sub-feat--x { color: var(--color-subtle); }
  .sub-detail__feats .sub-feat--x .sub-feat__label { color: var(--color-subtle); }
  .sub-detail__feats .sub-feat__val--none { display: none; }

  /* ── Sticky action footer: only the content scrolls; the button bar stays
        pinned to the sheet bottom (full-bleed canvas bg over the scroll). ── */
  .sub-foot {
    position: sticky; bottom: 0; margin-top: auto;
    background: var(--color-canvas);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
  }
  /* list + detail footers bleed past the 16px sheet padding */
  .sub-plans-wrap .sub-foot, .sub-detail .sub-foot {
    margin-left: -16px; margin-right: -16px;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
  }
  /* form actions stay inset — same 16px gutter as the fields above (NOT bled to
     the sheet edges), so the Continue button lines up with the inputs + chip */
  .sub-actions.sub-foot {
    margin-top: auto;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* Detail footer — Back (icon) + primary Choose on one row */
  .sub-detail__foot { display: flex; align-items: stretch; gap: 10px; }
  .sub-detail__back { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; padding: 0; background: var(--color-surface); border: 1.5px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-ink-soft); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
  .sub-detail__back:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .sub-detail__back svg { width: 20px; height: 20px; }
  .sub-detail__cta { flex: 1; width: auto; }

  /* ── Form pane: selected-plan chip → fields, with the submit button pinned
        (sticky) at the bottom while the fields scroll. padding-top clears the
        close X + grab handle. ── */
  /* single 16px horizontal gutter for the whole pane — chip and fields all
     inherit it, so every block shares the exact same left/right edge */
  .sub-form { flex-direction: column; padding: 44px 16px 0; }
  .sub-form__body { justify-content: flex-start; }

  /* selected-plan chip (top) */
  .sub-plan-chip { margin: 0 0 12px; }
  .sub-plan-chip__plan { white-space: normal; }  /* show the full plan name, no ellipsis */
  /* Payment ("simple" cards): hide the chip's price on mobile (the "Flat Rate /
     Interchange Rate" inline reads badly in the narrow price slot). */
  .sub-plan-chip--simple .sub-plan-chip__price { display: none; }

  .sub-fields { flex: 1; max-width: none; margin: 0; padding: 6px 0 0; }
  .sub-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   404 — modern animated not-found screen (rendered by router → init404)
   ════════════════════════════════════════════════════════════════════ */
.nf {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--space-6);
  text-align: center;
  background:
    radial-gradient(1200px 700px at 12% -10%, #F5F3FF, transparent 60%),
    radial-gradient(1000px 640px at 112% 112%, #EFF6FF, transparent 55%),
    var(--color-canvas);
}
.nf__bg { position: absolute; inset: 0; pointer-events: none; }
.nf__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .42;
  will-change: transform;
}
.nf__orb--1 { width: 360px; height: 360px; left: -60px;  top: -40px;     background: #7C3AED; animation: nf-drift 14s ease-in-out infinite; }
.nf__orb--2 { width: 300px; height: 300px; right: -40px; top: 18%;       background: #EC4899; animation: nf-drift 18s ease-in-out infinite reverse; }
.nf__orb--3 { width: 420px; height: 420px; left: 32%;    bottom: -130px; background: #3B82F6; animation: nf-drift 22s ease-in-out infinite; }

.nf__content {
  position: relative;
  z-index: 1;
  max-width: 540px;
  animation: nf-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
.nf__badge {
  display: inline-block;
  margin-bottom: var(--space-6);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-light);
  color: var(--color-brand-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nf__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .04em;
  font-size: clamp(96px, 24vw, 210px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  animation: nf-float 6s ease-in-out infinite;
}
.nf__digit {
  background: var(--grad-ai);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* The middle "0" is an orbit: a gradient donut ring with a moon circling it. */
.nf__orbit {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: .82em;
  height: .96em;
}
.nf__planet {
  width: .62em;
  height: .92em;
  border-radius: 50%;
  background: var(--grad-ai);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%);
          mask: radial-gradient(closest-side, transparent 62%, #000 64%);
}
.nf__moon {
  position: absolute;
  width: .12em;
  height: .12em;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 .14em rgba(124, 58, 237, .85);
  animation: nf-orbit 4.5s linear infinite;
}

.nf__title {
  margin: var(--space-5) 0 var(--space-3);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -.02em;
  color: var(--color-ink);
}
.nf__sub {
  margin: 0 auto var(--space-8);
  max-width: 440px;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-muted);
}
.nf__route {
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-light);
  color: var(--color-brand-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.nf__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes nf-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, 30px) scale(1.08); }
  66%      { transform: translate(-30px, 20px) scale(.96); }
}
@keyframes nf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes nf-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Park the moon at the top of the ring (translateY), then spin the whole orbit. */
@keyframes nf-orbit {
  from { transform: rotate(0deg)   translateY(-.52em) rotate(0deg); }
  to   { transform: rotate(360deg) translateY(-.52em) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nf__orb, .nf__code, .nf__moon, .nf__content { animation: none; }
}

/* ───────────────────────── Media loading skeleton ─────────────────────────
   Applied by js/components/media-loader.js to any <img>/<video> still loading.
   A soft violet shimmer sweeps across the element's box until the media is
   ready, then it fades in. Shimmer lives on the element's own background (no
   wrapper) so it inherits the element's size + border-radius automatically. */
.media-skeleton {
  background-color: #ece9f6;
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, .65) 50%,
    rgba(255, 255, 255, 0) 80%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: media-shimmer 1.25s ease-in-out infinite;
}
/* hide any alt-text flash while the shimmer shows */
.media-skeleton:not(.is-loaded) { color: transparent; }
.media-skeleton.is-loaded {
  background-image: none;
  background-color: transparent;
  animation: none;
}
/* media fades in once decoded */
img.media-skeleton.is-loaded,
video.media-skeleton.is-loaded { animation: media-fade-in .4s ease both; }

@keyframes media-shimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
@keyframes media-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .media-skeleton { animation: none; }
  img.media-skeleton.is-loaded,
  video.media-skeleton.is-loaded { animation: none; }
}